// Bottom sections: Pricing, Team, FAQ, Final CTA, Footer
function Pricing() {
  const plans = [
    {
      name: "Basic",
      price: "€30",
      unit: "/ month",
      who: "For owner-operators getting started.",
      features: [
        "NLP order collection from Telegram, WhatsApp, email",
        "Basic route matching with return-load suggestions",
        "Referral program",
        "Mobile-first workflow",
        "Community support",
      ],
      cta: "Join the waitlist",
      ctaPrimary: false,
      popular: false,
    },
    {
      name: "Pro",
      price: "€50",
      unit: "/ month",
      who: "For carriers who want full control of profit.",
      features: [
        "Everything in Basic",
        "Circular Route Optimizer (2–10 legs)",
        "Market Intelligence — price index, heatmaps",
        "EU Compliance Engine — 561/2006, cabotage, CO₂",
        "Exchange API integrations",
        "Priority support",
      ],
      cta: "Join the waitlist",
      ctaPrimary: true,
      popular: true,
    },
    {
      name: "Fleet",
      price: "€40",
      unit: "/ vehicle / month",
      who: "For fleets of 5+ trucks.",
      features: [
        "Everything in Pro",
        "Dispatcher dashboard",
        "Fleet-wide analytics and driver scoring",
        "Carbon reporting for shippers",
        "Minimum 5 vehicles",
      ],
      cta: "Talk to us",
      ctaPrimary: false,
      popular: false,
    },
    {
      name: "Pay-per-use",
      price: "2–3%",
      unit: "per trip",
      who: "For carriers who prefer variable cost.",
      features: [
        "Full access to NLP and routing",
        "No monthly fee",
        "Min €3 / max €15 per completed trip",
        "Switch to a subscription any time",
      ],
      cta: "Start here",
      ctaPrimary: false,
      popular: false,
    },
  ];

  return (
    <section id="pricing" className="sand">
      <div className="container">
        <div className="eyebrow">PRICING</div>
        <h2 className="section-head">Priced so you don't have to do the math twice.</h2>
        <p className="muted" style={{marginTop:-12, marginBottom: 48}}>
          No annual contracts. No per-seat fees. Cancel any month.
        </p>

        <div className="price-grid">
          {plans.map((p,i)=>(
            <div key={i} className={"card price-card" + (p.popular ? " price-pop" : "")}>
              {p.popular && <div className="popular-tag">MOST POPULAR</div>}
              <div style={{fontFamily:'Inter Tight', fontWeight:600, fontSize:19, letterSpacing:'-0.015em'}}>{p.name}</div>
              <div className="muted" style={{fontSize:14, marginTop:4, minHeight: 40}}>{p.who}</div>

              <div style={{marginTop: 20, display:'flex', alignItems:'baseline', gap:6}}>
                <span className="tabular font-display" style={{fontSize: 40, letterSpacing:'-0.03em', lineHeight:1}}>{p.price}</span>
                <span className="muted" style={{fontSize:14}}>{p.unit}</span>
              </div>

              <ul style={{listStyle:'none', padding:0, margin:'24px 0', display:'grid', gap:12}}>
                {p.features.map((f,j)=>(
                  <li key={j} style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:14}}>
                    <span style={{color:'var(--text)', flex:'0 0 auto', marginTop:3}}><IconCheck size={16}/></span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>

              <div style={{marginTop:'auto'}}>
                <a href="#waitlist" className={"btn " + (p.ctaPrimary ? "btn-primary" : "btn-ghost")} style={{width:'100%'}}>
                  {p.cta}
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .price-grid{
          display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
        }
        .price-card{
          position: relative;
          padding: 36px 28px;
          background: #fff;
          display:flex; flex-direction:column;
          transition: border-color 180ms ease-out;
        }
        .price-card:hover{ border-color: var(--text); }
        .price-pop{ border-top: 2px solid var(--accent); }
        @media (max-width: 1100px){ .price-grid{ grid-template-columns: 1fr 1fr; } }
        @media (max-width: 600px){ .price-grid{ grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function Team() {
  const founders = [
    { name: "Artem Pogoreliuk", role: "CEO", bio: "22 years in management. Led multi-brand marketing (VW, Jaguar Land Rover, Hyundai) at Yug-Auto Holding. Owns the Spain launch, operations and partnerships." },
    { name: "Yan Nezamutdinov", role: "CFO", bio: "16 years in logistics and agrotech finance. Runs finance, strategy and investor relations. Leads the ENISA process." },
    { name: "Igor Zaitcev", role: "CTO", bio: "20 years in IT, 18 in logistics tech. Owns the platform, R&D and the path to ISO 27001." },
    { name: "Ruslan Nezamutdinov", role: "CVO", bio: "43 years in logistics and international trade. Owns vision, industry relationships, exchange partnerships." },
  ];
  const stats = [
    { n: "570,000+", l: "trips delivered on our existing platforms" },
    { n: "100,000+", l: "active carriers using our tools" },
    { n: "41.4M tons", l: "cargo moved through our systems in 2024" },
    { n: "€930K+", l: "already invested in R&D for the EU product" },
  ];
  return (
    <section id="about">
      <div className="container">
        <div className="eyebrow">THE TEAM</div>
        <h2 className="section-head">We've shipped this before. Three times.</h2>
        <p style={{maxWidth:'62ch'}}>
          Four co-founders. Three have worked together since 2009. Between us, over a century of experience in logistics, IT and business management. We've built a freight dispatching platform with 100,000+ users, a terminal queue system handling 476,000 trips a year across 29 terminals, and a full logistics workflow automation suite — all running in production today.
        </p>

        <div className="stat-row">
          {stats.map((s,i)=>(
            <div key={i} className="stat-cell">
              <div className="font-display tabular" style={{fontSize: 32, letterSpacing:'-0.025em', lineHeight:1}}>{s.n}</div>
              <div className="muted" style={{fontSize:13, marginTop:8, maxWidth:'22ch'}}>{s.l}</div>
            </div>
          ))}
        </div>

        <div className="founder-grid">
          {founders.map((f,i)=>(
            <div key={i} className="card" style={{padding:28}}>
              <div style={{fontFamily:'Inter Tight', fontWeight:600, fontSize:18, letterSpacing:'-0.015em'}}>
                {f.name} <span className="muted" style={{fontWeight:400}}>— {f.role}</span>
              </div>
              <p className="muted" style={{fontSize:14, marginTop: 10, marginBottom: 0, lineHeight:1.55}}>{f.bio}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .stat-row{ display:grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair); border-bottom:1px solid var(--hair); margin: 56px 0; }
        .stat-cell{ padding: 32px 28px 32px 0; border-right: 1px solid var(--hair); }
        .stat-cell:last-child{ border-right: 0; }
        .stat-cell:not(:first-child){ padding-left: 28px; }
        .founder-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        @media (max-width: 900px){
          .stat-row{ grid-template-columns: 1fr 1fr; }
          .stat-cell{ border-right: 0; border-bottom: 1px solid var(--hair); padding: 24px 0; }
          .stat-cell:not(:first-child){ padding-left: 0; }
          .stat-cell:nth-child(odd){ padding-right: 16px; border-right: 1px solid var(--hair); padding-left:0; }
          .stat-cell:nth-child(even){ padding-left: 16px; }
          .founder-grid{ grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 600px){
          .founder-grid{ grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: "When can I actually use Reexo?", a: "Closed beta for 10–20 hand-picked carriers in Spain starts Q4 2026. Public beta opens Q1–Q2 2027. Join the waitlist to get an invite when your region comes online. Honestly — if Spanish S.L. registration drags, Q4 could slip into Q1. We'll tell you when we know." },
    { q: "Do I need to give up TIMOCOM or Trans.eu?", a: "No. Reexo integrates with them. You'll keep the orders you already have and get better routes around them." },
    { q: "What languages do you support?", a: "English at launch. Spanish and Catalan in Q3 2026. Portuguese, French, German and Polish rolling out through 2027–2029." },
    { q: "Is my data safe?", a: "Yes. GDPR-aligned, LOPDGDD-compliant, ISO 27001 preparation in progress. Data hosted in European data centers. We do not sell your operational data. Anonymized market intelligence is opt-in." },
    { q: "How does billing work?", a: "Monthly subscription in EUR, charged automatically. Cancel any month, no annual contracts. Pay-per-use is charged only when a trip completes." },
    { q: "I run a single truck. Is this really for me?", a: "Especially. 95% of the carriers in Spain run fewer than 5 trucks. The product was designed for you first." },
    { q: "Can I become an investor or partner?", a: "Yes. We're in active discussions with angels, exchange operators and telematics providers. Write to team@reexo.ai." },
  ];
  return (
    <section id="faq" className="sand">
      <div className="container" style={{maxWidth: 900}}>
        <div className="eyebrow">FAQ</div>
        <h2 className="section-head">The questions we get most often.</h2>

        <div style={{marginTop: 24, borderTop:'1px solid var(--hair)'}}>
          {items.map((it,i)=>(
            <details className="faq" key={i}>
              <summary>
                <span>{it.q}</span>
                <span className="toggle"><span className="toggle-plus">+</span><span className="toggle-minus">−</span></span>
              </summary>
              <div className="answer">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const [email, setEmail] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);
  function submit(e){
    e.preventDefault();
    if(!email || !email.includes("@")) return;
    fetch("/api/waitlist", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({email})
    }).catch(()=>{});
    setSubmitted(true);
  }
  return (
    <section id="waitlist" style={{paddingTop:160, paddingBottom:160, textAlign:'center'}}>
      <div className="container">
        <h2 className="font-display" style={{fontSize: 'clamp(36px, 5.5vw, 60px)', letterSpacing:'-0.03em', lineHeight:1.05, margin:0, fontWeight:600}}>
          Stop losing €20,000 per truck, per year.
        </h2>
        <p className="muted" style={{marginTop: 24, fontSize: 19, maxWidth: 620, marginLeft:'auto', marginRight:'auto'}}>
          Join the waitlist. Pilots in Spain begin Q4 2026. Early carriers get a locked-in Basic subscription for their first 12 months.
        </p>

        {!submitted ? (
          <form onSubmit={submit} style={{display:'flex', gap:10, maxWidth: 440, margin:'36px auto 0', flexWrap:'wrap'}}>
            <input
              type="email"
              value={email}
              onChange={e=>setEmail(e.target.value)}
              placeholder="you@yourcompany.com"
              required
              aria-label="Email"
              style={{flex:'1 1 220px'}}
            />
            <button type="submit" className="btn btn-primary" style={{flex:'0 0 auto'}}>Join the waitlist</button>
          </form>
        ) : (
          <div className="card" style={{maxWidth:440, margin:'36px auto 0', padding:'20px 24px', textAlign:'left'}}>
            <div style={{fontFamily:'Inter Tight', fontWeight:600}}>Thanks. You're on the list.</div>
            <div className="muted" style={{fontSize:14, marginTop:4}}>We'll reach out when Spain pilots open.</div>
          </div>
        )}

        <p className="mono-foot" style={{marginTop: 22}}>No spam. Ever. We'll write when there's something real to show.</p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="sand" style={{borderTop:'1px solid var(--hair)', paddingTop: 64, paddingBottom: 48}}>
      <div className="container">
        <div className="foot-grid">
          <div>
            <div style={{display:'flex', alignItems:'center', gap:10}}>
              <LogoMark size={20}/>
              <span className="logo-wordmark">Reexo</span>
            </div>
            <div className="muted" style={{fontSize:14, marginTop:10}}>Freight platform for EU carriers.</div>
          </div>
          <div>
            <div className="foot-h">Product</div>
            <ul className="foot-list">
              <li><a href="#how">How it works</a></li>
              <li><a href="#product">Modules</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="#product">Compliance</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <div className="foot-h">Company</div>
            <ul className="foot-list">
              <li><a href="#about">About</a></li>
              <li><a href="#about">Team</a></li>
              <li><a href="#" style={{color:'var(--muted)', cursor:'default'}}>Careers (soon)</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="mailto:team@reexo.ai">Contact</a></li>
            </ul>
          </div>
          <div>
            <div className="foot-h">Legal & region</div>
            <ul className="foot-list">
              <li><a href="#">Privacy</a></li>
              <li><a href="#">Terms</a></li>
              <li><a href="#">GDPR</a></li>
              <li><a href="#">Imprint</a></li>
              <li className="muted">Barcelona, ES</li>
            </ul>
          </div>
        </div>
        <hr className="hair" style={{margin:'48px 0 24px'}}/>
        <div style={{display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:12}}>
          <div className="muted" style={{fontSize:13}}>© 2026 Reexo. All rights reserved.</div>
          <div className="mono-foot">v0.1 · beta</div>
        </div>
      </div>
      <style>{`
        .foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
        .foot-h{ font-family:'Inter Tight', sans-serif; font-weight:600; font-size:14px; margin-bottom: 14px; letter-spacing:-0.01em; }
        .foot-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:14px; }
        .foot-list a{ color: var(--muted); }
        .foot-list a:hover{ color: var(--text); text-decoration: none; }
        @media (max-width: 800px){ .foot-grid{ grid-template-columns: 1fr 1fr; gap: 32px; } }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Pricing, Team, FAQ, FinalCTA, Footer });