/* PVRescue marketing site — testimonials, service areas, FAQ, final CTA. */
(function(){
const { Button, Card, Icon, Badge } = window.PVRescueDesignSystem_b3a34e;
const { SiteSection, SiteEyebrow, SiteH2, QuoteForm, PVR_CONTACT, WAIcon, SiteStars, siteJump } = window;

/* ---- Testimonials ------------------------------------------------------ */
const REVIEWS = [
  { q: 'PVRescue het ons Sunsynk-stelsel geïnstalleer — netjiese werk, billike prys en ’n volledige CoC. Ons rekening het sommer geval.', n: 'Pieter van der Merwe', a: 'Stellenbosch', i: 'PM' },
  { q: 'Installed our 8kW Sunsynk and we barely notice load-shedding now. Neat work and a full CoC — highly recommend.', n: 'Refilwe Mokoena', a: 'Durbanville', i: 'RM' },
  { q: 'Hulle het ons driefasekrag reggemaak en sonpanele op die plaas se store gesit. Betroubaar, en hulle bel jou terug.', n: 'Annelize Botha', a: 'Paarl', i: 'AB' },
  { q: 'Added a Pi²R to our geyser and the bill dropped noticeably. Quick, clean install and friendly team.', n: 'Sarah Petersen', a: 'Table View', i: 'SP' },
  { q: 'Rewired our DB board and added battery backup. Professional, on time, and they explained everything clearly.', n: 'Mogamat Adams', a: 'Bellville', i: 'MA' },
];
function Testimonials() {
  return (
    <SiteSection style={{ paddingTop: 80, paddingBottom: 40 }}>
      <div style={{ marginBottom: 32 }}>
        <SiteEyebrow>Reviews</SiteEyebrow>
        <SiteH2 style={{ marginTop: 12 }}>What our customers say</SiteH2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }} className="pvr-svc-grid">
        {REVIEWS.map((r) => (
          <Card key={r.n} padding="lg">
            <SiteStars size={16} />
            <p style={{ fontSize: 15.5, lineHeight: 1.55, color: 'var(--text-strong)', margin: '12px 0 18px', fontWeight: 500 }}>"{r.q}"</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
              <span style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--ink-200)', color: 'var(--ink-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 13, flex: 'none' }}>{r.i}</span>
              <div><div style={{ fontWeight: 700, fontSize: 14.5, color: 'var(--text-strong)' }}>{r.n}</div><div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{r.a}</div></div>
            </div>
          </Card>
        ))}
      </div>
    </SiteSection>
  );
}

/* ---- Service areas ----------------------------------------------------- */
const AREAS = ['Cape Town', 'Bellville', 'Durbanville', 'Somerset West', 'Stellenbosch', 'Paarl', 'Table View', 'Helderberg'];
function ServiceAreas() {
  return (
    <SiteSection id="areas" style={{ paddingTop: 40, paddingBottom: 80, scrollMarginTop: 70 }}>
      <Card variant="inverse" padding="lg">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 36, alignItems: 'center' }} className="pvr-hero-grid">
          <div>
            <SiteEyebrow tone="light">Service areas</SiteEyebrow>
            <SiteH2 light style={{ marginTop: 12 }}>All over the Western Cape &amp; the farms around it</SiteH2>
            <p style={{ fontSize: 15.5, color: 'rgba(255,255,255,.7)', marginTop: 12, lineHeight: 1.6, maxWidth: 420 }}>From the City Bowl to the Winelands and out to the West Coast farms — if you're nearby, we'll come to you. Not sure? Give us a call.</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 22, flexWrap: 'wrap' }}>
              <Button size="lg" href={PVR_CONTACT.phoneHref} leadingIcon={<Icon name="phone" size={19} />}>Call {PVR_CONTACT.phoneLabel}</Button>
              <a href={PVR_CONTACT.waHref} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, height: 52, padding: '0 22px', borderRadius: 'var(--radius-md)', background: '#25D366', color: '#fff', fontWeight: 600, fontSize: 16 }}><WAIcon size={20} />WhatsApp</a>
            </div>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {AREAS.map((a) => (
              <span key={a} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 15px', background: 'rgba(255,255,255,.06)', border: '1px solid var(--border-inverse)', borderRadius: 'var(--radius-pill)', color: '#fff', fontSize: 14.5, fontWeight: 600 }}>
                <Icon name="map-pin" size={15} style={{ color: 'var(--brand)' }} />{a}
              </span>
            ))}
            <span style={{ display: 'inline-flex', alignItems: 'center', padding: '10px 15px', color: 'rgba(255,255,255,.6)', fontSize: 14.5 }}>+ surrounding farms</span>
          </div>
        </div>
      </Card>
    </SiteSection>
  );
}

/* ---- FAQ --------------------------------------------------------------- */
const FAQS = [
  ['How much does a solar system cost?', 'It depends on your home, your usage and how much backup you want — that\u2019s why we do a site visit and give you a clear, fixed quote with no surprises. Most homes start with a hybrid inverter, battery and panel package sized to their bill. With electricity prices climbing every year, most systems pay for themselves in around 3–5 years and keep saving for decades.'],
  ['Do you issue a Certificate of Compliance?', 'Always. Every installation and electrical job is signed off to SANS 10142-1 with a CoC — what your insurer and the law require.'],
  ['Can you fix or maintain my existing system?', 'Yes. We service and repair existing solar and electrical installations — cleaning, isolators, wiring, DB boards and getting a stopped system running again.'],
  ['Which areas do you cover?', 'Right across the Western Cape — Cape Town, the Northern Suburbs, Helderberg, the Winelands and out to the West Coast — plus farms and smallholdings. Not sure if we reach you? Just call.'],
];
function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <div id="faq" style={{ background: 'var(--ink-50)', borderTop: '1px solid var(--border-subtle)', scrollMarginTop: 70 }}>
      <SiteSection narrow style={{ paddingTop: 76, paddingBottom: 76 }}>
        <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto 36px' }}>
          <SiteEyebrow>FAQ</SiteEyebrow>
          <SiteH2 style={{ marginTop: 14 }}>Questions, answered</SiteH2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {FAQS.map(([q, a], i) => {
            const on = open === i;
            return (
              <div key={i} style={{ background: 'var(--surface-card)', border: '1px solid ' + (on ? 'var(--border-strong)' : 'var(--border-subtle)'), borderRadius: 'var(--radius-lg)', boxShadow: on ? 'var(--shadow-sm)' : 'none', overflow: 'hidden' }}>
                <button onClick={() => setOpen(on ? -1 : i)} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 14, padding: '18px 20px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
                  <span style={{ flex: 1, fontSize: 16.5, fontWeight: 700, color: 'var(--text-strong)' }}>{q}</span>
                  <span style={{ flex: 'none', color: 'var(--brand)', transform: on ? 'rotate(45deg)' : 'none', transition: 'transform var(--dur-base) var(--ease-out)' }}><Icon name="plus" size={20} /></span>
                </button>
                {on && <div style={{ padding: '0 20px 20px', fontSize: 15, color: 'var(--text-body)', lineHeight: 1.6 }}>{a}</div>}
              </div>
            );
          })}
        </div>
      </SiteSection>
    </div>
  );
}

/* ---- Final CTA --------------------------------------------------------- */
function FinalCTA() {
  return (
    <SiteSection style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div style={{ position: 'relative', overflow: 'hidden', background: 'var(--ink-950)', borderRadius: 'var(--radius-2xl)', padding: 'clamp(28px, 5vw, 52px)', boxShadow: 'var(--shadow-xl)' }}>
        <div style={{ position: 'absolute', right: -50, top: -50, width: 260, height: 260, opacity: .08, color: '#fff' }}><Icon name="sun" size={260} strokeWidth={1.1} /></div>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 44, alignItems: 'center' }} className="pvr-hero-grid">
          <div>
            <SiteEyebrow tone="light">Ready when you are</SiteEyebrow>
            <SiteH2 light style={{ marginTop: 14 }}>Get your free quote today</SiteH2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,.75)', marginTop: 14, lineHeight: 1.6, maxWidth: 440 }}>Tell us what you need and we'll call you back within the hour with honest advice and a fixed price.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 22 }}>
              {[['phone', 'Call us', PVR_CONTACT.phoneLabel, PVR_CONTACT.phoneHref], ['mail', 'Email', PVR_CONTACT.email, PVR_CONTACT.emailHref]].map(([ic, k, v, href]) => (
                <a key={k} href={href} style={{ display: 'flex', alignItems: 'center', gap: 12, color: '#fff' }}>
                  <span style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'rgba(255,255,255,.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}><Icon name={ic} size={19} /></span>
                  <span><span style={{ fontSize: 12.5, color: 'rgba(255,255,255,.55)', display: 'block' }}>{k}</span><b style={{ fontFamily: 'var(--font-mono)', fontSize: 15.5 }}>{v}</b></span>
                </a>
              ))}
            </div>
          </div>
          <Card variant="elevated" padding="lg">
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-strong)', marginBottom: 4 }}>Request a callback</div>
            <div style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 14 }}>Free, no obligation.</div>
            <QuoteForm />
          </Card>
        </div>
      </div>
    </SiteSection>
  );
}

Object.assign(window, { SiteTestimonials: Testimonials, SiteServiceAreas: ServiceAreas, SiteFAQ: FAQ, SiteFinalCTA: FinalCTA });
})();