---
// 市の公式SNSの一覧。各サービス名の左にブランドアイコンを表示する。
type Icon = "x" | "line" | "facebook" | "instagram" | "youtube";

const ICONS: Record<Icon, string> = {
  x: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.451-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z"/></svg>',
  line: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 10.304c0-5.369-5.383-9.738-12-9.738-6.616 0-12 4.369-12 9.738 0 4.814 4.269 8.846 10.036 9.608.391.084.924.258 1.059.592.122.303.08.777.039 1.084l-.172 1.028c-.052.303-.24 1.187 1.039.647 1.28-.54 6.899-4.065 9.414-6.958 1.736-1.902 2.585-3.83 2.585-5.998ZM8.774 13.511H6.109a.644.644 0 0 1-.644-.644V7.72a.644.644 0 0 1 1.288 0v4.503h2.021a.644.644 0 0 1 0 1.288Zm2.786-.644a.644.644 0 0 1-1.288 0V7.72a.644.644 0 0 1 1.288 0v5.147Zm5.723 0a.644.644 0 0 1-1.102.494l-2.588-1.859v1.365a.644.644 0 0 1-1.288 0V7.72a.644.644 0 0 1 1.102-.494l2.588 1.859V7.72a.644.644 0 0 1 1.288 0v5.147Zm4.463-3.501h-2.021v1.147h2.021a.644.644 0 0 1 0 1.288h-2.021v1.159h2.021a.644.644 0 0 1 0 1.288h-2.665a.644.644 0 0 1-.644-.644V7.72a.644.644 0 0 1 .644-.644h2.665a.644.644 0 0 1 0 1.288Z"/></svg>',
  facebook:
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.073C24 5.446 18.627 0 12 0S0 5.446 0 12.073C0 18.062 4.388 23.027 10.125 23.927v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073Z"/></svg>',
  instagram:
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0Zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03Zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162ZM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4Zm7.846-10.405a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0Z"/></svg>',
  youtube:
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.545 15.568V8.432L15.818 12l-6.273 3.568Z"/></svg>',
};

const SNS: { icon: Icon; name: string; handle: string; url: string }[] = [
  { icon: "x", name: "X（旧Twitter）", handle: "@kodaira_tokyo", url: "https://twitter.com/kodaira_tokyo" },
  { icon: "line", name: "LINE", handle: "小平市（公式）", url: "https://page.line.me/kodairacity" },
  { icon: "facebook", name: "Facebook", handle: "小平市役所広報課", url: "https://www.facebook.com/koho.kodairacity/" },
  { icon: "instagram", name: "Instagram", handle: "@kodaira_city", url: "https://www.instagram.com/kodaira_city" },
  {
    icon: "youtube",
    name: "YouTube",
    handle: "小平市公式チャンネル",
    url: "https://www.youtube.com/channel/UCp9YZtjCNcGOq3fQlln31Xg",
  },
];
---

<ul class="sns-links">
  {
    SNS.map((s) => (
      <li>
        <a href={s.url}>
          <span class={`sns-badge sns-${s.icon}`} set:html={ICONS[s.icon]} />
          <span class="sns-name">{s.name}</span>
          <span class="sns-handle">{s.handle}</span>
        </a>
      </li>
    ))
  }
</ul>

<style>
  .sns-links {
    display: grid;
    gap: 0.4rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
  }
  .sns-links li {
    margin: 0;
  }
  .sns-links a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--sl-color-gray-6, var(--sl-color-gray-5));
    border-radius: 10px;
    text-decoration: none;
    line-height: 1.4;
  }
  .sns-links a:hover {
    background: var(--sl-color-bg-sidebar);
    border-color: var(--sl-color-gray-5);
  }
  .sns-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
  }
  .sns-badge :global(svg) {
    display: block;
    width: 1.05rem;
    height: 1.05rem;
  }
  .sns-x {
    background: #0f1419;
  }
  .sns-line {
    background: #06c755;
  }
  .sns-facebook {
    background: #1877f2;
  }
  .sns-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  }
  .sns-youtube {
    background: #ff0033;
  }
  .sns-name {
    flex: none;
    font-weight: 700;
    color: var(--sl-color-text);
  }
  .sns-handle {
    min-width: 0;
    color: var(--sl-color-gray-2);
    font-size: 0.9em;
  }
  :global([data-theme="dark"]) .sns-badge {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  }
</style>