// Home page sections
function HomeServices() {
  const services = [
    {
      num: "01",
      title: "On-Demand Jet Charter",
      desc: "Single-leg, round-trip, or multi-city — sourced from vetted Part 135 operators. Transparent pricing, no last-minute markups.",
    },
    {
      num: "02",
      title: "Group & Event Charter",
      desc: "Multi-aircraft coordination for tours, corporate offsites, and events. One contact, one invoice, staggered itineraries.",
    },
    {
      num: "03",
      title: "Concierge",
      desc: "Ground transport, bespoke catering, FBO escort, customs pre-clearance — arranged discreetly, at-cost.",
    },
  ];

  return (
    <section className="section" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <span className="eyebrow"><span className="dot"></span>What we arrange</span>
            <span className="label">Three offerings</span>
          </div>
          <h2 className="display">Three services.<br /><em>One contact.</em></h2>
        </div>
        <div className="services-grid">
          {services.map(s => (
            <div key={s.num} className="service-card">
              <span className="num">{s.num} / 03</span>
              <h3 className="title">{s.title}</h3>
              <p className="desc">{s.desc}</p>
              <a href="services.html" className="btn btn-ghost" style={{ marginTop: "auto", display: "inline-flex" }}>
                Learn more <Icons.Arrow />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeFleet() {
  const categories = [
    { num: "01", label: "Light Jet", sub: "Citation CJ3+ / Premier 1A or Similar", pax: "6–9 pax", range: "Up to 1,500 nm" },
    { num: "02", label: "Midsize Jet", sub: "Hawker 800XP / Citation XLS or Similar", pax: "7–9 pax", range: "Up to 2,000 nm" },
    { num: "03", label: "Super Midsize", sub: "Challenger 350 / Citation Longitude or Similar", pax: "8–10 pax", range: "Up to 3,400 nm" },
    { num: "04", label: "Heavy Jet", sub: "Gulfstream G450 / Falcon 900 or Similar", pax: "10–16 pax", range: "Up to 4,500 nm" },
  ];

  return (
    <section className="section" style={{ background: "var(--ink-2)" }}>
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <span className="eyebrow"><span className="dot"></span>The Fleet</span>
            <span className="label">Every category, every mission</span>
          </div>
          <h2 className="display">Every category.<br /><em>Every mission.</em></h2>
        </div>
        <div className="home-fleet-grid">
          {categories.map(cat => (
            <a href="fleet.html" key={cat.num} className="home-fleet-card">
              <span className="home-fleet-num tabular">{cat.num}</span>
              <div>
                <div className="home-fleet-label">{cat.label}</div>
                <div className="home-fleet-sub">{cat.sub}</div>
              </div>
              <div className="home-fleet-stats">
                <span>{cat.pax}</span>
                <span>{cat.range}</span>
              </div>
              <span className="home-fleet-arrow"><Icons.Arrow /></span>
            </a>
          ))}
        </div>
        <div style={{ marginTop: 36, textAlign: "center" }}>
          <a href="fleet.html" className="btn">Explore full fleet <Icons.Arrow /></a>
        </div>
      </div>
    </section>
  );
}

function HomeAbout() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <span className="eyebrow"><span className="dot"></span>Built by a pilot</span>
            <span className="label">Founder</span>
          </div>
          <h2 className="display">Guidance from<br /><em>inside</em> the industry.</h2>
        </div>
        <div className="about">
          <div className="about-portrait">
            <image-slot
              id="founder-portrait-home"
              shape="rect"
              placeholder="Founder portrait — flight deck or hangar"
              style={{ width: "100%", height: "100%", aspectRatio: "4 / 5" }}>
            </image-slot>
          </div>
          <div className="about-text">
            <p className="lead">
              Schindler Aviation was founded by a working ATP-rated pilot — not a sales team. <em>That changes the conversation.</em>
            </p>
            <p>
              I'm Logan Schindler — a current Part 135 dual-qualified captain, type rated on the Beechcraft Premier and Hawker. Every quote is built personally. Every operator is selected personally.
            </p>
            <p>
              When you ask whether a light jet can make Aspen with a tailwind and four passengers, you'll get the answer from someone who reads the performance charts every week — not someone reading a brochure.
            </p>
            <a href="about.html" className="btn" style={{ alignSelf: "flex-start", display: "inline-flex" }}>
              About Logan <Icons.Arrow />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeCTA() {
  return (
    <section className="section" style={{ background: "var(--ink-2)", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="home-cta-strip">
          <div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 72px)", marginBottom: 20 }}>
              Ready to fly?<br /><em>We respond in 15 minutes.</em>
            </h2>
            <p style={{ color: "var(--muted)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase" }}>
              24/7 · No membership required · Worldwide coverage
            </p>
          </div>
          <div className="home-cta-actions">
            <a href="contact.html" className="btn btn-primary" style={{ display: "inline-flex" }}>
              Request a Charter <Icons.Arrow />
            </a>
            <a href="tel:+16027998737" className="btn" style={{ display: "inline-flex" }}>
              +1 (602) 799-8737
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HomeServices = HomeServices;
window.HomeFleet = HomeFleet;
window.HomeAbout = HomeAbout;
window.HomeCTA = HomeCTA;