// Middle sections: Modules, Who it's for, Comparison, ROI
function Modules() {
  const mods = [
    {
      icon: <IconCircular/>,
      name: "Circular Route Optimizer",
      body: "Assembles 2–10 sequential loads into a closed loop that returns the truck to base. Scores every loop by net profit after fuel, tolls, ferry costs, mandatory rest under EU Reg. 561/2006, depreciation and taxes. Ranks the top three.",
      foot: "— Working prototype: lab.reexo.ai/circular_service",
    },
    {
      icon: <IconChat/>,
      name: "NLP Cargo Parser",
      body: "Reads freight orders directly from Telegram, WhatsApp and email in multiple languages. Extracts structured data, auto-requests missing fields, feeds the router. Trained on 95,000+ real orders.",
      foot: "— Cuts manual order entry by ~50%. Saves ~17 hours / dispatcher / month.",
    },
    {
      icon: <IconShield/>,
      name: "EU Compliance Engine",
      body: "Rest-stop planning under Regulation 561/2006. Cabotage tracking under the Mobility Package, with cool-off alerts per vehicle. CO₂ per shipment using GLEC Framework and ISO 14083.",
      foot: "— Every route Reexo proposes is legally executable.",
    },
    {
      icon: <IconChart/>,
      name: "Market Intelligence",
      body: "Demand heatmaps for the next 6–24 hours. Lane-level pricing intelligence. Terminal ratings. Predictive ETAs factoring traffic, weather and border delays.",
      foot: "— Built on Google Maps, HERE and 15 years of operational freight data.",
    },
    {
      icon: <IconPlug/>,
      name: "Exchange API Integrations",
      body: "Plug Reexo into TIMOCOM, Trans.eu, Teleroute and Wtransnet. Pull orders across them in one place. Trans.eu and Teleroute have expressed preliminary interest in integrating.",
      foot: "— Activates after the Spanish S.L. is registered, Q2–Q3 2026.",
    },
  ];
  return (
    <section id="product" className="sand">
      <div className="container">
        <div className="eyebrow">THE PRODUCT</div>
        <h2 className="section-head">Five modules. One app. One bill.</h2>
        <p className="muted" style={{maxWidth:'60ch', marginBottom: 48}}>
          Each one replaces something carriers currently pay for separately, or do by hand. A dispatcher, a route planner, a compliance check, a market read.
        </p>

        <div className="mod-grid">
          {mods.map((m,i)=>(
            <div key={i} className="card mod-card">
              <div style={{color:'var(--text)'}}>{m.icon}</div>
              <h3 style={{marginTop: 18}}>{m.name}</h3>
              <p className="muted" style={{fontSize:15, lineHeight:1.55}}>{m.body}</p>
              <div className="mono-foot" style={{marginTop: 18}}>{m.foot}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .mod-grid{
          display:grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 16px;
        }
        .mod-card{ grid-column: span 2; padding: 32px; display:flex; flex-direction:column; }
        /* Second row: 2 cards centered */
        .mod-card:nth-child(4){ grid-column: 2 / span 2; }
        .mod-card:nth-child(5){ grid-column: 4 / span 2; }
        @media (max-width: 1000px){
          .mod-grid{ grid-template-columns: 1fr 1fr; }
          .mod-card, .mod-card:nth-child(4), .mod-card:nth-child(5){ grid-column: auto; }
        }
        @media (max-width: 640px){
          .mod-grid{ grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

function WhoItsFor() {
  const personas = [
    { title: "Owner-operator — 1 truck.", body: "You drive it, you dispatch it, you book it. You lose 2–3 hours a day searching for loads. Reexo gives you those hours back and plans the way home." },
    { title: "Small fleet — 2–15 trucks.", body: "Your spouse or a part-time dispatcher juggles WhatsApp, email and exchanges for 10–30 orders a day. Reexo replaces most of that workload and spreads profit evenly across drivers." },
    { title: "Mid-sized fleet — 15–50 trucks.", body: "You need fleet dashboards, compliance, and a single view of routes across the team. Without paying enterprise TMS prices." },
  ];
  return (
    <section>
      <div className="container">
        <div className="eyebrow">WHO IT'S FOR</div>
        <h2 className="section-head">If you're the one negotiating the rate, Reexo is for you.</h2>

        <div className="persona-grid">
          {personas.map((p,i)=>(
            <div key={i} className="persona-col">
              <h3 style={{fontSize:20}}>{p.title}</h3>
              <p className="muted" style={{fontSize:16}}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .persona-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; border-top: 1px solid var(--hair); }
        .persona-col{ padding: 40px 32px 8px 0; border-right: 1px solid var(--hair); }
        .persona-col:last-child{ border-right: 0; padding-right: 0; }
        .persona-col:not(:first-child){ padding-left: 32px; }
        @media (max-width: 900px){
          .persona-grid{ grid-template-columns: 1fr; }
          .persona-col{ border-right:0; border-bottom: 1px solid var(--hair); padding: 32px 0; }
          .persona-col:not(:first-child){ padding-left: 0; }
          .persona-col:last-child{ border-bottom: 0; }
        }
      `}</style>
    </section>
  );
}

function Comparison() {
  const competitors = ["TIMOCOM", "Trans.eu", "Wtransnet", "Teleroute"];
  const rows = [
    {
      feature: "Round-trip optimization",
      cells: [
        "Single-leg match + return-load search",
        "Single-leg match (SmartMatch)",
        "Single-leg match + return-load search",
        "Single-leg AI recommendations",
      ],
      reexo: "2–10 leg closed loops, ranked by net profit",
    },
    {
      feature: "Automatic order intake from informal channels",
      cells: [
        "Email & PDF parsing in-platform (TIMOCOM AI, 2025)",
        "—",
        "—",
        "—",
      ],
      reexo: "Telegram, WhatsApp and email — NLP in multiple languages",
    },
    {
      feature: "EU compliance inside route planning (561/2006, cabotage, CO₂)",
      cells: [
        "Partial — separate cost calculator",
        "Partial — eco filters on route map",
        "—",
        "Partial — CO₂ partnership initiatives",
      ],
      reexo: "All three, built into every proposed route",
    },
    {
      feature: "Who the product is designed around",
      cells: [
        "Shipper-side marketplace liquidity",
        "Shipper-side marketplace liquidity",
        "Shipper-side marketplace liquidity",
        "Shipper-side marketplace liquidity",
      ],
      reexo: "The carrier's net profit per route",
    },
    {
      feature: "Contract model",
      cells: [
        "Monthly subscription available",
        "Monthly subscription available",
        "Annual-oriented",
        "Annual-oriented",
      ],
      reexo: "Monthly subscription, cancel any time",
    },
  ];

  return (
    <section className="sand">
      <div className="container">
        <div className="eyebrow">HOW WE COMPARE</div>
        <h2 className="section-head">The incumbents work for the shipper. We work for you.</h2>
        <p className="muted" style={{maxWidth:"72ch", marginTop: 0, marginBottom: 48, fontSize:17}}>
          Every major EU freight exchange has pieces of this. None has all of it, and none was designed around the carrier's net profit. Here is where Reexo is different, category by category. The claims about each incumbent are the ones they make themselves.
        </p>

        {/* Desktop table */}
        <div className="cmp-table-wrap">
          <table className="cmp-table">
            <colgroup>
              <col style={{width:"28%"}}/>
              <col style={{width:"14%"}}/>
              <col style={{width:"14%"}}/>
              <col style={{width:"14%"}}/>
              <col style={{width:"14%"}}/>
              <col style={{width:"16%"}}/>
            </colgroup>
            <thead>
              <tr>
                <th scope="col" className="cmp-th cmp-th-feature">Feature</th>
                {competitors.map((c,i)=>(<th key={i} scope="col" className="cmp-th">{c}</th>))}
                <th scope="col" className="cmp-th cmp-th-reexo">Reexo</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r,i)=>(
                <tr key={i}>
                  <th scope="row" className="cmp-feat">{r.feature}</th>
                  {r.cells.map((c,j)=>(
                    <td key={j} className={"cmp-cell" + (c === "—" ? " cmp-cell-empty" : "")}>{c}</td>
                  ))}
                  <td className="cmp-cell cmp-cell-reexo">{r.reexo}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Mobile stacked */}
        <div className="cmp-stack">
          {rows.map((r,i)=>(
            <div key={i} className="cmp-stack-row">
              <div className="cmp-stack-feature">{r.feature}</div>
              <ul className="cmp-stack-list">
                {competitors.map((c,j)=>(
                  <li key={j} className="cmp-stack-item">
                    <span className="cmp-stack-brand">{c}</span>
                    <span className={"cmp-stack-val" + (r.cells[j] === "—" ? " cmp-stack-empty" : "")}>{r.cells[j]}</span>
                  </li>
                ))}
                <li className="cmp-stack-item cmp-stack-item-reexo">
                  <span className="cmp-stack-brand">Reexo</span>
                  <span className="cmp-stack-val">{r.reexo}</span>
                </li>
              </ul>
            </div>
          ))}
        </div>

        <div className="mono-foot" style={{marginTop: 16}}>
          Sources: TIMOCOM newsroom 2025, Trans.eu / SmartMatch docs 2025, Teleroute / Alpega 2022–2025, Wtransnet 2025. Accurate as of Q2 2026 — incumbents evolve; we keep this table current.
        </div>
      </div>

      <style>{`
        .cmp-table-wrap{
          background: #fff;
          border: 1px solid var(--hair);
          border-radius: 12px;
          overflow: hidden;
        }
        .cmp-table{
          width: 100%;
          border-collapse: collapse;
          font-variant-numeric: tabular-nums;
          table-layout: fixed;
        }
        .cmp-th{
          background: #F2EEE6;
          height: 56px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 12px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: #0A0A0A;
          font-weight: 500;
          text-align: center;
          padding: 0 14px;
          vertical-align: middle;
          border-bottom: 1px solid var(--hair);
        }
        .cmp-th-feature{
          text-align: left;
          padding-left: 24px;
        }
        .cmp-th-reexo{
          border-left: 2px solid var(--accent);
          font-weight: 600;
        }
        .cmp-feat{
          text-align: left;
          font-weight: 500;
          font-size: 15px;
          color: #0A0A0A;
          padding: 24px 18px 24px 24px;
          vertical-align: top;
          border-bottom: 1px solid var(--hair);
          background: #fff;
          overflow-wrap: anywhere;
        }
        .cmp-cell{
          padding: 24px 16px;
          vertical-align: top;
          font-size: 15px;
          color: #5A5A5A;
          border-bottom: 1px solid var(--hair);
          line-height: 1.5;
          text-align: left;
          overflow-wrap: anywhere;
          word-break: normal;
          hyphens: auto;
        }
        .cmp-cell-empty{
          color: #9B9687;
          text-align: center;
        }
        .cmp-cell-reexo{
          border-left: 2px solid var(--accent);
          color: #0A0A0A;
          font-weight: 600;
          padding-right: 24px;
        }
        .cmp-table tbody tr:last-child .cmp-cell,
        .cmp-table tbody tr:last-child .cmp-feat{
          border-bottom: 0;
        }

        /* Mobile stacked */
        .cmp-stack{ display: none; }
        @media (max-width: 900px){
          .cmp-table-wrap{ display: none; }
          .cmp-stack{ display: block; background: #fff; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
          .cmp-stack-row{ padding: 20px 20px 16px; border-bottom: 1px solid var(--hair); }
          .cmp-stack-row:last-child{ border-bottom: 0; }
          .cmp-stack-feature{
            font-family: 'Inter Tight', sans-serif;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: -0.01em;
            color: #0A0A0A;
            margin-bottom: 12px;
            text-transform: uppercase;
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: 0.04em;
            font-size: 12px;
          }
          .cmp-stack-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
          .cmp-stack-item{
            display: grid;
            grid-template-columns: 92px 1fr;
            gap: 12px;
            align-items: baseline;
            padding: 8px 10px;
            border-radius: 6px;
            background: #FAFAF7;
          }
          .cmp-stack-brand{
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: #5A5A5A;
            letter-spacing: 0.04em;
          }
          .cmp-stack-val{
            font-size: 14px;
            color: #0A0A0A;
            line-height: 1.45;
          }
          .cmp-stack-empty{ color: #9B9687; }
          .cmp-stack-item-reexo{
            border-left: 2px solid var(--accent);
            background: #fff;
            border-radius: 0 6px 6px 0;
            padding-left: 10px;
          }
          .cmp-stack-item-reexo .cmp-stack-brand{ color: #0A0A0A; font-weight: 600; }
          .cmp-stack-item-reexo .cmp-stack-val{ font-weight: 600; }
        }
      `}</style>
    </section>
  );
}

function ROI() {
  return (
    <section>
      <div className="container">
        <div className="eyebrow">THE MATH</div>
        <h2 className="section-head" style={{maxWidth:'26ch'}}>One empty trip avoided a month, and Reexo has paid for itself three times over.</h2>

        <div className="roi-grid">
          <div>
            <p style={{fontSize:17, maxWidth:'52ch'}}>
              A single truck running 100,000 km a year at the Spanish average 24% empty rate wastes €28,000–36,000. Even a 5-point reduction in empty running, a conservative target grounded in 15 years of operational data on our existing platforms, puts <span style={{color:'var(--text)'}}>€6,000–7,500 per truck</span> back in the owner's pocket. Every year. A 10-point reduction doubles that.
            </p>
            <p className="muted" style={{maxWidth:'52ch'}}>
              Add saved dispatch time and fewer late-paying shippers, and most owner-operators clear a 14–22× return on a €30 subscription.
            </p>
          </div>

          <div className="card card-on-white" style={{padding: 32}}>
            <div className="roi-line"><span>Subscription</span><span className="tabular">€30–50 / month</span></div>
            <div className="roi-sub muted">€360–600 / year</div>

            <div className="roi-line" style={{marginTop:20}}><span>Empty-run savings</span><span className="tabular">€6,000–7,500 / yr</span></div>
            <div className="roi-line" style={{marginTop:12}}><span>Dispatch time</span><span className="tabular">€1,200–1,500 / yr</span></div>
            <div className="roi-line" style={{marginTop:12}}><span>Factoring savings</span><span className="tabular">€2,000–4,000 / yr</span></div>

            <hr className="hair" style={{margin:'24px 0'}}/>

            <div className="roi-line"><span style={{fontWeight:600}}>Return on spend</span><span className="tabular" style={{fontWeight:600, fontSize:18}}>14× – 22×</span></div>
            <div className="roi-line" style={{marginTop:10}}><span style={{fontWeight:600}}>Payback period</span><span className="tabular" style={{fontWeight:600, fontSize:18}}>1–2 months</span></div>
          </div>
        </div>
      </div>
      <style>{`
        .roi-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:start; margin-top: 32px; }
        @media (max-width: 900px){ .roi-grid{ grid-template-columns: 1fr; gap: 32px; } }
        .roi-line{ display:flex; justify-content:space-between; font-family:'JetBrains Mono', monospace; font-size:14px; }
        .roi-line span:first-child{ color: var(--text); }
        .roi-sub{ font-family:'JetBrains Mono', monospace; font-size:12px; text-align:right; }
      `}</style>
    </section>
  );
}

Object.assign(window, { Modules, WhoItsFor, Comparison, ROI });
