// PagesB.jsx - Battery, Projects, FAQ, Blog, Contact

function Battery({ setPage }){
  const sigenFeatures = [
    { t:'All-in-one', d:'Inverter, battery, EV charger and backup — one integrated unit, one app, one warranty.' },
    { t:'Modular 6–48 kWh', d:'Start at 6 kWh, stack 8 kWh modules as your needs grow. No re-engineering later.' },
    { t:'12 kW continuous', d:'Enough grunt to run the whole house — heat pump, oven, EV charger — all at once.' },
    { t:'25 kW EV charger add-on', d:'Optional DC fast-charger module: charge your EV directly from the battery, bypass the grid entirely.' },
    { t:'10-year warranty', d:'Full product + performance warranty, extendable to 15 years. TÜV, CE, IEC certified.' },
    { t:'AI-optimised', d:'Learns your usage patterns and weather forecasts to pre-charge before peak pricing or outages.' },
  ];
  const otherBatts = [
    { brand:'Sungrow SBR Battery', cap:'9.6–25.6 kWh', power:'10 kW', warr:'10 yrs', best:'Value-focused retrofits', price:'From $9,400 installed' },
    { brand:'GoodWe Lynx Home F', cap:'6.6–16.4 kWh', power:'8 kW', warr:'10 yrs', best:'Flexible sizing, three-phase', price:'From $8,200 installed' },
    { brand:'BYD Battery-Box HVS', cap:'5.1–22.1 kWh', power:'8 kW', warr:'10 yrs', best:'Proven, modular, scalable', price:'From $8,900 installed' },
  ];
  return (
    <div className="page">
      <section className="hero" style={{minHeight:'70vh'}}>
        <div className="hero-bg">
          <img src="assets/real-4.jpg" alt=""/>
          <div className="hero-grid"/>
        </div>
        <div className="container hero-content">
          <div style={{maxWidth:780}}>
            <span className="badge"><span className="badge-dot"/>Sigenergy certified · Battery specialists</span>
            <h1 className="display hero-title" style={{marginTop:24}}>Store the sun.<br/><span className="grad-text">Use it after dark.</span></h1>
            <p className="hero-sub" style={{maxWidth:600}}>A battery is what turns solar from "nice daytime savings" into true energy independence. We specialise in Sigenergy — the all-in-one system we'd install on our own homes — and fit every major brand.</p>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={() => setPage('contact')}>Quote my battery <Icons.Arrow/></button>
              <button className="btn btn-ghost" onClick={() => setPage('faq')}>Read battery FAQ</button>
            </div>
          </div>
        </div>
      </section>

      {/* Sigenergy feature */}
      <section className="section" style={{paddingTop:80, paddingBottom:40}}>
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow">Our flagship system</div>
              <h2 className="display" style={{fontSize:'clamp(36px,4.5vw,60px)', marginTop:12}}>Sigenergy <span className="grad-text">SigenStor.</span></h2>
              <p className="text-dim mt-3" style={{fontSize:17, maxWidth:520}}>The SigenStor combines hybrid inverter, battery storage, EV charging and backup gateway in a single stackable cabinet. It's the cleanest, smartest, most future-proof install we offer — and the one we recommend for 8 out of 10 Canterbury homes.</p>
              <div className="kv">
                <div className="kv-item"><div className="kv-k">Capacity</div><div className="kv-v">6 – 48 kWh</div></div>
                <div className="kv-item"><div className="kv-k">Output</div><div className="kv-v">12 kW</div></div>
                <div className="kv-item"><div className="kv-k">Backup</div><div className="kv-v">Whole-home</div></div>
                <div className="kv-item"><div className="kv-k">EV add-on</div><div className="kv-v">25 kW DC</div></div>
              </div>
              <div style={{marginTop:32, padding:'28px 32px', border:'1px solid var(--line)', borderRadius:'var(--r-md)', background:'var(--bg-1)'}}>
                <div className="eyebrow" style={{color:'var(--text-faint)'}}>Indicative pricing</div>
                <div style={{display:'flex', alignItems:'baseline', gap:8, marginTop:8}}>
                  <span className="display" style={{fontSize:44, lineHeight:1}}>From $8,000</span>
                  <span className="text-dim" style={{fontSize:14}}>installed</span>
                </div>
                <p className="text-dim" style={{fontSize:14, marginTop:12, maxWidth:460}}>Scales from 6 kWh upward. We'll give you a fixed written quote after a free site visit.</p>
              </div>
              <div style={{display:'flex', gap:12, marginTop:32, flexWrap:'wrap'}}>
                <button className="btn btn-primary" onClick={() => setPage('contact')}>Get a Sigen quote <Icons.Arrow/></button>
                <a className="btn btn-ghost" href="https://www.sigenergy.com" target="_blank" rel="noopener">Sigenergy.com</a>
              </div>
            </div>
            <div className="split-media"><img src="assets/sigen-1-web.jpg" alt="Sigenergy SigenStor install by SSP Electrical"/></div>
          </div>

          <div style={{marginTop:72, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
            {sigenFeatures.map((f,i) => (
              <Reveal key={i} delay={i*40}>
                <div className="card" style={{padding:28}}>
                  <div style={{fontFamily:"'Inter Tight'", fontSize:20, letterSpacing:'-0.015em', fontWeight:600}}>{f.t}</div>
                  <p className="text-dim" style={{fontSize:14.5, marginTop:10, marginBottom:0}}>{f.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Inverters */}
      <section className="section" style={{paddingTop:40, paddingBottom:40}}>
        <div className="container">
          <SectionHead eyebrow="Inverter brands we install" title="Four inverter brands. Chosen for your property." sub="Sigenergy is our default for new hybrid systems. For retrofits and tight budgets we'll spec Sungrow, GoodWe or Fronius — all certified, all proven in NZ conditions."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
            {[
              { n:'Sigenergy', tag:'Our default', d:'All-in-one hybrid inverter + battery + EV charger. AI-driven, whole-home backup, modular.' },
              { n:'Sungrow', tag:'Value pick', d:'Reliable Tier-1 hybrid inverters. Excellent price/performance for budget-conscious installs.' },
              { n:'GoodWe', tag:'Flexible', d:'Strong warranty, flexible sizing from 3kW to 50kW, great for commercial and three-phase work.' },
              { n:'Fronius', tag:'European-built', d:'Austrian-engineered workhorses. Gold standard for grid-tied residential, renowned reliability.' },
            ].map((b,i) => (
              <Reveal key={i} delay={i*60}>
                <div className="card" style={{padding:28, height:'100%'}}>
                  <div style={{display:'inline-flex', padding:'4px 10px', borderRadius:999, background:'var(--brand-grad-soft)', border:'1px solid var(--line-strong)', fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--text-dim)'}}>{b.tag}</div>
                  <div className="display" style={{fontSize:26, marginTop:14, fontWeight:600, letterSpacing:'-0.02em'}}>{b.n}</div>
                  <p className="text-dim" style={{fontSize:14, marginTop:10, marginBottom:0}}>{b.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Other batteries */}
      <section className="section" style={{paddingTop:40}}>
        <div className="container">
          <SectionHead eyebrow="Other battery options" title="Other batteries we happily install." sub="When budget, existing kit, or micro-inverter systems call for it, we'll recommend BYD or Sungrow instead. Our advice is never brand-locked."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16}}>
            {otherBatts.map((b,i) => (
              <Reveal key={i} delay={i*80}>
                <div className="card" style={{padding:32}}>
                  <div className="eyebrow">Best for: {b.best}</div>
                  <h3 className="display" style={{fontSize:26, marginTop:10}}>{b.brand}</h3>
                  <div style={{marginTop:20, display:'grid', gap:10}}>
                    {[['Usable capacity',b.cap],['Continuous power',b.power],['Warranty',b.warr]].map(([k,v],j) => (
                      <div key={j} style={{display:'flex', justifyContent:'space-between', padding:'12px 0', borderTop:'1px solid var(--line)'}}>
                        <span style={{color:'var(--text-faint)', fontSize:13}}>{k}</span>
                        <span style={{fontWeight:500}}>{v}</span>
                      </div>
                    ))}
                  </div>
                  <div style={{marginTop:20, padding:'16px 18px', borderRadius:12, background:'var(--brand-grad-soft)', border:'1px solid var(--line-strong)'}}>
                    <div style={{fontSize:12, color:'var(--text-dim)', textTransform:'uppercase', letterSpacing:'0.1em'}}>Installed price</div>
                    <div style={{fontFamily:"'Inter Tight'", fontSize:22, marginTop:4}}>{b.price}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <div style={{marginTop:80}}><CTABand setPage={setPage} title="Not sure which fits?" sub="Send us a photo of your switchboard and a rough monthly bill. We'll reply with a Sigen-first shortlist in 24 hrs."/></div>
        </div>
      </section>
    </div>
  );
}

function Projects({ setPage }){
  const projects = [
    { img:'assets/drone-1-web.jpg', t:'17.6kW Yaldhurst install', s:'Residential · 35 panels · Full roof array', cls:'tile-big' },
    { img:'assets/real-newbuild-web.jpg', t:'7.6kW Wainoni residential', s:'Residential · 17 panels · Colorsteel', cls:'' },
    { img:'assets/real-kaikoura-web.jpg', t:'Kaikoura solar install', s:'Residential · 16 panels', cls:'' },
    { img:'assets/sigen-1-web.jpg', t:'Sigenergy SigenStor retrofit', s:'Residential · 18.04 kWh · Whole-home backup', cls:'' },
    { img:'assets/real-tilts-web.jpg', t:'Tilt-frame install, North Canterbury', s:'Rural property · Flat roof · Tilt-mounted', cls:'tile-wide' },
    { img:'assets/real-leeston-web.jpg', t:'Leeston solar + battery install', s:'Residential · 28 panels · 16 kWh battery', cls:'' },
  ];
  const stats = [
    ['100+','Happy clients'],['49.48 MW','Total capacity installed'],['Est. 2024','Christchurch local'],['5★','Google rating']
  ];
  return (
    <div className="page">
      <section className="section" style={{paddingTop:160}}>
        <div className="container">
          <div style={{maxWidth:780}}>
            <div className="eyebrow">Projects & reviews</div>
            <h1 className="display" style={{fontSize:'clamp(40px,6vw,80px)', marginTop:16}}>Canterbury roofs<br/>we've transformed.</h1>
            <p className="text-dim mt-4" style={{fontSize:19, maxWidth:640}}>A selection of recent installs. Click any project for the full case study, system specs, and before/after performance data.</p>
          </div>

          <div style={{marginTop:56, display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16}}>
            {stats.map(([n,l],i) => (
              <div key={i} style={{padding:24, border:'1px solid var(--line)', borderRadius:16}}>
                <div className="display grad-text" style={{fontSize:40}}>{n}</div>
                <div className="text-dim" style={{fontSize:13, marginTop:4}}>{l}</div>
              </div>
            ))}
          </div>

          <div style={{marginTop:56}} className="gallery">
            {projects.map((p,i) => (
              <div key={i} className={`tile ${p.cls}`}>
                <img src={p.img} alt={p.t}/>
                <div className="tile-info">
                  <h4>{p.t}</h4>
                  <span>{p.s}</span>
                </div>
              </div>
            ))}
          </div>

          <div style={{marginTop:120}}>
            <SectionHead eyebrow="Customer reviews" title="Straight from the kitchen table." align="center"/>
            <div className="testis">
              {[
                { q:'Outstanding from start to finish. The team took the time to explain everything and the finished install is immaculate. Hard to fault.', n:'Daniel K.', l:'Halswell', i:'D' },
                { q:'Honest, on-time, on-budget. Second time we\'ve used SSP and they\'ll be doing our new shed too. Rare company these days.', n:'Lisa M.', l:'Prebbleton', i:'L' },
                { q:'The savings breakdown was the clearest of the five quotes we got. No fluff, just numbers. 10/10 would recommend.', n:'Andrew P.', l:'Sumner', i:'A' },
              ].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>
          <div style={{marginTop:80}}><CTABand setPage={setPage} title="Want to be our next case study?" sub="Book an assessment. We'll handle the rest."/></div>
        </div>
      </section>
    </div>
  );
}

function FAQ({ setPage }){
  const faqs = [
    { q:'How much does a solar system cost in Christchurch?', a:'Most residential systems start from $10,000 installed and scale up based on system size, panel tier, roof complexity, and whether you add a battery. We quote fixed-price only — no "from" pricing games.' },
    { q:'How long is the payback period?', a:'For a typical Canterbury home with a $250–350 monthly power bill, payback is 5–7 years. Add a battery and it stretches to 8–10 years. We model this honestly on your actual usage.' },
    { q:'Will my roof handle the weight?', a:'Modern panels weigh ~12kg/m² — well within standard NZS 3604 allowances. We assess your roof structure during the site visit, and if there\'s any doubt we bring in a structural engineer (rare, but we\'d rather be sure).' },
    { q:'Do I need a battery?', a:'Not necessarily. Solar without a battery still pays for itself. A battery makes sense if you\'re often home during the day or want outage protection. We\'ll show you the maths for both.' },
    { q:'What happens in a power cut — does my solar keep working?', a:'Grid-tied systems shut down for safety during outages. With a battery and a backup-enabled inverter, essential circuits stay powered. We\'ll configure your backup scope during install.' },
    { q:'Are you licensed and insured?', a:'Yes — EWRB registered and SEANZ approved, and fully insured including $2M public liability. Happy to send certificates on request.' },
    { q:'Do you offer finance?', a:'We help customers access bank-backed low-interest and 0% green loans for solar and batteries. Repayments are typically less than your current power bill savings, and we guide you through the application.' },
    { q:'What warranty do I get?', a:'10-year SSP workmanship warranty, 25-year panel performance (Tier-1), 10–15 year inverter (depending on brand), and 10-year battery warranty. All backed in writing.' },
    { q:'Can you install in winter?', a:'Yes. We install year-round — Canterbury winters aren\'t that bad on the roof. Your panels actually produce better in cold clear conditions.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <div className="page">
      <section className="section" style={{paddingTop:160}}>
        <div className="container">
          <div style={{maxWidth:780}}>
            <div className="eyebrow">FAQ</div>
            <h1 className="display" style={{fontSize:'clamp(40px,6vw,80px)', marginTop:16}}>The questions<br/>we hear most.</h1>
            <p className="text-dim mt-4" style={{fontSize:19, maxWidth:640}}>Can't find what you're after? Ping us — we'll answer within the day.</p>
          </div>
          <div style={{marginTop:56, display:'grid', gridTemplateColumns:'1fr 340px', gap:60, alignItems:'start'}}>
            <div className="faq-list">
              {faqs.map((f,i) => (
                <div key={i} className={`faq-item ${open===i?'open':''}`}>
                  <button className="faq-q" onClick={() => setOpen(open===i?-1:i)}>
                    <span>{f.q}</span>
                    <span className="faq-toggle"><Icons.Plus/></span>
                  </button>
                  <div className="faq-a"><p style={{margin:0, paddingRight:40}}>{f.a}</p></div>
                </div>
              ))}
            </div>
            <div className="card" style={{position:'sticky', top:100}}>
              <div className="eyebrow">Still stuck?</div>
              <h3 className="display" style={{fontSize:24, marginTop:8}}>Talk to a real installer.</h3>
              <p className="text-dim" style={{fontSize:14}}>Send us a quick message and we'll get you sorted.</p>
              <button className="btn btn-primary" style={{marginTop:16, width:'100%', justifyContent:'center'}} onClick={() => setPage('contact')}>Contact us <Icons.Arrow/></button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function Blog({ setPage }){
  const posts = [
    { tag:'Guide', t:'How much solar does a Christchurch home actually need?', m:'6 min read · April 2026', img:'assets/real-1.jpg' },
    { tag:'Battery', t:'Sigenergy SigenStor vs BYD: which one we\'d install on our own house', m:'8 min read · March 2026', img:'assets/sigen-2.jpg' },
    { tag:'Rebates', t:'What the 2026 NZ solar rebates mean for you', m:'4 min read · February 2026', img:'assets/real-3.jpg' },
    { tag:'Commercial', t:'Case study: 52kW at Hornby — 4.2 year payback', m:'10 min read · February 2026', img:'assets/real-4.jpg' },
    { tag:'DIY', t:'5 things to check on your solar app every month', m:'3 min read · January 2026', img:'assets/real-1.jpg' },
    { tag:'Weather', t:'Do solar panels still work in Canterbury fog?', m:'5 min read · January 2026', img:'assets/real-2.jpg' },
  ];
  return (
    <div className="page">
      <section className="section" style={{paddingTop:160}}>
        <div className="container">
          <div style={{maxWidth:780}}>
            <div className="eyebrow">Resources</div>
            <h1 className="display" style={{fontSize:'clamp(40px,6vw,80px)', marginTop:16}}>Solar explained, plainly.</h1>
            <p className="text-dim mt-4" style={{fontSize:19, maxWidth:640}}>Guides, case studies, and honest takes from five years on Canterbury roofs.</p>
          </div>
          <div style={{marginTop:56}} className="blogs">
            {posts.map((p,i) => (
              <Reveal key={i} delay={i*40}>
                <div className="blog">
                  <div className="blog-img"><img src={p.img} alt=""/></div>
                  <div className="blog-body">
                    <div className="blog-tag">{p.tag}</div>
                    <h3 className="blog-title">{p.t}</h3>
                    <div className="blog-meta">{p.m}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <div style={{marginTop:80, padding:40, borderRadius:24, border:'1px solid var(--line-strong)', background:'linear-gradient(180deg, rgba(255,255,255,0.02), transparent)', display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'center'}}>
            <div>
              <div className="eyebrow">Newsletter</div>
              <h3 className="display" style={{fontSize:28, marginTop:10}}>One email a month.<br/>Only when we've got something useful.</h3>
            </div>
            <div style={{display:'flex', gap:10}}>
              <input className="qform-input" placeholder="your@email.co.nz"/>
              <button className="btn btn-primary" style={{flexShrink:0}}>Subscribe</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function Contact({ setPage }){
  return (
    <div className="page">
      <section className="section" style={{paddingTop:160}}>
        <div className="container">
          <div style={{maxWidth:780}}>
            <div className="eyebrow">Contact</div>
            <h1 className="display" style={{fontSize:'clamp(40px,6vw,80px)', marginTop:16}}>Let's get you a quote.</h1>
            <p className="text-dim mt-4" style={{fontSize:19, maxWidth:640}}>We'll get back within one business day. No pushy sales calls, ever.</p>
          </div>
          <div style={{marginTop:60, display:'grid', gridTemplateColumns:'1fr 420px', gap:60, alignItems:'start'}}>
            <div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                {[
                  { icon:<Icons.Phone/>, k:'Phone', v:'027 825 9554', s:'Mon–Fri, 7am–6pm' },
                  { icon:<Icons.Mail/>, k:'Email', v:'info@sspelectrical.co.nz', s:'Replies within 1 business day' },
                  { icon:<Icons.Pin/>, k:'Service area', v:'Canterbury', s:'All of the South Island on request' },
                  { icon:<Icons.Building/>, k:'Office', v:'Christchurch', s:'Site visits to your property' },
                ].map((c,i) => (
                  <div key={i} className="card" style={{padding:24}}>
                    <div className="svc-icon" style={{width:40, height:40}}>{c.icon}</div>
                    <div className="eyebrow" style={{marginTop:16}}>{c.k}</div>
                    <div style={{fontFamily:"'Inter Tight'", fontSize:20, marginTop:6, letterSpacing:'-0.015em'}}>{c.v}</div>
                    <div className="text-dim" style={{fontSize:13, marginTop:4}}>{c.s}</div>
                  </div>
                ))}
              </div>
              <div className="card" style={{marginTop:24, padding:32}}>
                <div className="eyebrow">Book a site visit</div>
                <h3 className="display" style={{fontSize:24, marginTop:8}}>Pick a time that suits.</h3>
                <p className="text-dim" style={{fontSize:14}}>45 minutes, at your place. We'll walk the roof, check the switchboard, and talk through what solar could do for you.</p>
                <div style={{marginTop:20, padding:'20px', border:'1px dashed var(--line-strong)', borderRadius:12, background:'rgba(255,255,255,0.02)', textAlign:'center'}}>
                  <div style={{fontSize:12, color:'var(--text-faint)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:8}}>Go High Level calendar embed</div>
                  <div style={{fontFamily:"'Inter Tight'", fontSize:18}}>Calendar widget slots in here</div>
                  <button className="btn btn-ghost" style={{marginTop:16}}>Pick a day <Icons.Arrow/></button>
                </div>
              </div>
            </div>
            <div style={{position:'sticky', top:100}}>
              <QuoteForm/>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Battery = Battery;
window.Projects = Projects;
window.FAQ = FAQ;
window.Blog = Blog;
window.Contact = Contact;