/* Home page: dual-funnel CTA + GTA map section + ship-with-us teaser */

function MapSection() {
  return (
    <section className="section" style={{paddingTop:140, paddingBottom:140}}>
      <div className="wrap">
        <Reveal>
          <SectionHead
            num="THE NETWORK / LIVE LANES"
            label="GTA → CANADA · USA"
            title={<>One network. Every lane that matters.</>}
            lede="From our hub in Etobicoke, our fleet runs Canadian metros and crosses every major US border lane. CTPAT and FAST credentials clear the line so your freight doesn't sit at it."
          />
        </Reveal>
        <Reveal delay={100}>
          <GTAMap height={560} />
        </Reveal>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:32, marginTop:48}}>
          <Stat num="60" suffix="+" label="Tractors in active fleet" />
          <Stat num="100" suffix="+" label="Trailers · dry / flat / reefer" accent="blue" />
          <Stat num="50K" suffix=" sq ft" label="CTPAT warehouse" />
          <Stat num="2018" suffix="" label="Year founded · Etobicoke" accent="blue" />
        </div>
      </div>
    </section>
  );
}

/* ===== Dual funnel: Sales-first, Drive-with-us secondary ===== */
function DualFunnel() {
  return (
    <section className="section" style={{paddingTop: 120, paddingBottom:120, background:'#06070A'}}>
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 24}}>
          {/* Sales / shippers — primary */}
          <Reveal>
            <FunnelCard
              variant="red"
              eyebrow="01 / FOR SHIPPERS"
              title={<>Get a quote in <span style={{color:'var(--red)'}}>under 30 minutes</span>.</>}
              body="Tell us your lane, your weight, your equipment. A real dispatcher gets back to you with a real number — not a portal auto-reply. Same-day pickup across the GTA."
              cta="Get a quote"
              href="contact.html#quote"
              meta={['NO PORTAL FATIGUE', 'NO BOTS', 'A HUMAN WHO PICKS UP']}
              image="assets/truck-highway-2.jpg"
            />
          </Reveal>
          {/* Hiring — secondary */}
          <Reveal delay={120}>
            <FunnelCard
              variant="blue"
              eyebrow="02 / FOR DRIVERS"
              title={<>Drive with the carrier that <span style={{color:'var(--blue)'}}>pays on time.</span></>}
              body="Owner-operators and company drivers wanted. Newer equipment, respectful dispatch, predictable home time. We answer the phone — even at 2am on the 401."
              cta="Drive with us"
              href="careers.html"
              meta={['WEEKLY PAY', 'NO FORCED DISPATCH', '2020+ TRACTORS']}
              image="assets/fleet-lineup.jpg"
              compact
            />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function FunnelCard({ variant, eyebrow, title, body, cta, href, meta, image, compact }) {
  const accent = variant === 'red' ? 'var(--red)' : 'var(--blue)';
  return (
    <a href={href} className="funnel-card" style={{display:'block', textDecoration:'none', position:'relative', minHeight: compact ? 480 : 560, overflow:'hidden', borderRadius:4, border:'1px solid var(--line)'}}
      onMouseEnter={e => { const im = e.currentTarget.querySelector('img'); if (im) im.style.transform='scale(1.06)'; }}
      onMouseLeave={e => { const im = e.currentTarget.querySelector('img'); if (im) im.style.transform='scale(1.02)'; }}>
      <img src={image} alt="" className="img-fill img-grade" style={{position:'absolute', inset:0, transform:'scale(1.02)', transition:'transform 1.4s ease', filter: 'brightness(0.55) contrast(1.05) saturate(0.9)'}}/>
      <div style={{position:'absolute', inset:0, background:`linear-gradient(135deg, rgba(10,11,13,0.85) 0%, rgba(10,11,13,0.55) 60%, rgba(10,11,13,0.4) 100%)`}}></div>
      <div style={{position:'absolute', inset:0, background:`linear-gradient(180deg, transparent 50%, ${variant==='red'?'rgba(217,39,46,0.18)':'rgba(30,85,168,0.22)'} 100%)`}}></div>
      <div style={{position:'relative', padding: '40px 40px 36px', height:'100%', display:'flex', flexDirection:'column', justifyContent:'space-between', minHeight: compact ? 480 : 560}}>
        <div>
          <div className="mono" style={{color: accent, letterSpacing:'0.18em'}}>{eyebrow}</div>
          <h3 className="h-display" style={{fontSize: compact ? 'clamp(30px, 3vw, 44px)' : 'clamp(36px, 4vw, 60px)', margin:'24px 0 0', maxWidth:'14ch'}}>{title}</h3>
          <p className="lede" style={{marginTop:20, maxWidth: '42ch'}}>{body}</p>
        </div>
        <div>
          <div style={{display:'flex', gap:8, flexWrap:'wrap', marginBottom: 24}}>
            {meta.map((m,i) => <span key={i} className="pill"><span className="dot" style={{background:accent}}></span>{m}</span>)}
          </div>
          <span className={variant==='red' ? 'btn btn-primary' : 'btn btn-blue'}>{cta} <span className="arr">→</span></span>
        </div>
      </div>
    </a>
  );
}

/* ===== Customer / industry strip ===== */
function IndustryStrip() {
  const industries = [
    { name: 'Automotive', body: 'Just-in-sequence parts. Tier 1 / Tier 2.' },
    { name: 'Postal & Parcel', body: 'High-frequency drops, dedicated lanes.' },
    { name: 'Retail & E-comm', body: 'DC bypass, store replenishment.' },
    { name: 'Construction', body: 'Flatbed, oversized, machinery.' },
    { name: 'Pharma & Cold Chain', body: 'Reefer, validated handoffs.' },
    { name: 'General Freight', body: 'LTL, FTL, drop-trailer.' },
  ];
  return (
    <section className="section-sm" style={{borderBottom:'1px solid var(--line)'}}>
      <div className="wrap">
        <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 36, flexWrap:'wrap', gap:12}}>
          <div className="mono" style={{color:'var(--ink-3)'}}>WHO WE MOVE FOR · 6 INDUSTRIES · 1 OPERATING MODEL</div>
          <div className="mono" style={{color:'var(--ink-2)'}}>SINCE 2018</div>
        </div>
        <div className="stack-borders" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 0, borderTop:'1px solid var(--line)'}}>
          {industries.map((it, i) => (
            <div key={it.name} style={{
              padding:'32px 28px',
              borderRight: (i % 3 !== 2) ? '1px solid var(--line)' : '0',
              borderBottom: i < 3 ? '1px solid var(--line)' : '0',
            }}>
              <div className="mono" style={{color:'var(--red)'}}>{String(i+1).padStart(2,'0')}</div>
              <h4 className="h-display" style={{fontSize:28, margin:'8px 0 8px'}}>{it.name}</h4>
              <p style={{color:'var(--ink-2)', fontSize:14, margin:0}}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Founder quote / About teaser ===== */
function FounderTeaser() {
  return (
    <section className="section" style={{paddingTop:120, paddingBottom:120}}>
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap: 80, alignItems:'center'}}>
          <Reveal>
            <div style={{position:'relative', aspectRatio:'4/5', overflow:'hidden', background:'var(--bg-2)', border:'1px solid var(--line)'}}>
              <img src="assets/office.jpg" alt="" className="img-fill img-grade" style={{filter:'contrast(1.1) saturate(0.85) brightness(0.85)'}}/>
              <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, transparent 60%, rgba(10,11,13,0.7) 100%)'}}></div>
              <div style={{position:'absolute', bottom:24, left:24, right:24}}>
                <span className="pill"><span className="dot"></span>HQ · ETOBICOKE, ON</span>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div>
              <div className="mono" style={{color:'var(--red)'}}>03 / FOUNDED 2018 · PETER & RAHUL</div>
              <h3 className="h-display" style={{fontSize:'clamp(32px, 4vw, 56px)', margin:'24px 0 0', letterSpacing:'-0.02em', lineHeight:1.05}}>
                "We started Dexpress because the trucking we'd seen for ten years wasn't good enough — for the shipper, or for the driver. So we built one that was."
              </h3>
              <div style={{marginTop:32, display:'flex', alignItems:'center', gap:16}}>
                <div style={{width:48, height:1, background:'var(--red)'}}></div>
                <div>
                  <div style={{fontWeight:600}}>Peter & Rahul</div>
                  <div className="mono" style={{color:'var(--ink-3)'}}>FOUNDERS · 10+ YRS LOGISTICS OPS</div>
                </div>
              </div>
              <a href="about.html" className="btn btn-ghost" style={{marginTop:32}}>Read our story <span className="arr">→</span></a>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ===== Final CTA ===== */
function FinalCTA() {
  return (
    <section className="section" style={{paddingTop:140, paddingBottom:140, background:'#06070A', borderTop:'1px solid var(--line)'}}>
      <div className="wrap" style={{textAlign:'center'}}>
        <div className="mono" style={{color:'var(--red)', marginBottom:16}}>04 / NEXT STEP</div>
        <h2 className="h-display" style={{fontSize:'clamp(48px, 7vw, 110px)', margin:0, letterSpacing:'-0.025em', lineHeight:0.95, maxWidth:'18ch', marginInline:'auto'}}>
          Move freight with someone who <span style={{color:'var(--red)'}}>moves like you do.</span>
        </h2>
        <p className="lede" style={{marginTop:28, marginInline:'auto'}}>One call to dispatch. One person owns your load. One number you can trust.</p>
        <div style={{display:'flex', gap:14, justifyContent:'center', marginTop:40, flexWrap:'wrap'}}>
          <a href="contact.html#quote" className="btn btn-primary">Get a quote <span className="arr">→</span></a>
          <a href="tel:18774825164" className="btn btn-ghost">📞 1-877-482-5164</a>
        </div>
      </div>
    </section>
  );
}

window.MapSection = MapSection;
window.DualFunnel = DualFunnel;
window.IndustryStrip = IndustryStrip;
window.FounderTeaser = FounderTeaser;
window.FinalCTA = FinalCTA;