/* ProTech homepage — photo-forward marketing redesign.
   Sections: photo hero (Google card + trust row + SEER2 chip + motif),
   Google-review trust strip, 4-step blue process band, why-choose/legacy,
   about, services grid with photos, testimonials, coupons, service area, CTA.
   Tweaks (props): accent ('flame'|'cool'), heroPhoto, heroTone ('blue'|'light'),
   heroLayout ('split'|'overlay'). */
(function () {
const { Button, Icon, Card } = window.ProTecDesignSystem_37762d;
const { Eyebrow, Header, Footer, GoogleG, siteWrap, PHONE, PHONE_TEL } = window.ProTecShared;

/* ---- photo library (curated free Unsplash) ---- */
const U = (id, w) => (window.__resources && window.__resources[id]) || `https://images.unsplash.com/${id}?w=${w || 1200}&q=80&auto=format&fit=crop`;
const PHOTOS = {
  tech_indoor: 'photo-1660330589827-da8ab7dd3c02', // tech servicing indoor wall unit
  tech_smile:  'photo-1732395805034-e0bf859665e5', // smiling technician, uniform
  tech_panel:  'photo-1561400555-786780284b67',    // tech at equipment panel
  tech_mask:   'photo-1601659404194-97d2daca8383', // tech with condensers
  pipes:       'photo-1748442001865-5583ec02ae22', // pipes & valves
  rooftop:     'photo-1642749776312-aa42ce20c9f5', // techs on rooftop
  condensers:  'photo-1698479603408-1a66a6d9e80f', // commercial condensers
  ac_wall:     'photo-1718203862467-c33159fdc504', // residential outdoor AC
  ac_side:     'photo-1722131646940-b821a6cc6252', // wall-mounted AC unit
  equip:       'photo-1596495717678-69df9f89c2a3', // controls / smart device
};
const HERO_PHOTO = { tech_indoor: PHOTOS.tech_indoor, tech_smile: PHOTOS.tech_smile, tech_panel: PHOTOS.tech_panel };

const BLUE = '#0C3A66';
const BLUE_DK = '#06294F';

/* ---- small pieces ---- */
function Stars({ size = 15, color = 'var(--flame-500)' }) {
  return (
    <div style={{ display: 'flex', gap: 2 }} aria-label="5 out of 5 stars">
      {[0, 1, 2, 3, 4].map((i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill={color} style={{ display: 'block' }} aria-hidden="true">
          <path d="M12 2l2.9 6.26 6.6.6-4.98 4.42 1.5 6.46L12 16.9 5.98 20.2l1.5-6.46L2.5 8.86l6.6-.6L12 2z" />
        </svg>
      ))}
    </div>
  );
}

function GoogleCard({ style }) {
  return (
    <div style={{ background: '#fff', borderRadius: 'var(--radius-lg)', boxShadow: '0 22px 50px -18px rgba(11,24,38,0.5)', padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 13, border: '1px solid var(--border-subtle)', ...style }}>
      <GoogleG size={34} />
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--ink-900)' }}>5.0</span>
          <Stars size={15} />
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 2 }}>Rated across 2,400+ reviews</div>
      </div>
    </div>
  );
}

function SpecChip({ style }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(11,24,38,0.9)', backdropFilter: 'blur(6px)', border: '1px solid rgba(255,255,255,0.16)', borderRadius: 999, padding: '7px 13px', ...style }}>
      <span style={{ width: 8, height: 8, background: 'var(--flame-500)' }} />
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.05em', color: '#fff' }}>SEER2 18.0 · 3.5 TON</span>
    </div>
  );
}

function DotsGrid({ color = 'rgba(255,255,255,0.5)', style }) {
  return (
    <svg width="120" height="88" viewBox="0 0 120 88" style={style} aria-hidden="true">
      {Array.from({ length: 4 }).map((_, r) => Array.from({ length: 6 }).map((_, c) => (
        <circle key={r + '-' + c} cx={6 + c * 22} cy={6 + r * 22} r="3" fill={color} />
      )))}
    </svg>
  );
}

function Zigzag({ color = 'rgba(255,255,255,0.55)', style }) {
  return (
    <svg width="120" height="34" viewBox="0 0 120 34" fill="none" style={style} aria-hidden="true">
      {[0, 40, 80].map((x) => (
        <path key={x} d={`M${x} 30 L${x + 20} 6 L${x + 40} 30`} stroke={color} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
      ))}
    </svg>
  );
}

/* ---- HERO ---- */
function Hero({ photo, tone, layout }) {
  const light = tone === 'light';
  const overlay = layout === 'overlay';
  const heading = (
    <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 62, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.03, color: light ? 'var(--ink-900)' : '#fff', margin: 0 }}>
      Your trusted HVAC experts —<br /><span style={{ position: 'relative', display: 'inline-block' }}>keeping you comfortable.<span style={{ position: 'absolute', left: 0, right: 0, bottom: 4, height: 6, background: 'var(--flame-500)', opacity: 0.95, borderRadius: 2 }} /></span>
    </h1>
  );
  const sub = (
    <p style={{ fontSize: 18.5, lineHeight: 1.6, color: light ? 'var(--text-muted)' : 'rgba(255,255,255,0.86)', margin: '22px 0 30px', maxWidth: 500 }}>
      Experience the perfect balance of comfort &amp; efficiency with expert heating &amp; cooling — fast repairs, honest installs, and same-day service across the Lowcountry.
    </p>
  );
  const ctas = (
    <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
      <a href="book.html" style={{ textDecoration: 'none' }}><Button variant="primary" size="lg" iconRight="arrow-right">Schedule your service</Button></a>
      <a href="services.html" style={{ textDecoration: 'none' }}>
        <Button variant={light ? 'secondary' : 'secondary'} size="lg" iconRight="arrow-right" style={light ? {} : { color: '#fff', borderColor: 'rgba(255,255,255,0.4)', background: 'transparent' }}>Learn more</Button>
      </a>
    </div>
  );
  const trustRow = (
    <div style={{ marginTop: 40 }}>
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, fontWeight: 600, color: light ? 'var(--text-muted)' : 'rgba(255,255,255,0.8)', marginBottom: 14 }}>Trusted by homes &amp; businesses across South Carolina</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 26, flexWrap: 'wrap' }}>
        {['NATE Certified', 'BBB A+', 'EPA 608', 'Trane Dealer', 'Carrier Pro'].map((n) => (
          <span key={n} style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, letterSpacing: '-0.01em', color: light ? 'var(--neutral-400)' : 'rgba(255,255,255,0.62)' }}>{n}</span>
        ))}
      </div>
    </div>
  );

  const photoUrl = U(photo, 1400);

  if (overlay) {
    return (
      <section className={`pt-hero ${light ? '' : 'pt-hero-dark'}`} style={{ position: 'relative', overflow: 'hidden', background: 'var(--ink-900)' }}>
        <img src={photoUrl} alt="HVAC technician at work" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div className="pt-hero-scrim" style={{ position: 'absolute', inset: 0, background: light
          ? 'linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.82) 42%, rgba(255,255,255,0.15) 78%, transparent 100%)'
          : `linear-gradient(90deg, ${BLUE_DK}f2 0%, ${BLUE}e0 44%, ${BLUE}80 70%, rgba(11,24,38,0.25) 100%)` }} />
        <div style={{ ...siteWrap, position: 'relative', padding: '92px 32px 96px' }}>
          <div style={{ maxWidth: 620 }}>
            {heading}{sub}{ctas}{trustRow}
          </div>
        </div>
        <GoogleCard style={{ position: 'absolute', right: 40, bottom: 40, zIndex: 3 }} />
        <SpecChip style={{ position: 'absolute', right: 40, top: 40, zIndex: 3 }} />
        <DotsGrid color={light ? 'rgba(42,95,208,0.25)' : 'rgba(255,255,255,0.4)'} style={{ position: 'absolute', left: 24, bottom: 90 }} />
        <Zigzag color={light ? 'rgba(238,98,52,0.5)' : 'rgba(255,255,255,0.5)'} style={{ position: 'absolute', left: 30, bottom: 40 }} />
      </section>
    );
  }

  // split layout
  return (
    <section className={`pt-hero ${light ? '' : 'pt-hero-dark'}`} style={{ position: 'relative', overflow: 'hidden', background: light ? 'var(--surface-page)' : BLUE }}>
      {!light && <div className="pt-hero-scrim" style={{ position: 'absolute', inset: 0, background: `linear-gradient(120deg, ${BLUE_DK} 0%, ${BLUE} 55%)` }} />}
      <div style={{ ...siteWrap, position: 'relative', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center', padding: '78px 32px 84px' }}>
        <div>
          {heading}{sub}{ctas}{trustRow}
        </div>
        <div style={{ position: 'relative', alignSelf: 'stretch', minHeight: 480 }}>
          <div style={{ position: 'absolute', inset: 0, borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: '0 30px 70px -24px rgba(7,15,25,0.6)' }}>
            <img src={photoUrl} alt="HVAC technician servicing a unit" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <SpecChip style={{ position: 'absolute', left: 18, top: 18, zIndex: 3 }} />
          <GoogleCard style={{ position: 'absolute', left: -26, bottom: -22, zIndex: 3, maxWidth: 250 }} />
        </div>
      </div>
      <DotsGrid color="rgba(255,255,255,0.4)" style={{ position: 'absolute', right: 30, top: 40, opacity: light ? 0 : 1 }} />
      <Zigzag color="rgba(255,255,255,0.55)" style={{ position: 'absolute', left: 26, bottom: 26, opacity: light ? 0 : 1 }} />
    </section>
  );
}

/* ---- GOOGLE TRUST STRIP ---- */
function TrustStrip() {
  return (
    <section style={{ background: '#fff', borderBottom: '1px solid var(--border-subtle)', padding: '26px 0' }}>
      <div style={{ ...siteWrap, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 40, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <GoogleG size={30} />
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--ink-900)' }}>5.0</span>
              <Stars size={15} />
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--text-muted)' }}>Best over 2,400 Google reviews</div>
          </div>
        </div>
        <span style={{ width: 1, height: 34, background: 'var(--border-default)' }} />
        {[['shield-check', 'NATE-certified technicians'], ['clock', 'Same-day service'], ['badge-check', 'Upfront flat-rate pricing']].map(([ic, t]) => (
          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 14.5, fontWeight: 600, color: 'var(--text-body)' }}>
            <Icon name={ic} size={19} color="var(--flame-500)" /> {t}
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---- 4-STEP PROCESS (blue band) ---- */
const STEPS = [
  ['calendar-check', 'Schedule a consultation', 'Book online in under two minutes or call our 24/7 line for emergencies.'],
  ['clipboard-list', 'Get a customized plan', 'We assess your home or business and lay out clear, flat-rate options.'],
  ['smile', 'Approve & relax', 'You decide before any work begins — no pressure, no surprise fees.'],
  ['wrench', 'Professional install', 'NATE-certified techs arrive on time with the right equipment and clean up after.'],
];
function Process() {
  return (
    <section style={{ background: BLUE, position: 'relative', overflow: 'hidden', padding: '84px 0' }}>
      <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(120deg, ${BLUE_DK} 0%, ${BLUE} 60%)` }} />
      <div style={{ ...siteWrap, position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <span style={{ width: 9, height: 9, background: 'var(--flame-500)' }} />
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase' }}>How it works</span>
        </div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, letterSpacing: '-0.02em', color: '#fff', margin: '0 0 8px', maxWidth: 620 }}>A simple &amp; hassle-free process</h2>
        <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.82)', margin: '0 0 46px', maxWidth: 560 }}>We make heating &amp; cooling easy, efficient, and stress-free — from first call to final check.</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {STEPS.map(([ic, t, d], i) => (
            <div key={t} style={{ position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
                <div style={{ width: 56, height: 56, borderRadius: 'var(--radius-md)', background: 'var(--flame-500)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxShadow: '0 6px 14px -8px rgba(7,15,25,0.5)' }}>
                  <Icon name={ic} size={26} color="#fff" strokeWidth={2.25} />
                </div>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 700, color: 'rgba(255,255,255,0.55)' }}>0{i + 1}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18.5, fontWeight: 600, color: '#fff', margin: '0 0 8px' }}>{t}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)', margin: 0 }}>{d}</p>
              {i < 3 && <Icon name="arrow-right" size={20} color="rgba(255,255,255,0.35)" style={{ position: 'absolute', top: 18, right: -16 }} />}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- WHY CHOOSE / LEGACY ---- */
const WHY = [
  ['award', 'Expert technicians', 'NATE-certified pros with years of hands-on Lowcountry experience.'],
  ['zap', '24/7 emergency service', 'No heat or no cool at 2am? A tech is on the way — any day, any hour.'],
  ['sliders-horizontal', 'Tailored solutions', 'Right-sized systems and honest recommendations for your home.'],
  ['leaf', 'Efficient systems', 'High-SEER2 installs and tune-ups that cut energy bills up to 30%.'],
];
function Legacy() {
  return (
    <section style={{ background: 'var(--surface-page)', padding: '90px 0' }}>
      <div style={{ ...siteWrap, display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 60, alignItems: 'center' }}>
        <div>
          <Eyebrow>Why choose us</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '0 0 14px', maxWidth: 460 }}>A legacy of excellence in heating &amp; cooling</h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.6, color: 'var(--text-muted)', margin: '0 0 32px', maxWidth: 480 }}>We believe in delivering more than repairs. With over a decade serving South Carolina, we bring skilled technicians, fair pricing, and a fanatical focus on getting your comfort right the first time.</p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, marginBottom: 34 }}>
            {WHY.map(([ic, t, d]) => (
              <div key={t} style={{ display: 'flex', gap: 14 }}>
                <div style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--flame-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name={ic} size={23} color="var(--flame-500)" />
                </div>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 600, color: 'var(--text-strong)', margin: '2px 0 5px' }}>{t}</h3>
                  <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--text-muted)', margin: 0 }}>{d}</p>
                </div>
              </div>
            ))}
          </div>
          <a href="book.html" style={{ textDecoration: 'none' }}><Button variant="primary" size="lg" iconRight="arrow-right">Schedule your service</Button></a>
        </div>
        <div style={{ position: 'relative', minHeight: 480 }}>
          <div style={{ position: 'absolute', top: 0, left: 0, width: '62%', height: '100%', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)' }}>
            <img src={U(PHOTOS.tech_smile, 900)} alt="ProTech technician" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ position: 'absolute', top: '14%', right: 0, width: '46%', height: '46%', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', border: '4px solid #fff' }}>
            <img src={U(PHOTOS.tech_mask, 700)} alt="Technician with AC units" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ position: 'absolute', right: 4, bottom: 24, background: 'var(--flame-500)', color: '#fff', borderRadius: 'var(--radius-lg)', padding: '20px 24px', boxShadow: '0 24px 50px -16px rgba(238,98,52,0.6)', textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>17k+</div>
            <div style={{ fontSize: 13, marginTop: 6, opacity: 0.95, maxWidth: 130 }}>Happy heating &amp; cooling customers</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- ABOUT ---- */
function About() {
  return (
    <section style={{ background: '#fff', padding: '90px 0' }}>
      <div style={{ ...siteWrap, display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 60, alignItems: 'center' }}>
        <div style={{ position: 'relative', minHeight: 440 }}>
          <div style={{ position: 'absolute', inset: 0, borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)' }}>
            <img src={U(PHOTOS.tech_panel, 1000)} alt="ProTech technicians at work" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ position: 'absolute', left: -18, top: 28, background: 'var(--ink-800)', color: '#fff', borderRadius: 'var(--radius-lg)', padding: '18px 22px', boxShadow: 'var(--shadow-lg)', textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--flame-400)' }}>17+</div>
            <div style={{ fontSize: 12.5, marginTop: 6, color: 'var(--ink-100)' }}>Years of experience</div>
          </div>
        </div>
        <div>
          <Eyebrow>About us</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '0 0 16px', maxWidth: 460 }}>The experts you can trust for all your HVAC needs</h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.65, color: 'var(--text-muted)', margin: '0 0 24px', maxWidth: 500 }}>At ProTech, we&rsquo;re more than HVAC technicians. We&rsquo;re a local team dedicated to exceptional comfort, reliability, and quality in every home and business we serve — treating your space like our own, every visit.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 30 }}>
            {[['Your trusted HVAC partner', 'Licensed, insured, and background-checked crews you can rely on.'], ['Comfort, delivered', 'Clean workmanship backed by our satisfaction guarantee.']].map(([t, d]) => (
              <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <Icon name="check-circle-2" size={22} color="var(--flame-500)" style={{ flexShrink: 0, marginTop: 1 }} />
                <div>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15.5, color: 'var(--text-strong)' }}>{t}. </span>
                  <span style={{ fontSize: 15, color: 'var(--text-muted)' }}>{d}</span>
                </div>
              </div>
            ))}
          </div>
          <a href={`tel:${PHONE_TEL}`} style={{ textDecoration: 'none' }}><Button variant="primary" size="lg" iconLeft="phone">Call us: {PHONE}</Button></a>
        </div>
      </div>
    </section>
  );
}

/* ---- SERVICES GRID ---- */
const SERVICES = [
  ['flame', 'Heating installation & repair', 'Furnaces, heat pumps, and boilers installed and repaired to spec.', PHOTOS.pipes, 'services.html'],
  ['wrench', 'HVAC system maintenance', 'Seasonal tune-ups that keep systems efficient and extend their life.', PHOTOS.tech_indoor, 'services.html'],
  ['wind', 'Indoor air quality', 'Purifiers, humidity control, and filtration for healthier air.', PHOTOS.tech_mask, 'services.html'],
  ['git-merge', 'Ductwork installation & repair', 'Sealed, balanced ducts for even comfort and lower bills.', PHOTOS.condensers, 'services.html'],
  ['thermometer', 'Smart thermostat installation', 'Modern controls set up and tuned for effortless comfort.', PHOTOS.equip, 'services.html'],
  ['building-2', 'Commercial HVAC', 'Rooftop units and maintenance plans for businesses of any size.', PHOTOS.rooftop, 'commercial.html'],
];
function Services() {
  return (
    <section id="services" style={{ background: 'var(--surface-page)', padding: '90px 0' }}>
      <div style={siteWrap}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, marginBottom: 40, flexWrap: 'wrap' }}>
          <div>
            <Eyebrow>Our services</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '0 0 8px', maxWidth: 520 }}>Reliable comfort, every season</h2>
            <p style={{ fontSize: 16.5, color: 'var(--text-muted)', margin: 0, maxWidth: 520 }}>A full range of heating, cooling, and air-quality services for homes and businesses across the Lowcountry.</p>
          </div>
          <a href="services.html" style={{ textDecoration: 'none' }}><Button variant="secondary" size="md" iconRight="arrow-right">All services</Button></a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {SERVICES.map(([ic, t, d, ph, href]) => (
            <a key={t} href={href} style={{ textDecoration: 'none', background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', display: 'block' }}>
              <div style={{ position: 'relative', aspectRatio: '16 / 10', overflow: 'hidden' }}>
                <img src={U(ph, 700)} alt={t} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                <div style={{ position: 'absolute', left: 14, top: 14, width: 42, height: 42, borderRadius: 'var(--radius-md)', background: 'var(--flame-500)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 10px 22px -8px rgba(238,98,52,0.7)' }}>
                  <Icon name={ic} size={21} color="#fff" strokeWidth={2.25} />
                </div>
              </div>
              <div style={{ padding: '22px 22px 24px' }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18.5, fontWeight: 600, color: 'var(--text-strong)', margin: '0 0 8px' }}>{t}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--text-muted)', margin: '0 0 16px' }}>{d}</p>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--flame-600)', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14 }}>Learn more <Icon name="arrow-right" size={15} /></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- TESTIMONIALS ---- */
const REVIEWS = [
  ['From start to finish the team at ProTech was incredible. They installed a new system in our home and the difference is night and day — professional, efficient, and friendly. We couldn\u2019t be happier.', 'Stephanie Sharkey', 'Homeowner · Mount Pleasant', PHOTOS.tech_smile],
  ['I was worried about the cost of a new HVAC system, but ProTech gave a fair, transparent quote. The team worked efficiently and our energy bills are lower. Fantastic — our home is comfortable again.', 'Alex Buckmaster', 'Homeowner · West Ashley', PHOTOS.tech_panel],
  ['We put all six of our retail locations on ProTec\u2019s maintenance plan. Fewer breakdowns, predictable costs, and a team that actually answers the phone. Highly recommend.', 'Marcus Rhee', 'Facilities · Charleston', PHOTOS.tech_mask],
];
function Testimonials() {
  return (
    <section id="reviews" style={{ background: '#fff', padding: '90px 0' }}>
      <div style={siteWrap}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            <span style={{ width: 9, height: 9, background: 'var(--flame-500)' }} />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.1em', color: 'var(--flame-600)', textTransform: 'uppercase' }}>Testimonials</span>
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '0 auto 10px', maxWidth: 560 }}>What our customers are saying</h2>
          <p style={{ fontSize: 16.5, color: 'var(--text-muted)', margin: '0 auto', maxWidth: 520 }}>We take pride in keeping South Carolina homes and businesses comfortable year-round — but don&rsquo;t just take our word for it.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {REVIEWS.map(([q, name, meta, ph]) => (
            <Card key={name} variant="elevated" padding={28}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                <Stars size={17} />
                <GoogleG size={22} />
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 22px' }}>&ldquo;{q}&rdquo;</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 18, borderTop: '1px solid var(--border-subtle)' }}>
                <img src={U(ph, 120)} alt={name} style={{ width: 44, height: 44, borderRadius: '50%', objectFit: 'cover' }} />
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--text-strong)' }}>{name}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--text-muted)' }}>{meta}</div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- COUPONS ---- */
const COUPONS = [
  ['Save on AC / heating repair', '10%', 'off', 'Any diagnostic or repair visit. New customers welcome.', 'SAVE10', false],
  ['Emergency AC / heating repair', '$25', 'off', 'After-hours and weekend emergency service calls.', 'FAST25', true],
  ['New AC / heating system', '$300', 'off', 'Qualifying high-efficiency system installations.', 'NEW300', false],
];
function Coupons() {
  return (
    <section style={{ background: 'var(--surface-page)', padding: '90px 0' }}>
      <div style={siteWrap}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            <span style={{ width: 9, height: 9, background: 'var(--flame-500)' }} />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.1em', color: 'var(--flame-600)', textTransform: 'uppercase' }}>Offers</span>
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '0 auto 10px', maxWidth: 520 }}>Our coupons</h2>
          <p style={{ fontSize: 16.5, color: 'var(--text-muted)', margin: '0 auto', maxWidth: 520 }}>Seasonal savings on the HVAC services you need most. Mention the code when you book.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {COUPONS.map(([title, amt, unit, desc, code, featured]) => (
            <div key={title} style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: featured ? 'var(--flame-500)' : '#fff', border: `1px solid ${featured ? 'var(--flame-500)' : 'var(--border-subtle)'}`, boxShadow: featured ? '0 24px 50px -18px rgba(238,98,52,0.5)' : 'var(--shadow-md)', padding: '30px 28px 28px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
                <img src={window.__ptAsset(featured ? 'assets/logos/protech-mark-shield-reversed.svg' : 'assets/logos/protech-mark-shield-primary.svg')} width="32" height="32" alt="" style={{ display: 'block' }} />
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, letterSpacing: '-0.02em', color: featured ? '#fff' : 'var(--ink-900)' }}>Pro<span style={{ color: featured ? '#fff' : 'var(--cool-500)' }}>Tech</span></span>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 15.5, fontWeight: 600, color: featured ? 'rgba(255,255,255,0.95)' : 'var(--text-strong)', marginBottom: 6, minHeight: 42 }}>{title}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 8 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 52, fontWeight: 700, letterSpacing: '-0.03em', color: featured ? '#fff' : 'var(--flame-500)', lineHeight: 1 }}>{amt}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: featured ? 'rgba(255,255,255,0.9)' : 'var(--text-muted)' }}>{unit}</span>
              </div>
              <p style={{ fontSize: 13.5, lineHeight: 1.5, color: featured ? 'rgba(255,255,255,0.9)' : 'var(--text-muted)', margin: '0 0 22px' }}>{desc}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderTop: `1px dashed ${featured ? 'rgba(255,255,255,0.45)' : 'var(--border-default)'}`, paddingTop: 18 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: featured ? 'rgba(255,255,255,0.8)' : 'var(--text-subtle)' }}>Code</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 15, fontWeight: 600, letterSpacing: '0.06em', color: featured ? '#fff' : 'var(--flame-600)', padding: '4px 10px', borderRadius: 6, background: featured ? 'rgba(255,255,255,0.16)' : 'var(--flame-50)' }}>{code}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- SERVICE AREA ---- */
const AREAS = ['Charleston', 'Mount Pleasant', 'West Ashley', 'North Charleston', 'Summerville', 'James Island', 'Columbia', 'Greenville'];
function ServiceArea() {
  return (
    <section id="area" style={{ background: '#fff', padding: '90px 0' }}>
      <div style={{ ...siteWrap, display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <Eyebrow>Service area</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '0 0 14px', maxWidth: 420 }}>Local crews, never far away</h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.6, color: 'var(--text-muted)', margin: '0 0 24px', maxWidth: 420 }}>Based across the Lowcountry and Midlands, so a certified technician is close to home when you need one.</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {AREAS.map((a) => (
              <span key={a} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'var(--surface-page)', border: '1px solid var(--border-subtle)', borderRadius: 999, padding: '8px 14px', fontSize: 14, fontWeight: 500, color: 'var(--text-body)' }}>
                <Icon name="map-pin" size={14} color="var(--flame-500)" /> {a}
              </span>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border-subtle)', aspectRatio: '16 / 10', boxShadow: 'var(--shadow-md)' }}>
          <image-slot id="home-map" shape="rect" fit="cover" placeholder="Drop a service-area map"></image-slot>
        </div>
      </div>
    </section>
  );
}

/* ---- FINAL CTA ---- */
function CTA() {
  return (
    <section id="quote" style={{ background: 'var(--flame-500)', position: 'relative', overflow: 'hidden', padding: '76px 0' }}>
      <Zigzag color="rgba(255,255,255,0.3)" style={{ position: 'absolute', left: 30, top: 26 }} />
      <DotsGrid color="rgba(255,255,255,0.28)" style={{ position: 'absolute', right: 30, bottom: 20 }} />
      <div style={{ ...siteWrap, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase', marginBottom: 12 }}>// Perfect temperature, every time</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 700, letterSpacing: '-0.02em', color: '#fff', margin: 0, maxWidth: 560 }}>No heat? No cool? We&rsquo;re on it.</h2>
          <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.92)', margin: '10px 0 0' }}>Same-day service across the Lowcountry — book in under two minutes.</p>
        </div>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <a href="book.html" style={{ textDecoration: 'none' }}><Button variant="dark" size="lg" iconLeft="calendar">Book now</Button></a>
          <a href={`tel:${PHONE_TEL}`} style={{ textDecoration: 'none' }}><Button variant="secondary" size="lg" iconLeft="phone" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.55)', background: 'transparent' }}>{PHONE}</Button></a>
        </div>
      </div>
    </section>
  );
}

/* ---- PAGE ---- */
function Home({ accent = 'flame', heroPhoto = 'tech_indoor', heroTone = 'blue', heroLayout = 'split' }) {
  const accentVars = accent === 'cool' ? {
    '--color-primary': 'var(--cool-500)', '--color-primary-hover': 'var(--cool-600)', '--color-primary-active': 'var(--cool-600)',
    '--flame-50': 'var(--cool-50)', '--flame-400': 'var(--cool-400)', '--flame-500': 'var(--cool-500)', '--flame-600': 'var(--cool-600)', '--flame-700': 'var(--cool-600)',
  } : {};
  return (
    <div style={{ fontFamily: 'var(--font-body)', ...accentVars }}>
      <Header active="Home" />
      <Hero photo={HERO_PHOTO[heroPhoto] || PHOTOS.tech_indoor} tone={heroTone} layout={heroLayout} />
      <TrustStrip />
      <Process />
      <Legacy />
      <About />
      <Services />
      <Testimonials />
      <Coupons />
      <ServiceArea />
      <CTA />
      <Footer />
    </div>
  );
}

Object.assign(window, { ProTecHome: Home });
})();
