// Sticky header + dense footer

const NAV_LINKS = [
  { id: 'home', key: 'Home' },
  { id: 'services', key: 'Services' },
  { id: 'about', key: 'About' },
  { id: 'careers', key: 'Careers' },
];

const LangToggle = ({ lang, setLang }) => {
  const btn = (code, label) => {
    const active = lang === code;
    return (
      <button
        key={code}
        onClick={() => setLang(code)}
        aria-pressed={active}
        style={{
          padding: '6px 10px',
          background: active ? 'var(--amber-400)' : 'transparent',
          color: active ? 'var(--steel-900)' : 'rgba(255,255,255,0.75)',
          border: 'none',
          borderRadius: 4,
          fontSize: 11,
          fontWeight: 700,
          letterSpacing: '0.12em',
          textTransform: 'uppercase',
          cursor: 'pointer',
          fontFamily: 'inherit',
          transition: 'background 200ms, color 200ms',
        }}>
        {label}
      </button>
    );
  };
  return (
    <div role="group" aria-label="Language" style={{
      display: 'inline-flex', alignItems: 'center', gap: 2,
      padding: 2,
      border: '1px solid rgba(255,255,255,0.18)',
      borderRadius: 6,
    }}>
      {btn('en', 'EN')}
      {btn('es', 'ES')}
    </div>
  );
};

const Header = ({ current, onNav, lang, setLang }) => {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const goto = (id) => { setMobileOpen(false); onNav(id); };
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(13,17,23,0.96)',
      backdropFilter: 'blur(8px)',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: '14px 28px',
        display: 'flex', alignItems: 'center', gap: 24,
      }}>
        <a onClick={() => goto('home')} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
          <img src="assets/jmac-logo.png" alt="JMAC" style={{ height: 38, display: 'block' }}/>
        </a>
        <nav className="jmac-nav" style={{ display: 'flex', gap: 2, flex: 1, marginLeft: 16 }}>
          {NAV_LINKS.map(l => {
            const active = current === l.id;
            return (
              <a key={l.id} onClick={() => goto(l.id)}
                 style={{
                   padding: '10px 14px', borderRadius: 4, cursor: 'pointer',
                   fontSize: 12, fontWeight: 700, letterSpacing: '0.1em',
                   textTransform: 'uppercase',
                   color: active ? '#fff' : 'rgba(255,255,255,0.65)',
                   borderBottom: active ? '2px solid var(--amber-400)' : '2px solid transparent',
                   transition: 'color 200ms',
                 }}>
                {t(l.key, lang)}
              </a>
            );
          })}
        </nav>
        <div className="jmac-header-actions" style={{ display: 'flex', alignItems: 'center', gap: 12, marginLeft: 'auto' }}>
          <LangToggle lang={lang} setLang={setLang}/>
          <a href="tel:+19786748300" style={{
            display: 'flex', alignItems: 'center', gap: 8,
            color: '#fff', fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600,
            textDecoration: 'none',
          }}>
            <Icon name="phone" size={16} color="var(--amber-400)"/>
            <span style={{ opacity: 0.9 }}>(978) 674-8300</span>
          </a>
        </div>
        <button
          className="jmac-hamburger"
          aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen(o => !o)}
          style={{
            marginLeft: 'auto',
            alignItems: 'center', justifyContent: 'center',
            width: 44, height: 44, borderRadius: 6,
            background: mobileOpen ? 'rgba(255,255,255,0.10)' : 'transparent',
            border: '1px solid rgba(255,255,255,0.20)',
            color: '#fff', cursor: 'pointer', padding: 0,
            flexShrink: 0,
          }}>
          <Icon name={mobileOpen ? 'x' : 'menu'} size={22} color="#fff"/>
        </button>
      </div>
      {mobileOpen && (
        <div style={{
          borderTop: '1px solid rgba(255,255,255,0.08)',
          padding: '8px 14px 18px',
          display: 'flex', flexDirection: 'column', gap: 2,
        }}>
          {NAV_LINKS.map(l => {
            const active = current === l.id;
            return (
              <a key={l.id} onClick={() => goto(l.id)}
                 style={{
                   padding: '14px 14px', borderRadius: 6, cursor: 'pointer',
                   fontSize: 14, fontWeight: 700, letterSpacing: '0.08em',
                   textTransform: 'uppercase',
                   color: active ? 'var(--amber-400)' : '#fff',
                   background: active ? 'rgba(255,184,28,0.08)' : 'transparent',
                   borderLeft: active ? '3px solid var(--amber-400)' : '3px solid transparent',
                 }}>
                {t(l.key, lang)}
              </a>
            );
          })}
          <div style={{
            marginTop: 12, paddingTop: 14,
            borderTop: '1px solid rgba(255,255,255,0.08)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap',
          }}>
            <a href="tel:+19786748300" style={{
              display: 'flex', alignItems: 'center', gap: 8,
              color: '#fff', fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600,
              textDecoration: 'none',
            }}>
              <Icon name="phone" size={18} color="var(--amber-400)"/>
              <span>(978) 674-8300</span>
            </a>
            <LangToggle lang={lang} setLang={setLang}/>
          </div>
        </div>
      )}
    </header>
  );
};

const Footer = ({ onNav, lang }) => (
  <footer style={{ background: 'var(--steel-900)', color: '#fff' }}>
    <HazardStripe height={6}/>
    <div style={{
      maxWidth: 'var(--container-max)', margin: '0 auto',
      padding: '64px 28px 32px',
      display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 48,
    }}>
      <div>
        <img src="assets/jmac-logo.png" alt="JMAC" style={{ height: 48, display: 'block', marginBottom: 18 }}/>
        <p style={{ color: 'var(--steel-300)', fontSize: 14, lineHeight: 1.6, maxWidth: 360, margin: 0 }}>
          {t('Bonded, insured, and audit-ready collateral recovery. Servicing the lending community across the Northeast and Southeast.', lang)}
        </p>
        <div style={{ marginTop: 22, display: 'flex', gap: 18, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="phone" size={16} color="var(--amber-400)"/>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13 }}>(978) 674-8300</span>
          </div>
        </div>
      </div>
      <FooterCol title={t('Company', lang)} items={[
        { label: t('Services', lang), go: 'services' },
        { label: t('About', lang), go: 'about' },
        { label: t('Careers', lang), go: 'careers' },
      ]} onNav={onNav}/>
      <FooterCol title={t('Coverage', lang)} items={[
        { label: 'MA · NH · VT · RI' },
        { label: 'GA · FL' },
      ]}/>
    </div>
    <div style={{
      borderTop: '1px solid rgba(255,255,255,0.08)',
      maxWidth: 'var(--container-max)', margin: '0 auto',
      padding: '20px 28px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      gap: 16, flexWrap: 'wrap',
      fontSize: 12, color: 'var(--steel-400)', letterSpacing: '0.06em',
    }}>
      <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
        <span>© {new Date().getFullYear()} JMAC ASSET RECOVERY. {t('ALL RIGHTS RESERVED.', lang)}</span>
        <a onClick={() => onNav('privacy')} style={{
          cursor: 'pointer', color: 'var(--steel-200)', textDecoration: 'none',
          letterSpacing: '0.06em',
        }}
        onMouseEnter={e => e.target.style.color = '#fff'}
        onMouseLeave={e => e.target.style.color = 'var(--steel-200)'}>
          {t('Privacy Policy', lang)}
        </a>
      </div>
      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
        <span>{t('CFPB · FDCPA COMPLIANT', lang)}</span>
        <span>{t('FULLY BONDED & INSURED', lang)}</span>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, items, onNav }) => (
  <div>
    <div style={{
      fontSize: 11, fontWeight: 700, letterSpacing: '0.16em',
      textTransform: 'uppercase', color: 'var(--amber-400)', marginBottom: 14,
    }}>{title}</div>
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
      {items.map((it, i) => (
        <li key={i}>
          {it.go && onNav ? (
            <a onClick={() => onNav(it.go)} style={{
              cursor: 'pointer', color: 'var(--steel-200)', fontSize: 14,
              transition: 'color 200ms',
            }}
            onMouseEnter={e => e.target.style.color = '#fff'}
            onMouseLeave={e => e.target.style.color = 'var(--steel-200)'}>
              {it.label}
            </a>
          ) : (
            <span style={{ color: 'var(--steel-300)', fontSize: 14 }}>{it.label}</span>
          )}
        </li>
      ))}
    </ul>
  </div>
);

const AffiliateBand = ({ lang }) => {
  const logos = [
    { src: 'assets/affiliate-drn.png',       alt: 'DRN',                 h: 44 },
    { src: 'assets/affiliate-rdn.webp',      alt: 'RDN',                 h: 56 },
    { src: 'assets/affiliate-clearplan.jpeg',alt: 'Clearplan',           h: 56 },
    { src: 'assets/affiliate-cleardata.png', alt: 'ClearData',           h: 44 },
    { src: 'assets/affiliate-cars.png',      alt: 'CARS Certified',      h: 72 },
    { src: 'assets/affiliate-ara.png',       alt: 'American Recovery Association', h: 56 },
  ];
  return (
    <section style={{ background: 'var(--bg-subtle)', borderTop: '1px solid var(--border-1)', borderBottom: '1px solid var(--border-1)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '48px 28px' }}>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <Eyebrow>{t('Affiliations & Certifications', lang)}</Eyebrow>
          <h2 style={{ marginTop: 14, fontSize: 26 }}>{t('Trusted partners. Industry-certified.', lang)}</h2>
        </div>
        <div style={{
          display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center',
          gap: 56, rowGap: 32,
        }}>
          {logos.map(l => (
            <img key={l.alt} src={l.src} alt={l.alt}
                 style={{ height: l.h, maxWidth: 200, objectFit: 'contain', filter: 'grayscale(0.2)', opacity: 0.92 }}/>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Header, Footer, AffiliateBand });