const { useState, useEffect, useRef, useCallback } = React;

// ============ ICONS ============
const Icon = {
  Fuel: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 20V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v15" />
      <line x1="3" y1="20" x2="15" y2="20" />
      <line x1="5" y1="9" x2="13" y2="9" />
      <path d="M14 8l3 3v6a2 2 0 0 0 2 2 2 2 0 0 0 2-2V8l-3-3" />
    </svg>
  ),
  Steering: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="12" cy="12" r="9" />
      <circle cx="12" cy="12" r="2.2" />
      <line x1="12" y1="3.2" x2="12" y2="9.8" />
      <line x1="3.2" y1="12" x2="9.8" y2="12" />
      <line x1="20.8" y1="12" x2="14.2" y2="12" />
    </svg>
  ),
  Truck: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="2" y="6" width="13" height="10" rx="1" />
      <path d="M15 9h4l3 4v3h-7z" />
      <circle cx="7" cy="18" r="2" />
      <circle cx="18" cy="18" r="2" />
    </svg>
  ),
  Check: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="20 6 9 17 4 12" />
    </svg>
  ),
  Arrow: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="12 5 19 12 12 19" />
    </svg>
  ),
  ArrowLeft: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="19" y1="12" x2="5" y2="12" />
      <polyline points="12 19 5 12 12 5" />
    </svg>
  ),
  Close: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  ),
  Plus: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="12" y1="5" x2="12" y2="19" />
      <line x1="5" y1="12" x2="19" y2="12" />
    </svg>
  )
};

// ============ NAV ============
const Nav = ({ onJoin }) => (
  <header className="nav">
    <div className="container nav-inner">
      <a href="/" className="brand" aria-label="Steadycanopy">
        <span className="brand-mark">S</span>
        <span>Steadycanopy</span>
      </a>
      <nav className="nav-links" aria-label="Primary">
        <a href="/">Weather</a>
        <a href="Fuel.html" className="active">Fuel</a>
        <a href="#how">How it works</a>
        <a href="#faq">FAQ</a>
      </nav>
      <button className="btn btn-primary btn-sm" onClick={onJoin}>
        Join waitlist
      </button>
    </div>
  </header>
);

// ============ HERO ============
const Hero = ({ onJoin }) => (
  <section className="hero">
    <div className="container" style={{ position: 'relative', zIndex: 1 }}>
      <div className="hero-grid">
        <div>
          <span className="eyebrow">Gas hedging · new</span>
          <h1 className="display xl" style={{ marginTop: 22 }}>
            Lock in a payout for the month gas&nbsp;spikes.
          </h1>
          <p className="lede">
            A spike at the pump shouldn't gut a quarter. Pick a gas-price threshold,
            set a budget, and get paid the moment EIA's weekly retail average crosses it.
            Built for rideshare drivers and small freight operators who can't pass costs through fast enough.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={onJoin}>
              Reserve a fuel hedge
              <Icon.Arrow style={{ width: 16, height: 16 }} />
            </button>
            <a href="#examples" className="btn btn-secondary">See two examples</a>
          </div>
          <div className="hero-meta">
            <span>Indexed to EIA weekly retail.</span>
            <span aria-hidden="true" style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--mute)' }} />
            <span>No claims. Same-day payout.</span>
          </div>
        </div>

        <div className="hero-art">
          <FuelCard />
        </div>
      </div>
    </div>
  </section>
);

// ============ FUEL CARD (hero right) ============
const FuelCard = () => (
  <div className="fuel-card">
    <div className="fuel-head">
      <div className="fuel-head-main">
        <div className="fuel-kicker">Sample hedge · gas</div>
        <div className="fuel-title">Q4 gas spike protection</div>
        <div className="fuel-sub">Oct – Dec 2026 · US weekly retail avg (EIA)</div>
      </div>
      <span className="badge"><span className="dot" />Live</span>
    </div>

    <div className="chart-wrap">
      <div className="chart-meta">
        <span className="chart-label">US regular gas · 12-mo</span>
        <span className="chart-value mono">$3.42<span style={{ fontSize: 12, color: 'var(--mute)', fontWeight: 600, marginLeft: 4 }}>/gal</span></span>
      </div>
      <GasSpark />
      <div className="chart-legend">
        <span><span className="swatch" />Retail avg</span>
        <span><span className="swatch thr" />Trigger · $4.25</span>
      </div>
    </div>

    <div className="fuel-row" style={{ marginTop: 6 }}>
      <span className="k">Trigger</span>
      <span className="v">Weekly retail ≥ <strong>$4.25</strong>/gal</span>
    </div>
    <div className="fuel-row">
      <span className="k">Window</span>
      <span className="v">Oct 1 – Dec 31, 2026</span>
    </div>
    <div className="fuel-row">
      <span className="k">Cost</span>
      <span className="v">$420</span>
    </div>

    <div className="fuel-payout">
      <div>
        <div className="lbl">If trigger is met, you get</div>
        <div className="num">$3,600</div>
      </div>
      <Icon.Check style={{ width: 28, height: 28, color: 'var(--primary)' }} />
    </div>
  </div>
);

// Inline SVG spark chart of regular gas prices ending below threshold
const GasSpark = () => {
  // 26 weekly samples → flat-ish around $3.10-3.55, gentle uptick toward $3.42
  const points = [3.12, 3.15, 3.18, 3.24, 3.28, 3.31, 3.27, 3.22, 3.26, 3.32, 3.36, 3.42,
                  3.48, 3.44, 3.36, 3.38, 3.41, 3.46, 3.52, 3.49, 3.44, 3.39, 3.36, 3.40, 3.43, 3.42];
  const min = 2.95, max = 4.35;
  const W = 320, H = 92, PAD_L = 4, PAD_R = 4, PAD_T = 8, PAD_B = 14;
  const innerW = W - PAD_L - PAD_R;
  const innerH = H - PAD_T - PAD_B;
  const x = (i) => PAD_L + (i / (points.length - 1)) * innerW;
  const y = (v) => PAD_T + (1 - (v - min) / (max - min)) * innerH;
  const d = points.map((v, i) => (i === 0 ? `M${x(i)},${y(v)}` : `L${x(i)},${y(v)}`)).join(' ');
  const dFill = `${d} L${x(points.length - 1)},${PAD_T + innerH} L${PAD_L},${PAD_T + innerH} Z`;
  const thresholdY = y(4.25);
  const lastV = points[points.length - 1];
  return (
    <svg className="chart-svg" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <linearGradient id="dgrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#0e0f0c" stopOpacity="0.18" />
          <stop offset="100%" stopColor="#0e0f0c" stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* threshold dashed line */}
      <line x1={PAD_L} y1={thresholdY} x2={W - PAD_R} y2={thresholdY}
        stroke="#d03238" strokeWidth="1.2" strokeDasharray="4 4" />
      <text x={W - PAD_R - 2} y={thresholdY - 4} textAnchor="end"
        fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#d03238" fontWeight="600">$4.25</text>
      {/* area + line */}
      <path d={dFill} fill="url(#dgrad)" />
      <path d={d} fill="none" stroke="#0e0f0c" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" />
      {/* last dot */}
      <circle cx={x(points.length - 1)} cy={y(lastV)} r="3" fill="#9fe870" stroke="#0e0f0c" strokeWidth="1.4" />
    </svg>
  );
};

// ============ PAIN STATS ============
const Pain = () => (
  <section className="section tight">
    <div className="container">
      <div className="grid-2" style={{ marginBottom: 36, alignItems: 'end' }}>
        <div>
          <span className="eyebrow">Why fuel hedging</span>
          <h2 className="display lg" style={{ marginTop: 18 }}>
            The pump moves. Your rates&nbsp;don't.
          </h2>
        </div>
        <p className="lede">
          Rideshare drivers eat fuel directly out of take-home. Small freight has surcharge schedules that
          lag the spot price by weeks. A parametric hedge bridges the gap — no claims, no inspections, no waiting.
        </p>
      </div>

      <div className="pain-row">
        <div className="pain-cell">
          <div className="pain-num">$0.40<span className="unit">/gal swing</span></div>
          <div className="pain-lbl">Typical 90-day move in US retail gas during volatile quarters.</div>
          <div className="pain-src">EIA weekly retail avg</div>
        </div>
        <div className="pain-cell">
          <div className="pain-num">~28<span className="unit">% of OPEX</span></div>
          <div className="pain-lbl">Fuel as a share of operating cost for an owner-operator truck.</div>
          <div className="pain-src">ATRI operational cost report</div>
        </div>
        <div className="pain-cell">
          <div className="pain-num">$160<span className="unit">/mo</span></div>
          <div className="pain-lbl">Extra fuel cost on a 5,000-mile rideshare month when gas jumps $0.80.</div>
          <div className="pain-src">At 25 mpg combined</div>
        </div>
      </div>
    </div>
  </section>
);

// ============ OPERATOR SECTIONS ============
const RideshareOp = ({ onJoin }) => (
  <section className="section band-soft" id="examples">
    <div className="container">
      <div className="op-grid">
        <div>
          <span className="op-pill">
            <span className="ico"><Icon.Steering style={{ width: 14, height: 14 }} /></span>
            For rideshare drivers
          </span>
          <h2 className="display lg" style={{ marginTop: 20 }}>
            Pay&nbsp;a&nbsp;little.<br />
            Get paid the month gas&nbsp;spikes.
          </h2>
          <p className="lede" style={{ marginTop: 18 }}>
            You're already absorbing surge pricing — for gas. Lock in a flat payout for the month
            regular gas crosses $4.25 nationally. Use it for that month's car payment, insurance, or just to break even.
          </p>
          <ul className="op-list">
            <li>Indexed to EIA US weekly retail regular gasoline. No "fuel surcharge" math.</li>
            <li>Pick the months you drive most — summer, holidays, or both.</li>
            <li>Funds in your account the day the threshold is met. No claims.</li>
          </ul>
          <div className="op-callout">
            Typical driver, 5,000 mi/mo:&nbsp;
            <strong>$32</strong> covers&nbsp;
            <strong style={{ color: 'var(--positive-deep)' }}>$250</strong> per spike month.
          </div>
        </div>

        <div className="slip">
          <div className="slip-head">
            <span className="label">Sample · gas hedge</span>
            <span className="id">SC-FU-RS-0142</span>
          </div>
          <div className="slip-body">
            <div className="slip-row">
              <span className="k">Operator</span>
              <span className="v">Solo rideshare driver · Phoenix, AZ</span>
            </div>
            <div className="slip-row">
              <span className="k">Index</span>
              <span className="v">EIA US weekly retail · regular gasoline</span>
            </div>
            <div className="slip-row">
              <span className="k">Trigger</span>
              <span className="v"><strong>≥ $4.25 / gal</strong> for any week in the covered month</span>
            </div>
            <div className="slip-row">
              <span className="k">Window</span>
              <span className="v">Jul 2026 · Aug 2026 · Sep 2026</span>
            </div>
            <div className="slip-row">
              <span className="k">Cost</span>
              <span className="v big">$32<span style={{ fontSize: 13, color: 'var(--mute)', fontWeight: 500, marginLeft: 6 }}>/ month</span></span>
            </div>
            <div className="slip-row">
              <span className="k">Payout</span>
              <span className="v big payout">$250<span style={{ fontSize: 13, color: 'var(--mute)', fontWeight: 500, marginLeft: 6 }}>/ trigger month</span></span>
            </div>
          </div>
          <div className="slip-foot">
            <span>Probability of trigger this summer: <strong>~10%</strong></span>
            <span>Pays within hours</span>
          </div>
        </div>
      </div>

      <div className="center mt-48">
        <button className="btn btn-primary" onClick={onJoin}>
          Reserve a rideshare hedge
          <Icon.Arrow style={{ width: 16, height: 16 }} />
        </button>
      </div>
    </div>
  </section>
);

const FreightOp = ({ onJoin }) => (
  <section className="section">
    <div className="container">
      <div className="op-grid" style={{ direction: 'rtl' }}>
        <div style={{ direction: 'ltr' }}>
          <span className="op-pill">
            <span className="ico"><Icon.Truck style={{ width: 14, height: 14 }} /></span>
            For small freight operators
          </span>
          <h2 className="display lg" style={{ marginTop: 20 }}>
            Backstop the month your fuel surcharge can't&nbsp;keep&nbsp;up.
          </h2>
          <p className="lede" style={{ marginTop: 18 }}>
            Surcharges reset on Monday. The pump moves on Wednesday. For a five-truck fleet, a single
            $0.40 spike means roughly $10K of margin gone before the schedule catches up. A monthly hedge fills that gap.
          </p>
          <ul className="op-list">
            <li>Indexed to EIA US weekly retail — the same number your fuel-surcharge formula already references.</li>
            <li>Sized to your fleet — 1 truck to 25. Annual or quarterly windows.</li>
            <li>One agreement, one payout. No adjuster visiting the yard.</li>
          </ul>
          <div className="op-callout">
            5-truck owner-operator:&nbsp;
            <strong>$1,400</strong> covers&nbsp;
            <strong style={{ color: 'var(--positive-deep)' }}>$12,000</strong> per spike quarter.
          </div>
        </div>

        <div className="slip" style={{ direction: 'ltr' }}>
          <div className="slip-head">
            <span className="label">Sample · gas hedge</span>
            <span className="id">SC-FU-FR-0087</span>
          </div>
          <div className="slip-body">
            <div className="slip-row">
              <span className="k">Operator</span>
              <span className="v">Small freight carrier · 5 power units · Memphis, TN</span>
            </div>
            <div className="slip-row">
              <span className="k">Index</span>
              <span className="v">EIA US weekly retail · regular gasoline</span>
            </div>
            <div className="slip-row">
              <span className="k">Trigger</span>
              <span className="v"><strong>≥ $4.25 / gal</strong> on any weekly print in the window</span>
            </div>
            <div className="slip-row">
              <span className="k">Window</span>
              <span className="v">Oct 1 – Dec 31, 2026 (Q4)</span>
            </div>
            <div className="slip-row">
              <span className="k">Cost</span>
              <span className="v big">$1,400<span style={{ fontSize: 13, color: 'var(--mute)', fontWeight: 500, marginLeft: 6 }}>/ quarter</span></span>
            </div>
            <div className="slip-row">
              <span className="k">Payout</span>
              <span className="v big payout">$12,000<span style={{ fontSize: 13, color: 'var(--mute)', fontWeight: 500, marginLeft: 6 }}>/ trigger quarter</span></span>
            </div>
          </div>
          <div className="slip-foot">
            <span>Sized at ~$2,400 per truck of cover</span>
            <span>Same-day ACH</span>
          </div>
        </div>
      </div>

      <div className="center mt-48">
        <button className="btn btn-primary" onClick={onJoin}>
          Reserve a fleet hedge
          <Icon.Arrow style={{ width: 16, height: 16 }} />
        </button>
      </div>
    </div>
  </section>
);

// ============ HOW IT WORKS (compact strip) ============
const How = () => (
  <section className="section band-ink" id="how">
    <div className="container">
      <div className="center max-680" style={{ margin: '0 auto 56px' }}>
        <span className="eyebrow">How it works</span>
        <h2 className="display lg" style={{ marginTop: 18 }}>
          One index. One trigger. Same-day&nbsp;payout.
        </h2>
      </div>
      <div className="how-strip">
        <div className="how-step">
          <span className="n">1</span>
          <div>
            <h4>Pick a price threshold.</h4>
            <p>Regular gas, US average or your state. Pick the trigger that hurts most — usually $0.50–$1.00 over today's print.</p>
          </div>
        </div>
        <div className="how-step">
          <span className="n">2</span>
          <div>
            <h4>We watch EIA's weekly retail.</h4>
            <p>The Energy Information Administration posts retail averages every Monday afternoon. We watch the print — you don't have to.</p>
          </div>
        </div>
        <div className="how-step">
          <span className="n">3</span>
          <div>
            <h4>Same-day ACH if it trips.</h4>
            <p>Threshold met, payout sent within hours of the official print. No claim form, no adjuster, no negotiation.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ============ FAQ ============
const FAQ = () => {
  const items = [
    {
      q: "Why fuel specifically?",
      a: "Fuel is the most-tracked, most-transparent input cost for two of the hardest-hit operator categories in the country. EIA publishes a weekly retail average that's used by every state DOT and most fuel-surcharge formulas — which means we can write protection against the exact number you're already exposed to, with zero ambiguity about whether the trigger was met."
    },
    {
      q: "Is this a futures contract or hedge fund product?",
      a: "No. It's a parametric protection product — a clear agreement that pays a fixed amount if the EIA print crosses a threshold. There's no margin account, no commodities license needed, no settlement risk on your end. You pay once. If the trigger hits, you get paid."
    },
    {
      q: "How is the cost calculated?",
      a: "Three inputs: the size of the payout you want, the threshold you pick, and the length of the window. Tighter triggers and longer windows cost more. You always see the cost and the payout side-by-side before you commit — typical hedges run 8–12% of the protected amount."
    },
    {
      q: "Can I cover a year, or only a month?",
      a: "Both. Rideshare drivers usually pick the 3–4 months they drive most. Freight operators usually pick the quarter their margin is tightest, or a rolling annual contract that auto-renews."
    }
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section band-soft" id="faq">
      <div className="container">
        <div className="grid-2" style={{ alignItems: 'start', marginBottom: 48 }}>
          <div>
            <span className="eyebrow">Fuel — questions</span>
            <h2 className="display xl" style={{ marginTop: 18 }}>
              Quick answers.
            </h2>
          </div>
          <p className="lede">Anything specific to your operation? Drop it in the notes when you join the waitlist and we'll write back within a business day.</p>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item${open === i ? ' open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{it.q}</span>
                <span className="faq-toggle" aria-hidden="true"><Icon.Plus style={{ width: 14, height: 14 }} /></span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 320 : 0 }}>
                {it.a}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============ FINAL CTA ============
const FinalCTA = ({ onJoin }) => (
  <section className="section band-ink">
    <div className="container center" style={{ position: 'relative', zIndex: 1 }}>
      <span className="eyebrow">Get on the list</span>
      <h2 className="display xl" style={{ marginTop: 18, color: 'var(--primary)' }}>
        Hedge the pump.
      </h2>
      <p className="lede" style={{ margin: '24px auto 0', color: '#b7b9b5' }}>
        We're opening gas hedges to a small group of rideshare drivers and small freight operators this fall.
        Tell us about your route or fleet — we'll size a hedge for you when we open.
      </p>
      <div style={{ marginTop: 36, display: 'inline-flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
        <button className="btn btn-primary" onClick={onJoin}>
          Reserve early access
          <Icon.Arrow style={{ width: 16, height: 16 }} />
        </button>
        <a href="/" className="btn btn-secondary">
          <Icon.ArrowLeft style={{ width: 16, height: 16 }} />
          Back to weather
        </a>
      </div>
    </div>
  </section>
);

// ============ FOOTER ============
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-simple">
        <a href="/" className="brand" style={{ color: 'var(--canvas)' }}>
          <span className="brand-mark">S</span>
          <span style={{ color: 'var(--canvas)' }}>Steadycanopy</span>
        </a>
        <p className="footer-tag">
          Parametric protection against gas-price spikes for rideshare drivers and small freight operators.
        </p>
        <div className="footer-contact">
          <a href="mailto:hello@steadycanopy.com" className="footer-url">hello@steadycanopy.com</a>
          <a href="/" className="footer-url muted-url">steadycanopy.com</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Steadycanopy, Inc.</span>
        <span>Parametric protection product. Not insurance. Not a futures contract.</span>
      </div>
    </div>
  </footer>
);

// ============ MODAL ============
const WaitlistModal = ({ open, onClose }) => {
  const [form, setForm] = useState({ name: '', operation: 'rideshare', business: '', email: '', notes: '' });
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');
  const firstFieldRef = useRef(null);

  useEffect(() => {
    if (open) {
      setError('');
      setSubmitted(false);
      setSubmitting(false);
      setTimeout(() => firstFieldRef.current && firstFieldRef.current.focus(), 60);
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') { e.preventDefault(); onClose(); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  const onChange = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = useCallback(async (e) => {
    if (e && e.preventDefault) e.preventDefault();
    setError('');
    if (!form.name.trim()) { setError('Please tell us your name.'); return; }
    if (!form.email || !/^\S+@\S+\.\S+$/.test(form.email)) { setError('Please enter a valid email address.'); return; }
    setSubmitting(true);
    try {
      await window.SteadyWaitlist.submitWaitlist({
        source: 'fuel',
        name: form.name.trim(),
        operation: form.operation,
        business: form.business.trim(),
        email: form.email.trim(),
        notes: form.notes.trim(),
      });
      setSubmitted(true);
    } catch (err) {
      setError(window.SteadyWaitlist.SUBMIT_FAILURE_MESSAGE);
    } finally {
      setSubmitting(false);
    }
  }, [form]);

  if (!open) return null;

  return (
    <div
      className="modal-backdrop"
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
      role="dialog" aria-modal="true" aria-labelledby="fuel-waitlist-title">
      <div className="modal" role="document">
        <button className="modal-close" onClick={onClose} aria-label="Close">
          <Icon.Close style={{ width: 16, height: 16 }} />
        </button>

        {!submitted ? (
          <>
            <span className="eyebrow">Waitlist</span>
            <h3 id="fuel-waitlist-title" style={{ marginTop: 12 }}>Reserve a gas hedge.</h3>
            <p className="body-md" style={{ marginTop: 8 }}>
              Tell us what you drive. We'll size a hedge for your route or fleet when we open this fall.
            </p>
            <form className="form-fields" onSubmit={submit} noValidate>
              <div className="field">
                <label htmlFor="ff-name">Your name <span className="req" aria-hidden="true">*</span></label>
                <input ref={firstFieldRef} id="ff-name" type="text" autoComplete="name" required
                  value={form.name} onChange={onChange('name')} placeholder="Devon Mercer" />
              </div>
              <div className="field">
                <label htmlFor="ff-op">What you operate</label>
                <select id="ff-op" value={form.operation} onChange={onChange('operation')}>
                  <option value="rideshare">Rideshare driver (Uber / Lyft / DoorDash)</option>
                  <option value="freight-solo">Owner-operator · 1 truck</option>
                  <option value="freight-small">Small fleet · 2–10 trucks</option>
                  <option value="freight-mid">Mid fleet · 10–25 trucks</option>
                  <option value="other">Other</option>
                </select>
              </div>
              <div className="field">
                <label htmlFor="ff-business">Business / DBA <span style={{ color: 'var(--mute)', fontWeight: 400 }}>(optional)</span></label>
                <input id="ff-business" type="text" autoComplete="organization"
                  value={form.business} onChange={onChange('business')} placeholder="Mercer Logistics LLC" />
              </div>
              <div className="field">
                <label htmlFor="ff-email">Email <span className="req" aria-hidden="true">*</span></label>
                <input id="ff-email" type="email" autoComplete="email" inputMode="email" required
                  value={form.email} onChange={onChange('email')} placeholder="devon@mercerlogistics.com" />
              </div>
              <div className="field">
                <label htmlFor="ff-notes">Notes <span style={{ color: 'var(--mute)', fontWeight: 400 }}>(optional)</span></label>
                <textarea id="ff-notes" value={form.notes} onChange={onChange('notes')}
                  placeholder="e.g. We run 5 long-haul reefers, mostly TX–CA. Gas cost is our #1 risk." />
              </div>
              {error && (
                <div role="alert" style={{ color: 'var(--negative)', fontSize: 13, fontWeight: 600 }}>
                  {window.SteadyWaitlist.renderErrorWithEmail(error)}
                </div>
              )}
              <div className="form-actions">
                <button type="submit" className="btn btn-primary" disabled={submitting}>
                  {submitting ? 'Submitting…' : 'Join the waitlist'}
                </button>
                <span className="hint">Press <kbd style={kbd}>Enter</kbd> to submit · <kbd style={kbd}>Esc</kbd> to close</span>
              </div>
            </form>
          </>
        ) : (
          <div className="success-state">
            <div className="success-check"><Icon.Check style={{ width: 30, height: 30, color: 'var(--ink)' }} /></div>
            <h3>You're on the list.</h3>
            <p className="body-md" style={{ marginTop: 10, maxWidth: 380, marginInline: 'auto' }}>
              Thanks, {form.name.split(' ')[0] || 'friend'}. We'll be in touch when we open — usually within a couple of weeks.
            </p>
            <button className="btn btn-secondary mt-24" onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
};

const kbd = {
  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
  background: 'var(--canvas-soft)',
  border: '1px solid rgba(14,15,12,0.12)',
  borderRadius: 6, padding: '1px 6px', fontSize: 11, color: 'var(--ink)'
};

// ============ TOP BANNER ============
const Banner = ({ onJoin }) => (
  <div className="banner-top">
    <span className="pill">New</span>
    <span>Steadycanopy is opening gas hedges to drivers & small freight this fall.</span>
    <button onClick={onJoin} style={{ background: 'none', border: 0, color: 'var(--primary)', fontWeight: 700, cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3 }}>
      Reserve your spot →
    </button>
  </div>
);

// ============ APP ============
const App = () => {
  const [modalOpen, setModalOpen] = useState(false);
  const openModal = useCallback(() => setModalOpen(true), []);
  const closeModal = useCallback(() => setModalOpen(false), []);

  return (
    <>
      <Banner onJoin={openModal} />
      <Nav onJoin={openModal} />
      <main>
        <Hero onJoin={openModal} />
        <Pain />
        <RideshareOp onJoin={openModal} />
        <FreightOp onJoin={openModal} />
        <How />
        <FAQ />
        <FinalCTA onJoin={openModal} />
      </main>
      <Footer />
      <WaitlistModal open={modalOpen} onClose={closeModal} />
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
