/* Dexpress shared chrome — Nav + Footer + small primitives */

const NAV_LINKS = [
  { label: "Services",  href: "services.html" },
  { label: "About",     href: "about.html" },
  { label: "Drive with us", href: "careers.html", accent: "blue" },
  { label: "Contact",   href: "contact.html" },
];

function Logo({ size = 38 }) {
  return (
    <a href="index.html" style={{display:'flex',alignItems:'center',gap:12}}>
      <img src="assets/dexpress-logo.png" alt="Dexpress" style={{height: size, width: 'auto', display:'block'}} />
    </a>
  );
}

function Nav({ current = "home", variant = "dark" }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'background .35s ease, border-color .35s ease, backdrop-filter .35s ease',
      background: scrolled || open ? 'rgba(10,11,13,0.78)' : 'transparent',
      backdropFilter: scrolled || open ? 'blur(14px) saturate(1.2)' : 'none',
      WebkitBackdropFilter: scrolled || open ? 'blur(14px) saturate(1.2)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
    }}>
      <div className="wrap" style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        height: 76,
      }}>
        <div style={{display:'flex',alignItems:'center',gap:36}}>
          <Logo size={36} />
          <span className="mono nav-eyebrow" style={{color:'var(--ink-3)', display: 'none'}}>EST. 2018 · ETOBICOKE, ON</span>
        </div>
        <nav className="nav-links">
          {NAV_LINKS.map(l => (
            <a key={l.href} href={l.href} style={{
              padding: '10px 14px',
              fontSize: 14,
              fontWeight: 500,
              color: current === l.href.replace('.html','') ? 'var(--ink)' : 'var(--ink-2)',
              borderRadius: 999,
              position: 'relative',
              display:'inline-flex', alignItems:'center', gap:8,
              transition: 'color .2s',
            }}>
              {l.accent === 'blue' && <span style={{width:6,height:6,borderRadius:'50%',background:'var(--blue)'}}></span>}
              {l.label}
            </a>
          ))}
          <a href="contact.html#quote" className="btn btn-primary nav-cta-desktop" style={{marginLeft:14, padding:'12px 18px', fontSize:13}}>
            Get a quote <span className="arr">→</span>
          </a>
        </nav>
        <button className="menu-btn" aria-label="Open menu" onClick={() => setOpen(true)}>
          <svg width="20" height="14" viewBox="0 0 20 14" fill="none"><path d="M0 1h20M0 7h20M0 13h14" stroke="currentColor" strokeWidth="1.5"/></svg>
        </button>
      </div>
      <div className={`nav-drawer ${open ? 'open' : ''}`}>
        <button className="drawer-close" aria-label="Close menu" onClick={() => setOpen(false)}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 2l12 12M14 2L2 14" stroke="currentColor" strokeWidth="1.5"/></svg>
        </button>
        {NAV_LINKS.map(l => (
          <a key={l.href} href={l.href}>
            {l.label}
            <span className="mono" style={{color: l.accent === 'blue' ? 'var(--blue)' : 'var(--red)', fontSize: 14}}>→</span>
          </a>
        ))}
        <a href="contact.html#quote" className="btn btn-primary drawer-cta" style={{marginTop: 32}}>
          Get a quote <span className="arr">→</span>
        </a>
        <a href="tel:18774825164" className="btn btn-ghost drawer-cta" style={{marginTop: 12}}>
          📞 1-877-482-5164
        </a>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer style={{background:'#06070A', borderTop:'1px solid var(--line)', paddingTop:80, paddingBottom:32}}>
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr 1fr', gap:48, paddingBottom:64}}>
          <div>
            <Logo size={42} />
            <p style={{color:'var(--ink-2)', maxWidth:340, marginTop:24, fontSize:15, lineHeight:1.55}}>
              Comprehensive logistics for North America. Trucking, warehousing, freight management — operated from Etobicoke, Ontario since 2018.
            </p>
            <div style={{display:'flex',gap:8, marginTop:24, flexWrap:'wrap'}}>
              <span className="pill"><span className="dot"></span>CTPAT APPROVED</span>
              <span className="pill"><span className="dot blue"></span>FAST CERTIFIED</span>
            </div>
          </div>
          <FooterCol title="Company" links={[
            ["About", "about.html"],
            ["Services", "services.html"],
            ["Safety", "about.html#safety"],
            ["Contact", "contact.html"],
          ]} />
          <FooterCol title="Work with us" links={[
            ["Get a quote", "contact.html#quote"],
            ["Drive with us", "careers.html"],
            ["Owner-operators", "careers.html#owner-operator"],
            ["Refer a driver", "careers.html#refer"],
          ]} />
          <div>
            <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', color:'var(--ink-3)', textTransform:'uppercase', marginBottom:16}}>Headquarters</div>
            <div style={{fontSize:15, color:'var(--ink)', lineHeight:1.55}}>
              30 Bethridge Road<br/>Etobicoke, ON<br/>Canada
            </div>
            <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', color:'var(--ink-3)', textTransform:'uppercase', marginTop:24, marginBottom:8}}>Dispatch · 24/7</div>
            <div style={{fontSize:15, color:'var(--ink)'}}>1-877-482-5164</div>
            <div style={{fontSize:13, color:'var(--ink-2)', marginTop:4}}>info@dexpressgroup.com</div>
          </div>
        </div>
        <div style={{borderTop:'1px solid var(--line)', paddingTop:24, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:12}}>
          <div className="mono" style={{color:'var(--ink-3)'}}>© 2026 D EXPRESS GROUP INC. ALL RIGHTS RESERVED.</div>
          <div className="mono" style={{color:'var(--ink-3)'}}>43.7° N · 79.5° W · KEEP IT MOVING.</div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', color:'var(--ink-3)', textTransform:'uppercase', marginBottom:16}}>{title}</div>
      <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10}}>
        {links.map(([label, href]) => (
          <li key={href}><a href={href} style={{color:'var(--ink)', fontSize:15, transition:'color .15s'}}
            onMouseEnter={e => e.currentTarget.style.color='var(--red)'}
            onMouseLeave={e => e.currentTarget.style.color='var(--ink)'}>{label}</a></li>
        ))}
      </ul>
    </div>
  );
}

/* Section header used everywhere ----------------------------------- */
function SectionHead({ num, label, title, lede, align="left" }) {
  return (
    <div className="section-head" style={{textAlign: align}}>
      <div className="row">
        <span className="num">{num}</span>
        <span className="eyebrow">{label}</span>
      </div>
      <h2 className="h-display h2" style={{margin:'12px 0 0 0', maxWidth: 18+'ch'}}>{title}</h2>
      {lede && <p className="lede" style={{margin:'18px 0 0 0'}}>{lede}</p>}
    </div>
  );
}

/* Reveal-on-scroll wrapper ----------------------------------------- */
function Reveal({ children, delay = 0, as: As = 'div', ...props }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add('in'), delay);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className={`reveal ${props.className||''}`} {...props}>{children}</As>;
}

/* Cinematic hero with parallax + ken-burns ------------------------- */
function CinematicHero({ image, eyebrow, title, sub, primary, secondary, kicker }) {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf; const start = performance.now();
    const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  // gentle ken-burns: scale 1.05 -> 1.12 over ~30s
  const k = 1.06 + 0.04 * (0.5 + 0.5 * Math.sin(t / 14));
  const tx = 8 * Math.sin(t / 18);
  return (
    <section style={{position:'relative', height:'100vh', minHeight:680, overflow:'hidden'}}>
      <img src={image} alt="" className="img-hero" style={{
        transform: `scale(${k}) translate(${tx}px, ${-tx*0.4}px)`,
        transition: 'transform .2s linear',
      }}/>
      <div className="scrim"></div>
      <div className="grain"></div>
      {/* kicker top-bar */}
      <div className="wrap hero-kicker-wrap" style={{position:'relative', zIndex:2, paddingTop:120}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 'auto'}}>
          <span className="pill"><span className="dot live"></span>{kicker || 'DISPATCH LIVE · GTA → US'}</span>
        </div>
      </div>
      {/* main */}
      <div className="wrap" style={{position:'absolute', left:0, right:0, bottom:64, zIndex:2}}>
        <div className="eyebrow" style={{marginBottom:24}}>{eyebrow}</div>
        <h1 className="h-display h1" style={{margin:0, maxWidth: '14ch'}}>{title}</h1>
        <p className="lede" style={{marginTop:24, maxWidth:'56ch'}}>{sub}</p>
        <div style={{display:'flex', gap:14, marginTop:36, flexWrap:'wrap'}}>
          {primary}
          {secondary}
        </div>
      </div>
      {/* corner labels */}
      <div className="mono hero-coords" style={{position:'absolute', right:36, bottom:36, color:'var(--ink-2)', zIndex:2, textAlign:'right'}}>
        <div>HWY 401 · WB</div>
        <div style={{color:'var(--ink-3)', marginTop:2}}>43.6532° N · 79.3832° W</div>
      </div>
    </section>
  );
}

/* Stat block ------------------------------------------------------- */
function Stat({ num, suffix, label, accent="red" }) {
  return (
    <div style={{borderTop:'1px solid var(--line-2)', paddingTop:18}}>
      <div style={{display:'flex', alignItems:'baseline', gap:4}}>
        <span className="h-display" style={{fontSize:'clamp(48px, 5vw, 76px)', lineHeight:1, color:accent==='red'?'var(--red)':accent==='blue'?'var(--blue)':'var(--ink)'}}>{num}</span>
        <span className="h-display" style={{fontSize:'clamp(20px, 2vw, 28px)', color:'var(--ink-2)'}}>{suffix}</span>
      </div>
      <div className="mono" style={{color:'var(--ink-2)', marginTop:10, textTransform:'uppercase'}}>{label}</div>
    </div>
  );
}

/* Make available globally ----------------------------------------- */
Object.assign(window, { Nav, Footer, Logo, SectionHead, Reveal, CinematicHero, Stat, FooterCol });