// Pages.jsx - all the inner pages (About, Services, Process, Battery, Projects, FAQ, Blog, Contact)

function About({ setPage }){
  return (
    <div className="page">
      <section className="section" style={{paddingTop:160}}>
        <div className="container">
          <div style={{maxWidth:820}}>
            <div className="eyebrow">About SSP Electrical</div>
            <h1 className="display" style={{fontSize:'clamp(40px,6vw,80px)', marginTop:16}}>Local installers who <span className="grad-text">actually live here.</span></h1>
            <p className="text-dim mt-4" style={{fontSize:19, maxWidth:680}}>SSP Electrical was founded in Christchurch with a simple idea: Canterbury deserves solar installers who understand the weather, the wind loads, the council quirks — and who'll still pick up the phone five years after the install.</p>
          </div>
          <div style={{marginTop:80, display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, alignItems:'center'}}>
            <div className="split-media"><img src="assets/real-3.jpg" alt="SSP installer on roof"/></div>
            <div>
              <h2 className="display" style={{fontSize:36}}>SEANZ-approved, electrician-led.</h2>
              <p className="text-dim mt-3">Every SSP install is led by an EWRB-registered electrician. That means the wiring in your switchboard is as tidy as the panels on your roof — and your Certificate of Compliance (CoC) is issued without drama.</p>
              <div className="kv">
                <div className="kv-item"><div className="kv-k">Founded</div><div className="kv-v">2024</div></div>
                <div className="kv-item"><div className="kv-k">Happy clients</div><div className="kv-v">100+</div></div>
                <div className="kv-item"><div className="kv-k">Service area</div><div className="kv-v">Canterbury</div></div>
                <div className="kv-item"><div className="kv-k">Team size</div><div className="kv-v">Growing</div></div>
              </div>
            </div>
          </div>

          <div style={{marginTop:120}}>
            <SectionHead eyebrow="Our values" title="What you can count on." align="center"/>
            <div className="services">
              {[
                { icon:<Icons.Shield/>, t:'No-pressure quoting', d:'We\'ll never chase you with calls. Quote, payback maths, and the honest answer if solar doesn\'t stack up for your property.' },
                { icon:<Icons.Check/>, t:'Fixed-price certainty', d:'Scope and price locked before we touch a panel. Variations are rare, and always in writing before work proceeds.' },
                { icon:<Icons.Wrench/>, t:'Lifetime relationship', d:'We built this business on repeat customers. Every install includes a 10-year workmanship warranty and an open phone line.' },
              ].map((v,i) => (
                <Reveal key={i} delay={i*80}>
                  <div className="svc">
                    <div className="svc-icon">{v.icon}</div>
                    <h3 className="svc-title">{v.t}</h3>
                    <p className="svc-desc">{v.d}</p>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
          <div style={{marginTop:80}}><CTABand setPage={setPage} title="Meet the team in person." sub="Prefer a conversation over a form? Book a 20-minute site visit and we'll walk the roof with you."/></div>
        </div>
      </section>
    </div>
  );
}

function Services({ setPage }){
  const list = [
    { icon:<Icons.Home/>, t:'Residential solar', d:'Tier-1 panels (Jinko, Suntech, Longi, Trina), Fronius/Enphase inverters, micro-inverter upgrade path. Systems from 4kW to 15kW+ sized to your actual usage.', f:['Free shade & roof analysis','Fixed-price install','App-based monitoring','10yr workmanship warranty'] },
    { icon:<Icons.Building/>, t:'Commercial solar', d:'For dairy sheds, warehouses, retail, and offices. We model your load profile, demand charges, and payback before a cent is quoted.', f:['10kW–500kW+','Depreciation guidance','Three-phase specialists','Remote monitoring'] },
    { icon:<Icons.Battery/>, t:'Battery storage', d:'Sigenergy SigenStor, Sungrow SBR, GoodWe Lynx, BYD Battery-Box. Blackout backup and peak-shaving to get the most from every sunny hour.', f:['Certified installers','Whole-home backup','Time-of-use optimisation','10yr battery warranty'] },
    { icon:<Icons.Car/>, t:'EV charging', d:'Smart 7kW AC chargers (Zappi, Wallbox, Ocular) and 22kW three-phase. Solar-matched charging so your car runs on sun, not peak-rate grid.', f:['Load-balanced installs','Solar-match mode','OCPP-ready','EV grant guidance'] },
    { icon:<Icons.Grid/>, t:'Off-grid & hybrid', d:'Remote baches, rural properties, and resilience-focused homes. We engineer from scratch — generator fallback, seasonal sizing, all of it.', f:['Custom engineering','Generator integration','Water pump & farm load sizing','On-site commissioning'] },
    { icon:<Icons.Wrench/>, t:'Maintenance & audits', d:'Whether we installed it or not. Annual clean, fault-finding, monitoring setup, and energy audits for under-performing systems.', f:['System health reports','Thermographic panel scan','Inverter firmware','Energy audit services'] },
    { icon:<Icons.Lightning/>, t:'General electrical', d:'Switchboard upgrades, new builds, renovations, heat pumps. Full-service electrical for any Canterbury property.', f:['Switchboard upgrades','New build wiring','Heat pump install','Renovation rewires'] },
    { icon:<Icons.Dollar/>, t:'Finance options', d:'Access to bank-backed low-rate and 0% green loans for solar and batteries. Pay it off at roughly what you\'re saving on power.', f:['0% bank green loans','Low-rate options','Transparent rates','We handle the paperwork'] },
  ];
  return (
    <div className="page">
      <section className="section" style={{paddingTop:160}}>
        <div className="container">
          <div style={{maxWidth:780}}>
            <div className="eyebrow">Services</div>
            <h1 className="display" style={{fontSize:'clamp(40px,6vw,80px)', marginTop:16}}>One team.<br/>Everything electrical.</h1>
            <p className="text-dim mt-4" style={{fontSize:19, maxWidth:640}}>From a single panel swap to a full commercial fit-out, we handle it end-to-end. No subbies, no finger-pointing.</p>
          </div>
          <div style={{marginTop:72, display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:20}}>
            {list.map((s,i) => (
              <Reveal key={i} delay={i*40}>
                <div className="svc" style={{minHeight:0}}>
                  <div style={{display:'flex', gap:20, alignItems:'flex-start'}}>
                    <div className="svc-icon" style={{flexShrink:0}}>{s.icon}</div>
                    <div style={{flex:1}}>
                      <h3 className="svc-title" style={{marginTop:0}}>{s.t}</h3>
                      <p className="svc-desc">{s.d}</p>
                      <div style={{marginTop:16, display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
                        {s.f.map((f,j) => (
                          <div key={j} style={{display:'flex', gap:8, alignItems:'center', fontSize:13, color:'var(--text-dim)'}}>
                            <span style={{color:'var(--green)', display:'inline-flex'}}><Icons.Check/></span>{f}
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <div style={{marginTop:80}}><CTABand setPage={setPage}/></div>
        </div>
      </section>
    </div>
  );
}

function Process({ setPage }){
  const steps = [
    { n:'01', t:'Free site assessment', d:'We book a 45-minute visit at your place. Shade-mapping with a Solmetric tool, roof condition check, existing switchboard review, and a sit-down to understand how your household actually uses power. No obligation, no pressure.', dur:'45 min', out:'Honest answer on whether solar makes sense' },
    { n:'02', t:'Custom design & quote', d:'Within 48 hours you get a written proposal: system layout, exact panels & inverter, bill-savings projection, payback period, and a fixed price. Every line is explained plainly.', dur:'48 hrs', out:'Transparent fixed-price proposal' },
    { n:'03', t:'Consent & scheduling', d:'We handle grid-tie paperwork with Orion, manage any council requirements, and book you in. You get a single dedicated project manager from here on.', dur:'2–3 wks', out:'Grid approval + install date confirmed' },
    { n:'04', t:'Install day', d:'Our own crew — no subbies. Panels mounted with tile-appropriate flashing, tidy conduit runs, labelled inverter, and a switchboard that passes inspection first time. Tidy site when we leave.', dur:'1–3 days', out:'System live + CoC issued' },
    { n:'05', t:'Walkthrough & app setup', d:'Before we leave, your owner gets a hands-on walkthrough of the monitoring app, a folder with all warranties, and our direct mobile number.', dur:'30 min', out:'You\'re producing power' },
    { n:'06', t:'Ongoing support', d:'Annual check-in, firmware updates handled remotely, and someone at the other end of the phone for the long haul. You\'re a customer, not a ticket.', dur:'10 yrs+', out:'Peace of mind, year after year' },
  ];
  return (
    <div className="page">
      <section className="section" style={{paddingTop:160}}>
        <div className="container">
          <div style={{maxWidth:780}}>
            <div className="eyebrow">Our process</div>
            <h1 className="display" style={{fontSize:'clamp(40px,6vw,80px)', marginTop:16}}>From first call<br/>to first kilowatt.</h1>
            <p className="text-dim mt-4" style={{fontSize:19, maxWidth:640}}>Clear stages. One project manager. Fixed pricing. No surprise variations.</p>
          </div>
          <div style={{marginTop:80, display:'flex', flexDirection:'column', gap:16}}>
            {steps.map((s,i) => (
              <Reveal key={i} delay={i*40}>
                <div className="svc" style={{minHeight:0, padding:32}}>
                  <div style={{display:'grid', gridTemplateColumns:'120px 1fr 220px', gap:40, alignItems:'start'}}>
                    <div>
                      <div className="step-n" style={{fontSize:32}}>{s.n}</div>
                      <div style={{marginTop:16, fontSize:12, color:'var(--text-faint)', textTransform:'uppercase', letterSpacing:'0.1em'}}>Duration</div>
                      <div style={{fontFamily:"'Inter Tight'", fontSize:18, marginTop:4}}>{s.dur}</div>
                    </div>
                    <div>
                      <h3 className="svc-title" style={{marginTop:0}}>{s.t}</h3>
                      <p className="svc-desc">{s.d}</p>
                    </div>
                    <div>
                      <div style={{fontSize:12, color:'var(--text-faint)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:8}}>Outcome</div>
                      <div style={{display:'flex', gap:8, alignItems:'flex-start', fontSize:14, color:'var(--text)'}}>
                        <span style={{color:'var(--green)', display:'inline-flex', flexShrink:0, marginTop:2}}><Icons.Check/></span>
                        <span>{s.out}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <div style={{marginTop:80}}><CTABand setPage={setPage} title="Ready for step one?" sub="Book your free on-site assessment. We'll be there in days, not weeks."/></div>
        </div>
      </section>
    </div>
  );
}

window.About = About;
window.Services = Services;
window.Process = Process;