import Link from "next/link";

const STEPS = [
  { n: 1, title: "Crea tu casillero gratis", desc: "Regístrate en Moraworld y obtén en segundos tu dirección en New Jersey, EE.UU. (Suite EC-XXXXX)." },
  { n: 2, title: "Compra en tiendas de EE.UU.", desc: "Usa tu dirección en Amazon, eBay, Shein, Nike u otras. La Suite es tu número de identificación." },
  { n: 3, title: "Registra una pre-alerta", desc: "Avísanos qué esperas desde el portal para agilizar el proceso cuando llegue a nuestra bodega." },
  { n: 4, title: "Recibimos en bodega NJ", desc: "Inspeccionamos, pesamos y fotografiamos cada paquete. Te notificamos al instante." },
  { n: 5, title: "Gestión aduanera SENAE", desc: "Aplicamos el régimen correcto (Mensajería Acelerada, Courier o 4×4) para minimizar tus costos." },
  { n: 6, title: "Envío a Ecuador", desc: "Consolidamos tu carga y la enviamos por avión o marítimo. Tracking en tiempo real." },
  { n: 7, title: "Entrega en tu puerta", desc: "Coordinamos la entrega a domicilio en cualquier ciudad de Ecuador." },
];

export default function ComoFuncionaPage() {
  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="/tracking" className="navbar-link">Tracking</Link>
            <Link href="/calculadora" className="navbar-link">Calculadora</Link>
            <Link href="/tarifas" className="navbar-link">Tarifas</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" }}>¿Cómo funciona?</h1>
            <p style={{ color: "rgba(255,255,255,.7)", maxWidth: 560, margin: "0 auto" }}>
              En 7 simples pasos, compras en EE.UU. y recibes en Ecuador.
            </p>
          </div>
        </div>

        <div className="container" style={{ maxWidth: 720, margin: "4rem auto", padding: "0 1.5rem" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
            {STEPS.map((s, i) => (
              <div key={s.n} style={{ display: "flex", gap: "1.5rem" }}>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                  <div style={{ width: 48, height: 48, borderRadius: "9999px", background: "var(--primary)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: "1.1rem", flexShrink: 0 }}>{s.n}</div>
                  {i < STEPS.length - 1 && <div style={{ width: 2, flex: 1, background: "var(--gray-200)", marginTop: ".5rem", minHeight: 40 }} />}
                </div>
                <div style={{ paddingBottom: "1rem" }}>
                  <h3 style={{ fontWeight: 700, fontSize: "1.1rem", marginBottom: ".5rem" }}>{s.title}</h3>
                  <p style={{ color: "var(--gray-600)", lineHeight: 1.6 }}>{s.desc}</p>
                </div>
              </div>
            ))}
          </div>

          <div style={{ textAlign: "center", marginTop: "4rem" }}>
            <Link href="/registro" className="btn btn-primary btn-xl">Empezar gratis →</Link>
          </div>
        </div>
      </div>
    </div>
  );
}