// Programs / Studio / Events / Founder / Lead magnet

// ============= PROGRAMS STRIP =============
const Programs = ({ tweak }) => {
  const items = [
    {
      tier: "01 / Foundations",
      name: "Foundations of AI for India",
      href: "programs/foundations.html",
      price: "₹32,900",
      emi: "or ₹2,749 / mo · 12 mo",
      duration: "6 weeks · part-time",
      cohort: "Cohort 07 · 12 May 2026",
      copy: "The fastest, no-nonsense ground floor. Build five small AI tools, ship one of them, and walk away with a real intuition for what's possible.",
      tag: "Open enrolment",
    },
    {
      tier: "02 / Builder Track",
      name: "Builder Track — flagship",
      href: "programs/builder-track.html",
      price: "₹98,900",
      emi: "or ₹8,249 / mo · 12 mo",
      duration: "12 weeks · 8 hrs/wk",
      cohort: "Cohort 04 · 30 May 2026",
      copy: "Twelve weeks. Five capstone systems. Real review by senior engineers shipping AI in production. The program the Studio recruits from.",
      tag: "Flagship · Application gated",
      featured: true,
    },
    {
      tier: "03 / Apprenticeship",
      name: "AI Apprenticeship",
      href: "programs/apprenticeship.html",
      price: "₹1,99,000",
      emi: "Refundable on Studio placement",
      duration: "6 months · full-time",
      cohort: "Class of 2026 · 15 Jun",
      copy: "Six months under a senior reviewer, on actual Studio client work. Selective. Twelve seats. We mean it when we say we don't promise placements.",
      tag: "Selective · 12 seats",
    },
  ];

  if (tweak.programsLayout === "table") {
    return (
      <section className="section" id="programs" data-screen-label="04 Programs">
        <div className="container">
          <SectionHead n="03" kicker="Programs" title="The school" lede="Three programs. One philosophy. Show your work." />
          <div style={{ borderTop: "1px solid var(--edge)" }}>
            {items.map((p, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "60px 2.4fr 1.2fr 1.2fr 1fr",
                gap: 24,
                alignItems: "center",
                padding: "32px 0",
                borderBottom: "1px solid var(--edge)",
                background: p.featured ? "rgba(210, 69, 30, 0.04)" : "transparent",
                marginInline: p.featured ? "calc(var(--gutter) * -0.5)" : 0,
                paddingInline: p.featured ? "calc(var(--gutter) * 0.5)" : 0,
              }}>
                <div className="num-marker">{p.tier.split(" / ")[0]}</div>
                <div>
                  <div className="h3" style={{ marginBottom: 6 }}>{p.name}</div>
                  <div className="muted" style={{ fontSize: 14, maxWidth: "52ch" }}>{p.copy}</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 22, fontWeight: 500 }}>{p.price}</div>
                  <div className="muted mono" style={{ fontSize: 11, marginTop: 4 }}>{p.emi}</div>
                </div>
                <div className="mono" style={{ fontSize: 13 }}>
                  <div>{p.duration}</div>
                  <div className="muted" style={{ marginTop: 4 }}>{p.cohort}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <a href={p.href} className="btn btn--sm">Apply →</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  if (tweak.programsLayout === "hero") {
    const builder = items[1];
    const others = [items[0], items[2]];
    return (
      <section className="section" id="programs" data-screen-label="04 Programs">
        <div className="container">
          <SectionHead n="03" kicker="Programs" title="The school" lede="Three programs. One philosophy. Show your work." />
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 24 }} className="prog-hero-grid">
            <a href={builder.href} className="card card--dark" style={{ padding: 40, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 540 }}>
              <div>
                <span className="tag tag--saffron">{builder.tag}</span>
                <div className="num-marker" style={{ marginTop: 28, color: "#9a9388" }}>{builder.tier}</div>
                <div className="display" style={{ fontSize: "clamp(40px, 5.5vw, 76px)", marginTop: 10, color: "var(--bone)" }}>
                  Builder <em>Track</em>
                </div>
                <p style={{ marginTop: 22, color: "#cfc8b8", maxWidth: "44ch", fontSize: 17 }}>{builder.copy}</p>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 32, paddingTop: 24, borderTop: "1px solid #2b2b2b" }} className="prog-builder-meta">
                <div>
                  <div className="mono" style={{ fontSize: 28, fontWeight: 500 }}>{builder.price}</div>
                  <div className="mono" style={{ fontSize: 11, color: "#9a9388", marginTop: 4 }}>{builder.emi}</div>
                </div>
                <div className="mono" style={{ fontSize: 12, color: "#9a9388", textAlign: "right" }}>
                  {builder.duration}<br />{builder.cohort}
                </div>
              </div>
            </a>
            <div style={{ display: "grid", gap: 24, gridTemplateRows: "1fr 1fr" }}>
              {others.map((p, i) => (
                <a key={i} href={p.href} className="card" style={{ padding: 28, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                  <div>
                    <div className="num-marker">{p.tier}</div>
                    <div className="h3" style={{ marginTop: 10 }}>{p.name}</div>
                    <p className="muted" style={{ fontSize: 14, marginTop: 10 }}>{p.copy}</p>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginTop: 18 }}>
                    <span className="mono" style={{ fontSize: 18, fontWeight: 500 }}>{p.price}</span>
                    <span className="mono muted" style={{ fontSize: 11 }}>{p.duration}</span>
                  </div>
                </a>
              ))}
            </div>
          </div>
          <style>{`@media (max-width: 900px) { .prog-hero-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>
    );
  }

  // default equal cards
  return (
    <section className="section" id="programs" data-screen-label="04 Programs">
      <div className="container">
        <SectionHead n="03" kicker="Programs" title={<>The school</>} lede="Three programs. One philosophy. Show your work." />
        <div className="grid grid--3">
          {items.map((p, i) => (
            <a key={i} href={p.href} className={"card " + (p.featured ? "card--featured" : "")} style={{
              padding: 32,
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              borderColor: p.featured ? "var(--ink)" : "var(--edge)",
              background: p.featured ? "var(--paper)" : "var(--paper)",
              outline: p.featured ? "2px solid var(--saffron)" : "none",
              outlineOffset: p.featured ? -1 : 0,
              minHeight: 460,
            }}>
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start", gap: 12 }}>
                  <div className="num-marker">{p.tier}</div>
                  {p.featured && <span className="tag tag--saffron">{p.tag}</span>}
                </div>
                <div className="h3" style={{ marginTop: 18 }}>{p.name}</div>
                <p className="muted" style={{ fontSize: 14, marginTop: 14 }}>{p.copy}</p>
              </div>
              <div style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid var(--edge)" }}>
                <div className="mono" style={{ fontSize: 26, fontWeight: 500 }}>{p.price}</div>
                <div className="mono muted" style={{ fontSize: 11, marginTop: 4 }}>{p.emi}</div>
                <div className="mono muted" style={{ fontSize: 11, marginTop: 14, letterSpacing: "0.06em" }}>
                  {p.duration} · {p.cohort}
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============= STUDIO STRIP =============
const Studio = ({ tweak }) => {
  const packages = [
    { id: "audit", name: "Audit", outcome: "A 14-day diagnostic of where AI helps your business — and where it does not.", price: "from ₹75,000", duration: "2 weeks · fixed scope" },
    { id: "sprint", name: "Sprint", outcome: "One focused build, shipped in four weeks. Prototype to working internal tool.", price: "from ₹3,00,000", duration: "4 weeks · fixed scope" },
    { id: "mvp", name: "MVP", outcome: "Customer-facing AI feature or product, production-ready, in eight to twelve weeks.", price: "from ₹8,00,000", duration: "8–12 weeks" },
    { id: "retainer", name: "Retainer", outcome: "An embedded reviewer + senior builder, two days a week, on your roadmap.", price: "from ₹2,00,000 / mo", duration: "3-month minimum" },
    { id: "build-pod", name: "Build Pod", outcome: "A dedicated three-person AI pod inside your team, managed by us.", price: "from ₹6,00,000 / mo", duration: "6-month minimum" },
  ];

  if (tweak.studioLayout === "ladder") {
    return (
      <section className="section dark" id="studio" data-screen-label="05 Studio">
        <div className="container">
          <SectionHead n="04" kicker="Studio" title={<>The <em>studio</em></>} lede="Five engagements, priced openly. Indian rates. Senior reviewers. Fixed-scope contracts, payment milestones, IP transfer on delivery." dark />
          <div style={{ borderTop: "1px solid #2b2b2b" }}>
            {packages.map((p, i) => (
              <a key={p.id} href={`studio.html#${p.id}`} style={{
                display: "grid",
                gridTemplateColumns: "60px 1fr 2fr 1fr 1fr",
                gap: 24,
                alignItems: "center",
                padding: "28px 0",
                borderBottom: "1px solid #2b2b2b",
              }}>
                <div className="num-marker" style={{ color: "#9a9388" }}>0{i + 1}</div>
                <div className="h3" style={{ color: "var(--bone)" }}>{p.name}</div>
                <div style={{ color: "#cfc8b8", fontSize: 16 }}>{p.outcome}</div>
                <div className="mono" style={{ fontSize: 16, color: "var(--bone)" }}>{p.price}</div>
                <div className="mono" style={{ fontSize: 12, color: "#9a9388", textAlign: "right" }}>{p.duration} →</div>
              </a>
            ))}
          </div>
          <div style={{ marginTop: 48, display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a href="studio.html" className="btn">Read the studio brief</a>
            <a href="#book" className="btn btn--ghost">Book a discovery call</a>
          </div>
        </div>
      </section>
    );
  }

  // default 5-card grid
  return (
    <section className="section dark" id="studio" data-screen-label="05 Studio">
      <div className="container">
        <SectionHead n="04" kicker="Studio" title={<>The <em>studio</em></>} lede="Five engagements, priced openly. Indian rates. Senior reviewers. Fixed-scope contracts, payment milestones, IP transfer on delivery." dark />
        <div className="grid grid--5">
          {packages.map((p, i) => (
            <a key={p.id} href={`studio.html#${p.id}`} className="card card--dark" style={{ padding: 24, minHeight: 280, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div className="num-marker" style={{ color: "#9a9388" }}>0{i + 1}</div>
                <div className="h3" style={{ marginTop: 14, color: "var(--bone)", fontSize: 26 }}>{p.name}</div>
                <p style={{ color: "#cfc8b8", fontSize: 14, marginTop: 12, lineHeight: 1.5 }}>{p.outcome}</p>
              </div>
              <div style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid #2b2b2b" }}>
                <div className="mono" style={{ fontSize: 14, color: "var(--bone)" }}>{p.price}</div>
                <div className="mono" style={{ fontSize: 11, color: "#9a9388", marginTop: 4 }}>{p.duration}</div>
              </div>
            </a>
          ))}
        </div>
        <div style={{ marginTop: 48, display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
          <a href="studio.html" className="btn">Read the studio brief <span className="arrow">→</span></a>
          <a href="#book" className="btn btn--ghost">Book a discovery call</a>
          <span className="mono" style={{ color: "#9a9388", fontSize: 12, letterSpacing: "0.08em", marginLeft: 8 }}>
            MSA AVAILABLE ON REQUEST · GST INVOICED
          </span>
        </div>
      </div>
    </section>
  );
};

// ============= EVENTS =============
const Events = () => {
  const events = [
    { date: "MAY 18", day: "MON", city: "Bengaluru", title: "Senior Engineering Meetup #07", topic: "AI in production: what's actually breaking", spots: "42 / 60", kind: "MEETUP" },
    { date: "MAY 24", day: "SAT", city: "Online", title: "Paper Studies: Mixture-of-Recursions", topic: "MoR — what it changes for inference cost", spots: "Open", kind: "PAPER STUDY" },
    { date: "JUN 07", day: "SAT", city: "Mumbai", title: "Founders' Roundtable", topic: "Picking the right first AI bet for your company", spots: "12 / 24 · invite", kind: "ROUNDTABLE" },
    { date: "JUN 21", day: "SAT", city: "Bengaluru", title: "Industrolearn Open Day", topic: "Tour the studio, meet the cohort, see real builds", spots: "Open", kind: "OPEN DAY" },
  ];
  return (
    <section className="section" id="events" data-screen-label="06 Events">
      <div className="container">
        <SectionHead n="05" kicker="Events" title={<>What we <em>host</em></>} lede="The fastest way to meet the people doing real AI work in India. Free or close to it. No pitches." />
        <div style={{ borderTop: "1px solid var(--edge)" }}>
          {events.map((e, i) => (
            <a key={i} href="#" style={{
              display: "grid",
              gridTemplateColumns: "100px 100px 1fr 1fr 120px",
              gap: 24,
              alignItems: "center",
              padding: "26px 0",
              borderBottom: "1px solid var(--edge)",
            }} className="event-row">
              <div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 500 }}>{e.date}</div>
                <div className="mono muted" style={{ fontSize: 11, marginTop: 4 }}>{e.day} · 2026</div>
              </div>
              <div>
                <span className="tag">{e.kind}</span>
              </div>
              <div>
                <div style={{ fontSize: 18, fontWeight: 500 }}>{e.title}</div>
                <div className="muted" style={{ fontSize: 14, marginTop: 4 }}>{e.topic}</div>
              </div>
              <div className="mono" style={{ fontSize: 13 }}>{e.city}</div>
              <div style={{ textAlign: "right" }}>
                <span className="mono" style={{ fontSize: 12, color: "var(--mute)", letterSpacing: "0.08em" }}>{e.spots}</span>
                <div style={{ fontSize: 13, marginTop: 6 }}>RSVP →</div>
              </div>
            </a>
          ))}
        </div>
        <div style={{ marginTop: 32, display: "flex", gap: 14, flexWrap: "wrap" }}>
          <a className="btn btn--ghost" href="#">All events →</a>
          <a className="btn btn--ghost" href="#">Subscribe to the calendar (.ics)</a>
        </div>
      </div>
    </section>
  );
};

// ============= NUMERIC PROOF =============
const Proof = () => {
  return (
    <section className="section--sm" data-screen-label="07 Proof">
      <div className="container" style={{ textAlign: "left", borderTop: "1px solid var(--edge)", borderBottom: "1px solid var(--edge)", padding: "56px 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 56, alignItems: "center" }} className="proof-grid">
          <div className="display" style={{ fontSize: "clamp(72px, 12vw, 180px)", lineHeight: 0.9 }}>
            41 <em>builds</em>
          </div>
          <div>
            <div className="eyebrow">§ 06 — One number</div>
            <p className="lede" style={{ marginTop: 16 }}>
              Forty-one production AI systems shipped for Indian, Canadian and US companies since 2024 — across manufacturing, fintech, healthcare, retail and SaaS. Every program graduate has worked on at least one.
            </p>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
      </div>
    </section>
  );
};

// ============= FOUNDER =============
const Founder = ({ tweak }) => {
  if (tweak.founderLayout === "fullbleed") {
    return (
      <section className="section" id="about" data-screen-label="08 Founder">
        <div className="container">
          <div className="striped" style={{ width: "100%", aspectRatio: "21 / 9", justifyContent: "center", alignItems: "center" }}>
            <div className="mono" style={{ fontSize: 12, letterSpacing: "0.14em", color: "var(--mute)" }}>
              [ EDITORIAL FOUNDER PORTRAIT — TO SHOOT — 21:9 ]
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, marginTop: 48 }} className="founder-grid">
            <div>
              <div className="eyebrow">§ 07 — Who's behind this</div>
              <h2 className="h2" style={{ marginTop: 18 }}>Hi, I'm <em>Abhijeet</em>.</h2>
            </div>
            <div>
              <p style={{ fontSize: 18, lineHeight: 1.55 }}>
                I've spent the last decade shipping software in India — and the last three years building AI systems for companies that actually need them. Industrolearn is the school I wished I'd had: serious, honest, taught by people still in the arena. Read the long version on the about page.
              </p>
              <a href="#" className="btn btn--ghost" style={{ marginTop: 28 }}>Read the full story →</a>
            </div>
          </div>
          <style>{`@media (max-width: 900px) { .founder-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
        </div>
      </section>
    );
  }

  if (tweak.founderLayout === "signature") {
    return (
      <section className="section" id="about" data-screen-label="08 Founder">
        <div className="container" style={{ maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>§ 07 — Founder</div>
          <h2 className="h2">Built in India by <em>Abhijeet Mazumdar</em>.</h2>
          <p className="lede" style={{ marginTop: 24 }}>
            Decade of shipping in India. Three years of putting AI into the wild. Not a coach. Not a course-aggregator. A working operator teaching what they're still doing today.
          </p>
          <div style={{ marginTop: 36, display: "flex", alignItems: "center", gap: 20, paddingTop: 24, borderTop: "1px solid var(--edge)" }}>
            <div style={{ fontFamily: "var(--font-italic)", fontStyle: "italic", fontSize: 36, color: "var(--ink)" }}>— Abhijeet</div>
            <a href="#" className="btn btn--ghost btn--sm" style={{ marginLeft: "auto" }}>Read more →</a>
          </div>
        </div>
      </section>
    );
  }

  // default: portrait left + text right
  return (
    <section className="section" id="about" data-screen-label="08 Founder">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 64, alignItems: "center" }} className="founder-grid">
          <div style={{ width: "100%", aspectRatio: "4 / 5", overflow: "hidden" }}>
            <img
              src="images/founder/Abhijeet_Potrfolio.jpeg"
              alt="Abhijeet Mazumdar — founder, Industrolearn"
              style={{
                width: "100%",
                height: "100%",
                objectFit: "cover",
                objectPosition: "50% 0%",
                display: "block",
                transform: "scale(1.111)",
                transformOrigin: "50% 0%",
              }}
            />
          </div>
          <div>
            <div className="eyebrow">§ 07 — Founder</div>
            <h2 className="h2" style={{ marginTop: 18 }}>
              Hi, I'm <em>Abhijeet</em>.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, marginTop: 24, maxWidth: "52ch" }}>
              A decade of shipping ML software in India, and the last three years building AI systems for companies that actually need them. Industrolearn is the school I wished I'd had — taught by people still in the arena, funded by a studio that has to keep being good for the school to stay honest.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.6, marginTop: 16, maxWidth: "52ch" }}>
              I read most of the applications myself. If we work together, you'll know it.
            </p>
            <div style={{ marginTop: 32, display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
              <span className="mono muted" style={{ fontSize: 12, letterSpacing: "0.08em" }}>
                ABHIJEET MAZUMDAR · BENGALURU
              </span>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .founder-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
};

// ============= LEAD MAGNET =============
const LeadMagnet = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState("");
  const [firstName, setFirstName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [countryCode, setCountryCode] = React.useState("91");
  const [whatsapp, setWhatsapp] = React.useState("");
  const [consent, setConsent] = React.useState(true);
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email.includes("@") || !firstName.trim() || submitting) return;
    setSubmitting(true);
    setSubmitError("");
    try {
      if (window.IL && window.IL.submitLeadMagnet) {
        var cc = (countryCode || "").replace(/\D+/g, "") || "91";
        await window.IL.submitLeadMagnet({
          firstName: firstName.trim(),
          email,
          countryCode: "+" + cc,
          whatsapp: whatsapp.replace(/\D+/g, ""),
          consent
        });
      }
      setSubmitted(true);
    } catch (err) {
      console.warn("Lead magnet submit:", err);
      // Surface Brevo's validation errors inline rather than the generic success state.
      var msg = (err && err.message) || "";
      if (/already linked|already exists|duplicate/i.test(msg)) {
        setSubmitError("Looks like you're already on the list — check your inbox for the AI Career OS.");
      } else if (/invalid|format/i.test(msg)) {
        setSubmitError("Couldn't accept that — please double-check your email and WhatsApp number.");
      } else {
        setSubmitError("Something went wrong on our end. Try again, or write to support@industrolearn.com.");
      }
    } finally {
      setSubmitting(false);
    }
  };
  return (
    <section className="section" id="lead-magnet" data-screen-label="09 Lead magnet">
      <div className="container">
        <div style={{
          background: "var(--paper)",
          border: "1px solid var(--ink)",
          padding: "clamp(28px, 6vw, 80px)",
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          gap: 56,
          alignItems: "center",
          minWidth: 0,
        }} className="lm-grid">
          <div style={{ minWidth: 0 }}>
            <div className="eyebrow">§ 08 — Free, useful, real</div>
            <h2 className="h2" style={{ marginTop: 18 }}>The <em style={{ color: "var(--saffron)" }}>AI Career OS</em> for India.</h2>
            <p className="lede" style={{ marginTop: 20 }}>
              A 31-page playbook: how to pick your AI path, what to learn first, the five proof projects that get you hired, how to position online, and a 30-day plan that actually fits a working week.
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0 0", display: "grid", gap: 10 }}>
              {["Choose your AI path (5 archetypes)", "What to learn first — and what to skip", "Five proof projects to build", "How to position yourself online", "A 30-day plan that fits a working week"].map((t, i) => (
                <li key={i} style={{ display: "flex", alignItems: "baseline", gap: 14, fontSize: 15 }}>
                  <span className="mono muted" style={{ fontSize: 11, letterSpacing: "0.08em", width: 24 }}>0{i + 1}</span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ minWidth: 0 }}>
            {!submitted ? (
              <form onSubmit={onSubmit} style={{ display: "grid", gap: 14 }}>
                <label className="eyebrow" htmlFor="lm-name">First name</label>
                <input id="lm-name" name="firstname" className="input" type="text" autoComplete="given-name" placeholder="Priya" value={firstName} onChange={(e) => setFirstName(e.target.value)} required />
                <label className="eyebrow" htmlFor="lm-email" style={{ marginTop: 8 }}>Email</label>
                <input id="lm-email" name="email" className="input" type="email" autoComplete="email" placeholder="you@company.in" value={email} onChange={(e) => setEmail(e.target.value)} required />
                <label className="eyebrow" htmlFor="lm-wa" style={{ marginTop: 8 }}>WhatsApp (optional)</label>
                <div style={{ display: "grid", gridTemplateColumns: "auto 72px 1fr", gap: 8, alignItems: "stretch" }}>
                  <span aria-hidden="true" className="input" style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "0 14px", color: "var(--mute)", fontWeight: 500 }}>+</span>
                  <input
                    id="lm-cc"
                    name="country_code"
                    className="input"
                    type="text"
                    inputMode="numeric"
                    autoComplete="tel-country-code"
                    aria-label="Country code"
                    maxLength={4}
                    placeholder="91"
                    value={countryCode}
                    onChange={(e) => setCountryCode(e.target.value.replace(/\D+/g, ""))}
                    style={{ textAlign: "center", padding: "16px 8px" }}
                  />
                  <input id="lm-wa" name="whatsapp" className="input" type="tel" inputMode="numeric" autoComplete="tel-national" placeholder="98765 43210" value={whatsapp} onChange={(e) => setWhatsapp(e.target.value)} />
                </div>
                <label className="checkbox" style={{ marginTop: 12 }}>
                  <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} required />
                  Send me the AI Career OS + a weekly note from Abhijeet. Unsubscribe anytime.
                </label>
                {submitError ? (
                  <div role="alert" style={{ marginTop: 6, padding: "12px 14px", border: "1px solid var(--saffron)", color: "var(--saffron)", fontSize: 14, lineHeight: 1.45 }}>
                    {submitError}
                  </div>
                ) : null}
                <button type="submit" disabled={submitting} className="btn" style={{ marginTop: 14, justifyContent: "center", opacity: submitting ? 0.6 : 1 }}>
                  {submitting ? "Sending…" : (<>Send it to me <span className="arrow">→</span></>)}
                </button>
                <div className="mono muted" style={{ fontSize: 11, letterSpacing: "0.06em", marginTop: 6 }}>
                  No exit-intent popup. No countdown. No spam. <a href="privacy.html" style={{ borderBottom: "1px solid currentColor" }}>Privacy</a>.
                </div>
              </form>
            ) : (
              <div style={{ padding: "32px 28px", border: "1px solid var(--saffron)", background: "rgba(210,69,30,0.06)", maxWidth: "100%", minWidth: 0, boxSizing: "border-box" }}>
                <div className="mono" style={{ fontSize: 12, letterSpacing: "0.12em", color: "var(--saffron)" }}>SENT</div>
                <div className="h3" style={{ marginTop: 12 }}>Check your inbox{firstName ? `, ${firstName.split(" ")[0]}` : ""}.</div>
                <p style={{ marginTop: 12, fontSize: 15, overflowWrap: "anywhere", wordBreak: "break-word" }}>
                  The AI Career OS is on its way to <span className="mono" style={{ overflowWrap: "anywhere", wordBreak: "break-all" }}>{email}</span>. If it doesn't show up in five minutes, peek in Promotions.
                </p>
                <button onClick={() => { setSubmitted(false); setSubmitError(""); setFirstName(""); setEmail(""); setWhatsapp(""); setCountryCode("91"); }} className="btn btn--ghost btn--sm" style={{ marginTop: 16 }}>Send to another email</button>
              </div>
            )}
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .lm-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
      </div>
    </section>
  );
};

// ============= SECTION HEAD =============
const SectionHead = ({ n, kicker, title, lede, dark }) => {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.4fr)", gap: 48, alignItems: "end", marginBottom: 56 }} className="sh-grid">
      <div>
        <div className="eyebrow">§ {n} — {kicker}</div>
        <h2 className="h2" style={{ marginTop: 18, color: dark ? "var(--bone)" : "var(--ink)" }}>{title}</h2>
      </div>
      <p className="lede" style={{ color: dark ? "#cfc8b8" : "var(--ink)" }}>{lede}</p>
      <style>{`@media (max-width: 900px) { .sh-grid { grid-template-columns: 1fr !important; gap: 18px !important; align-items: start !important; margin-bottom: 32px !important; } }`}</style>
    </div>
  );
};

window.Programs = Programs;
window.Studio = Studio;
window.Events = Events;
window.Proof = Proof;
window.Founder = Founder;
window.LeadMagnet = LeadMagnet;
window.SectionHead = SectionHead;