/* Solutions overview: product families as a faceted grid. */
function Solutions({ onNav }) {
  const narrow = window.useNarrow();
  const { SectionHeading, Badge, ProductLockup, Eyebrow } = window.PHYOMICAGDesignSystem_ac1e0b;
  const Media = window.Media, Container = window.Container;

  const available = [
    { name: "Broiler", family: "Livestock XP", page: "broilerxp",
      body: "In-water microbiomic system for meat-chicken production. In a New Zealand commercial shed, FCR improved 6.5% (1.55 to 1.45), mortality fell from 6.0% to 2.2%, condemnations from 1.5% to 0.28%, and live weight rose 4.0%." },
    { name: "Layer", family: "Livestock XP", page: "layerxp",
      body: "Microbiomic system for commercial layer flocks. 81% lay at week 90 against 54% on control in a 20,000-hen Sydney field flock, 310 to 345 eggs per hen per year, and 40× yolk vitamin K₁." },
  ];

  return (
    <main>
      <style>{`[data-product-grid] > * > div > span:nth-child(2){background:var(--gold)!important;opacity:1!important;}`}</style>
      <section style={{ position: "relative", height: narrow ? 300 : 420, overflow: "hidden" }}>
        <Media tone="deep" label="Broiler and layer sheds · in-water dosing" style={{ position: "absolute", inset: 0 }}>
          <window.Crossfade images={["assets/broiler-flock.jpg", "assets/layer-flock.jpg"]} position="50% 62%" alt="Broiler and layer flocks on in-water dosing" />
        </Media>
        <window.NetworkField spacing={300} intensity={0.4} seed={7} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(8,37,64,0.18) 0%, rgba(8,37,64,0.10) 45%, rgba(8,37,64,0.82) 100%)" }} />
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "flex-end", paddingBottom: 48, zIndex: 1 }}>
          <Container>
            <Eyebrow color="var(--teal-light)">Solutions</Eyebrow>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(2.25rem,4vw,3rem)", color: "#fff", margin: "12px 0 0" }}>
              Two products, in commercial supply today.
            </h1>
          </Container>
        </div>
      </section>

      {/* Available now */}
      <section style={{ background: "var(--teal-mist)", borderTop: "2px solid var(--gold)", paddingTop: narrow ? 40 : 64, paddingBottom: narrow ? 48 : 72 }}>
        <Container>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
            <Badge tone="teal">Available now</Badge>
            <span style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--teal-grey)" }}>Commercially supplied</span>
            <span style={{ height: 1, flex: 1, background: "var(--border-subtle)" }} />
          </div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(2rem,3.4vw,2.75rem)", lineHeight: 1.12, color: "var(--navy)", margin: "0 0 14px", letterSpacing: "-0.02em" }}>
            Trial-validated and shipping today.
          </h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.6, color: "var(--charcoal)", margin: "0 0 36px", maxWidth: 820 }}>
            Two Livestock XP products are in commercial supply, each with a full technical dossier, dose schedule and trial evidence.
          </p>
          <div data-product-grid style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "repeat(2, 1fr)", gap: narrow ? 20 : 24 }}>
            {available.map((p) => (
              <button key={p.name} onClick={() => onNav(p.page || "contact")} style={{
                textAlign: "left", border: "1px solid var(--border-subtle)", borderTop: "3px solid var(--teal-deep)", borderRadius: "var(--radius-card)", background: "#fff",
                padding: narrow ? 24 : 32, cursor: "pointer", display: "flex", flexDirection: "column", gap: 18,
                boxShadow: "var(--shadow-card)", transition: "box-shadow .3s, transform .3s",
              }}
                onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-raised)"; e.currentTarget.style.transform = "translateY(-3px)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-card)"; e.currentTarget.style.transform = "none"; }}>
                <ProductLockup name={p.name} xp={true} size="md" />
                <span style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.6, color: "var(--charcoal)" }}>{p.body}</span>
                <span style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 13.5, letterSpacing: "0.04em", color: "var(--teal-deep)", marginTop: "auto" }}>
                  {p.page ? "View product page \u2192" : "Enquire about supply \u2192"}
                </span>
              </button>
            ))}
          </div>
        </Container>
      </section>

      {/* Overview */}
      <section style={{ paddingTop: narrow ? 48 : 88, paddingBottom: narrow ? 56 : 96 }}>
        <Container>
          <div style={{ maxWidth: 900 }}>
            <Eyebrow>Advanced microbiomic performance</Eyebrow>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.65, color: "var(--charcoal)", margin: "20px 0 0" }}>
              Through true scientific collaboration and a focused, integrated formulation philosophy, PHYOMIC.AG helps global primary producers transform their agribusinesses through microbiomic systems. We bring forty-plus years of founding research and experience in identifying, characterising and formulating 100% natural, non-GM biology, supported by some of the most experienced scientists in the field. The result is deep expertise across soils, plants and animals, with the operational discipline to deliver the exact solution your enterprise needs, at the scale and the speed your season demands.<br /><br />Poultry is where that expertise is commercial today. Soil and crop, red-meat and aquaculture systems are future opportunities in our discovery pipeline.
            </p>
          </div>
        </Container>
      </section>
    </main>
  );
}

window.Solutions = Solutions;