기기 타일을 고르면 설치 단계가 바뀌는 탭 섹션

import { useState } from "react";

const icon = "h-[22px] w-[22px]";
const line = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };

const PLATFORMS = [
  {
    id: "ios",
    label: "iPhone",
    icon: (
      <svg viewBox="0 0 24 24" className={icon} {...line} aria-hidden>
        <rect x="7" y="2.5" width="10" height="19" rx="2.5" />
        <path d="M11 18.5h2" />
      </svg>
    ),
    steps: ["App Store에서 Snapvault를 받습니다.", "사진 접근을 '모든 사진'으로 허용합니다.", "Wi-Fi 연결 시 자동 백업을 켭니다."],
    action: "App Store에서 받기",
  },
  {
    id: "android",
    label: "Android",
    icon: (
      <svg viewBox="0 0 24 24" className={icon} {...line} aria-hidden>
        <rect x="6" y="2.5" width="12" height="19" rx="2" />
        <path d="M6 6h12M6 18h12" />
      </svg>
    ),
    steps: ["Google Play에서 Snapvault를 받습니다.", "사진과 동영상 접근을 허용합니다.", "충전 중에만 백업하도록 설정할 수 있습니다."],
    action: "Google Play에서 받기",
  },
  {
    id: "mac",
    label: "Mac",
    icon: (
      <svg viewBox="0 0 24 24" className={icon} {...line} aria-hidden>
        <rect x="3" y="4" width="18" height="12" rx="2" />
        <path d="M2 19.5h20" />
      </svg>
    ),
    steps: ["설치 파일을 받아 응용 프로그램 폴더로 옮깁니다.", "백업할 폴더를 고릅니다.", "메뉴 막대 아이콘에서 진행 상황을 봅니다."],
    action: "Mac용 내려받기",
  },
  {
    id: "windows",
    label: "Windows",
    icon: (
      <svg viewBox="0 0 24 24" className={icon} {...line} aria-hidden>
        <path d="M3 5.5 10.5 4.5v7H3zM12.5 4.2 21 3v8.5h-8.5zM3 12.5h7.5v7L3 18.5zM12.5 12.5H21V21l-8.5-1.2z" />
      </svg>
    ),
    steps: ["설치 파일을 실행합니다.", "사진 폴더와 외장 드라이브를 고릅니다.", "작업 표시줄 아이콘으로 일시 정지할 수 있습니다."],
    action: "Windows용 내려받기",
  },
  {
    id: "web",
    label: "웹",
    icon: (
      <svg viewBox="0 0 24 24" className={icon} {...line} aria-hidden>
        <circle cx="12" cy="12" r="9" />
        <path d="M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3Z" />
      </svg>
    ),
    steps: ["브라우저에서 snapvault.app에 로그인합니다.", "사진을 끌어다 놓으면 바로 올라갑니다.", "앨범 공유 링크를 만들 수 있습니다."],
    action: "웹에서 열기",
  },
];

export default function PlatformSetupTabs() {
  const [active, setActive] = useState(PLATFORMS[0].id);
  const current = PLATFORMS.find((p) => p.id === active) ?? PLATFORMS[0];

  return (
    <section className="w-full bg-[#0b0b0f] px-5 py-16 text-zinc-100 sm:px-8">
      <div className="mx-auto max-w-3xl">
        <h2 className="text-center text-2xl font-semibold tracking-tight sm:text-3xl">어디서든 같은 앨범으로</h2>
        <p className="mt-2 text-center text-sm text-zinc-400">쓰는 기기를 고르면 설치 방법을 알려 드려요.</p>

        <div role="tablist" aria-label="기기" className="mt-8 flex flex-wrap justify-center gap-2">
          {PLATFORMS.map((p) => {
            const selected = p.id === active;
            return (
              <button
                key={p.id}
                type="button"
                role="tab"
                id={`tab-${p.id}`}
                aria-selected={selected}
                aria-controls="platform-panel"
                onClick={() => setActive(p.id)}
                className={`flex h-[84px] w-[92px] flex-col items-center justify-center gap-2 rounded-xl border text-xs transition-colors ${
                  selected
                    ? "border-emerald-400/50 bg-emerald-400/10 text-zinc-100"
                    : "border-white/10 bg-white/[0.03] text-zinc-400 hover:border-white/20 hover:text-zinc-100"
                }`}
              >
                <span className={selected ? "text-emerald-300" : ""}>{p.icon}</span>
                {p.label}
              </button>
            );
          })}
        </div>

        <div
          role="tabpanel"
          id="platform-panel"
          aria-labelledby={`tab-${current.id}`}
          className="mx-auto mt-4 max-w-2xl rounded-2xl border border-white/10 bg-[#121218] p-5"
        >
          <h3 className="font-medium">{current.label}에서 시작하기</h3>
          <ol className="mt-3 list-decimal space-y-2 pl-5 text-sm text-zinc-400 marker:text-zinc-600">
            {current.steps.map((s) => (
              <li key={s}>{s}</li>
            ))}
          </ol>
          <a
            href="#"
            className="mt-4 inline-flex h-8 items-center rounded-lg border border-white/10 bg-white/[0.05] px-3 text-[13px] font-medium transition hover:border-white/20 hover:bg-white/[0.1]"
          >
            {current.action}
          </a>
        </div>
      </div>
    </section>
  );
}