// Subpages — Consulting, Lab, Scientist, Team, Contact
const { useState: useStateP } = React;

function PageHero({ eyebrow, title, sub }) {
  return (
    <section className="page-hero">
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 24 }}>{eyebrow}</div>
        <h1 className="h-display" style={{ maxWidth: "18ch", marginBottom: 28 }} dangerouslySetInnerHTML={{ __html: title }} />
        <p className="lede">{sub}</p>
      </div>
    </section>
  );
}

function ConsultingPage({ go }) {
  return (
    <>
      <PageHero
        eyebrow="Eidosoma Consulting"
        title='Integrate AI into your research — <span class="italic-hl">without losing the scientist.</span>'
        sub={CONTENT.consulting.body}
      />

      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>Engagements</div>
          <h2 className="h-1" style={{ maxWidth: "16ch", marginBottom: 60 }}>Three shapes of partnership.</h2>
          <div className="grid grid-3">
            {CONTENT.consulting.offerings.map((o, i) => (
              <div key={o.label} className="card" style={{ height: "100%", padding: 36 }}>
                <div className="mono" style={{ marginBottom: 14 }}>Offering 0{i + 1}</div>
                <h3 className="h-2" style={{ marginBottom: 16, fontSize: "1.7rem" }}>{o.label}</h3>
                <p>{o.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: "var(--bg-soft)" }}>
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>How we work</div>
              <h2 className="h-1" style={{ maxWidth: "14ch" }}>
                Your scientist, <span className="italic-hl">your IP.</span>
              </h2>
            </div>
            <div>
              {[
                ["01", "Map the research", "We embed in your lab for a week. We read your notebooks, shadow your scientists, understand what a 'good day' looks like."],
                ["02", "Shape the scientist", "We assemble a custom AI scientist from Eidosoma modules, tuned to your domain. You see it running on real work within two weeks."],
                ["03", "Hand over the keys", "The scientist ships as source code. It is yours. We stay on as ongoing collaborators for as long as you want us."],
              ].map(([n, t, b]) => (
                <div key={n} style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 24, padding: "24px 0", borderBottom: "1px solid var(--rule)" }}>
                  <div className="mono" style={{ color: "var(--accent)" }}>{n}</div>
                  <div>
                    <h3 className="h-3" style={{ marginBottom: 8 }}>{t}</h3>
                    <p>{b}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CTASection go={go} />
    </>
  );
}

function LabPage({ go }) {
  return (
    <>
      <PageHero
        eyebrow="Eidosoma Lab"
        title='A laboratory that <span class="italic-hl">never closes.</span>'
        sub={CONTENT.lab.body}
      />

      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>Research threads</div>
          <h2 className="h-1" style={{ maxWidth: "16ch", marginBottom: 60 }}>Three questions we cannot stop asking.</h2>

          {CONTENT.lab.areas.map((a, i) => (
            <div key={a.title} className="split" style={{ padding: "48px 0", borderTop: "1px solid var(--rule)", gap: 60 }}>
              <div>
                <div className="mono" style={{ marginBottom: 14 }}>Thread {String(i + 1).padStart(2, "0")}</div>
                <h3 className="h-2" style={{ maxWidth: "14ch" }}>{a.title}</h3>
                <div style={{ marginTop: 24 }}>
                  <ResearchIcon i={i} />
                </div>
              </div>
              <div>
                <p className="lede">{a.body}</p>
                <div style={{ marginTop: 28, padding: 24, background: "var(--bg-soft)", border: "1px solid var(--rule)", borderRadius: 16 }}>
                  <div className="mono" style={{ marginBottom: 10 }}>The question</div>
                  <div className="serif" style={{ fontSize: "1.5rem", fontStyle: "italic", lineHeight: 1.3, color: "var(--ink)" }}>“{a.q}”</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* TODO: re-enable once the real numbers are ready.
      <section style={{ background: "var(--bg-soft)" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>Lab in numbers</div>
          <div className="grid grid-4" style={{ marginTop: 40 }}>
            {[
              ["2.1M", "Candidate-hours per month"],
              ["18,400", "Trajectories simulated"],
              ["24/7", "Continuous operation"],
              ["v12.4", "Current dynamic paper"],
            ].map(([n, l]) => (
              <div key={l}>
                <div className="serif" style={{ fontSize: "clamp(2.6rem, 4vw, 3.8rem)", lineHeight: 1, letterSpacing: "-0.02em" }}>{n}</div>
                <div className="mono" style={{ marginTop: 14 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      */}

      <CTASection go={go} />
    </>
  );
}

function ScientistPage({ go }) {
  return (
    <>
      <PageHero
        eyebrow="AI Scientist"
        title='A scientist. Not a chatbot <span class="italic-hl">with a lab coat.</span>'
        sub={CONTENT.aiScientist.body + " We set these up for partner labs as part of our consulting engagements — every AI Scientist is built, tuned, and handed over through the same process."}
      />

      <section>
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>Principles</div>
              <h2 className="h-1" style={{ maxWidth: "16ch" }}>Five non-negotiables.</h2>
            </div>
            <div>
              <ul style={{ padding: 0, listStyle: "none" }}>
                {CONTENT.aiScientist.bullets.map((b, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 20, padding: "24px 0", borderBottom: "1px solid var(--rule)" }}>
                    <span className="mono" style={{ color: "var(--accent)" }}>{String(i + 1).padStart(2, "0")}</span>
                    <span className="serif" style={{ fontSize: "1.5rem", lineHeight: 1.35, letterSpacing: "-0.01em" }}>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <ModulesSection />
      {/* TODO: re-enable when we have real paper data to publish. See <DynamicPaperSection /> in sections.jsx */}
      {/* <DynamicPaperSection /> */}

      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>A day in the life</div>
          <h2 className="h-1" style={{ maxWidth: "16ch", marginBottom: 60 }}>What your scientist does while you sleep.</h2>
          <div className="grid grid-2" style={{ gap: 14 }}>
            {[
              ["22:00", "Runs overnight literature sweep. 723 papers scanned, 24 flagged as relevant."],
              ["01:30", "Generates four new hypotheses from flagged papers. Three survive internal review."],
              ["03:00", "Queues 46 computational experiments across three projects. Begins execution."],
              ["06:45", "Drafts two patch notes for your dynamic paper. Flags one experiment as suspicious."],
              ["07:30", "Writes your morning brief. Three findings, two questions for you, one request for a wet-lab replicate."],
              ["08:00", "You open your laptop."],
            ].map(([t, d]) => (
              <div key={t} className="card" style={{ display: "grid", gridTemplateColumns: "90px 1fr", gap: 20, padding: 24 }}>
                <div className="mono" style={{ color: "var(--accent)", fontSize: "0.9rem" }}>{t}</div>
                <div style={{ fontSize: "1rem" }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTASection go={go} />
    </>
  );
}

function TeamPage({ go }) {
  return (
    <>
      <PageHero
        eyebrow="Team"
        title='A small company with <span class="italic-hl">always-on collaborators.</span>'
        sub="Eidosoma is deliberately small. We believe a tight team of humans, working with a well-designed AI scientist, can outpace organisations many times their size — and have more fun doing it."
      />

      <section>
        <div className="container">
          <div className="founder">
            <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>
            <div>
              <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.3rem", marginBottom: 28 }}>
                {CONTENT.founder.role}
              </div>
              <p style={{ maxWidth: "60ch", fontSize: "1.1rem", lineHeight: 1.65 }}>{CONTENT.founder.bio}</p>
              <div className="pill-row" style={{ marginTop: 28 }}>
                <span className="pill">Collective intelligence</span>
                <span className="pill">AI systems</span>
                <span className="pill">Open-endedness</span>
                <span className="pill">Reykjavík</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: "var(--bg-soft)" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>Hiring</div>
          <h2 className="h-1" style={{ maxWidth: "18ch", marginBottom: 24 }}>
            One open role. <span className="italic-hl">The first one.</span>
          </h2>
          <p style={{ maxWidth: "58ch", marginBottom: 48, fontSize: "1.05rem", color: "var(--ink-2)" }}>
            We are looking for a founding partner to become Chief Scientist at Eidosoma — a senior scientist with a strong track record in biotech who wants to build the lab with us from day one.
          </p>
          <div style={{ maxWidth: 760 }}>
            <div className="card" style={{ padding: 40 }}>
              <div className="mono" style={{ marginBottom: 14 }}>Open role · Founding partner</div>
              <h3 className="h-2" style={{ marginBottom: 20 }}>Chief Scientist</h3>
              <p style={{ fontSize: "1.02rem", marginBottom: 18 }}>
                You have a strong track record in biotech — a meaningful record of peer-reviewed work, programs, or products — and you are ready to pair that with a computational lab that runs 24/7. You will set the scientific direction of Eidosoma Lab, shape what our AI scientists investigate, and co-found the company with equity from day one.
              </p>
              <p style={{ fontSize: "0.98rem", color: "var(--ink-2)", marginBottom: 24 }}>
                Based in Reykjavík or remote, with regular time in Iceland. We are open-minded about field — bioelectricity, regenerative medicine, oncology, synthetic biology, systems biology — as long as you have strong opinions about where biology should go next and a record to back them.
              </p>
              <div>
                <a href="#" onClick={(e) => { e.preventDefault(); go("contact"); }} style={{ color: "var(--accent)", fontFamily: "var(--mono)", fontSize: "0.8rem", letterSpacing: "0.1em", textTransform: "uppercase" }}>
                  Get in touch →
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTASection go={go} />
    </>
  );
}

function ContactPage() {
  return (
    <>
      <PageHero
        eyebrow="Contact"
        title='Start a <span class="italic-hl">conversation.</span>'
        sub="Whether you want to build an AI scientist, collaborate on a research question, or just compare notes on bioelectricity at midnight — we would like to hear from you."
      />

      <section>
        <div className="container">
          <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
            <div className="eyebrow" style={{ marginBottom: 28, justifyContent: "center" }}>Say hello</div>
            <h2 className="h-1" style={{ maxWidth: "18ch", margin: "0 auto 48px" }}>
              We read <span className="italic-hl">every</span> message. Really.
            </h2>

            <a href="mailto:hello@eidosoma.ai"
               className="serif"
               style={{
                 display: "inline-block",
                 fontSize: "clamp(2.2rem, 4.6vw, 3.6rem)",
                 letterSpacing: "-0.02em",
                 lineHeight: 1.1,
                 padding: "12px 0",
                 borderBottom: "1px solid var(--rule)",
                 transition: "color 240ms, border-color 240ms",
               }}
               onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; e.currentTarget.style.borderBottomColor = "var(--accent)"; }}
               onMouseLeave={(e) => { e.currentTarget.style.color = ""; e.currentTarget.style.borderBottomColor = "var(--rule)"; }}>
              hello@eidosoma.ai
            </a>

            <p className="lede" style={{ margin: "40px auto 0", maxWidth: "52ch" }}>
              A human will read your note and reply soon.
            </p>

            <div style={{
              marginTop: 80, paddingTop: 48, borderTop: "1px solid var(--rule)",
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40, textAlign: "left",
            }}>
              <div>
                <div className="mono" style={{ marginBottom: 10 }}>Consulting</div>
                <div className="serif" style={{ fontSize: "1.2rem" }}>hello@eidosoma.ai</div>
              </div>
              <div>
                <div className="mono" style={{ marginBottom: 10 }}>Press</div>
                <div className="serif" style={{ fontSize: "1.2rem" }}>press@eidosoma.ai</div>
              </div>
              <div>
                <div className="mono" style={{ marginBottom: 10 }}>Office</div>
                <div className="serif" style={{ fontSize: "1.2rem" }}>Reykjavík, Iceland</div>
                <div className="mono" style={{ marginTop: 8, fontSize: "0.7rem" }}>64° 08′ N · 21° 56′ W</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function HomePage({ treatment, dark, accent, headline, go }) {
  return (
    <>
      <Hero treatment={treatment} dark={dark} accent={accent} headline={headline} go={go} />
      {/* Temporarily hide the scrolling concept banner; keep component for later reuse */}
      {/* <Marquee /> */}
      <ManifestoSection />
      <ConsultingSection go={go} />
      <LabSection go={go} />
      <AIScientistSection go={go} />
      <ModulesSection />
      {/* TODO: re-enable Dynamic Paper section once we have real content ready */}
      {/* <DynamicPaperSection /> */}
      {/* TODO: re-enable News / Dispatches once we have real updates to share */}
      {/* <NewsSection /> */}
      <TeamSection go={go} />
      <CTASection go={go} />
    </>
  );
}

window.ConsultingPage = ConsultingPage;
window.LabPage = LabPage;
window.ScientistPage = ScientistPage;
window.TeamPage = TeamPage;
window.ContactPage = ContactPage;
window.HomePage = HomePage;