/* ProTech website — shared chrome (Header, Footer, Eyebrow) + layout helpers.
   Exported on window so every page's babel scripts can use them.
   Wrapped in an IIFE so top-level const destructures don't collide across
   the multiple babel scripts sharing global scope. */
(function () {
const { Button, IconButton, Icon } = window.ProTecDesignSystem_37762d;

const PHONE = '(843) 593-3766';
const PHONE_TEL = '843-593-3766';
const EMAIL = 'protechxperience@gmail.com';
const MAXW = 1200;
const siteWrap = { maxWidth: MAXW, margin: '0 auto', padding: '0 32px', width: '100%', boxSizing: 'border-box' };

const NAV = [
  ['Home', 'index.html'],
  ['Services', 'services.html'],
  ['Commercial', 'commercial.html'],
  ['About', 'index.html#about'],
];

/* Multi-color Google “G” mark for review badges. */
function GoogleG({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" style={{ display: 'block', flexShrink: 0 }} aria-hidden="true">
      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
    </svg>
  );
}

function Eyebrow({ children, dark, size = 30 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
      <span style={{ width: 9, height: 9, background: 'var(--color-primary)', flexShrink: 0 }} />
      <span style={{ fontFamily: 'var(--font-display)', fontSize: size, fontWeight: 700, letterSpacing: '-0.02em', color: dark ? '#fff' : 'var(--text-strong)' }}>{children}</span>
    </div>
  );
}

function MonoLabel({ children, style }) {
  return <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.1em', color: 'var(--flame-400)', textTransform: 'uppercase', ...style }}>{children}</div>;
}

function Header({ active }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const socials = [['facebook', 'Facebook'], ['instagram', 'Instagram'], ['linkedin', 'LinkedIn'], ['twitter', 'X']];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50 }}>
      {/* top utility bar (hidden on mobile via .pt-topbar) */}
      <div className="pt-topbar" style={{ background: 'var(--ink-800)', color: '#fff' }}>
        <div style={{ ...siteWrap, display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 42, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
            <a href={`mailto:${EMAIL}`} style={{ display: 'flex', alignItems: 'center', gap: 7, color: 'var(--ink-100)', textDecoration: 'none', fontSize: 13 }}>
              <Icon name="mail" size={14} color="var(--flame-400)" /> {EMAIL}
            </a>
            <a href={`tel:${PHONE_TEL}`} style={{ display: 'flex', alignItems: 'center', gap: 7, color: 'var(--ink-100)', textDecoration: 'none', fontSize: 13 }}>
              <Icon name="phone" size={14} color="var(--flame-400)" /> {PHONE}
            </a>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            {socials.map(([ic, label]) => (
              <a key={label} href="#" aria-label={label} style={{ width: 26, height: 26, borderRadius: '50%', background: 'rgba(255,255,255,0.09)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
                <Icon name={ic} size={13} />
              </a>
            ))}
          </div>
        </div>
      </div>
      {/* main nav */}
      <div style={{ background: '#fff', borderBottom: '1px solid var(--border-subtle)', boxShadow: scrolled ? '0 6px 24px -14px rgba(11,24,38,0.35)' : 'none', transition: 'box-shadow 200ms' }}>
        <div style={{ ...siteWrap, display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 74 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 44 }}>
            <a href="index.html" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
              <img src={window.__ptAsset("assets/logos/protech-horizontal-shield-primary.svg")} alt="ProTech" style={{ display: 'block', height: 42 }} />
            </a>
            <nav className="pt-nav-desktop" style={{ display: 'flex', gap: 30 }}>
              {NAV.map(([l, href]) => (
                <a key={l} href={href} style={{ color: active === l ? 'var(--ink-900)' : 'var(--ink-500)', textDecoration: 'none', fontSize: 15, fontWeight: active === l ? 700 : 500, fontFamily: 'var(--font-body)', paddingBottom: 3, borderBottom: active === l ? '2px solid var(--flame-500)' : '2px solid transparent' }}>{l}</a>
              ))}
            </nav>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            <a href={`tel:${PHONE_TEL}`} style={{ display: 'none', alignItems: 'center', gap: 7, color: 'var(--ink-800)', fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.03em', textDecoration: 'none' }} className="protec-hdr-phone">
              <Icon name="phone" size={15} color="var(--flame-500)" /> {PHONE}
            </a>
            <a href="book.html" className="pt-book-desktop" style={{ textDecoration: 'none' }}><Button variant="primary" size="sm" iconRight="arrow-right">Book service</Button></a>
            <button type="button" className="pt-burger" aria-label={menuOpen ? 'Close menu' : 'Open menu'} aria-expanded={menuOpen} onClick={() => setMenuOpen((v) => !v)}>
              <Icon name={menuOpen ? 'x' : 'menu'} size={22} color="var(--ink-900)" />
            </button>
          </div>
        </div>
        {/* mobile dropdown menu (only rendered when open; hidden on desktop via CSS) */}
        {menuOpen && (
          <div className="pt-mobile-menu" style={{ borderTop: '1px solid var(--border-subtle)', background: '#fff', padding: '10px 20px 18px' }}>
            <nav style={{ display: 'flex', flexDirection: 'column' }}>
              {NAV.map(([l, href]) => (
                <a key={l} href={href} onClick={() => setMenuOpen(false)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: active === l ? 'var(--ink-900)' : 'var(--ink-600)', textDecoration: 'none', fontSize: 17, fontWeight: active === l ? 700 : 500, fontFamily: 'var(--font-body)', padding: '13px 4px', borderBottom: '1px solid var(--border-subtle)' }}>
                  {l}<Icon name="arrow-right" size={16} color="var(--flame-500)" />
                </a>
              ))}
            </nav>
            <a href={`tel:${PHONE_TEL}`} style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ink-800)', fontFamily: 'var(--font-mono)', fontSize: 15, letterSpacing: '0.03em', textDecoration: 'none', padding: '16px 4px 14px' }}>
              <Icon name="phone" size={16} color="var(--flame-500)" /> {PHONE}
            </a>
            <a href="book.html" onClick={() => setMenuOpen(false)} style={{ textDecoration: 'none', display: 'block' }}>
              <Button variant="primary" size="lg" iconRight="arrow-right" style={{ width: '100%', justifyContent: 'center' }}>Book service</Button>
            </a>
          </div>
        )}
      </div>
    </header>
  );
}

function Footer() {
  const cols = {
    Services: [['AC Repair', 'services.html'], ['Heating', 'services.html'], ['Installation', 'services.html'], ['Air Quality', 'services.html'], ['Commercial', 'commercial.html']],
    Company: [['About', 'index.html#about'], ['Careers', '#'], ['Reviews', 'index.html#reviews'], ['Service Area', 'index.html#area'], ['Contact', '#']],
    Support: [['Book Service', 'book.html'], ['Financing', '#'], ['Warranty', '#'], ['Emergency', `tel:${PHONE_TEL}`]],
  };
  return (
    <footer id="about" style={{ background: 'var(--ink-900)', padding: '64px 0 32px', color: 'var(--ink-100)' }}>
      <div style={{ ...siteWrap, display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <img src={window.__ptAsset("assets/logos/protech-horizontal-shield-reversed.svg")} alt="ProTech" style={{ display: 'block', height: 40, marginBottom: 16 }} />
          <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-200)', maxWidth: 260, margin: 0 }}>Modern heating &amp; cooling for South Carolina homes and businesses.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 18 }}>
            <a href={`tel:${PHONE_TEL}`} style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#fff', textDecoration: 'none', fontSize: 14 }}><Icon name="phone" size={14} color="var(--flame-400)" /> {PHONE}</a>
            <a href={`mailto:${EMAIL}`} style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ink-200)', textDecoration: 'none', fontSize: 14 }}><Icon name="mail" size={14} color="var(--flame-400)" /> {EMAIL}</a>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
            <IconButton icon="facebook" label="Facebook" variant="dark" size="sm" />
            <IconButton icon="instagram" label="Instagram" variant="dark" size="sm" />
            <IconButton icon="linkedin" label="LinkedIn" variant="dark" size="sm" />
          </div>
        </div>
        {Object.entries(cols).map(([h, items]) => (
          <div key={h}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: '#fff', marginBottom: 14 }}>{h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {items.map(([i, href]) => <a key={i} href={href} style={{ color: 'var(--ink-200)', textDecoration: 'none', fontSize: 14 }}>{i}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ ...siteWrap, marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--ink-700)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontSize: 13, color: 'var(--ink-300)' }}>
        <span>© 2026 ProTech Heating &amp; Air, LLC · SC License #HVAC-0042</span>
        <span style={{ fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>Charleston · Columbia · Greenville</span>
      </div>
    </footer>
  );
}

/* ================= Reusable photo-forward pieces (shared across pages) ================= */
const { Card } = window.ProTecDesignSystem_37762d;
const BLUE = '#0C3A66';
const BLUE_DK = '#06294F';
window.__ptAsset = (p) => (window.__resources && window.__resources[p]) || p;
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_smile:  'photo-1732395805034-e0bf859665e5',
  tech_panel:  'photo-1561400555-786780284b67',
  tech_mask:   'photo-1601659404194-97d2daca8383',
  pipes:       'photo-1748442001865-5583ec02ae22',
  rooftop:     'photo-1642749776312-aa42ce20c9f5',
  condensers:  'photo-1698479603408-1a66a6d9e80f',
  ac_wall:     'photo-1718203862467-c33159fdc504',
  ac_side:     'photo-1722131646940-b821a6cc6252',
  equip:       'photo-1596495717678-69df9f89c2a3',
};

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>
  );
}

/* Full-bleed photo hero with blue overlay — used on every subpage. */
function PhotoHero({ eyebrow, title, sub, photo, googleCard = true, minH = 340, children }) {
  return (
    <section className="pt-hero pt-hero-dark" style={{ position: 'relative', overflow: 'hidden', background: 'var(--ink-900)' }}>
      <img src={U(photo, 1600)} alt="" aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div className="pt-hero-scrim" style={{ position: 'absolute', inset: 0, background: `linear-gradient(90deg, ${BLUE_DK}f5 0%, ${BLUE}e6 46%, ${BLUE}82 72%, rgba(11,24,38,0.28) 100%)` }} />
      <div style={{ ...siteWrap, position: 'relative', padding: '82px 32px 86px', minHeight: minH, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ maxWidth: 660 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase', marginBottom: 16 }}>// {eyebrow}</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 54, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.04, color: '#fff', margin: 0 }}>{title}</h1>
          {sub && <p style={{ fontSize: 18.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.88)', margin: '20px 0 30px', maxWidth: 560 }}>{sub}</p>}
          {children}
        </div>
      </div>
      <SpecChip style={{ position: 'absolute', right: 40, top: 40, zIndex: 3 }} />
      {googleCard && <GoogleCard style={{ position: 'absolute', right: 40, bottom: 40, zIndex: 3 }} />}
      <DotsGrid color="rgba(255,255,255,0.4)" style={{ position: 'absolute', left: 24, bottom: 84 }} />
      <Zigzag color="rgba(255,255,255,0.5)" style={{ position: 'absolute', left: 30, bottom: 36 }} />
    </section>
  );
}

/* Flat flame CTA band with dot/zigzag motif. */
function CTABand({ eyebrow, title, sub, children }) {
  return (
    <section 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>
          {eyebrow && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase', marginBottom: 12 }}>// {eyebrow}</div>}
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, letterSpacing: '-0.02em', color: '#fff', margin: 0, maxWidth: 560 }}>{title}</h2>
          {sub && <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.92)', margin: '10px 0 0', maxWidth: 500 }}>{sub}</p>}
        </div>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>{children}</div>
      </div>
    </section>
  );
}

Object.assign(window, { ProTecShared: { Eyebrow, MonoLabel, Header, Footer, GoogleG, PhotoHero, CTABand, Stars, SpecChip, DotsGrid, Zigzag, GoogleCard, PHOTOS, U, BLUE, BLUE_DK, siteWrap, MAXW, PHONE, PHONE_TEL, EMAIL, NAV } });
})();