// sections.jsx — The Standard, How It Works, Sea & Air
function Standard() {
  return (
    <section className="section standard" id="standard">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <Eyebrow>The Reserve Standard</Eyebrow>
            <h2 className="section-title">Status, Freedom, an Experience</h2>
            <p className="section-intro">
              Your time is valuable. Whether you’re closing a deal, attending an event, or enjoying a
              well-earned getaway, your attention belongs on the moment — not the logistics.
            </p>
          </div>
        </Reveal>
        <div className="pillars">
          {STANDARD.map((p, i) => (
            <Reveal key={p.title} delay={i * 90} className="pillar">
              <span className="pillar-ico"><PillarIcon name={p.icon} /></span>
              <h3 className="pillar-title">{p.title}</h3>
              <p className="pillar-body">{p.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section className="section process" id="process">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <Eyebrow>The Process</Eyebrow>
            <h2 className="section-title">From Reservation to Road</h2>
          </div>
        </Reveal>
        <div className="steps">
          <div className="steps-rule" />
          {PROCESS.map((s, i) => (
            <Reveal key={s.n} delay={i * 90} className="step">
              <span className="step-n">{s.n}</span>
              <h3 className="step-title">{s.title}</h3>
              <p className="step-body">{s.body}</p>
            </Reveal>
          ))}
        </div>
        <Reveal delay={80}>
          <p className="process-note">
            Renters hold a valid license and full-coverage insurance, and provide a refundable security deposit;
            qualifying age applies. Delivery available to IAH, hotels, and venues across Greater Houston.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function SeaAir({ onInquire }) {
  return (
    <section className="section seaair" id="seaair">
      <div className="container">
        <div className="seaair-card">
          <Reveal className="seaair-copy">
            <Eyebrow>Beyond the Road</Eyebrow>
            <h2 className="section-title">Sea &amp; Air Experience</h2>
            <p className="section-intro">
              When the occasion rises above the road, we broker private yacht and boat charters
              by sea and private jet, helicopter, and air concierge by sky — all through our trusted
              partners. Tell us the destination; we’ll handle the rest.
            </p>
            <div className="seaair-actions">
              <GoldButton size="md" type="outline" onClick={onInquire}>Explore Sea &amp; Air</GoldButton>
            </div>
          </Reveal>
          <Reveal delay={120} className="seaair-media">
            <figure className="seaair-shot">
              <img src="https://images.unsplash.com/photo-1562281302-809108fd533c?auto=format&fit=crop&w=900&q=80" alt="Private yacht charter on open water" loading="lazy" />
              <figcaption className="seaair-shot-tag">By Sea</figcaption>
            </figure>
            <figure className="seaair-shot">
              <img src="https://images.unsplash.com/photo-1474302770737-173ee21bab63?auto=format&fit=crop&w=900&q=80" alt="Private jet on the tarmac at golden hour" loading="lazy" />
              <figcaption className="seaair-shot-tag">By Air</figcaption>
            </figure>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function ChauffeurTeaser({ onExplore }) {
  return (
    <section className="section chauffeur-teaser" id="chauffeur">
      <div className="container">
        <div className="chf-band">
          <Reveal className="chf-copy">
            <Eyebrow>Arrive, Don’t Drive</Eyebrow>
            <h2 className="section-title">Chauffeur Service</h2>
            <p className="section-intro">
              Some occasions are best enjoyed from the back seat. Step into a private limousine or
              luxury Sprinter with a professional behind the wheel — starlight ceilings, chilled
              service, and a presidential arrival. Driver, fuel, and unlimited stops, always included.
            </p>
            <GoldButton size="md" onClick={onExplore}>Explore Chauffeur Service</GoldButton>
          </Reveal>
          <Reveal delay={120} className="chf-list">
            {CHAUFFEUR.map((v) => (
              <button className="chf-item" key={v.name} onClick={onExplore}>
                <span className="chf-item-cat">{v.cat}</span>
                <span className="chf-item-name">{v.name}</span>
                <span className="chf-item-seats">{v.seats}</span>
                <span className="chf-item-go" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
                </span>
              </button>
            ))}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function InvestTeaser({ onExplore }) {
  return (
    <section className="section invest-teaser" id="invest-teaser">
      <div className="container">
        <div className="seaair-card invest-card">
          <Reveal className="seaair-copy">
            <Eyebrow>Partner With Us</Eyebrow>
            <h2 className="section-title">Invest With Us</h2>
            <p className="section-intro">
              Own a vehicle worth driving? Put it to work. Partner with Chairman’s Reserve and we’ll
              rent, manage, insure, and maintain your car to our standard — while you share in the
              revenue. Your asset, our operation.
            </p>
            <div className="seaair-actions">
              <GoldButton size="md" type="outline" onClick={onExplore}>Explore Investing</GoldButton>
            </div>
          </Reveal>
          <Reveal delay={120} className="seaair-media">
            <figure className="seaair-shot">
              <img src="assets/escalade-invest.jpeg" alt="Cadillac Escalade earning as part of the Reserve fleet" loading="lazy" />
              <figcaption className="seaair-shot-tag">Earn With Your Car</figcaption>
            </figure>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Standard, Process, SeaAir, ChauffeurTeaser, InvestTeaser });