/* global React, Ico */

const PHONE = '0121 439 0780';
const PHONE_TEL = 'tel:01214390780';
const WA = 'https://wa.me/441214390780';
const EMAIL = 'info@arrow-recycling.co.uk';

const NAV = [
  { id: 'home', label: 'Home' },
  { id: 'services', label: 'Services' },
  { id: 'dropoff', label: 'Drop-off' },
  { id: 'collections', label: 'Collections' },
  { id: 'faq', label: 'FAQ' },
  { id: 'contact', label: 'Contact' },
];

function Header({ route, go }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { setOpen(false); }, [route]);
  return (
    <header className="site-header">
      <div className="container site-header__main">
        <a className="brand" href="#home" onClick={(e) => { e.preventDefault(); go('home'); }}>
          <img src="assets/logo.png?v=4" alt="Arrow Recycling" />
        </a>
        <nav className="nav">
          {NAV.map(n => (
            <a key={n.id} href={`#${n.id}`}
               className={route === n.id ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); go(n.id); }}>
              {n.label}
            </a>
          ))}
        </nav>
        <div className="nav-cta">
          <a href="#contact" className="btn btn--primary btn--sm" onClick={(e) => { e.preventDefault(); go('contact'); }}>
            Get a quote <Ico.Arrow className="arrow"/>
          </a>
          <button className="menu-btn" onClick={() => setOpen(true)} aria-label="Open menu">
            <span></span>
          </button>
        </div>
      </div>

      <div className={`mobile-nav ${open ? 'open' : ''}`}>
        <div className="mobile-nav__head">
          <div className="brand" style={{filter:'brightness(0) invert(1)'}}>
            <img src="assets/logo.png?v=4" alt="Arrow Recycling" style={{height:40}} />
          </div>
          <button className="mobile-nav__close" onClick={() => setOpen(false)}>✕</button>
        </div>
        {NAV.map(n => (
          <a key={n.id} href={`#${n.id}`}
             onClick={(e) => { e.preventDefault(); go(n.id); setOpen(false); }}>
            {n.label}
          </a>
        ))}
        <div className="mobile-nav__cta">
          <a className="btn btn--primary" href={PHONE_TEL}><Ico.Phone width="14" height="14"/> Call {PHONE}</a>
          <a className="btn btn--whatsapp" href={WA} target="_blank" rel="noopener"><Ico.WhatsApp width="14" height="14"/> WhatsApp</a>
        </div>
      </div>
    </header>
  );
}

function Footer({ go }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <a className="brand" href="#home" onClick={(e) => { e.preventDefault(); go('home'); }}>
              <img src="assets/logo.png?v=4" alt="Arrow Recycling" />
            </a>
            <p style={{marginTop: 20, color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.55, maxWidth: 38 + 'ch'}}>
              Smethwick's commercial cardboard &amp; plastic recycling yard. Drop-off, scheduled pickups,
              and bulk material trading across the West Midlands since 2011.
            </p>
          </div>
          <div className="footer-col">
            <h4>Services</h4>
            <ul>
              <li><a href="#services" onClick={(e) => { e.preventDefault(); go('services'); }}>Cardboard / OCC</a></li>
              <li><a href="#services" onClick={(e) => { e.preventDefault(); go('services'); }}>LDPE plastic film</a></li>
              <li><a href="#services" onClick={(e) => { e.preventDefault(); go('services'); }}>Hard plastics</a></li>
              <li><a href="#services" onClick={(e) => { e.preventDefault(); go('services'); }}>Pallets &amp; metal</a></li>
              <li><a href="#collections" onClick={(e) => { e.preventDefault(); go('collections'); }}>Business collections</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="#dropoff" onClick={(e) => { e.preventDefault(); go('dropoff'); }}>Visit the yard</a></li>
              <li><a href="#faq" onClick={(e) => { e.preventDefault(); go('faq'); }}>FAQ</a></li>
              <li><a href="#contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>Contact</a></li>
              <li><a href={WA} target="_blank" rel="noopener">WhatsApp</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Yard &amp; office</h4>
            <ul style={{gap: 14}}>
              <li><span style={{color:'var(--ink-2)'}}>15 Cornwall Road<br/>Smethwick, B66 2JT<br/>West Midlands</span></li>
              <li><a href={PHONE_TEL}>{PHONE}</a></li>
              <li><a href={`mailto:${EMAIL}`}>{EMAIL}</a></li>
              <li><span style={{color:'var(--ink-2)'}}>Mon–Fri 8–6 · Sat 9–4</span></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2011–2026 Arrow Recycling Ltd</span>
          <span>Upper-tier Waste Carrier · CBDU195919</span>
        </div>
      </div>
    </footer>
  );
}

function MobileBar() {
  return (
    <div className="mobile-bar">
      <a className="b-call" href={PHONE_TEL}><Ico.Phone width="16" height="16"/>Call</a>
      <a className="b-wa" href={WA} target="_blank" rel="noopener"><Ico.WhatsApp width="16" height="16"/>WhatsApp</a>
    </div>
  );
}

function Ticker({ items }) {
  const list = items || [
    'EST. 2011',
    '14 YEARS IN THE TRADE',
    '800+ TONNES PROCESSED WEEKLY',
    'WE PAY FOR BULK CARDBOARD',
    'FREE SITE VISIT FOR BUSINESSES',
    'EXPORT-GRADE OCC AVAILABLE',
    'WHATSAPP A PHOTO FOR INSTANT QUOTE',
  ];
  const doubled = [...list, ...list];
  return (
    <div className="ticker">
      <div className="ticker__track">
        {doubled.map((t, i) => (
          <React.Fragment key={i}>
            <span>{t}</span>
            <span className="sep">◆</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function PageHeader({ crumbs, title, lead, aside }) {
  return (
    <section className="page-header">
      <div className="container">
        <div className="page-header__crumbs">
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              {i > 0 && <span>/</span>}
              {c}
            </React.Fragment>
          ))}
        </div>
        <div className="page-header__row">
          <h1>{title}</h1>
          <div>
            {lead && <p className="page-header__lead">{lead}</p>}
            {aside}
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip({ items }) {
  const list = items || [
    { num: '14', sup: 'yrs', lbl: 'On the same Smethwick yard since 2011' },
    { num: '800', sup: 't/wk', lbl: 'Cardboard & plastic processed every week' },
    { num: '489', sup: 'k t', lbl: 'Material weighed across our bridge since 2013' },
    { num: '24', sup: 'h', lbl: 'Quote turnaround on new pickups' },
  ];
  return (
    <div className="trust-strip">
      {list.map((t, i) => (
        <div key={i}>
          <div className="num">{t.num}<sup>{t.sup}</sup></div>
          <div className="lbl">{t.lbl}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Header, Footer, MobileBar, Ticker, PageHeader, TrustStrip, PHONE, PHONE_TEL, WA, EMAIL });