/* PVRescue marketing site — shared chrome: contact, helpers, QuoteForm, header, footer, floating actions. */
(function(){
const { Button, Icon, Input, Select, Card, Badge, BrandChip } = window.PVRescueDesignSystem_b3a34e;

/* ---- Contact details -------------------------------------------------- */
const CONTACT = {
  phoneLabel: '074 303 9999',
  phoneHref: 'tel:+27743039999',
  waLabel: '074 303 9999',
  waHref: 'https://wa.me/27743039999',
  email: 'gerhard@pvrescue.co.za',
  emailHref: 'mailto:gerhard@pvrescue.co.za',
};
/* Web3Forms — quote-form leads are emailed to whichever address is set for this
   access key in the Web3Forms dashboard (set that to gerhard@pvrescue.co.za). */
const WEB3FORMS_KEY = '5c665032-7b25-41cf-b0d3-96e1269a6d8f';

const SERVICES_LIST = ['New solar installation', 'Battery backup', 'Pi²R solar geyser', 'Electrical work', 'Maintenance / repair', 'Farm / agricultural'];

const WA_SVG = '<svg viewBox="0 0 32 32" width="100%" height="100%" fill="currentColor" aria-hidden="true"><path d="M16.04 4C9.9 4 4.9 9 4.9 15.14c0 2.18.64 4.21 1.74 5.92L4.5 28l7.12-2.06a11.1 11.1 0 0 0 4.42.92h.01c6.14 0 11.14-5 11.14-11.14 0-2.98-1.16-5.78-3.27-7.89A11.06 11.06 0 0 0 16.04 4Zm0 20.4h-.01c-1.38 0-2.74-.37-3.92-1.07l-.28-.17-2.92.84.78-2.85-.18-.29a9.23 9.23 0 0 1-1.42-4.9c0-5.1 4.16-9.25 9.27-9.25 2.48 0 4.8.97 6.55 2.72a9.2 9.2 0 0 1 2.71 6.55c0 5.1-4.15 9.26-9.26 9.26Zm5.08-6.93c-.28-.14-1.65-.81-1.9-.9-.26-.1-.44-.14-.63.14-.18.28-.72.9-.88 1.08-.16.18-.32.21-.6.07-.28-.14-1.18-.43-2.24-1.38-.83-.74-1.39-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.32.42-.49.14-.16.18-.28.28-.46.09-.18.05-.35-.02-.49-.07-.14-.63-1.51-.86-2.07-.23-.55-.46-.47-.63-.48l-.54-.01c-.18 0-.49.07-.74.35-.26.28-.97.95-.97 2.32 0 1.37 1 2.69 1.14 2.87.14.18 1.96 3 4.76 4.2.66.29 1.18.46 1.59.59.67.21 1.27.18 1.75.11.53-.08 1.65-.67 1.88-1.32.23-.65.23-1.2.16-1.32-.07-.12-.25-.19-.53-.33Z"/></svg>';

function WAIcon({ size = 20 }) {
  return React.createElement('span', { style: { width: size, height: size, display: 'inline-flex', flex: 'none' }, dangerouslySetInnerHTML: { __html: WA_SVG } });
}

function Eyebrow({ children, tone }) {
  return React.createElement('span', { className: 'pvr-eyebrow', style: tone === 'light' ? { color: '#fff' } : undefined }, children);
}

function Section({ id, children, style, narrow }) {
  return (
    <section id={id} style={style}>
      <div style={{ maxWidth: narrow ? 920 : 1180, margin: '0 auto', padding: '0 24px' }}>{children}</div>
    </section>
  );
}

function H2({ children, light, style }) {
  return <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', fontSize: 'clamp(30px, 4.4vw, 44px)', lineHeight: .98, letterSpacing: '-.01em', color: light ? '#fff' : 'var(--text-strong)', textWrap: 'balance', ...style }}>{children}</h2>;
}

/* ---------------------------------------------------------------- QuoteForm */
function QuoteForm({ variant = 'light', compact = false }) {
  const [done, setDone] = React.useState(null);
  const dark = variant === 'dark';
  const submit = async (e) => {
    e.preventDefault();
    const form = e.target;
    const data = new FormData(form);
    data.append('access_key', WEB3FORMS_KEY);
    data.append('subject', 'New quote request — PVRescue website');
    data.append('from_name', 'PVRescue Website');
    try {
      const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', body: data });
      const json = await res.json();
      if (json.success) { setDone('PVR-' + Math.floor(2000 + Math.random() * 7999)); form.reset(); }
      else { alert('Sorry — something went wrong. Please call or WhatsApp us on +27 74 303 9999.'); }
    } catch (err) {
      alert('Network error. Please call or WhatsApp us on +27 74 303 9999.');
    }
  };

  if (done) {
    return (
      <div style={{ textAlign: 'center', padding: compact ? '8px 4px' : '12px 4px' }}>
        <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--status-healthy-tint)', color: 'var(--status-healthy)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px' }}>
          <Icon name="circle-check" size={30} />
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', fontSize: 24, color: dark ? '#fff' : 'var(--text-strong)' }}>Request received</div>
        <p style={{ fontSize: 14.5, color: dark ? 'rgba(255,255,255,.7)' : 'var(--text-muted)', marginTop: 8, lineHeight: 1.5 }}>We'll call you back within <b style={{ color: dark ? '#fff' : 'var(--text-strong)' }}>1 business hour</b>. Your ref is <b style={{ fontFamily: 'var(--font-mono)', color: 'var(--brand)' }}>{done}</b>.</p>
        <a href={CONTACT.waHref} style={{ marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 8, background: '#25D366', color: '#fff', fontWeight: 700, fontSize: 14.5, padding: '11px 18px', borderRadius: 'var(--radius-md)' }}><WAIcon size={18} />Chat on WhatsApp now</a>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: compact ? 10 : 12 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <Input name="name" placeholder="Your name" required aria-label="Your name" />
        <Input name="phone" placeholder="Phone number" leadingIcon={<Icon name="phone" size={17} />} required aria-label="Phone number" />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 10 }}>
        <Select name="service" defaultValue="" placeholder="What do you need?" aria-label="Service" required>
          {SERVICES_LIST.map((s) => <option key={s}>{s}</option>)}
        </Select>
        <Input name="suburb" placeholder="Suburb / town" leadingIcon={<Icon name="map-pin" size={17} />} aria-label="Suburb" />
      </div>
      <Button type="submit" size="lg" fullWidth leadingIcon={<Icon name="file-check" size={19} />}>Get my free quote</Button>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontSize: 12.5, color: dark ? 'rgba(255,255,255,.6)' : 'var(--text-muted)' }}>
        <Icon name="shield-check" size={14} style={{ color: 'var(--status-healthy)' }} /> No obligation · we reply within the hour
      </div>
    </form>
  );
}

/* ------------------------------------------------------------------- Header */
const NAV = [['services', 'Services'], ['how', 'How it works'], ['why', 'Why us'], ['areas', 'Areas'], ['faq', 'FAQ']];
function jump(id) { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 76, behavior: 'smooth' }); }

function SiteHeader() {
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 60, background: 'rgba(255,255,255,.94)', backdropFilter: 'saturate(1.4) blur(8px)', borderBottom: '1px solid var(--border-default)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 24px', height: 72, display: 'flex', alignItems: 'center', gap: 18 }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center' }} onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
          <img src="assets/logos/pvrescue-logo-black.png" alt="PVRescue" style={{ height: 58 }} />
        </a>
        <nav style={{ display: 'flex', gap: 2, marginLeft: 10 }} className="pvr-desk">
          {NAV.map(([id, label]) => (
            <button key={id} onClick={() => jump(id)} style={{ border: 'none', background: 'transparent', color: 'var(--text-muted)', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 15, cursor: 'pointer', padding: '8px 12px', borderRadius: 'var(--radius-sm)' }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-strong)'} onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}>{label}</button>
          ))}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href={CONTACT.phoneHref} className="pvr-desk" style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-strong)', fontWeight: 700, fontFamily: 'var(--font-mono)', fontSize: 15 }}>
            <Icon name="phone" size={16} style={{ color: 'var(--brand)' }} />{CONTACT.phoneLabel}
          </a>
          <Button size="sm" leadingIcon={<Icon name="file-check" size={16} />} onClick={() => jump('quote')}>Get a quote</Button>
        </div>
      </div>
    </header>
  );
}

/* ------------------------------------------------------------------- Footer */
function FootCol({ title, children }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,.45)', marginBottom: 14, fontWeight: 500 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>{children}</div>
    </div>
  );
}
function FLink({ children, href, onClick }) {
  return <a href={href || '#'} onClick={onClick} style={{ color: 'rgba(255,255,255,.78)', fontSize: 14.5, cursor: 'pointer' }}>{children}</a>;
}

function SiteFooter() {
  return (
    <footer style={{ background: 'var(--ink-950)', color: '#fff', paddingTop: 60 }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1.1fr', gap: 36, paddingBottom: 44 }} className="pvr-foot-grid">
          <div>
            <img src="assets/logos/pvrescue-logo-black.png" alt="PVRescue" style={{ height: 42, background: '#fff', borderRadius: 'var(--radius-md)', padding: '8px 12px' }} />
            <p style={{ color: 'rgba(255,255,255,.6)', fontSize: 14.5, marginTop: 16, maxWidth: 280, lineHeight: 1.6 }}>Solar &amp; electrical across the Western Cape — homes, businesses and farms. Installed right, maintained for life.</p>
            <div style={{ display: 'flex', gap: 8, marginTop: 18, flexWrap: 'wrap' }}>
              <BrandChip brand="sunsynk" /><BrandChip brand="deye" /><BrandChip brand="victron" /><BrandChip brand="pi2r" /><BrandChip brand="sigenergy" /><BrandChip brand="atess" />
            </div>
          </div>
          <FootCol title="Services">
            <FLink onClick={() => jump('services')}>Solar installations</FLink>
            <FLink onClick={() => jump('services')}>Battery backup</FLink>
            <FLink onClick={() => jump('services')}>Pi²R solar geysers</FLink>
            <FLink onClick={() => jump('services')}>Electrical work</FLink>
            <FLink onClick={() => jump('services')}>Maintenance &amp; repair</FLink>
            <FLink onClick={() => jump('services')}>Farms &amp; agriculture</FLink>
          </FootCol>
          <FootCol title="Areas">
            <FLink onClick={() => jump('areas')}>Cape Town</FLink>
            <FLink onClick={() => jump('areas')}>Bellville</FLink>
            <FLink onClick={() => jump('areas')}>Durbanville</FLink>
            <FLink onClick={() => jump('areas')}>Somerset West</FLink>
            <FLink onClick={() => jump('areas')}>Paarl</FLink>
          </FootCol>
          <FootCol title="Get in touch">
            <FLink href={CONTACT.phoneHref}><b style={{ color: '#fff', fontFamily: 'var(--font-mono)' }}>{CONTACT.phoneLabel}</b></FLink>
            <FLink href={CONTACT.waHref}>WhatsApp · {CONTACT.waLabel}</FLink>
            <FLink href={CONTACT.emailHref}>{CONTACT.email}</FLink>
            <div style={{ marginTop: 6 }}><Button size="sm" variant="primary" onClick={() => jump('quote')}>Get a free quote</Button></div>
          </FootCol>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,.12)', padding: '22px 0 36px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <span style={{ color: 'rgba(255,255,255,.4)', fontSize: 13 }}>© 2026 PVRescue (Pty) Ltd · Registered electrical contractor · SANS 10142-1</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'rgba(255,255,255,.55)', fontSize: 13, fontFamily: 'var(--font-mono)' }}><Icon name="shield-check" size={15} style={{ color: 'var(--status-healthy)' }} /> CoC on every job</span>
        </div>
      </div>
    </footer>
  );
}

/* ----------------------------------------------------- Floating quick actions */
function FloatingActions() {
  return (
    <>
      <a href={CONTACT.waHref} aria-label="Chat on WhatsApp" title="Chat on WhatsApp"
        style={{ position: 'fixed', right: 20, bottom: 20, zIndex: 70, width: 58, height: 58, borderRadius: '50%', background: '#25D366', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 10px 26px -6px rgba(37,211,102,.6)' }} className="pvr-wa-float">
        <WAIcon size={30} />
      </a>
      <div className="pvr-callbar" style={{ position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 65, display: 'none', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--border-default)', borderTop: '1px solid var(--border-default)' }}>
        <a href={CONTACT.phoneHref} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, background: 'var(--brand)', color: '#fff', fontWeight: 700, fontSize: 15, padding: '14px 0' }}><Icon name="phone" size={18} />Call now</a>
        <a href={CONTACT.waHref} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, background: '#25D366', color: '#fff', fontWeight: 700, fontSize: 15, padding: '14px 0' }}><WAIcon size={18} />WhatsApp</a>
      </div>
    </>
  );
}

Object.assign(window, { PVR_CONTACT: CONTACT, PVR_SERVICES_LIST: SERVICES_LIST, WAIcon, SiteEyebrow: Eyebrow, SiteSection: Section, SiteH2: H2, QuoteForm, SiteHeader, SiteFooter, FloatingActions, siteJump: jump });
})();