/* Product information pages: BroilerXP + LayerXP.
   Faithful web versions of the Aug-2026 one-page handouts, rendered in the
   site's Navy/Teal palette. Copy is verbatim from the handouts.
   Structure: hero → trial KPIs → commercial case + delivery → pilot offer
   → CTA → disclaimer. Exported as window.BroilerXP / window.LayerXP. */

/* Renders **bold** spans inside handout note copy. */
function RichNote({ text, style }) {
  const parts = String(text).split(/\*\*/);
  return (
    <p style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.5, color: "var(--charcoal)", margin: 0, ...style }}>
      {parts.map((p, i) => (i % 2 ? <strong key={i} style={{ color: "var(--navy)" }}>{p}</strong> : <React.Fragment key={i}>{p}</React.Fragment>))}
    </p>
  );
}

const PRODUCTS = {
  broiler: {
    key: "broilerxp",
    name: "BroilerXP",
    other: { key: "layerxp", label: "LayerXP", blurb: "Layer persistency, made commercial" },
    eyebrow: "Broiler performance, made practical",
    headline: ["More margin from the flock you ", "already have."],
    lede: "BroilerXP is an in-water Microbiomic System designed to support feed efficiency, livability, carcass quality and live weight, through the drinker lines you already run.",
    pill: "Fermented bioactives + QAQ Vitamin K technology",
    plate: "Australian-made",
    hero: { images: ["assets/broiler-flock.jpg"], caption: "Broiler flock · in-water dosing from Day 1" },
    kpiEyebrow: "Commercial trial performance",
    kpiSource: "New Zealand commercial broiler shed · full flock · in-water dosing",
    kpis: [
      ["−6.5", "%", "FCR", "1.55 to 1.45 in the source trial."],
      ["−63", "%", "Mortality", "6.0% to 2.2% in the source trial."],
      ["−81", "%", "Condemnations", "1.5% to 0.28% in the source trial."],
      ["+4.0", "%", "Live weight", "2.854 kg to 2.968 kg in the source trial."],
    ],
    caseTitle: ["Modelled Australian economics:", "make every bird work harder."],
    caseFigure: "+$0.68",
    caseFigureNote: "modelled additional net profit per bird placed",
    caseSub: [],
    caseChip: ["2.26×", "ROI on spend"],
    deliveryTitle: ["Performance without a new workload."],
    delivery: [
      ["Existing drinker lines", "Automated in-line dose from Day 1 to finish."],
      ["Zero daily mixing", "No premix rework, no cold chain and no routine dosing labour."],
      ["Technical read-out", "Weekly review with your team, including vet and nutritionist access."],
    ],
    pilotLede: "Run a controlled two-shed, three-cycle pilot that gives your team a clear end-of-cycle performance read-out.",
    pilotSteps: [
      ["Pair sheds", "Age- and diet-matched; same catch date."],
      ["Measure what matters", "FCR, mortality, live weight and condemnations."],
      ["Review together", "Joint end-of-cycle read-out with your team."],
    ],
    guarantee: "if trial cohort FCR does not improve by at least 3.0%, PHYOMIC.AG refunds 100% of invoiced BroilerXP used in the pilot.",
    ctaTitle: ["Put BroilerXP into ", "your sheds."],
    ctaLede: "A practical, measured pathway to higher-quality broilers and stronger production economics.",
    disclaimer: "Trial performance shown is from the commercial trial presented in the supplied BroilerXP deck. Australian economics are indicative modelling based on stated assumptions; they are not a guarantee. Results may vary with farm conditions, health status, nutrition, management and processing outcomes. BroilerXP ingredients are described in the source deck as holding Australian regulatory clearance; refer to your PHYOMIC.AG representative for product-use and regulatory information.",
  },
  layer: {
    key: "layerxp",
    name: "LayerXP",
    other: { key: "broilerxp", label: "BroilerXP", blurb: "Broiler performance, made practical" },
    eyebrow: "Layer persistency, made commercial",
    headline: ["Higher persistency from the flock you ", "already have."],
    lede: "LayerXP is an in-water or in-feed Microbiomic System built on the MSB × Quinaquinone® platform, designed to hold peak lay past week 90, strengthen shell and keel bone, and unlock a functional-egg premium.",
    pill: "MSB fermented bioactives + QAQ Vitamin-K platform",
    plate: "Australian-made",
    hero: { images: ["assets/layer-flock.jpg", "assets/layer-eggs.jpg"], caption: "Layer shed · 90-week cycle" },
    kpiEyebrow: "Commercial & trial performance",
    kpiSource: "Sydney 20k-hen field flock · German 8k-hen field flock · USyd cage trial",
    kpis: [
      ["+16", "%", "Eggs per hen / year", "**310 → 345 eggs** in the source trial."],
      ["+27", "pt", "Persistency, 90 weeks", "**81% vs 54%** end-of-cycle in the Sydney 20k-hen field flock."],
      ["+3.8", "%", "Bone quality (RBAE)", "**vs −5.4%** menadione control, USyd trial."],
      ["40", "×", "Yolk K1 enrichment", "Functional-egg premium unlocked."],
    ],
    caseTitle: ["Modelled Australian economics:", "make every hen work harder."],
    caseFigure: "+$17.12",
    caseFigureNote: "modelled additional net profit per hen per cycle",
    caseSub: [["$5.80", "input cost / hen / cycle"], ["+$22.92", "revenue uplift / hen"]],
    caseChip: ["≈3.0×", "ROI on input"],
    deliveryTitle: ["Two delivery routes.", "One product."],
    delivery: [
      ["In-water rescue", "0.5–1.0 mL/L via AgriDose Pro. Response inside 8 days."],
      ["In-feed programmed", "580 mg/tonne with your vitamin premix. Placement to 90+ weeks."],
      ["Vet + nutritionist review", "Joint monthly read-out with your team."],
    ],
    pilotLede: "Run a one-shed 12-week in-water pilot on a matched flock. Cash-flow-neutral on ops uplift alone, with a clear operating ROI read-out at week 12.",
    pilotSteps: [
      ["Match the flock", "Age-, breed- and diet-matched with a fresh sister flock."],
      ["Measure what matters", "Lay %, egg mass, shell breakage, mortality and yolk K1."],
      ["Review together", "Joint end-of-pilot read-out with your team and vet."],
    ],
    guarantee: "if operating ROI is below 3.0× at week 12, PHYOMIC.AG refunds 100% of invoiced LayerXP used in the pilot.",
    ctaTitle: ["Put LayerXP into ", "your sheds."],
    ctaLede: "A practical, measured pathway to longer cycles, stronger shells and a functional-egg premium.",
    disclaimer: "Trial and modelled performance shown is derived from the University of Sydney controlled cage trial, the Sydney 20,000-hen field flock and the German 8,000-hen field flock referenced in the LayerXP scientific paper and commercial deck. Australian economics are indicative modelling based on stated assumptions; they are not a guarantee. Results may vary with farm conditions, health status, nutrition, management and processing outcomes. LayerXP is manufactured at Agricure Scientific Organics, Braemar NSW, under APVMA-accredited processes; refer to your PHYOMIC.AG representative for product-use and regulatory information.",
  },
};

function ProductHandoutPage({ product, onNav }) {
  const p = PRODUCTS[product];
  const { Button } = window.PHYOMICAGDesignSystem_ac1e0b;
  const Media = window.Media, Container = window.Container;
  const narrow = window.useNarrow();

  const EYEBROW = { fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 12.5, letterSpacing: "0.16em", textTransform: "uppercase" };
  const NUM = { fontFamily: "var(--font-display)", fontWeight: 700, fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" };

  return (
    <main>
      {/* HERO */}
      <section style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "minmax(0,1.05fr) minmax(0,0.95fr)" }}>
        <div style={{ background: "var(--navy)", padding: narrow ? "44px 20px 40px" : "72px clamp(32px,5vw,72px) 64px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <span style={{ ...EYEBROW, color: "var(--teal-light)" }}>{p.eyebrow}</span>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(2.25rem,4vw,3.5rem)", lineHeight: 1.06, letterSpacing: "-0.02em", color: "#fff", margin: "22px 0 0", textWrap: "pretty" }}>
            {p.headline[0]}<span style={{ fontWeight: 700, color: "var(--teal-light)" }}>{p.headline[1]}</span>
          </h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 17.5, lineHeight: 1.6, color: "rgba(255,255,255,0.82)", margin: "26px 0 0", maxWidth: 520, textWrap: "pretty" }}>
            {p.lede}
          </p>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 12, alignSelf: "flex-start", marginTop: 34,
            border: "1px solid rgba(127,209,171,0.45)", borderRadius: 999, padding: "12px 22px" }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--teal)" }} />
            <span style={{ ...EYEBROW, fontSize: 12, letterSpacing: "0.13em", color: "#fff" }}>{p.pill}</span>
          </span>
        </div>
        <div style={{ position: "relative", minHeight: narrow ? 300 : 480, background: "var(--teal-mist)" }}>
          <Media tone="deep" style={{ position: "absolute", inset: 0 }}>
            {p.hero.images
              ? <window.Crossfade images={p.hero.images} alt={`${p.name} flock`} />
              : (
                <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "flex-start", justifyContent: "flex-start", padding: 28 }}>
                  <span style={{ ...EYEBROW, fontSize: 11.5, color: "rgba(255,255,255,0.6)", maxWidth: 260, lineHeight: 1.6 }}>
                    Photography to supply · {p.hero.caption}
                  </span>
                </span>
              )}
          </Media>
          <span style={{ position: "absolute", left: narrow ? 20 : 28, bottom: narrow ? 20 : 28, display: "flex", alignItems: "center", gap: 14,
            background: "rgba(255,255,255,0.94)", padding: "12px 20px" }}>
            <span style={{ ...EYEBROW, fontSize: 13, letterSpacing: "0.1em", color: "var(--navy)" }}>
              {p.name.replace("XP", "")}<span style={{ color: "var(--teal-deep)" }}>XP</span>
            </span>
            <span style={{ width: 1, height: 15, background: "var(--border-subtle)" }} />
            <span style={{ ...EYEBROW, fontSize: 13, letterSpacing: "0.1em", color: "var(--navy)" }}>{p.plate}</span>
          </span>
        </div>
      </section>

      {/* TRIAL PERFORMANCE */}
      <section style={{ paddingBlock: 72, background: "var(--white)" }}>
        <Container>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
            <span style={{ ...EYEBROW, fontSize: 13.5, color: "var(--teal-deep)" }}>{p.kpiEyebrow}</span>
            <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--stone)" }}>{p.kpiSource}</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: narrow ? "repeat(2, minmax(0,1fr))" : "repeat(4, minmax(0,1fr))", gap: narrow ? 14 : 22, marginTop: 26 }}>
            {p.kpis.map(([num, unit, label, note]) => (
              <div key={label} style={{ background: "#fff", borderTop: "3px solid var(--teal-deep)", boxShadow: "var(--shadow-card)", padding: "26px 24px 28px" }}>
                <div style={{ ...NUM, fontSize: 46, lineHeight: 1, color: "var(--navy)" }}>
                  <span style={{ color: "var(--teal-deep)" }}>{num}</span>{unit}
                </div>
                <div style={{ ...EYEBROW, fontSize: 12, letterSpacing: "0.1em", color: "var(--navy)", margin: "18px 0 8px" }}>{label}</div>
                <RichNote text={note} style={{ fontSize: 13.5, color: "var(--stone)" }} />
              </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.05} seed={product === "layer" ? 37 : 61} />
        <Container style={{ position: "relative", zIndex: 1 }}>
          <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "minmax(0,1.15fr) minmax(0,0.85fr)", gap: narrow ? 28 : 48, alignItems: "start" }}>
            <div>
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.875rem,3.2vw,2.6rem)", lineHeight: 1.1, color: "#fff", margin: 0, letterSpacing: "-0.015em" }}>
                {p.ctaTitle[0]}<span style={{ fontWeight: 700, color: "var(--teal-light)" }}>{p.ctaTitle[1]}</span>
              </h2>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.6, color: "rgba(255,255,255,0.75)", margin: "16px 0 0", maxWidth: 520 }}>{p.ctaLede}</p>
              <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                <Button variant="primary" onClick={() => onNav("contact")}>Design a pilot</Button>
                <Button variant="reversed" onClick={() => onNav(p.other.key)}>See {p.other.label}</Button>
              </div>
            </div>
            <div style={{ borderLeft: "1px solid rgba(255,255,255,0.2)", paddingLeft: 36 }}>
              <span style={{ ...EYEBROW, fontSize: 12.5, color: "var(--teal-light)" }}>Start with a pilot design conversation</span>
              <p style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 20, lineHeight: 1.25, color: "#fff", margin: "14px 0 0" }}>
                Talk to your PHYOMIC.AG representative today.
              </p>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 18 }}>
                <span style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14, color: "var(--teal)" }}>PHYOMIC.AG</span>
                <span style={{ width: 1, height: 14, background: "rgba(255,255,255,0.25)" }} />
                <span style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14, color: "var(--teal)" }}>Advanced Microbiomic Performance</span>
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* DISCLAIMER */}
      <section style={{ background: "var(--white)", paddingBlock: 34 }}>
        <Container>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 12, lineHeight: 1.65, color: "var(--stone)", margin: 0, maxWidth: 980 }}>
            {p.disclaimer}
          </p>
        </Container>
      </section>
    </main>
  );
}

function BroilerXP({ onNav }) { return <ProductHandoutPage product="broiler" onNav={onNav} />; }
function LayerXP({ onNav }) { return <ProductHandoutPage product="layer" onNav={onNav} />; }

Object.assign(window, { ProductHandoutPage, BroilerXP, LayerXP });