// SOLO — Homepage
// Single full-bleed prototype. Three hero compositions exposed via Tweaks
// (split / single-number / full-bleed photo). Other tweaks: Volt density,
// Sun Print presence, Postcode entry style, Type scale, Image pillar.

const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────────
//  Tweak defaults  (kept inside the EDITMODE markers so the host
//  can persist any change the user makes to disk).
// ─────────────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "volt": "more",
  "sunPrint": "corner",
  "postcode": "pill",
  "typescale": "restrained",
  "pillar": "lived"
} /*EDITMODE-END*/;

// ─────────────────────────────────────────────────────────────────
//  Static content
// ─────────────────────────────────────────────────────────────────
const SUN_PRINTS = {
  ballarat: "assets/sun-prints/SUNPRINT-3350-66KW-BALLARAT.svg",
  s3000: "assets/sun-prints/SUNPRINT-3000-8KW.svg",
  s3220: "assets/sun-prints/SUNPRINT-3220-66KW.svg",
  s3550: "assets/sun-prints/SUNPRINT-3550-10KW-135KWH.svg",
  s4870: "assets/sun-prints/SUNPRINT-4870-13KW-270KWH.svg",
  s5152: "assets/sun-prints/SUNPRINT-5152-66KW-135KWH.svg",
  s6000: "assets/sun-prints/SUNPRINT-6000-10KW-135KWH.svg",
  s7000: "assets/sun-prints/SUNPRINT-7000-5KW.svg"
};

// Indicative postcode → quote map. These are illustrative, not a quoting tool —
// the homepage hands off to the configurator at /configure to do real numbers.
// Real-quote ranges anchored to Australian retail prices for 9.9 kW + 13.5 kWh
// post-rebate (federal STC + state Solar for Households).
const PRICE_FIXTURES = {
  "3350": { city: "Ballarat", state: "VIC", price: 16800, system: "9.9 kW + 13.5 kWh", azimuth: "north 18°", rebate: 4625, lat: "-37.56°", print: "ballarat" },
  "3000": { city: "Melbourne", state: "VIC", price: 16800, system: "9.9 kW + 13.5 kWh", azimuth: "north 8°", rebate: 4625, lat: "-37.81°", print: "s3000" },
  "3220": { city: "Geelong", state: "VIC", price: 16800, system: "9.9 kW + 13.5 kWh", azimuth: "north 22°", rebate: 4625, lat: "-38.15°", print: "s3220" },
  "3550": { city: "Bendigo", state: "VIC", price: 16800, system: "9.9 kW + 13.5 kWh", azimuth: "north 4°", rebate: 4625, lat: "-36.76°", print: "s3550" },
  "2010": { city: "Sydney", state: "NSW", price: 17400, system: "9.9 kW + 13.5 kWh", azimuth: "north 12°", rebate: 4280, lat: "-33.88°", print: "s4870" },
  "5152": { city: "Adelaide", state: "SA", price: 16400, system: "9.9 kW + 13.5 kWh", azimuth: "north 6°", rebate: 4825, lat: "-35.07°", print: "s5152" },
  "6000": { city: "Perth", state: "WA", price: 16200, system: "9.9 kW + 13.5 kWh", azimuth: "north 2°", rebate: 4925, lat: "-31.95°", print: "s6000" },
  "4870": { city: "Cairns", state: "QLD", price: 17900, system: "9.9 kW + 13.5 kWh", azimuth: "north 30°", rebate: 4180, lat: "-16.92°", print: "s4870" },
  "7000": { city: "Hobart", state: "TAS", price: 17600, system: "9.9 kW + 13.5 kWh", azimuth: "north 14°", rebate: 4380, lat: "-42.88°", print: "s7000" }
};

// Pillar imagery: which photo gets foregrounded based on user's pillar tweak.
const PILLAR_IMAGES = {
  built: { src: "assets/photo-desk.jpeg", alt: "Phone on a desk showing a fixed-price solar quote" },
  lived: { src: "assets/photo-desk.jpeg", alt: "A SOLO quote sitting on a kitchen bench" },
  local: { src: "assets/photo-door.jpeg", alt: "Door-knocker flyer wedged into a Ballarat security door" }
};

// ─────────────────────────────────────────────────────────────────
//  Small helpers
// ─────────────────────────────────────────────────────────────────
const fmtAUD = (n) => "$" + n.toLocaleString("en-AU");
const Word = ({ light }) =>
<a href="#top" className="word">
    <img src={light ? "assets/SOLO_WORDMARK_WHITE.svg" : "assets/SOLO_WORDMARK_BLACK.svg"} alt="SOLO" />
  </a>;


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

}
function Topbar() {
  return (
    <div className="topbar edge">
      <div className="left">
        <Word />
        <nav>
          <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>
        </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="#hero">Get my price <span className="arrow">→</span></a>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────
//  POSTCODE ENTRY (3 styles) + REVEAL
// ─────────────────────────────────────────────────────────────────
function PostcodeEntry({ style, value, onChange, onSubmit }) {
  const onKey = (e) => {if (e.key === "Enter") onSubmit();};
  if (style === "underlined") {
    return (
      <div className="pc-entry">
        <div className="label">Your postcode</div>
        <div className="pc-under">
          <input value={value} onChange={(e) => onChange(e.target.value)} onKeyDown={onKey} placeholder="3350" maxLength={4} inputMode="numeric" aria-label="Postcode" />
          <button onClick={onSubmit}>Get my price →</button>
        </div>
      </div>);

  }
  if (style === "large") {
    return (
      <div className="pc-entry">
        <div className="label">Your postcode</div>
        <div className="pc-large">
          <input value={value} onChange={(e) => onChange(e.target.value)} onKeyDown={onKey} placeholder="3350" maxLength={4} inputMode="numeric" aria-label="Postcode" />
          <button className="btn btn-primary btn-lg" onClick={onSubmit}>Get my price <span className="arrow">→</span></button>
        </div>
      </div>);

  }
  return (
    <div className="pc-entry">
      <div className="label">Your postcode</div>
      <div className="pc-pill">
        <input value={value} onChange={(e) => onChange(e.target.value)} onKeyDown={onKey} placeholder="Enter 4-digit postcode (try 3350)" maxLength={4} inputMode="numeric" aria-label="Postcode" />
        <button onClick={onSubmit}>Get my price →</button>
      </div>
    </div>);

}

function PriceReveal({ data, onClear, onContinue }) {
  if (!data) return null;
  return (
    <div className="pc-reveal" role="region" aria-live="polite">
      <div className="pane">
        <div className="label">Indicative fixed price · post-rebate</div>
        <div className="big">{fmtAUD(data.price)}<span className="unit">incl. GST</span></div>
        <div style={{ marginTop: 14 }}>
          <div className="row"><span>Pre-rebate</span><span>{fmtAUD(data.price + data.rebate)}</span></div>
          <div className="row"><span>Federal STC + {data.state} rebate</span><span>− {fmtAUD(data.rebate)}</span></div>
          <div className="row"><span>Includes installation, GST</span><span>0 surprises</span></div>
        </div>
      </div>
      <div className="pane">
        <div className="label">{data.city} {data.lat ? `· ${data.lat}` : ""}</div>
        <div className="big">9.9<span className="unit">kW</span> <span style={{ fontSize: ".5em", color: "var(--solo-cool)" }}>+</span> 13.5<span className="unit">kWh</span></div>
        <div style={{ marginTop: 14 }}>
          <div className="row"><span>Panels</span><span>22 × Aiko Neostar 450W</span></div>
          <div className="row"><span>Inverter</span><span>Sungrow SH10RT</span></div>
          <div className="row"><span>Battery</span><span>Tesla Powerwall 3 · 13.5 kWh</span></div>
        </div>
      </div>
      <div className="actions">
        <small>Indicative · final number set after roof scan and your VPP / battery choices</small>
        <div style={{ display: "flex", gap: 12 }}>
          <button className="btn btn-ghost btn-sm" onClick={onClear}>Try another postcode</button>
          <button className="btn btn-black btn-sm" onClick={onContinue}>Configure my system <span className="arrow">→</span></button>
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────
//  HERO COMPOSITIONS
// ─────────────────────────────────────────────────────────────────
function HeroSplit({ tweaks, postcode, setPostcode, quote, onSubmit, onClear }) {
  const printSrc = quote ? SUN_PRINTS[quote.print] : SUN_PRINTS.ballarat;
  return (
    <section className="hero edge" id="hero">
      <div className="hero-meta">
        <span className="mono-tag"><span className="dot black"></span>CEC accredited installers</span>
        <span className="mono-tag" style={{ color: "var(--solo-cool)" }}>MAY 2026</span>
      </div>
      <div className="hero-split hero-split--reverse">
        <div>
          <h1 className="hero-headline">Solar,<br />sorted.</h1>
          <p className="hero-lede">Fixed prices online. Certified local installers. Your battery, your VPP choice. No salesman.</p>
          <PostcodeEntry style={tweaks.postcode} value={postcode} onChange={setPostcode} onSubmit={onSubmit} />
          {quote ?
          <PriceReveal data={quote} onClear={onClear} onContinue={() => alert("Continue → /configure (out of scope for the homepage)")} /> :
          <div className="pc-help">Enter your postcode. We'll show you a fixed indicative price for a 9.9 kW + 13.5 kWh system. No email, no phone call. <b>Try 3350, 2010, 5152.</b></div>
          }
        </div>
        <div className="hero-print">
          <div className="corner">SUNPRINT-3350-66KW<br />BALLARAT · 37.56°S · NORTH 18°<br />9.9 kW · 13.5 kWh</div>
          <img src={printSrc} alt="Sun Print — three concentric arcs derived from sun-path geometry" style={{ width: "100%", height: "100%", objectFit: "contain" }} />
          <div className="corner-br">22 PANELS · AIKO NEOSTAR<br />SUNGROW SH10RT<br />TESLA POWERWALL 3</div>
        </div>
      </div>
    </section>);

}

function HeroSingle({ tweaks, postcode, setPostcode, quote, onSubmit, onClear }) {
  return (
    <section className="hero edge" id="hero">
      <div className="hero-meta">
        <span className="mono-tag"><span className="dot"></span>Indicative · 9.9 kW + 13.5 kWh · post-rebate</span>
      </div>
      <div className="hero-single">
        <div className="display" style={{ fontSize: "var(--single-number, 200px)", lineHeight: 0.84 }}>
          {quote ? fmtAUD(quote.price) : "$16,800"}<span style={{ fontSize: "0.18em", color: "var(--solo-cool)", marginLeft: 14, letterSpacing: 0, verticalAlign: "top" }}>incl. GST</span>
        </div>
        <div className="hero-headline display" style={{ fontSize: "var(--hero-display, 132px)" }}>
          Solar, <em>sorted.</em>
        </div>
        <div className="hero-single-body body-row" style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: 64, alignItems: "end" }}>
          <p className="hero-lede" style={{ margin: 0, maxWidth: "32ch" }}>
            Fixed prices online. Certified local installers. Your battery, your VPP choice. No salesman.
          </p>
          <div>
            <PostcodeEntry style={tweaks.postcode} value={postcode} onChange={setPostcode} onSubmit={onSubmit} />
            {quote ?
            <PriceReveal data={quote} onClear={onClear} onContinue={() => alert("Continue → /configure")} /> :
            <div className="pc-help" style={{ marginTop: 8 }}>Enter your postcode for your number. <b>Try 3350.</b></div>}
          </div>
        </div>
      </div>
    </section>);

}

function HeroPhoto({ tweaks, postcode, setPostcode, quote, onSubmit, onClear, photo }) {
  return (
    <section className="hero" id="hero" style={{ paddingBlock: 0 }}>
      <div className="hero-photo edge" style={{ backgroundImage: `url(${photo.src})` }}>
        <div className="inner">
          <div className="hero-meta" style={{ marginBottom: 0 }}>
            <span className="mono-tag" style={{ color: "var(--solo-white)" }}><span className="dot"></span>Ballarat 3350 · launching mid-2026</span>
          </div>
          <div>
            <h1 className="hero-headline display" style={{ fontSize: "var(--hero-display, 132px)", color: "var(--solo-white)" }}>Solar,<br />sorted.</h1>
            <p className="hero-lede" style={{ color: "rgba(255,255,255,0.85)", maxWidth: "44ch" }}>
              Fixed prices online. Certified local installers. Your battery, your VPP choice. No salesman.
            </p>
            <div style={{ maxWidth: 540 }}>
              <PostcodeEntry style={tweaks.postcode} value={postcode} onChange={setPostcode} onSubmit={onSubmit} />
            </div>
            {quote && <div style={{ marginTop: 22, maxWidth: 980 }}><PriceReveal data={quote} onClear={onClear} onContinue={() => alert("Continue → /configure")} /></div>}
          </div>
        </div>
      </div>
    </section>);

}

function Hero(props) {
  if (props.tweaks.hero === "single") return <HeroSingle {...props} />;
  if (props.tweaks.hero === "photo") return <HeroPhoto {...props} />;
  return <HeroSplit {...props} />;
}

// ─────────────────────────────────────────────────────────────────
//  PROMISE STRIP
// ─────────────────────────────────────────────────────────────────
function PromiseStrip() {
  const items = [
  { num: "01", h: "Fixed price online", s: "What you see is what you pay. No re-quotes after the roof scan." },
  { num: "02", h: "Certified local crew", s: "Named CEC-accredited installer. Real photo, real number, real time on site." },
  { num: "03", h: "Your battery, your VPP", s: "Powerwall, Tesla, Sungrow. Amber, OVO, Tesla VPP. Or none. Your call." },
  { num: "04", h: "10-yr workmanship", s: "Plus manufacturer warranties (Aiko 25, Sungrow 10, Powerwall 10)." }];

  return (
    <div className="edge">
      <div className="promise">
        {items.map((it) =>
        <div className="item" key={it.num}>
            <div className="num">{it.num}</div>
            <div className="h">{it.h}</div>
            <div className="s">{it.s}</div>
          </div>
        )}
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────
//  HOW IT WORKS
// ─────────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
  { n: "Step 01", h: "Postcode → price", b: "Enter your postcode. We show your indicative fixed price for a 9.9 kW + 13.5 kWh system, post-rebate.", t: "60 seconds" },
  { n: "Step 02", h: "Roof scan", b: "We pull your roof from satellite + cadastre data. Pitch, azimuth, shading. You confirm your panels.", t: "Same day" },
  { n: "Step 03", h: "Pick battery + VPP", b: "Powerwall, Tesla, Sungrow. Amber, OVO, Tesla VPP, or none. We show the trade-offs in dollars, not vibes.", t: "10 minutes" },
  { n: "Step 04", h: "Pay deposit, pick a date", b: "$1,000 deposit holds your install date. Balance after switch-on. Real calendar, named installer.", t: "Within 14 days" },
  { n: "Step 05", h: "Install + switch-on", b: "Jason and the crew arrive 7:30–8:00 AM. Panels up, battery in, meter cleared. Volt pulse on the app.", t: "1 day on site" }];

  return (
    <section className="section edge" id="how">
      <div className="section-head">
        <h2>From <em>postcode</em> to switch-on. Five steps. Two weeks.</h2>
        <div className="meta">
          <span className="eyebrow">How it works</span>
          <p>Most retailers spend the first 14 days trying to sell you something else. We spend ours scanning your roof, ordering your panels, and booking the crew.</p>
        </div>
      </div>
      <div className="how">
        {steps.map((s) =>
        <div className="step" key={s.n}>
            <div className="n">{s.n}</div>
            <div className="h">{s.h}</div>
            <div className="b">{s.b}</div>
            <div className="t">⏱ {s.t}</div>
          </div>
        )}
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
//  WHAT YOU GET — Single Number spec card
// ─────────────────────────────────────────────────────────────────
function WhatYouGet({ quote }) {
  const price = quote?.price ?? 16800;
  return (
    <section className="spec" id="system">
      <div className="edge">
        <div className="head">
          <h2>One system. Sized for the rebate. Real spec sheet.</h2>
          <p>Bigger isn't always better. A 13.5 kWh battery extracts the most rebate per dollar at current Australian retail prices. We sell the system that pays you back fastest, not the one that maxes out your roof.</p>
        </div>
        <div className="body">
          <div>
            <div className="price-block">
              <div className="lab">Indicative · post-rebate · {quote?.city || "Ballarat"} {quote?.state || "VIC"}</div>
              <div className="num">{fmtAUD(price)}<em> *</em></div>
              <div className="row"><span>Pre-rebate</span><span>{fmtAUD(price + 4625)}</span></div>
              <div className="row"><span>Federal STC</span><span>− $3,180</span></div>
              <div className="row"><span>VIC Solar for Households</span><span>− $1,400</span></div>
              <div className="row"><span>Battery rebate (federal)</span><span>− $45</span></div>
              <div className="total"><span>You pay</span><b>{fmtAUD(price)}</b></div>
            </div>
            <div className="spec-cta">
              <a className="btn btn-primary btn-lg" href="#hero">Get my price <span className="arrow">→</span></a>
              <a className="btn btn-ghost-light btn-lg btn-sharp" href="#" style={{ color: "var(--solo-white)", borderColor: "var(--solo-cool)" }}>Download full spec sheet (PDF)</a>
            </div>
          </div>
          <div className="specs">
            <div className="row"><span className="k">System</span><span className="v">9.9 kW solar + 13.5 kWh battery<small>The rebate sweet-spot for an average Australian household</small></span></div>
            <div className="row"><span className="k">Panels</span><span className="v">22 × Aiko Neostar 450 W (N-type, all-black)<small>25-year product · 30-year performance warranty</small></span></div>
            <div className="row"><span className="k">Inverter</span><span className="v">Sungrow SH10RT-V13<small>Hybrid · 10-year warranty · CEC approved</small></span></div>
            <div className="row"><span className="k">Battery</span><span className="v">Tesla Powerwall 3 · 13.5 kWh usable<small>10-year warranty · 70% backup capable</small></span></div>
            <div className="row"><span className="k">VPP options</span><span className="v">Amber · OVO Power Move · Tesla VPP · or none<small>You choose at configurator step. We show the dollars side-by-side.</small></span></div>
            <div className="row"><span className="k">Workmanship</span><span className="v">10-year SOLO workmanship warranty<small>Backed by the actual installer, not a parent company</small></span></div>
            <div className="row"><span className="k">On site</span><span className="v">1 day. 7:30 AM – 4:00 PM.<small>Jason and a crew of 3. We tarp, we tidy, we vacuum.</small></span></div>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
//  INSTALLER
// ─────────────────────────────────────────────────────────────────
function InstallerCard() {
  return (
    <section className="section edge" id="installer">
      <div className="section-head">
        <h2>Your installer. Named. Local. Accredited.</h2>
        <div className="meta">
          <span className="eyebrow">Meet your crew</span>
          <p>The person who installs your system is the person you talk to if anything goes wrong. We don't sub it out to whoever's free.</p>
        </div>
      </div>
      <div className="installer">
        <div className="lhs">
          <div className="pts">
            <div className="p"><span className="k">Name</span><span>Jason Whittaker</span></div>
            <div className="p" style={{ padding: "16px 18px" }}><span className="k">CEC accreditation</span><span>A1234567 · valid to 2027</span></div>
            <div className="p"><span className="k">Electrical licence</span><span>VIC REC 19283 · A-Class</span></div>
            <div className="p" style={{ padding: "16px 18px" }}><span className="k">Crew size</span><span>3 (Ben, John, Maddy)</span></div>
            <div className="p"><span className="k">Postcodes served</span><span>3350, 3352, 3353, 3355, 3356, 3357, 3373, 3375</span></div>
            <div className="p" style={{ padding: "16px 18px" }}><span className="k">Contactable</span><span>0412 [pending] · jason@getsolo.solar</span></div>
            <div className="p"><span className="k">First install</span><span>2003 · Ballarat East</span></div>
          </div>
          <p style={{ maxWidth: "44ch", marginTop: 28 }}>
            Jason has been on Ballarat roofs since 2003. He's been a sub-contractor for three of the big national retailers, and walked off two of them. He's the reason SOLO exists in the postcode.
          </p>
        </div>
        <div className="card">
          <div className="photo">
            {/* SVG portrait placeholder — never invent a real face */}
            <svg viewBox="0 0 600 450" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
              <rect width="600" height="450" fill="#ECECEC" />
              <g fill="#9BA3A6">
                <circle cx="300" cy="190" r="80" />
                <path d="M 130 450 Q 130 280 300 280 Q 470 280 470 450 Z" />
              </g>
              <g stroke="#434544" fill="none" strokeWidth="1">
                <path d="M 0 380 L 600 360" />
                <path d="M 0 410 L 600 395" />
              </g>
              <text x="40" y="430" fontFamily="Geist Mono, monospace" fontSize="11" fill="#434544" letterSpacing="0.6">PORTRAIT [pending] · BUILT PILLAR · BALLARAT</text>
            </svg>
            <span className="badge"><span className="dot"></span>Verified · CEC A1234567</span>
          </div>
          <div className="info">
            <div className="name">Jason Whittaker</div>
            <div className="meta">Lead installer · Ballarat 3350 · 23 years on the tools</div>
            <div className="quote">"I've worked for three of the door-knockers. I'd rather be on a roof than read a script."</div>
            <div className="stats">
              <div className="s"><div className="n">142</div><div className="l">installs since 2003</div></div>
              <div className="s"><div className="n">23 yrs</div><div className="l">on the tools</div></div>
              <div className="s"><div className="n">4.9/5</div><div className="l">avg. customer rating</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
//  SUN PRINT EXPLAINER
// ─────────────────────────────────────────────────────────────────
function SunPrintExplainer({ quote }) {
  const data = quote || { city: "Ballarat", state: "VIC", lat: "-37.56°", azimuth: "north 18°" };
  const print = quote ? SUN_PRINTS[quote.print] : SUN_PRINTS.ballarat;
  return (
    <section className="sunprint-section">
      <div className="edge">
        <div className="grid">
          <div>
            <span className="eyebrow">The Sun Print</span>
            <h2 style={{ marginTop: 14 }}>Your roof, drawn by the sun.</h2>
            <p>Three concentric arcs — sun-path geometry at your latitude, modulated by your roof's azimuth, pitch, and the system size we put on it. Every customer's print is unique.</p>
            <p>You get yours at the end of the configurator, framed in oak, posted to your door. It's a thing. It's also a system diagram you can read.</p>
            <div className="desc">{data.city} {data.state} · {data.lat} · {data.azimuth} · 9.9 kW · 13.5 kWh</div>
          </div>
          <div className="sunprint-card">
            <div className="stamp">SUNPRINT-{quote ? Object.keys(PRICE_FIXTURES).find((k) => PRICE_FIXTURES[k] === quote) : "3350"}<br />v1.0 · MAY 2026<br />NOT A REAL PRINT · STYLISED</div>
            <img src={print} alt="Stylised Sun Print" style={{ width: "100%", height: "auto", maxHeight: 360, objectFit: "contain" }} />
            <div className="ledger">
              <div className="c"><span className="k">Latitude</span><span className="v">{data.lat}</span></div>
              <div className="c" style={{ padding: "14px 16px 0px 14px" }}><span className="k">Azimuth</span><span className="v">{data.azimuth}</span></div>
              <div className="c" style={{ padding: "14px 16px 0px 14px" }}><span className="k">System</span><span className="v">9.9 kW + 13.5 kWh</span></div>
              <div className="c" style={{ padding: "14px 16px 0px 14px" }}><span className="k">Annual yield</span><span className="v">14,200 kWh</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
//  PRICING TRANSPARENCY
// ─────────────────────────────────────────────────────────────────
function PricingTransparency({ quote }) {
  const price = quote?.price ?? 16800;
  const rows = [
  { item: "Aiko Neostar 450 W panels (× 22)", note: "N-type, all-black, 25-yr product warranty", qty: "22 ea", rrp: 4180, fixed: 3850 },
  { item: "Sungrow SH10RT-V13 hybrid inverter", note: "10 kW hybrid · 10-yr warranty", qty: "1", rrp: 3450, fixed: 3100 },
  { item: "Tesla Powerwall 3 · 13.5 kWh", note: "70% backup-capable · 10-yr warranty", qty: "1", rrp: 11900, fixed: 11400 },
  { item: "Mounting + isolators + DC cabling", note: "Tindo / Clenergy rails · all CEC-rated", qty: "1 lot", rrp: 1650, fixed: 1450 },
  { item: "Installation + commissioning", note: "1 day on site · Jason + 2 crew · STC docs", qty: "1 day", rrp: 2400, fixed: 1625 }];

  const totalRrp = rows.reduce((a, r) => a + r.rrp, 0);
  const totalFixed = rows.reduce((a, r) => a + r.fixed, 0);
  return (
    <section className="section edge">
      <div className="pricing">
        <div className="lhs">
          <span className="eyebrow">Pricing transparency</span>
          <h2 style={{ marginTop: 14 }}>Every line item. Pre and post rebate.</h2>
          <p>The number on the homepage is the number on the invoice. Here's where every dollar goes — what RRP looks like at the big-box retailers, what we charge, and where the rebates land.</p>
          <div className="badge"><span className="dot"></span>No "from $" · No re-quotes · No bait</div>
        </div>
        <div className="ledger-table">
          <div className="header">
            <div>Line item</div>
            <div>Qty</div>
            <div>Retail RRP</div>
            <div>SOLO fixed</div>
          </div>
          {rows.map((r) =>
          <div className="row" key={r.item}>
              <div className="item">{r.item}<small>{r.note}</small></div>
              <div>{r.qty}</div>
              <div className="strike">{fmtAUD(r.rrp)}</div>
              <div>{fmtAUD(r.fixed)}</div>
            </div>
          )}
          <div className="totals">
            <div className="lab">Subtotal</div>
            <div></div>
            <div className="v was">{fmtAUD(totalRrp)}</div>
            <div className="v now">{fmtAUD(totalFixed)}</div>
          </div>
          <div className="totals" style={{ borderTop: "1px solid var(--solo-soft)", background: "var(--solo-white)" }}>
            <div className="lab" style={{ fontSize: 14, fontFamily: "var(--solo-font-mono)", textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--solo-dark)", fontWeight: 500 }}>Federal STC + state rebates</div>
            <div></div>
            <div></div>
            <div className="v" style={{ fontSize: 16, fontFamily: "var(--solo-font-mono)", fontWeight: 500 }}>− {fmtAUD(totalFixed - price)}</div>
          </div>
          <div className="totals">
            <div className="lab">You pay</div>
            <div></div>
            <div className="v was">{fmtAUD(totalRrp)}</div>
            <div className="v save"><span className="accent">{fmtAUD(price)}</span></div>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
//  COMPARISON
// ─────────────────────────────────────────────────────────────────
function Versus() {
  const rows = [
  { k: "Pricing", solo: <>Fixed price <b>before</b> you give us your number.</>, them: <>"From $X*". Real number after a 90-min home visit.</> },
  { k: "Quote method", solo: <>Postcode + roof scan. Online. Done in 10 minutes.</>, them: <>Doorknock. Phone. Living room. Tablet demo. <em>"Today only."</em></> },
  { k: "Installer", solo: <>Named CEC-accredited local. Photo. Number.</>, them: <>"Subcontractor TBC." Crew assigned the morning of.</> },
  { k: "Battery / VPP", solo: <>Your choice. We show the dollars side-by-side.</>, them: <>The one they're paid the most to sell.</> },
  { k: "Re-quotes", solo: <>None. Roof scan confirms — doesn't reset.</>, them: <>Standard. Average bump: 11–18% post-survey.</> },
  { k: "Pressure", solo: <>None. Quote stays good for 30 days.</>, them: <>Countdown timer. Manager phone-a-friend. Discount fold.</> },
  { k: "Sales commission", solo: <>$0. There is no salesman.</>, them: <>$1,500 – $3,500 per system, baked into your price.</> },
  { k: "Workmanship", solo: <>10 yrs · backed by the actual installer.</>, them: <>Warranties parented to companies that may not exist in 5 yrs.</> }];

  return (
    <section className="section edge">
      <div className="section-head">
        <h2>SOLO vs the door-knockers.</h2>
        <div className="meta">
          <span className="eyebrow">The honest comparison</span>
          <p>Solar in Australia has been bait-and-switch for a decade. Here's what the door-knockers do, and what we do instead. No spin.</p>
        </div>
      </div>
      <div className="versus">
        <div className="grid">
          <div className="h-spacer"></div>
          <div className="h-solo"><div className="l">SOLO</div><div className="s">Solar, sorted.</div></div>
          <div className="h-them"><div className="l">The door-knockers</div><div className="s">Big retailers · sub-contracted</div></div>
          {rows.map((r) =>
          <React.Fragment key={r.k}>
              <div className="row-k">{r.k}</div>
              <div className="row-solo">{r.solo}</div>
              <div className="row-them">{r.them}</div>
            </React.Fragment>
          )}
        </div>
        <div className="closer">
          <div className="quote">"The sun doesn't have a salesman. Why should your solar?"</div>
          <a className="btn btn-primary btn-lg" href="#hero">Get my price <span className="arrow">→</span></a>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
//  FAQ
// ─────────────────────────────────────────────────────────────────
function FAQ() {
  const faqs = [
  { q: "Is the price on the homepage really the price?",
    a: <><p>Yes — within a small range that the roof scan confirms. The number you see at postcode entry is for an average roof in your postcode (north-facing, ≥10° pitch, no major shading). Once we pull your specific roof from satellite + cadastre data, we'll either confirm the number or show you the variance and why.</p><p>If your roof needs more than a standard install (3-storey, tile-and-batten, structural reinforcement), we tell you the new number before you pay a deposit. Not after.</p></> },
  { q: "When do you launch in my postcode?",
    a: <><p>Ballarat 3350 first — mid-2026. Then 3220, 3550, 3000, 3550 across regional Victoria through Q4 2026. National rollout through 2027 — Adelaide, Perth, Sydney, Brisbane, Hobart in roughly that order.</p><p>Enter your postcode for an indicative price and we'll email you the date we open in your area. Email is for that. Nothing else. No telemarketing, no door-knocking.</p></> },
  { q: "Why 9.9 kW + 13.5 kWh? My roof could fit more.",
    a: <p>It probably could. But 9.9 kW is the largest system that stays under most retailers' single-phase export limit, and 13.5 kWh is the battery size that extracts the most rebate per dollar at current Australian retail prices. Bigger isn't always better — the marginal kWh on a 20 kW system pays back in 14 years; the 9.9 kW system pays back in 6. We'll quote larger if you want it. We just won't recommend it.</p> },
  { q: "What's the deal with VPPs? Do I have to join one?",
    a: <p>No. A VPP (Virtual Power Plant) lets your battery sell power to the grid when prices spike — Amber, OVO Power Move, and Tesla VPP all do this differently. We'll show you the realistic dollars per year for each option, and the trade-offs (Amber pays the most, but exposes you to wholesale spikes; Tesla VPP is set-and-forget but caps your upside). You can also opt out entirely. Your battery, your call.</p> },
  { q: "What's the catch?",
    a: <p>The catch is we only do one product (9.9 kW + 13.5 kWh), in one geography (Ballarat at launch), with one set of components. If you want a 20 kW system with two batteries and a Fronius inverter on a corrugated tin shed, we're not the right shop. If you want the standard system that pays back fastest, installed by a named local, with no salesman in the loop — we are.</p> },
  { q: "Who is SOLO?",
    a: <p>SOLO is a registered Australian solar retailer. ABN [pending registration]. Based in Ballarat, Victoria. We're certified by the Clean Energy Council (CEC accreditation [awaiting CEC]). Our installers are all CEC accredited and locally licensed. We launched mid-2026 because everyone we knew who'd bought solar in the last decade had been ripped off by someone, and we got tired of saying "you should have bought ours."</p> }];

  const [open, setOpen] = useState(0);
  return (
    <section className="section edge" id="faq">
      <div className="faq">
        <div className="lhs">
          <span className="eyebrow">FAQ</span>
          <h2 style={{ marginTop: 14 }}>Plain answers. No fine print.</h2>
          <p>Six questions we get most. If yours isn't here, ask Sarah — she replies in business hours, in her own words, from her own email.</p>
          <div className="help">
            <div className="h">Sarah from SOLO</div>
            <div className="s">Mon–Fri, 8 AM – 5 PM AEST</div>
            <div style={{ marginTop: 6, fontSize: 14, color: "var(--solo-dark)" }}>sarah@getsolo.solar &nbsp;·&nbsp; 0412 [pending]</div>
          </div>
        </div>
        <div className="list">
          {faqs.map((f, i) =>
          <div className={"item" + (open === i ? " open" : "")} key={i}>
              <button onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span className="n">{String(i + 1).padStart(2, "0")}</span>
                <span className="q">{f.q}</span>
                <span className="x">+</span>
              </button>
              {open === i && <div className="a"><div></div><div>{f.a}</div><div></div></div>}
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
//  CLOSER + FOOTER
// ─────────────────────────────────────────────────────────────────
function Closer() {
  return (
    <section className="closer-strip">
      <div className="corner-print">
        <img src={SUN_PRINTS.ballarat} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", filter: "brightness(0) saturate(100%) invert(91%) sepia(50%) saturate(672%) hue-rotate(33deg) brightness(108%) contrast(101%)" }} />
      </div>
      <div className="edge">
        <div className="row">
          <h2>The sun doesn't have a salesman. <em>Why should your solar?</em></h2>
          <div className="meta">
            Get a fixed indicative price for your postcode in 60 seconds. We don't door-knock. We don't telemarket. Unsubscribe in one click, any time.
            <div className="cta">
              <a className="btn btn-primary btn-xl" href="#hero">Get my price <span className="arrow">→</span></a>
              <a className="btn btn-ghost-light btn-xl" href="#how">How it works</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="edge">
      <div className="footer-line">
        <Word />
        <div>SOLO Solar Pty Ltd · ABN [pending] · getsolo.solar</div>
        <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>
          <a href="mailto:hello@getsolo.solar">hello@getsolo.solar</a>
        </div>
      </div>
    </footer>);

}

// ─────────────────────────────────────────────────────────────────
//  TWEAKS PANEL
// ─────────────────────────────────────────────────────────────────
function HomeTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakRadio label="Composition" value={tweaks.hero}
      options={[{ value: "split", label: "Split" }, { value: "single", label: "Number" }, { value: "photo", label: "Photo" }]}
      onChange={(v) => setTweak("hero", v)} />
      <TweakSelect label="Postcode entry" value={tweaks.postcode}
      options={[{ value: "pill", label: "Pill (compact)" }, { value: "underlined", label: "Underlined display" }, { value: "large", label: "Large standalone" }]}
      onChange={(v) => setTweak("postcode", v)} />
      <TweakSection label="Visual" />
      <TweakRadio label="Volt density" value={tweaks.volt}
      options={[{ value: "strict", label: "Strict 5%" }, { value: "more", label: "A bit more" }, { value: "mono", label: "Mono only" }]}
      onChange={(v) => setTweak("volt", v)} />
      <TweakSelect label="Sun Print" value={tweaks.sunPrint}
      options={[{ value: "none", label: "None" }, { value: "corner", label: "Corner anchor" }, { value: "hero", label: "Hero device" }]}
      onChange={(v) => setTweak("sunPrint", v)} />
      <TweakRadio label="Type scale" value={tweaks.typescale}
      options={[{ value: "restrained", label: "Restrained" }, { value: "display", label: "Display" }, { value: "supersize", label: "Super" }]}
      onChange={(v) => setTweak("typescale", v)} />
      <TweakSelect label="Image pillar" value={tweaks.pillar}
      options={[{ value: "built", label: "Built (hardware)" }, { value: "lived", label: "Lived (homes)" }, { value: "local", label: "Local (installer)" }]}
      onChange={(v) => setTweak("pillar", v)} />
    </TweaksPanel>);

}

// ─────────────────────────────────────────────────────────────────
//  ROOT
// ─────────────────────────────────────────────────────────────────
function Home() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [postcode, setPostcode] = useState("");
  const [quote, setQuote] = useState(null);

  const onSubmit = () => {
    const pc = postcode.trim().padStart(4, "0").slice(0, 4);
    const fixture = PRICE_FIXTURES[pc];
    if (fixture) {
      setQuote(fixture);
      // Smooth scroll the price reveal into view
      setTimeout(() => {
        const el = document.querySelector(".pc-reveal");
        if (el) {
          const r = el.getBoundingClientRect();
          window.scrollTo({ top: window.scrollY + r.top - 120, behavior: "smooth" });
        }
      }, 80);
    } else if (postcode.length >= 3) {
      // unsupported postcode — show inline message via quote = "unknown"
      setQuote({ city: "Outside our launch zone", state: "—", price: 0, system: "9.9 kW + 13.5 kWh", azimuth: "—", rebate: 0, lat: "—", print: "ballarat", _none: true });
    }
  };
  const onClear = () => {setQuote(null);setPostcode("");};

  const photo = PILLAR_IMAGES[tweaks.pillar] || PILLAR_IMAGES.lived;

  // unsupported postcode UI
  const safeQuote = quote && quote._none ? null : quote;

  return (
    <div className="page" id="top" data-volt={tweaks.volt} data-typescale={tweaks.typescale} data-sunprint={tweaks.sunPrint}>
      <Announce />
      <Topbar />
      <Hero
        tweaks={tweaks}
        postcode={postcode}
        setPostcode={setPostcode}
        quote={safeQuote}
        onSubmit={onSubmit}
        onClear={onClear}
        photo={photo} />
      
      {quote && quote._none &&
      <div className="edge" style={{ paddingBottom: 32 }}>
          <div style={{ padding: "16px 22px", border: "1px solid var(--solo-black)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
            <div style={{ fontFamily: "var(--solo-font-mono)", fontSize: 13 }}>
              <b>{postcode}</b> isn't in our launch zone yet. Try <b>3350</b> (Ballarat), <b>2010</b> (Sydney), or <b>5152</b> (Adelaide) for the indicative price.
            </div>
            <button className="btn btn-ghost btn-sm" onClick={onClear}>Try again</button>
          </div>
        </div>
      }
      <PromiseStrip />
      <HowItWorks />
      <WhatYouGet quote={safeQuote} />
      <InstallerCard />
      {tweaks.sunPrint !== "none" && <SunPrintExplainer quote={safeQuote} />}
      <PricingTransparency quote={safeQuote} />
      <Versus />
      <FAQ />
      <Closer />
      <Footer />
    </div>);

}

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