/* Header (utility strip + nav) and Footer. */

const DS_chrome = window.DawsonsDesignSystem_489d7d;

function Header({ current, onNavigate }) {
  const { Logo, Button, Icon } = DS_chrome;
  return (
    <header className="site-header">
      <div className="utility-strip">
        <div className="container container-wide">
          <div className="row">
            <div className="left">
              <span><Icon name="map-pin" size={14} /> {window.SITE.areas}</span>
              <span><Icon name="clock" size={14} /> Mon–Fri 7:30–17:30 · 24/7 emergencies</span>
            </div>
            <div className="right">
              <span><Icon name="shield-check" size={14} /> Fully insured &amp; accredited</span>
            </div>
          </div>
        </div>
      </div>
      <div className="container container-wide">
        <div className="bar">
          <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('Home'); }} style={{ textDecoration: 'none' }}>
            <Logo theme="light" size="sm" />
          </a>
          <nav className="site-nav">
            {window.SITE.nav.map((item) => (
              <a key={item} href="#" className={current === item ? 'active' : ''}
                 onClick={(e) => { e.preventDefault(); onNavigate(item); }}>{item}</a>
            ))}
          </nav>
          <div className="header-actions">
            <a className="header-phone" href={`tel:${window.SITE.phone.replace(/\s/g, '')}`}>
              <Icon name="phone" size={16} />
              <span><span className="lbl">Call&nbsp;</span>{window.SITE.phone}</span>
            </a>
            <Button variant="primary" size="sm" iconRight="arrow-right" onClick={() => onNavigate('Contact')}>Free quote</Button>
          </div>
        </div>
      </div>
    </header>
  );
}

function Footer({ onNavigate }) {
  const { Logo, Icon } = DS_chrome;
  const S = window.SITE;
  return (
    <footer className="site-footer">
      <div className="container container-wide">
        <div className="footer-grid">
          <div>
            <Logo theme="light" size="sm" />
            <p style={{ marginTop: 18, color: 'var(--steel-400)', fontSize: 'var(--fs-body-sm)', lineHeight: 1.6, maxWidth: 320 }}>
              Domestic, commercial &amp; industrial trades under one roof. Design, build, test and maintain — across South Yorkshire and Greater Manchester.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
              {['facebook', 'instagram', 'linkedin'].map((s) => (
                <a key={s} href="#" aria-label={s} style={{ width: 38, height: 38, borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border-dark)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--steel-400)' }}>
                  <Icon name={s} size={17} />
                </a>
              ))}
            </div>
          </div>
          <div>
            <h4>Services</h4>
            {S.services.slice(0, 5).map((s) => <a key={s.title} href="#" onClick={(e) => { e.preventDefault(); onNavigate('Services'); }}>{s.title}</a>)}
          </div>
          <div>
            <h4>Company</h4>
            <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('About'); }}>About us</a>
            <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('About'); }}>Accreditations</a>
            <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('Contact'); }}>Careers</a>
            <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('Contact'); }}>Contact</a>
          </div>
          <div>
            <h4>Get in touch</h4>
            <a href={`tel:${S.phone.replace(/\s/g, '')}`}><Icon name="phone" size={14} style={{ display: 'inline-flex', marginRight: 6, verticalAlign: '-2px' }} />{S.phone}</a>
            <a href={`mailto:${S.email}`}><Icon name="mail" size={14} style={{ display: 'inline-flex', marginRight: 6, verticalAlign: '-2px' }} />{S.email}</a>
            <a href="#"><Icon name="map-pin" size={14} style={{ display: 'inline-flex', marginRight: 6, verticalAlign: '-2px' }} />Unit 4, Parkway Works, Sheffield</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Dawsons Ltd. Registered in England &amp; Wales.</span>
          <span style={{ display: 'flex', gap: 18 }}>
            <a href="#" style={{ display: 'inline', padding: 0 }}>Privacy</a>
            <a href="#" style={{ display: 'inline', padding: 0 }}>Terms</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

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