const { Button: FBtn, Icon: FIcon, Logo: FLogo } = window.EPCMDesignSystem_e7f830;

function Footer({ onNavigate, onBook, lang }) {
  const t = (n) => window.EPCM_T(n, lang);
  const S = window.EPCM_SHARED;
  const c = S.contact;

  const quick = [['home', S.ui.home], ['services', { en: 'HVAC Services', fr: 'Services CVC' }], ['maintenance-plans', { en: 'Protection Plans', fr: 'Plans de protection' }], ['government-grants', { en: 'Government Grants', fr: 'Subventions' }], ['financing', { en: 'Financing', fr: 'Financement' }], ['about', { en: 'About', fr: 'À propos' }], ['blog', { en: 'Blog', fr: 'Blogue' }], ['hiring', { en: 'Careers', fr: 'Carrières' }]];
  const promises = [{ en: '42+ Years Experience', fr: '42+ ans d’expérience' }, { en: 'Certified Experts', fr: 'Experts certifiés' }, { en: 'Same-Day Service', fr: 'Service le jour même' }, { en: 'Honest Pricing', fr: 'Prix honnêtes' }];

  const colTitle = { fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--text-muted)', marginBottom: 18, fontWeight: 500 };
  const li = { display: 'flex', alignItems: 'center', gap: 10, color: 'var(--text-secondary)', fontSize: '0.95rem', marginBottom: 12 };
  const lnk = { background: 'none', border: 'none', cursor: 'pointer', font: 'inherit', color: 'var(--text-secondary)', fontSize: '0.95rem', padding: 0, textAlign: 'left' };

  return (
    <footer style={{ background: 'var(--obsidian-900)', borderTop: '1px solid var(--border)' }}>
      <div style={{ borderBottom: '1px solid var(--border)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-12) var(--gutter)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 28 }}>
          <div>
            <div style={{ fontSize: 'clamp(1.6rem, 3vw, 2.25rem)', fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--text)' }}>{lang === 'fr' ? 'Experts en CVC depuis 1982.' : 'HVAC experts since 1982.'}</div>
            <div style={{ color: 'var(--text-secondary)', marginTop: 8, fontSize: '1.05rem' }}>{lang === 'fr' ? 'Chauffage, climatisation et thermopompes fiables à Laval et Montréal.' : 'Reliable heating, cooling & heat pumps across Laval & Montreal.'}</div>
          </div>
          <FBtn variant="primary" size="lg" uppercase iconRight="arrow-right" onClick={onBook}>{t(S.ui.schedule)}</FBtn>
        </div>
      </div>

      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-16) var(--gutter)', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1.2fr 1fr', gap: 40 }} className="epcm-footer-cols">
        <div>
          <FLogo src={window.LOGO_LIGHT} height={28} />
          <p style={{ color: 'var(--text-secondary)', marginTop: 20, fontSize: '0.95rem', lineHeight: 1.6, maxWidth: '34ch' }}>{lang === 'fr' ? 'Experts familiaux en chauffage et climatisation, offrant précision et confort fiable depuis 1982.' : 'Family-owned heating and cooling experts delivering precision and dependable comfort since 1982.'}</p>
          <div style={{ marginTop: 20, display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', color: 'var(--text-muted)', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', padding: '8px 12px' }}><FIcon name="shield-check" size={15} color="var(--accent)" />{c.rbq}</div>
        </div>
        <div>
          <div style={colTitle}>{lang === 'fr' ? 'Liens rapides' : 'Quick Links'}</div>
          {quick.map(([id, label]) => <div key={id} style={{ marginBottom: 12 }}><button style={lnk} onClick={() => onNavigate(id)} onMouseOver={(e) => (e.currentTarget.style.color = 'var(--accent)')} onMouseOut={(e) => (e.currentTarget.style.color = 'var(--text-secondary)')}>{t(label)}</button></div>)}
        </div>
        <div>
          <div style={colTitle}>{lang === 'fr' ? 'Coordonnées' : 'Contact'}</div>
          <div style={li}><FIcon name="map-pin" size={16} color="var(--accent)" />{c.address}</div>
          <a href={c.phoneHref} style={li}><FIcon name="phone" size={16} color="var(--accent)" />{c.phone}</a>
          <div style={li}><FIcon name="clock" size={16} color="var(--accent)" />{t(c.hours)}</div>
          <a href={'mailto:' + c.email} style={li}><FIcon name="mail" size={16} color="var(--accent)" />{c.email}</a>
        </div>
        <div>
          <div style={colTitle}>{lang === 'fr' ? 'Notre promesse' : 'Our Promise'}</div>
          {promises.map((p) => <div key={p.en} style={li}><FIcon name="check" size={16} color="var(--accent)" strokeWidth={2.4} />{t(p)}</div>)}
          <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
            {['facebook', 'instagram'].map((s) => <a key={s} href="#" onClick={(e) => e.preventDefault()} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-strong)', color: 'var(--text-secondary)' }} onMouseOver={(e) => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent)'; }} onMouseOut={(e) => { e.currentTarget.style.borderColor = 'var(--border-strong)'; e.currentTarget.style.color = 'var(--text-secondary)'; }}><FIcon name={s} size={18} /></a>)}
          </div>
        </div>
      </div>

      <div style={{ borderTop: '1px solid var(--border)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '22px var(--gutter)', display: 'flex', flexWrap: 'wrap', gap: 14, alignItems: 'center', justifyContent: 'space-between', color: 'var(--text-muted)', fontSize: '0.85rem' }}>
          <span>©{new Date().getFullYear()} EPCM HVAC. {lang === 'fr' ? 'Tous droits réservés.' : 'All rights reserved.'}</span>
          <span style={{ display: 'flex', gap: 24 }}>
            <button onClick={() => onNavigate('terms')} style={{ ...lnk, color: 'var(--text-muted)' }}>{lang === 'fr' ? 'Conditions' : 'Terms & Conditions'}</button>
            <button onClick={() => onNavigate('privacy')} style={{ ...lnk, color: 'var(--text-muted)' }}>{lang === 'fr' ? 'Confidentialité' : 'Privacy Policy'}</button>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;