// Header / Nav
function Nav({ active = "home" }) {
  return (
    <header className="nav">
      <div className="nav-inner">
        <a className="brand" href="#home">
          <span className="brand-mark">D</span>
          <span>Servicio Ejecutivo Deluxe</span>
        </a>
        <nav className="nav-links">
          <a href="#servicios" className={active === "servicios" ? "active" : ""}>Servicios</a>
          <a href="#tarifas" className={active === "tarifas" ? "active" : ""}>Tarifas</a>
          <a href="#cobertura">Cobertura</a>
          <a href="#nosotros">Nosotros</a>
        </nav>
        <div className="nav-cta">
          <a href="tel:+528143189337" className="btn btn-ghost btn-sm" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <IconPhone size={14} /> 81 4318 9337
          </a>
          <a href="#reserva" className="btn btn-primary btn-sm">Reservar</a>
        </div>
      </div>
    </header>
  );
}

// Hero with inline booking form
const SERVICE_LABELS = { ejecutivo: "Ejecutivo", aeropuerto: "Aeropuerto", after: "After" };
const WHATSAPP_NUMBER = "528143189337";

function Hero({ variant = "form" }) {
  const [tab, setTab] = React.useState("ejecutivo");
  const [origen, setOrigen] = React.useState("");
  const [destino, setDestino] = React.useState("");
  const [fecha, setFecha] = React.useState("");
  const [hora, setHora] = React.useState("");
  const [pasajeros, setPasajeros] = React.useState("1");
  const [maletas, setMaletas] = React.useState("0");

  const handleCotizar = () => {
    const val = (v) => (v.trim() ? v.trim() : "Por confirmar");
    const message = [
      "Hola, quiero cotizar un traslado.",
      `Servicio: ${SERVICE_LABELS[tab]}`,
      `Origen: ${val(origen)}`,
      `Destino: ${val(destino)}`,
      `Fecha: ${val(fecha)}`,
      `Hora: ${val(hora)}`,
      `Pasajeros: ${val(pasajeros)}`,
      `Maletas: ${val(maletas)}`,
    ].join("\n");
    window.open(`https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(message)}`, "_blank");
  };

  return (
    <section className="hero" id="home" data-variant={variant}>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="hero-eyebrow">
              <span className="dot"></span>
              <span>Servicio activo · Monterrey & ZMM</span>
            </div>
            <h1 className="hero-title">
              Traslados ejecutivos<br />
              <em>con la puntualidad</em><br />
              que su agenda exige.
            </h1>
            <p className="hero-sub">
              Choferes profesionales, unidades recientes y operación 24/7 en Monterrey y área metropolitana.
              Cotice, reserve y reciba factura en minutos.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="#reserva" className="btn btn-primary btn-lg">
                Solicitar traslado <IconArrowRight />
              </a>
              <a href="#tarifas" className="btn btn-ghost btn-lg">Ver tarifas</a>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <span className="hero-meta-num">24/7</span>
                <span className="hero-meta-label">Operación continua</span>
              </div>
              <div className="hero-meta-item">
                <span className="hero-meta-num">≤ 12 min</span>
                <span className="hero-meta-label">Tiempo promedio</span>
              </div>
              <div className="hero-meta-item">
                <span className="hero-meta-num">+8,400</span>
                <span className="hero-meta-label">Traslados/año</span>
              </div>
              <div className="hero-meta-item">
                <span className="hero-meta-num">100%</span>
                <span className="hero-meta-label">Factura electrónica</span>
              </div>
            </div>
          </div>

          <div className="booking-card" id="reserva">
            <div className="booking-tabs">
              <button className={`booking-tab ${tab === "ejecutivo" ? "active" : ""}`} onClick={() => setTab("ejecutivo")}>
                <IconCar size={14} /> Ejecutivo
              </button>
              <button className={`booking-tab ${tab === "aeropuerto" ? "active" : ""}`} onClick={() => setTab("aeropuerto")}>
                <IconPlane size={14} /> Aeropuerto
              </button>
              <button className={`booking-tab ${tab === "after" ? "active" : ""}`} onClick={() => setTab("after")}>
                <IconMoon size={14} /> After
              </button>
            </div>

            <div className="booking-route">
              <div className="field field-icon">
                <span className="field-icon-glyph"><IconCircle size={14} /></span>
                <input className="field-input" placeholder="Punto de origen" value={origen} onChange={(e) => setOrigen(e.target.value)} />
              </div>
              <div className="field field-icon">
                <span className="field-icon-glyph"><IconPin size={14} /></span>
                <input className="field-input" placeholder={tab === "aeropuerto" ? "Aeropuerto Intl. de Monterrey (MTY)" : "Destino"} value={destino} onChange={(e) => setDestino(e.target.value)} />
              </div>
            </div>

            <div className="field-row" style={{ marginTop: 14 }}>
              <div className="field field-icon">
                <span className="field-icon-glyph"><IconCalendar size={14} /></span>
                <input className="field-input" placeholder="Fecha" value={fecha} onChange={(e) => setFecha(e.target.value)} />
              </div>
              <div className="field field-icon">
                <span className="field-icon-glyph"><IconClock size={14} /></span>
                <input className="field-input" placeholder="Hora" value={hora} onChange={(e) => setHora(e.target.value)} />
              </div>
            </div>

            <div className="field-row">
              <div className="field field-icon">
                <span className="field-icon-glyph"><IconUser size={14} /></span>
                <input className="field-input" placeholder="Pasajeros" value={pasajeros} onChange={(e) => setPasajeros(e.target.value)} />
              </div>
              <div className="field field-icon">
                <span className="field-icon-glyph"><IconBriefcase size={14} /></span>
                <input className="field-input" placeholder="Maletas" value={maletas} onChange={(e) => setMaletas(e.target.value)} />
              </div>
            </div>

            <button className="btn btn-primary booking-submit" onClick={handleCotizar}>
              Cotizar y reservar <IconArrowRight />
            </button>

            <div className="booking-foot">
              <span>Cotización inmediata · Sin compromiso</span>
              <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
                <IconShield size={13} /> Pago seguro
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Servicios
function Servicios() {
  const items = [
    {
      icon: <IconBriefcase />,
      name: "Ejecutivo",
      desc: "Traslados puerta a puerta para reuniones, juntas de consejo y agendas con itinerario complejo. Confidencialidad y discreción del operador.",
      meta: "PUERTA A PUERTA",
    },
    {
      icon: <IconPlane />,
      name: "Aeropuerto",
      desc: "Servicio dedicado al Aeropuerto Internacional de Monterrey con monitoreo de vuelo y tiempo de cortesía incluido. Recepción en sala internacional.",
      meta: "MTY · MONITOREO INCLUIDO",
    },
    {
      icon: <IconMoon />,
      name: "After / Nocturno",
      desc: "Regreso seguro tras eventos, cenas o celebraciones. Disfrute la velada; del camino nos encargamos nosotros con total responsabilidad.",
      meta: "OPERACIÓN 24/7",
    },
  ];
  return (
    <section className="section" id="servicios">
      <div className="container">
        <div className="section-eyebrow">— 01 / Servicios</div>
        <h2 className="section-title">Tres líneas de servicio,<br />un mismo estándar.</h2>
        <p className="section-sub">
          Cada traslado se opera con unidad asignada, chofer uniformado y protocolo de seguimiento. Sin sorpresas, sin esperas innecesarias.
        </p>

        <div className="service-grid">
          {items.map((s, i) => (
            <a href="#reserva" key={i} className="service-card">
              <div className="service-icon">{s.icon}</div>
              <h3 className="service-name">{s.name}</h3>
              <p className="service-desc">{s.desc}</p>
              <div className="service-meta">
                <span>{s.meta}</span>
                <span className="service-arrow"><IconArrowUpRight size={14} /></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// Flota
function Flota() {
  const cars = [
    { name: "Nissan Altima", cls: "Sedán · Estándar", paxs: "3 pax", bags: "2 maletas", img: "img/fleet/altima.png" },
    { name: "Toyota Camry", cls: "Sedán · Premium", paxs: "3 pax", bags: "3 maletas", img: "img/fleet/camry.webp" },
    { name: "Toyota Hiace", cls: "Van · Ejecutiva", paxs: "10 pax", bags: "8 maletas", img: "img/fleet/hiace.png" },
  ];
  return (
    <section className="section" id="flota">
      <div className="container">
        <div className="section-eyebrow">— 02 / Flota</div>
        <h2 className="section-title">Unidades recientes,<br />impecablemente mantenidas.</h2>
        <p className="section-sub">
          Modelos 2023 en adelante, revisión mecánica semanal, sanitización entre servicios e interior climatizado.
        </p>

        <div className="fleet-grid">
          {cars.map((c, i) => (
            <div key={i} className="fleet-card">
              <div className="fleet-image">
                <img className="fleet-photo" src={c.img} alt={c.name} loading="lazy" />
              </div>
              <div className="fleet-body">
                <h3 className="fleet-name">{c.name}</h3>
                <div className="fleet-class">{c.cls}</div>
                <div className="fleet-specs">
                  <span className="fleet-spec"><IconUser size={14} /> {c.paxs}</span>
                  <span className="fleet-spec"><IconBriefcase size={14} /> {c.bags}</span>
                  <span className="fleet-spec"><IconCheck size={14} /> A/C</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Servicios, Flota });