// Nordic Substrate Solutions — homepage components

const { useState, useEffect, useRef } = React;

/* ================================ NAV ================================ */
function Nav() {
  return (
    <nav className="top">
      <div className="wrap">
        <div className="row">
          <a href="#top" className="brand">
            <span className="brand-mark" aria-hidden="true"></span>
            <span>Nordic Substrate</span>
          </a>
          <div className="links">
            <a href="#technology">Technology</a>
            <a href="#tracks">What we do</a>
            <a href="#markets">Markets</a>
            <a href="#sustainability">Sustainability</a>
            <a href="#about">About</a>
            <a href="#book">Contact</a>
          </div>
          <a href="#book" className="btn" style={{ padding: "9px 14px", fontSize: 11 }}>
            Get in touch <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </nav>);

}

/* ================================ HERO ================================ */
function Hero() {
  return (
    <section className="hero green-wash" id="top">
      <div className="wrap">
        {/* status row */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 56, gap: 24, flexWrap: "wrap" }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)", display: "flex", gap: 24, flexWrap: "wrap" }}>
            <span>NSS · Lund &amp; Landskrona, SE</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", animation: "rise 0.8s ease both" }}></span>
              Production active
            </span>
          </div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)" }}>
            EST. 2021 · <a href="mailto:christian@nordicsubstrate.com,ina@nordicsubstrate.com" style={{ color: "var(--accent)" }}>EMAIL US</a>
          </div>
        </div>

        {/* headline */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 40, animation: "rise 0.6s ease both" }}>
          <h1 className="display" style={{
            margin: 0,
            fontSize: "clamp(48px, 8.6vw, 132px)"
          }}>
            Growing media,<br />
            re-engineered<br />
            <span style={{ color: "var(--accent)" }}>from the binder up.</span>
          </h1>

          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "end", marginTop: 8 }} className="hero-grid">
            <p style={{
              margin: 0,
              fontSize: "clamp(16px, 1.4vw, 19px)",
              lineHeight: 1.5,
              color: "var(--ink-soft)",
              maxWidth: 560
            }}>A Swedish-developed, fully biodegradable binder that replaces the synthetic chemistry holding most plant plugs together today. Compatible with peat, wood fibers, cellulose or custom-formulated for your crops.



            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", flexWrap: "wrap" }}>
              <a href="#book" className="btn">Request a trial <span className="arrow">→</span></a>
              <a href="#technology" className="btn btn--ghost">The technology</a>
            </div>
          </div>
        </div>

        {/* hero figure */}
        <div style={{ marginTop: 64, position: "relative" }}>
          <div style={{ aspectRatio: "21 / 9", width: "100%", position: "relative", overflow: "hidden", border: "1px solid var(--rule-soft)", background: "var(--bg-alt)" }}>
            <img src={(window.__resources && window.__resources.plugImg) || "media/plug.jpg"} alt="Nordic Growth plug with seedling and root system" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "saturate(1.1)" }} />
            <span className="mono" style={{ position: "absolute", top: 14, left: 14, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "#fff", background: "rgba(12,26,16,0.6)", padding: "4px 8px", backdropFilter: "blur(4px)" }}>FIG. 01 · NORDIC GROWTH PLUG</span>
            <span className="mono" style={{ position: "absolute", bottom: 14, right: 14, fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "#fff", background: "rgba(12,26,16,0.6)", padding: "4px 8px", backdropFilter: "blur(4px)" }}>Vertical farm · root development at week 3</span>
          </div>
          {/* caption strip */}
          <div className="mono" style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
            marginTop: 16,
            fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--muted)",
            borderTop: "1px solid var(--rule-soft)",
            borderBottom: "1px solid var(--rule-soft)"
          }}>
            <Cell label="Composition" value="Peat + biodegradable binder" />
            <Cell label="Plastic" value="Zero microplastics" />
            <Cell label="Origin" value="Swedish peat, local sourcing" />
            <Cell label="End of life" value="Fully compostable" />
          </div>
        </div>
      </div>
    </section>);

}
function Cell({ label, value }) {
  return (
    <div style={{ padding: "16px 20px", borderRight: "1px solid var(--rule-soft)" }}>
      <div style={{ color: "var(--muted)" }}>{label}</div>
      <div style={{ marginTop: 6, color: "var(--ink)", textTransform: "none", letterSpacing: "0.02em", fontSize: 12 }}>{value}</div>
    </div>);

}

/* ============================== TICKER ============================== */
function Ticker() {
  const items = [
  "Plug performance: parity or better vs rockwool",
  "Locally sourced raw materials",
  "Compatible with mechanical transplantation",
  "Custom tray formats",
  "Production: Landskrona, Sweden",
  "Trade-secret protected formulation",
  "On-site B-O-T deployment",
  "Designed for CEA & vertical farms"];

  const all = [...items, ...items];
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-track">
        {all.map((t, i) =>
        <span key={i}><span className="pip"></span>{t}</span>
        )}
      </div>
    </div>);

}

/* ============================ TWO TRACKS ============================ */
function Tracks() {
  return (
    <section id="tracks">
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot"></span>
          <span className="label">Two tracks · 01 / 02</span>
        </div>
        <h2 className="display" style={{ margin: 0, fontSize: "clamp(36px, 5vw, 64px)", maxWidth: 900 }}>
          Our products & technology. <span style={{ color: "var(--accent)" }}>Two ways to deploy it.</span>
        </h2>
        <p style={{ marginTop: 20, maxWidth: 640, color: "var(--ink-soft)", fontSize: 17 }}>Whether you need a few thousand plugs for a trial or a complete production line inside your facility, NSS delivers the binder, the recipe, and the know-how to match your needs.</p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 56 }} className="tracks-grid">
          <TrackCard
            number="01"
            kicker="Custom Production"
            title="Substrates manufactured to your spec, in Sweden."
            body="We design plug recipes, binder formulations, and tray formats to your crop and propagation environment. Production runs from our Landskrona facility, ideal for trials, regional growers, and small-to-medium volume."
            bullets={[
            "Custom plug & recipe formulation",
            "Production at NSS facility (Landskrona)",
            "Small and medium batch runs",
            "Ideal for trials and regional growers"]
            }
            cta={{ label: "Request a trial run", href: "#book" }} />
          
          <TrackCard
            number="02"
            kicker="Build–Operate–Transfer"
            title="License our IP. We build the line inside your facility."
            body="For large-scale customers: NSS designs and installs a binder-mixing and plug production line at your site, operates it during ramp-up, then transfers a license for your own production for a small royalty fee. NSS helps optimise your raw material supply chain and costs."
            bullets={[
            "On-site binder mixing and production",
            "NSS optimises raw material supply & cost",
            "License for your own production (small royalty fee)",
            "Ideal for vertical farms & large growers"]
            }
            cta={{ label: "Discuss a B-O-T project", href: "#book" }}
            featured />
          
        </div>
      </div>
    </section>);

}

function TrackCard({ number, kicker, title, body, bullets, cta, featured }) {
  return (
    <article style={{
      border: "1px solid var(--rule-soft)",
      background: featured ? "var(--ink)" : "var(--bg-alt)",
      color: featured ? "var(--bg)" : "var(--ink)",
      padding: "32px 32px 28px",
      display: "flex",
      flexDirection: "column",
      gap: 22,
      minHeight: 480,
      position: "relative"
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: featured ? "color-mix(in oklab, var(--bg) 60%, transparent)" : "var(--muted)" }}>{kicker}</span>
        <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: featured ? "var(--accent)" : "var(--accent)" }}>/{number}</span>
      </div>

      <h3 className="display" style={{ margin: 0, fontSize: "clamp(24px, 2.6vw, 34px)", lineHeight: 1.06 }}>
        {title}
      </h3>

      <p style={{ margin: 0, color: featured ? "color-mix(in oklab, var(--bg) 78%, transparent)" : "var(--ink-soft)", lineHeight: 1.55, fontSize: 15 }}>
        {body}
      </p>

      <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10, marginTop: "auto" }}>
        {bullets.map((b, i) =>
        <li key={i} style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 12, fontSize: 14, color: featured ? "color-mix(in oklab, var(--bg) 88%, transparent)" : "var(--ink-soft)", paddingTop: 10, borderTop: "1px dashed " + (featured ? "color-mix(in oklab, var(--bg) 22%, transparent)" : "var(--rule-soft)") }}>
            <span className="mono" style={{ fontSize: 11, color: featured ? "var(--accent)" : "var(--accent)" }}>{String(i + 1).padStart(2, "0")}</span>
            <span>{b}</span>
          </li>
        )}
      </ul>

      <a href={cta.href} className="btn" style={{
        alignSelf: "flex-start",
        background: featured ? "var(--accent)" : "var(--ink)",
        borderColor: featured ? "var(--accent)" : "var(--ink)",
        color: featured ? "var(--accent-ink)" : "var(--bg)"
      }}>
        {cta.label} <span className="arrow">→</span>
      </a>
    </article>);

}

/* ============================ TECHNOLOGY ============================ */
function Technology() {
  return (
    <section id="technology" style={{ background: "var(--bg-alt)" }}>
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot"></span>
          <span className="label">The Binder · 03</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }} className="tech-grid">
          <div>
            <h2 className="display" style={{ margin: 0, fontSize: "clamp(36px, 5vw, 64px)" }}>
              A proprietary biodegradable binder.
            </h2>
            <p style={{ marginTop: 20, color: "var(--ink-soft)", fontSize: 17, maxWidth: 520 }}>The hidden chemistry inside most plant plugs is synthetic, essentially polystyrene plastic, and it stays in the soil or waste long after harvest. All of our customers want to get rid of that. We've replaced the plastics with a fully biodegradable bonding agent that delivers the structural integrity growers expect.</p>

            <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
              <Stat n="100%" label="Biodegradable" />
              <Stat n="0" label="Synthetic additives" />
              <Stat n="6–12wk" label="Structural integrity" />
              <Stat n="IP" label="Trade-secret protected" />
            </div>

            <div style={{ marginTop: 40 }}>
              <a href="#book" className="btn">Request the technical brief <span className="arrow">→</span></a>
            </div>
          </div>

          <div>
            <div style={{ aspectRatio: "4 / 5", position: "relative", overflow: "hidden", border: "1px solid var(--rule-soft)" }}>
              <img src={(window.__resources && window.__resources.facilityImg) || "media/facility.jpg"} alt="NSS production at Landskrona" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "saturate(1.15)" }} />
              <span className="mono" style={{ position: "absolute", top: 14, left: 14, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "#fff", background: "rgba(12,26,16,0.6)", padding: "4px 8px" }}>FIG. 02 · BINDER + PEAT</span>
              <span className="mono" style={{ position: "absolute", bottom: 14, left: 14, right: 14, fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "#fff", background: "rgba(12,26,16,0.6)", padding: "6px 10px" }}>Plug structure — proprietary biodegradable bond</span>
            </div>
          </div>
        </div>

        {/* compatibility row */}
        <div style={{ marginTop: 80 }}>
          <div className="label" style={{ marginBottom: 20 }}>Compatibility</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--rule)" }} className="compat-grid">
            <Compat title="Peat" body="Designed to work with peat. We complement it, not replace it." />
            <Compat title="Existing lines" body="Drops into existing production with minimal retooling." />
            <Compat title="Mechanical transplant" body="Engineered for automated tray and transplant systems." />
            <Compat title="Local sourcing" body="Raw materials sourced regionally per deployment site." last />
          </div>
        </div>
      </div>
    </section>);

}

function Stat({ n, label }) {
  return (
    <div style={{ borderTop: "1px solid var(--rule)", paddingTop: 14 }}>
      <div className="display" style={{ fontSize: "clamp(36px, 4vw, 52px)", lineHeight: 1, color: "var(--accent)" }}>{n}</div>
      <div className="mono" style={{ marginTop: 8, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>{label}</div>
    </div>);

}

function Compat({ title, body, last }) {
  return (
    <div style={{ padding: "24px 22px", borderRight: last ? "0" : "1px solid var(--rule-soft)", borderBottom: "1px solid var(--rule-soft)" }}>
      <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>{title}</div>
      <p style={{ margin: "10px 0 0", color: "var(--ink-soft)", fontSize: 14, lineHeight: 1.55 }}>{body}</p>
    </div>);

}

/* ================================ B-O-T ================================ */
function BOT() {
  const steps = [
  { num: "01", title: "Build", body: "We assess your site, specify equipment, and install a binder-mixing and plug production line at your facility." },
  { num: "02", title: "Operate", body: "NSS operates the line during ramp-up, helps source raw materials, and tunes the recipe to your crop and conditions." },
  { num: "03", title: "Transfer", body: "You receive a license to run production yourself for a small royalty fee. NSS continues to support your raw material supply chain and costs." }];

  return (
    <section id="bot">
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot"></span>
          <span className="label">Build–Operate–Transfer · 04</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "end" }}>
          <h2 className="display" style={{ margin: 0, fontSize: "clamp(36px, 5vw, 64px)", maxWidth: 880 }}>
            A production line, <span style={{ color: "var(--accent)" }}>at your facility if needed.</span>
          </h2>
          <a href="#book" className="btn btn--ghost" style={{ marginBottom: 8 }}>Discuss B-O-T <span className="arrow">→</span></a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, marginTop: 56, borderLeft: "1px solid var(--rule-soft)" }} className="bot-grid">
          {steps.map((s, i) =>
          <div key={s.num} className="diagram-step" style={{ borderRight: "1px solid var(--rule-soft)", borderTop: "1px solid var(--rule-soft)", borderBottom: "1px solid var(--rule-soft)", borderLeft: 0 }}>
              <div className="step-num">PHASE — {s.num}</div>
              <div className="step-title">{s.title}</div>
              <div className="step-body">{s.body}</div>
              {/* connector arrow */}
              {i < steps.length - 1 &&
            <div className="mono" style={{ position: "absolute", right: -10, top: 32, background: "var(--bg)", padding: "0 6px", color: "var(--accent)", fontSize: 14, zIndex: 2 }}>→</div>
            }
            </div>
          )}
        </div>

        <div className="mono" style={{ marginTop: 32, padding: "16px 22px", border: "1px solid var(--rule-soft)", background: "var(--bg-alt)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
          <span>Customer outcome</span>
          <span style={{ color: "var(--ink)" }}>OPERATIONAL LOCAL PRODUCTION - IP LICENSING - KNOWLEDGE TRANSFER - CONTINUOUS ASSISTANCE</span>
          <span style={{ color: "var(--accent)" }}>
</span>
        </div>
      </div>
    </section>);
}

/* ============================== MARKETS ============================== */
function Markets() {
  const segments = [
  { num: "01", name: "Commercial Greenhouses", body: "Tomato, pepper, cucumber, and ornamental propagation. Direct rockwool replacement." },
  { num: "02", name: "Vertical Farming", body: "Leafy greens and herbs in CEA & closed-loop hydroponics. Designed for automated systems." },
  { num: "03", name: "Forestry & Reforestation", body: "Tree seedling nurseries. Long growing cycles. Biodegradable plugs eliminate transplant waste." },
  { num: "04", name: "Cannabis & Specialty", body: "High-value crops requiring precise nutrient delivery. Premium custom formulations." },
  { num: "05", name: "Horticulture & Retail", body: "Consumer garden products and landscaping. Plastic-free, sustainable alternatives." }];

  return (
    <section id="markets" style={{ background: "var(--ink)", color: "var(--bg)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 60% 80% at 100% 0%, color-mix(in oklab, var(--accent) 35%, transparent) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 0% 100%, color-mix(in oklab, var(--accent-bright, var(--accent)) 25%, transparent) 0%, transparent 60%)", pointerEvents: "none" }}></div>
      <div className="wrap" style={{ position: "relative" }}>
        <div className="eyebrow">
          <span className="dot"></span>
          <span className="label" style={{ color: "color-mix(in oklab, var(--bg) 60%, transparent)" }}>Markets · 05</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56, alignItems: "end" }}>
          <h2 className="display" style={{ margin: 0, fontSize: "clamp(36px, 5vw, 64px)" }}>
            Built for growers <span style={{ color: "var(--accent-bright, var(--accent))" }}>across verticals.</span>
          </h2>
          <p style={{ margin: 0, color: "color-mix(in oklab, var(--bg) 78%, transparent)", maxWidth: 460, fontSize: 16 }}>Five large segments, one technology platform. Each deployment is tuned to crop, climate, and propagation environment.


          </p>
        </div>

        <div style={{ marginTop: 56 }}>
          {segments.map((s) =>
          <details className="row" key={s.num} style={{ borderColor: "color-mix(in oklab, var(--bg) 18%, transparent)" }}>
              <summary>
                <span className="num" style={{ color: "color-mix(in oklab, var(--bg) 50%, transparent)" }}>/ {s.num}</span>
                <span className="ttl">{s.name}</span>
                <span className="plus" style={{ background: "transparent" }}>
                  <i style={{ position: "absolute", inset: 0, background: "transparent" }}></i>
                </span>
              </summary>
              <div className="body" style={{ color: "color-mix(in oklab, var(--bg) 78%, transparent)" }}>
                {s.body}
              </div>
            </details>
          )}
        </div>
        <style>{`
          #markets details.row { border-top-color: color-mix(in oklab, var(--bg) 18%, transparent) !important; }
          #markets details.row:last-of-type { border-bottom-color: color-mix(in oklab, var(--bg) 18%, transparent) !important; }
          #markets details.row .plus::before, #markets details.row .plus::after { background: var(--bg) !important; }
        `}</style>
      </div>
    </section>);

}

/* =========================== SUSTAINABILITY =========================== */
function Sustainability() {
  const items = [
  { tag: "ZERO WASTE", title: "Returns to the soil", body: "Spent plugs biodegrade with the crop and can be worked back into the soil as organic matter. Nothing to landfill, nothing to recycle." },
  { tag: "LOW CARBON", title: "Local raw materials", body: "Sourced regionally to each deployment site, with no tropical supply chain dependency." },
  { tag: "NO PLASTIC", title: "Microplastic-free", body: "Replaces synthetic binders that shed microplastics into soil and waterways." },
  { tag: "EU GREEN DEAL", title: "Regulatory aligned", body: "Designed for tightening EU regulations on peat extraction and microplastic shedding." }];

  return (
    <section id="sustainability">
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot"></span>
          <span className="label">Sustainability · 06</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "start" }} className="esg-grid">
          <div>
            <h2 className="display" style={{ margin: 0, fontSize: "clamp(36px, 5vw, 64px)" }}>
              Engineered to disappear.
            </h2>
            <p style={{ marginTop: 20, color: "var(--ink-soft)", fontSize: 17, maxWidth: 520 }}>Our products have a significantly lower lifecycle carbon footprint than rockwool, plugs with plastics or imported coco coir. We leave nothing behind in the soil that shouldn't be there. Sustainability isn't a marketing layer here; it's the reason the binder exists.



            </p>
            <div style={{ marginTop: 32, position: "relative", overflow: "hidden", border: "1px solid var(--rule-soft)" }}>
              <div style={{ aspectRatio: "5 / 4", position: "relative" }}>
                <img src={(window.__resources && window.__resources.productionImg) || "media/production.jpg"} alt="Production line at Landskrona" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "saturate(1.1)" }} />
                <span className="mono" style={{ position: "absolute", top: 14, left: 14, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "#fff", background: "rgba(12,26,16,0.6)", padding: "4px 8px" }}>FIG. 03 · LANDSKRONA</span>
                <span className="mono" style={{ position: "absolute", bottom: 14, left: 14, right: 14, fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "#fff", background: "rgba(12,26,16,0.6)", padding: "6px 10px" }}>Production line — Swedish peat, biodegradable binder</span>
              </div>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--rule)", borderLeft: "1px solid var(--rule-soft)" }}>
            {items.map((it, i) =>
            <div key={i} style={{ padding: "28px 24px 32px", borderRight: "1px solid var(--rule-soft)", borderBottom: "1px solid var(--rule-soft)", minHeight: 200 }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--accent)" }}>{it.tag}</span>
                <h3 style={{ margin: "12px 0 10px", fontSize: 20, fontWeight: 600, letterSpacing: "-0.01em" }}>{it.title}</h3>
                <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: 14, lineHeight: 1.55 }}>{it.body}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ================================ ABOUT ================================ */
function About() {
  const team = [
  { i: "CG", name: "Christian Gustafsson", role: "Co-founder & CEO", email: "christian@nordicsubstrate.com", phone: "+46 70 911 33 10" },
  { i: "IW", name: "Ina Wingårdh", role: "International Sales & Partnerships", email: "ina@nordicsubstrate.com", phone: "+46 708 23 18 13" },
  { i: "RW", name: "Robert Wedmo", role: "Co-founder & Chief Agronomist" },
  { i: "MP", name: "Morgan Pattersson", role: "Co-founder & B-O-T Project Leader" }];

  const board = [
  { i: "PS", name: "Philip Stankovski", role: "Co-founder & Chairman", email: "philip@nordicsubstrate.com" },
  { i: "JD", name: "Johan Dahlstrand", role: "Board Member" },
  { i: "PKA", name: "Peter K Andersson", role: "Board Member" }];

  return (
    <section id="about" style={{ background: "var(--bg-alt)" }}>
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot"></span>
          <span className="label">About · 07</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56 }} className="about-grid">
          <div>
            <h2 className="display" style={{ margin: 0, fontSize: "clamp(36px, 5vw, 64px)" }}>
              Founded in Sweden, <span style={{ color: "var(--accent)" }}>built for growers everywhere.</span>
            </h2>
            <p style={{ marginTop: 20, color: "var(--ink-soft)", fontSize: 17, maxWidth: 540 }}>Nordic Substrate Solutions was founded in 2021 with a single mission: replace the synthetic, non-biodegradable chemistry inside conventional growing media. Our binder was perfected through 2022 to 2025 trials and now powers production at our Landskrona facility or at customer sites worldwide.




            </p>

            <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, borderTop: "1px solid var(--rule)" }}>
              <Fact label="Founded" value="2021" />
              <Fact label="HQ" value="Lund, SE" last />
              <Fact label="Production" value="Landskrona, SE" />
              <Fact label="Org. nr" value="559355-0220" last />
            </div>
          </div>

          <div>
            <div className="label" style={{ marginBottom: 20 }}>Team</div>
            <div style={{ borderTop: "1px solid var(--rule)" }}>
              {team.map((m) =>
              <PersonRow key={m.i} person={m} />
              )}
            </div>

            <div className="label" style={{ margin: "36px 0 20px" }}>Board</div>
            <div style={{ borderTop: "1px solid var(--rule)" }}>
              {board.map((m) =>
              <PersonRow key={m.i} person={m} />
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function PersonRow({ person }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "60px 1fr auto", gap: 20, alignItems: "center", padding: "18px 0", borderBottom: "1px solid var(--rule-soft)" }}>
      <div className="mono" style={{ width: 44, height: 44, border: "1px solid var(--ink)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, letterSpacing: "0.08em" }}>{person.i}</div>
      <div>
        <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: "-0.005em" }}>{person.name}</div>
        <div className="mono" style={{ marginTop: 4, fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)" }}>{person.role}</div>
      </div>
      {(person.email || person.phone) &&
      <div style={{ display: "flex", gap: 8 }}>
          {person.phone &&
        <a href={"tel:" + person.phone.replace(/\s/g, "")} className="contact-icon" title={"Call " + person.name} aria-label={"Call " + person.name}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            </a>
        }
          {person.email &&
        <a href={"mailto:" + person.email} className="contact-icon" title={"Email " + person.name} aria-label={"Email " + person.name}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
            </a>
        }
        </div>
      }
    </div>);

}

function Fact({ label, value, last }) {
  return (
    <div style={{ padding: "16px 0", borderBottom: "1px solid var(--rule-soft)", borderRight: last ? "0" : "1px solid var(--rule-soft)", paddingRight: last ? 0 : 16, paddingLeft: last ? 16 : 0 }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted)" }}>{label}</div>
      <div style={{ marginTop: 6, fontSize: 16 }}>{value}</div>
    </div>);

}

/* ============================== FOOTER ============================== */
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 32, paddingBottom: 56 }} className="footer-grid">
          <div>
            <div className="brand" style={{ color: "var(--bg)" }}>
              <span className="brand-mark"></span>
              <span>Nordic Substrate Solutions</span>
            </div>
            <p style={{ marginTop: 24, maxWidth: 360, color: "color-mix(in oklab, var(--bg) 70%, transparent)", fontSize: 14, lineHeight: 1.55 }}>Sustainable, biodegradable growing media, engineered in Sweden for growers worldwide.

            </p>
          </div>
          <FooterCol title="Office">
            <div>Bantorget 2, 1tr</div>
            <div>222 29 Lund, Sweden</div>
          </FooterCol>
          <FooterCol title="Production">
            <div>Östra Kajgatan 1</div>
            <div>261 35 Landskrona, SE</div>
          </FooterCol>
          <FooterCol title="Contact">
            <a href="mailto:christian@nordicsubstrate.com">christian@nordicsubstrate.com</a>
            <a href="mailto:ina@nordicsubstrate.com">ina@nordicsubstrate.com</a>
            <div>+46 70 911 33 10</div>
          </FooterCol>
        </div>
        <div className="footer-grant" style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 32, alignItems: "start", paddingTop: 28, paddingBottom: 32, borderTop: "1px solid color-mix(in oklab, var(--bg) 18%, transparent)" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-start" }}>
            <img src={(window.__resources && window.__resources.euFlag) || "media/eu-flag.svg"} alt="Co-funded by the European Union" width="68" height="45" style={{ display: "block", border: "1px solid color-mix(in oklab, var(--bg) 22%, transparent)" }} />
            <span className="label" style={{ maxWidth: 90, lineHeight: 1.35, fontSize: 9, color: "color-mix(in oklab, var(--bg) 55%, transparent)" }}>Medfinansieras av Europeiska unionen</span>
          </div>
          <div style={{ maxWidth: 660 }}>
            <div className="label" style={{ color: "var(--accent-bright, var(--accent))" }}>Project funding</div>
            <p style={{ margin: "12px 0 0", fontSize: 13.5, lineHeight: 1.6, color: "color-mix(in oklab, var(--bg) 72%, transparent)" }}>
              Nordic Substrate Solutions has received support from the Swedish Board of Agriculture and the European Union for a project named “Biodegradable growth substrate for hydroponic farming of leafy greens”. The goal is to develop a biodegradable binder that can hold plant substrates together during the 6–12 weeks required for hydroponic cultivation, with the aim of being able to bind peat.
            </p>
          </div>
        </div>
        <style>{`@media (max-width: 640px) { .footer-grant { grid-template-columns: 1fr !important; gap: 20px !important; } }`}</style>
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, paddingTop: 28, borderTop: "1px solid color-mix(in oklab, var(--bg) 18%, transparent)", color: "color-mix(in oklab, var(--bg) 60%, transparent)", fontSize: 12 }} className="mono">
          <span>© Nordic Substrate Solutions 2026 · Org.nr 559355-0220</span>
          <span>Co-financed by the European Union · Swedish Board of Agriculture</span>
        </div>
      </div>
    </footer>);

}
function FooterCol({ title, children }) {
  return (
    <div>
      <div className="label">{title}</div>
      <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 6, fontSize: 14, color: "color-mix(in oklab, var(--bg) 88%, transparent)" }}>
        {children}
      </div>
    </div>);

}

/* ============================ ADVANTAGES ============================ */
function Advantages() {
  const items = [
  { k: "Delivered dry", b: "Plugs ship dry, giving long shelf life, simpler storage, and lighter, lower-carbon freight than water-logged substrates." },
  { k: "No green premium", b: "Sustainable shouldn't cost more. We match the price of the conventional substrate you use today. Just ask." },
  { k: "Local supply", b: "Raw materials sourced regionally and produced in Sweden or on-site. No fragile tropical supply chains." }];

  return (
    <section id="advantages" style={{ background: "var(--bg-alt)" }}>
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot"></span>
          <span className="label">Why NSS</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--rule)" }} className="adv-grid">
          {items.map((it, i) =>
          <div key={i} style={{ padding: "32px 26px 36px", borderRight: i < 2 ? "1px solid var(--rule-soft)" : "0", borderBottom: "1px solid var(--rule-soft)" }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--accent)" }}>{String(i + 1).padStart(2, "0")}</span>
              <h3 className="display" style={{ margin: "14px 0 12px", fontSize: "clamp(22px, 2.2vw, 28px)", lineHeight: 1.05 }}>{it.k}</h3>
              <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: 15, lineHeight: 1.55 }}>{it.b}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================== PROOF =============================== */
function Proof() {
  const cases = [
  {
    tag: "Easy Switch",
    grower: "A Nordic grower",
    title: "A straight 1-to-1 replacement.",
    body: "Our material went in as a direct swap for the grower's existing material, with no change to watering, planting, or the rest of the process. A simple, low-risk switch.",
    stat: "No process changes in the trial" },
  {
    tag: "Reliable in Operation",
    grower: "A commercial grower",
    title: "Held up through daily handling.",
    body: "Propagation was done in cubes exactly as usual. Very little run-off was observed and all bags held up during handling, with less waste in the growing operation.",
    stat: "Minimal run-off observed" },
  {
    tag: "Growth in Trial",
    grower: "A commercial cucumber grower in the Nordics",
    title: "Delivering strong results in commercial production.",
    body: "Commercial trials showed that our material performed on par with the grower's standard. Additional trials demonstrated faster growth and improved germination, highlighting the potential for increased productivity.",
    stat: "10 vs 9 cucumbers per plant after two months" }];


  return (
    <section id="proof">
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot"></span>
          <span className="label">From the trials</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "end" }}>
          <h2 className="display" style={{ margin: 0, fontSize: "clamp(36px, 5vw, 64px)", maxWidth: 820 }}>
            What growers <span style={{ color: "var(--accent)" }}>have seen.</span>
          </h2>
          <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: 16, maxWidth: 360 }}>
            Observations from individual grower trials: practical notes on switching, handling, and growth.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, marginTop: 56, borderTop: "1px solid var(--rule)", borderLeft: "1px solid var(--rule-soft)" }} className="proof-grid">
          {cases.map((c, i) =>
          <article key={i} style={{ padding: "30px 26px 32px", borderRight: "1px solid var(--rule-soft)", borderBottom: "1px solid var(--rule-soft)", display: "flex", flexDirection: "column", minHeight: 320 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)" }}>{c.tag}</span>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--muted)" }}>/{String(i + 1).padStart(2, "0")}</span>
              </div>
              <h3 className="display" style={{ margin: "16px 0 0", fontSize: "clamp(21px, 2.1vw, 26px)", lineHeight: 1.08 }}>{c.title}</h3>
              <p style={{ margin: "14px 0 0", color: "var(--ink-soft)", fontSize: 14.5, lineHeight: 1.55 }}>{c.body}</p>
              <div style={{ marginTop: "auto", paddingTop: 20 }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--muted)" }}>{c.grower}</div>
                <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px dashed var(--rule-soft)", display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", flexShrink: 0 }}></span>
                  <span className="mono" style={{ fontSize: 12, letterSpacing: "0.04em", color: "var(--ink)" }}>{c.stat}</span>
                </div>
              </div>
            </article>
          )}
        </div>

        <p className="mono" style={{ margin: "20px 0 0", fontSize: 11, letterSpacing: "0.06em", color: "var(--muted)", textTransform: "uppercase" }}>
          Results from individual trials. Outcomes may vary depending on crop, setup, and growing conditions.
        </p>
      </div>
    </section>);

}

/* responsive helpers */
const responsiveCSS = `
@media (max-width: 900px) {
  .hero-grid, .tracks-grid, .tech-grid, .esg-grid, .about-grid, .bot-grid, .compat-grid, .footer-grid, .adv-grid, .proof-grid {
    grid-template-columns: 1fr !important;
  }
  .compat-grid > div, .bot-grid > div, .adv-grid > div, .proof-grid > article { border-right: 0 !important; }
}
`;

Object.assign(window, {
  Nav, Hero, Ticker, Tracks, TrackCard, Technology, Advantages, BOT, Markets, Proof, Sustainability, About, Footer,
  responsiveCSS
});