// Home.jsx
function Home({ setPage, heroVariant }){
  const services = [
    { icon: <Icons.Home/>, title: 'Residential solar', desc: 'Premium roof-mounted systems sized to slash your bill. Fully certified install, tidy cable runs, zero hassle.' },
    { icon: <Icons.Building/>, title: 'Commercial solar', desc: 'From 10kW to 500kW+. Reduce operating costs and hit sustainability targets. Payback modelled upfront.' },
    { icon: <Icons.Battery/>, title: 'Battery storage', desc: 'Sigenergy, Sungrow, GoodWe, BYD. Keep the lights on through outages and maximise self-consumption.' },
    { icon: <Icons.Car/>, title: 'EV chargers', desc: 'Smart 7kW & 22kW chargers. Pair with solar to charge from sunlight, not the grid.' },
    { icon: <Icons.Grid/>, title: 'Off-grid systems', desc: 'Remote properties, baches, and rural setups. Engineered for South Island conditions.' },
    { icon: <Icons.Wrench/>, title: 'Maintenance & audits', desc: 'Annual health checks, fault-finding, and energy audits to squeeze more from your system.' },
  ];

  const testimonials = [
    { q: 'SSP installed our 8.4kW system in two days. Workmanship is outstanding — cables all neatly tucked, inverter labelled, and they walked us through the app step by step.', n: 'Mark & Anna R.', l: 'Fendalton, Christchurch', i: 'M' },
    { q: 'We got three quotes. SSP weren\'t the cheapest but they were the only team who actually explained why their panel spec made sense for our tile roof. Bill went from $380 to $42 last month.', n: 'Priya S.', l: 'Rolleston', i: 'P' },
    { q: 'Professional from first call to final sign-off. The Powerwall install carried us through the November storm with zero outage. Highly recommend to any Cantabrian.', n: 'James T.', l: 'Cashmere Hills', i: 'J' },
  ];

  const stats = [
    { n: '49.48 MW', l: 'Solar installed' },
    { n: '100+', l: 'Happy clients' },
    { n: '5★', l: 'Google reviews' },
  ];

  return (
    <div className="page">
      <section className="hero">
        <div className="hero-bg">
          <img src="assets/real-2.jpg" alt=""/>
          <div className="hero-grid"/>
        </div>
        <div className="container hero-content">
          <div className="hero-layout">
            <div>
              <span className="badge" style={{marginBottom:24}}><span className="badge-dot"/>Christchurch · South Island</span>
              <h1 className="display hero-title">
                Solar power,<br/>done <span className="grad-text">properly</span>.
              </h1>
              <p className="hero-sub">SSP Electrical designs and installs premium solar, battery and EV systems across Canterbury. SEANZ-approved, no-fluff quoting, and workmanship you'll only notice because it's invisible.</p>
              <div className="hero-ctas">
                <button className="btn btn-primary" onClick={() => setPage('contact')}>Get a free quote <Icons.Arrow/></button>
                <button className="btn btn-ghost" onClick={() => setPage('process')}><Icons.Play/> Watch 60-sec overview</button>
              </div>
              <div className="hero-stats">
                {stats.map((s,i) => (
                  <div key={i}>
                    <div className="hero-stat-n grad-text">{s.n}</div>
                    <div className="hero-stat-l">{s.l}</div>
                  </div>
                ))}
              </div>
            </div>
            <div><QuoteForm/></div>
          </div>
        </div>
      </section>

      <TrustMarquee/>

      {/* Services preview */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="What we do"
            title={<>Full-service solar,<br/>plus everything electrical.</>}
            sub="Design, supply, install, commission, maintain. One team, one accountable partner — not a handoff between a salesman and a subbie."
          />
          <div className="services">
            {services.map((s,i) => (
              <Reveal key={i} delay={i*60}>
                <div className="svc" onClick={() => setPage('services')}>
                  <div className="svc-icon">{s.icon}</div>
                  <h3 className="svc-title">{s.title}</h3>
                  <p className="svc-desc">{s.desc}</p>
                  <span className="svc-more">Learn more <Icons.Arrow/></span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Process teaser */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <SectionHead eyebrow="Our process" title="Four steps. Zero surprises." sub="Every install follows the same tight process — whether it's a 3-bed in Halswell or a 200kW commercial roof."/>
          <div className="process">
            {[
              ['01','Free site assessment','We visit, measure, shade-map, and model your usage. No cost, no hard sell.'],
              ['02','Design & quote','Transparent fixed-price quote with clear payback maths — emailed in 48 hours.'],
              ['03','Install & commission','Certified install in 1–3 days. Signed-off by a registered electrician, every time.'],
              ['04','Monitor & support','Live app monitoring, annual check-ups, and 10-year workmanship warranty.'],
            ].map(([n,t,d],i) => (
              <Reveal key={i} delay={i*80}>
                <div className="step">
                  <div className="step-n">{n}</div>
                  <h4 className="step-t">{t}</h4>
                  <p className="step-d">{d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Feature split - battery */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow">Battery storage</div>
              <h2 className="display" style={{fontSize:'clamp(32px,4vw,52px)', marginTop:12}}>Keep your power<br/>when the grid can't.</h2>
              <p className="text-dim mt-3" style={{fontSize:17, maxWidth:480}}>Pair solar with a Sigenergy SigenStor or BYD battery and you're independent of peak pricing, power cuts, and the grid's bad days. We're certified installers for every major brand.</p>
              <div className="kv">
                <div className="kv-item"><div className="kv-k">Backup time</div><div className="kv-v">12+ hrs</div></div>
                <div className="kv-item"><div className="kv-k">Self-use increase</div><div className="kv-v">30 → 85%</div></div>
                <div className="kv-item"><div className="kv-k">Warranty</div><div className="kv-v">10 years</div></div>
                <div className="kv-item"><div className="kv-k">Install time</div><div className="kv-v">1 day</div></div>
              </div>
              <div style={{display:'flex', gap:12, marginTop:32}}>
                <button className="btn btn-primary" onClick={() => setPage('battery')}>Explore batteries <Icons.Arrow/></button>
              </div>
            </div>
            <div className="split-media">
              <img src="assets/drone-1-web.jpg" alt="Full solar array on Canterbury home"/>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <SectionHead eyebrow="Real customers" title="Cantabrians who made the switch." sub="We've earned our 5★ rating the old-fashioned way — by sweating the details on every install."/>
          <div className="testis">
            {testimonials.map((t,i) => (
              <Reveal key={i} delay={i*80}>
                <div className="testi">
                  <div className="testi-stars">★★★★★</div>
                  <p className="testi-q">"{t.q}"</p>
                  <div className="testi-who">
                    <div className="testi-av">{t.i}</div>
                    <div>
                      <div className="testi-n">{t.n}</div>
                      <div className="testi-l">{t.l}</div>
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <div style={{textAlign:'center', marginTop:40}}>
            <button className="btn btn-ghost" onClick={() => setPage('projects')}>See all reviews & projects <Icons.Arrow/></button>
          </div>
        </div>
      </section>

      <section style={{paddingBottom:120}}>
        <CTABand setPage={setPage}/>
      </section>
    </div>
  );
}
window.Home = Home;