/* PVRescue marketing site — hero + trust bar. */
(function(){
const { Button, Card, Icon, Badge } = window.PVRescueDesignSystem_b3a34e;
const { SiteSection, SiteEyebrow, QuoteForm, PVR_CONTACT, WAIcon, siteJump } = window;

function Stars({ size = 16 }) {
  return <span style={{ display: 'inline-flex', gap: 1 }}>{[0,1,2,3,4].map((i) => <Icon key={i} name="star" size={size} style={{ color: 'var(--amber-500)', fill: 'var(--amber-500)' }} />)}</span>;
}

function Hero() {
  return (
    <div id="top" style={{ position: 'relative', backgroundColor: 'var(--ink-950)', backgroundImage: "linear-gradient(100deg, rgba(19,17,16,.94) 0%, rgba(19,17,16,.82) 40%, rgba(19,17,16,.5) 72%, rgba(19,17,16,.4) 100%), url('assets/work/g01.png')", backgroundSize: 'cover', backgroundPosition: 'center 40%', borderBottom: '3px solid var(--brand)' }}>
      <SiteSection style={{ paddingTop: 72, paddingBottom: 72, position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.08fr .92fr', gap: 48, alignItems: 'center' }} className="pvr-hero-grid">
          <div>
            <SiteEyebrow tone="light">Western Cape · cut your power bill</SiteEyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', fontSize: 'clamp(40px, 6vw, 66px)', lineHeight: .94, letterSpacing: '-.01em', color: '#fff', margin: '16px 0 0', textWrap: 'balance', textShadow: '0 2px 30px rgba(0,0,0,.4)' }}>
              Power prices keep rising.<br /><span style={{ color: 'var(--red-400)' }}>Solar pays you back.</span>
            </h1>
            <p style={{ fontSize: 'clamp(16px,1.6vw,19px)', lineHeight: 1.6, color: 'rgba(255,255,255,.86)', margin: '20px 0 0', maxWidth: 520 }}>
              Full solar &amp; battery installs, Pi²R solar geysers and electrical work across the Western Cape — sized for the fastest payback, and ready if load-shedding returns.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 26, flexWrap: 'wrap' }}>
              <Button size="lg" leadingIcon={<Icon name="phone" size={20} />} href={PVR_CONTACT.phoneHref}>Call {PVR_CONTACT.phoneLabel}</Button>
              <a href={PVR_CONTACT.waHref} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9, height: 52, padding: '0 24px', borderRadius: 'var(--radius-md)', background: '#25D366', color: '#fff', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 17 }}><WAIcon size={22} />WhatsApp us</a>
            </div>
            <div style={{ display: 'flex', gap: 22, marginTop: 28, flexWrap: 'wrap', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Stars />
                <span style={{ fontSize: 14, color: 'rgba(255,255,255,.8)' }}><b style={{ color: '#fff' }}>4.9</b> · 124 reviews</span>
              </div>
              {[['shield-check', 'Registered electricians'], ['file-check', 'CoC on every job']].map(([ic, t]) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 7, color: 'rgba(255,255,255,.8)', fontSize: 14, fontWeight: 500 }}>
                  <Icon name={ic} size={17} style={{ color: 'var(--status-healthy)' }} />{t}
                </div>
              ))}
            </div>
          </div>

          <Card id="quote" variant="elevated" padding="lg" style={{ scrollMarginTop: 90 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
              <span style={{ width: 38, height: 38, borderRadius: 'var(--radius-md)', background: 'var(--brand-tint)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}><Icon name="file-check" size={20} /></span>
              <div>
                <div style={{ fontSize: 19, fontWeight: 700, color: 'var(--text-strong)' }}>Get your free quote</div>
                <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>60-second form — we call you back within the hour.</div>
              </div>
            </div>
            <div style={{ marginTop: 14 }}><QuoteForm /></div>
          </Card>
        </div>
      </SiteSection>
    </div>
  );
}

const TRUST = [
  ['hard-hat', 'Registered & insured', 'Qualified electricians'],
  ['trending-up', 'Pays for itself', 'Typical 3–5 yr payback'],
  ['sun', '100+ installs', 'Across the Western Cape'],
  ['shield-check', 'Workmanship warranty', 'On every installation'],
];

function TrustBar() {
  return (
    <div style={{ background: 'var(--surface-card)', borderBottom: '1px solid var(--border-subtle)' }}>
      <SiteSection style={{ paddingTop: 22, paddingBottom: 22 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }} className="pvr-trust-grid">
          {TRUST.map(([ic, t, s]) => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--ink-50)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}><Icon name={ic} size={21} /></span>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--text-strong)', lineHeight: 1.2 }}>{t}</div>
                <div style={{ fontSize: 12.5, color: 'var(--text-muted)' }}>{s}</div>
              </div>
            </div>
          ))}
        </div>
      </SiteSection>
    </div>
  );
}

Object.assign(window, { SiteHero: Hero, SiteTrustBar: TrustBar, SiteStars: Stars });
})();