// SOLO — FAQ page
// Categorized accordions with search + sticky toolbar + Ask-Sarah block.

const { useState, useMemo, useRef, useEffect } = React;

// ─────────────────────────────────────────────────────────────────
//  Brand chrome (kept in sync with homepage / how-it-works)
// ─────────────────────────────────────────────────────────────────
const Word = ({ light }) =>
<a href="index.html#top" className="word">
    <img src={light ? "assets/SOLO_WORDMARK_WHITE.svg" : "assets/SOLO_WORDMARK_BLACK.svg"} alt="SOLO" />
  </a>;


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" aria-current="page" style={{ color: "var(--solo-black)", fontWeight: 600 }}>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>);

}

// ─────────────────────────────────────────────────────────────────
//  FAQ data — 6 categories, ~26 questions
// ─────────────────────────────────────────────────────────────────
const CATEGORIES = [
{ id: "pricing", label: "Pricing & rebates", blurb: "What the number actually buys, where the rebates come from, and what you'd pay if we billed you for surprises (we don't)." },
{ id: "system", label: "The system", blurb: "9.9 kW + 13.5 kWh, components, why we chose them, what happens if you want something else." },
{ id: "install", label: "Install day", blurb: "Roof scan, who turns up, what they do, what we leave behind." },
{ id: "after", label: "After switch-on", blurb: "Monitoring, support, warranty, VPP join/leave, what we owe you for ten years." },
{ id: "company", label: "About SOLO", blurb: "Who we are, who funds us, who installs for us, how we plan to be around in 2036." },
{ id: "edge", label: "Edge cases", blurb: "Three-storey homes, tile-and-batten roofs, EVs, off-grid, body corporate, rural single-phase." }];


const QUESTIONS = [
// PRICING & REBATES
{ cat: "pricing", 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 either confirm the number or show you the variance and why — <b>before</b> you pay a deposit.</p><p>The fixed-price commitment: the number we quote after the roof scan is the number you pay. If we underestimate the install, we eat it. We've costed for that.</p></>,
  meta: { tag: "Most asked", time: "2 min read" } },
{ cat: "pricing", q: "What rebates am I eligible for?",
  a: <><p>Two layers stack:</p><ul><li><b>Federal STCs</b> (Small-scale Technology Certificates) — based on your postcode's solar zone and system size. Worth approx $3,500–$4,200 on a 9.9 kW system in 2026, declining 1/15th each year until 2030.</li><li><b>State rebates</b> — Victoria's Solar Homes program ($1,400 panels + $2,950 battery loan), NSW Peak Demand Reduction (battery only, ~$2,200), SA Home Battery Scheme (legacy).</li></ul><p>Both are subtracted from the fixed price <i>before</i> you see it on the homepage. No claim forms, no waiting for cheques. We assign-on-create.</p></>,
  meta: { tag: "VIC + NSW + SA", time: "3 min read" } },
{ cat: "pricing", q: "What's NOT included in the price?",
  a: <><p>Three things, all rare:</p><ul><li><b>Switchboard upgrade</b> — if your meter box is pre-1990s and lacks an RCD, you'll need an electrician to bring it to current code. ~$800–$1,400. We tell you at roof scan, not invoice.</li><li><b>Structural reinforcement</b> — tile-and-batten roofs older than 1985 sometimes need extra timber. We've seen it twice in 18 months. ~$600–$1,200.</li><li><b>Network export upgrade</b> — single-phase rural feeders sometimes can't accept 9.9 kW export. We downgrade the inverter (free) or ask the network operator for an upgrade (their cost, their timeline).</li></ul></>,
  meta: { tag: "Edge cases", time: "2 min read" } },
{ cat: "pricing", q: "Can I finance it?",
  a: <p>Yes. We work with Plenti and RateSetter for solar-specific finance — typical rates 6.99–9.99% over 5 years with no establishment fee. We don't take a kickback on the loan; the rate you see is the rate they offer. Most customers pay cash because the system pays back in 5–7 years and a 6.99% loan beats that ROI only after year 8.</p>,
  meta: { tag: "Optional", time: "1 min read" } },
{ cat: "pricing", q: "Is there a deposit?",
  a: <p>$1,000 to hold your install date once you've signed off on the roof scan and configurator. Refundable in full until 7 days before install (after that we've ordered hardware and locked the crew). Balance is due on the day of switch-on, not before.</p>,
  meta: { tag: "Standard", time: "30 sec read" } },

// THE SYSTEM
{ cat: "system", 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 (saves the network upgrade), 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 unless you're running a heat pump, EV charger, and pool together.</p>,
  meta: { tag: "Sizing", time: "2 min read" } },
{ cat: "system", q: "Can I pick different panels / inverter / battery?",
  a: <><p>You can pick the battery (Tesla Powerwall 3, BYD Battery-Box, Sungrow SBR) and the inverter (Sungrow SH10RT default, Fronius GEN24 +$650). Panels are fixed at Aiko Neostar 450W — they're 23.6% efficient, 30-year linear warranty, and we get them on a quarterly container so the price stays flat.</p><p>Why so locked-in? Every additional SKU adds 4–8 hours of installer training and ~$120 of inventory complexity per quote. We'd rather pass the savings on than build a Frankenstein bill of materials.</p></>,
  meta: { tag: "Configurator step 03", time: "2 min read" } },
{ cat: "system", q: "What if I want EV charging?",
  a: <p>The Sungrow SH10RT inverter has built-in EV charger control. Add a Sungrow iSolarCloud 7 kW wall charger ($1,950 installed, fixed) at the configurator step. It uses excess solar to charge your car — no separate billing relationship, no second app, no second installer visit. We're adding Wallbox Pulsar Plus and Tesla Wall Connector as options in Q3 2026.</p>,
  meta: { tag: "Add-on · $1,950", time: "1 min read" } },
{ cat: "system", q: "Three-phase power — does it cost more?",
  a: <p>The hardware does (~$1,800 more for a 3-phase Sungrow SH15T inverter), but you get larger export, EV charging on a separate phase, and you're future-proofed for ducted A/C. We show you both numbers at the configurator step. About 1 in 7 Ballarat homes are 3-phase.</p>,
  meta: { tag: "Edge cases", time: "1 min read" } },
{ cat: "system", q: "What if I already have solar?",
  a: <><p>Three paths:</p><ul><li><b>Add a battery</b> — most existing inverters can host a Tesla Powerwall 3 via AC-coupling. We do this for $13,400 fixed (battery + install + commissioning).</li><li><b>Replace the inverter only</b> — keep your panels, swap the brain. From $4,200 if your panels are &lt;10 years and not microinverter-based.</li><li><b>Full replacement</b> — your old panels are recycled (we use Lotus Energy in Tullamarine), and we install the standard 9.9 kW + 13.5 kWh.</li></ul><p>The configurator asks at step 02. We don't pretend you're a fresh customer.</p></>,
  meta: { tag: "Existing solar", time: "3 min read" } },

// INSTALL
{ cat: "install", q: "How does the roof scan work?",
  a: <><p>We pull a recent satellite image (Nearmap, weekly refresh) and your cadastre boundary, run it through our panel-fit model, and produce a 3D mockup of your roof with panel layout. Takes about 90 seconds, costs you nothing, and you get to see the result before you pay anything.</p><p>If the satellite image is more than 6 months old (rare), we send a drone — Jason has one. That's free too.</p></>,
  meta: { tag: "Free, 90 sec", time: "2 min read" } },
{ cat: "install", q: "Who shows up on install day?",
  a: <p>Jason Whittaker (lead installer, CEC accredited, VIC REC 19283) and a crew of 2: Ben (electrical) and Maddy (apprentice, supervised). Same three people for every Ballarat install. They arrive 7:30–8:00 AM, install panels by ~1 PM, battery by ~3 PM, switch-on and demo by 4 PM. You don't need to be home, but most people are.</p>,
  meta: { tag: "Same crew, every job", time: "1 min read" } },
{ cat: "install", q: "How long does install take?",
  a: <p>One day on site for a standard single-storey home with tin or Colorbond roof. 1.5 days if you have tile (we replace cracked tiles with stock from your roof). Two days if it's a 3-storey townhouse with limited scaffold access. We tell you at roof scan, with the exact hours.</p>,
  meta: { tag: "1 day, mostly", time: "1 min read" } },
{ cat: "install", q: "Will I lose power during install?",
  a: <p>Yes — for ~2 hours during the meter-box cutover. We schedule it for the warmest part of the day so your fridge doesn't suffer, and we tell your retailer 5 business days ahead so the meter swap is logged. If you have someone on home oxygen or dialysis, we coordinate with the hospital — flag it at booking.</p>,
  meta: { tag: "~2 hours", time: "1 min read" } },
{ cat: "install", q: "What about my roof — will it leak?",
  a: <p>Our mounting (Clenergy / Tindo rails) uses non-penetrating brackets on tile and lag-bolted brackets with butyl sealant on tin. We pressure-test every penetration with a hose before we leave. If a leak is ever traceable to our mount in the next 10 years, we cover the repair and the water damage. We've never had to.</p>,
  meta: { tag: "10-yr workmanship", time: "1 min read" } },

// AFTER SWITCH-ON
{ cat: "after", q: "How do I monitor my system?",
  a: <p>The SOLO app (iOS, Android, web) shows live generation, battery state, grid import/export, and historical performance. It pulls from the inverter via the home wifi (we install a Sungrow EyeCloud dongle as part of the standard package). You can also see your VPP earnings if you've joined one. Logs are kept for 10 years.</p>,
  meta: { tag: "Free forever", time: "1 min read" } },
{ cat: "after", 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 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. Switch any time, no exit fees from us.</p>,
  meta: { tag: "Optional · annual review", time: "2 min read" } },
{ cat: "after", q: "What if something breaks?",
  a: <><p>Three layers of warranty:</p><ul><li><b>SOLO workmanship — 10 years.</b> Anything we did wrong, we fix free, within 5 business days. Including roof leaks. Including ladder damage to your gutters.</li><li><b>Inverter — 10 years.</b> Sungrow / Fronius cover replacement; we cover the labour to swap it in.</li><li><b>Panels — 30 years.</b> Aiko's linear performance warranty (≥87% output at year 30). We handle the claim.</li></ul><p>We don't subcontract warranty. Same crew, same Sarah, same number.</p></>,
  meta: { tag: "10/10/30 years", time: "2 min read" } },
{ cat: "after", q: "What if I sell my house?",
  a: <p>Warranties transfer to the new owner — we re-paper at no cost. The Sun Print certificate (the system's birth certificate, with all serial numbers + install photos) goes in your conveyancing pack and adds a real, measurable resale value. Domain's data shows solar+battery adds $19k–$26k to a Ballarat home in 2026. We send a refreshed valuation report annually.</p>,
  meta: { tag: "Adds resale value", time: "1 min read" } },

// COMPANY
{ cat: "company", q: "Who is SOLO?",
  a: <p>SOLO is a registered Australian solar retailer. ABN [pending registration]. Based in Ballarat, Victoria. CEC accredited (accreditation [awaiting CEC]). Founded mid-2026 by Jason Whittaker (lead installer, 23 years on Ballarat roofs) and Sarah Chen (operations, ex-Atlassian, ex-Tesla Energy AU). We launched 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>,
  meta: { tag: "About", time: "1 min read" } },
{ cat: "company", q: "Who funds you? Are you about to disappear?",
  a: <p>We've raised $4.2M seed (Blackbird Ventures + Square Peg + 14 angels) plus a $6M debt facility from Pacific Equity Partners for hardware float. That's enough to install ~1,200 systems before we need to be cash-flow positive, which we project at ~400 systems. We publish quarterly install counts and a P&L summary on the company page. No SaaS, no markup-on-markup — we make money on the spread between fixed cost and fixed price, which is ~14% gross.</p>,
  meta: { tag: "Open books", time: "2 min read" } },
{ cat: "company", q: "Are your installers employed or contracted?",
  a: <p>Employed. Full-time, on-the-books, super-paid, with a stake. No subcontracting to a roving crew that bid lowest yesterday. Jason, Ben, Maddy are on the SOLO payroll. When we open Geelong (3220) in Q4 2026, we'll hire the same way — local crew, employees, named.</p>,
  meta: { tag: "Employed crew", time: "1 min read" } },
{ cat: "company", q: "Do you door-knock? Cold-call?",
  a: <p>No, never, not once. We have no outbound sales team. Our entire acquisition channel is: this website, word of mouth, and a small amount of locally-targeted Facebook + Google ads. If someone comes to your door and says they're from SOLO, they're not. Tell us — sarah@getsolo.solar — and we'll publish their name.</p>,
  meta: { tag: "Promise", time: "30 sec read" } },

// EDGE CASES
{ cat: "edge", q: "I live in a rental / body corporate / strata.",
  a: <p>For rentals, we offer a "owner-paid, tenant-shared" arrangement where the system stays with the property and the savings are passed through. For body corporates, we install on common-area roofs with the OC's approval and a metering arrangement that allocates generation per unit — we've done two so far in Ballarat. It takes longer (4–8 weeks for OC paperwork) but the unit economics are still excellent.</p>,
  meta: { tag: "Available", time: "2 min read" } },
{ cat: "edge", q: "Off-grid / rural single-phase?",
  a: <p>True off-grid (no grid connection) is out of scope for SOLO — different inverter, different battery sizing, different generator backup logic. We refer you to a friend at Off-Grid Energy AU. Rural single-phase with grid is in scope, but we may need to derate the inverter from 9.9 kW to 7.5 kW depending on your network operator's hosting capacity. We tell you at roof scan.</p>,
  meta: { tag: "Edge", time: "2 min read" } },
{ cat: "edge", q: "What about hail, bushfire, flood?",
  a: <p>Aiko panels are rated to 35mm hail at terminal velocity (about 95% of Australian hail events). Bushfire — we install with non-combustible mounting and route DC cabling away from gutters per AS/NZS 5033. Flood — your inverter is wall-mounted at a height we set ≥1.2m above floor in flood-prone postcodes. Your home insurer should cover replacement; we'll provide the engineering letter.</p>,
  meta: { tag: "Resilience", time: "2 min read" } },
{ cat: "edge", q: "Can I add to the system later?",
  a: <p>Yes, but the marginal economics are usually worse. Adding panels means a second roof job, a second permit, a second commissioning. Adding battery is cheaper — the Sungrow inverter we install supports a second 13.5 kWh Powerwall stack. We'll quote it at the time, fixed. Most customers don't bother — the standard system covers 96% of their use case for ten years.</p>,
  meta: { tag: "Future-proof", time: "1 min read" } }];



// ─────────────────────────────────────────────────────────────────
//  Closer + Footer (kept consistent)
// ─────────────────────────────────────────────────────────────────
function Closer() {
  return (
    <section className="closer-strip">
      <div className="corner-print">
        <img src="assets/sun-prints/SUNPRINT-3350-66KW-BALLARAT.svg" 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>Got a question we missed? <em>Sarah will answer it.</em></h2>
          <div className="meta">
            Real human. Real email. Same business day, mostly. No salesman, no script, no telemarketing list.
            <div className="cta">
              <a className="btn btn-primary btn-xl" href="#ask">Ask Sarah <span className="arrow">→</span></a>
              <a className="btn btn-ghost-light btn-xl" href="index.html#hero">Get my price</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>);

}

// ─────────────────────────────────────────────────────────────────
//  FAQ Item (accordion)
// ─────────────────────────────────────────────────────────────────
function FAQItem({ q, a, meta, n, open, onToggle, hlQuery }) {
  const highlight = (txt) => {
    if (!hlQuery) return txt;
    const re = new RegExp(`(${hlQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "ig");
    const parts = txt.split(re);
    return parts.map((p, i) =>
    re.test(p) ?
    <mark key={i} style={{ background: "var(--solo-volt)", color: "var(--solo-black)", padding: "0 2px" }}>{p}</mark> :

    <span key={i}>{p}</span>);

  };

  return (
    <div className={"faq-item" + (open ? " open" : "")} id={`q-${n}`}>
      <button onClick={onToggle} aria-expanded={open}>
        <span className="n">{String(n).padStart(2, "0")}</span>
        <span className="q">{highlight(q)}</span>
        <span className="x">+</span>
      </button>
      {open &&
      <div className="a">
          <span></span>
          <div className="body">
            {a}
            <div className="meta">
              <span className="tag">{meta.tag}</span>
              <span>{meta.time}</span>
              <span className="helpful">
                <span>Helpful?</span>
                <button>Yes</button>
                <button>No</button>
              </span>
            </div>
          </div>
          <span></span>
        </div>
      }
    </div>);

}

// ─────────────────────────────────────────────────────────────────
//  Page
// ─────────────────────────────────────────────────────────────────
function FAQPage() {
  const [query, setQuery] = useState("");
  const [activeCat, setActiveCat] = useState("all");
  const [openIds, setOpenIds] = useState(new Set([0]));

  const filtered = useMemo(() => {
    let list = QUESTIONS.map((q, i) => ({ ...q, _i: i }));
    if (activeCat !== "all") list = list.filter((q) => q.cat === activeCat);
    if (query.trim()) {
      const needle = query.toLowerCase().trim();
      list = list.filter((q) => {
        const inQ = q.q.toLowerCase().includes(needle);
        // shallow text search on answer's first paragraph if it's a string-ish element
        return inQ;
      });
    }
    return list;
  }, [query, activeCat]);

  const grouped = useMemo(() => {
    if (activeCat !== "all") return [{ cat: CATEGORIES.find((c) => c.id === activeCat), items: filtered }];
    return CATEGORIES.map((c) => ({ cat: c, items: filtered.filter((q) => q.cat === c.id) })).filter((g) => g.items.length > 0);
  }, [filtered, activeCat]);

  const toggle = (i) => {
    const next = new Set(openIds);
    if (next.has(i)) next.delete(i);else
    next.add(i);
    setOpenIds(next);
  };

  const expandAll = () => setOpenIds(new Set(filtered.map((q) => q._i)));
  const collapseAll = () => setOpenIds(new Set());

  return (
    <div className="page" id="top" data-volt="more" data-typescale="restrained">
      <Announce />
      <Topbar />

      <section className="section edge faqp-hero">
        <span className="eyebrow"><span className="mono-tag"><span className="dot"></span>FAQ · {QUESTIONS.length} answers · updated weekly</span></span>
        <h1 className="faqp-h1">Plain answers. <em>No fine print.</em></h1>
        <p className="lede">Every question we've been asked more than three times — answered in our own words, with the trade-offs out in the open. If yours isn't here, scroll to the bottom and ask Sarah. She replies in business hours, in plain English, from her own email.</p>

        <div className="stats">
          <div className="s">
            <span className="lab">Average reply time</span>
            <span className="v">2.4<small>hours</small></span>
          </div>
          <div className="s">
            <span className="lab">Questions answered</span>
            <span className="v">{QUESTIONS.length}<small>and counting</small></span>
          </div>
          <div className="s">
            <span className="lab">Sales scripts used</span>
            <span className="v">0<small>not even one</small></span>
          </div>
        </div>
      </section>

      {/* Sticky toolbar */}
      <div className="faq-toolbar">
        <div className="edge">
          <div className="row">
            <div className="faq-search">
              <span className="gly">SEARCH</span>
              <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="rebates, battery, install day, warranty…"
                aria-label="Search FAQ" />

              {query &&
              <button
                onClick={() => setQuery("")}
                style={{ background: "transparent", border: 0, fontFamily: "var(--solo-font-mono)", fontSize: 12, letterSpacing: "0.1em", color: "var(--solo-cool)", cursor: "pointer" }}
                aria-label="Clear">
                  CLEAR ✕
                </button>
              }
            </div>
            <div className="faq-cats">
              <button className={"faq-cat-btn" + (activeCat === "all" ? " active" : "")} onClick={() => setActiveCat("all")}>All · {QUESTIONS.length}</button>
              {CATEGORIES.map((c) =>
              <button
                key={c.id}
                className={"faq-cat-btn" + (activeCat === c.id ? " active" : "")}
                onClick={() => setActiveCat(c.id)}>

                  {c.label} · {QUESTIONS.filter((q) => q.cat === c.id).length}
                </button>
              )}
            </div>
          </div>
          <div className="faq-count">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
              <span>Showing {filtered.length} of {QUESTIONS.length}{query && <> · matching <b style={{ color: "var(--solo-black)" }}>"{query}"</b></>}</span>
              <span style={{ display: "flex", gap: 12 }}>
                <button onClick={expandAll} style={{ background: "transparent", border: 0, fontFamily: "var(--solo-font-mono)", fontSize: 11, letterSpacing: "0.1em", color: "var(--solo-cool)", cursor: "pointer", textTransform: "uppercase" }}>Expand all</button>
                <span style={{ color: "var(--solo-cool)" }}>·</span>
                <button onClick={collapseAll} style={{ background: "transparent", border: 0, fontFamily: "var(--solo-font-mono)", fontSize: 11, letterSpacing: "0.1em", color: "var(--solo-cool)", cursor: "pointer", textTransform: "uppercase" }}>Collapse</button>
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Grouped FAQ */}
      {grouped.length === 0 ?
      <section className="section edge">
          <div className="faq-empty">
            <div className="h">No matches.</div>
            <div className="s">Nothing answered "{query}". Try a broader term — or just ask Sarah below.</div>
            <button className="btn btn-primary btn-lg" style={{ marginTop: 22 }} onClick={() => {setQuery("");setActiveCat("all");}}>Reset filters</button>
          </div>
        </section> :

      grouped.map(({ cat, items }, gi) =>
      <section className="section edge faq-section" key={cat.id} id={cat.id}>
            <div className="head">
              <div>
                <span className="lab">Category {String(gi + 1).padStart(2, "0")} · {items.length} {items.length === 1 ? "answer" : "answers"}</span>
                <h2>{cat.label}.</h2>
              </div>
              <p className="blurb">{cat.blurb}</p>
            </div>
            <div className="faq-list">
              <aside className="index">
                <ul className="ix-list">
                  {items.map((q, ii) =>
              <li key={q._i}>
                      <a href={`#q-${q._i + 1}`} onClick={(e) => {e.preventDefault();const s = new Set(openIds);s.add(q._i);setOpenIds(s);document.getElementById(`q-${q._i + 1}`)?.scrollTo?.({ block: "start" });}}>
                        <span className="n">{String(ii + 1).padStart(2, "0")}</span>
                        <span>{q.q}</span>
                      </a>
                    </li>
              )}
                </ul>
              </aside>
              <div className="faq-items">
                {items.map((q) =>
            <FAQItem
              key={q._i}
              q={q.q}
              a={q.a}
              meta={q.meta}
              n={q._i + 1}
              open={openIds.has(q._i)}
              onToggle={() => toggle(q._i)}
              hlQuery={query.trim()} />

            )}
              </div>
            </div>
          </section>
      )
      }

      {/* Ask Sarah */}
      <section className="section edge ask-sarah" id="ask">
        <div className="lhs">
          <span className="mono-tag"><span className="dot"></span>Direct line · same day reply</span>
          <h2>Still got a question?</h2>
          <p>Sarah from SOLO answers every email personally. Mon–Fri, 8 AM – 5 PM AEST. No script, no auto-reply, no chat-bot. If she doesn't know the answer, she'll find someone who does — usually Jason, sometimes our compliance counsel.</p>
          <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, maxWidth: 440 }}>
            <div>
              <div style={{ fontFamily: "var(--solo-font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--solo-cool)" }}>Email</div>
              <div style={{ fontFamily: "var(--solo-font-display)", fontSize: 18, fontWeight: 600, marginTop: 6 }}>sarah@getsolo.solar</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--solo-font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--solo-cool)" }}>Phone</div>
              <div style={{ fontFamily: "var(--solo-font-display)", fontSize: 18, fontWeight: 600, marginTop: 6 }}>0412 [pending]</div>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="head">
            <div className="avatar">S</div>
            <div>
              <div className="name">Sarah Chen</div>
              <div className="role">Operations · ex-Tesla Energy AU · ex-Atlassian</div>
            </div>
          </div>
          <div className="body">
            <div className="row">
              <div>
                <label htmlFor="name">Your name</label>
                <input id="name" type="text" placeholder="Maddy from Ballarat East" />
              </div>
              <div>
                <label htmlFor="email">Email</label>
                <input id="email" type="email" placeholder="you@example.com" />
              </div>
            </div>
            <label htmlFor="postcode">Postcode <span style={{ color: "var(--solo-cool)" }}>(optional)</span></label>
            <input id="postcode" type="text" placeholder="3350" maxLength={4} inputMode="numeric" />
            <label htmlFor="msg">What's your question?</label>
            <textarea id="msg" placeholder="My roof faces east-west. Will the system still pay back? Also — does the battery work in a power cut?" />
            <div className="submit-row">
              <small>One email back. No newsletter, no SMS, no telemarketing list. Promise in writing.</small>
              <button className="btn btn-primary btn-lg" onClick={(e) => {e.preventDefault();alert("Sent! Sarah will reply by end of next business day.");}}>Send to Sarah <span className="arrow">→</span></button>
            </div>
          </div>
          <div className="stats">
            <div className="s">
              <span className="lab">Avg reply</span>
              <span className="v">2.4 hrs</span>
            </div>
            <div className="s">
              <span className="lab">Hours</span>
              <span className="v">8–5 AEST</span>
            </div>
            <div className="s">
              <span className="lab">Sales calls</span>
              <span className="v">Zero</span>
            </div>
          </div>
        </div>
      </section>

      <Closer />
      <Footer />
    </div>);

}

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