/* global React */
// Shared components for Solar Installers Manchester landing page.
// Exports to window at the bottom so app.jsx can use them.

const { useState, useEffect, useRef } = React;

/* -------------------------------------------------- Icons */
const Icon = {
  Sun: (p) => (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}>
      <circle cx="12" cy="12" r="4" />
      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
    </svg>
  ),
  HeatPump: (p) => (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}>
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <circle cx="12" cy="12" r="4" />
      <path d="M12 10v4M10 12h4" />
    </svg>
  ),
  Battery: (p) => (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}>
      <rect x="3" y="7" width="16" height="10" rx="2" />
      <path d="M21 10v4" />
      <path d="M7 12h3M12 12h3" />
    </svg>
  ),
  EV: (p) => (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}>
      <path d="M5 17V8a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v9" />
      <rect x="3" y="17" width="15" height="3" rx="1" />
      <path d="M16 10h3l2 3v3a1 1 0 0 1-1 1h-1" />
      <path d="M11 9l-2 3h3l-2 3" />
    </svg>
  ),
  Tick: (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M20 6 9 17l-5-5" />
    </svg>
  ),
  Arrow: (p) => (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  ),
};

/* -------------------------------------------------- TopBar */
function TopBar() {
  return (
    <>
      <div className="finance-ribbon">
        <b>£7,500 BUS Grant</b> · We apply for you <span className="sep">·</span> 0% APR finance on solar <span className="sep">·</span> Free site survey in Greater Manchester
      </div>
      <header className="topbar">
        <div className="topbar-inner">
          <a href="#" className="logo">
            <span className="logo-mark" aria-hidden="true"></span>
            <span className="logo-text">Solar Installers Manchester<small>EST. 2011 · MCS No. 140293</small></span>
          </a>
          <nav className="nav">
            <a href="#services">Solutions</a>
            <a href="#solar-panel">Technology</a>
            <a href="#flow">Live data</a>
            <a href="#cases">Case studies</a>
            <a href="#faq">FAQ</a>
          </nav>
          <div className="topbar-right">
            <span className="mcs-pill">MCS · BUS Approved</span>
            <div className="phone-num">
              <span>24/7 callback</span>
              0161 244 0193
            </div>
          </div>
        </div>
      </header>
    </>
  );
}

/* -------------------------------------------------- Hero stage (model + HUD) */
function ProgressRing({ pct = 76 }) {
  const r = 22, c = 2 * Math.PI * r, off = c * (1 - pct / 100);
  return (
    <svg className="ring-svg" viewBox="0 0 56 56">
      <defs>
        <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#22D3EE" />
          <stop offset="100%" stopColor="#3B82F6" />
        </linearGradient>
      </defs>
      <circle cx="28" cy="28" r={r} stroke="rgba(255,255,255,0.1)" strokeWidth="3" fill="none" />
      <circle
        cx="28" cy="28" r={r}
        stroke="url(#ringGrad)" strokeWidth="3" fill="none"
        strokeLinecap="round"
        strokeDasharray={c}
        strokeDashoffset={off}
        transform="rotate(-90 28 28)"
        style={{ filter: "drop-shadow(0 0 4px rgba(34,211,238,0.8))" }}
      />
    </svg>
  );
}

function HeroStage() {
  return (
    <div className="hero-stage">
      <div className="stage-corner tl"><span className="dot"></span>LIVE · 14:02 BST</div>
      <div className="stage-corner tr">ARRAY · LONGI-410W</div>
      <div className="stage-corner bl">YOUR ROOF · TIMPERLEY</div>
      <div className="stage-corner br">IRRADIANCE · 720 W/m²</div>

      <model-viewer
        class="stage-model"
        src="/demo/modern/assets/solar-panel.glb"
        alt="Solar PV panel"
        camera-controls
        auto-rotate
        auto-rotate-delay="4000"
        rotation-per-second="10deg"
        interaction-prompt="none"
        shadow-intensity="0.6"
        exposure="1.4"
        environment-image="neutral"
        camera-orbit="-25deg 65deg auto"
        field-of-view="35deg"
        touch-action="pan-y"
      ></model-viewer>

      <div className="ring-card" style={{ top: "22%", right: "6%" }}>
        <ProgressRing pct={76} />
        <div>
          <div className="pct">76%</div>
          <span className="pct-label">Self-powered</span>
          <div className="pct-date muted">12-mo avg · 2025</div>
        </div>
      </div>
    </div>
  );
}

/* -------------------------------------------------- Credential rail */
function CredentialRail() {
  const creds = [
    { logo: "/demo/modern/logos/accreditations/mcs.png",             alt: "MCS Certified" },
    { logo: "/demo/modern/logos/reviews/which-trusted-trader.png",   alt: "Which? Trusted Trader" },
    { logo: "/demo/modern/logos/reviews/checkatrade.png",            alt: "Checkatrade 9.8/10" },
    { logo: "/demo/modern/logos/reviews/trustpilot.png",             alt: "Trustpilot 4.9" },
    { logo: "/demo/modern/logos/reviews/google.png",                 alt: "Google Reviews" },
    { text: "BUS Grant Approved" },
  ];
  return (
    <div className="credential-rail">
      {creds.map((c, i) => (
        c.logo ? (
          <img key={i} src={c.logo} alt={c.alt} style={{ height: '28px', width: 'auto', objectFit: 'contain' }} loading="lazy" />
        ) : (
          <span key={i} className="cred-pill">
            <Icon.Tick className="tick" />
            <span><b>{c.text}</b></span>
          </span>
        )
      ))}
      {/* Gas Safe — SVG badge until official PNG is sourced */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }} title="Gas Safe Registered · 914422">
        <svg width="22" height="28" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <rect width="28" height="36" rx="3" fill="#003087"/>
          <rect x="0" y="24" width="28" height="12" rx="3" fill="#FFD700"/>
          <path d="M14 5 C14 5 10 10 10 15 C10 18 11.5 20.5 14 21 C16.5 20.5 18 18 18 15 C18 10 14 5 14 5 Z" fill="#FFD700"/>
          <path d="M14 11 C14 11 12 14 12 16 C12 17.7 12.9 19 14 19.3 C15.1 19 16 17.7 16 16 C16 14 14 11 14 11 Z" fill="#003087"/>
        </svg>
        <div style={{ lineHeight: 1.2 }}>
          <div style={{ fontSize: '8px', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', color: '#1e293b' }}>Gas Safe</div>
          <div style={{ fontSize: '8px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: '#64748b' }}>Registered</div>
        </div>
      </div>

      {/* Divider */}
      <div style={{ width: '1px', height: '28px', background: '#e2e8f0', flexShrink: 0 }} aria-hidden="true" />

      {/* Manufacturer brands */}
      {[
        { src: "/demo/modern/logos/manufacturers/mitsubishi-ecodan.png", alt: "Mitsubishi Ecodan" },
        { src: "/demo/modern/logos/manufacturers/tesla-powerwall.png",   alt: "Tesla Powerwall" },
        { src: "/demo/modern/logos/manufacturers/vaillant.png",          alt: "Vaillant" },
        { src: "/demo/modern/logos/manufacturers/samsung.png",           alt: "Samsung" },
        { src: "/demo/modern/logos/manufacturers/givenergy.png",         alt: "GivEnergy" },
        { src: "/demo/modern/logos/manufacturers/ohme.png",              alt: "Ohme" },
      ].map((m) => (
        <img key={m.alt} src={m.src} alt={m.alt} style={{ height: '24px', width: 'auto', objectFit: 'contain', opacity: 0.8 }} loading="lazy" />
      ))}
    </div>
  );
}

/* -------------------------------------------------- Telemetry ribbon */
function Telemetry({ metrics }) {
  return (
    <section className="telemetry">
      <div className="telemetry-inner">
        {metrics.map((m, i) => (
          <div className="telem-cell" key={i}>
            <span className="label">{m.label}</span>
            <span className="value" dangerouslySetInnerHTML={{ __html: m.value }} />
          </div>
        ))}
      </div>
    </section>
  );
}

/* -------------------------------------------------- Service tiles */
function ServiceTiles() {
  const tiles = [
    {
      accent: "cyan", icon: <Icon.Sun />,
      title: "Solar PV",
      brands: ["/demo/modern/logos/manufacturers/longi.png", "/demo/modern/logos/manufacturers/ja-solar.png", "/demo/modern/logos/manufacturers/panasonic.png"],
      value: "£1,560", unit: "saved/yr",
      outcome: "Avg. 4kWp Manchester roof, south-facing",
      finance: "From £6,950 installed · PPA £0 upfront",
    },
    {
      accent: "amber", icon: <Icon.HeatPump />,
      title: "Air-source Heat Pump",
      brands: ["/demo/modern/logos/manufacturers/mitsubishi-ecodan.png", "/demo/modern/logos/manufacturers/vaillant.png", "/demo/modern/logos/manufacturers/samsung.png"],
      value: "3.4", unit: "COP at 7°C",
      outcome: "4× more energy out than in",
      finance: "From £9,500 · BUS grant £7,500 off",
    },
    {
      accent: "violet", icon: <Icon.Battery />,
      title: "Battery Storage",
      brands: ["/demo/modern/logos/manufacturers/tesla-powerwall.png", "/demo/modern/logos/manufacturers/givenergy.png", "/demo/modern/logos/manufacturers/sunsynk.png"],
      value: "85%", unit: "self-powered",
      outcome: "Store sunshine, run overnight",
      finance: "From £4,200 · 10-yr warranty",
    },
    {
      accent: "green", icon: <Icon.EV />,
      title: "EV Charging",
      brands: ["/demo/modern/logos/manufacturers/ohme.png", "Zappi", "Wallbox"],
      value: "7.4", unit: "kW",
      outcome: "Charge from solar surplus automatically",
      finance: "From £899 · OZEV-approved",
    },
  ];
  return (
    <section className="section-pad container" id="services">
      <div className="section-head">
        <span className="eyebrow">Four services, one roof</span>
        <h2>A complete energy system — designed, installed and monitored by one team.</h2>
        <p>Every tile is a live mini-dashboard. Tap one to see real customer data, installed brand stack, and transparent pricing.</p>
      </div>
      <div className="services-grid">
        {tiles.map((t) => (
          <article key={t.title} className="service-card" data-accent={t.accent}>
            <div className="svc-icon">{t.icon}</div>
            <h3 className="svc-title">{t.title}</h3>
            <div className="svc-brands">
              {Array.isArray(t.brands) ? (
                t.brands.map((b, i) => (
                  <span key={i} style={{display: 'inline-flex', alignItems: 'center', gap: '8px'}}>
                    {b.endsWith('.png') ? (
                      <img src={b} alt="Brand logo" style={{height: '20px', objectFit: 'contain'}} />
                    ) : (
                      <span>{b}</span>
                    )}
                    {i < t.brands.length - 1 && <span style={{opacity: 0.5}}>·</span>}
                  </span>
                ))
              ) : (
                t.brands
              )}
            </div>
            <div className="svc-metric">
              <div className="v">{t.value}<span className="small">{t.unit}</span></div>
              <div className="outcome">{t.outcome}</div>
            </div>
            <div className="svc-finance"><b>{t.finance.split(" · ")[0]}</b> · {t.finance.split(" · ").slice(1).join(" · ")}</div>
            <a href="#callback" className="svc-cta">Run my numbers <Icon.Arrow className="arrow" /></a>
          </article>
        ))}
      </div>
    </section>
  );
}

/* -------------------------------------------------- Heat Pump 3D section */
function SolarPanelSection() {
  return (
    <section className="section-pad container" id="solar-panel">
      <div className="section-head">
        <span className="eyebrow">The hardware · up close</span>
        <h2>Meet your heat pump. Drag to orbit, tap a hotspot for the spec that matters.</h2>
        <p>A Mitsubishi Ecodan-class air-source unit — whisper-quiet, inverter-driven, R32 refrigerant. Click the fan, the compressor, or the refrigerant line to inspect the engineering.</p>
      </div>

      <div className="model-grid">
        <div className="model-stage">
          <model-viewer
            src="/demo/modern/assets/heat-pump.glb"
            alt="Air-source heat pump"
            camera-controls
            auto-rotate
            auto-rotate-delay="4000"
            rotation-per-second="10deg"
            shadow-intensity="0.6"
            exposure="1.4"
            environment-image="neutral"
            camera-orbit="-25deg 70deg auto"
            field-of-view="35deg"
            style={{ width: "100%", height: "100%" }}
          >
            <button className="hotspot" slot="hotspot-fan" data-position="0 0.3 0.4" data-normal="0 0 1">
              <div className="hs-tooltip">
                <div className="t-label">Fan assembly</div>
                <div className="t-value">55 dB at 1m · whisper-quiet</div>
              </div>
            </button>
            <button className="hotspot" slot="hotspot-compressor" data-position="0 0.15 0.2" data-normal="0 0 1">
              <div className="hs-tooltip">
                <div className="t-label">Inverter compressor</div>
                <div className="t-value">Modulates 20–100% · R32 refrigerant</div>
              </div>
            </button>
            <button className="hotspot" slot="hotspot-lines" data-position="0 0.05 0.15" data-normal="0 0 1">
              <div className="hs-tooltip">
                <div className="t-label">Refrigerant lines</div>
                <div className="t-value">Insulated · low-noise routing</div>
              </div>
            </button>
          </model-viewer>
        </div>
        <div className="model-copy">
          <h3>Mitsubishi Ecodan ASHP</h3>
          <p>The UK's most-installed air-source heat pump. Rated to −25°C, maintains COP 3.4 at 7°C ambient, and runs on the same refrigerant as modern car AC units.</p>
          <div className="spec-list">
            <div className="spec-row">
              <span className="spec-label">Heating capacity</span>
              <span className="spec-value">5–16 kW</span>
            </div>
            <div className="spec-row">
              <span className="spec-label">COP @ 7°C</span>
              <span className="spec-value">3.4</span>
            </div>
            <div className="spec-row">
              <span className="spec-label">Noise level</span>
              <span className="spec-value">55 dB @ 1m</span>
            </div>
            <div className="spec-row">
              <span className="spec-label">Warranty</span>
              <span className="spec-value">7 years · 10-yr parts</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------- Energy Flow */
function MiniSpark({ color = "#22D3EE" }) {
  return (
    <svg viewBox="0 0 60 20" width="60" height="20" style={{ opacity: 0.7 }}>
      <polyline points="2,15 8,8 14,12 20,5 26,10 32,6 38,11 44,7 50,13 58,4" stroke={color} strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function EnergyFlow() {
  const data = [
    { time: "00:00", heat: 2.1, home: 1.8, pump: 0.6, grid: 0.2 },
    { time: "04:00", heat: 1.9, home: 1.6, pump: 0.5, grid: 0.1 },
    { time: "08:00", heat: 3.2, home: 2.8, pump: 0.9, grid: 0.3 },
    { time: "12:00", heat: 4.8, home: 4.2, pump: 1.4, grid: 0.5 },
    { time: "16:00", heat: 5.2, home: 4.6, pump: 1.5, grid: 0.6 },
    { time: "20:00", heat: 4.1, home: 3.6, pump: 1.2, grid: 0.4 },
    { time: "24:00", heat: 2.3, home: 2.0, pump: 0.7, grid: 0.2 },
  ];

  return null;
}

/* -------------------------------------------------- Case Studies */
function CaseStudies() {
  const [active, setActive] = useState("All");
  const filters = ["All", "Solar PV", "Heat Pump", "Battery", "EV"];
  const cases = [
    {
      tag: "Solar PV + Battery",
      date: "March 2026",
      spec: "4.2kW + 10kWh",
      loc: "Stockport",
      metric: "18.7 kWh",
      ml: "TODAY'S PRODUCTION",
      c: "cyan",
      quote: "Seeing the profit on the app when the sun is out — that's what sold me.",
      name: "Mr & Mrs Parrish",
      photo: "/demo/modern/assets/case-study-1.png",
    },
    {
      tag: "Heat Pump + Solar",
      date: "February 2026",
      spec: "Ecodan + 5kW PV",
      loc: "Altrincham",
      metric: "COP 3.4",
      ml: "SYSTEM PERFORMANCE",
      c: "amber",
      quote: "The house is warmer in winter, and we're not paying for oil anymore.",
      name: "Nigel P",
      photo: "/demo/modern/assets/case-study-2.png",
    },
    {
      tag: "Battery Storage",
      date: "January 2026",
      spec: "Powerwall 3 + 6kW",
      loc: "Wilmslow",
      metric: "85% CHARGED",
      ml: "BATTERY STATE",
      c: "violet",
      quote: "The battery gives us peace of mind — no more grid anxiety.",
      name: "Sarah & Tom",
      photo: "/demo/modern/assets/case-study-3.png",
    },
  ];

  const shown = active === "All" ? cases : cases.filter(c => c.tag.includes(active));

  return (
    <section className="section-pad container" id="cases">
      <div className="section-head">
        <span className="eyebrow">Real customers · real data</span>
        <h2>200+ Manchester homes run on our systems. Here's a sliver of them.</h2>
        <p>Every case study pairs a live dashboard snapshot with the installation photo it was measured on. Filter by technology.</p>
      </div>

      <div className="case-filters">
        {filters.map(f => (
          <button key={f} className={`case-filter ${active === f ? "active" : ""}`} onClick={() => setActive(f)}>{f}</button>
        ))}
      </div>

      <div className="case-grid">
        {shown.map((c, i) => (
          <article className="case-card" key={i}>
            <div className="case-photo">
              <img src={c.photo} alt={`Installation in ${c.loc}`} className="case-image" />
              <span className="ph-label">Install photo · {c.loc}</span>
              <div className="case-snapshot">
                <div className="mini-metric">
                  <div className="l">{c.ml}</div>
                  <div className="v">{c.metric}</div>
                </div>
                <MiniSpark color={c.c === "amber" ? "#F59E0B" : c.c === "violet" ? "#8B5CF6" : c.c === "green" ? "#10B981" : "#22D3EE"} />
              </div>
            </div>
            <div className="case-body">
              <div className="case-meta">
                <span className="case-tag">{c.tag}</span><span className="sep">·</span>
                <span>{c.date}</span><span className="sep">·</span>
                <span>{c.spec}</span>
              </div>
              <p className="case-quote">"{c.quote}"</p>
              <div className="case-name"><b>{c.name}</b> · {c.loc}</div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* -------------------------------------------------- Crew strip */
function CrewStrip() {
  const crew = [
    { init: "AK", name: "Alex Kowalski", role: "Lead MCS Engineer", cred: "11 years · 312 installs", photo: "/demo/modern/assets/crew-alex.png" },
    { init: "SD", name: "Sophie Doherty", role: "ASHP Design · Kensa-trained", cred: "F-Gas cert · 168 installs", photo: "/demo/modern/assets/crew-sophie.png" },
    { init: "RM", name: "Ravi Modi", role: "Electrical & EV Lead", cred: "18th Edition · NAPIT", photo: "/demo/modern/assets/crew-ravi.png" },
    { init: "LH", name: "Liam Hadfield", role: "Van 03 · M-ring day crew", cred: "Checkatrade top 2%", photo: "/demo/modern/assets/crew-liam.png" },
  ];
  return (
    <section className="section-pad container">
      <div className="section-head">
        <span className="eyebrow">Your crew</span>
        <h2>Same named engineer from quote to commissioning. No subcontracting.</h2>
        <p>Four liveried vans, one Stockport yard, twenty years on Manchester roofs.</p>
      </div>
      <div className="crew-strip">
        {crew.map(p => (
          <div className="crew-card" key={p.init}>
            {p.photo ? (
              <img src={p.photo} alt={p.name} className="crew-avatar-img" />
            ) : (
              <div className="crew-avatar">{p.init}</div>
            )}
            <div>
              <div className="crew-name">{p.name}</div>
              <div className="crew-role">{p.role}</div>
              <div className="crew-cred">{p.cred}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* -------------------------------------------------- Finance panel */
function FinancePanel() {
  return (
    <section className="section-pad container">
      <div className="finance-panel">
        <div>
          <span className="eyebrow" style={{ color: "var(--amber)", borderColor: "rgba(245,158,11,0.35)", background: "rgba(245,158,11,0.05)" }}>
            Boiler Upgrade Scheme
          </span>
          <h2 style={{ marginTop: 16 }}>£7,500 off your heat pump. We do the paperwork.</h2>
          <p className="muted" style={{ marginTop: 10, maxWidth: 460 }}>
            The BUS grant is a one-shot government discount against a new air-source heat pump. We handle the MCS certificate, Ofgem submission and voucher redemption — you just sign the surveyor's iPad.
          </p>
          <ul className="finance-opts" style={{ marginTop: 22 }}>
            <li>£0 upfront · 10-yr PPA on solar</li>
            <li>Hire purchase from 5.9% APR representative</li>
            <li>Transparent price bands — no "call us for a quote"</li>
            <li>Quote in writing within 48h of survey</li>
          </ul>
          <div className="cta-row" style={{ marginTop: 28 }}>
            <a href="#callback" className="btn btn-primary">Run my numbers <Icon.Arrow className="arrow" /></a>
          </div>
        </div>
        <div style={{ textAlign: "right", alignSelf: "center", position: "relative", zIndex: 1 }}>
          <div className="finance-grant">
            £7,500<span className="sub">OFF EVERY ASHP · PAID TO US</span>
          </div>
          <div style={{ marginTop: 20, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-muted)", letterSpacing: "0.14em" }}>
            TYPICAL MANCHESTER 3-BED · £17,000 − £7,500 = <b style={{ color: "var(--text)" }}>£9,500 INSTALLED</b>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------- FAQ */
function FAQ() {
  const faqs = [
    { q: "Will a heat pump actually work in a Manchester winter?", a: "Yes — modern inverter units like the Mitsubishi Ecodan are rated to operate down to −25°C and maintain a COP above 2.5 at 0°C ambient. Our sizing is based on Manchester's design temperature of −3.4°C, not a theoretical best case." },
    { q: "How long does a typical install take?", a: "Solar PV on a 4-bed semi: one day. Air-source heat pump replacement: two to four days depending on radiator swaps. We'll give you an hour-by-hour plan on day one so you know when water, heating and power are off." },
    { q: "What does MCS certification actually mean?", a: "Microgeneration Certification Scheme is the UK quality standard for renewables installers. Without it you can't claim BUS, SEG, or most grants. Our MCS number is 140293 — you can look us up on the public register." },
    { q: "Can I charge my EV from solar automatically?", a: "Yes — a Zappi or Ohme charger reads your export meter and only pulls the surplus kilowatts. Plug in at 6pm, wake up to a free top-up by sunrise. We configure the routing during commissioning." },
    { q: "Do you operate outside Greater Manchester?", a: "Mostly we stay within a 35-mile radius — Stockport, Trafford, Warrington, Wigan, Rochdale. For commercial jobs we go further; domestic installs need the named-engineer guarantee we can only make within the ring." },
  ];
  return (
    <section className="section-pad container" id="faq">
      <div className="section-head center">
        <span className="eyebrow">Common questions</span>
        <h2>No hedging. No "may be eligible." Real answers.</h2>
      </div>
      <div className="faq-list">
        {faqs.map((f, i) => (
          <details className="faq-item" key={i}>
            <summary className="faq-q">{f.q}</summary>
            <div className="faq-a">{f.a}</div>
          </details>
        ))}
      </div>
    </section>
  );
}

/* -------------------------------------------------- Footer */
function Footer() {
  return (
    <footer className="footer container" id="callback">
      <div className="footer-grid">
        <div>
          <a href="#" className="logo" style={{ marginBottom: 20 }}>
            <span className="logo-mark" aria-hidden="true"></span>
            <span className="logo-text">Solar Installers Manchester<small>EST. 2011 · MCR-WIDE</small></span>
          </a>
          <p className="muted" style={{ fontSize: 13, maxWidth: 320, marginTop: 12 }}>
            Stockport yard · 4 vans · 200+ Manchester homes connected. MCS 140293 · Gas Safe 914422 · Checkatrade 9.8/10.
          </p>
        </div>
        <div>
          <h4>Technology</h4>
          <ul>
            <li><a href="#services">Solar PV</a></li>
            <li><a href="#services">Air-source heat pumps</a></li>
            <li><a href="#services">Battery storage</a></li>
            <li><a href="#services">EV charging</a></li>
          </ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul>
            <li><a href="#cases">Case studies</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Privacy</a></li>
          </ul>
        </div>
        <div className="callback-form">
          <h4 style={{ marginBottom: 4, color: "var(--text)", fontFamily: "var(--font-display)", fontSize: 16, letterSpacing: "-0.01em", textTransform: "none" }}>Free 2-min energy forecast</h4>
          <p className="muted" style={{ fontSize: 12, marginBottom: 14 }}>Postcode + roof size. We call back within a working hour.</p>
          <label>Postcode</label>
          <input type="text" placeholder="M20 4BB" />
          <label>Phone</label>
          <input type="tel" placeholder="07700 900 123" />
          <label>Roof size</label>
          <input type="text" placeholder="south-facing, 36m²" />
          <button className="btn btn-primary">Send forecast <Icon.Arrow className="arrow" /></button>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 Solar Installers Manchester Ltd · Co. No. 07234891</span>
        <span>MCS 140293 · Gas Safe 914422 · BUS Approved</span>
      </div>
    </footer>
  );
}

/* -------------------------------------------------- Sticky tab */
function StickyTab() {
  return (
    <div className="sticky-tab">
      <button onClick={() => document.getElementById("callback")?.scrollIntoView({ behavior: "smooth" })}>
        Design My System →
      </button>
    </div>
  );
}

/* -------------------------------------------------- Exports */
Object.assign(window, {
  Icon,
  TopBar, HeroStage, CredentialRail, Telemetry, ServiceTiles,
  SolarPanelSection, EnergyFlow, CaseStudies, CrewStrip,
  FinancePanel, FAQ, Footer, StickyTab, ProgressRing,
});