const DS = window.EPCMDesignSystem_e7f830;
const { Button: MHB, Icon: MHI, Eyebrow: MHEye, SectionHeading: MSH, ServiceCard: MSC, StepCard: MStep, FeatureItem: MFe, Testimonial: MTe, Badge: MBadge } = DS;

function HSection({ children, light, grid, tone, style }) {
  const TONES = {
    deep: { background: 'linear-gradient(180deg, var(--obsidian-900) 0%, var(--obsidian-850) 100%)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' },
    raised: { background: 'linear-gradient(180deg, var(--obsidian-850) 0%, #1a1a20 50%, var(--obsidian-850) 100%)' },
    glow: { background: 'var(--obsidian-850)' },
  };
  const toneStyle = light ? { background: 'var(--steel-mist)' } : (tone ? TONES[tone] : { background: 'transparent' });
  return (
    <section style={{ position: 'relative', ...toneStyle, ...style }}>
      {grid && <div aria-hidden className="epcm-grid-bg" style={{ position: 'absolute', inset: 0, opacity: 0.55, pointerEvents: 'none', maskImage: 'linear-gradient(180deg,#000,transparent)' }} />}
      {tone === 'glow' && <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'radial-gradient(80% 60% at 50% 0%, rgba(104,134,252,0.10) 0%, rgba(104,134,252,0) 60%)', pointerEvents: 'none' }} />}
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)', position: 'relative' }}>{children}</div>
    </section>
  );
}

function wxInfo(code) {
  if (code === 0) return { icon: 'sun', en: 'Clear', fr: 'Dégagé' };
  if (code <= 2) return { icon: 'cloud-sun', en: 'Partly cloudy', fr: 'Partiellement nuageux' };
  if (code === 3) return { icon: 'cloud', en: 'Cloudy', fr: 'Nuageux' };
  if (code <= 48) return { icon: 'cloud-fog', en: 'Fog', fr: 'Brouillard' };
  if (code <= 57) return { icon: 'cloud-drizzle', en: 'Drizzle', fr: 'Bruine' };
  if (code <= 67) return { icon: 'cloud-rain', en: 'Rain', fr: 'Pluie' };
  if (code <= 77) return { icon: 'snowflake', en: 'Snow', fr: 'Neige' };
  if (code <= 82) return { icon: 'cloud-rain', en: 'Showers', fr: 'Averses' };
  if (code <= 86) return { icon: 'cloud-snow', en: 'Snow showers', fr: 'Averses de neige' };
  return { icon: 'cloud-lightning', en: 'Thunderstorm', fr: 'Orage' };
}

function ComfortConsole({ lang }) {
  const [wx, setWx] = React.useState(null);
  React.useEffect(() => {
    let alive = true;
    fetch('https://api.open-meteo.com/v1/forecast?latitude=45.5019&longitude=-73.5674&current=temperature_2m,relative_humidity_2m,weather_code&daily=weather_code,temperature_2m_max,temperature_2m_min&timezone=America%2FMontreal&forecast_days=6')
      .then((r) => r.json())
      .then((d) => { if (alive && d && d.current) setWx(d); })
      .catch(() => {});
    return () => { alive = false; };
  }, []);

  const live = !!wx;
  const cur = live ? wx.current : { temperature_2m: 21, relative_humidity_2m: 41, weather_code: 1 };
  const temp = Math.round(cur.temperature_2m);
  const info = wxInfo(cur.weather_code);
  const cond = lang === 'fr' ? info.fr : info.en;
  const days = live ? wx.daily.time.slice(1, 6).map((iso, k) => {
    const di = k + 1;
    const dn = new Date(iso + 'T12:00').toLocaleDateString(lang === 'fr' ? 'fr-CA' : 'en-CA', { weekday: 'short' });
    return { day: dn.replace('.', ''), info: wxInfo(wx.daily.weather_code[di]), hi: Math.round(wx.daily.temperature_2m_max[di]), lo: Math.round(wx.daily.temperature_2m_min[di]) };
  }) : [];

  let warn = null;
  if (temp >= 30) warn = { tone: '#E8B65A', icon: 'sun', text: lang === 'fr' ? 'Avis de chaleur — votre climatisation est-elle prête?' : 'Heat advisory — is your AC ready for the heat?' };
  else if (temp <= -15) warn = { tone: '#7FB2FF', icon: 'snowflake', text: lang === 'fr' ? 'Grand froid — assurez-vous que votre chauffage est prêt.' : 'Extreme cold — make sure your heating is ready.' };

  return (
    <div style={{ position: 'relative', background: 'var(--surface-1)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-xl)', padding: 28, boxShadow: 'var(--shadow-xl)', overflow: 'hidden' }}>
      <div aria-hidden className="epcm-grid-bg" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'var(--gradient-hero)', opacity: 0.55, pointerEvents: 'none' }} />
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', letterSpacing: '0.12em', color: 'var(--text-muted)', textTransform: 'uppercase' }}>{lang === 'fr' ? 'Météo · Montréal' : 'Montreal · Weather'}</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: '0.8rem', color: '#7BD3AC' }}><span style={{ width: 8, height: 8, borderRadius: 999, background: '#4FB286', boxShadow: '0 0 10px #4FB286' }} />{live ? (lang === 'fr' ? 'En direct' : 'Live') : (lang === 'fr' ? 'Hors ligne' : 'Offline')}</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0 18px' }}>
          <div style={{ width: 200, height: 200, borderRadius: 999, display: 'grid', placeItems: 'center', background: 'conic-gradient(from 135deg, var(--accent) 0deg, var(--arctic-blue) 120deg, var(--surface-3) 120deg, var(--surface-3) 360deg)', position: 'relative' }}>
            <div style={{ position: 'absolute', inset: 14, borderRadius: 999, background: 'var(--obsidian-900)', boxShadow: 'inset 0 2px 20px rgba(0,0,0,0.7)' }} />
            <div style={{ position: 'relative', textAlign: 'center' }}>
              <div style={{ display: 'inline-flex', justifyContent: 'center', marginBottom: 2 }}><MHI name={info.icon} size={24} color="var(--arctic-blue)" /></div>
              <div style={{ fontSize: '3.1rem', fontWeight: 500, lineHeight: 1, letterSpacing: '-0.03em', color: 'var(--text)' }}>{temp}<span style={{ color: 'var(--accent)', fontSize: '1.3rem', verticalAlign: 'top' }}>°C</span></div>
              <div style={{ marginTop: 5, fontSize: '0.74rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{cond} · {cur.relative_humidity_2m}%</div>
            </div>
          </div>
        </div>
        {warn && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 14px', borderRadius: 'var(--radius-md)', background: 'rgba(232,182,90,0.10)', border: '1px solid ' + warn.tone + '55', marginBottom: 14 }}>
            <MHI name={warn.icon} size={18} color={warn.tone} />
            <span style={{ color: 'var(--text)', fontSize: '0.86rem', lineHeight: 1.35 }}>{warn.text}</span>
          </div>
        )}
        <div className="epcm-weekstrip" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6, borderTop: '1px solid var(--border)', paddingTop: 16 }}>
          {(days.length ? days : Array.from({ length: 5 }, () => ({ day: '—', info: { icon: 'cloud' }, hi: '—', lo: '' }))).map((d, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, padding: '10px 2px', borderRadius: 'var(--radius-sm)', background: 'var(--obsidian-900)', border: '1px solid var(--border)' }}>
              <span style={{ fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)' }}>{d.day}</span>
              <MHI name={d.info.icon} size={18} color="var(--arctic-blue)" />
              <span style={{ fontSize: '0.82rem', color: 'var(--text)', fontWeight: 500 }}>{d.hi}°<span style={{ color: 'var(--text-muted)', fontWeight: 400 }}> {d.lo !== '' ? d.lo + '°' : ''}</span></span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function BrandsHomeSection({ lang, onNavigate, onBook, onQuote }) {
  const t = (n) => window.EPCM_T(n, lang);
  const bp = window.EPCM_PAGES.brands;
  // Unique brand names, derived from the machines catalog.
  const brandNames = [...new Set((bp.machines || []).flatMap((c) => c.items.map((m) => m.brand)))];
  // Pick one representative machine from each of the first three categories.
  const featured = (bp.machines || []).slice(0, 3).map((c) => {
    const m = c.items[0];
    return { brand: m.brand, name: m.name, cat: c.cat, blurb: m.type, sizes: m.sizes, specs: m.stats || [] };
  });
  return (
    <HSection>
      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20 }}>
        <MSH eyebrow={lang === 'fr' ? 'Marques et appareils' : 'Brands & Machines'} title={lang === 'fr' ? 'Les marques et appareils que nous installons' : 'The brands & machines we install'} intro={lang === 'fr' ? 'Entrepreneur multimarque \u2014 nous recommandons objectivement le bon syst\u00e8me, puis l\u2019installons avec soin.' : 'A multi-brand contractor \u2014 we objectively recommend the right system, then install it with care.'} />
        <MHB variant="outline" iconRight="arrow-right" onClick={() => onNavigate('brands')}>{lang === 'fr' ? 'Voir tout' : 'View all'}</MHB>
      </div>

      {/* Brand wordmark strip */}
      <div className="epcm-brand-strip" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginTop: 'var(--space-10)' }}>
        {brandNames.slice(0, 8).map((name) => (
          <div key={name} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 64, borderRadius: 'var(--radius-md)', background: 'var(--surface-1)', border: '1px solid var(--border)' }}>
            <span style={{ fontSize: '1.05rem', fontWeight: 700, letterSpacing: '0.01em', color: 'var(--text-secondary)' }}>{name}</span>
          </div>
        ))}
      </div>

      {/* Recommended machines with photo slots */}
      <div style={{ fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--text-muted)', margin: 'var(--space-12) 0 var(--space-6)' }}>{lang === 'fr' ? '\u00c9quipement recommand\u00e9' : 'Recommended equipment'}</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="epcm-grid-3">
        {featured.map((f) => (
          <div key={f.name} className="epcm-card-hover" style={{ display: 'flex', flexDirection: 'column', background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--inner-hairline)' }}>
            <div style={{ position: 'relative' }}>
              <image-slot id={'home-machine-' + f.name.replace(/[^a-z0-9]/gi, '-').toLowerCase()} shape="rect" fit="cover" placeholder={(lang === 'fr' ? 'Photo \u2014 ' : 'Photo \u2014 ') + f.name} style={{ display: 'block', width: '100%', height: '190px', borderBottom: '1px solid var(--border)' }}></image-slot>
              <span style={{ position: 'absolute', top: 12, left: 12, fontFamily: 'var(--font-mono)', fontSize: '0.68rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--on-accent)', background: 'var(--accent)', borderRadius: 'var(--radius-pill)', padding: '4px 10px' }}>{f.brand}</span>
            </div>
            <div style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', flex: 1 }}>
              <h3 style={{ fontSize: 'var(--text-h4)', fontWeight: 500, letterSpacing: '-0.01em' }}>{f.name}</h3>
              <div style={{ fontSize: '0.8rem', color: 'var(--accent)', marginTop: 4 }}>{t(f.cat)}</div>
              <p style={{ marginTop: 10, color: 'var(--text-secondary)', fontSize: '0.92rem', lineHeight: 1.55 }}>{t(f.blurb)}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'grid', gap: 8 }}>{f.specs.map((s, j) => <li key={j} style={{ display: 'flex', gap: 9, fontSize: '0.88rem', color: 'var(--text-secondary)' }}><MHI name="check" size={15} color="var(--accent)" strokeWidth={2.4} style={{ marginTop: 2 }} />{t(s)}</li>)}</ul>
              <div style={{ marginTop: 'auto', paddingTop: 18 }}><MHB variant="secondary" full iconRight="arrow-right" onClick={onQuote}>{lang === 'fr' ? 'Obtenir une soumission' : 'Get a quote'}</MHB></div>
            </div>
          </div>
        ))}
      </div>
    </HSection>
  );
}

function GrantsHomeSection({ lang, onNavigate }) {
  const t = (n) => window.EPCM_T(n, lang);
  const g = window.EPCM_HOME.grants;
  return (
    <HSection>
      <div style={{ position: 'relative', overflow: 'hidden', background: 'var(--gradient-environment)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-xl)', padding: 'clamp(2rem,5vw,3.75rem)' }}>
        <div aria-hidden className="epcm-grid-bg" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} />
        <div style={{ position: 'relative' }}>
          <div style={{ maxWidth: '54ch' }}>
            <MHEye>{t(g.eyebrow)}</MHEye>
            <h2 style={{ marginTop: 18, fontSize: 'var(--text-h2)', fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1, textWrap: 'balance' }}>{t(g.title)}</h2>
            <p style={{ marginTop: 16, color: 'var(--text-secondary)', fontSize: '1.06rem', lineHeight: 1.6 }}>{t(g.intro)}</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 'var(--space-10)' }} className="epcm-grid-3">
            {g.programs.map((p, i) => (
              <div key={i} style={{ background: 'rgba(16,16,20,0.45)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ display: 'inline-flex', width: 42, height: 42, borderRadius: 'var(--radius-md)', background: 'var(--accent-soft)', border: '1px solid var(--accent-line)', alignItems: 'center', justifyContent: 'center' }}><MHI name={p.icon} size={20} color="var(--arctic-blue)" /></span>
                  <span style={{ fontSize: '1.5rem', fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--text)' }}>{t(p.amount)}</span>
                </div>
                <div style={{ marginTop: 14, fontSize: '0.95rem', fontWeight: 500, color: 'var(--text)' }}>{t(p.name)}</div>
                <p style={{ marginTop: 6, color: 'var(--text-secondary)', fontSize: '0.9rem', lineHeight: 1.55 }}>{t(p.desc)}</p>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 18, alignItems: 'center', justifyContent: 'space-between', marginTop: 'var(--space-8)' }}>
            <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', maxWidth: '56ch', lineHeight: 1.5, margin: 0 }}>{t(g.note)}</p>
            <MHB variant="primary" iconRight="arrow-right" onClick={() => onNavigate('government-grants')}>{t(g.cta)}</MHB>
          </div>
        </div>
      </div>
    </HSection>
  );
}

function Home({ lang, onNavigate, onBook, onQuote }) {
  const t = (n) => window.EPCM_T(n, lang);
  const H = window.EPCM_HOME;
  const S = window.EPCM_SHARED;
  const offerIcons = ['wrench', 'gauge', 'tag', 'leaf', 'badge-check', 'zap'];

  return (
    <main>
      {/* Hero */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--gradient-hero)' }}>
        <img src="/assets/photos/hero-home.jpg" alt="" aria-hidden style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(16,16,20,0.96) 0%, rgba(16,16,20,0.86) 42%, rgba(16,16,20,0.55) 72%, rgba(16,16,20,0.35) 100%)' }} />
        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(16,16,20,0.2) 0%, rgba(16,16,20,0) 30%, rgba(16,16,20,0.55) 100%)' }} />
        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'var(--gradient-hero)', opacity: 0.5, mixBlendMode: 'screen', pointerEvents: 'none' }} />
        <div aria-hidden className="epcm-grid-bg" style={{ position: 'absolute', inset: 0, opacity: 0.4, maskImage: 'radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 75%)' }} />
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'clamp(3.5rem,7vw,6rem) var(--gutter) clamp(4rem,8vw,7rem)', position: 'relative', display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 'clamp(2rem,5vw,4.5rem)', alignItems: 'center' }} className="epcm-hero-grid">
          <div>
            <MHEye>{t(H.hero.eyebrow)}</MHEye>
            <h1 style={{ marginTop: 22, fontSize: 'var(--text-display)', fontWeight: 500, lineHeight: 1.02, letterSpacing: '-0.035em', color: 'var(--text)', textWrap: 'balance' }}>
              {t(H.hero.h1[0])}<br />{t(H.hero.h1[1])}<br />{t(H.hero.h1[2])}<span style={{ color: 'var(--accent)' }}>.</span>
            </h1>
            <p style={{ marginTop: 24, fontSize: 'var(--text-body-lg)', lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: '48ch' }}>{t(H.hero.intro)}</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 32 }}>
              <MHB variant="primary" size="lg" uppercase iconRight="arrow-right" onClick={onBook}>{t(S.ui.schedule)}</MHB>
              <MHB variant="outline" size="lg" iconLeft="file-text" onClick={onQuote}>{t(S.ui.estimate)}</MHB>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 28, marginTop: 40 }}>
              {H.hero.stats.map(([n, l], i) => <div key={i}><div style={{ fontSize: '1.5rem', fontWeight: 500, color: 'var(--text)', letterSpacing: '-0.02em' }}>{t(n)}</div><div style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: 2 }}>{t(l)}</div></div>)}
            </div>
          </div>
          <div className="epcm-hero-visual"><ComfortConsole lang={lang} /></div>
        </div>
      </section>

      {/* Brand strip */}
      <div style={{ borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', background: 'var(--obsidian-900)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '26px var(--gutter)', display: 'flex', alignItems: 'center', gap: 'clamp(1.5rem,5vw,4rem)', flexWrap: 'wrap', justifyContent: 'center' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{lang === 'fr' ? 'Toutes les grandes marques' : 'Experience with all major brands'}</span>
          {S.brands.map((b) => <span key={b} style={{ fontSize: '1.15rem', fontWeight: 600, letterSpacing: '0.02em', color: 'var(--text-secondary)', opacity: 0.75 }}>{b}</span>)}
        </div>
      </div>

      {/* Services */}
      <HSection tone="glow">
        <MSH align="center" eyebrow={t(H.services.eyebrow)} title={t(H.services.title)} intro={t(H.services.intro)} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginTop: 'var(--space-12)' }} className="epcm-grid-4">
          {H.services.items.map((s) => {
            const picto = { 'heating': 'heating', 'cooling': 'cooling', 'heat-pump': 'heatpump', 'air-duct-cleaning': 'airduct' }[s.page];
            return (
              <a key={s.page} href="#" onClick={(e) => { e.preventDefault(); onNavigate(s.page); }} className="epcm-card-hover" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)', backgroundImage: 'var(--gradient-card)', boxShadow: 'var(--inner-hairline)', textDecoration: 'none', height: '100%' }}>
                <div style={{ display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-6)' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 58, height: 58, borderRadius: 'var(--radius-md)', background: 'var(--accent-soft)', border: '1px solid var(--accent-line)' }}>
                    <img src={'/assets/icons/' + picto + '-light.png'} alt="" style={{ width: 30, height: 30 }} />
                  </span>
                  <MBadge variant="neutral">{t(s.badge)}</MBadge>
                </div>
                <h3 style={{ fontSize: 'var(--text-h4)', fontWeight: 500, letterSpacing: '-0.01em', color: 'var(--text)', margin: '0 0 8px' }}>{t(s.title)}</h3>
                <p style={{ fontSize: 'var(--text-sm)', lineHeight: 1.6, color: 'var(--text-secondary)', margin: 0, flex: 1 }}>{t(s.desc)}</p>
                <span className="epcm-link-arrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 'var(--space-5)', fontSize: '0.8125rem', fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text)' }}>{t(S.ui.learnMore)}<MHI name="arrow-right" size={16} strokeWidth={2} color="var(--accent)" /></span>
              </a>
            );
          })}
        </div>
      </HSection>

      {/* About */}
      <HSection grid tone="deep">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem,5vw,4.5rem)', alignItems: 'center' }} className="epcm-2col">
          <div>
            <MHEye>{t(H.about.eyebrow)}</MHEye>
            <h2 style={{ marginTop: 18, fontSize: 'var(--text-h2)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.12, textWrap: 'balance' }}>{t(H.about.title)}</h2>
            <p style={{ marginTop: 20, color: 'var(--text-secondary)', fontSize: '1.05rem', lineHeight: 1.65 }}>{t(H.about.p1)}</p>
            <p style={{ marginTop: 16, color: 'var(--text-secondary)', fontSize: '1.05rem', lineHeight: 1.65 }}>{t(H.about.p2)}</p>
            <div style={{ marginTop: 30 }}><MHB variant="secondary" iconRight="arrow-right" onClick={() => onNavigate('about')}>{t(H.about.cta)}</MHB></div>
          </div>
          <div style={{ display: 'grid', gap: 16 }}>
            <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', height: 200 }}>
              <img src="/assets/photos/banner-heatpump.png" alt="EPCM technician servicing a heat pump" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(16,16,20,0) 40%, rgba(16,16,20,0.55) 100%)' }} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              {H.about.stats.map(([ic, big, small], i) => <div key={i} style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 24, boxShadow: 'var(--inner-hairline)' }}><span style={{ display: 'inline-flex', width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--accent-soft)', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}><MHI name={ic} size={20} color="var(--arctic-blue)" /></span><div style={{ fontSize: '1.4rem', fontWeight: 500, letterSpacing: '-0.02em' }}>{t(big)}</div><div style={{ fontSize: '0.9rem', color: 'var(--text-muted)', marginTop: 4 }}>{t(small)}</div></div>)}
            </div>
          </div>
        </div>
      </HSection>

      {/* Heating */}
      <HSection>
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20 }}>
          <MSH eyebrow={t(H.heating.eyebrow)} title={t(H.heating.title)} intro={t(H.heating.intro)} />
          <MHB variant="outline" iconRight="arrow-right" onClick={() => onNavigate('heating')}>{t(H.heating.cta)}</MHB>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginTop: 'var(--space-12)' }} className="epcm-grid-4">
          {H.heating.items.map((s) => <MSC key={s.page} icon={s.icon} title={t(s.title)} description={t(s.desc)} cta={t(S.ui.learnMore)} href="#" onClick={(e) => { e.preventDefault(); onNavigate(s.page); }} />)}
        </div>
      </HSection>

      {/* How it works */}
      <HSection grid tone="deep">
        <MSH align="center" eyebrow={t(H.how.eyebrow)} title={t(H.how.title)} intro={t(H.how.intro)} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 'var(--space-12)' }} className="epcm-grid-4">
          {H.how.steps.map((s, i) => <div key={i} style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 28, boxShadow: 'var(--inner-hairline)' }}><MStep index={i + 1} title={t(s.title)} description={t(s.desc)} /></div>)}
        </div>
      </HSection>

      {/* What we offer */}
      <HSection tone="glow">
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'clamp(2rem,5vw,4.5rem)', alignItems: 'center' }} className="epcm-2col">
          <div>
            <MHEye>{t(H.offer.eyebrow)}</MHEye>
            <h2 style={{ marginTop: 18, fontSize: 'var(--text-h2)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.12, textWrap: 'balance' }}>{t(H.offer.title)}</h2>
            <p style={{ marginTop: 18, color: 'var(--text-secondary)', fontSize: '1.05rem', lineHeight: 1.65 }}>{t(H.offer.intro)}</p>
            <div style={{ marginTop: 30 }}><MHB variant="primary" size="lg" uppercase iconRight="arrow-right" onClick={onQuote}>{t(H.offer.cta)}</MHB></div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
            {H.offer.items.map((o, i) => <div key={i} style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', padding: '18px 20px', boxShadow: 'var(--inner-hairline)' }}><MFe icon={offerIcons[i % offerIcons.length]} title={t(o)} /></div>)}
          </div>
        </div>
      </HSection>

      {/* Cooling */}
      <HSection grid tone="deep">
        <MSH eyebrow={t(H.cooling.eyebrow)} title={t(H.cooling.title)} intro={t(H.cooling.intro)} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, marginTop: 'var(--space-12)' }} className="epcm-2col">
          {H.cooling.items.map((c) => (
            <div key={c.page} style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--inner-hairline)', backgroundImage: 'var(--gradient-card)' }}>
              <img src={c.page === 'wall-ac' ? '/assets/photos/wall-unit-install.png' : '/assets/photos/heatpump-install-gradient.png'} alt={t(c.title)} style={{ display: 'block', width: '100%', height: '230px', objectFit: 'cover', borderBottom: '1px solid var(--border)' }} />
              <div style={{ position: 'relative', padding: 'clamp(1.75rem,3vw,2.5rem)' }}>
                <div style={{ marginBottom: 12 }}><MBadge variant="accent" icon={c.icon}>{t(c.badge)}</MBadge></div>
                <h3 style={{ fontSize: 'var(--text-h3)', fontWeight: 500, letterSpacing: '-0.02em' }}>{t(c.title)}</h3>
                <p style={{ marginTop: 12, color: 'var(--text-secondary)', fontSize: '1.02rem', lineHeight: 1.6, maxWidth: '46ch' }}>{t(c.desc)}</p>
                <div style={{ marginTop: 22 }}><MHB variant="secondary" iconRight="arrow-right" onClick={() => onNavigate(c.page)}>{t(S.ui.learnMore)}</MHB></div>
              </div>
            </div>
          ))}
        </div>
      </HSection>

      {/* Our Brands & recommended machines */}
      <BrandsHomeSection lang={lang} onNavigate={onNavigate} onBook={onBook} onQuote={onQuote} />

      {/* Government grants */}
      <GrantsHomeSection lang={lang} onNavigate={onNavigate} />

      {/* Areas */}
      <HSection>
        <div style={{ position: 'relative', overflow: 'hidden', background: 'var(--gradient-environment)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-xl)', padding: 'clamp(2rem,5vw,4rem)' }}>
          <div aria-hidden className="epcm-grid-bg" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} />
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem,5vw,4rem)', alignItems: 'center' }} className="epcm-2col">
            <div>
              <MHEye>{t(H.areas.eyebrow)}</MHEye>
              <h2 style={{ marginTop: 18, fontSize: 'var(--text-h2)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.12, textWrap: 'balance' }}>{t(H.areas.title)}</h2>
              <p style={{ marginTop: 18, color: 'var(--text-secondary)', fontSize: '1.05rem', lineHeight: 1.6 }}>{t(H.areas.intro)}</p>
              <div style={{ marginTop: 28 }}><MHB variant="primary" iconRight="map-pin" onClick={onBook}>{t(H.areas.cta)}</MHB></div>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              {(lang === 'fr' ? S.areasFr : S.areas).map((a, i) => { const AREA_SLUGS = ['montreal', 'laval', 'dollard-des-ormeaux', 'boucherville', 'terrebonne', 'longueuil', 'brossard', 'saint-laurent']; return <a key={a} href={'seo/chauffage-climatisation-' + (AREA_SLUGS[i] || 'laval') + '.html'} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: 'rgba(16,16,20,0.5)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-pill)', padding: '11px 18px', fontSize: '0.98rem', color: 'var(--text)', textDecoration: 'none', cursor: 'pointer', transition: 'border-color 0.15s, background 0.15s, transform 0.15s' }} onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.background = 'rgba(104,134,252,0.12)'; e.currentTarget.style.transform = 'translateY(-1px)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border-strong)'; e.currentTarget.style.background = 'rgba(16,16,20,0.5)'; e.currentTarget.style.transform = 'none'; }}><MHI name="map-pin" size={15} color="var(--accent)" />{a}</a>; })}
            </div>
          </div>
        </div>
      </HSection>

      {/* Testimonials */}
      <HSection grid tone="deep">
        <MSH align="center" eyebrow={t(H.testimonials.eyebrow)} title={t(H.testimonials.title)} intro={t(H.testimonials.intro)} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 'var(--space-12)' }} className="epcm-grid-3">
          {H.testimonials.items.map((tm, i) => <MTe key={i} quote={t(tm.quote)} name={tm.name} role={t(tm.role)} rating={5} />)}
        </div>
      </HSection>

      {/* Booking CTA */}
      <HSection>
        <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-accent)', boxShadow: 'var(--glow-accent)' }}>
          <img src="/assets/photos/banner-ducts.png" alt="EPCM technician inspecting ductwork" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg, rgba(16,16,20,0.94) 0%, rgba(16,16,20,0.82) 42%, rgba(16,16,20,0.45) 100%)' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'var(--gradient-hero)', opacity: 0.5, pointerEvents: 'none' }} />
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'clamp(2rem,5vw,4rem)', alignItems: 'center', padding: 'clamp(2rem,5vw,4rem)' }} className="epcm-2col">
            <div>
              <MHEye>{t(S.ui.bookingEyebrow)}</MHEye>
              <h2 style={{ marginTop: 18, fontSize: 'var(--text-h2)', fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.08, textWrap: 'balance' }}>{t(S.ui.bookingTitle)}</h2>
              <p style={{ marginTop: 18, color: 'var(--text-secondary)', fontSize: '1.08rem', lineHeight: 1.6, maxWidth: '46ch' }}>{t(S.ui.bookingIntro)}</p>
              <div style={{ display: 'flex', gap: 14, marginTop: 30, flexWrap: 'wrap' }}><MHB variant="primary" size="lg" uppercase iconRight="arrow-right" onClick={onBook}>{t(S.ui.requestConsult)}</MHB></div>
            </div>
            <div style={{ display: 'grid', gap: 14 }}>{S.promises.map((p, i) => <MFe key={i} variant="plain" icon="check" title={t(p)} />)}</div>
          </div>
        </div>
      </HSection>
    </main>
  );
}

window.Home = Home;