// Page components
const { useState: useStateS, useEffect: useEffectS, useMemo: useMemoS } = React;

// ---------- Small reusable bits ----------

function Logo() {
  return (
    <img src={(window.__resources && window.__resources.logoImg) || "assets/logo.png"} alt="Eidosoma" className="logo-mark"
         style={{ width: 32, height: 32, objectFit: "contain", display: "block" }} />
  );
}

function Reveal({ children, delay = 0 }) {
  const ref = React.useRef(null);
  useEffectS(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add("in"), delay);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className="reveal">{children}</div>;
}

function ImagePlaceholder({ label, aspect = "4/5", stripe = "rust" }) {
  const stripeColors = {
    rust: ["oklch(0.86 0.04 35)", "oklch(0.92 0.03 35)"],
    moss: ["oklch(0.86 0.04 145)", "oklch(0.92 0.03 145)"],
    ink:  ["oklch(0.85 0.01 60)", "oklch(0.91 0.01 60)"],
  }[stripe];
  return (
    <div style={{
      aspectRatio: aspect,
      borderRadius: 18,
      border: "1px solid var(--rule)",
      background: `repeating-linear-gradient(135deg, ${stripeColors[0]} 0 8px, ${stripeColors[1]} 8px 16px)`,
      display: "flex", alignItems: "center", justifyContent: "center",
      position: "relative", overflow: "hidden",
    }}>
      <span style={{
        fontFamily: "var(--mono)", fontSize: "0.72rem", letterSpacing: "0.14em", textTransform: "uppercase",
        background: "var(--bg)", padding: "6px 12px", border: "1px solid var(--rule)", borderRadius: 999,
        color: "var(--ink-mute)",
      }}>{label}</span>
    </div>
  );
}

// ---------- Nav & Footer ----------

function Nav({ route, go, dark, onToggleTheme }) {
  const links = [
    { id: "home", label: "Overview" },
    { id: "consulting", label: "Consulting" },
    { id: "lab", label: "Lab" },
    { id: "scientist", label: "AI Scientists" },
    { id: "team", label: "Team" },
  ];

  const [menuOpen, setMenuOpen] = useStateS(false);

  useEffectS(() => {
    setMenuOpen(false);
  }, [route]);

  useEffectS(() => {
    if (!menuOpen) return;

    const onKeyDown = (event) => {
      if (event.key === "Escape") setMenuOpen(false);
    };
    const onResize = () => {
      if (window.innerWidth >= 1024) setMenuOpen(false);
    };

    window.addEventListener("keydown", onKeyDown);
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("keydown", onKeyDown);
      window.removeEventListener("resize", onResize);
    };
  }, [menuOpen]);

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#home" className="logo" onClick={(e) => { e.preventDefault(); go("home"); }}>
          <Logo />
          <span>Eidosoma</span>
        </a>
        <div className="nav-links">
          {links.map((l) => (
            <a key={l.id} href={`#${l.id}`}
               className={route === l.id ? "active" : ""}
               onClick={(e) => { e.preventDefault(); go(l.id); }}>
              {l.label}
            </a>
          ))}
        </div>
        <div className="nav-actions">
          <button
            type="button"
            className="theme-toggle"
            onClick={onToggleTheme}
            aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
            title={dark ? "Switch to light mode" : "Switch to dark mode"}>
            {dark ? (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="4" />
                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
              </svg>
            ) : (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" />
              </svg>
            )}
          </button>
          <a href="#contact" className="nav-cta" onClick={(e) => { e.preventDefault(); go("contact"); }}>Get in touch</a>
          <button
            type="button"
            className={`nav-menu-toggle${menuOpen ? " open" : ""}`}
            aria-label={menuOpen ? "Close navigation menu" : "Open navigation menu"}
            aria-expanded={menuOpen ? "true" : "false"}
            aria-controls="mobile-navigation"
            onClick={() => setMenuOpen((open) => !open)}>
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>
      <div id="mobile-navigation" className={`nav-mobile-panel${menuOpen ? " open" : ""}`}>
        <div className="nav-mobile-links">
          {links.map((l) => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className={route === l.id ? "active" : ""}
              onClick={(e) => {
                e.preventDefault();
                setMenuOpen(false);
                go(l.id);
              }}>
              {l.label}
            </a>
          ))}
          <a
            href="#contact"
            className="nav-cta nav-mobile-cta"
            onClick={(e) => {
              e.preventDefault();
              setMenuOpen(false);
              go("contact");
            }}>
            Get in touch
          </a>
        </div>
      </div>
    </nav>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="logo" style={{ marginBottom: 18 }}>
              <Logo /> <span>Eidosoma</span>
            </div>
            <p style={{ maxWidth: 38 + "ch", fontSize: "0.95rem" }}>
              A biotech research company building always-on AI scientists and
              studying how intelligence emerges in living matter.
            </p>
            <p className="mono" style={{ marginTop: 20 }}>Reykjavík · Iceland · est. 2026</p>
          </div>
          <div>
            <h4>Company</h4>
            <a href="#home" onClick={(e) => { e.preventDefault(); go("home"); }}>Overview</a>
            <a href="#team" onClick={(e) => { e.preventDefault(); go("team"); }}>Team</a>
            <a href="#contact" onClick={(e) => { e.preventDefault(); go("contact"); }}>Contact</a>
          </div>
          <div>
            <h4>Work</h4>
            <a href="#consulting" onClick={(e) => { e.preventDefault(); go("consulting"); }}>Consulting</a>
            <a href="#lab" onClick={(e) => { e.preventDefault(); go("lab"); }}>Lab</a>
            <a href="#scientist" onClick={(e) => { e.preventDefault(); go("scientist"); }}>AI Scientist</a>
          </div>
          <div>
            <h4>Elsewhere</h4>
            <a href="https://x.com/EidosomaAI" target="_blank" rel="noopener noreferrer">X</a>
            <a href="https://www.linkedin.com/company/eidosoma-ai" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            <a href="https://github.com/Eidosoma" target="_blank" rel="noopener noreferrer">GitHub</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Eidosoma</span>
          <span>Reykjavík · 64° 08′ N · 21° 56′ W</span>
          <span>A biology that remembers.</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Sections ----------

function Hero({ treatment, dark, accent, go, headline = 0 }) {
  const HEADLINES = [
    { jsx: <>A biology that <span className="living">thinks</span>.</>, sub: "Eidosoma is a biotech company studying how intelligence emerges in living matter — and we build the AI scientists that help us, and other labs, listen." },
    { jsx: <>The <span className="living">living</span> science.</>, sub: "We run a 24/7 computational lab and build always-on AI scientists — for ourselves, and for the teams we consult with, across bioelectricity, regeneration, and artificial life." },
    { jsx: <>Cells are <span className="living">decision-makers</span>.</>, sub: "We study how cells solve problems together, and we help other labs do the same — with custom AI scientists that join the conversation." },
    { jsx: <>A biology that <span className="living">remembers</span>, reasons,<br/>and rewrites itself.</>, sub: "Eidosoma builds always-on AI scientists — for our own lab and for the partners we consult with — exploring the collective intelligence of cells." },
    { jsx: <>Listening to <span className="living">cells</span>.</>, sub: "A biotech research company in Reykjavík, building the instruments — and the partnerships — for a science that never sleeps." },
  ];
  const h = HEADLINES[headline] || HEADLINES[0];
  return (
    <section className="hero" id="home-hero">
      <div className="hero-canvas">
        <HeroCanvas treatment={treatment} dark={dark} accent={accent} />
      </div>
      <div className="container hero-content" style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", paddingTop: 80, paddingBottom: 60 }}>
        <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 32 }}>
          <span className="eyebrow">A biotech research company · Reykjavík</span>
        </div>
        <h1 className="hero-manifesto">{h.jsx}</h1>
        <p className="hero-sub">A biotech research company building always-on AI scientists and studying how intelligence emerges in living matter.</p>
      </div>
      <div className="container">
        <div className="hero-meta">
          <div>
            <div className="mono" style={{ marginBottom: 6 }}>Active research threads</div>
            <div className="serif" style={{ fontSize: "1.4rem" }}>Bioelectricity · Regeneration · ALife</div>
          </div>
          <div>
            <div className="mono" style={{ marginBottom: 6 }}>Lab uptime</div>
            <div className="serif" style={{ fontSize: "1.4rem" }}>24 / 7 / 365</div>
          </div>
          <div>
            <div className="mono" style={{ marginBottom: 6 }}>First dynamic paper</div>
            <div className="serif" style={{ fontSize: "1.4rem" }}>v12.4 · updating</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = [
    "Collective intelligence",
    "Bioelectric fields",
    "Regenerative medicine",
    "Open-endedness",
    "Morphogenesis",
    "ALife",
  ];
  const row = items.concat(items);
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row.map((x, i) => (
          <span key={i}>
            <span className="em">{x}</span>
            <span className="dot" style={{ marginLeft: 142 }}>◍</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function ManifestoSection() {
  return (
    <section id="manifesto">
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 28 }}>Manifesto</div>
          <h2 className="h-display" style={{ maxWidth: "16ch", marginBottom: 40 }}>
            We are building the <span className="italic-hl">instruments</span> of a living science.
          </h2>
        </Reveal>
        <div className="split" style={{ marginTop: 40 }}>
          <Reveal delay={100}>
            <p className="lede">
              Biology is the last great frontier of intelligence, and it is one we are barely
              learning to listen to. For centuries we have treated cells as chemistry. They are
              also <em>decision-makers</em> — solving problems together,
              in a language we are just beginning to read.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <p className="lede">
              Eidosoma exists to build the collaborators that will help us read that language
              — and eventually, converse with it. A biotech research lab and an
              AI-scientist company, operating as one organism with two tissues.
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function ConsultingSection({ go }) {
  return (
    <section id="consulting-preview" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div className="split">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 20 }}>01 · Eidosoma Consulting</div>
            <h2 className="h-1" style={{ maxWidth: "14ch" }}>
              Integrate AI into your research, <span className="italic-hl">without losing the scientist.</span>
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p className="lede">{CONTENT.consulting.body}</p>
            <div style={{ marginTop: 32 }}>
              <button className="btn btn-ghost" onClick={() => go("consulting")}>
                Explore consulting <span className="arrow">→</span>
              </button>
            </div>
          </Reveal>
        </div>

        <div className="grid grid-3" style={{ marginTop: 80 }}>
          {CONTENT.consulting.offerings.map((o, i) => (
            <Reveal key={o.label} delay={i * 100}>
              <div className="card" style={{ height: "100%" }}>
                <div className="mono" style={{ marginBottom: 14 }}>Offering 0{i + 1}</div>
                <h3 className="h-3" style={{ marginBottom: 12 }}>{o.label}</h3>
                <p style={{ fontSize: "0.98rem" }}>{o.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function LabSection({ go }) {
  return (
    <section id="lab-preview">
      <div className="container">
        <div className="split" style={{ marginBottom: 60 }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 20 }}>02 · Eidosoma Lab</div>
            <h2 className="h-1" style={{ maxWidth: "14ch" }}>
              A laboratory that <span className="italic-hl">never closes.</span>
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p className="lede">{CONTENT.lab.body}</p>
            <div style={{ marginTop: 32 }}>
              <button className="btn btn-ghost" onClick={() => go("lab")}>
                Inside the lab <span className="arrow">→</span>
              </button>
            </div>
          </Reveal>
        </div>

        <div className="grid grid-3">
          {CONTENT.lab.areas.map((a, i) => (
            <Reveal key={a.title} delay={i * 120}>
              <div className="research-card">
                <ResearchIcon i={i} />
                <div className="mono">Thread 0{i + 1}</div>
                <h3 className="h-3">{a.title}</h3>
                <p style={{ fontSize: "0.95rem" }}>{a.body}</p>
                <div className="q">“{a.q}”</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ResearchIcon({ i }) {
  // Simple, non-slop SVG placeholders — geometric diagrams
  if (i === 0) return (
    <svg viewBox="0 0 120 80" className="research-icon" fill="none">
      <circle cx="30" cy="40" r="18" stroke="var(--ink)" strokeWidth="1"/>
      <circle cx="70" cy="26" r="14" stroke="var(--ink)" strokeWidth="1"/>
      <circle cx="90" cy="56" r="16" stroke="var(--ink)" strokeWidth="1"/>
      <path d="M40 38 Q55 30 60 30" stroke="var(--accent)" strokeWidth="1" strokeDasharray="2 3"/>
      <path d="M80 38 Q85 48 82 52" stroke="var(--accent)" strokeWidth="1" strokeDasharray="2 3"/>
      <circle cx="30" cy="40" r="2.5" fill="var(--accent)"/>
      <circle cx="70" cy="26" r="2.5" fill="var(--accent)"/>
      <circle cx="90" cy="56" r="2.5" fill="var(--accent)"/>
    </svg>
  );
  if (i === 1) return (
    <svg viewBox="0 0 120 80" className="research-icon" fill="none">
      <path d="M10 60 Q30 20, 60 40 T110 30" stroke="var(--ink)" strokeWidth="1"/>
      <path d="M10 70 Q30 35, 60 50 T110 42" stroke="var(--ink)" strokeWidth="1" opacity="0.5"/>
      <circle cx="60" cy="40" r="5" fill="var(--accent)"/>
      <line x1="60" y1="20" x2="60" y2="35" stroke="var(--accent)" strokeWidth="1"/>
      <line x1="55" y1="25" x2="65" y2="25" stroke="var(--accent)" strokeWidth="1"/>
    </svg>
  );
  return (
    <svg viewBox="0 0 120 80" className="research-icon" fill="none">
      <rect x="10" y="15" width="22" height="22" stroke="var(--ink)" strokeWidth="1"/>
      <rect x="40" y="15" width="22" height="22" stroke="var(--ink)" strokeWidth="1"/>
      <rect x="70" y="15" width="22" height="22" stroke="var(--accent)" strokeWidth="1" fill="var(--accent-soft)"/>
      <rect x="25" y="45" width="22" height="22" stroke="var(--ink)" strokeWidth="1"/>
      <rect x="55" y="45" width="22" height="22" stroke="var(--accent)" strokeWidth="1" fill="var(--accent-soft)"/>
      <rect x="85" y="45" width="22" height="22" stroke="var(--ink)" strokeWidth="1"/>
    </svg>
  );
}

function AIScientistSection({ go }) {
  return (
    <section id="scientist-preview" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div className="split">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 20 }}>03 · AI Scientist</div>
            <h2 className="h-1" style={{ maxWidth: "16ch" }}>
              A scientist. Not a chatbot <span className="italic-hl">with a lab coat.</span>
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p className="lede">{CONTENT.aiScientist.body}</p>
            <ul style={{ marginTop: 28, padding: 0, listStyle: "none" }}>
              {CONTENT.aiScientist.bullets.map((b, i) => (
                <li key={i} style={{ display: "flex", gap: 14, padding: "10px 0", borderBottom: "1px solid var(--rule)", color: "var(--ink-soft)" }}>
                  <span className="mono" style={{ color: "var(--accent)" }}>{String(i + 1).padStart(2, "0")}</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 32 }}>
              <button className="btn btn-primary" onClick={() => go("scientist")}>
                Meet your scientist <span className="arrow">→</span>
              </button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function ModulesSection() {
  const [open, setOpen] = useStateS(0);
  return (
    <section id="modules">
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Modules</div>
          <h2 className="h-1" style={{ maxWidth: "16ch", marginBottom: 24 }}>
            Built from <span className="italic-hl">composable</span> research modules.
          </h2>
          <p className="lede" style={{ marginBottom: 48 }}>
            Each Eidosoma AI Scientist is assembled from a small set of composable modules — below are three of the core ones. Tap to unfold.
          </p>
        </Reveal>

        <div className="grid" style={{ gap: 14 }}>
          {CONTENT.modules.map((m, i) => (
            <div key={m.n} className={"module " + (open === i ? "open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="module-head">
                <div className="module-num">{m.n}</div>
                <div style={{ flex: 1 }}>
                  <div className="module-title">{m.title}</div>
                  <div style={{ marginTop: 6, color: "var(--ink-mute)", fontSize: "0.95rem" }}>{m.summary}</div>
                </div>
                <div className="module-toggle" style={{ alignSelf: "center" }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" strokeWidth="1.2"/>
                    <line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" strokeWidth="1.2"/>
                  </svg>
                </div>
              </div>
              <div className="module-body">
                <div className="module-body-inner">
                  <div></div>
                  <div>
                    <p>{m.body}</p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DynamicPaperSection() {
  const [tick, setTick] = useStateS(0);
  useEffectS(() => {
    const id = setInterval(() => setTick((t) => t + 1), 2500);
    return () => clearInterval(id);
  }, []);
  const lastUpdate = useMemoS(() => {
    const now = new Date();
    const mins = 6 + (tick % 4);
    return `${mins}m ago`;
  }, [tick]);

  return (
    <section id="paper" style={{ background: "var(--bg-deep)" }}>
      <div className="container">
        <div className="split">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 20 }}>A new form of paper</div>
            <h2 className="h-1" style={{ maxWidth: "14ch" }}>
              Papers that <span className="italic-hl">keep thinking</span> after you publish them.
            </h2>
            <p className="lede" style={{ marginTop: 24 }}>
              A dynamic paper does not freeze at submission. It publishes an abstract, figures,
              code, and reasoning — and then it keeps updating, because the AI scientist behind
              it is still running experiments. Readers can re-open any experiment with different
              parameters, and the paper will respond.
            </p>
            <div className="pill-row">
              <span className="pill accent"><span className="live-dot" style={{ marginRight: 6 }}></span>Live</span>
              <span className="pill">Versioned</span>
              <span className="pill">Re-openable</span>
              <span className="pill">Citation-stable</span>
            </div>
          </Reveal>

          <Reveal delay={150}>
            <div className="paper">
              <div className="paper-head">
                <div className="mono"><span className="live-dot"></span>Updated {lastUpdate}</div>
                <div className="mono" style={{ color: "var(--accent)" }}>v12.4</div>
              </div>
              <div className="paper-body">
                <div className="paper-meta">{CONTENT.paper.status}</div>
                <h3 className="paper-title">{CONTENT.paper.title}</h3>
                <div style={{ fontFamily: "var(--mono)", fontSize: "0.78rem", color: "var(--ink-mute)", letterSpacing: "0.08em", marginBottom: 20, textTransform: "uppercase" }}>
                  {CONTENT.paper.authors}
                </div>
                <p className="paper-abstract">{CONTENT.paper.abstract}</p>
              </div>
              <div className="paper-updates">
                <div className="mono" style={{ marginBottom: 10 }}>Recent updates</div>
                {CONTENT.paper.updates.map((u, i) => (
                  <div key={i} className="update-item">
                    <div className="update-time">{u.t}</div>
                    <div>{u.text}</div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function NewsSection() {
  return (
    <section id="news">
      <div className="container">
        <div className="split" style={{ marginBottom: 40 }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Dispatches</div>
            <h2 className="h-1" style={{ maxWidth: "12ch" }}>Recent from the lab.</h2>
          </Reveal>
          <Reveal delay={120}>
            <p className="lede">Short, dense updates from our AI scientists, our collaborators, and the humans who keep them honest.</p>
          </Reveal>
        </div>
        <div>
          {CONTENT.news.map((n, i) => (
            <a key={i} className="news-item" href="#">
              <div className="news-date">{n.date} · {n.tag}</div>
              <div className="news-title">{n.title}</div>
              <div className="news-arrow">→</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function TeamSection({ go }) {
  return (
    <section id="team-preview" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Team</div>
          <h2 className="h-1" style={{ maxWidth: "18ch", marginBottom: 60 }}>
            A small company with <span className="italic-hl">always-on collaborators.</span>
          </h2>
        </Reveal>

        <div className="founder">
          <Reveal>
            <div className="founder-photo">
              <img src={(window.__resources && window.__resources.robertImg) || "assets/robert.png"} alt="Robert Bjarnason" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </Reveal>
          <Reveal delay={150}>
            <div className="mono">Founder</div>
            <h3 className="h-2" style={{ marginTop: 10, marginBottom: 6 }}>{CONTENT.founder.name}</h3>
            <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--accent)", fontSize: "1.2rem", marginBottom: 24 }}>
              {CONTENT.founder.role}
            </div>
            <p style={{ maxWidth: "60ch", fontSize: "1.05rem", lineHeight: 1.65 }}>{CONTENT.founder.bio}</p>
            <div className="mono" style={{ marginTop: 24 }}>📍 {CONTENT.founder.location}</div>
            <div style={{ marginTop: 32 }}>
              <button className="btn btn-ghost" onClick={() => go("team")}>
                Team & open role <span className="arrow">→</span>
              </button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function CTASection({ go }) {
  return (
    <section id="cta">
      <div className="container" style={{ textAlign: "center" }}>
        <Reveal>
          <h2 className="h-display" style={{ maxWidth: "16ch", margin: "0 auto" }}>
            Work with us on a <span className="italic-hl">living</span> science.
          </h2>
          <p className="lede" style={{ margin: "32px auto 40px", textAlign: "center" }}>
            We are planning initially to partner with a small number of labs and companies this year.
            Consulting engagements begin with a two-week discovery sprint.
          </p>
          <div style={{ display: "inline-flex", gap: 12 }}>
            <button className="btn btn-primary" onClick={() => go("contact")}>
              Start a conversation <span className="arrow">→</span>
            </button>
            <button className="btn btn-ghost" onClick={() => go("scientist")}>Explore the AI Scientist</button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Footer = Footer;
window.Hero = Hero;
window.Marquee = Marquee;
window.ManifestoSection = ManifestoSection;
window.ConsultingSection = ConsultingSection;
window.LabSection = LabSection;
window.AIScientistSection = AIScientistSection;
window.ModulesSection = ModulesSection;
window.DynamicPaperSection = DynamicPaperSection;
window.NewsSection = NewsSection;
window.TeamSection = TeamSection;
window.CTASection = CTASection;
window.ImagePlaceholder = ImagePlaceholder;
window.Reveal = Reveal;
window.Logo = Logo;