// SOLO — How it works
// Standalone page. Reuses styles.css tokens + components.

const { useState } = React;

const STEPS = [
{
  n: "01",
  t: "00:00",
  h: "Enter your postcode.",
  b: "Type four digits. We pull your roof shape, panel orientation potential, sun hours, and tariff zone in under a second. No email. No phone call. No sales rep waiting to dial you.",
  detail: [
  "Address-level roof scan from public-domain LIDAR + nearest-pyranometer irradiance",
  "Sun Print rendered live — the same one your installer will work from",
  "If we don't service your postcode, we say so on the spot"],

  what: { l: "What you get", v: "An indicative number. Not a quote, not a lead." },
  time: { l: "Takes", v: "≈10 seconds" }
},
{
  n: "02",
  t: "00:02",
  h: "Tune the system to your roof.",
  b: "We default to 9.9 kW + 13.5 kWh because that's the size that extracts the most rebate per dollar in most postcodes. You can scale up, change inverter, or downsize. Every choice shows the dollar delta — not vibes.",
  detail: [
  "Panel: 22× Aiko Neostar (default) or 26× for larger roofs",
  "Inverter: Sungrow SH10RT default · Fronius / SolarEdge optional",
  "Battery: Tesla Powerwall 3 default · Sungrow SBR · or none"],

  what: { l: "What you get", v: "A line-itemised, locked, fixed price." },
  time: { l: "Takes", v: "5–10 minutes" }
},
{
  n: "03",
  t: "00:12",
  h: "Pick your battery + VPP.",
  b: "Your battery, your choice. Your VPP, your choice. We show what each combination earns over 7 years on real Victorian feed-in tariffs — not the brochure number a door-knocker quotes.",
  detail: [
  "Amber Electric — pass-through wholesale, biggest upside, biggest variance",
  "OVO Power Move — flat per-kWh credit, simpler, lower ceiling",
  "Tesla VPP — Tesla owners only, 5-year locked terms",
  "Or none — your battery just runs your house, no grid trading"],

  what: { l: "What you get", v: "A 7-year payback projection per option." },
  time: { l: "Takes", v: "5 minutes" }
},
{
  n: "04",
  t: "00:18",
  h: "Pay deposit, pick a date.",
  b: "$1,000 holds your install date on a real calendar. Balance after switch-on, not before. Your installer is named — Ben Whittaker for Ballarat 3350, Tomas Ng for Geelong 3220 — and you can call them.",
  detail: [
  "Real calendar — pick from confirmed slots in your installer's diary",
  "Deposit refundable up to 7 days before install",
  "Balance invoiced after meter reset and remote-monitoring confirmed working"],

  what: { l: "What you get", v: "A locked install date and a phone number." },
  time: { l: "Takes", v: "2 minutes" }
},
{
  n: "05",
  t: "DAY OF",
  h: "Install + switch-on.",
  b: "Your crew arrives at 7:30 AM. Panels up by lunch, battery and inverter wired in the afternoon, meter cleared by your retailer in real time. We tarp the garden, vacuum the roof cavity, and you watch the first Volt pulse from the SOLO app on your phone before the truck leaves.",
  detail: [
  "Crew of 3 — lead installer + 2 trades, all named on your dashboard",
  "On site 7:30 AM – 4:00 PM (single phase) · 7:30 AM – 6:00 PM (3-phase)",
  "STC paperwork lodged the same day — rebate already deducted from your fixed price",
  "10-year SOLO workmanship warranty, backed by the actual installer"],

  what: { l: "What you get", v: "A working solar + battery system, monitored." },
  time: { l: "Takes", v: "1 day on site" }
}];


const FAQ = [
{
  q: "Why does SOLO work in fixed prices instead of quotes?",
  a: "Because every quote you've ever received from a door-knocker is engineered to look low and trend up. Fixed prices are public, posted, identical for the same system in the same postcode, and survive site visits. If your roof has something we didn't see in the LIDAR scan, we tell you and you can walk away — deposit refunded."
},
{
  q: "Is the indicative price the same as the final price?",
  a: "Yes — within a small range that the roof scan confirms. Once we do the on-site check at install (or earlier on request), we either confirm the indicative number or show you exactly what changed and why. No 'while we're here' upsells."
},
{
  q: "What if I don't want a battery?",
  a: "You can deselect it at step 02. Solar-only systems are also fixed-price. We won't pretend a battery pays back faster than it does — Victoria currently sits around a 7-year payback at typical evening usage."
},
{
  q: "Who actually installs it?",
  a: "A named, CEC-accredited installer who lives in your region. Not a sub-contractor of a parent company. You can see their face, their licence number, and their first install date before you pay."
},
{
  q: "What happens if something breaks?",
  a: "You call your installer directly — phone number on your dashboard. 10-year SOLO workmanship warranty + manufacturer warranties for panels (25 years), inverter (10 years), battery (10 years). We don't route you through a call centre."
}];


// ─────────────────────────────────────────────────────────────────
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" style={{ borderBottom: "1.5px solid var(--solo-black)", paddingBottom: 4 }}>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="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" style={{ paddingBlock: "clamp(64px, 8vw, 120px) clamp(48px, 6vw, 80px)" }}>
      <div className="hiw-hero">
        <div className="hiw-hero-meta">
          <span className="eyebrow">How it works · 5 steps</span>
          <div style={{ display: "flex", gap: 10, marginTop: 18, flexWrap: "wrap" }}>
            <span className="mono-tag"><span className="dot"></span>Postcode → switch-on</span>
            <span className="mono-tag"><span className="dot black"></span>≈ 14 days end-to-end</span>
          </div>
        </div>
        <h1 className="hiw-h1">
          From four <br />digits to your <br />first sun pulse <em>—</em><br />in a fortnight.
        </h1>
        <p className="hiw-lede">
          No phone calls, no in-home consultation, no "specialist will call you back". Five steps, the same five for every postcode. Here's exactly what happens, in order, and what we don't do at each one.
        </p>
      </div>

      <div className="hiw-strip">
        {STEPS.map((s) =>
        <a key={s.n} href={`#step-${s.n}`} className="hiw-strip-item">
            <span className="n">{s.n}</span>
            <span className="t">{s.t}</span>
            <span className="h">{s.h.replace(/\.$/, "")}</span>
          </a>
        )}
      </div>
    </section>);

}

function StepBlock({ s, i }) {
  const isAlt = i % 2 === 1;
  return (
    <section className={`hiw-step edge ${isAlt ? "alt" : ""}`} id={`step-${s.n}`}>
      <div className="hiw-step-grid">
        <div className="hiw-step-marker">
          <div className="big-num">{s.n}</div>
          <div className="t-stamp">{s.t}</div>
        </div>
        <div className="hiw-step-body">
          <h2>{s.h}</h2>
          <p className="lede">{s.b}</p>
          <ul className="bullets">
            {s.detail.map((d, j) =>
            <li key={j}><span className="bullet-mark">→</span>{d}</li>
            )}
          </ul>
        </div>
        <div className="hiw-step-meta">
          <div className="m">
            <div className="lab">{s.what.l}</div>
            <div className="val">{s.what.v}</div>
          </div>
          <div className="m">
            <div className="lab">{s.time.l}</div>
            <div className="val val-mono">{s.time.v}</div>
          </div>
          <div className="m last">
            <div className="lab">Where it sits</div>
            <div className="val val-progress">
              <div className="progress-bar">
                {STEPS.map((_, k) =>
                <div key={k} className={`seg ${k <= i ? "filled" : ""}`}></div>
                )}
              </div>
              <span className="step-of">Step {s.n} / 05</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function NotDoing() {
  const items = [
  { not: "Send someone to your house", instead: "We use the same LIDAR scan an insurer uses. If we need to verify something, we ask once, in the configurator." },
  { not: "Call you back later", instead: "Every price is posted, real, and locked the moment you see it. No 'specialist will be in touch'." },
  { not: "Bundle a 'free' quote with a hard close", instead: "There's no sales meeting. There is no sales meeting. Read step 04: deposit holds your slot, balance after switch-on." },
  { not: "Sub-contract the install to whoever's free", instead: "Your installer is named in step 04, the day you book. Same person on your roof, same person on your phone if it breaks." },
  { not: "Push the biggest system you'll fit", instead: "Step 02 defaults to the system size that extracts the most rebate per dollar — usually smaller than the door-knocker number." }];

  return (
    <section className="section edge" style={{ paddingBlock: "clamp(96px, 11vw, 160px)" }}>
      <div className="section-head">
        <h2>What we don't do.</h2>
        <div className="meta">
          <p>Most of the solar industry runs on the things on the left. We don't. Here's what each of our installers signs off on at onboarding.</p>
        </div>
      </div>
      <div className="not-doing">
        <div className="nd-head">
          <div className="nd-h-not">We don't</div>
          <div className="nd-h-do">What happens instead</div>
        </div>
        {items.map((it, i) =>
        <div key={i} className="nd-row">
            <div className="nd-not">
              <span className="nd-x">✕</span>
              <span>{it.not}</span>
            </div>
            <div className="nd-do">{it.instead}</div>
          </div>
        )}
      </div>
    </section>);

}

function AfterInstall() {
  return (
    <section className="section edge" style={{ paddingBlock: "clamp(96px, 11vw, 160px)" }}>
      <div className="section-head">
        <h2>After switch-on.</h2>
        <div className="meta">
          <p>Most solar companies are loudest before you sign and quietest after. SOLO inverts that. The system goes onto your dashboard the day it's switched on and stays there for ten years.</p>
        </div>
      </div>
      <div className="after-grid">
        <div className="after-card">
          <div className="lab">Monitoring</div>
          <div className="h">Live in the SOLO app, day one.</div>
          <p>Generation, consumption, battery state-of-charge, VPP earnings, and — when it matters — fault notifications, all on your phone. No third-party app, no separate login.</p>
          <div className="meta-row">
            <span className="mono-tag"><span className="dot"></span>iOS · Android · Web</span>
          </div>
        </div>
        <div className="after-card">
          <div className="lab">Support</div>
          <div className="h">Your installer's number on your dashboard.</div>
          <p>Not a call centre. Not an offshore queue. The person who fitted your roof is the person who picks up — within 4 business hours during the warranty period.</p>
          <div className="meta-row">
            <span className="mono-tag"><span className="dot black"></span>10-yr workmanship warranty</span>
          </div>
        </div>
        <div className="after-card">
          <div className="lab">Warranty</div>
          <div className="h">Real cover, not the legal-page kind.</div>
          <ul className="warranty-list">
            <li><span>Panels</span><b>25 years performance</b></li>
            <li><span>Inverter</span><b>10 years parts + labour</b></li>
            <li><span>Battery</span><b>10 years / 70% capacity</b></li>
            <li><span>Workmanship</span><b>10 years SOLO</b></li>
          </ul>
        </div>
      </div>
    </section>);

}

function FAQSection() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section edge" style={{ paddingBlock: "clamp(80px, 10vw, 140px)" }}>
      <div className="faq">
        <div className="lhs">
          <h2>Questions, answered straight.</h2>
          <p>If something here is unclear, our installers should be the ones to clarify it — not a sales rep. Numbers in your dashboard.</p>
          <div className="help">
            <div className="h">Still stuck?</div>
            <div className="s">help@getsolo.solar · we reply same day</div>
          </div>
        </div>
        <div className="list">
          {FAQ.map((f, i) =>
          <div key={i} className={`item ${open === i ? "open" : ""}`}>
              <button onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="n">Q.0{i + 1}</span>
                <span className="q">{f.q}</span>
                <span className="x">+</span>
              </button>
              {open === i &&
            <div className="a">
                  <div></div>
                  <div><p>{f.a}</p></div>
                  <div></div>
                </div>
            }
            </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 }}>Four digits, ten seconds. The number you see is the number you pay. 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="systems.html" className="btn btn-ghost-light btn-lg">See what's in the system</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 />
      {STEPS.map((s, i) => <StepBlock key={s.n} s={s} i={i} />)}
      <NotDoing />
      <AfterInstall />
      <FAQSection />
      <Closer />
      <Footer />
    </div>);

}

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