// FRAMEWORKS, BONUS
function Frameworks() {
  const items = [
    { title: "Sales", desc: "Pipeline math &amp; the AI-augmented closing motion.", icon: <Icon.Target size={20} />, hue: "teal" },
    { title: "Marketing", desc: "Demand engine that doesn&rsquo;t collapse when you stop spending.", icon: <Icon.Megaphone size={20} />, hue: "amber" },
    { title: "People &amp; Leadership", desc: "Hire, layer, delegate &mdash; without losing the culture.", icon: <Icon.Users size={20} />, hue: "teal" },
    { title: "Money Mindset", desc: "From bookkeeping to capital allocation like a CFO.", icon: <Icon.HandCoins size={20} />, hue: "amber" },
    { title: "Scaling in Downturn", desc: "Counter-cyclical playbooks for 2026 markets.", icon: <Icon.TrendingUp size={20} />, hue: "teal" },
  ];
  const hueBg = (h) => h === "teal"
    ? "from-teal/15 via-transparent to-transparent"
    : "from-amber/15 via-transparent to-transparent";
  const hueChip = (h) => h === "teal" ? "bg-teal/15 text-teal" : "bg-amber/15 text-amber";

  return (
    <section className="relative py-20 lg:py-28">
      <div className="mx-auto max-w-[1320px] px-5 lg:px-10">
        <div className="text-center max-w-[820px] mx-auto reveal">
          <SectionEyebrow>The five frameworks</SectionEyebrow>
          <h2 className="mt-5 text-[26px] sm:text-[40px] lg:text-[54px] leading-[1.05] font-semibold tracking-tight">
            Five <span className="grad-text">frameworks</span> every business must master.
          </h2>
        </div>

        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-5 gap-4 reveal">
          {items.map((it, i) => (
            <article key={i} className={"relative glass rounded-2xl p-6 hover:border-teal/40 transition bg-gradient-to-br " + hueBg(it.hue)}>
              <div className={"w-11 h-11 rounded-xl grid place-items-center " + hueChip(it.hue)}>{it.icon}</div>
              <div className="mt-5 text-[10px] uppercase tracking-[0.22em] text-mute font-mono">0{i+1}</div>
              <h3 className="mt-1 text-[20px] font-semibold leading-tight"
                  dangerouslySetInnerHTML={{__html:it.title}} />
              <p className="mt-2 text-[13px] leading-relaxed text-mute"
                 dangerouslySetInnerHTML={{__html:it.desc}} />
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// PAST EVENT GALLERY — infinite auto-scroll + drag/touch
function Gallery() {
  const images = [
    { src: "glimpseofevent/2.webp" },
    { src: "glimpseofevent/DSC04189-scaled.webp" },
    { src: "glimpseofevent/IMG_4165-scaled.webp" },
    { src: "glimpseofevent/IMG_4763-scaled (1).webp" },
    { src: "glimpseofevent/glimpseofevent.webp" },
  ];

  // Duplicate for seamless loop
  const track = [...images, ...images];

  const railRef   = _useRef(null);
  const animRef   = _useRef(null);
  const posRef    = _useRef(0);
  const dragRef   = _useRef({ active: false, startX: 0, startPos: 0 });
  const pausedRef = _useRef(false);

  // Card width + gap (keep in sync with CSS values below)
  const CARD_W  = () => window.innerWidth < 640 ? 260 + 16 : 380 + 20; // width + gap
  const HALF    = () => images.length * CARD_W();

  // Auto-scroll animation
  _useEffect(() => {
    let last = null;
    const SPEED = 0.5; // px per ms × 60fps ≈ 30px/s

    function tick(ts) {
      if (!last) last = ts;
      const dt = ts - last;
      last = ts;

      if (!pausedRef.current && railRef.current) {
        posRef.current += SPEED * (dt / 16.67);
        const half = HALF();
        if (posRef.current >= half) posRef.current -= half;
        railRef.current.style.transform = `translateX(-${posRef.current}px)`;
      }
      animRef.current = requestAnimationFrame(tick);
    }

    animRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(animRef.current);
  }, []);

  // ── Mouse drag ──
  function onMouseDown(e) {
    pausedRef.current = true;
    dragRef.current = { active: true, startX: e.clientX, startPos: posRef.current };
    e.preventDefault();
  }
  function onMouseMove(e) {
    if (!dragRef.current.active) return;
    const dx = e.clientX - dragRef.current.startX;
    let next = dragRef.current.startPos - dx;
    const half = HALF();
    if (next < 0) next += half;
    if (next >= half) next -= half;
    posRef.current = next;
    if (railRef.current) railRef.current.style.transform = `translateX(-${posRef.current}px)`;
  }
  function onMouseUp() {
    dragRef.current.active = false;
    pausedRef.current = false;
  }

  // ── Touch swipe ──
  function onTouchStart(e) {
    pausedRef.current = true;
    dragRef.current = { active: true, startX: e.touches[0].clientX, startPos: posRef.current };
  }
  function onTouchMove(e) {
    if (!dragRef.current.active) return;
    const dx = e.touches[0].clientX - dragRef.current.startX;
    let next = dragRef.current.startPos - dx;
    const half = HALF();
    if (next < 0) next += half;
    if (next >= half) next -= half;
    posRef.current = next;
    if (railRef.current) railRef.current.style.transform = `translateX(-${posRef.current}px)`;
  }
  function onTouchEnd() {
    dragRef.current.active = false;
    pausedRef.current = false;
  }

  return (
    <section className="relative py-20 lg:py-24 overflow-hidden">
      <div className="mx-auto max-w-[1320px] px-5 lg:px-10">
        <div className="flex items-end justify-between gap-6 reveal">
          <div>
            <SectionEyebrow>Past events</SectionEyebrow>
            <h2 className="mt-5 text-[36px] lg:text-[48px] leading-[1.05] font-semibold tracking-tight">
              Glimpses from <span className="grad-text">our past events</span>.
            </h2>
          </div>
          <div className="flex items-center gap-2 text-[13px] text-mute select-none">
            <Icon.ArrowRight size={14} className="opacity-60" />
            <span>Drag · Swipe · Auto-scroll</span>
          </div>
        </div>
      </div>

      {/* Full-bleed carousel — no overflow clip on x so edge fade works */}
      <div
        className="mt-10 relative select-none cursor-grab active:cursor-grabbing"
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
        onMouseLeave={onMouseUp}
        onTouchStart={onTouchStart}
        onTouchMove={onTouchMove}
        onTouchEnd={onTouchEnd}
        onMouseEnter={() => { pausedRef.current = true; }}
      >
        {/* Edge fade masks */}
        <div className="pointer-events-none absolute inset-y-0 left-0 w-16 z-10"
             style={{ background: "linear-gradient(90deg, rgba(7,9,31,0.9), transparent)" }} />
        <div className="pointer-events-none absolute inset-y-0 right-0 w-16 z-10"
             style={{ background: "linear-gradient(270deg, rgba(7,9,31,0.9), transparent)" }} />

        <div ref={railRef} className="flex gap-4 lg:gap-5 will-change-transform pb-2" style={{ width: "max-content" }}>
          {track.map((img, i) => (
            <div
              key={i}
              className="relative shrink-0 rounded-2xl overflow-hidden glass ring-teal"
              style={{ width: "clamp(220px, 30vw, 380px)", aspectRatio: "4/3" }}
            >
              <img
                src={img.src}
                alt="Event glimpse"
                draggable="false"
                className="w-full h-full object-cover pointer-events-none"
                loading="lazy"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// BONUS SECTION
function Bonus() {
  const items = [
    { title: "AI Operator OS", v: "₹12,000", desc: "60+ prompts &amp; workflows wired to your business.", icon: <Icon.Brain size={20} /> },
    { title: "IPO-Ready Audit", v: "₹15,000", desc: "Self-scoring framework across 9 readiness pillars.", icon: <Icon.LineChart size={20} /> },
    { title: "Investor Pitch Vault", v: "₹8,000", desc: "Real decks that closed funding, annotated.", icon: <Icon.Briefcase size={20} /> },
    { title: "Founder&rsquo;s 90-Day Calendar", v: "₹5,000", desc: "Day-by-day execution plan, printable.", icon: <Icon.Calendar size={20} /> },
  ];
  return (
    <section className="relative py-20 lg:py-24">
      <div className="mx-auto max-w-[1320px] px-5 lg:px-10">
        <div className="reveal text-center max-w-[760px] mx-auto">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full glass text-[11px] uppercase tracking-[0.18em] text-amber font-semibold">
            <Icon.Gift size={14} /> Bonus kit · yours free
          </div>
          <h2 className="mt-5 text-[40px] lg:text-[54px] leading-[1.05] font-semibold tracking-tight">
            Get a bonus kit worth <span className="grad-text-amber">up to ₹40,000</span>.
          </h2>
          <p className="mt-4 text-mute">Included with every Gold &amp; Platinum ticket. Silver receives the AI Operator OS.</p>
        </div>

        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-4 reveal">
          {items.map((b, i) => (
            <article key={i} className="glass rounded-2xl p-6 hover:border-amber/40 transition">
              <div className="w-11 h-11 rounded-xl bg-amber/15 text-amber grid place-items-center">{b.icon}</div>
              <div className="mt-5 text-[10px] uppercase tracking-[0.22em] text-mute font-mono">Bonus 0{i+1}</div>
              <h3 className="mt-1 text-[18px] font-semibold leading-tight"
                  dangerouslySetInnerHTML={{__html:b.title}} />
              <p className="mt-2 text-[13px] leading-relaxed text-mute"
                 dangerouslySetInnerHTML={{__html:b.desc}} />
              <div className="mt-5 flex items-center justify-between">
                <span className="text-[12px] text-mute uppercase tracking-wider">Value</span>
                <span className="grad-text-amber font-semibold num-tabular">{b.v}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// FAQ
function FAQ() {
  const faqs = [
    { q: "Who can attend?", a: "Founders, CEOs, MDs and senior operators of Indian SMEs / MSMEs &mdash; ideally generating ₹1 crore or more in annual revenue. Co-founders may attend on the same Platinum ticket; everyone else needs their own seat." },
    { q: "Will I get personal mentoring?", a: "Yes &mdash; with the Platinum tier. You get a 15&ndash;20 minute private 1-on-1 with Basesh during the day, plus lunch on his table. Gold and Silver tiers get unstructured networking access throughout." },
    { q: "What do I need to bring?", a: "A notebook, your last 12 months&rsquo; P&amp;L (high-level numbers, no internal data needed), and a willingness to be honest about where your business actually is. We supply the rest &mdash; workbook, frameworks, templates." },
    { q: "Is accommodation included?", a: "No. The ticket covers the full-day workshop, lunch, tea/coffee, networking, and the bonus kit. Both venues offer corporate room rates &mdash; we&rsquo;ll share booking links once you confirm a seat." },
    { q: "Can I bring my co-founder?", a: "Absolutely encouraged. The work goes 3× faster when both founders sit through it together. Each co-founder needs their own ticket; on Platinum, both attend the 1-on-1 with Basesh." },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="relative py-20 lg:py-28">
      <div className="mx-auto max-w-[1100px] px-5 lg:px-10">
        <div className="text-center reveal">
          <SectionEyebrow>FAQ</SectionEyebrow>
          <h2 className="mt-5 text-[40px] lg:text-[52px] leading-[1.05] font-semibold tracking-tight">
            Questions, <span className="grad-text">answered</span>.
          </h2>
        </div>

        <div className="mt-12 space-y-3 reveal">
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i}
                   className={"glass rounded-2xl overflow-hidden transition " + (isOpen ? "border-teal/40" : "")}>
                <button onClick={() => setOpen(isOpen ? -1 : i)}
                        className="w-full flex items-center justify-between gap-6 p-5 lg:p-6 text-left">
                  <div className="flex items-start gap-4">
                    <span className="font-mono text-[11px] tracking-widest text-mute mt-1.5">0{i+1}</span>
                    <span className="text-[17px] lg:text-[19px] font-semibold">{f.q}</span>
                  </div>
                  <span className={"shrink-0 w-9 h-9 rounded-full grid place-items-center transition " + (isOpen ? "bg-teal text-ink-900 rotate-45" : "bg-white/5 text-mute")}>
                    <Icon.Plus size={16} strokeWidth={2.5} />
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 320 : 0,
                  transition: "max-height .35s ease, opacity .35s ease",
                  opacity: isOpen ? 1 : 0,
                }}>
                  <div className="px-5 lg:px-6 pb-6 pl-[3.25rem] lg:pl-[3.75rem] text-mute leading-relaxed text-[15px] max-w-[800px]"
                       dangerouslySetInnerHTML={{__html:f.a}} />
                </div>
              </div>
            );
          })}
        </div>

        <div className="mt-12 reveal text-center">
          <div className="inline-flex items-center gap-3 glass rounded-full px-5 py-3 text-[13px]">
            <Icon.PhoneCall size={14} className="text-teal" />
            <span className="text-mute">Still unsure?</span>
            <a href="tel:09833039039" className="text-white font-medium">Call us directly &rarr; 098330 39039</a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Frameworks = Frameworks;
window.Gallery = Gallery;
window.Bonus = Bonus;
window.FAQ = FAQ;