import Link from "next/link";

const TARIFAS = [
  { regime: "Mensajería Acelerada", limit: "Hasta $200 USD", taxes: "Sin impuestos", flete: "$8–$15/lb", ideal: "Compras pequeñas · fast fashion · accesorios", badge: "Más popular" },
  { regime: "Courier",              limit: "Hasta $400 USD", taxes: "Sin impuestos hasta $200", flete: "$8–$15/lb", ideal: "Electrónica · ropa · zapatos", badge: "" },
  { regime: "Régimen 4×4",          limit: "Hasta $2,000 USD", taxes: "FODINFA + Arancel + IVA", flete: "Según peso/volumen", ideal: "Equipos, repuestos, herramientas", badge: "" },
  { regime: "Carga pesada (FCL)",   limit: "Sin límite", taxes: "Trámite formal", flete: "Cotización por m³", ideal: "Maquinaria · muebles · vehículos", badge: "" },
];

export default function TarifasPublicaPage() {
  return (
    <div style={{ minHeight: "100vh" }}>
      <nav className="navbar">
        <div className="container navbar-inner">
          <Link href="/" className="navbar-logo">Moraworld<span>.</span></Link>
          <div className="navbar-links">
            <Link href="/como-funciona" className="navbar-link">Cómo funciona</Link>
            <Link href="/calculadora" className="navbar-link">Calculadora</Link>
            <Link href="/registro" className="btn btn-primary btn-sm">Crear casillero</Link>
          </div>
        </div>
      </nav>

      <div style={{ paddingTop: "var(--nav-h)" }}>
        <div style={{ background: "linear-gradient(135deg, var(--dark) 0%, #0f2050 100%)", color: "white", padding: "4rem 0 3rem", textAlign: "center" }}>
          <div className="container">
            <h1 style={{ fontSize: "clamp(1.75rem,4vw,2.5rem)", fontWeight: 800, marginBottom: "1rem" }}>Tarifas y Costos</h1>
            <p style={{ color: "rgba(255,255,255,.7)", maxWidth: 560, margin: "0 auto" }}>Precios transparentes, sin sorpresas en aduana.</p>
          </div>
        </div>

        <div className="section-gray">
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: "1.5rem" }}>
              {TARIFAS.map(t => (
                <div key={t.regime} className="card" style={{ padding: "1.5rem", position: "relative", borderTop: t.badge ? "4px solid var(--primary)" : "4px solid transparent" }}>
                  {t.badge && <span className="badge badge-blue" style={{ position: "absolute", top: "1rem", right: "1rem" }}>{t.badge}</span>}
                  <h3 style={{ fontWeight: 700, fontSize: "1.1rem", marginBottom: ".75rem" }}>{t.regime}</h3>
                  <div style={{ display: "flex", flexDirection: "column", gap: ".5rem", fontSize: ".9rem" }}>
                    <div><span style={{ color: "var(--gray-500)" }}>Límite: </span><strong>{t.limit}</strong></div>
                    <div><span style={{ color: "var(--gray-500)" }}>Impuestos: </span><strong>{t.taxes}</strong></div>
                    <div><span style={{ color: "var(--gray-500)" }}>Flete: </span><strong>{t.flete}</strong></div>
                  </div>
                  <div style={{ marginTop: "1rem", padding: ".75rem", background: "var(--gray-50)", borderRadius: "var(--radius)", fontSize: ".8rem", color: "var(--gray-500)" }}>
                    Ideal para: {t.ideal}
                  </div>
                </div>
              ))}
            </div>

            <div style={{ textAlign: "center", marginTop: "3rem" }}>
              <p style={{ color: "var(--gray-500)", marginBottom: "1rem" }}>¿Quieres saber exactamente cuánto pagarás?</p>
              <Link href="/calculadora" className="btn btn-primary btn-lg">Usar la calculadora →</Link>
            </div>

            <div className="alert alert-info" style={{ marginTop: "2rem" }}>
              <strong>Impuestos SENAE:</strong> FODINFA 0.5% · Arancel 0–10% según partida arancelaria · IVA 15%.
              Calculados sobre CIF (costo + seguro + flete). Los montos del régimen 4×4 se basan en facturas originales. §15 Reglamento COMEX.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}