// systems.jsx — Systems page
const { useState, useMemo } = React;

// ─── Data ────────────────────────────────────────────────────────
const HEADLINE_NUMBERS = [
  { l: "Generation", v: "9.9", u: "kW" },
  { l: "Storage", v: "13.5", u: "kWh" },
  { l: "Panels", v: "22", u: "× Aiko 450W" },
  { l: "Years cover", v: "25", u: "performance" }];


const COMPONENTS = [
  {
    icon: <PanelIcon />,
    h: "Aiko Neostar 2S 450W",
    sub: "22 panels · all-black · 23.2% efficiency",
    desc: "Aiko's full-back-contact cell removes the busbars from the front of the panel. More photons hit silicon, less hits aluminium. The aesthetic is a side effect; the yield is the point.",
    n: "9.9", u: "kW peak"
  },
  {
    icon: <InverterIcon />,
    h: "Sungrow SH10RT hybrid inverter",
    sub: "Single-phase · 10 kW · DC-coupled battery",
    desc: "DC-coupled means the panels charge the battery at 96% efficiency instead of the 87% you'd lose round-tripping through an AC inverter twice. Backs up essential circuits in a blackout, automatically.",
    n: "10.0", u: "kW continuous"
  },
  {
    icon: <BatteryIcon />,
    h: "Tesla Powerwall 3",
    sub: "13.5 kWh usable · 11.5 kW peak · LFP chemistry",
    desc: "LFP cells, not nickel. Lower energy density, but they don't go thermal. Stack-mountable for 40.5 kWh if you ever go off-grid. Backs up the whole house, not just the fridge.",
    n: "13.5", u: "kWh usable"
  },
  {
    icon: <MonitorIcon />,
    h: "SOLO live monitoring",
    sub: "Built by us · iOS, Android, Web",
    desc: "One app for generation, consumption, battery state-of-charge, VPP earnings, and fault notifications. No Sungrow login. No Tesla login. The installer who fitted your system is one tap away.",
    n: "10", u: "yr SOLO cover"
  }];


const WHY = [
  { n: "01", h: "We don't sell the cheapest tier of any of these.", p: "Aiko, Sungrow, and Tesla each make a budget line. We don't fit them. The standard system is the same components a building inspector would put on their own roof." },
  { n: "02", h: "The panel and the inverter were chosen together.", p: "Aiko's IV curve at low light pairs cleanly with Sungrow's MPPT range. We tested seven combinations on the same Ballarat roof. This one delivered 4.2% more annual yield than the runner-up." },
  { n: "03", h: "The battery is sized to your bill, not the panel array.", p: "13.5 kWh covers a typical Australian evening peak (4pm–10pm) for a household of four. Going bigger costs $7,500 per extra Powerwall and pays back in roughly never. We say no a lot." },
  { n: "04", h: "DC-coupling is non-negotiable.", p: "Most installers AC-couple because it's faster to wire. You lose ~9% of every kWh that goes panel → battery → house. Over 10 years, that's $4,200 of free electricity, gone to heat in your switchboard." },
  { n: "05", h: "Monitoring is ours.", p: "If we white-labelled Sungrow's app and Tesla's app and sent you both, we'd save $40k a year of engineering. We didn't. The dashboard is the product." },
  { n: "06", h: "What's not in the system is also the system.", p: "No EV charger upsell at checkout. No 'consumption monitoring' add-on. No premium support tier. The price is the price. The system is the system." }];


const PANEL_OPTIONS = [
  { id: "neostar", h: "Aiko Neostar 2S 450W", s: "Standard · 22 panels · all-black", d: "0", t: "zero" },
  { id: "comet", h: "Aiko Comet 2S 480W", s: "Premium · 21 panels · 24.0% efficiency", d: "+$890", t: "up" },
  { id: "qcell", h: "Q.Cell Q.PEAK Duo 410W", s: "Budget · 24 panels · 21.6% efficiency", d: "−$1,200", t: "down" }];


const BATTERY_OPTIONS = [
  { id: "pw3", h: "Tesla Powerwall 3", s: "Standard · 13.5 kWh · 11.5 kW peak", d: "0", t: "zero" },
  { id: "pw3stack", h: "Powerwall 3 + 13.5 kWh stack", s: "Off-grid ready · 27 kWh total", d: "+$7,500", t: "up" },
  { id: "sigen", h: "Sigenergy SigenStor 8.0", s: "Slimmer · 8 kWh · 6 kW peak", d: "−$2,400", t: "down" },
  { id: "none", h: "No battery", s: "Solar-only · feed-in tariff", d: "−$11,500", t: "down" }];


const EXTRAS_OPTIONS = [
  { id: "none", h: "No extras", s: "Standard install only", d: "0", t: "zero" },
  { id: "ev", h: "EV charger pre-wire", s: "11 kW Sungrow EVDC11 · roughed in only", d: "+$420", t: "up" },
  { id: "consumption", h: "Whole-home consumption monitoring", s: "CT clamps on every circuit", d: "+$340", t: "up" },
  { id: "both", h: "EV pre-wire + consumption monitoring", s: "Both upgrades", d: "+$760", t: "up" }];


const SPECS = [
  {
    lab: "Solar panel",
    h: "Aiko Neostar 2S",
    sub: "Tier-1 · ABC technology",
    rows: [
    ["Power", "450 W"],
    ["Efficiency", "23.2%"],
    ["Cell type", "Full-back-contact"],
    ["Temperature coeff.", "−0.26 %/°C"],
    ["Frame", "Black anodised"],
    ["Dimensions", "1722 × 1134 × 30 mm"],
    ["Weight", "21.5 kg"],
    ["Warranty (product)", "15 yr"],
    ["Warranty (performance)", "25 yr / 88.85%"]]

  },
  {
    lab: "Hybrid inverter",
    h: "Sungrow SH10RT",
    sub: "Single-phase · DC-coupled",
    rows: [
    ["AC output", "10 kW"],
    ["Max DC input", "15 kW"],
    ["MPPTs", "2 × independent"],
    ["Battery coupling", "DC-coupled"],
    ["Backup", "Whole-home (with ATS)"],
    ["Efficiency (peak)", "98.4%"],
    ["IP rating", "IP66"],
    ["Noise", "< 35 dB"],
    ["Warranty", "10 yr parts + labour"]]

  },
  {
    lab: "Battery",
    h: "Tesla Powerwall 3",
    sub: "LFP · 13.5 kWh usable",
    rows: [
    ["Usable capacity", "13.5 kWh"],
    ["Continuous power", "11.5 kW"],
    ["Peak power (10s)", "185 A"],
    ["Chemistry", "LiFePO₄"],
    ["Round-trip efficiency", "97.5%"],
    ["IP rating", "IP67"],
    ["Stackable", "Yes · up to 40.5 kWh"],
    ["VPP-ready", "AGL · Amber · Energy Locals"],
    ["Warranty", "10 yr / 70% retention"]]

  }];


const COMPARE_ROWS = [
{ k: "System size on offer", solo: "9.9 kW + 13.5 kWh — fixed", door: "Whatever fits your roof", big: "13–15 kW upsold" },
{ k: "Panel tier", solo: "Aiko ABC — top of stack", door: "Tier-1 'or equivalent'", big: "Trina / Jinko mid-tier" },
{ k: "Inverter coupling", solo: "DC-coupled (Sungrow SH)", door: "AC-coupled — faster install", big: "AC-coupled — cheaper SKU" },
{ k: "Installer", solo: "Named CEC accredited, on your roof", door: "Sub-contracted", big: "Roster of sub-contractors" },
{ k: "Sales process", solo: "Postcode → online price", door: "In-home consult", big: "Phone + in-home consult" },
{ k: "Price visibility", solo: "Posted, fixed, locked", door: "'Quote on the night'", big: "Quote ranges $4k–$8k" },
{ k: "Workmanship warranty", solo: "10 yr SOLO-backed", door: "5 yr installer-backed", big: "10 yr — sub-contracted to whoever's still trading" },
{ k: "Monitoring", solo: "SOLO app — one login", door: "Sungrow + Tesla apps", big: "White-labelled Solar Analytics" }];


// ─── Icons ─────────────────────────────────────────────────────
function PanelIcon() {
  return (
    <svg viewBox="0 0 60 60" fill="none">
      <rect x="4" y="6" width="52" height="48" stroke="currentColor" strokeWidth="2" />
      <line x1="4" y1="22" x2="56" y2="22" stroke="currentColor" strokeWidth="1" />
      <line x1="4" y1="38" x2="56" y2="38" stroke="currentColor" strokeWidth="1" />
      <line x1="21" y1="6" x2="21" y2="54" stroke="currentColor" strokeWidth="1" />
      <line x1="38" y1="6" x2="38" y2="54" stroke="currentColor" strokeWidth="1" />
    </svg>);
}

function InverterIcon() {
  return (
    <svg viewBox="0 0 60 60" fill="none">
      <rect x="10" y="8" width="40" height="44" stroke="currentColor" strokeWidth="2" />
      <circle cx="30" cy="22" r="6" stroke="currentColor" strokeWidth="1.5" />
      <line x1="18" y1="38" x2="42" y2="38" stroke="currentColor" strokeWidth="1.5" />
      <line x1="18" y1="44" x2="34" y2="44" stroke="currentColor" strokeWidth="1.5" />
    </svg>);
}

function BatteryIcon() {
  return (
    <svg viewBox="0 0 60 60" fill="none">
      <rect x="10" y="6" width="40" height="48" stroke="currentColor" strokeWidth="2" />
      <rect x="22" y="2" width="16" height="6" stroke="currentColor" strokeWidth="1.5" />
      <rect x="14" y="14" width="32" height="6" fill="currentColor" />
      <rect x="14" y="24" width="32" height="6" fill="currentColor" />
      <rect x="14" y="34" width="32" height="6" fill="currentColor" />
      <rect x="14" y="44" width="20" height="6" stroke="currentColor" strokeWidth="1" />
    </svg>);
}

function MonitorIcon() {
  return (
    <svg viewBox="0 0 60 60" fill="none">
      <rect x="14" y="6" width="32" height="48" rx="4" stroke="currentColor" strokeWidth="2" />
      <polyline points="20,32 26,28 32,36 38,22 44,30" stroke="currentColor" strokeWidth="1.5" fill="none" />
      <circle cx="30" cy="48" r="2" fill="currentColor" />
    </svg>);
}

// ─── Sections ──────────────────────────────────────────────────
function Topbar() {
  return (
    <div className="topbar edge">
      <div className="left">
        <a className="word" href="index.html"><img src="assets/SOLO_WORDMARK_BLACK.svg" alt="SOLO" /></a>
        <nav>
          <a href="how-it-works.html">How it works</a>
          <a href="systems.html" style={{ borderBottom: "1.5px solid var(--solo-black)", paddingBottom: 4 }}>Systems</a>
          <a href="products.html">Products</a>
          <a href="installers.html">Installers</a>
          <a href="faq.html">FAQ</a>
        </nav>
      </div>
      <div className="right">
        <span className="ann"><span className="mono-tag"><span className="dot"></span>Ballarat 3350</span></span>
        <a className="btn btn-primary btn-sm" href="index.html#hero">Get my price <span className="arrow">→</span></a>
      </div>
    </div>);
}

function Announce() {
  return (
    <div className="announce">
      <span className="dot">●</span> Launching 2026 · Fixed prices online · No salesman
    </div>);
}

function Hero() {
  return (
    <section className="edge sys-hero">
      <div className="eyebrow">Systems · 9.9 kW + 13.5 kWh standard</div>
      <h1 className="sys-h1">One system. <em>Picked</em> with intent.</h1>
      <p className="lede">Most solar companies offer fifteen panel options, four inverter brands, and three battery tiers. Then they upsell you across all of them. We picked the components we'd put on our own roofs and stopped. Here's what's in the box, why each piece is there, and what we said no to.</p>
      <div className="sys-numbers">
        {HEADLINE_NUMBERS.map((n, i) =>
        <div key={i} className="s">
            <div className="lab">{n.l}</div>
            <div className="v">{n.v}<small>{n.u}</small></div>
          </div>
        )}
      </div>
    </section>);
}

function StandardSystem() {
  return (
    <section className="edge std-system">
      <div className="std-grid">
        <div className="lhs">
          <span className="mono-tag"><span className="dot black"></span>The standard</span>
          <h2>Four parts. <em style={{ color: "var(--solo-volt)", background: "var(--solo-black)", padding: "0 6px", fontStyle: "normal" }}>One choice.</em></h2>
          <p>Solar gets sold as a configurator with twenty pickers because it makes the salesman's job easier, not yours. The truth: 92% of Australian rooftops with a 9–11 kW pitch and a household over $260/quarter want exactly this. So this is what we fit.</p>
        </div>
        <div className="std-stack">
          {COMPONENTS.map((c, i) =>
          <div key={i} className="std-component">
              <div className="icon">{c.icon}</div>
              <div>
                <div className="h">{c.h}</div>
                <div className="sub">{c.sub}</div>
                <div className="desc">{c.desc}</div>
              </div>
              <div className="num">{c.n}<small>{c.u}</small></div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

function WhyThese() {
  return (
    <section className="edge">
      <div className="why-grid">
        <div>
          <span className="mono-tag"><span className="dot"></span>Why these · six reasons</span>
          <h2>Picked, not <em style={{ fontStyle: "normal", color: "var(--solo-volt)", background: "var(--solo-black)", padding: "0 6px" }}>shopped.</em></h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--solo-dark)", marginTop: 18 }}>This is the long version of "we picked them on purpose." Skim the headlines if you trust us; read the bodies if you don't (you shouldn't, yet).</p>
        </div>
        <div>
          {WHY.map((w, i) =>
          <div key={i} className="why-item">
              <div className="n">{w.n}</div>
              <div>
                <h3>{w.h}</h3>
                <p>{w.p}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

function Configurator() {
  const [panel, setPanel] = useState("neostar");
  const [battery, setBattery] = useState("pw3");
  const [extras, setExtras] = useState("none");

  const base = 16800;
  const deltas = {
    neostar: 0, comet: 890, qcell: -1200,
    pw3: 0, pw3stack: 7500, sigen: -2400, none: -11500,
    ev: 420, consumption: 340, both: 760, "none": 0
  };
  const total = base + (deltas[panel] || 0) + (deltas[battery] || 0) + (deltas[extras] || 0);

  const pickedPanel = PANEL_OPTIONS.find((p) => p.id === panel);
  const pickedBattery = BATTERY_OPTIONS.find((p) => p.id === battery);
  const pickedExtras = EXTRAS_OPTIONS.find((p) => p.id === extras);

  return (
    <section className="edge config">
      <div className="head">
        <div>
          <span className="lab">Configurator · the short list</span>
          <h2>If you must change <em style={{ fontStyle: "normal", color: "var(--solo-volt)", background: "var(--solo-black)", padding: "0 6px" }}>something.</em></h2>
        </div>
        <p className="blurb">Three swaps, that's it. Each option below is a component we'd actually fit, with its real price delta. No "starter / pro / max" tiers. No padded option lists. The standard is highlighted; everything else is here because someone, somewhere, has a real reason to pick it.</p>
      </div>
      <div className="config-body">
        <div className="config-options">
          <ConfigSection
            title="Panel"
            step="01 of 03"
            options={PANEL_OPTIONS}
            selected={panel}
            onSelect={setPanel} />
          <ConfigSection
            title="Battery"
            step="02 of 03"
            options={BATTERY_OPTIONS}
            selected={battery}
            onSelect={setBattery} />
          <ConfigSection
            title="Extras"
            step="03 of 03"
            options={EXTRAS_OPTIONS}
            selected={extras}
            onSelect={setExtras} />
        </div>
        <aside className="config-summary">
          <div className="head">
            <span className="lab">Indicative · Ballarat 3350</span>
            <span className="v">post-rebate</span>
          </div>
          <div className="total">
            <div className="lab">Your price today</div>
            <div className="v">${total.toLocaleString()}<span className="unit">GST inc.</span></div>
          </div>
          <div className="breakdown">
            <div className="row">
              <span className="k">Panel</span>
              <span className="v">{pickedPanel?.h.split(" ").slice(0, 3).join(" ")}</span>
            </div>
            <div className="row">
              <span className="k">Battery</span>
              <span className="v">{pickedBattery?.h}</span>
            </div>
            <div className="row">
              <span className="k">Extras</span>
              <span className="v">{pickedExtras?.h}</span>
            </div>
            <div className="row" style={{ marginTop: 8, paddingTop: 14, borderTop: "1px solid var(--solo-black)", borderBottom: 0 }}>
              <span className="k">Federal STC rebate</span>
              <span className="v">−$3,420 applied</span>
            </div>
            <div className="row">
              <span className="k">VIC battery rebate</span>
              <span className="v">−$8,800 applied</span>
            </div>
          </div>
          <div className="cta">
            <a href="index.html#hero" className="btn btn-primary btn-lg" style={{ width: "100%", justifyContent: "center" }}>Lock this price <span className="arrow">→</span></a>
            <p style={{ fontFamily: "var(--solo-font-mono)", fontSize: 11, letterSpacing: "0.06em", color: "var(--solo-cool)", textAlign: "center", marginTop: 12, lineHeight: 1.5 }}>$200 deposit · 14 days to switch-on · balance after.</p>
          </div>
        </aside>
      </div>
    </section>);
}

function ConfigSection({ title, step, options, selected, onSelect }) {
  return (
    <div className="config-section">
      <div className="group-head">
        <span>{title}</span>
        <span className="step">{step}</span>
      </div>
      <div className="config-list">
        {options.map((o) =>
        <div
          key={o.id}
          className={`config-opt ${selected === o.id ? "active" : ""}`}
          onClick={() => onSelect(o.id)}>
            <div className="radio"></div>
            <div>
              <div className="h">{o.h}</div>
              <div className="s">{o.s}</div>
            </div>
            <div className={`delta ${o.t}`}>{o.t === "zero" ? "Standard" : o.d}</div>
          </div>
        )}
      </div>
    </div>);
}

function Specs() {
  return (
    <section className="edge specs-page">
      <div className="section-head">
        <h2>The full <em style={{ fontStyle: "normal", color: "var(--solo-volt)", background: "var(--solo-black)", padding: "0 6px" }}>spec sheet.</em></h2>
        <div className="meta">
          <p>Every datapoint our installers use to size and engineer the system. Print it. Cross-shop it. Send it to your sparky neighbour. Nothing here is rounded up.</p>
        </div>
      </div>
      <div className="specs-grid">
        {SPECS.map((s, i) =>
        <div key={i} className="spec-col">
            <div className="head">
              <div className="lab">{s.lab}</div>
              <div className="h">{s.h}</div>
              <div className="sub">{s.sub}</div>
            </div>
            <div className="rows">
              {s.rows.map(([k, v], j) =>
            <div key={j} className="row">
                  <span className="k">{k}</span>
                  <span className="v">{v}</span>
                </div>
            )}
            </div>
          </div>
        )}
      </div>
    </section>);
}

function Compare() {
  return (
    <section className="edge compare">
      <div className="section-head">
        <h2>How this stacks up.</h2>
        <div className="meta">
          <p>Three columns, eight rows. The other two are real, common archetypes — not strawmen. Get a quote from each before you decide.</p>
        </div>
      </div>
      <div className="compare-table">
        <div className="row head">
          <div className="cell">&nbsp;</div>
          <div className="cell solo">SOLO standard</div>
          <div className="cell">Local door-knocker</div>
          <div className="cell">Big-box retailer</div>
        </div>
        {COMPARE_ROWS.map((r, i) =>
        <div key={i} className="row">
            <div className="cell">
              <span className="k">Row {String(i + 1).padStart(2, "0")}</span>
              <span className="v" style={{ fontWeight: 700 }}>{r.k}</span>
            </div>
            <div className="cell solo">
              <span className="k">SOLO</span>
              <span className="v tick">{r.solo}</span>
            </div>
            <div className="cell">
              <span className="k">Door-knocker</span>
              <span className="v">{r.door}</span>
            </div>
            <div className="cell">
              <span className="k">Big-box</span>
              <span className="v">{r.big}</span>
            </div>
          </div>
        )}
      </div>
    </section>);
}

function Closer() {
  return (
    <section className="closer-strip edge">
      <div className="row">
        <div>
          <h2>Ready when <em>you are.</em></h2>
          <p className="meta" style={{ marginTop: 24 }}>Same system, every postcode. The price moves with the rebate, not the day of the week. The installer you book is the person who picks up.</p>
          <div className="cta">
            <a href="index.html#hero" className="btn btn-primary btn-lg">Get my price <span className="arrow">→</span></a>
            <a href="how-it-works.html" className="btn btn-ghost-light btn-lg">See how it works</a>
          </div>
        </div>
        <div style={{ alignSelf: "end" }}>
          <div className="mono-tag" style={{ background: "transparent", borderColor: "rgba(255,255,255,.32)", color: "rgba(255,255,255,.72)" }}>
            <span className="dot"></span>Indicative · 9.9 kW + 13.5 kWh · post-rebate
          </div>
          <div style={{ fontFamily: "var(--solo-font-display)", fontWeight: 900, fontSize: 88, letterSpacing: "-0.04em", lineHeight: 0.9, color: "var(--solo-volt)", marginTop: 18 }}>
            $16,800
          </div>
          <div style={{ fontFamily: "var(--solo-font-mono)", fontSize: 12, letterSpacing: "0.06em", color: "rgba(255,255,255,.6)", textTransform: "uppercase", marginTop: 8 }}>
            Ballarat 3350 · post-rebate · GST inc.
          </div>
        </div>
      </div>
    </section>);
}

function Footer() {
  return (
    <footer className="edge">
      <div className="footer-line">
        <a className="word" href="index.html"><img src="assets/SOLO_WORDMARK_BLACK.svg" alt="SOLO" /></a>
        <div className="links">
          <a href="how-it-works.html">How it works</a>
          <a href="systems.html">Systems</a>
          <a href="products.html">Products</a>
          <a href="installers.html">Installers</a>
          <a href="faq.html">FAQ</a>
        </div>
        <div>SOLO Energy Pty Ltd · ABN 12 345 678 901 · CEC retailer code SOLO-00428</div>
      </div>
    </footer>);
}

function Page() {
  return (
    <div className="page" id="top" data-volt="more" data-typescale="restrained" data-sunprint="corner">
      <Announce />
      <Topbar />
      <Hero />
      <StandardSystem />
      <WhyThese />
      <Configurator />
      <Specs />
      <Compare />
      <Closer />
      <Footer />
    </div>);
}

ReactDOM.createRoot(document.getElementById("root")).render(<Page />);