// Top sections: Nav, Hero, Problem
function Nav() {
  const [open, setOpen] = React.useState(false);
  return (
    <nav className="nav" role="navigation" aria-label="Main">
      <div className="container nav-inner">
        <a href="#top" style={{display:'flex', alignItems:'center', gap:10, textDecoration:'none'}}>
          <LogoMark size={22} />
          <span className="logo-wordmark">Reexo</span>
        </a>
        <div className="nav-links">
          <a href="#product">Product</a>
          <a href="#how">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="#about">About</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-right">
          <span className="nav-signin" title="Beta — invite only" style={{color:'var(--muted)', fontSize:14, cursor:'not-allowed'}}>Sign in</span>
          <a href="#waitlist" className="btn btn-primary btn-sm">Join the waitlist</a>
          <button aria-label="Menu" onClick={()=>setOpen(o=>!o)} style={{display:'none', background:'transparent', border:0, padding:6}} className="nav-menu-btn">
            <IconMenu/>
          </button>
        </div>
      </div>
      {open && (
        <div style={{position:'fixed', inset:'64px 0 0 0', background:'#fff', padding:'24px', zIndex:40}}>
          <div style={{display:'grid', gap:20, fontSize:22, fontFamily:'Inter Tight'}}>
            <a onClick={()=>setOpen(false)} href="#product">Product</a>
            <a onClick={()=>setOpen(false)} href="#how">How it works</a>
            <a onClick={()=>setOpen(false)} href="#pricing">Pricing</a>
            <a onClick={()=>setOpen(false)} href="#about">About</a>
            <a onClick={()=>setOpen(false)} href="#faq">FAQ</a>
          </div>
        </div>
      )}
      <style>{`
        @media (max-width: 900px){
          .nav-menu-btn{ display:inline-flex !important; }
        }
      `}</style>
    </nav>
  );
}

function Hero() {
  return (
    <section id="top" style={{paddingTop: 112, paddingBottom: 112}}>
      <div className="container" style={{maxWidth: 980, textAlign:'center'}}>
        <div className="eyebrow fade-up">REEXO — FOR EU ROAD-FREIGHT CARRIERS</div>
        <h1 className="display fade-up d2">
          Stop driving empty.<br/>
          Start <span className="accent">earning</span> more.
        </h1>
        <p className="fade-up d3" style={{color:'var(--muted)', fontSize:21, lineHeight:1.5, maxWidth: 760, margin:'28px auto 0', letterSpacing:'-0.005em'}}>
          Reexo reads your freight orders from Telegram, WhatsApp and email, and builds complete round-trip routes, 2 to 10 legs, that always bring you back where you started. Ranked by real net profit, after fuel, tolls, ferries, rest stops and taxes. Built for carriers with 1–50 trucks.
        </p>
        <div className="fade-up d4" style={{display:'flex', gap:12, justifyContent:'center', marginTop: 36, flexWrap:'wrap'}}>
          <a href="#waitlist" className="btn btn-primary">Join the waitlist</a>
          <a href="#how" className="btn btn-ghost">See how it works</a>
        </div>
        <p className="fade-up d4 mono-foot" style={{marginTop: 28}}>
          Built by a team that has delivered 570,000+ trips and served 100,000+ users since 2009.
        </p>

        <div className="hero-visual">
          <RouteDiagram />
        </div>
      </div>
    </section>
  );
}

function Problem() {
  const stats = [
    { n: "21%", unit: "of vehicle-kilometres", line:"in the EU are driven with no cargo.", extra:"In Spain, it's 24%.", src:"Eurostat, 2023" },
    { n: "€15,000 – 25,000", unit: "lost per truck per year", line:"to empty runs.", src:"European Commission, EU Transport in Figures 2023" },
    { n: "€50 – 70 bn", unit: "wasted every year", line:"across the continent.", src:"IRU, European Commission" },
  ];
  return (
    <section className="sand">
      <div className="container">
        <div className="eyebrow">THE NUMBER ONE COST NOBODY TALKS ABOUT</div>
        <h2 className="section-head">One in four trucks in Europe drives empty.</h2>

        <div className="stat-grid">
          {stats.map((s, i) => (
            <div key={i} className="card" style={{padding: 40}}>
              <div className="font-display tabular" style={{fontSize: 44, letterSpacing:'-0.03em', lineHeight: 1}}>{s.n}</div>
              <div style={{marginTop: 14, fontSize:15, color:'var(--text)'}}>{s.unit}</div>
              <div style={{fontSize:15, color:'var(--muted)'}}>{s.line}</div>
              {s.extra && <div style={{fontSize:15, color:'var(--text)', marginTop: 4}}>{s.extra}</div>}
              <div className="mono-foot" style={{marginTop: 22}}>{s.src}</div>
            </div>
          ))}
        </div>

        <p className="muted" style={{marginTop: 48, maxWidth:'60ch'}}>
          Big carriers solve this with in-house IT and direct contracts with shippers. The 600,000 small carriers in the EU can't. They work off phone calls, Telegram groups and exchange boards. None of those was built to optimize carrier profit. That's the one we built.
        </p>
      </div>
      <style>{`
        .stat-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px; }
        @media (max-width: 900px){ .stat-grid{ grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    {
      num: "01",
      title: "Connect your channels.",
      body: "Point your Telegram, WhatsApp and email at Reexo. Our NLP parser reads every new order, pulls out origin, destination, weight, vehicle type, dates and rate, and asks for anything missing. No copy-paste.",
    },
    {
      num: "02",
      title: "Tell us where you want to end up.",
      body: "\"I'm in Valencia, I want to be back by Friday.\" That's the whole input. Or: \"I want to come back through Madrid.\"",
    },
    {
      num: "03",
      title: "Drive the route that pays the most.",
      body: "You get the top three closed-loop routes, 2 to 10 legs, ranked by real net profit after fuel, tolls, ferries, rest stops and taxes. Cabotage-safe, 561/2006-compliant, ready to book.",
    },
  ];
  return (
    <section id="how">
      <div className="container">
        <div className="eyebrow">HOW REEXO WORKS</div>
        <h2 className="section-head">Three steps. The rest we handle.</h2>

        <div className="how-grid">
          {steps.map((s,i)=>(
            <div key={i} className="how-col">
              <span className="step-num">{s.num}</span>
              <h3>{s.title}</h3>
              <p className="muted" style={{fontSize:16}}>{s.body}</p>
            </div>
          ))}
        </div>

        <hr className="hair" style={{margin:'64px 0 24px'}}/>
        <div className="mono-foot">No dashboards. No forms. If you can read a WhatsApp message, you already know how to use it.</div>
      </div>
      <style>{`
        .how-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 48px; }
        @media (max-width: 900px){ .how-grid{ grid-template-columns: 1fr; gap: 40px; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Problem, HowItWorks });