const PLB = window.EPCMDesignSystem_e7f830;
const { Button: PlB, Icon: PlI, Eyebrow: PlEye, SectionHeading: PlSH, ServiceCard: PlSC, StepCard: PlStep, FeatureItem: PlFe, Testimonial: PlTe } = PLB;
const MARK = '/assets/logo/epcm-mark-plumbing.png';
const HERO_IMG = '/assets/photos/plumbing-hero.jpg';

function PlSection({ children, soft, style }) {
  return (
    <section style={{ background: soft ? 'var(--bg-deep)' : 'transparent', position: 'relative', ...style }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>{children}</div>
    </section>
  );
}

/* ---------- Plumbing header ---------- */
function PlumbingHeader({ lang, page, onNavigate, onBook, onBackHvac, onLang }) {
  const t = (n) => window.EPCM_T(n, lang);
  const P = window.EPCM_PAGES;
  const S = window.EPCM_SHARED;
  const PL = window.EPCM_PLUMBING;
  const [open, setOpen] = React.useState(null);
  const [mobile, setMobile] = React.useState(false);

  const go = (id) => { setMobile(false); setOpen(false); onNavigate(id); };
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(9,22,28,0.82)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', borderBottom: '1px solid var(--border)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)', height: 76, display: 'flex', alignItems: 'center', gap: 20 }}>
        <button onClick={() => go('plumbing-home')} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'none', border: 'none', cursor: 'pointer', padding: 0, flex: 'none' }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '1.4rem', letterSpacing: '-0.02em', color: 'var(--text)', lineHeight: 1 }}>EP<span style={{ color: 'var(--accent)' }}>°</span>CM</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}><span style={{ width: 1, height: 22, background: 'var(--border-strong)' }} /><span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.7rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text)', lineHeight: 1.15 }}>Plomberie</span></span>
        </button>

        <nav className="epcm-desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: 2, marginLeft: 8 }} onMouseLeave={() => setOpen(null)}>
          <button onClick={() => go('plumbing-home')} style={navBtnL(page === 'plumbing-home')}>{t(S.ui.home)}</button>
          {[['repair', lang === 'fr' ? 'Réparations' : 'Repairs', PL.repairIds], ['install', lang === 'fr' ? 'Installations' : 'Installations', PL.installIds]].map(([key, label, ids]) => (
            <div key={key} style={{ position: 'relative' }} onMouseEnter={() => setOpen(key)}>
              <button onClick={() => go('plumbing')} style={navBtnL(open === key)}>{label}<PlI name="chevron-down" size={13} strokeWidth={2} style={{ opacity: 0.7 }} /></button>
              {open === key && (
                <div style={{ position: 'absolute', top: '100%', left: 0, paddingTop: 10 }}>
                  <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-lg)', padding: 8, width: 250 }}>
                    {ids.map((id) => <button key={id} onClick={() => go(id)} style={ddItemL} onMouseOver={(e) => { e.currentTarget.style.background = 'var(--surface-2)'; e.currentTarget.style.color = 'var(--text)'; }} onMouseOut={(e) => { e.currentTarget.style.background = 'none'; e.currentTarget.style.color = 'var(--text-secondary)'; }}>{t(P[id].nav)}</button>)}
                    <button onClick={() => go('plumbing')} style={{ ...ddItemL, color: 'var(--accent)' }}>{lang === 'fr' ? 'Tous les services →' : 'All services →'}</button>
                  </div>
                </div>
              )}
            </div>
          ))}
          <a href={S.contact.emergencyHref} style={{ ...navBtnL(false), color: 'var(--accent)' }}>{lang === 'fr' ? 'Urgence' : 'Emergency'}</a>
          <button onClick={onBackHvac} title={lang === 'fr' ? 'Aller au site CVC' : 'Go to HVAC site'} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginLeft: 6, background: 'var(--accent-soft)', border: '1px solid var(--accent-line)', cursor: 'pointer', font: 'inherit', fontSize: '0.92rem', fontWeight: 500, color: 'var(--arctic-blue)', padding: '7px 13px', borderRadius: 'var(--radius-pill)', whiteSpace: 'nowrap' }}
            onMouseOver={(e) => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--on-accent)'; }}
            onMouseOut={(e) => { e.currentTarget.style.background = 'var(--accent-soft)'; e.currentTarget.style.color = 'var(--arctic-blue)'; }}>
            <PlI name="thermometer-sun" size={15} />{lang === 'fr' ? 'CVC' : 'HVAC'}<PlI name="arrow-up-right" size={13} />
          </button>
        </nav>

        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
          <a href={S.contact.emergencyHref} className="epcm-phone-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, textDecoration: 'none' }}>
            <span style={{ display: 'inline-flex', width: 36, height: 36, borderRadius: 'var(--radius-sm)', background: 'var(--accent-soft)', border: '1px solid var(--accent-line)', alignItems: 'center', justifyContent: 'center' }}><PlI name="phone" size={16} color="var(--accent)" /></span>
            <span style={{ display: 'grid', lineHeight: 1.1 }}><span style={{ fontSize: '0.66rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>{lang === 'fr' ? 'Urgence 24/7' : '24/7 Emergency'}</span><span style={{ fontSize: '0.95rem', fontWeight: 600, color: 'var(--text)' }}>{S.contact.emergencyPhone}</span></span>
          </a>
          <button onClick={onLang} className="epcm-lang" style={{ whiteSpace: 'nowrap', background: 'none', border: '1px solid var(--border-strong)', color: 'var(--text-secondary)', borderRadius: 'var(--radius-sm)', cursor: 'pointer', font: 'inherit', fontSize: '0.8125rem', fontWeight: 500, padding: '6px 10px', letterSpacing: '0.04em' }}>{lang === 'en' ? 'FR' : 'EN'}</button>
          <span className="epcm-book-btn"><PlB variant="primary" iconRight="calendar-check" onClick={onBook}>{lang === 'fr' ? 'Réserver' : 'Book Now'}</PlB></span>
          <button className="epcm-burger" onClick={() => setMobile((m) => !m)} aria-label="Menu" style={{ display: 'none', background: 'var(--surface-2)', border: '1px solid var(--border-strong)', color: 'var(--text)', width: 44, height: 44, borderRadius: 'var(--radius-sm)', cursor: 'pointer', alignItems: 'center', justifyContent: 'center' }}><PlI name={mobile ? 'x' : 'menu'} size={22} /></button>
        </div>
      </div>
      {mobile && (
        <div className="epcm-mobile-menu" style={{ borderTop: '1px solid var(--border)', background: 'var(--surface-1)', padding: 'var(--gutter)', maxHeight: '74vh', overflowY: 'auto' }}>
          <button onClick={() => go('plumbing-home')} style={mobItemL}>{t(S.ui.home)}</button>
          {[['repair', lang === 'fr' ? 'Réparations' : 'Repairs', PL.repairIds], ['install', lang === 'fr' ? 'Installations' : 'Installations', PL.installIds]].map(([key, label, ids]) => (
            <div key={key} style={{ paddingTop: 12 }}>
              <div style={{ fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--accent)', marginBottom: 4, fontWeight: 600 }}>{label}</div>
              {ids.map((id) => <button key={id} onClick={() => go(id)} style={{ display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', font: 'inherit', color: 'var(--text-secondary)', fontSize: '0.96rem', padding: '8px 4px' }}>{t(P[id].nav)}</button>)}
            </div>
          ))}
          <button onClick={() => go('plumbing')} style={{ ...mobItemL, marginTop: 8 }}>{lang === 'fr' ? 'Tous les services' : 'All services'}</button>
          <a href={S.contact.emergencyHref} style={{ ...mobItemL, color: 'var(--accent)', display: 'block', textDecoration: 'none' }}>{lang === 'fr' ? 'Urgence' : 'Emergency'} · {S.contact.emergencyPhone}</a>
          <div style={{ display: 'grid', gap: 10, marginTop: 14 }}>
            <PlB variant="primary" full iconRight="calendar-check" onClick={() => { setMobile(false); onBook(); }}>{lang === 'fr' ? 'Réserver' : 'Book Now'}</PlB>
            <PlB variant="outline" full iconLeft="arrow-left" onClick={() => { setMobile(false); onBackHvac(); }}>{lang === 'fr' ? 'Retour au site CVC' : 'Back to HVAC'}</PlB>
            <button onClick={() => { setMobile(false); onLang(); }} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, minHeight: 48, width: '100%', background: 'none', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-md)', cursor: 'pointer', font: 'inherit', color: 'var(--text-secondary)', fontSize: '0.95rem', fontWeight: 500 }}>{lang === 'en' ? 'Français' : 'English'}</button>
          </div>
        </div>
      )}
    </header>
  );
}
const navBtnL = (active) => ({ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'none', border: 'none', cursor: 'pointer', font: 'inherit', fontSize: '0.95rem', fontWeight: 500, color: active ? 'var(--text)' : 'var(--text-secondary)', padding: '8px 13px', borderRadius: 'var(--radius-sm)', textDecoration: 'none' });
const mobItemL = { display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', borderBottom: '1px solid var(--border)', cursor: 'pointer', font: 'inherit', color: 'var(--text)', fontSize: '1rem', fontWeight: 500, padding: '13px 4px' };
const ddItemL = { display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', font: 'inherit', fontSize: '0.9rem', color: 'var(--text-secondary)', padding: '8px 12px', borderRadius: 'var(--radius-sm)' };
function PlFaqItem({ q, a }) {
  const [o, setO] = React.useState(false);
  return (
    <div style={{ background: 'var(--surface-1)', border: '1px solid ' + (o ? 'var(--border-accent)' : 'var(--border)'), borderRadius: 'var(--radius-md)', overflow: 'hidden' }}>
      <button onClick={() => setO(!o)} style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center', gap: 16, background: 'none', border: 'none', cursor: 'pointer', font: 'inherit', textAlign: 'left', color: 'var(--text)', fontSize: '1.02rem', fontWeight: 500, padding: '16px 18px' }}>{q}<PlI name={o ? 'minus' : 'plus'} size={18} color="var(--accent)" /></button>
      {o && <div style={{ padding: '0 18px 18px', color: 'var(--text-secondary)', fontSize: '0.96rem', lineHeight: 1.6 }}>{a}</div>}
    </div>
  );
}

/* ---------- Plumbing home ---------- */
function PlumbingHome({ lang, onNavigate, onBook }) {
  const t = (n) => window.EPCM_T(n, lang);
  const P = window.EPCM_PAGES;
  const S = window.EPCM_SHARED;
  const H = window.EPCM_PLUMBING.home;
  const ids = window.EPCM_PLUMBING.serviceIds;
  const iconFor = { 'leak-repair': 'droplet', 'drain-cleaning': 'droplets', 'water-heater': 'thermometer', 'bathroom-plumbing': 'shower-head', 'kitchen-plumbing': 'utensils', 'leak-detection': 'search', 'pipe-unfreezing': 'snowflake', 'sump-pump': 'arrow-down-to-line' };

  return (
    <main>
      {/* Hero */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--gradient-hero)', borderBottom: '1px solid var(--border)' }}>
        <img src={HERO_IMG} alt="" aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', opacity: 0.32 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, var(--bg-deep) 0%, rgba(9,22,28,0.78) 42%, rgba(9,22,28,0.45) 100%)' }} aria-hidden="true" />
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'clamp(3.5rem,7vw,5.5rem) var(--gutter) clamp(3.5rem,7vw,5.5rem)', position: 'relative', display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 'clamp(2rem,5vw,4rem)', alignItems: 'center' }} className="epcm-hero-grid">
          <div>
            <PlEye>{t(H.hero.eyebrow)}</PlEye>
            <h1 style={{ marginTop: 20, fontSize: 'var(--text-display)', fontWeight: 500, lineHeight: 1.03, 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: 22, 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: 30 }}>
              <PlB variant="primary" size="lg" uppercase iconRight="arrow-right" onClick={onBook}>{lang === 'fr' ? 'Réserver un plombier' : 'Book a Plumber'}</PlB>
              <PlB variant="outline" size="lg" iconLeft="phone" href={S.contact.emergencyHref}>{S.contact.emergencyPhone}</PlB>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 28, marginTop: 38 }}>
              {H.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>
          {/* Emergency card */}
          <div className="epcm-hero-visual" style={{ background: 'var(--surface-1)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-xl)', padding: 28, boxShadow: 'var(--shadow-lg)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--accent)' }}><span style={{ width: 9, height: 9, borderRadius: 999, background: 'var(--accent)' }} /><span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.74rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{lang === 'fr' ? 'Urgence 24/7' : '24/7 Emergency'}</span></div>
            <a href={S.contact.emergencyHref} style={{ display: 'block', fontSize: '2.1rem', fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--text)', marginTop: 14 }}>{S.contact.emergencyPhone}</a>
            <div style={{ display: 'grid', gap: 12, marginTop: 18, paddingTop: 18, borderTop: '1px solid var(--border)' }}>
              {[['zap', lang === 'fr' ? 'Répartition immédiate' : 'Immediate dispatch'], ['truck', lang === 'fr' ? 'Véhicules équipés' : 'Fully equipped vehicles'], ['shield-check', lang === 'fr' ? 'Plombiers licenciés et assurés' : 'Licensed & insured plumbers'], ['tag', lang === 'fr' ? 'Prix clairs d’avance' : 'Upfront pricing']].map(([ic, l]) => <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 11 }}><span style={{ display: 'inline-flex', width: 32, height: 32, borderRadius: 'var(--radius-sm)', background: 'var(--accent-soft)', alignItems: 'center', justifyContent: 'center' }}><PlI name={ic} size={16} color="var(--accent)" /></span><span style={{ color: 'var(--text-secondary)', fontSize: '0.92rem' }}>{l}</span></div>)}
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <PlSection>
        <PlSH 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: 18, marginTop: 'var(--space-12)' }} className="epcm-grid-4">
          {ids.map((id) => <PlSC key={id} icon={iconFor[id] || 'droplets'} title={t(P[id].nav)} description={t(P[id].intro)} cta={t(S.ui.learnMore)} href="#" onClick={(e) => { e.preventDefault(); onNavigate(id); }} />)}
        </div>
      </PlSection>

      {/* Common problems */}
      <PlSection soft>
        <PlSH align="center" eyebrow={t(H.problems.eyebrow)} title={t(H.problems.title)} intro={t(H.problems.intro)} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 'var(--space-10)' }} className="epcm-grid-3">
          {H.problems.items.map((p, i) => (
            <div key={i} style={{ display: 'flex', gap: 16, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)', boxShadow: 'var(--inner-hairline)' }}>
              <span style={{ flex: 'none', display: 'inline-flex', width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--accent-soft)', border: '1px solid var(--accent-line)', alignItems: 'center', justifyContent: 'center' }}><PlI name={p.icon} size={21} color="var(--accent)" /></span>
              <div><h3 style={{ fontSize: 'var(--text-h5)', fontWeight: 500 }}>{t(p.title)}</h3><p style={{ marginTop: 6, color: 'var(--text-secondary)', fontSize: '0.92rem', lineHeight: 1.55 }}>{t(p.desc)}</p></div>
            </div>
          ))}
        </div>
      </PlSection>

      {/* Emergency band */}
      <PlSection>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'clamp(1.5rem,4vw,3rem)', alignItems: 'center', background: 'var(--gradient-environment)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-xl)', padding: 'clamp(1.75rem,4vw,2.75rem)' }} className="epcm-2col">
          <div>
            <PlEye>{lang === 'fr' ? 'Service d’urgence' : 'Emergency Service'}</PlEye>
            <h2 style={{ marginTop: 14, fontSize: 'var(--text-h3)', fontWeight: 500, letterSpacing: '-0.02em' }}>{t(H.emergency.title)}</h2>
            <p style={{ marginTop: 12, color: 'var(--text-secondary)', fontSize: '1.04rem', lineHeight: 1.6, maxWidth: '52ch' }}>{t(H.emergency.note)}</p>
          </div>
          <a href={S.contact.emergencyHref} style={{ display: 'block', textAlign: 'center', background: 'var(--surface-1)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-lg)', padding: 24, boxShadow: 'var(--shadow-md)' }}>
            <div style={{ fontSize: '0.74rem', textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--text-muted)' }}>{t(H.emergency.hotline)}</div>
            <div style={{ fontSize: '1.9rem', fontWeight: 600, color: 'var(--accent)', marginTop: 8 }}>{S.contact.emergencyPhone}</div>
          </a>
        </div>
      </PlSection>

      {/* Process */}
      <PlSection soft>
        <PlSH align="center" eyebrow={t(H.process.eyebrow)} title={t(H.process.title)} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, marginTop: 'var(--space-10)' }} className="epcm-grid-3">
          {H.process.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)' }}><PlStep index={i + 1} title={t(s.title)} description={t(s.desc)} /></div>)}
        </div>
      </PlSection>

      {/* Why */}
      <PlSection>
        <PlSH align="center" eyebrow={lang === 'fr' ? 'Pourquoi nous' : 'Why us'} title={lang === 'fr' ? 'Une plomberie de confiance' : 'Plumbing you can trust'} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 'var(--space-10)' }} className="epcm-grid-3">
          {S.why.map((w, i) => <div key={i} style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)', boxShadow: 'var(--inner-hairline)' }}><span style={{ display: 'inline-flex', width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--accent-soft)', border: '1px solid var(--accent-line)', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}><PlI name={w.icon} size={22} color="var(--accent)" /></span><h3 style={{ fontSize: 'var(--text-h5)', fontWeight: 500 }}>{t(w.title)}</h3><p style={{ marginTop: 8, color: 'var(--text-secondary)', fontSize: '0.94rem', lineHeight: 1.6 }}>{t(w.desc)}</p></div>)}
        </div>
      </PlSection>

      {/* Service areas */}
      <PlSection>
        <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.5rem)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem,5vw,4rem)', alignItems: 'center' }} className="epcm-2col">
            <div>
              <PlEye>{t(H.areas.eyebrow)}</PlEye>
              <h2 style={{ marginTop: 16, fontSize: 'var(--text-h3)', fontWeight: 500, letterSpacing: '-0.02em', textWrap: 'balance' }}>{t(H.areas.title)}</h2>
              <p style={{ marginTop: 14, color: 'var(--text-secondary)', fontSize: '1.04rem', lineHeight: 1.6 }}>{t(H.areas.intro)}</p>
              <div style={{ marginTop: 24 }}><PlB variant="primary" iconRight="map-pin" onClick={onBook}>{t(H.areas.cta)}</PlB></div>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>{(lang === 'fr' ? S.areasFr : S.areas).map((a) => <span key={a} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--surface-1)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-pill)', padding: '10px 16px', fontSize: '0.95rem', color: 'var(--text)' }}><PlI name="map-pin" size={14} color="var(--accent)" />{a}</span>)}</div>
          </div>
        </div>
      </PlSection>

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

      {/* FAQ */}
      <PlSection>
        <PlSH align="center" eyebrow={t(H.faqs.eyebrow)} title={t(H.faqs.title)} />
        <div style={{ maxWidth: 820, margin: 'var(--space-10) auto 0', display: 'grid', gap: 12 }}>
          {H.faqs.items.map((f, i) => <PlFaqItem key={i} q={t(f.q)} a={t(f.a)} />)}
        </div>
      </PlSection>

      {/* CTA */}
      <PlSection>
        <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-accent)', background: 'var(--gradient-environment)', padding: 'clamp(2rem,5vw,3.5rem)', textAlign: 'center' }}>
          <h2 style={{ fontSize: 'var(--text-h2)', fontWeight: 500, letterSpacing: '-0.025em', textWrap: 'balance' }}>{t(H.cta.title)}</h2>
          <p style={{ marginTop: 14, color: 'var(--text-secondary)', fontSize: '1.05rem', maxWidth: '48ch', marginInline: 'auto' }}>{t(H.cta.intro)}</p>
          <div style={{ marginTop: 26, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <PlB variant="primary" size="lg" uppercase iconRight="arrow-right" onClick={onBook}>{lang === 'fr' ? 'Réserver un plombier' : 'Book a Plumber'}</PlB>
            <PlB variant="outline" size="lg" iconLeft="phone" href={S.contact.emergencyHref}>{S.contact.emergencyPhone}</PlB>
          </div>
        </div>
      </PlSection>
    </main>
  );
}

/* ---------- Plumbing footer ---------- */
function PlumbingFooter({ lang, onBackHvac, onBook }) {
  const S = window.EPCM_SHARED;
  const c = S.contact;
  const areas = lang === 'fr' ? S.areasFr : S.areas;
  return (
    <footer style={{ background: 'var(--bg-deep)', borderTop: '1px solid var(--border)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-12) var(--gutter)', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 36 }} className="epcm-footer-cols">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}><span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '1.3rem', letterSpacing: '-0.02em', color: 'var(--text)', lineHeight: 1 }}>EP<span style={{ color: 'var(--accent)' }}>°</span>CM</span><span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, marginLeft: 2 }}><span style={{ width: 1, height: 18, background: 'var(--border-strong)' }} /><span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.66rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>Plomberie</span></span></div>
          <p style={{ color: 'var(--text-secondary)', marginTop: 16, fontSize: '0.95rem', lineHeight: 1.6, maxWidth: '36ch' }}>{lang === 'fr' ? 'Plombiers licenciés et assurés pour Montréal et Laval — urgences, réparations et installations, par EPCM depuis 1982.' : 'Licensed, insured plumbers for Montreal & Laval — emergencies, repairs, and installations, by EPCM since 1982.'}</p>
          <div style={{ marginTop: 18 }}><PlB variant="outline" iconLeft="arrow-left" onClick={onBackHvac}>{lang === 'fr' ? 'Site CVC EPCM' : 'EPCM HVAC site'}</PlB></div>
        </div>
        <div>
          <div style={{ fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--text-muted)', marginBottom: 16 }}>{lang === 'fr' ? 'Coordonnées' : 'Contact'}</div>
          <div style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', display: 'grid', gap: 10 }}>
            <a href={c.emergencyHref} style={{ color: 'var(--accent)', fontWeight: 500 }}>{lang === 'fr' ? 'Urgence' : 'Emergency'}: {c.emergencyPhone}</a>
            <a href={c.phoneHref} style={{ color: 'var(--text-secondary)' }}>{c.phone}</a>
            <span>{c.address}</span>
            <a href={'mailto:' + c.email} style={{ color: 'var(--text-secondary)' }}>{c.email}</a>
          </div>
        </div>
        <div>
          <div style={{ fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--text-muted)', marginBottom: 16 }}>{lang === 'fr' ? 'Secteurs' : 'Service Areas'}</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>{areas.map((a) => <span key={a} style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 'var(--radius-pill)', padding: '5px 11px' }}>{a}</span>)}</div>
        </div>
      </div>
      <div style={{ borderTop: '1px solid var(--border)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '20px var(--gutter)', color: 'var(--text-muted)', fontSize: '0.85rem', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10 }}>
          <span>©{new Date().getFullYear()} EPCM {lang === 'fr' ? 'Plomberie' : 'Plumbing'}. {c.rbq}</span>
          <span>{lang === 'fr' ? 'Tous droits réservés.' : 'All rights reserved.'}</span>
        </div>
      </div>
    </footer>
  );
}

function PlumbingSite({ lang, page, onNavigate, onBook, onBackHvac, onLang }) {
  const body = page === 'plumbing-home'
    ? <PlumbingHome lang={lang} onNavigate={onNavigate} onBook={onBook} />
    : <window.PageView id={page} lang={lang} onNavigate={onNavigate} onBook={onBook} />;
  return (
    <div className="epcm-plumbing-theme" style={{ minHeight: '100%', background: 'var(--bg)', color: 'var(--text)' }}>
      <PlumbingHeader lang={lang} page={page} onNavigate={onNavigate} onBook={onBook} onBackHvac={onBackHvac} onLang={onLang} />
      {body}
      <PlumbingFooter lang={lang} onBackHvac={onBackHvac} onBook={onBook} />
    </div>
  );
}

window.PlumbingSite = PlumbingSite;
