// Trust section + Author/About
function Avatar({ initials, hue = 160 }) {
  return (
    <div className="w-10 h-10 rounded-full grid place-items-center font-semibold text-[13px] text-ink-950"
         style={{ background: `linear-gradient(135deg, oklch(0.82 0.11 ${hue}), oklch(0.72 0.13 ${hue + 40}))` }}>
      {initials}
    </div>
  );
}

function TrustSection() {
  return (
    <section className="relative py-20 md:py-24 border-t border-ink-600/50">
      <div className="max-w-[1240px] mx-auto px-5 lg:px-8">
        <div className="text-center mb-12 max-w-[640px] mx-auto">
          <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-3">Trust</div>
          <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-tight">
            Trusted by 10,000+ Stake players worldwide.
          </h2>
        </div>

        {/* Badges */}
        <div className="flex flex-wrap justify-center gap-3 mb-12">
          {[
            { i: "ShieldCheck", t: "Expert Reviewed" },
            { i: "Calendar", t: "Updated Monthly" },
            { i: "Sparkles", t: "Independent & Unbiased" },
          ].map(b => {
            const IconComp = Icon[b.i];
            return (
              <div key={b.t} className="flex items-center gap-2 px-4 py-2.5 rounded-full border border-ink-600 bg-ink-800/60 text-[12.5px] text-fg-muted">
                <IconComp className="w-3.5 h-3.5 text-teal" /> {b.t}
              </div>
            );
          })}
        </div>

        {/* Testimonials */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
          {SW_DATA.TESTIMONIALS.map((t, i) => (
            <div key={i} className="rounded-2xl border border-ink-600 bg-ink-800/60 p-6 flex flex-col">
              <div className="text-teal text-2xl leading-none mb-3 font-display">“</div>
              <p className="text-[14px] text-fg-muted leading-relaxed flex-1">{t.quote}</p>
              <div className="mt-5 pt-4 border-t border-ink-700 flex items-center gap-3">
                <Avatar initials={t.avatar} hue={120 + i * 55} />
                <div>
                  <div className="text-[13.5px] font-semibold text-fg">{t.name}</div>
                  <div className="text-[11.5px] text-fg-dim">{t.country}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Author ----------
function AuthorSection() {
  return (
    <section id="about" className="relative py-20 md:py-24">
      <div className="max-w-[960px] mx-auto px-5 lg:px-8">
        <div className="rounded-3xl border border-ink-600 bg-ink-800/70 p-8 md:p-12 grid md:grid-cols-[auto_1fr] gap-8 items-center">
          <div className="relative shrink-0">
            <div className="w-28 h-28 md:w-36 md:h-36 rounded-full grid place-items-center font-display text-3xl font-semibold text-ink-950 shadow-xl"
                 style={{ background: "conic-gradient(from 180deg, #10B981, #26A5E4, #10B981)" }}>
              <div className="w-[88%] h-[88%] rounded-full grid place-items-center"
                   style={{ background: "linear-gradient(135deg, #B8E8D2, #7FD7BF)" }}>
                AC
              </div>
            </div>
            <div className="absolute -bottom-1 -right-1 bg-ink-900 border border-teal/40 rounded-full px-2 py-1 flex items-center gap-1 text-[10.5px] text-teal">
              <Icon.ShieldCheck className="w-3 h-3" /> Verified
            </div>
          </div>

          <div>
            <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-3">Lead Author</div>
            <h3 className="font-display text-[30px] md:text-[34px] font-semibold tracking-tight">Alex Crypto</h3>
            <p className="mt-3 text-[15.5px] text-fg-muted leading-relaxed max-w-[560px]">
              Former crypto exchange analyst with 5+ years covering crypto gambling. I've tested every major platform so you don't have to — and I publish what I actually find, not what pays best.
            </p>
            <div className="mt-5 flex items-center gap-2">
              <a href="#" className="w-9 h-9 grid place-items-center rounded-lg border border-ink-600 text-fg-muted hover:text-fg hover:border-teal/40 transition"><Icon.X /></a>
              <a href={SW_DATA.TG_LINK} target="_blank" rel="noopener" className="w-9 h-9 grid place-items-center rounded-lg border border-ink-600 text-fg-muted hover:text-tg hover:border-tg/40 transition"><Icon.Telegram className="w-4 h-4" /></a>
              <a href="#" className="w-9 h-9 grid place-items-center rounded-lg border border-ink-600 text-fg-muted hover:text-fg hover:border-teal/40 transition"><Icon.LinkedIn /></a>
              <a href="#" className="w-9 h-9 grid place-items-center rounded-lg border border-ink-600 text-fg-muted hover:text-fg hover:border-teal/40 transition"><Icon.Mail /></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.TrustSection = TrustSection;
window.AuthorSection = AuthorSection;