// Tarifas section with 3 visual variants

const ZONES = [
  { name: "Monterrey Centro", price: 600, eta: "8–14 min" },
  { name: "San Pedro / Valle", price: 700, eta: "10–18 min" },
  { name: "Apodaca", price: 450, eta: "12–22 min" },
  { name: "San Nicolás", price: 650, eta: "10–18 min" },
  { name: "Santa Catarina", price: 800, eta: "12–20 min" },
  { name: "Escobedo", price: 700, eta: "14–24 min" },
  { name: "Juárez", price: 500, eta: "10–18 min" },
  { name: "García", price: 800, eta: "20–32 min" },
  { name: "Zona Poniente", price: 700, eta: "16–28 min" },
  { name: "Contry", price: 550, eta: "10–18 min" },
  { name: "Carretera Nacional", price: 850, eta: "Por cotizar" },
  { name: "Pesquería / Cadereyta", price: 950, eta: "Por cotizar" },
];

function Tarifas({ variant = "cards" }) {
  return (
    <section className="section" id="tarifas">
      <div className="container">
        <div className="section-eyebrow">— 03 / Tarifas</div>
        <h2 className="section-title">Tarifa base por zona.<br />Sin tarifas dinámicas.</h2>
        <p className="section-sub">
          Precio fijo desde Monterrey Centro hacia las zonas indicadas. La tarifa final se confirma al momento de la reserva según horario, equipaje adicional y paradas.
        </p>

        {variant === "cards" && <TarifasCards />}
        {variant === "list" && <TarifasList />}
        {variant === "minimal" && <TarifasMin />}

        <div className="cta-band">
          <div>
            <h3>¿Origen o destino fuera de cobertura?</h3>
            <p>Solicite una cotización especial. Le respondemos en menos de 30 minutos en horario laboral.</p>
          </div>
          <a href="#reserva" className="btn btn-primary btn-lg">
            Cotización especial <IconArrowRight />
          </a>
        </div>
      </div>
    </section>
  );
}

function TarifasCards() {
  const featured = ZONES.slice(0, 6);
  return (
    <div className="tarifa-grid-cards">
      {featured.map((z, i) => (
        <div key={i} className="tarifa-card">
          <span className="tarifa-card-zone">Zona {String(i + 1).padStart(2, "0")}</span>
          <h3 className="tarifa-card-name">{z.name}</h3>
          <div style={{ fontSize: 13, color: "var(--fg-muted)", display: "flex", alignItems: "center", gap: 6 }}>
            <IconClock size={13} /> {z.eta}
          </div>
          <div className="tarifa-card-price">
            ${z.price}<small>MXN base</small>
          </div>
        </div>
      ))}
    </div>
  );
}

function TarifasList() {
  return (
    <div className="tarifa-list">
      <div className="tarifa-list-row head">
        <span>Zona / Destino</span>
        <span>Tiempo estimado</span>
        <span>Tarifa base</span>
      </div>
      {ZONES.map((z, i) => (
        <div key={i} className="tarifa-list-row">
          <span className="tarifa-list-name">{z.name}</span>
          <span className="tarifa-list-eta">{z.eta}</span>
          <span className="tarifa-list-price">${z.price}</span>
        </div>
      ))}
    </div>
  );
}

function TarifasMin() {
  return (
    <div className="tarifa-min">
      {ZONES.slice(0, 8).map((z, i) => (
        <div key={i} className="tarifa-min-cell">
          <span className="tarifa-min-zone">{z.name}</span>
          <span className="tarifa-min-price">${z.price}<small>MXN</small></span>
        </div>
      ))}
    </div>
  );
}

// Calculator
function Calculator() {
  const [zone, setZone] = React.useState(0);
  const [vehicle, setVehicle] = React.useState("sedan");
  const [time, setTime] = React.useState("day");
  const [waitMin, setWaitMin] = React.useState(0);

  const z = ZONES[zone];
  const vehMul = vehicle === "premium" ? 1.25 : vehicle === "suv" ? 1.4 : 1;
  const timeMul = time === "night" ? 1.15 : 1;
  const wait = Math.floor(waitMin / 15) * 50;
  const subtotal = Math.round(z.price * vehMul * timeMul);
  const total = subtotal + wait;

  return (
    <section className="section" id="cotizador">
      <div className="container">
        <div className="section-eyebrow">— 04 / Cotizador</div>
        <h2 className="section-title">Calcule su tarifa<br />en segundos.</h2>
        <p className="section-sub">
          Estimación inmediata con tarifa base, tipo de unidad, horario y tiempo de espera. La tarifa se confirma al reservar.
        </p>

        <div className="calc">
          <div className="calc-form">
            <div className="field-label" style={{ marginBottom: 12 }}>Zona de destino</div>
            <div className="zone-grid">
              {ZONES.slice(0, 8).map((zz, i) => (
                <button
                  key={i}
                  className={`zone-chip ${zone === i ? "active" : ""}`}
                  onClick={() => setZone(i)}
                >
                  <span>{zz.name}</span>
                  <span className="zone-chip-price">${zz.price}</span>
                </button>
              ))}
            </div>

            <div style={{ marginTop: 28 }}>
              <div className="field-label" style={{ marginBottom: 12 }}>Tipo de unidad</div>
              <div className="zone-grid">
                {[
                  { id: "sedan", name: "Sedán Estándar", mul: "×1.00" },
                  { id: "premium", name: "Sedán Premium", mul: "×1.25" },
                  { id: "suv", name: "SUV Privada", mul: "×1.40" },
                ].map((v) => (
                  <button
                    key={v.id}
                    className={`zone-chip ${vehicle === v.id ? "active" : ""}`}
                    onClick={() => setVehicle(v.id)}
                  >
                    <span>{v.name}</span>
                    <span className="zone-chip-price">{v.mul}</span>
                  </button>
                ))}
              </div>
            </div>

            <div style={{ marginTop: 28 }}>
              <div className="field-label" style={{ marginBottom: 12 }}>Horario</div>
              <div className="zone-grid">
                <button className={`zone-chip ${time === "day" ? "active" : ""}`} onClick={() => setTime("day")}>
                  <span>Día (06:00 — 22:00)</span><span className="zone-chip-price">×1.00</span>
                </button>
                <button className={`zone-chip ${time === "night" ? "active" : ""}`} onClick={() => setTime("night")}>
                  <span>Nocturno (22:00 — 06:00)</span><span className="zone-chip-price">×1.15</span>
                </button>
              </div>
            </div>

            <div style={{ marginTop: 28 }}>
              <div className="field-label" style={{ marginBottom: 12, display: "flex", justifyContent: "space-between" }}>
                <span>Tiempo de espera</span>
                <span style={{ fontFamily: "var(--font-mono)", color: "var(--fg)" }}>{waitMin} min</span>
              </div>
              <input
                type="range"
                min="0"
                max="60"
                step="15"
                value={waitMin}
                onChange={(e) => setWaitMin(+e.target.value)}
                style={{ width: "100%", accentColor: "var(--fg)" }}
              />
              <div style={{ fontSize: 12, color: "var(--fg-dim)", marginTop: 6, fontFamily: "var(--font-mono)" }}>
                $50 MXN por cada 15 min adicionales
              </div>
            </div>
          </div>

          <div className="calc-result">
            <div className="calc-result-label">Estimación de tarifa</div>
            <div className="calc-amount">
              <span className="calc-amount-currency">$</span>
              <span>{total.toLocaleString("es-MX")}</span>
              <span className="calc-amount-mxn">MXN</span>
            </div>

            <div className="calc-breakdown">
              <div className="calc-row">
                <span>Tarifa base · {z.name}</span>
                <span>${z.price}</span>
              </div>
              <div className="calc-row">
                <span>Unidad · {vehicle === "premium" ? "Premium" : vehicle === "suv" ? "SUV" : "Estándar"}</span>
                <span>×{vehMul.toFixed(2)}</span>
              </div>
              <div className="calc-row">
                <span>Horario · {time === "night" ? "Nocturno" : "Día"}</span>
                <span>×{timeMul.toFixed(2)}</span>
              </div>
              <div className="calc-row">
                <span>Espera · {waitMin} min</span>
                <span>+${wait}</span>
              </div>
              <div className="calc-row total">
                <span>Total estimado</span>
                <span>${total.toLocaleString("es-MX")} MXN</span>
              </div>
            </div>

            <a href="#reserva" className="btn btn-primary btn-lg" style={{ width: "100%", marginTop: 24 }}>
              Reservar este traslado <IconArrowRight />
            </a>
            <div style={{ marginTop: 12, fontSize: 12, color: "var(--fg-dim)", textAlign: "center" }}>
              Tarifa final se confirma al momento de la reserva
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Tarifas, Calculator });