/* ============================================================
   Hero — wordmark, countdown, CTA
   ============================================================ */

const LAUNCH_DATE = new Date("2026-09-01T00:00:00+03:00"); // Q3 2026 Riyadh pilot

function useCountdown(target) {
  const [now, setNow] = React.useState(() => Date.now());
  React.useEffect(() => {
    const i = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(i);
  }, []);
  const diff = Math.max(0, target.getTime() - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const minutes = Math.floor((diff % 3600000) / 60000);
  const seconds = Math.floor((diff % 60000) / 1000);
  return { days, hours, minutes, seconds, ms: diff };
}

function Wordmark() {
  const chars = "TRUCKEE".split("");
  const [flip, setFlip] = React.useState(-1);
  React.useEffect(() => {
    const i = setInterval(() => {
      setFlip(Math.floor(Math.random() * chars.length));
      setTimeout(() => setFlip(-1), 480);
    }, 2600);
    return () => clearInterval(i);
  }, []);
  return (
    <h1 className="wordmark" aria-label="Truckee">
      {chars.map((c, i) => (
        <span
          key={i}
          className={"ch " + (i === flip ? "flip" : "")}
          style={{
            transform: i === flip ? "translateY(-6px) rotate(-2deg)" : "none",
          }}
        >
          {c}
        </span>
      ))}
    </h1>
  );
}

function Countdown() {
  const t = useCountdown(LAUNCH_DATE);
  const cells = [
    { v: t.days, u: "days" },
    { v: t.hours, u: "hours" },
    { v: t.minutes, u: "min" },
    { v: t.seconds, u: "sec" },
  ];
  const pad = (n) => String(n).padStart(2, "0");
  return (
    <div className="countdown">
      <div className="countdown-label">
        <span>Launch window · Riyadh pilot</span>
        <span style={{ color: "var(--accent)" }}>Q3 2026</span>
      </div>
      <div className="countdown-grid">
        {cells.map((c) => (
          <div className="countdown-cell" key={c.u}>
            <div className="countdown-num">{pad(c.v)}</div>
            <div className="countdown-unit">{c.u}</div>
          </div>
        ))}
      </div>
      <div className="countdown-foot">
        <span>Phase 01 / 04</span>
        <span><strong>+50 shippers</strong> · 200 drivers</span>
      </div>
    </div>
  );
}

function Hero({ scrollTo }) {
  return (
    <section className="hero">
      <div>
        <div className="hero-eyebrow">
          <span className="badge">SOON</span>
          <span>KSA · GCC · 2026</span>
        </div>
        <Wordmark />
        <p className="hero-tag">
          A real-time <span className="accent">reverse-auction</span> marketplace for freight.
          Bid, book, deliver
        </p>
        <p className="hero-sub">
          Saudi Arabia moves SAR 180B+ in freight a year — and most of it still happens by phone.
          We're rebuilding the market around a single live auction. Shippers post loads, carriers bid,
          the best offer wins.
        </p>
        <div className="hero-cta-row">
          <button className="btn btn-primary" onClick={() => scrollTo("waitlist")}>
            Join the waitlist <span className="btn-arrow">→</span>
          </button>
          <button className="btn btn-ghost" onClick={() => scrollTo("auction")}>
            See it bid live
          </button>
        </div>
      </div>
      <div>
        <Countdown />
      </div>
    </section>
  );
}