// SPEAKER, MISSION QUOTE, IMPACT STATS, "IS THIS FOR YOU?" QUALIFIER
function Speaker() {
  return (
    <section id="speaker" className="relative py-20 lg:py-28">
      <div className="mx-auto max-w-[1320px] px-5 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-10 lg:gap-14 items-center">
          {/* Left: avatar */}
          <div className="lg:col-span-5 reveal">
            <div className="relative max-w-[440px] overflow-hidden">
              <div className="absolute inset-0 -z-10 opacity-60 blur-3xl"
                   style={{ background: "radial-gradient(closest-side, rgba(0,212,170,0.30), transparent 70%)" }} />
              <div className="relative aspect-square rounded-[28px] overflow-hidden glass-strong ring-teal">
                {/* Actual profile image */}
                <img
                  src="baseshgalaprofile.webp"
                  alt="Basesh Gala"
                  className="absolute inset-0 w-full h-full object-cover object-top"
                />
                {/* subtle bottom gradient */}
                <div className="absolute bottom-0 left-0 right-0 h-1/3 pointer-events-none"
                     style={{ background: "linear-gradient(180deg, transparent, rgba(7,15,30,0.6))" }} />
                {/* badge */}
                <div className="absolute top-5 left-5 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full glass text-[10px] uppercase tracking-[0.2em] text-teal">
                  <Icon.Medal size={12} /> CFA · FRM
                </div>
              </div>
              {/* signature card */}
              <div className="hidden sm:block absolute -right-4 -bottom-6 glass-strong rounded-2xl px-5 py-4 max-w-[240px] shadow-softCard">
                <div className="text-[11px] uppercase tracking-[0.2em] text-mute/80">Mentored at</div>
                <div className="text-[14px] mt-1 leading-snug font-medium">
                  Wall Street firms &amp; global consulting practices across 12 countries.
                </div>
              </div>
            </div>
          </div>

          {/* Right: text + stats */}
          <div className="lg:col-span-7 reveal">
            <SectionEyebrow>Meet your mentor</SectionEyebrow>
            <h2 className="mt-5 text-[26px] sm:text-[40px] lg:text-[54px] leading-[1.05] font-semibold tracking-tight">
              Hey, I&rsquo;m <span className="grad-text">Basesh Gala</span>.
            </h2>
            <div className="mt-3 flex flex-wrap items-center gap-2 text-[12px] uppercase tracking-[0.18em] text-mute">
              <Tag>CFA</Tag><Tag>FRM</Tag><Tag>Business Mentor</Tag><Tag>Investor</Tag>
            </div>
            <p className="mt-6 text-mute leading-relaxed max-w-[640px]">
              Born into an entrepreneurial family, I grew up watching businesses get built &mdash; and broken.
              16 degrees, two decades on Wall Street and global consulting desks, and a relentless obsession with one
              question: <span className="text-white">how does an Indian SME quietly become a billion-rupee, IPO-worthy company?</span>
              I&rsquo;ve spent the last decade decoding exactly that &mdash; and now I package it into one full day.
            </p>

            {/* Stat counters */}
            <div className="mt-9 grid grid-cols-2 sm:grid-cols-4 gap-3">
              <Stat n={90} suffix="K+" label="Subscribers" />
              <Stat n={1} suffix="M+" label="Followers" />
              <Stat n={1} suffix="L+" label="Trained" />
              <Stat n={10} suffix="M+" label="Views" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Tag({ children }) {
  return <span className="px-2.5 py-1 rounded-md glass text-mute font-medium">{children}</span>;
}

function Stat({ n, suffix, label }) {
  return (
    <div className="glass rounded-2xl px-4 py-5 text-center hover:border-teal/40 transition">
      <div className="text-[34px] lg:text-[40px] font-semibold tracking-tight grad-text leading-none">
        <CountUp to={n} />{suffix}
      </div>
      <div className="text-[11px] uppercase tracking-[0.18em] text-mute mt-2">{label}</div>
    </div>
  );
}

// MISSION QUOTE
function MissionQuote() {
  return (
    <section className="relative py-16 lg:py-24">
      <div className="mx-auto max-w-[1320px] px-5 lg:px-10">
        <div className="reveal relative rounded-[28px] glass-strong overflow-hidden">
          <div className="absolute top-0 left-0 w-[420px] h-[420px] rounded-full opacity-50 blur-3xl"
               style={{ background: "radial-gradient(closest-side, rgba(0,212,170,0.5), transparent 70%)" }} />
          <div className="absolute bottom-0 right-0 w-[420px] h-[420px] rounded-full opacity-40 blur-3xl"
               style={{ background: "radial-gradient(closest-side, rgba(245,166,35,0.35), transparent 70%)" }} />
          <div className="relative p-6 sm:p-8 lg:p-14 lg:grid lg:grid-cols-12 lg:gap-8 lg:items-start">
            <div className="hidden lg:block lg:col-span-1">
              <div className="w-1 h-full rounded-full bg-gradient-to-b from-teal via-teal-soft to-transparent" style={{ minHeight: 120 }} />
            </div>
            <blockquote className="lg:col-span-11">
              <Icon.Quote size={28} className="text-teal/60 mb-4" />
              <p className="font-display italic text-[18px] sm:text-[24px] lg:text-[44px] leading-[1.2] tracking-tight text-white">
                &ldquo;Every business, no matter how small, has the potential to scale globally and become an IPO-worthy company &mdash; if guided by the right strategy, systems, and mindset.&rdquo;
              </p>
              <footer className="mt-5 flex items-center gap-3 text-[11px] sm:text-[13px] uppercase tracking-[0.2em] text-mute">
                <span className="w-8 h-px bg-teal" /> Basesh Gala &middot; Founder, Rise with BG
              </footer>
            </blockquote>
          </div>
        </div>
      </div>
    </section>
  );
}

// IMPACT STATS BAR
function ImpactStats() {
  const stats = [
    { icon: <Icon.Users size={22} />, n: 100000, suffix: "+", label: "Trained Entrepreneurs" },
    { icon: <Icon.Building2 size={22} />, n: 12000, suffix: "+", label: "Companies Hand-Held" },
    { icon: <Icon.Rocket size={22} />, n: 60, suffix: "+", label: "Start-ups Accelerated" },
    { icon: <Icon.LineChart size={22} />, n: 40, suffix: "+", label: "IPOs Out" },
  ];
  return (
    <section className="relative py-12 lg:py-16">
      <div className="mx-auto max-w-[1320px] px-5 lg:px-10">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 reveal">
          {stats.map((s, i) => (
            <div key={i} className="glass-strong rounded-2xl p-6 lg:p-8 hover:border-teal/40 transition group">
              <div className="w-11 h-11 rounded-xl bg-teal/15 text-teal grid place-items-center group-hover:scale-105 transition">
                {s.icon}
              </div>
              <div className="mt-5 text-[22px] sm:text-[30px] lg:text-[44px] font-semibold tracking-tight grad-text leading-none overflow-hidden text-ellipsis">
                <CountUp to={s.n} />{s.suffix}
              </div>
              <div className="mt-2 text-[12px] uppercase tracking-[0.18em] text-mute">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// QUALIFIER — IS THIS EVENT FOR YOU
function Qualifier() {
  const items = [
    "You&rsquo;re a business owner generating over &#8377;1 crore in annual revenue",
    "You want to scale your business 9× in the next 3 years",
    "You want to prepare your business for funding, valuation, or IPO",
    "You&rsquo;re tired of working <i>in</i> the business and want to work <i>on</i> it",
    "You want to lead with clarity, confidence, and strategy",
  ];
  return (
    <section id="for-you" className="relative py-20 lg:py-28">
      <div className="mx-auto max-w-[1320px] px-5 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-10 lg:gap-14">
          <div className="lg:col-span-4 reveal">
            <SectionEyebrow>Is this for you?</SectionEyebrow>
            <h2 className="mt-5 text-[26px] sm:text-[36px] lg:text-[50px] leading-[1.05] font-semibold tracking-tight">
              You&rsquo;re in the right room <span className="grad-text">if&hellip;</span>
            </h2>
            <p className="mt-5 text-mute text-[13px] sm:text-[15px] leading-relaxed w-full min-w-0">
              This is not a webinar, not a masterclass, not a pep-talk. It&rsquo;s a working day with peers running real
              businesses &mdash; and a roadmap you leave with.
            </p>
            <div className="mt-8 glass rounded-2xl p-5 max-w-[420px]">
              <div className="text-[11px] uppercase tracking-[0.2em] text-amber font-semibold flex items-center gap-2">
                <Icon.Sparkles size={14} /> Quote of the day
              </div>
              <p className="mt-3 font-display italic text-[18px] leading-snug text-white">
                &ldquo;Wealth is not created by chance. It&rsquo;s created by structure, systems, and strategy.&rdquo;
              </p>
            </div>
          </div>

          <div className="lg:col-span-8 reveal">
            <ul className="grid sm:grid-cols-2 gap-4">
              {items.map((it, i) => (
                <li key={i}
                    className="glass rounded-2xl p-5 flex items-start gap-4 hover:border-teal/40 transition">
                  <div className="shrink-0 mt-0.5 w-9 h-9 rounded-xl bg-teal/15 text-teal grid place-items-center">
                    <Icon.Check size={18} strokeWidth={2.6} />
                  </div>
                  <div className="text-[13px] sm:text-[15px] leading-relaxed text-white/90"
                       dangerouslySetInnerHTML={{ __html: it }} />
                </li>
              ))}
              {/* 6th cell — mini visual filler card */}
              <li className="glass rounded-2xl p-5 flex flex-col sm:flex-row sm:items-center gap-4 sm:col-span-2 bg-gradient-to-r from-teal/10 via-transparent to-amber/10">
                <div className="w-10 h-10 rounded-xl bg-amber/15 text-amber grid place-items-center shrink-0">
                  <Icon.Target size={18} />
                </div>
                <div className="min-w-0">
                  <div className="text-[11px] text-mute uppercase tracking-[0.18em]">If even three of these hit</div>
                  <div className="text-[15px] sm:text-[18px] font-semibold mt-1">Your seat is waiting. Block it before pricing closes.</div>
                </div>
                <div className="sm:ml-auto shrink-0">
                  <CTA>Book my seat</CTA>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Speaker = Speaker;
window.MissionQuote = MissionQuote;
window.ImpactStats = ImpactStats;
window.Qualifier = Qualifier;