// Fleet, About, Safety, Contact pages

function FleetPage() {
  const fleet = [
    { type: 'Cargo Van / Sprinter', dims: 'Up to 14 ft cargo area', cap: 'Up to 3,500 lbs · 3 pallets', tag: 'MOST EFFICIENT', img: 'assets/cargo-van.jpg?v=5' },
    { type: 'Box Truck', dims: '14 ft – 16 ft box + liftgate', cap: 'Up to 6,500 lbs · 8 pallets', img: 'assets/box-truck.jpg?v=5' },
    { type: 'Straight Truck', dims: '24 ft – 26 ft box + liftgate', cap: 'Up to 10,000 lbs · 12 pallets', tag: 'MAX CAPACITY', img: 'assets/straight-truck.jpg?v=5' },
  ];

  return (
    <div className="page">
      <div className="page-header">
        <span className="section-kicker">FLEET</span>
        <h1 className="page-title">Every unit,<br/>dedicated.</h1>
        <p className="page-lede">Our trucks aren't shared, sub-contracted, or re-brokered. When you book a Babiline unit, that's the truck that picks up your load.</p>
      </div>

      <div className="fleet-grid">
        {fleet.map((f, i) => (
          <div key={i} className="fleet-card">
            {f.tag && <div className="fleet-tag">{f.tag}</div>}
            <div className="fleet-visual">
              <img src={f.img} alt={f.type} className="fleet-img" loading="lazy" />
            </div>
            <div className="fleet-info">
              <h3>{f.type}</h3>
              <div className="fleet-row"><span>Dimensions</span><span>{f.dims}</span></div>
              <div className="fleet-row"><span>Capacity</span><span>{f.cap}</span></div>
            </div>
          </div>
        ))}
      </div>

      <section className="fleet-features">
        <h2>Standard on every unit</h2>
        <div className="features-grid">
          {[
            ['Live GPS telemetry', 'Pings every 2–3 minutes. Shareable tracking link, no broker login required.'],
            ['E-track + blankets', 'Every box and straight truck carries tie-downs, blankets, and load bars.'],
            ['Hazmat-ready', 'Placards and compliant equipment on request.'],
            ['ELD compliant', 'Electronic logging devices on all units running OTR.'],
            ['24/7 reachable', 'Every driver has direct dispatch on speed dial.'],
            ['Dedicated, not brokered', 'Your load rides on the Babiline unit that accepted it — nothing gets re-sold.'],
          ].map(([t, d]) => (
            <div key={t} className="feature">
              <div className="feature-dot"></div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function AboutPage({ setRoute }) {
  return (
    <div className="page">
      <div className="page-header">
        <span className="section-kicker">ABOUT</span>
        <h1 className="page-title">Built by drivers<br/>for drivers & brokers.</h1>
        <p className="page-lede">Babiline is an owner-operator-friendly carrier running expedited freight across the lower 48. We keep the fleet dedicated, the dispatch human, and the tracking live.</p>
      </div>

      <section className="about-story">
        <div className="about-left">
          <h2>We started Babiline because the middle was missing.</h2>
        </div>
        <div className="about-right">
          <p>The mega-carriers treat every load the same and every driver like a number. The small carriers can't keep up with broker demand or investor-grade compliance.</p>
          <p>We built Babiline for the middle — a carrier that brokers can trust with dedicated units and live visibility, and that owner-operators actually want to lease on to.</p>
          <p>No re-brokering on one side. No forced dispatch on the other. A single operations team that answers the phone at 3 AM because that's when freight actually moves.</p>
        </div>
      </section>

      <section className="values">
        {[
          ['01', 'Dedicated by default', 'Every load rides on a Babiline unit. We don\'t re-broker. Full stop.'],
          ['02', 'Human dispatch', 'You talk to a person who knows your load, your truck, and your lane.'],
          ['03', 'Driver-first economics', 'Weekly pay, same-day Quick Pay, and loads that actually pay.'],
          ['04', 'Live everything', 'Tracking, comms, invoicing. No black-box waiting.'],
        ].map(([n, t, d]) => (
          <div key={n} className="value">
            <div className="value-num">{n}</div>
            <div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          </div>
        ))}
      </section>

      <section className="about-cta">
        <h2>Want to see the operation up close?</h2>
        <div className="about-cta-btns">
          <button className="btn btn-primary btn-lg" onClick={() => setRoute('careers')}>Drive with us</button>
          <button className="btn btn-ghost btn-lg" onClick={() => setRoute('contact')}>Get in touch</button>
        </div>
      </section>
    </div>
  );
}

function SafetyPage() {
  return (
    <div className="page">
      <div className="page-header">
        <span className="section-kicker">SAFETY & COMPLIANCE</span>
        <h1 className="page-title">Compliance<br/>isn't a checkbox.</h1>
        <p className="page-lede">Brokers stake their reputation on every carrier they book. We don't take that lightly — here's how we keep our CSA scores clean and our drivers safe.</p>
      </div>

      <section className="compliance-grid">
        {[
          { t: 'DOT Authority', d: 'Active MC and USDOT numbers. COI on file with $1M auto liability, $100K cargo coverage.' },
          { t: 'Hazmat Registration', d: 'Current EPA registration. Drivers carry hazmat endorsements and class-specific training.' },
          { t: 'TWIC Credentialed', d: 'TWIC-carded drivers available for port, refinery, and secured-facility pickups.' },
          { t: 'ELD Compliance', d: 'All OTR units run FMCSA-registered Electronic Logging Devices.' },
          { t: 'Drug & Alcohol Program', d: 'Full DOT-compliant program with pre-employment, random, reasonable-suspicion, and post-accident testing.' },
          { t: 'Continuous Driver Vetting', d: 'MVR reviews, PSP pulls, and background checks on every driver — at onboarding and annually thereafter.' },
        ].map((c, i) => (
          <div key={i} className="compliance-card">
            <div className="comp-check">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
            </div>
            <h3>{c.t}</h3>
            <p>{c.d}</p>
          </div>
        ))}
      </section>

      <section className="docs-section">
        <h2>Need documentation?</h2>
        <p>Insurance certificates, W-9, operating authority, and references are available on request. Email <a href="mailto:contact@babilineinc.com">contact@babilineinc.com</a> or call <a href="tel:+14842355888">+1 484 235 5888</a>.</p>
      </section>
    </div>
  );
}

function ContactPage() {
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');
  const [form, setForm] = React.useState({ name: '', email: '', subject: 'broker', message: '' });

  const submit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setSubmitError('');
    try {
      const res = await fetch('https://formspree.io/f/xjgjaool', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          _subject: `New Contact Message — ${form.name} (${form.subject})`,
          form_type: 'Contact Form',
          ...form,
        }),
      });
      if (!res.ok) throw new Error('submit failed');
      setSent(true);
    } catch (err) {
      setSubmitError('Something went wrong. Please try again or call +1 484 235 5888.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="page">
      <div className="page-header">
        <span className="section-kicker">CONTACT</span>
        <h1 className="page-title">Dispatch answers.<br/>Every hour.</h1>
        <p className="page-lede">Call, email, or use the form below — whichever is fastest for you.</p>
      </div>

      <div className="contact-grid">
        <div className="contact-channels">
          <div className="contact-channel">
            <span className="ch-label">Dispatch / Sales</span>
            <a href="tel:+14842355888" className="ch-value">+1 484 235 5888</a>
            <span className="ch-meta">Answered 24/7</span>
          </div>
          <div className="contact-channel">
            <span className="ch-label">Email</span>
            <a href="mailto:contact@babilineinc.com" className="ch-value">contact@babilineinc.com</a>
            <span className="ch-meta">Replies within 1 hour, 24/7</span>
          </div>
          <div className="contact-channel">
            <span className="ch-label">Office hours</span>
            <span className="ch-value">24 / 7 / 365</span>
            <span className="ch-meta">Freight moves, we answer.</span>
          </div>
          <div className="contact-channel">
            <span className="ch-label">Social</span>
            <a href="https://www.facebook.com/profile.php?id=61570169244859" target="_blank" className="ch-value">Facebook</a>
          </div>
        </div>

        <div className="contact-form-wrap">
          {sent ? (
            <div className="form-success">
              <div className="success-check">
                <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M20 6L9 17l-5-5"/></svg>
              </div>
              <h2>Message received.</h2>
              <p>Someone on dispatch will reply within the hour. For anything time-critical, call <a href="tel:+14842355888">+1 484 235 5888</a>.</p>
            </div>
          ) : (
            <form onSubmit={submit} className="contact-form">
              <h2>Send us a message</h2>
              <div className="field">
                <label>I am a…</label>
                <div className="radio-row">
                  {[
                    ['broker', 'Broker / Shipper'],
                    ['driver', 'Owner-operator'],
                    ['other', 'Something else'],
                  ].map(([v, l]) => (
                    <label key={v} className={`radio ${form.subject === v ? 'active' : ''}`}>
                      <input type="radio" name="subject" value={v} checked={form.subject === v}
                        onChange={(e) => setForm({ ...form, subject: e.target.value })} />
                      {l}
                    </label>
                  ))}
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Name</label>
                  <input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input required type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
                </div>
              </div>
              <div className="field">
                <label>Message</label>
                <textarea required rows={5} value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} />
              </div>
              <button className="btn btn-primary btn-lg" type="submit" disabled={submitting}>
                {submitting ? 'Sending…' : 'Send message'}
              </button>
              {submitError && <div className="form-error-msg">{submitError}</div>}
            </form>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FleetPage, AboutPage, SafetyPage, ContactPage });