/* V3 homepage — same content as V2, restructured so each section carries
   one idea and far less on screen. Long paragraphs are split at sentence
   boundaries (wording unchanged); number-dense sentences are broken out
   into quiet stat bands; every measure is capped so nothing reads dense. */
function Home({ onNav }) {
  const { Button, Stat, Badge, Eyebrow } = window.PHYOMICAGDesignSystem_ac1e0b;
  const Media = window.Media, Container = window.Container, LearnMore = window.LearnMore;
  const narrow = window.useNarrow();
  const R = 24;

  const label = (text, dark) => (
    <span style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14, color: dark ? "var(--teal-light)" : "var(--teal-grey)" }}>{text}</span>
  );
  const body = (dark) => ({
    fontFamily: "var(--font-body)", fontSize: 17.5, lineHeight: 1.7,
    color: dark ? "rgba(255,255,255,0.78)" : "var(--charcoal)", margin: 0,
  });
  const h2 = (size = "clamp(2rem,3vw,2.5rem)", dark) => ({
    fontFamily: "var(--font-display)", fontWeight: 600, fontSize: size, lineHeight: 1.14,
    letterSpacing: "-0.01em", color: dark ? "#fff" : "var(--navy)", margin: 0, textWrap: "pretty",
  });

  return (
    <main>
      {/* HERO — one statement, nothing else */}
      <section style={{ position: "relative", height: narrow ? "82vh" : `${(window.__tw && window.__tw.heroHeight) || 88}vh`, minHeight: narrow ? 520 : 600 }}>
        <Media tone="navy" style={{ position: "absolute", inset: 0 }}>
          <window.Crossfade
            images={["assets/layer-flock.jpg", "assets/broiler-flock.jpg"]}
            position="50% 62%"
            alt="Free-range layer flock and broiler shed"
          />
        </Media>
        <div style={{ position: "absolute", inset: 0, background: narrow
          ? "linear-gradient(180deg, rgba(8,37,64,0.60) 0%, rgba(8,37,64,0.80) 100%)"
          : "linear-gradient(96deg, rgba(8,37,64,0.86) 0%, rgba(8,37,64,0.62) 46%, rgba(8,37,64,0.28) 100%)" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(8,37,64,0.45) 0%, rgba(8,37,64,0) 34%, rgba(8,37,64,0.55) 100%)" }} />
        <window.NetworkField spacing={320} intensity={0.45} seed={5} />
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", zIndex: 1 }}>
          <Container>
            <Eyebrow color="var(--teal-light)">Microbiomic systems. Not additives.</Eyebrow>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(2.375rem, 9vw, 5.75rem)", lineHeight: 1.02, letterSpacing: "-0.025em", color: "#fff", margin: "18px 0 0", maxWidth: 940 }}>
              Partnering with Nature's Intelligence.
            </h1>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 20, lineHeight: 1.5, color: "rgba(255,255,255,0.82)", margin: "22px 0 32px", maxWidth: 560 }}>
              Advanced microbiomic performance for global agriculture.
            </p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
              <Button variant="primary" size="lg" onClick={() => onNav("solutions")}>See the science</Button>
              <Button variant="reversed" size="lg" onClick={() => onNav("contact")}>Talk to the team</Button>
            </div>
          </Container>
        </div>
      </section>

      {/* STATEMENT — headline sticky at left, the four outcomes numbered at right */}
      <section style={{ paddingTop: narrow ? 56 : 128, paddingBottom: narrow ? 24 : 40 }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "minmax(0,0.95fr) minmax(0,1.05fr)", gap: narrow ? 36 : 80, alignItems: "start" }}>
            <div style={narrow ? null : { position: "sticky", top: 108 }}>
              <span style={{ display: "block", height: 2, width: 56, background: "var(--gold)", marginBottom: 28 }} />
              <h2 style={{ ...h2("clamp(1.875rem,6.4vw,3.25rem)"), fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.08, maxWidth: 520 }}>
                There's a microbiomic system for (almost) every production challenge.
              </h2>
            </div>
            <div>
              {[
                "Meat chickens that convert feed more efficiently, with lower mortality and fewer condemnations.",
                "Laying hens that stay productive deep into a 90-week cycle while preserving bone density.",
              ].map((t, n) => (
                <div key={n} style={{ display: "grid", gridTemplateColumns: narrow ? "40px 1fr" : "68px 1fr", gap: narrow ? 14 : 24, alignItems: "baseline",
                  paddingBlock: narrow ? 20 : 26, borderTop: n ? "1px solid rgba(8,37,64,0.12)" : "none" }}>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "var(--teal-deep)", fontVariantNumeric: "tabular-nums" }}>
                    {"0" + (n + 1)}
                  </span>
                  <p style={{ ...body(), fontSize: narrow ? 17 : 19, maxWidth: 440 }}>{t}</p>
                </div>
              ))}
              <p style={{ ...body(), fontSize: 15, color: "var(--teal-grey)", borderTop: "1px solid rgba(8,37,64,0.12)", paddingTop: 26 }}>
                Poultry is where our commercial products sit today. Soil and crop, red-meat and aquaculture systems are future opportunities in our discovery pipeline.
              </p>
            </div>
          </div>
        </Container>
      </section>

      {/* Closing line of the statement, on its own quiet band */}
      <section style={{ background: "var(--teal-mist)", paddingBlock: narrow ? 48 : 88 }}>
        <Container>
          <p style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(1.1875rem,4.6vw,1.75rem)", lineHeight: 1.42, letterSpacing: "-0.005em", color: "var(--navy)", margin: 0, maxWidth: 900, textWrap: "pretty" }}>
            Every PHYOMIC.AG product is formulated from first principles and dosed to commercial scale, without GM organisms and without toxic chemicals. <strong style={{ fontWeight: 700, color: "var(--teal-deep)" }}>And we are just getting started.</strong>
          </p>
        </Container>
      </section>

      {/* LAYERXP RESULT — image + headline only */}
      <section style={{ paddingTop: narrow ? 56 : 120, paddingBottom: narrow ? 40 : 72 }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "1fr 1.15fr", gap: narrow ? 28 : 72, alignItems: "center" }}>
            <div>
              <Badge tone="gold">Trial-validated</Badge>
              <h2 style={{ ...h2("clamp(2rem,3.1vw,2.625rem)"), margin: "22px 0 28px", maxWidth: 460 }}>
                A 90-week result that re-writes the layer economics.
              </h2>
              <LearnMore onClick={() => onNav("layerxp")}>Read the LayerXP result</LearnMore>
            </div>
            <Media tone="navy" ratio="3 / 2" label="Layer shed · 90-week cycle" style={{ borderRadius: R }}>
              <window.Crossfade
                images={["assets/layer-flock.jpg", "assets/layer-eggs.jpg"]}
                alt="LayerXP flock and eggs across the 90-week cycle"
              />
            </Media>
          </div>
        </Container>
      </section>

      {/* the numbers from that result, as a band of their own */}
      <section style={{ paddingBottom: narrow ? 56 : 120 }}>
        <Container>
          <div style={{ borderTop: "1px solid rgba(8,37,64,0.12)", paddingTop: narrow ? 28 : 40, display: "grid", gridTemplateColumns: narrow ? "repeat(2, minmax(0, 1fr))" : "repeat(4, minmax(0, 1fr))", gap: narrow ? "28px 20px" : 32 }}>
            <Stat value="81%" label="Lay at week 90, against 54% on control" />
            <Stat value={<span style={{ whiteSpace: "nowrap" }}>310 → 345</span>} label="Eggs per hen per year" />
            <Stat value="40×" label="Egg-yolk vitamin K₁ enrichment" />
            <Stat value="≈3.0×" label="Modelled return on input" />
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--stone)", margin: "28px 0 0" }}>
            20,000-hen Sydney field flock, run to week 90.
          </p>
        </Container>
      </section>

      {/* PURPOSE — statement on navy, image full-bleed beneath */}
      <section style={{ position: "relative", overflow: "hidden", background: "var(--navy)", paddingTop: narrow ? 56 : 120, paddingBottom: narrow ? 52 : 104 }}>
        <window.NetworkField spacing={340} intensity={1.1} seed={11} />
        <Container style={{ position: "relative", zIndex: 1 }}>
          {label("Our purpose", true)}
          <h2 style={{ ...h2("clamp(1.75rem,6.2vw,3.125rem)", true), fontWeight: 700, letterSpacing: "-0.018em", margin: "18px 0 0", maxWidth: 860 }}>
            We're here to restore the microbiomic systems that farming has always depended on.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "repeat(3, minmax(0, 1fr))", gap: narrow ? 24 : 48, marginTop: narrow ? 36 : 64 }}>
            <p style={{ ...body(true), maxWidth: 440 }}>
              Beneath each footprint of topsoil live more organisms than there are people on Earth. Inside each animal stands a second animal, a microbial ecosystem of trillions of cells whose metabolic vote decides whether a hen lays for 90 weeks instead of 60.
            </p>
            <p style={{ ...body(true), maxWidth: 440 }}>
              Inside those cells sits an older organism still: the mitochondrion, a bacterial truce struck two billion years ago.
            </p>
            <p style={{ ...body(true), maxWidth: 440 }}>
              The next wave of agricultural productivity won't come from another synthetic growth promoter, or another tonne of nitrogen prilled from natural gas. It comes from re-learning how to work with the biological systems that are always there.
            </p>
          </div>
        </Container>
      </section>

      <section style={{ height: narrow ? "44vh" : "62vh", minHeight: narrow ? 280 : 420, position: "relative" }}>
        <Media tone="deep" style={{ position: "absolute", inset: 0 }} label="Broiler and layer sheds · in-water dosing">
          <window.Crossfade images={["assets/broiler-flock.jpg", "assets/layer-flock.jpg"]} position="50% 58%" alt="Broiler flock in shed and layer flock on pasture" />
        </Media>
      </section>

      {/* FOOD SYSTEMS — statement + image, numbers pulled out below */}
      <section style={{ paddingTop: narrow ? 56 : 112, paddingBottom: narrow ? 40 : 72 }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "1fr 1.1fr", gap: narrow ? 28 : 72, alignItems: "center" }}>
            <div>
              {label("Australian & global food systems")}
              <h2 style={{ ...h2(), margin: "16px 0 28px", maxWidth: 440 }}>
                Feeding more people better food, while restoring the land.
              </h2>
              <p style={{ ...body(), maxWidth: 440 }}>
                Australian farmers feed roughly 70 million people beyond our own borders, on the oldest soils on Earth, with the most variable rainfall of any inhabited continent, under rising pressure to do it with fewer antibiotics and less synthetic nitrogen.
              </p>
              <p style={{ ...body(), maxWidth: 440, marginTop: 20 }}>
                The productivity story and the sustainability story are the same story, told in different verbs. Biology is the coupling.
              </p>
            </div>
            <Media tone="teal" ratio="4 / 3" label="Graded eggs · 90-week cycle" style={{ borderRadius: R }}>
              <window.Crossfade
                images={["assets/layer-eggs.jpg", "assets/layer-flock.jpg"]}
                alt="Graded eggs and the layer flock that produced them"
              />
            </Media>
          </div>
        </Container>
      </section>

      <section style={{ paddingBottom: narrow ? 64 : 128 }}>
        <Container>
          <div style={{ borderTop: "1px solid rgba(8,37,64,0.12)", paddingTop: narrow ? 28 : 40, display: "grid", gridTemplateColumns: narrow ? "1fr" : "repeat(3, minmax(0, 1fr))", gap: narrow ? 24 : 32 }}>
            <Stat value="70M" label="People fed beyond Australia's borders" />
            <Stat value="+30%" label="Projected rise in livestock antibiotic use by 2040" source="UN FAO, 2026" />
            <Stat value="Sept 2026" label="EU extends its AGP ban to imports" source="EC Reg. 2019/6" />
          </div>
        </Container>
      </section>
    </main>
  );
}

window.Home = Home;
