// SF Logistics — Clean (white · black · red)
const { useState, useEffect, useRef } = React;

function Icon({ name, size = 18, stroke = 1.5 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "doc": return <svg {...p}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>;
    case "search": return <svg {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>;
    case "loads": return <svg {...p}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>;
    case "users": return <svg {...p}><circle cx="9" cy="8" r="3.5"/><path d="M2 20c0-3.5 3-6 7-6s7 2.5 7 6"/><circle cx="17" cy="8" r="2.5"/><path d="M22 19c0-2.5-1.7-4.5-4-5"/></svg>;
    case "chart": return <svg {...p}><path d="M3 21V3"/><path d="M3 16l5-5 4 4 8-8"/><path d="M16 7h4v4"/></svg>;
    case "export": return <svg {...p}><path d="M12 3v12"/><path d="M7 8l5-5 5 5"/><path d="M3 21h18"/></svg>;
    case "x": return <svg {...p}><path d="M6 6l12 12M6 18L18 6"/></svg>;
    default: return null;
  }
}

function CountUp({ to, decimals = 0, duration = 1200, suffix = "" }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started.current) {
        started.current = true;
        const start = performance.now();
        const tick = (now) => {
          const t = Math.min(1, (now - start) / duration);
          const eased = 1 - Math.pow(1 - t, 3);
          setVal(to * eased);
          if (t < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to]);
  return <span ref={ref} className="mono">{val.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}{suffix}</span>;
}

function TopNav({ page, setPage }) {
  const [open, setOpen] = useState(false);
  const go = (p) => { setPage(p); setOpen(false); };
  return (
    <React.Fragment>
      <nav className="topnav">
        <div className="topnav-inner">
          <div className="brand" onClick={() => go("landing")}>
            <img className="brand-logo" src="assets/logo-dark.png" alt="SF Logistics" />
          </div>

          <div className="nav-links">
            <button className={`nav-link ${page==="landing"?"active":""}`} onClick={() => go("landing")}>Home</button>
            <button className="nav-link" onClick={() => { go("landing"); setTimeout(() => document.getElementById("brokers")?.scrollIntoView({behavior:"smooth"}), 80); }}>Brokers</button>
            <button className="nav-link" onClick={() => { go("landing"); setTimeout(() => document.getElementById("drivers")?.scrollIntoView({behavior:"smooth"}), 80); }}>Drivers</button>
            <button className={`nav-link ${page==="apply"?"active":""}`} onClick={() => go("apply")}>Apply</button>
            <button className={`nav-link ${page==="crm"?"active":""}`} onClick={() => go("crm")}>Console</button>
          </div>

          <div className="nav-right">
            <span className="nav-phone">1-718-701-3335</span>
            <button className="nav-cta" onClick={() => go("apply")}>
              Drive with us <span className="arrow">→</span>
            </button>
            <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label="Menu">
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </nav>

      <div className={`mobile-nav ${open ? "open" : ""}`}>
        <button className={`m-link ${page==="landing"?"active":""}`} onClick={() => go("landing")}>Home</button>
        <button className="m-link" onClick={() => { go("landing"); setTimeout(() => document.getElementById("brokers")?.scrollIntoView({behavior:"smooth"}), 200); }}>Brokers</button>
        <button className="m-link" onClick={() => { go("landing"); setTimeout(() => document.getElementById("drivers")?.scrollIntoView({behavior:"smooth"}), 200); }}>Drivers</button>
        <button className={`m-link ${page==="apply"?"active":""}`} onClick={() => go("apply")}>Apply</button>
        <button className={`m-link ${page==="crm"?"active":""}`} onClick={() => go("crm")}>Console</button>
        <div className="m-foot">
          <span>1-718-701-3335 · EXT 402</span>
          <span>BROOKLYN · MC# 1198447</span>
        </div>
      </div>
    </React.Fragment>
  );
}

function HeroReel() {
  const v = "?v=3";
  const reel = [
    { video: "assets/reel-1.mp4" + v, poster: "assets/dispatch.png",     caption: "Dispatch · 24 / 7 desk" },
    { video: "assets/reel-2.mp4" + v, poster: "assets/freightliner.png", caption: "Truck #119 · 53' dry van" },
    { video: "assets/reel-3.mp4" + v, poster: "assets/hq-fleet.png",     caption: "Brooklyn HQ · Fleet at sunset" },
    { video: "assets/reel-4.mp4" + v, poster: "assets/shop.png",         caption: "In-house shop · Bay 1007" },
  ];
  const [idx, setIdx] = useState(0);
  const [loaded, setLoaded] = useState(() => new Set([0]));
  const refs = useRef([]);

  useEffect(() => {
    const t = setInterval(() => {
      setIdx(i => {
        const next = (i + 1) % reel.length;
        setLoaded(prev => {
          if (prev.has(next)) return prev;
          const n = new Set(prev);
          n.add(next);
          return n;
        });
        return next;
      });
    }, 5400);
    return () => clearInterval(t);
  }, []);

  useEffect(() => {
    refs.current.forEach((el, i) => {
      if (!el) return;
      if (i === idx) {
        try { el.currentTime = 0; } catch (e) {}
        const p = el.play();
        if (p && p.catch) p.catch(() => {});
      } else {
        try { el.pause(); } catch (e) {}
      }
    });
  }, [idx, loaded]);

  return (
    <div className="hero-reel" role="presentation">
      {reel.map((item, i) => (
        <div key={i} className={`hero-reel-frame ${i === idx ? "active" : ""}`} style={{ backgroundImage: `url('${item.poster}')` }}>
          {loaded.has(i) && (
            <video
              ref={el => { refs.current[i] = el; if (el) { el.muted = true; el.defaultMuted = true; el.setAttribute("muted", ""); el.setAttribute("playsinline", ""); } }}
              className="reel-video"
              src={item.video}
              poster={item.poster}
              loop
              autoPlay
              preload="auto"
              disablePictureInPicture
              disableRemotePlayback
            />
          )}
        </div>
      ))}
      <div className="hero-reel-overlay">
        <div className="reel-meta mono">
          <span className="num">{String(idx + 1).padStart(2, "0")} / {String(reel.length).padStart(2, "0")}</span>
          <span className="dot"></span>
          <span className="cap">{reel[idx].caption}</span>
        </div>
        <div className="reel-pips">
          {reel.map((_, i) => (
            <button key={i} type="button" className={`pip ${i === idx ? "active" : ""}`} onClick={() => setIdx(i)} aria-label={`View clip ${i + 1}`} />
          ))}
        </div>
      </div>
    </div>
  );
}

function Hero({ setPage }) {
  return (
    <section className="hero hero-cinema">
      <HeroReel />
      <div className="hero-veil" aria-hidden="true"></div>
      <div className="container hero-inner">
        <div className="hero-grid">
          <div>
            <div className="hero-tag">
              <span className="pulse"></span>
              <span>Live Dispatch · 24 / 7 · 48 States</span>
            </div>
            <h1 className="hero-title">
              FREIGHT THAT <span className="red">MOVES</span> WHEN YOU DO.
            </h1>
            <p className="hero-blurb">
              SF Logistics is a Brooklyn motor carrier and dispatch operation. We move freight coast-to-coast for shippers and brokers — and we put owner-operators on the lanes that pay.
            </p>
          </div>
          <div>
            <div className="split-cta">
              <button className="split-cta-card dark" onClick={() => document.getElementById("brokers")?.scrollIntoView({behavior:"smooth"})}>
                <span className="lbl">Shippers · Brokers</span>
                <span className="head">Move<br/>a load</span>
                <span className="arrow-row"><span>Get a quote</span><span className="arrow">→</span></span>
              </button>
              <button className="split-cta-card glass" onClick={() => setPage("apply")}>
                <span className="lbl">Drivers · Owner-Ops</span>
                <span className="head">Drive<br/>with us</span>
                <span className="arrow-row"><span>Apply now</span><span className="arrow">→</span></span>
              </button>
            </div>
          </div>
        </div>

        <div className="hero-stats">
          <div className="hero-stat">
            <div className="k">Loads delivered</div>
            <div className="v"><CountUp to={4218} /><small>across 48 states</small></div>
          </div>
          <div className="hero-stat">
            <div className="k">On-time</div>
            <div className="v"><CountUp to={98.4} decimals={1} suffix="%" /><small>YTD average</small></div>
          </div>
          <div className="hero-stat">
            <div className="k">Active drivers</div>
            <div className="v"><CountUp to={142} /><small>and growing</small></div>
          </div>
          <div className="hero-stat">
            <div className="k">Years running</div>
            <div className="v"><CountUp to={9} /><small>Brooklyn-built</small></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesSection() {
  const services = [
    { num: "01", head: "Brokerage", body: "We source capacity for shippers across all 48 states. Real dispatchers, real phones." },
    { num: "02", head: "Asset Carrier", body: "MC# 1198447 / DOT# 3214006. Our own tractors and trailers running OTR." },
    { num: "03", head: "Dispatch", body: "Owner-operators get curated lanes, paperwork handled, factoring set up day one." },
    { num: "04", head: "Reefer + Flatbed", body: "Temperature-controlled, oversized, and step-deck specialty freight." },
    { num: "05", head: "Expedite", body: "Same-day pickup, team drivers, hotshot for urgent loads out of NY/NJ." },
    { num: "06", head: "Compliance", body: "FMCSA-clean. ELD-managed HOS. Safety isn't a department — it's the floor." },
  ];
  return (
    <section className="section section-bone">
      <div className="container">
        <div className="section-head-row">
          <div className="section-head-num">SERVICES</div>
          <h2 className="section-head-title">What we <span className="it">do.</span></h2>
          <p className="section-head-blurb">
            One company, three angles: <strong>brokerage</strong>, <strong>asset carrier</strong>, and <strong>dispatch desk</strong>. One phone number.
          </p>
        </div>
        <div className="services-stack">
          {services.map(s => (
            <div className="service-row" key={s.num}>
              <div className="service-num">{s.num}</div>
              <div className="service-name">{s.head}</div>
              <div className="service-body">{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ShipSection() {
  const eqList = window.SFL_DATA.equipment;
  const [f, setF] = useState({
    originCity: "", originState: "", originZip: "",
    destCity: "", destState: "", destZip: "",
    pickupDate: "", pickupWindow: "Anytime",
    deliveryDate: "", deliveryWindow: "Anytime",
    equipment: eqList[0],
    weight: "", pieces: "", commodity: "",
    hazmat: false, temp: false,
    company: "", name: "", email: "", phone: "",
  });
  const [submitted, setSubmitted] = useState(false);
  const [ref] = useState(() => `SFL-${Math.floor(100000 + Math.random() * 900000)}`);
  const upd = (k) => (e) => setF(s => ({ ...s, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value }));
  const filled = !!(f.originCity && f.destCity && f.pickupDate && f.email);

  const persistLead = () => {
    const lead = {
      id: ref,
      origin: `${f.originCity}${f.originState ? ", " + f.originState : ""}`,
      dest: `${f.destCity}${f.destState ? ", " + f.destState : ""}`,
      miles: 0,
      equipment: f.equipment,
      weight: f.weight ? `${f.weight} lb` : "—",
      rate: 0,
      rpm: 0,
      broker: f.company || "Direct shipper",
      source: "Website",
      pickup: f.pickupDate || "TBD",
      delivery: f.deliveryDate || "TBD",
      status: "open",
      commodity: f.commodity || "—",
      refs: `${f.name || "—"} · ${f.email}${f.phone ? " · " + f.phone : ""}`,
      hazmat: !!f.hazmat,
      tempControl: !!f.temp,
      isLead: true,
      submittedAt: Date.now(),
    };
    try {
      const stored = JSON.parse(localStorage.getItem("SFL_LEADS_LOADS") || "[]");
      stored.unshift(lead);
      localStorage.setItem("SFL_LEADS_LOADS", JSON.stringify(stored));
    } catch (e) {}
  };

  if (submitted) {
    return (
      <section id="brokers" className="section section-white">
        <div className="container">
          <div className="ship-confirm">
            <div className="success-mark">✓</div>
            <h3>Shipment <span className="it">received.</span></h3>
            <p>A dispatcher will email <strong>{f.email}</strong> with a binding rate and pickup confirmation inside 60 minutes.</p>
            <p className="ref-line mono">REF · {ref}</p>
            <button className="btn" onClick={() => setSubmitted(false)}>Schedule another →</button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="brokers" className="section section-white">
      <div className="container">
        <div className="section-head-row">
          <div className="section-head-num">SHIPPERS · ONLINE BOOKING</div>
          <h2 className="section-head-title">Ship online in <span className="it">60 seconds.</span></h2>
          <p className="section-head-blurb">
            Tell us <strong>where, when, and what</strong>. A dispatcher confirms your rate by email or phone within the hour. No accounts, no minimums, full coverage in 48 states.
          </p>
        </div>

        <div className="ship-card">
          <form className="ship-form" onSubmit={e => { e.preventDefault(); if (filled) { persistLead(); setSubmitted(true); } }}>
            <div className="ship-block">
              <h4 className="ship-block-head"><span className="n">A</span> Pickup</h4>
              <div className="ship-fields">
                <label className="field s4"><span className="lbl">City</span><input value={f.originCity} onChange={upd("originCity")} placeholder="Brooklyn" /></label>
                <label className="field s1"><span className="lbl">State</span><input value={f.originState} onChange={upd("originState")} placeholder="NY" maxLength={2} /></label>
                <label className="field s1"><span className="lbl">ZIP</span><input value={f.originZip} onChange={upd("originZip")} placeholder="11201" /></label>
                <label className="field s3"><span className="lbl">Pickup date</span><input type="date" value={f.pickupDate} onChange={upd("pickupDate")} /></label>
                <label className="field s3"><span className="lbl">Window</span>
                  <select value={f.pickupWindow} onChange={upd("pickupWindow")}>
                    <option>Anytime</option><option>Morning · 7a–12p</option><option>Afternoon · 12p–5p</option><option>Evening · 5p–10p</option><option>By appointment</option>
                  </select>
                </label>
              </div>
            </div>

            <div className="ship-block">
              <h4 className="ship-block-head"><span className="n">B</span> Delivery</h4>
              <div className="ship-fields">
                <label className="field s4"><span className="lbl">City</span><input value={f.destCity} onChange={upd("destCity")} placeholder="Chicago" /></label>
                <label className="field s1"><span className="lbl">State</span><input value={f.destState} onChange={upd("destState")} placeholder="IL" maxLength={2} /></label>
                <label className="field s1"><span className="lbl">ZIP</span><input value={f.destZip} onChange={upd("destZip")} placeholder="60601" /></label>
                <label className="field s3"><span className="lbl">Deliver by</span><input type="date" value={f.deliveryDate} onChange={upd("deliveryDate")} /></label>
                <label className="field s3"><span className="lbl">Window</span>
                  <select value={f.deliveryWindow} onChange={upd("deliveryWindow")}>
                    <option>Anytime</option><option>Morning · 7a–12p</option><option>Afternoon · 12p–5p</option><option>Evening · 5p–10p</option><option>By appointment</option>
                  </select>
                </label>
              </div>
            </div>

            <div className="ship-block">
              <h4 className="ship-block-head"><span className="n">C</span> Freight</h4>
              <div className="ship-fields">
                <label className="field s2"><span className="lbl">Equipment</span>
                  <select value={f.equipment} onChange={upd("equipment")}>
                    {eqList.map(x => <option key={x}>{x}</option>)}
                  </select>
                </label>
                <label className="field s2"><span className="lbl">Weight (lbs)</span><input value={f.weight} onChange={upd("weight")} placeholder="42,000" /></label>
                <label className="field s2"><span className="lbl">Pieces / pallets</span><input value={f.pieces} onChange={upd("pieces")} placeholder="22 pallets" /></label>
                <label className="field s6"><span className="lbl">Commodity</span><input value={f.commodity} onChange={upd("commodity")} placeholder="Frozen produce, food-grade, no stack" /></label>
                <div className="s6 ship-checks">
                  <label className={`ship-check ${f.hazmat ? "on" : ""}`}>
                    <input type="checkbox" checked={f.hazmat} onChange={upd("hazmat")} />
                    <span>HAZMAT placards required</span>
                  </label>
                  <label className={`ship-check ${f.temp ? "on" : ""}`}>
                    <input type="checkbox" checked={f.temp} onChange={upd("temp")} />
                    <span>Temperature controlled</span>
                  </label>
                </div>
              </div>
            </div>

            <div className="ship-block">
              <h4 className="ship-block-head"><span className="n">D</span> Contact</h4>
              <div className="ship-fields">
                <label className="field s3"><span className="lbl">Company</span><input value={f.company} onChange={upd("company")} placeholder="Acme Inc" /></label>
                <label className="field s3"><span className="lbl">Your name</span><input value={f.name} onChange={upd("name")} placeholder="Jane Roe" /></label>
                <label className="field s3"><span className="lbl">Email</span><input type="email" value={f.email} onChange={upd("email")} placeholder="jane@acme.com" /></label>
                <label className="field s3"><span className="lbl">Phone</span><input type="tel" value={f.phone} onChange={upd("phone")} placeholder="(555) 555-1234" /></label>
              </div>
            </div>
          </form>

          <aside className="ship-summary">
            <div className="ship-sum-head">
              <span className="lbl">Shipment ticket</span>
              <span className="ref-line mono">{ref}</span>
            </div>
            <div className="ship-route">
              <div className="sr-line">
                <span className="sr-dot"></span>
                <div className="sr-info">
                  <div className="sr-city">{f.originCity ? `${f.originCity}${f.originState ? ", "+f.originState : ""}` : "Origin"}</div>
                  <div className="sr-when mono">{f.pickupDate || "Pickup date"} · {f.pickupWindow}</div>
                </div>
              </div>
              <div className="sr-stem"></div>
              <div className="sr-line">
                <span className="sr-dot red"></span>
                <div className="sr-info">
                  <div className="sr-city">{f.destCity ? `${f.destCity}${f.destState ? ", "+f.destState : ""}` : "Destination"}</div>
                  <div className="sr-when mono">{f.deliveryDate || "Delivery date"} · {f.deliveryWindow}</div>
                </div>
              </div>
            </div>
            <div className="ship-sum-meta">
              <div className="sm-row"><span>Equipment</span><strong>{f.equipment}</strong></div>
              <div className="sm-row"><span>Weight</span><strong>{f.weight ? `${f.weight} lbs` : "—"}</strong></div>
              <div className="sm-row"><span>Pieces</span><strong>{f.pieces || "—"}</strong></div>
              {(f.hazmat || f.temp) && (
                <div className="sm-tags">
                  {f.hazmat && <span className="sm-tag red">HAZMAT</span>}
                  {f.temp && <span className="sm-tag">TEMP CONTROL</span>}
                </div>
              )}
            </div>
            <button type="button" className="btn btn-primary dark-bg ship-submit" disabled={!filled} onClick={e => e.target.closest(".ship-card").querySelector("form").requestSubmit()}>
              {filled ? "Submit shipment →" : "Fill required fields"}
            </button>
            <div className="ship-or">— or call dispatch directly —</div>
            <a href="tel:17187013335" className="ship-phone">1-718-701-3335</a>
            <ul className="ship-trust">
              <li><span>✓</span> Rate quoted in 60 minutes</li>
              <li><span>✓</span> $1M auto liability · $100k cargo</li>
              <li><span>✓</span> Real-time tracking via ELD</li>
              <li><span>✓</span> 24/7 dispatch · live human</li>
            </ul>
          </aside>
        </div>
      </div>
    </section>
  );
}

function DriversSection({ setPage }) {
  const perks = [
    { t: "Sign-on bonus", v: "$3,500" },
    { t: "Detention pay (2h+)", v: "$75 / hour" },
    { t: "Same-day factoring", v: "1.5% flat" },
    { t: "Fuel discount network", v: "$0.42 / gal avg" },
    { t: "Weekly home time", v: "Northeast lanes" },
    { t: "24/7 dispatch", v: "Real humans" },
  ];
  return (
    <section id="drivers" className="section section-dark">
      <div className="container">
        <div className="section-head-row">
          <div className="section-head-num" style={{color:"var(--red)"}}>DRIVERS · OWNER-OPS</div>
          <h2 className="section-head-title">Drive with <span className="it">SF.</span></h2>
          <p className="section-head-blurb">
            Experienced Class-A drivers and owner-operators. Equipment-or-no-equipment — lease-purchase available. <strong>85% to truck</strong>, weekly settlements.
          </p>
        </div>

        <div className="perks">
          <div className="perks-hero">
            <div className="caption">Why drivers stay</div>
            <h3>Pay<br/>like you're<br/><span className="red">the boss.</span></h3>
            <p className="description">
              We don't nickel-and-dime. Broker rate minus our flat dispatch fee — that's your number. No fuel surcharge skim, no detention disputes.
            </p>
            <button className="btn btn-primary dark-bg" onClick={() => setPage("apply")}>Start application →</button>
          </div>
          <div className="perks-list">
            {perks.map(p => (
              <div className="perk-item" key={p.t}>
                <span className="t">{p.t}</span>
                <span className="v">{p.v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <img className="footer-logo" src="assets/logo-light.png" alt="SF Logistics" />
            <p>SF Logistics Inc<br/>Brooklyn, New York</p>
            <p className="small">MC# 1198447 · DOT# 3214006</p>
            <p className="small">Freight that <span style={{color:"var(--red)"}}>moves</span> when you do.</p>
          </div>
          <div className="footer-col">
            <h5>Operations</h5>
            <a href="tel:17187013335">1-718-701-3335 ext 402</a>
            <a href="mailto:saidkulovs@gmail.com">saidkulovs@gmail.com</a>
            <p className="small">Sanjar Saidkulov · Ops</p>
          </div>
          <div className="footer-col">
            <h5>Safety</h5>
            <a href="mailto:sflogisticsincsafety@gmail.com">sflogisticsincsafety@gmail.com</a>
            <p className="small">FMCSA · DOT compliant</p>
          </div>
          <div className="footer-col">
            <h5>Hours</h5>
            <p>Dispatch · 24 / 7</p>
            <p>Office · Mon–Fri 7a–7p ET</p>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 SF Logistics Inc</span>
          <div className="socials">
            <a href="https://linkedin.com" target="_blank" rel="noopener" aria-label="LinkedIn"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM5 8H0v16h5V8zm7.98 0H8v16h4.97v-8.4c0-4.67 6.03-5.05 6.03 0V24H24V13.92c0-7.88-8.92-7.59-11.02-3.71V8z"/></svg></a>
            <a href="https://facebook.com" target="_blank" rel="noopener" aria-label="Facebook"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.07C24 5.41 18.63 0 12 0S0 5.41 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.95.93-1.95 1.89v2.26h3.32l-.53 3.49h-2.79V24C19.61 23.1 24 18.1 24 12.07z"/></svg></a>
            <a href="https://instagram.com" target="_blank" rel="noopener" aria-label="Instagram"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></a>
            <a href="https://x.com" target="_blank" rel="noopener" aria-label="X"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644z"/></svg></a>
            <a href="https://tiktok.com" target="_blank" rel="noopener" aria-label="TikTok"><svg width="14" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64 2.93 2.93 0 01.88.13V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005.8 20.1a6.34 6.34 0 0010.86-4.43V8.42a8.16 8.16 0 004.77 1.52V6.49a4.85 4.85 0 01-1.84-.34z"/></svg></a>
            <a href="https://youtube.com" target="_blank" rel="noopener" aria-label="YouTube"><svg width="18" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 00.5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 002.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 002.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z"/></svg></a>
          </div>
          <span>Built in Brooklyn · Running 48 states</span>
        </div>
      </div>
    </footer>
  );
}

function Landing({ setPage }) {
  return (
    <React.Fragment>
      <Hero setPage={setPage} />
      <ServicesSection />
      <ShipSection />
      <DriversSection setPage={setPage} />
      <Footer />
    </React.Fragment>
  );
}

Object.assign(window, { TopNav, Landing, Icon, CountUp });