/* Product page: LayerXP. Hero → challenge → headline results → what it is
   (six actives) → how it works (3 mechanisms) → field evidence → technical
   spec → producer ROI → case study → CTA. Content per PHYOMIC_AG_Product_LayerXP. */
function ProductPage({ onNav }) {
  const { Button, SectionHeading, Stat, Badge, Callout, ProductLockup, Eyebrow } = window.PHYOMICAGDesignSystem_ac1e0b;
  const Media = window.Media, Container = window.Container;

  const actives = [
    ["Quinaquinone™ (QAQ)", "Patented water-soluble vitamin K₁ analogue, the carboxylation active."],
    ["Bacillus subtilis", "Spore-forming probiotic gut stabiliser."],
    ["Humates", "Humic & fulvic acids for mineral absorption and immune support."],
    ["Agave inulin", "Prebiotic gut modulator, fuel for the probiotic."],
    ["Ascophyllum nodosum", "Brown seaweed for immune modulation and stress reduction."],
    ["Molasses", "Fermentation substrate and readily available energy source."],
  ];

  const mechanisms = [
    ["01", "Bone integrity through osteocalcin carboxylation",
      "Bone mineralisation depends on osteocalcin, a vitamin K-dependent protein. Synthetic K3 (menadione) under-carboxylates it at peak lay and induces oxidative stress. QAQ carboxylates osteocalcin efficiently, driving calcium into the bone matrix instead of losing it, a measurable reversal of late-lay osteoporosis."],
    ["02", "A synbiotic engine for gut function",
      "Agave inulin (the fuel) paired with Bacillus subtilis (the engine) stabilises the ageing gut microbiome, improves feed conversion and lowers eggshell-defect rates. Published Bacillus subtilis work shows concurrent gains in production and tibia quality."],
    ["03", "Immunity, stress reduction & biofortification",
      "Humates lift mineral absorption and elevate serum IgG and IgM; Ascophyllum polysaccharides modulate immunity and cut oxidative stress. A secondary effect: QAQ transfers efficiently into the yolk, reaching 213.27 µg/100 g, a 40× lift that turns the egg into a functional food."],
  ];

  const evidence = [
    ["Egg production @ Week 90", "81%", "vs 54% control, +50% relative"],
    ["Lifetime egg production", "22.61 dz", "vs 19.54 dz, +16% at equal feed"],
    ["Bone density (W27 → W36)", "+3.8%", "on QAQ vs −5.4% on synthetic K3", "var(--gold)"],
    ["Yolk vitamin K₁", "40×", "5.32 → 213.27 µg/100 g"],
    ["Projected income per hen", "+25%", "on a 30,000-hen flock"],
    ["Farmer ROI", "~700%", "at farm gate"],
  ];

  const specs = [
    ["Format", "Stable liquid concentrate, easily dispersible in water"],
    ["Active components", "Quinaquinone™ (QAQ) · Bacillus subtilis · humic & fulvic acids · agave inulin · Ascophyllum nodosum · molasses"],
    ["Production", "Proprietary fermentation platform: synergistic metabolites, not a simple blend"],
    ["Application channel", "Existing automated water lines, via the PHYOMIC.AG AgriDose dosing system"],
    ["Target species", "Commercial laying hens: ISA Brown and equivalent high-yield genetics"],
    ["Dose", "250 µg QAQ per hen per day, continuous through the laying cycle"],
    ["Cycle supported", "90–100 weeks, long-life layer"],
    ["Feed intake impact", "None: production lift achieved at equivalent feed intake"],
    ["Regulatory standing", "Australian-manufactured · research-backed, scientifically validated actives"],
    ["Premium output", "Vitamin K₁-biofortified egg: 213.27 µg/100 g yolk at optimal dose"],
  ];

  const roiLevers = [
    ["Extended persistency", "81% of peak lay at Week 90 rather than retiring at 54% pushes amortisation out 18–28 weeks of profitable production per cycle, against a pullet cost paid once."],
    ["+16% lifetime egg volume", "More saleable eggs per hen at equivalent feed intake across the cycle."],
    ["Lower mortality & downgrades", "Fewer keel-bone fractures and late-lay shell defects."],
    ["~8% price premium", "Available on vitamin K₁-biofortified eggs sold into the functional-food channel."],
  ];

  return (
    <main>
      {/* HERO */}
      <section style={{ paddingTop: 64, paddingBottom: 56, background: "var(--teal-mist)" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
            <div>
              <Badge tone="teal">Livestock XP · Poultry · Commercial layers</Badge>
              <div style={{ marginBlock: 24 }}><ProductLockup name="Layer" xp size="lg" /></div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 19, lineHeight: 1.55, color: "var(--charcoal)", maxWidth: 480 }}>
                A water-line microbiomic system that extends the commercial laying hen past the 72-week barrier, and turns the egg itself into a biofortified premium product.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
                <Button variant="primary" onClick={() => onNav("contact")}>Request the trial data</Button>
                <Button variant="secondary" onClick={() => onNav("contact")}>Talk to a vet</Button>
              </div>
            </div>
            <Media tone="navy" ratio="4 / 3" label="Layer shed · 90-week cycle" style={{ borderRadius: 20 }}>
              <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 CHALLENGE */}
      <section style={{ paddingBlock: 80 }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "start" }}>
            <div>
              <Eyebrow>The challenge</Eyebrow>
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(1.75rem,2.6vw,2.25rem)", lineHeight: 1.15, color: "var(--navy)", margin: "14px 0 0", letterSpacing: "-0.01em" }}>
                The 72-week barrier is a physiological bottleneck, and a removable one.
              </h2>
            </div>
            <div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.65, color: "var(--charcoal)", margin: 0 }}>
                The modern hen is bred for 300+ eggs a year, yet most flocks are pulled around Week 72, not because the hen stops wanting to lay, but because her skeleton can no longer support it. Daily calcium mobilisation out of medullary bone to form shell silently dismantles the bird from the inside.
              </p>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.65, color: "var(--charcoal)", margin: "14px 0 0" }}>
                Traditional fixes stack on more calcium and vitamin D3, but ignore the limiting step: the carboxylation of osteocalcin, the vitamin K-dependent protein that decides whether calcium goes into bone or is lost through urine and shell.
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, marginTop: 28 }}>
                <Stat value="up to 85%" label="Of hens suffer keel-bone fractures by end of cycle in some systems" />
                <Stat value="US$21B" label="US egg industry whose unit economics a 90–100 week cycle would reset" />
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* HEADLINE RESULTS */}
      <section style={{ background: "var(--teal-mist)", paddingBlock: 80 }}>
        <Container>
          <SectionHeading eyebrow="Headline results" title="What the trials measured" level="h2"
            lead="A 40,000-bird German commercial trial across a full 90-week cycle, plus controlled University of Sydney clinical research. Every figure is cited to the underlying study." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, marginTop: 48 }}>
            <Stat value="81%" label="Lay rate at Week 90 vs 54% control, +50% relative" />
            <Stat value="+16%" label="Lifetime eggs vs control, at equal feed intake" />
            <Stat value="40×" label="Vitamin K₁ concentration in yolk" accent="var(--gold)" />
            <Stat value="~700%" label="Return on investment at farm gate" />
          </div>
        </Container>
      </section>

      {/* WHAT LAYERXP IS: six actives */}
      <section style={{ paddingBlock: 80 }}>
        <Container>
          <SectionHeading eyebrow="What LayerXP is" title="Six validated actives, one fermentation platform." level="h2"
            lead="Not a blend of additives: the fermentation step generates synergistic metabolites that cannot be obtained by mixing the inputs. Delivered through the existing drinking-water line at 250 µg QAQ per hen per day." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 40 }}>
            {actives.map(([name, desc]) => (
              <div key={name} style={{ background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-card)", padding: 24, boxShadow: "var(--shadow-card)" }}>
                <span style={{ display: "block", height: 2, width: 40, background: "var(--gold)", marginBottom: 14 }} />
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17, color: "var(--navy)" }}>{name}</div>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.55, color: "var(--charcoal)", margin: "8px 0 0" }}>{desc}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* HOW IT WORKS: three mechanisms */}
      <section style={{ background: "var(--navy)", paddingBlock: 88, borderTop: "2px solid var(--gold)" }}>
        <Container>
          <span style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--teal-light)" }}>How it works</span>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(1.875rem,3vw,2.5rem)", lineHeight: 1.12, color: "#fff", margin: "16px 0 44px", maxWidth: 720, letterSpacing: "-0.015em" }}>
            One intervention that fixes the skeleton, the gut and the immune system at once.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
            {mechanisms.map(([num, title, body]) => (
              <div key={num}>
                <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 40, color: "var(--gold)", lineHeight: 1 }}>{num}</span>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 19, color: "#fff", margin: "12px 0 0", lineHeight: 1.25 }}>{title}</h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 14.5, lineHeight: 1.6, color: "rgba(255,255,255,0.74)", margin: "10px 0 0" }}>{body}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* FIELD EVIDENCE */}
      <section style={{ paddingBlock: 80 }}>
        <Container>
          <SectionHeading eyebrow="Field evidence" title="The numbers, in full." level="h2" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 40 }}>
            {evidence.map(([label, value, note, accent]) => (
              <div key={label} style={{ background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: 4, padding: "22px 24px", boxShadow: "var(--shadow-card)" }}>
                <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--teal-grey)" }}>{label}</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 34, lineHeight: 1, color: accent || "var(--navy)", margin: "10px 0 6px", fontVariantNumeric: "tabular-nums" }}>{value}</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.45, color: "var(--charcoal)" }}>{note}</div>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* SPEC + MECHANISM CALLOUT */}
      <section style={{ background: "var(--teal-mist)", paddingBlock: 80 }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 48, alignItems: "start" }}>
            <div>
              <Eyebrow>Technical specification</Eyebrow>
              <table className="ph-tabular" style={{ width: "100%", borderCollapse: "collapse", marginTop: 18 }}>
                <tbody>
                  {specs.map(([k, v]) => (
                    <tr key={k} style={{ borderBottom: "1px solid var(--border-subtle)" }}>
                      <td style={{ padding: "14px 0", fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14, color: "var(--navy)", width: 150, verticalAlign: "top" }}>{k}</td>
                      <td style={{ padding: "14px 0", fontFamily: "var(--font-body)", fontSize: 14, color: "var(--charcoal)", lineHeight: 1.5 }}>{v}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <Callout>
              <Eyebrow>Mechanism</Eyebrow>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.6, color: "var(--charcoal)", margin: 0 }}>
                QAQ carboxylates osteocalcin, directing calcium into bone rather than urine and shell. In University of Sydney research, hens on QAQ showed a <strong>+3.8% bone-density change</strong> while menadione-supplemented birds lost <strong>5.4%</strong> over the same window.
              </p>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--teal-grey)" }}>University of Sydney controlled clinical research, ISA Brown hens.</span>
            </Callout>
          </div>
        </Container>
      </section>

      {/* PRODUCER ROI */}
      <section style={{ paddingBlock: 80 }}>
        <Container>
          <SectionHeading eyebrow="Producer ROI" title="Four compounding levers." level="h2"
            lead="Modelled on a representative 30,000-hen flock and validated against the German commercial trial dataset. The full ROI workbook is available on request, adjustable for local feed cost, egg price, pullet cost and labour." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginTop: 40 }}>
            {roiLevers.map(([title, body], i) => (
              <div key={title} style={{ borderTop: "2px solid var(--teal-deep)", paddingTop: 16 }}>
                <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, color: "var(--gold)" }}>{String(i + 1).padStart(2, "0")}</span>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17, color: "var(--navy)", margin: "6px 0 8px", lineHeight: 1.2 }}>{title}</h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.55, color: "var(--charcoal)", margin: 0 }}>{body}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 36, background: "var(--navy)", borderRadius: "var(--radius-card)", padding: "28px 32px", display: "flex", gap: 40, flexWrap: "wrap", alignItems: "center" }}>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 30, color: "#fff", fontVariantNumeric: "tabular-nums" }}>+25% income / hen</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "rgba(255,255,255,0.7)", marginTop: 4 }}>≈ $175,200 additional profit on a 30,000-hen flock</div>
            </div>
            <span style={{ width: 1, height: 44, background: "rgba(255,255,255,0.2)" }} />
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 30, color: "var(--gold)", fontVariantNumeric: "tabular-nums" }}>~700% ROI</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "rgba(255,255,255,0.7)", marginTop: 4 }}>at farm gate on the LayerXP intervention</div>
            </div>
          </div>
        </Container>
      </section>

      {/* CASE STUDY */}
      <section style={{ background: "var(--teal-mist)", paddingBlock: 80 }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
            <Media tone="deep" ratio="4 / 3" label="40,000-bird commercial trial · Germany" style={{ borderRadius: 20 }}>
              <window.Crossfade images={["assets/layer-eggs.jpg", "assets/layer-flock.jpg"]} alt="German LayerXP commercial trial flock and eggs" />
            </Media>
            <div>
              <Eyebrow>Case study · Germany</Eyebrow>
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(1.75rem,2.6vw,2.25rem)", lineHeight: 1.15, color: "var(--navy)", margin: "14px 0 0", letterSpacing: "-0.01em" }}>
                20,000 on LayerXP. 20,000 on control. Matched everything else.
              </h2>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.65, color: "var(--charcoal)", margin: "16px 0 0" }}>
                In matched housing with identical feed, water and management, LayerXP led from Week 2 (96% vs 92%). The gap widened through the cycle: <strong>Week 60, 91% vs 74%</strong>; <strong>Week 90, 81% vs 54%</strong>, a 50% relative lift where most operations have already replaced the flock. Lifetime production reached 22.61 dozen per hen vs 19.54 (+16%) at equal 42.00 kg feed intake.
              </p>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.65, color: "var(--charcoal)", margin: "14px 0 0" }}>
                The University of Sydney clinical research underwrote the mechanism, reversing bone-density decline (+3.8% vs −5.4%) and lifting yolk vitamin K₁ from 5.32 to 213.27 µg/100 g. Field result and clinical result agree.
              </p>
            </div>
          </div>
        </Container>
      </section>

      {/* CTA */}
      <section style={{ position: "relative", overflow: "hidden", background: "var(--navy)", paddingBlock: 72, borderTop: "2px solid var(--gold)" }}>
        <window.NetworkField spacing={320} intensity={1.1} seed={37} />
        <Container style={{ position: "relative", zIndex: 1, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#fff", margin: 0, maxWidth: 560 }}>
              Talk to the team that built the product.
            </h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "rgba(255,255,255,0.72)", margin: "10px 0 0", maxWidth: 520 }}>
              Request a trial protocol, the full LayerXP technical dossier, or a tailored ROI model for your operation.
            </p>
          </div>
          <Button variant="primary" size="lg" onClick={() => onNav("contact")}>Talk to the team</Button>
        </Container>
      </section>
    </main>
  );
}

window.ProductPage = ProductPage;
