// Featured Guides grid + How It Works
function TagPill({ t, color }) {
  const cls = SW_DATA.TAG_STYLES[color] || SW_DATA.TAG_STYLES.teal;
  return <span className={`inline-block text-[10.5px] uppercase tracking-[0.08em] font-semibold px-2 py-1 rounded border ${cls}`}>{t}</span>;
}

function GuideCard({ g }) {
  const IconComp = Icon[g.icon] || Icon.Book;
  return (
    <a href={swResolve(g.slug)} className="card-hover group relative block rounded-2xl border border-ink-600 bg-ink-800/70 p-6 h-full overflow-hidden">
      {g.featured && (
        <span className="absolute top-5 right-5 text-[9.5px] uppercase tracking-[0.12em] font-bold text-ink-950 bg-teal px-2 py-1 rounded">
          {g.featured}
        </span>
      )}
      <div className="flex items-center gap-3 mb-5">
        <div className="w-11 h-11 rounded-xl grid place-items-center border border-ink-600 bg-ink-900 text-teal">
          <IconComp className="w-5 h-5" />
        </div>
        <TagPill t={g.tag} color={g.tagColor} />
      </div>

      <h3 className="font-display text-[19px] font-semibold leading-snug text-fg group-hover:text-teal transition-colors">
        {g.title}
      </h3>
      <p className="mt-2 text-[14px] text-fg-muted leading-relaxed">{g.excerpt}</p>

      <div className="mt-6 pt-5 border-t border-ink-700 flex items-center gap-4 text-[12px] text-fg-dim">
        <span className="flex items-center gap-1.5"><Icon.Clock className="w-3.5 h-3.5" /> {g.read} min read</span>
        <span className="flex items-center gap-1.5"><Icon.Calendar className="w-3.5 h-3.5" /> {g.date}</span>
        <span className="ml-auto text-teal opacity-0 group-hover:opacity-100 transition flex items-center gap-1">
          Read <Icon.ArrowRight className="w-3 h-3" />
        </span>
      </div>
    </a>
  );
}

function FeaturedGuides() {
  return (
    <section id="guides" 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="flex items-end justify-between gap-6 mb-10">
          <div>
            <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-3">Featured Guides</div>
            <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-tight max-w-[620px]">
              Start with the essentials.
            </h2>
          </div>
          <a href={swResolve("/guides")} className="hidden md:inline-flex items-center gap-1.5 text-[13.5px] text-fg-muted hover:text-teal transition">
            Browse all 50+ guides <Icon.ArrowRight className="w-3.5 h-3.5" />
          </a>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
          {SW_DATA.GUIDES.map(g => <GuideCard key={g.id} g={g} />)}
        </div>
      </div>
    </section>
  );
}

// ---------- How It Works ----------
const STEPS = [
  { n: "01", title: "Learn", body: "Understand Stake's verification tiers, geo rules and what they mean for your situation.", icon: "Book" },
  { n: "02", title: "Prepare", body: "Follow our step-by-step playbooks to get your account, wallet and access set up cleanly.", icon: "Key" },
  { n: "03", title: "Play", body: "Access the platform with full verification, rakeback configured and informed bankroll strategy.", icon: "Sparkles" },
];

function HowItWorks() {
  return (
    <section className="relative py-20 md:py-24 overflow-hidden">
      <div className="absolute inset-0 dot-bg opacity-40 pointer-events-none" />
      <div className="relative max-w-[1240px] mx-auto px-5 lg:px-8">
        <div className="text-center mb-14 max-w-[640px] mx-auto">
          <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-3">How It Works</div>
          <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-tight">
            Three steps from curious to confident.
          </h2>
        </div>

        <div className="grid md:grid-cols-3 gap-5 relative">
          {/* Connector line */}
          <div className="hidden md:block absolute top-[58px] left-[16%] right-[16%] h-px bg-gradient-to-r from-transparent via-teal/40 to-transparent" />

          {STEPS.map((s) => {
            const IconComp = Icon[s.icon];
            return (
              <div key={s.n} className="relative rounded-2xl border border-ink-600 bg-ink-800/70 p-7">
                <div className="flex items-start justify-between mb-5">
                  <div className="relative w-14 h-14 rounded-2xl grid place-items-center border border-teal/30 bg-teal/5 text-teal">
                    <IconComp className="w-6 h-6" />
                  </div>
                  <span className="font-mono text-[11px] tracking-widest text-fg-dim">{s.n}</span>
                </div>
                <h3 className="font-display text-[22px] font-semibold">{s.title}</h3>
                <p className="mt-2 text-[14.5px] text-fg-muted leading-relaxed">{s.body}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.FeaturedGuides = FeaturedGuides;
window.HowItWorks = HowItWorks;