/* PVRescue marketing site — services, work gallery, how it works, why us, brands. */
(function(){
const { Button, Card, Icon, Badge, BrandChip } = window.PVRescueDesignSystem_b3a34e;
const { SiteSection, SiteEyebrow, SiteH2, siteJump } = window;

const SERVICES = [
  { ic: 'sun', t: 'Solar installations', d: 'A right-sized solar + battery system that slashes your bill and pays for itself in a few years. Sunsynk, Deye & Victron.' },
  { ic: 'battery', t: 'Battery backup', d: 'Keep the lights, Wi-Fi and fridge on through any stage of load-shedding — add backup to an existing system.' },
  { ic: 'thermometer', t: 'Pi²R solar geysers', d: 'Heat your geyser straight off the sun — no batteries, no element swap. One of the fastest ways to save.' },
  { ic: 'plug', t: 'Electrical work', d: 'DB boards, wiring, faults and three-phase — by registered electricians, signed off with a CoC.' },
  { ic: 'wrench', t: 'Maintenance & repair', d: 'Servicing, cleaning and fault-finding to keep your solar and electrical systems running at their best.' },
  { ic: 'house', t: 'Farms & agriculture', d: 'Solar and three-phase power for boreholes, sheds, workshops and off-grid farm setups.' },
];

function Services() {
  return (
    <SiteSection id="services" style={{ paddingTop: 80, paddingBottom: 28, scrollMarginTop: 80 }}>
      <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 40px' }}>
        <SiteEyebrow>What we do</SiteEyebrow>
        <SiteH2 style={{ marginTop: 14 }}>Solar &amp; electrical, end to end</SiteH2>
        <p style={{ fontSize: 17, color: 'var(--text-muted)', marginTop: 12 }}>One registered team to install it, maintain it and keep your power on.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }} className="pvr-svc-grid">
        {SERVICES.map((s) => (
          <Card key={s.t} interactive accent={!!s.tag} padding="lg" onClick={() => siteJump('quote')}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
              <span style={{ width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--brand-tint)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={s.ic} size={25} /></span>
              {s.tag && <Badge tone="brand" dot>{s.tag}</Badge>}
            </div>
            <h3 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-strong)', marginBottom: 8 }}>{s.t}</h3>
            <p style={{ fontSize: 14.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>{s.d}</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 16, color: 'var(--text-brand)', fontWeight: 600, fontSize: 14 }}>Get a quote <Icon name="arrow-right" size={16} /></div>
          </Card>
        ))}
      </div>
    </SiteSection>
  );
}

/* ---- Why now: rising costs · ROI · load-shedding returns ---------------- */
const NOW = [
  ['trending-up', 'Electricity only gets pricier', 'Eskom tariffs have climbed every single year. Solar locks in your power cost instead of paying more every winter.'],
  ['gauge', 'Your system pays for itself', 'Most homes recover the cost in around 3\u20135 years — then it\u2019s years of near-free power from a system built to last 20+.'],
  ['zap', 'Load-shedding could return', 'It\u2019s quiet now, but the grid is still under strain. Being ready means you are covered if it comes back — installing now beats the rush.'],
];
function WhyNow() {
  const bars = [44, 54, 66, 80, 96];
  return (
    <div style={{ background: 'var(--ink-50)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <SiteSection style={{ paddingTop: 76, paddingBottom: 76 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 48, alignItems: 'center' }} className="pvr-hero-grid">
          <div>
            <SiteEyebrow>Why now</SiteEyebrow>
            <SiteH2 style={{ marginTop: 14 }}>The best time to go solar is while the grid is quiet</SiteH2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 24 }}>
              {NOW.map(([ic, t, d]) => (
                <div key={t} style={{ display: 'flex', gap: 14 }}>
                  <span style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--brand-tint)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}><Icon name={ic} size={22} /></span>
                  <div>
                    <h3 style={{ fontSize: 17, fontWeight: 700, color: 'var(--text-strong)' }}>{t}</h3>
                    <p style={{ fontSize: 14.5, color: 'var(--text-muted)', lineHeight: 1.55, marginTop: 3 }}>{d}</p>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 26 }}><Button size="lg" leadingIcon={<Icon name="file-check" size={19} />} onClick={() => siteJump('quote')}>Lock in today's price</Button></div>
          </div>
          <Card variant="elevated" padding="lg">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
              <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-strong)' }}>What you're really paying</div>
              <Badge tone="critical">Bill rising</Badge>
            </div>
            <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>Grid vs locked-in solar (illustrative)</div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, height: 156, marginTop: 18, position: 'relative' }}>
              {bars.map((h, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7, height: '100%', justifyContent: 'flex-end' }}>
                  <div style={{ width: '100%', height: h + '%', borderRadius: '5px 5px 2px 2px', background: 'linear-gradient(var(--red-400), var(--red-600))' }} />
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--text-subtle)' }}>Yr {i + 1}</span>
                </div>
              ))}
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 52, borderTop: '2px dashed var(--status-healthy)' }}>
                <span style={{ position: 'absolute', right: 0, top: -19, fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, color: 'var(--status-healthy)' }}>solar (fixed)</span>
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--border-subtle)' }}>
              <div><div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-muted)' }}>Grid, 5 yrs</div><div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 17, color: 'var(--status-critical)' }}>keeps rising</div></div>
              <div style={{ textAlign: 'right' }}><div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-muted)' }}>With solar</div><div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 17, color: 'var(--status-healthy)' }}>locked in</div></div>
            </div>
          </Card>
        </div>
      </SiteSection>
    </div>
  );
}

/* ---- Equipment we install (real product imagery) ----------------------- */
const EQUIP = [
  ['assets/products/inverter-sunsynk.png', 'Sunsynk hybrid inverter', 'Inverter'],
  ['assets/products/inverter-deye.png', 'Deye hybrid inverter', 'Inverter'],
  ['assets/products/inverter-victron.png', 'Victron MultiPlus-II', 'Inverter'],
  ['assets/products/battery-freedomwon.png', 'Freedom Won Lite', 'Battery'],
  ['assets/products/battery-volta.png', 'Volta lithium battery', 'Battery'],
  ['assets/products/geyser-pi2r.png', 'Pi²R iX solar geyser', 'Solar geyser'],
];
function Equipment() {
  return (
    <SiteSection id="equipment" style={{ paddingTop: 80, paddingBottom: 40, scrollMarginTop: 80 }}>
      <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 40px' }}>
        <SiteEyebrow>Premium equipment</SiteEyebrow>
        <SiteH2 style={{ marginTop: 14 }}>The best kit, installed right</SiteH2>
        <p style={{ fontSize: 17, color: 'var(--text-muted)', marginTop: 12 }}>We fit trusted, proven brands — not the cheapest box on the shelf — so your system performs and lasts.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }} className="pvr-svc-grid">
        {EQUIP.map(([img, n, cat]) => (
          <Card key={n} padding="none" interactive onClick={() => siteJump('quote')} style={{ overflow: 'hidden' }}>
            <div style={{ aspectRatio: '4 / 3', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 26, borderBottom: '1px solid var(--border-subtle)' }}>
              <img src={img} alt={n} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
            </div>
            <div style={{ padding: '15px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
              <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-strong)' }}>{n}</div>
              <Badge tone="neutral">{cat}</Badge>
            </div>
          </Card>
        ))}
      </div>
    </SiteSection>
  );
}

/* ---- How it works ------------------------------------------------------ */
const STEPS = [
  { ic: 'phone', t: 'Get in touch', d: 'Call, WhatsApp or send the quote form. Tell us what you need.' },
  { ic: 'map-pin', t: 'Site visit', d: 'We assess your home, business or farm and give an honest, fixed quote.' },
  { ic: 'sun', t: 'Install & CoC', d: 'Certified install to SANS 10142-1, tested and handed over with your CoC.' },
  { ic: 'shield-check', t: 'Maintain & support', d: 'Optional maintenance plan and quick call-outs keep it running for years.' },
];
function HowItWorks() {
  return (
    <div id="how" style={{ background: 'var(--ink-50)', scrollMarginTop: 70 }}>
      <SiteSection style={{ paddingTop: 76, paddingBottom: 76 }}>
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 44px' }}>
          <SiteEyebrow>How it works</SiteEyebrow>
          <SiteH2 style={{ marginTop: 14 }}>From first call to CoC</SiteH2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }} className="pvr-svc-grid">
          {STEPS.map((s, i) => (
            <div key={s.t} style={{ position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <span style={{ width: 46, height: 46, borderRadius: '50%', background: 'var(--surface-card)', border: '1px solid var(--border-default)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}><Icon name={s.ic} size={22} /></span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, color: 'var(--text-subtle)' }}>0{i + 1}</span>
              </div>
              <h3 style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-strong)', marginBottom: 6 }}>{s.t}</h3>
              <p style={{ fontSize: 14.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </SiteSection>
    </div>
  );
}

/* ---- Why us ------------------------------------------------------------ */
const WHY = [
  ['shield-check', 'Registered & insured', 'Qualified, registered electricians — every job to SANS 10142-1 with a Certificate of Compliance.'],
  ['file-check', 'Honest, fixed quotes', 'A proper site visit and a clear quote up front. No vague estimates, no surprises on the invoice.'],
  ['sun', 'Quality kit, tidy work', 'Trusted brands — Sunsynk, Deye, Victron, Pi²R — installed neatly and labelled, built to last.'],
  ['wrench', 'We don\u2019t disappear', 'One local team that answers the phone and comes back for maintenance and call-outs.'],
];
function WhyUs() {
  return (
    <SiteSection id="why" style={{ paddingTop: 80, paddingBottom: 80, scrollMarginTop: 70 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '.95fr 1.05fr', gap: 48, alignItems: 'center' }} className="pvr-hero-grid">
        <div style={{ position: 'relative' }}>
          <img src="assets/work/w26.png" alt="PVRescue technician on site" style={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', borderRadius: 'var(--radius-lg)', display: 'block', boxShadow: 'var(--shadow-md)' }} />
        </div>
        <div>
          <SiteEyebrow>Why PVRescue</SiteEyebrow>
          <SiteH2 style={{ marginTop: 14 }}>The team the Cape trusts with the lights</SiteH2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 24 }}>
            {WHY.map(([ic, t, d]) => (
              <div key={t} style={{ display: 'flex', gap: 14 }}>
                <span style={{ width: 42, height: 42, borderRadius: 'var(--radius-md)', background: 'var(--brand-tint)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}><Icon name={ic} size={21} /></span>
                <div>
                  <h3 style={{ fontSize: 16.5, fontWeight: 700, color: 'var(--text-strong)' }}>{t}</h3>
                  <p style={{ fontSize: 14.5, color: 'var(--text-muted)', lineHeight: 1.5, marginTop: 3 }}>{d}</p>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 26 }}><Button size="lg" leadingIcon={<Icon name="file-check" size={19} />} onClick={() => siteJump('quote')}>Get a free quote</Button></div>
        </div>
      </div>
    </SiteSection>
  );
}

/* ---- Our work (real installation photos) ------------------------------- */
const WORK = [
  ['assets/work/hero-victron.png', 'Triple Victron MultiPlus-II install'],
  ['assets/work/g01.png', 'Rooftop solar — Cape Town'],
  ['assets/work/w09.png', 'Commercial inverter & battery bank'],
  ['assets/work/g12.png', 'Rooftop install in progress'],
  ['assets/work/w07.png', 'Victron MultiPlus-II & lithium storage'],
  ['assets/work/w23.png', 'On-site installation'],
  ['assets/work/g16.png', 'Dual MultiPlus-II & Freedom Won stack'],
  ['assets/work/g02.png', 'Farmhouse solar — Winelands'],
  ['assets/work/w13.png', 'Triple inverter & battery rack'],
  ['assets/work/w19.png', 'Distribution board & Cerbo GX'],
  ['assets/work/g05.png', 'Rooftop panel wiring'],
  ['assets/work/w25.png', 'Triple Victron MultiPlus-II'],
  ['assets/work/w05.png', 'Inverter & DB board'],
  ['assets/work/g03.png', 'Aerial view of install'],
  ['assets/work/w18.png', 'Three-phase distribution boards'],
  ['assets/work/w22.png', 'Victron inverter & battery backup'],
  ['assets/work/w08.png', 'Inverters & battery storage'],
  ['assets/work/w11.png', 'DB board & surge protection'],
  ['assets/work/g09.png', 'Inverter & battery board'],
  ['assets/work/w28.png', 'Triple Victron install'],
  ['assets/work/w14.png', 'Stacked distribution boards'],
  ['assets/work/w17.png', 'Inverter & lithium battery'],
  ['assets/work/w03.png', 'Wiring & connections'],
  ['assets/work/w10.png', 'Inverter & battery bank'],
  ['assets/work/w21.png', 'Commercial DB boards'],
  ['assets/work/w06.png', 'Compact inverter & DB board'],
  ['assets/work/w12.png', 'Inverter & battery — indoor'],
  ['assets/work/w24.png', 'Victron MultiPlus-II install'],
  ['assets/work/w15.png', 'Dual inverter & battery rack'],
  ['assets/work/w20.png', 'Electrical enclosure & controls'],
  ['assets/work/w27.png', 'Inverter & battery backup'],
];
function OurWork() {
  const row = [...WORK, ...WORK];
  return (
    <section id="work" style={{ paddingTop: 80, paddingBottom: 48, scrollMarginTop: 80, overflow: 'hidden' }}>
      <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 36px', padding: '0 24px' }}>
        <SiteEyebrow>Our work</SiteEyebrow>
        <SiteH2 style={{ marginTop: 14 }}>Workmanship Gallery</SiteH2>
        <p style={{ fontSize: 17, color: 'var(--text-muted)', marginTop: 12 }}>Recent solar, battery and electrical jobs across the Western Cape.</p>
      </div>
      <div className="pvr-marquee">
        <div className="pvr-marquee__track">
          {row.map(([img, alt], i) => (
            <figure key={i} className="pvr-marquee__item" aria-hidden={i >= WORK.length ? 'true' : undefined}>
              <img src={img} alt={alt} loading="lazy" />
              <figcaption>{alt}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Brands ------------------------------------------------------------ */
function Brands() {
  return (
    <div style={{ background: 'var(--ink-50)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <SiteSection style={{ paddingTop: 30, paddingBottom: 30 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap', justifyContent: 'space-between' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Brands we install &amp; maintain</span>
          <div style={{ display: 'flex', gap: 30, alignItems: 'center', flexWrap: 'wrap' }}>
            <img src="assets/logos/sunsynk-logo.png" alt="Sunsynk" style={{ height: 24, opacity: .8 }} />
            <img src="assets/logos/deye-logo.webp" alt="Deye" style={{ height: 28, opacity: .8 }} />
            <img src="assets/logos/victron-logo.png" alt="Victron" style={{ height: 26, opacity: .85 }} />
            <img src="assets/logos/pi2r-logo.png" alt="Pi2R" style={{ height: 28, opacity: .9 }} />
            <img src="assets/logos/sigenergy-logo.png" alt="Sigenergy" style={{ height: 20, opacity: .85 }} />
            <img src="assets/logos/atess-logo.png" alt="ATESS" style={{ height: 26, opacity: .85 }} />
          </div>
        </div>
      </SiteSection>
    </div>
  );
}

Object.assign(window, { SiteServices: Services, SiteWhyNow: WhyNow, SiteEquipment: Equipment, SiteOurWork: OurWork, SiteHowItWorks: HowItWorks, SiteWhyUs: WhyUs, SiteBrands: Brands });
})();