// Home page
const { useEffect: useEffectHome, useState: useStateHome, useRef: useRefHome } = React;

function HomePage({ setRoute, tweaks }) {
  const [tickerOffset, setTickerOffset] = useStateHome(0);
  const heroRef = useRefHome(null);
  // If user has explicitly picked a slogan in Tweaks, use it; otherwise random-per-session
  const sloganIdx = (tweaks && typeof tweaks.slogan === 'number' && tweaks.slogan >= 0)
    ? tweaks.slogan
    : (window.CURRENT_SLOGAN_IDX || 0);
  const slogan = (window.SLOGANS && window.SLOGANS[sloganIdx]) || window.SLOGANS[0];

  useEffectHome(() => {
    let raf;
    const tick = () => {
      setTickerOffset(o => (o + 0.5) % 2000);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <div className="home">
      {/* ======== HERO ======== */}
      <section className="hero" ref={heroRef}>
        <div className="hero-bg">
          <div className="hero-grid-lines"></div>
          <div className="hero-photo-placeholder"></div>
          <div className="hero-scrim"></div>
        </div>
        <div className="hero-content">
          <div className="hero-eyebrow">
            <span className="pulse-dot"></span>
            <span>24/7 DISPATCH · LIVE TRACKING · DEDICATED UNITS</span>
          </div>
          <h1 className="hero-title">
            {slogan.line1}<br/>
            <span className="italic-accent">{slogan.line2}</span>
          </h1>
          <p className="hero-sub">
            {slogan.sub}
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={() => setRoute('careers')}>
              Drive With Us
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
            <button className="btn btn-ghost btn-lg" onClick={() => setRoute('services')}>
              Book a Load
            </button>
          </div>
        </div>

        <div className="hero-stats">
          <div className="stat">
            <div className="stat-num">24<span>/7</span></div>
            <div className="stat-label">Dispatch & Ops</div>
          </div>
          <div className="stat">
            <div className="stat-num">100<span>%</span></div>
            <div className="stat-label">Live Tracking</div>
          </div>
          <div className="stat">
            <div className="stat-num">0</div>
            <div className="stat-label">Forced Dispatch</div>
          </div>
          <div className="stat">
            <div className="stat-num">48<span>-state</span></div>
            <div className="stat-label">Coverage</div>
          </div>
        </div>
      </section>

      {/* ======== MARQUEE ======== */}
      <div className="marquee">
        <div className="marquee-track" style={{ transform: `translateX(-${tickerOffset}px)` }}>
          {Array(4).fill(0).map((_, i) => (
            <div className="marquee-group" key={i}>
              <span>EXPEDITED FREIGHT</span><span className="dot">●</span>
              <span>SAME-DAY DELIVERY</span><span className="dot">●</span>
              <span>TEAM DRIVERS</span><span className="dot">●</span>
              <span>HAZMAT CERTIFIED</span><span className="dot">●</span>
              <span>TWIC ENDORSED</span><span className="dot">●</span>
              <span>COAST-TO-COAST</span><span className="dot">●</span>
            </div>
          ))}
        </div>
      </div>

      {/* ======== SPLIT: TWO AUDIENCES ======== */}
      <section className="split-section">
        <div className="split-header">
          <span className="section-kicker">01 — WHO WE SERVE</span>
          <h2 className="section-title">Two sides of the road.<br/>One operations team.</h2>
        </div>
        <div className="split-grid">
          <div className="split-card split-brokers">
            <div className="split-tag">FOR BROKERS</div>
            <h3>Every load you book rides on a dedicated unit.</h3>
            <ul className="check-list">
              <li><CheckIcon/> All units are dedicated — no re-brokering, no surprises</li>
              <li><CheckIcon/> 24/7 operations team you can actually reach</li>
              <li><CheckIcon/> Live GPS tracking for the full length of the shipment</li>
              <li><CheckIcon/> Hazmat & TWIC credentialed drivers available</li>
              <li><CheckIcon/> Cargo van → straight truck capacity, team-ready</li>
            </ul>
            <button className="btn btn-dark" onClick={() => setRoute('services')}>
              Book a load →
            </button>
          </div>
          <div className="split-card split-drivers">
            <div className="split-tag">FOR OWNER-OPERATORS</div>
            <h3>High-paying loads. Your route. Your call.</h3>
            <ul className="check-list">
              <li><CheckIcon/> Personal dispatcher — not a call center</li>
              <li><CheckIcon/> Custom load-board automation feeds consistent freight</li>
              <li><CheckIcon/> Weekly settlements, same-day Quick Pay available</li>
              <li><CheckIcon/> Local and OTR runs, you pick your lanes</li>
              <li><CheckIcon/> No forced dispatch. Ever.</li>
            </ul>
            <button className="btn btn-primary" onClick={() => setRoute('careers')}>
              Apply to drive →
            </button>
          </div>
        </div>
      </section>

      {/* ======== SERVICES GRID ======== */}
      <section className="services-section">
        <div className="section-head">
          <span className="section-kicker">02 — SERVICES</span>
          <h2 className="section-title">Equipment for every deadline.</h2>
          <p className="section-sub">From a single pallet on a cargo van to a 26-foot straight truck running team, we match equipment to your time window.</p>
        </div>
        <div className="services-grid">
          {[
            { n: '01', t: 'Expedited & Hot-Shot', d: 'Time-critical freight picked up in hours, not days. Team drivers available for nonstop runs.', hl: true },
            { n: '02', t: 'Same-Day Delivery', d: 'Regional same-day service dispatched within the hour from PA, NJ, NY, DE, MD.' },
            { n: '03', t: 'Team Drivers OTR', d: 'Coast-to-coast nonstop. Two drivers, one load, zero idle time.' },
            { n: '04', t: 'Cargo Van', d: 'Up to 3,000 lbs. Most cost-effective for sub-pallet freight and parts runs.' },
            { n: '05', t: 'Straight / Box Truck', d: '14–26 ft equipment with liftgates, moving blankets, and e-track tie-downs.' },
            { n: '06', t: 'Hazmat + TWIC', d: 'Certified and endorsed drivers for hazardous materials and secure port access.' },
          ].map(s => (
            <div key={s.n} className={`service-card ${s.hl ? 'highlight' : ''}`}>
              <div className="service-num">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="service-arrow">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M9 7h8v8"/></svg>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ======== HOW WE MOVE ======== */}
      <section className="howwemove">
        <div className="section-head dark">
          <span className="section-kicker light">03 — HOW WE MOVE</span>
          <h2 className="section-title light">Four touchpoints.<br/>One live signal.</h2>
        </div>
        <div className="timeline">
          {[
            { t: 'Load posted', d: 'Broker calls, emails, or posts a load. Dispatch responds within minutes — 24/7.' },
            { t: 'Unit assigned', d: 'A dedicated truck is matched. You get driver name, equipment, ETA, MC#, insurance COI.' },
            { t: 'Live transit', d: 'GPS pings every few minutes. You see the truck move on a link we text you — no logins.' },
            { t: 'Delivered', d: 'POD uploaded on arrival. Invoice issued same day. Quick-Pay available for drivers.' },
          ].map((step, i) => (
            <div key={i} className="timeline-step">
              <div className="timeline-num">0{i + 1}</div>
              <h4>{step.t}</h4>
              <p>{step.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ======== BIG CTA ======== */}
      <section className="big-cta">
        <div className="bigcta-inner">
          <div className="bigcta-left">
            <span className="section-kicker">READY TO DRIVE?</span>
            <h2>Submit your owner-operator packet in under 5 minutes.</h2>
            <p>Tell us about you, your equipment, and your authority — we review every submission and get back within 24 hours.</p>
          </div>
          <div className="bigcta-right">
            <button className="btn btn-primary btn-xl" onClick={() => setRoute('careers')}>
              Start application
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
            <a href="tel:+14842355888" className="bigcta-phone">
              or call dispatch: <strong>+1 484 235 5888</strong>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

function CheckIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="check-icon">
      <path d="M20 6L9 17l-5-5"/>
    </svg>
  );
}

Object.assign(window, { HomePage });