// Homepage section components for Industrolearn

// ============= HERO =============
const Hero = ({ tweak, setTweak }) => {
  const headline = (
    <>
      Most AI courses ship slides.<br />
      We ship <span className={"morph-ital morph-ital--" + tweak.italTreatment}>systems</span>.
    </>
  );
  const ctaRef = React.useRef(null);
  React.useEffect(() => {
    const el = ctaRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = e.clientX - (r.left + r.width / 2);
      const y = e.clientY - (r.top + r.height / 2);
      el.style.transform = `translate(${x * 0.18}px, ${y * 0.22}px)`;
    };
    const onLeave = () => { el.style.transform = "translate(0,0)"; };
    const wrap = el.parentElement;
    wrap.addEventListener("mousemove", onMove);
    wrap.addEventListener("mouseleave", onLeave);
    return () => {
      wrap.removeEventListener("mousemove", onMove);
      wrap.removeEventListener("mouseleave", onLeave);
    };
  }, []);
  return (
    <header className="section" style={{ paddingTop: "clamp(56px, 9vw, 120px)" }} data-screen-label="01 Hero">
      <div className="container">
        <div className="eyebrow reveal is-in" style={{ marginBottom: 28 }}>
          <span style={{ display: "inline-block", width: 8, height: 8, background: "var(--saffron)", marginRight: 8, transform: "translateY(-1px)" }}></span>
          Industrolearn — AI school + project studio · India
        </div>
        <h1 className="display reveal is-in">{headline}</h1>
        <p className="lede reveal is-in" style={{ marginTop: 32, maxWidth: "62ch" }}>
          A founder-led AI school and project studio in India. Learn from real builds, not theory. Selective programs, premium pricing, real outcomes — for learners, builders, and the companies hiring them.
        </p>
        <div className="reveal is-in" style={{ marginTop: 40, display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
          <span className="magnet">
            <a ref={ctaRef} className="btn" href="#programs">
              See the curriculum <span className="arrow">→</span>
            </a>
          </span>
          <a className="btn btn--ghost" href="#studio">Hire the studio</a>
          <span className="mono muted" style={{ marginLeft: 12, fontSize: 12, letterSpacing: "0.08em" }}>
            COHORT 04 OPENS&nbsp;&nbsp;·&nbsp;&nbsp;30 MAY 2026
          </span>
        </div>
      </div>

      {/* Logos strip */}
      <div className="container" style={{ marginTop: "clamp(72px, 10vw, 128px)" }}>
        <div className="eyebrow" style={{ marginBottom: 18 }}>Builds shipped for · selected</div>
        <div style={{
          borderTop: "1px solid var(--edge)",
          borderBottom: "1px solid var(--edge)",
          padding: "32px 0",
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "space-between",
          gap: "28px 36px",
          alignItems: "center",
        }}>
          {[
            { name: "AsteroidX",        src: "images/clients/AsteroidX.avif" },
            { name: "Binoloop",         src: "images/clients/Binoloop.svg" },
            { name: "ClearSpot AI",     src: "images/clients/ClearSpot%20AI.webp" },
            { name: "General Electric", src: "images/clients/General_Electric.webp" },
            { name: "Hudson Labs",      src: "images/clients/Hudson%20Labs.svg" },
            { name: "Intel",            src: "images/clients/Intel.webp" },
            { name: "Opener",           src: "images/clients/Opener.png" },
            { name: "Transformer Lab",  src: "images/clients/Transformer%20Lab.svg" },
            { name: "Kubetools",        src: "images/clients/kubetools.avif" },
          ].map((c) => (
            <img
              key={c.name}
              src={c.src}
              alt={c.name}
              loading="lazy"
              style={{
                height: 32,
                width: "auto",
                maxWidth: 140,
                objectFit: "contain",
                filter: "grayscale(1)",
                opacity: 0.7,
                flex: "0 0 auto",
              }}
            />
          ))}
        </div>
      </div>
    </header>
  );
};

// ============= THREE-PATH ROUTER =============
const Router = ({ tweak }) => {
  const paths = [
    {
      kicker: "01 / Learner",
      title: "Build a career with AI",
      copy: "Cohort programs, supervised apprenticeship, and a real portfolio you can show — not certificates.",
      cta: "See programs",
      href: "programs/index.html",
      meta: "₹32,900 — ₹1,99,000",
    },
    {
      kicker: "02 / Builder",
      title: "Ship AI in your job",
      copy: "Workshops, the AI Career OS, and a peer community for senior engineers and operators putting AI into production.",
      cta: "Get the AI Career OS",
      href: "#lead-magnet",
      meta: "Free · weekly drop",
    },
    {
      kicker: "03 / Company",
      title: "Hire AI experts for your team",
      copy: "Audit, sprint, MVP, retainer, or a dedicated build pod. Fixed scope. Indian rates. Senior reviewers.",
      cta: "Hire the studio",
      href: "studio.html",
      meta: "Engagements ₹75k — ₹6L+/mo",
    },
  ];

  if (tweak.routerLayout === "list") {
    return (
      <section className="section" id="paths" data-screen-label="02 Three-path router">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 280px) 1fr", gap: 56, alignItems: "start" }}>
            <div>
              <div className="eyebrow">§ 01 — Three doors</div>
              <h2 className="h2" style={{ marginTop: 18 }}>Why are you here?</h2>
            </div>
            <div>
              {paths.map((p, i) => (
                <a key={i} href={p.href} className="rule-row" style={{ display: "grid", gridTemplateColumns: "60px 1fr auto", alignItems: "center", padding: "28px 0", textDecoration: "none" }}>
                  <span className="num-marker">{p.kicker.split(" / ")[0]}</span>
                  <div>
                    <div className="h3" style={{ marginBottom: 6 }}>{p.title}</div>
                    <div className="muted" style={{ fontSize: 15, maxWidth: "60ch" }}>{p.copy}</div>
                  </div>
                  <span className="mono" style={{ fontSize: 13 }}>{p.cta} →</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  if (tweak.routerLayout === "stack") {
    return (
      <section className="section" id="paths" data-screen-label="02 Three-path router">
        <div className="container" style={{ textAlign: "center" }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>§ 01 — Three doors</div>
          {paths.map((p, i) => (
            <a key={i} href={p.href} style={{ display: "block", padding: "36px 0", borderTop: "1px solid var(--edge)" }}>
              <div className="num-marker" style={{ marginBottom: 10 }}>{p.kicker}</div>
              <div className="display" style={{ fontSize: "clamp(36px, 6vw, 80px)" }}>
                {p.title.split(" with ")[0]}{p.title.includes(" with ") && <em> with </em>}{p.title.split(" with ")[1] || ""}
              </div>
              <div className="muted mono" style={{ fontSize: 13, marginTop: 14, letterSpacing: "0.08em" }}>{p.cta} →</div>
            </a>
          ))}
        </div>
      </section>
    );
  }

  // default cards
  return (
    <section className="section" id="paths" data-screen-label="02 Three-path router">
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 36, gap: 24, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow">§ 01 — Three doors</div>
            <h2 className="h2" style={{ marginTop: 18 }}>Why are you here?</h2>
          </div>
          <p className="muted" style={{ maxWidth: "44ch" }}>
            Most edtech sites are written for one person. We have three readers — and you should be at the right page in under thirty seconds.
          </p>
        </div>
        <div className="grid grid--3">
          {paths.map((p, i) => (
            <a key={i} href={p.href} className="card" style={{ padding: 32, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 320 }}>
              <div>
                <div className="num-marker" style={{ marginBottom: 18 }}>{p.kicker}</div>
                <div className="h3">{p.title}</div>
                <p className="muted" style={{ marginTop: 14, fontSize: 15 }}>{p.copy}</p>
              </div>
              <div style={{ marginTop: 28, display: "flex", justifyContent: "space-between", alignItems: "end", gap: 12 }}>
                <span className="mono" style={{ fontSize: 12, color: "var(--mute)", letterSpacing: "0.08em" }}>{p.meta}</span>
                <span style={{ fontSize: 14, fontWeight: 500 }}>{p.cta} →</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============= MANIFESTO =============
const Manifesto = ({ tweak }) => {
  const text = `Most "AI courses" sell hope and slides. They teach you how to spell GPT, hand you a certificate, and disappear when you try to ship anything real.

We are not that. Industrolearn is a school where the teachers are still in the arena — building AI systems for Indian companies every week, then teaching what actually worked. The studio funds the school. The school feeds the studio. Both of them are honest about what AI is, what it isn't, and what it takes to use it well in this country.

We don't promise placements. We don't run countdown timers. We don't sell you on the future. We pick a small number of serious people, train them on real work, and put their names on what they ship. If that sounds slower and harder than what's on offer elsewhere — it is. That's the point.`;

  const paragraphs = text.split("\n\n");

  if (tweak.manifestoLayout === "letter") {
    return (
      <section className="section dark" id="manifesto" data-screen-label="03 Manifesto">
        <div className="container" style={{ maxWidth: 760 }}>
          <div className="eyebrow" style={{ marginBottom: 32 }}>§ 02 — A letter from the founder</div>
          <h2 className="h2" style={{ marginBottom: 36, fontSize: "clamp(32px, 4.5vw, 56px)" }}>
            Dear reader,
          </h2>
          {paragraphs.map((p, i) => (
            <p key={i} style={{ fontSize: 19, lineHeight: 1.6, marginBottom: 22, color: "#e9e3d6" }}>{p}</p>
          ))}
          <div style={{ marginTop: 40 }}>
            <div className="signature">— Abhijeet</div>
            <div className="mono muted" style={{ marginTop: 6, fontSize: 12, letterSpacing: "0.1em" }}>
              ABHIJEET MAZUMDAR · FOUNDER · BENGALURU
            </div>
          </div>
        </div>
      </section>
    );
  }

  if (tweak.manifestoLayout === "pullquote") {
    return (
      <section className="section dark" id="manifesto" data-screen-label="03 Manifesto">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64 }} className="manifesto-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>§ 02 — Manifesto</div>
              <div className="display" style={{ fontSize: "clamp(40px, 6vw, 88px)", lineHeight: 0.95 }}>
                The studio funds the school. The school <em>feeds</em> the studio.
              </div>
            </div>
            <div>
              {paragraphs.map((p, i) => (
                <p key={i} style={{ fontSize: 17, lineHeight: 1.6, marginBottom: 18, color: "#e9e3d6" }}>{p}</p>
              ))}
              <div style={{ marginTop: 28 }}>
                <span className="signature">— Abhijeet</span>
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .manifesto-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
      </section>
    );
  }

  // default centered
  return (
    <section className="section dark" id="manifesto" data-screen-label="03 Manifesto">
      <div className="container" style={{ maxWidth: 720, textAlign: "left" }}>
        <div className="eyebrow" style={{ marginBottom: 32 }}>§ 02 — Manifesto</div>
        {paragraphs.map((p, i) => (
          <p key={i} style={{
            fontSize: i === 0 ? 24 : 18,
            lineHeight: 1.55,
            marginBottom: 24,
            color: i === 0 ? "var(--bone)" : "#cfc8b8",
            fontFamily: i === 0 ? "var(--font-display)" : "var(--font-body)",
            fontWeight: i === 0 ? 600 : 400,
            letterSpacing: i === 0 ? "-0.02em" : "0",
          }}>{p}</p>
        ))}
        <div style={{ marginTop: 40, display: "flex", alignItems: "center", gap: 20 }}>
          <div className="signature">— Abhijeet</div>
          <div className="mono muted" style={{ fontSize: 11, letterSpacing: "0.12em" }}>
            ABHIJEET MAZUMDAR<br/>FOUNDER · BENGALURU
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;
window.Router = Router;
window.Manifesto = Manifesto;