/* Home page sections — Dexpress
   Each section is a focused component for clarity. */

/* ===== USP section: editorial 5-panel scroll ===== */
const USPS = [
  {
    n: '01',
    key: 'reliability',
    title: 'Reliability',
    headline: 'On time. Every time. Or we call before you do.',
    body: "Six years, zero compromise. Our dispatch team owns every load from PU to POD — if a wheel turns late, you hear it from us first, not from your customer. CTPAT and FAST certified across the border.",
    proof: ['98.7%', 'on-time PU/DEL'],
    image: 'assets/truck-highway-2.jpg',
    color: 'red',
  },
  {
    n: '02',
    key: 'speed',
    title: 'Speed',
    headline: 'GTA to anywhere. Quoted in minutes, rolling within the hour.',
    body: 'Quotes back inside 30 minutes during business hours. Same-day pickup across the GTA. Expedited team dedicated. Drop-trailer programs for high-frequency lanes.',
    proof: ['< 30min', 'avg quote turnaround'],
    image: 'assets/truck-highway-1.jpg',
    color: 'red',
  },
  {
    n: '03',
    key: 'cost',
    title: 'Cost-effective',
    headline: 'A fleet that pays for itself in fuel and consolidation.',
    body: 'Newer trucks burn less. Smart consolidation in our 50,000 sq ft cross-dock means you only pay for the space you use. No fuel surcharge games — what we quote is what you pay.',
    proof: ['100%', 'transparent pricing'],
    image: 'assets/trucks-yard.jpg',
    color: 'red',
  },
  {
    n: '04',
    key: 'sustainability',
    title: 'Sustainability',
    headline: 'Modern fleet, fewer emissions, fewer empty miles.',
    body: 'A fleet under five years average age means cleaner emissions per kilometre. Backhaul matching across our network reduces deadhead. We measure and report it — ask us for the dashboard.',
    proof: ['<5yr', 'avg fleet age'],
    image: 'assets/truck-flatbed-green.jpg',
    color: 'red',
  },
  {
    n: '05',
    key: 'capacity',
    title: 'Capacity',
    headline: '60+ trucks. 100+ trailers. 50,000 sq ft of warehouse.',
    body: 'Dry van, flatbed (tandem, quad, 5-axle, tri-axle), reefer, expedited. CTPAT-approved warehouse on Bethridge plus a 5,000 sq ft cross-dock on Racine. Whatever shape your freight takes, we already have the trailer for it.',
    proof: ['50K', 'sq ft warehouse'],
    image: 'assets/container-fleet.jpg',
    color: 'red',
  },
];

function UspSection() {
  return (
    <section id="usps" className="section" style={{paddingTop: 140, paddingBottom: 140}}>
      <div className="wrap">
        <Reveal>
          <SectionHead
            num="WHY DEXPRESS / FIVE FUNDAMENTALS"
            label="THE OPERATING SYSTEM"
            title={<>Five things we don't compromise on. <span style={{color:'var(--ink-3)'}}>Ever.</span></>}
            lede="Reliability, speed, cost, sustainability, capacity. Every logistics company says these words. Here is what each one actually means at Dexpress, with the proof points to back them up."
          />
        </Reveal>

        <div style={{display:'flex', flexDirection:'column', gap: 24}}>
          {USPS.map((u, i) => (
            <Reveal key={u.key} delay={i * 60}>
              <UspRow {...u} reverse={i % 2 === 1} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function UspRow({ n, title, headline, body, proof, image, reverse }) {
  return (
    <article className="usp-row" style={{
      display:'grid',
      gridTemplateColumns: reverse ? '1fr 1.05fr' : '1.05fr 1fr',
      gap: 0,
      borderTop: '1px solid var(--line)',
      minHeight: 460,
    }}>
      {/* Image side */}
      <div style={{
        gridColumn: reverse ? 2 : 1,
        gridRow: 1,
        position:'relative', overflow:'hidden',
        background:'var(--bg-2)',
      }}>
        <img src={image} alt="" className="img-fill img-grade" style={{transition:'transform 1.2s ease'}} 
          onMouseEnter={e => e.currentTarget.style.transform='scale(1.04)'}
          onMouseLeave={e => e.currentTarget.style.transform='scale(1)'} />
        <div style={{position:'absolute', inset:0, background:'linear-gradient(90deg, rgba(10,11,13,0.45) 0%, rgba(10,11,13,0) 60%)'}}></div>
        <div style={{position:'absolute', top:24, left:24, display:'flex', gap:8}}>
          <span className="pill"><span className="dot"></span>{title.toUpperCase()}</span>
        </div>
      </div>
      {/* Text side */}
      <div style={{
        gridColumn: reverse ? 1 : 2,
        gridRow: 1,
        padding: '56px 48px',
        display:'flex', flexDirection:'column', justifyContent:'space-between', gap:32,
        background: 'var(--bg)',
      }}>
        <div>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 20}}>
            <span className="num" style={{color:'var(--red)', fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.18em'}}>{n} / 05</span>
            <span className="mono" style={{color:'var(--ink-3)'}}>{title.toUpperCase()}</span>
          </div>
          <h3 className="h-display h3" style={{margin:0, maxWidth:'18ch'}}>{headline}</h3>
          <p className="lede" style={{marginTop:20}}>{body}</p>
        </div>
        <div style={{display:'flex', alignItems:'baseline', gap:14, borderTop:'1px solid var(--line)', paddingTop:20}}>
          <span className="h-display" style={{fontSize:54, color:'var(--red)', lineHeight:1}}>{proof[0]}</span>
          <span className="mono" style={{color:'var(--ink-2)', textTransform:'uppercase'}}>{proof[1]}</span>
        </div>
      </div>
    </article>
  );
}

/* ===== Stats marquee ===== */
function Marquee() {
  const items = ['EST. 2018', '60+ TRUCKS', '100+ TRAILERS', '50,000 SQ FT WAREHOUSE', 'CTPAT APPROVED', 'FAST CERTIFIED', 'CANADA · USA', 'ETOBICOKE, ON'];
  return (
    <div className="marquee" style={{background:'var(--bg)'}}>
      <div className="marquee-track">
        {[...items, ...items].map((it, i) => (
          <span key={i}>{it}<span className="star">✶</span></span>
        ))}
      </div>
    </div>
  );
}

/* ===== Services overview ===== */
const SERVICES = [
  { num:'01', name:'Warehousing & Distribution', tag:'MAIN FOCUS', body:'CTPAT-approved 50,000 sq ft on Bethridge + 5,000 sq ft cross-dock on Racine.', img:'assets/warehouse.jpg' },
  { num:'02', name:'Dry Van', tag:'STANDARD', body:'100+ dry van trailers. Dedicated lanes available. Drop-trailer programs.', img:'assets/container-fleet.jpg' },
  { num:'03', name:'Flatbed', tag:'SPECIALIZED', body:'Tandem, quad, 5-axle, tri-axle. Oversized, machinery, construction.', img:'assets/truck-flatbed-green.jpg' },
  { num:'04', name:'Temp-controlled', tag:'REEFER', body:'Reefer trailers for perishables, pharma, climate-sensitive freight.', img:'assets/fleet-lineup.jpg' },
  { num:'05', name:'Expedited & Dedicated', tag:'TIME-CRITICAL', body:'Same-day GTA. Dedicated lanes. Cross-border FAST.', img:'assets/truck-highway-1.jpg' },
  { num:'06', name:'Freight Management', tag:'4PL', body:'We manage the carriers, the lanes, the analytics. You see one invoice.', img:'assets/office.jpg' },
];

function ServicesOverview() {
  return (
    <section className="section" style={{background:'var(--bg-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
      <div className="wrap">
        <Reveal>
          <SectionHead
            num="WHAT WE DO / 06 SERVICES"
            label="THE SERVICE LINE"
            title={<>Everything your supply chain needs. <span style={{color:'var(--ink-3)'}}>Under one roof.</span></>}
            lede="Trucking is the visible part. Our warehousing, cross-docking, and freight management are how we actually save you money. Pick any one, or let us run the whole thing."
          />
        </Reveal>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 16}}>
          {SERVICES.map((s, i) => (
            <Reveal key={s.num} delay={i * 50}>
              <ServiceCard {...s} />
            </Reveal>
          ))}
        </div>
        <div style={{marginTop:48, display:'flex', justifyContent:'center'}}>
          <a href="services.html" className="btn btn-ghost">All services <span className="arr">→</span></a>
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ num, name, tag, body, img }) {
  return (
    <a href="services.html" className="card" style={{display:'block', overflow:'hidden', textDecoration:'none'}}
      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)'; }}>
      <div style={{position:'relative', height: 220, overflow:'hidden', background:'var(--bg-3)'}}>
        <img src={img} alt="" className="img-fill img-grade" style={{transition:'transform 1.2s ease'}}/>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(10,11,13,0) 0%, rgba(10,11,13,0.85) 100%)'}}></div>
        <div style={{position:'absolute', top:14, left:14}}>
          <span className="pill"><span className={`dot ${tag==='MAIN FOCUS'?'':'blue'}`}></span>{tag}</span>
        </div>
        <div style={{position:'absolute', bottom:14, left:14, right:14, display:'flex', justifyContent:'space-between', alignItems:'flex-end'}}>
          <div className="mono" style={{color:'var(--ink-3)'}}>{num} / 06</div>
        </div>
      </div>
      <div style={{padding:'24px 22px 26px'}}>
        <h4 className="h-display" style={{margin:0, fontSize:24, letterSpacing:'-0.01em'}}>{name}</h4>
        <p style={{margin:'10px 0 0', color:'var(--ink-2)', fontSize:14, lineHeight:1.55}}>{body}</p>
      </div>
    </a>
  );
}

window.UspSection = UspSection;
window.Marquee = Marquee;
window.ServicesOverview = ServicesOverview;
