// Country Selector + Latest Articles
function StatusBadge({ status }) {
  const map = {
    available:  { label: "Available",  cls: "bg-teal/15 text-teal border-teal/30",   icon: <Icon.Check className="w-3.5 h-3.5" /> },
    restricted: { label: "Restricted", cls: "bg-warn/15 text-warn border-warn/30",   icon: <Icon.Warning className="w-3.5 h-3.5" /> },
    blocked:    { label: "Blocked",    cls: "bg-danger/15 text-danger border-danger/30", icon: <Icon.Block className="w-3.5 h-3.5" /> },
  };
  const m = map[status];
  return (
    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-[11.5px] font-medium ${m.cls}`}>
      {m.icon}{m.label}
    </span>
  );
}

function CountrySelector() {
  const [sel, setSel] = useState("AU");
  const [query, setQuery] = useState("");

  const country = SW_DATA.COUNTRIES.find(c => c.code === sel);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return SW_DATA.COUNTRIES;
    return SW_DATA.COUNTRIES.filter(c => c.name.toLowerCase().includes(q) || c.code.toLowerCase().includes(q));
  }, [query]);

  const showCtx = country && country.status !== "available";

  return (
    <section id="countries" className="relative py-20 md:py-24 border-t border-ink-600/50 scroll-mt-20">
      <div className="max-w-[1240px] mx-auto px-5 lg:px-8">
        <div className="grid lg:grid-cols-[1fr_1.2fr] gap-10 items-start">
          <div>
            <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-3">Country Check</div>
            <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-tight">
              Is Stake accessible where you are?
            </h2>
            <p className="mt-4 text-[15.5px] text-fg-muted leading-relaxed max-w-[520px]">
              Rules change constantly. Pick your country to see its current status, whether a VPN is typically required, and which verification level applies.
            </p>

            <div className="mt-6 relative">
              <Icon.Search className="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-fg-dim" />
              <input
                value={query} onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter countries..."
                className="w-full pl-10 pr-4 py-3 rounded-xl bg-ink-800 border border-ink-600 text-fg placeholder:text-fg-dim text-[14px]"
              />
            </div>

            <div className="mt-4 max-h-[360px] overflow-auto pr-1 rounded-xl">
              <div className="grid grid-cols-2 gap-1.5">
                {filtered.map(c => {
                  const active = c.code === sel;
                  return (
                    <button
                      key={c.code} onClick={() => setSel(c.code)}
                      className={`flex items-center justify-between gap-2 px-3 py-2.5 rounded-lg border text-left transition ${active ? "border-teal/50 bg-teal/10" : "border-ink-600 bg-ink-800/50 hover:bg-ink-800 hover:border-ink-500"}`}
                    >
                      <span className="flex items-center gap-2 min-w-0">
                        <span className="font-mono text-[10.5px] text-fg-dim shrink-0">{c.code}</span>
                        <span className={`text-[13.5px] truncate ${active ? "text-fg" : "text-fg-muted"}`}>{c.name}</span>
                      </span>
                      <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${c.status === "available" ? "bg-teal" : c.status === "restricted" ? "bg-warn" : "bg-danger"}`} />
                    </button>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Result Panel */}
          <div className="relative grad-border rounded-3xl bg-ink-800/60 p-6 md:p-8">
            <div className="flex items-start justify-between gap-4 mb-6">
              <div>
                <div className="text-[11px] uppercase tracking-widest text-fg-dim font-mono mb-2">Current status</div>
                <div className="font-display text-[28px] md:text-[34px] font-semibold leading-tight">{country.name}</div>
              </div>
              <div className="w-16 h-16 rounded-2xl border border-ink-600 bg-ink-900 grid place-items-center">
                <span className="font-mono text-[15px] text-fg-muted">{country.code}</span>
              </div>
            </div>

            <div className="grid grid-cols-3 gap-3">
              <div className="rounded-xl border border-ink-600 bg-ink-900/60 p-4">
                <div className="text-[10.5px] uppercase tracking-widest text-fg-dim font-mono mb-2">Status</div>
                <StatusBadge status={country.status} />
              </div>
              <div className="rounded-xl border border-ink-600 bg-ink-900/60 p-4">
                <div className="text-[10.5px] uppercase tracking-widest text-fg-dim font-mono mb-2">VPN needed</div>
                <div className={`text-[15px] font-semibold ${country.vpn ? "text-warn" : "text-teal"}`}>
                  {country.vpn ? "Yes" : "No"}
                </div>
              </div>
              <div className="rounded-xl border border-ink-600 bg-ink-900/60 p-4">
                <div className="text-[10.5px] uppercase tracking-widest text-fg-dim font-mono mb-2">KYC level</div>
                <div className="text-[15px] font-semibold text-fg">{country.level}</div>
              </div>
            </div>

            <p className="mt-5 text-[14px] text-fg-muted leading-relaxed">{country.note}</p>

            <a href={swResolve(country.slug)} className="mt-5 inline-flex items-center gap-1.5 text-[13.5px] text-teal hover:text-teal/80">
              Read the {country.name} guide <Icon.ArrowRight className="w-3.5 h-3.5" />
            </a>

            {showCtx && (
              <div
                className="mt-6 rounded-2xl p-5 md:p-6 border border-teal/25"
                style={{ background: "linear-gradient(135deg, rgba(16,185,129,0.10), rgba(16,185,129,0.04))" }}
              >
                <div className="flex items-start gap-4">
                  <div className="shrink-0 w-10 h-10 rounded-xl grid place-items-center bg-teal/15 text-teal border border-teal/30">
                    <Icon.ShieldCheck className="w-5 h-5" />
                  </div>
                  <div className="flex-1">
                    <div className="font-display text-[16px] font-semibold text-fg">
                      Accessing Stake from {country.name} requires additional setup
                    </div>
                    <p className="mt-1.5 text-[13.5px] text-fg-muted leading-relaxed">
                      Our team can guide you through the process step by step — verification, access, wallet setup. Usually takes under 15 minutes.
                    </p>
                    <a href={SW_DATA.TG_LINK} target="_blank" rel="noopener"
                       className="mt-4 inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-teal text-ink-950 font-semibold text-[13.5px] hover:bg-teal/90 transition">
                      <Icon.Telegram className="w-4 h-4" /> Get Expert Help <Icon.ArrowRight className="w-3.5 h-3.5" />
                    </a>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Latest Articles ----------
function LatestArticles() {
  return (
    <section id="blog" className="relative py-20 md:py-24 scroll-mt-20">
      <div className="max-w-[1240px] mx-auto px-5 lg:px-8">
        <div className="flex items-end justify-between gap-6 mb-10">
          <div>
            <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-3">From the Blog</div>
            <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-tight">
              Latest articles.
            </h2>
          </div>
          <a href={swResolve("/blog")} className="hidden md:inline-flex items-center gap-1.5 text-[13.5px] text-fg-muted hover:text-teal transition">
            All articles <Icon.ArrowRight className="w-3.5 h-3.5" />
          </a>
        </div>

        <div className="grid md:grid-cols-3 gap-4">
          {SW_DATA.LATEST.map((a, i) => (
            <a key={i} href={swResolve(a.slug)} className="card-hover group rounded-2xl border border-ink-600 bg-ink-800/60 p-6 flex flex-col">
              <div className="flex items-center gap-2 text-[11.5px] text-fg-dim mb-6">
                <span className="font-mono">{a.date}</span>
                <span className="w-1 h-1 rounded-full bg-fg-dim/60" />
                <span className="text-teal">{a.cat}</span>
              </div>
              <h3 className="font-display text-[18px] font-semibold leading-snug text-fg group-hover:text-teal transition">{a.title}</h3>
              <div className="mt-auto pt-6 flex items-center gap-1.5 text-[13px] text-fg-muted group-hover:text-teal transition">
                Read article <Icon.ArrowRight className="w-3.5 h-3.5" />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.CountrySelector = CountrySelector;
window.LatestArticles = LatestArticles;