import type { Metadata } from "next";
import { Calculator, Clock, MapPinned, Truck } from "lucide-react";

export const metadata: Metadata = { title: "Envíos | ARI Shopping" };

// ADR 0010 §2: el costo de envio se calcula en vivo con EnvioClick (peso +
// direccion), no es un valor fijo -- el copy de abajo describe ese
// comportamiento real, no un placeholder. Transportadoras reales
// confirmadas en una cotizacion en vivo contra la API de EnvioClick
// (PIBOX, COORDINADORA, ENVIA, RAPPI, TCC) -- EnvioClick cotiza entre
// ellas y el sistema toma automaticamente la mas economica por pedido.
const CARRIERS = ["Coordinadora", "Envía", "TCC", "Rappi", "Pibox"];

export default function EnviosPage() {
  return (
    <section className="mx-auto max-w-3xl px-4 py-14 lg:py-20">
      <span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">Ayuda</span>
      <h1 className="mt-3 text-4xl font-black tracking-tight sm:text-5xl">Envíos</h1>
      <p className="mt-5 text-lg leading-8 text-slate-600">
        Hacemos envíos a nivel nacional desde nuestra bodega en Santiago de Cali, Valle del Cauca
      </p>

      <div className="mt-10 grid gap-6 sm:grid-cols-2">
        <div className="rounded-2xl border border-slate-200 p-6">
          <Calculator className="size-6 text-ari-marino" />
          <h2 className="mt-3 font-black">Costo calculado en tiempo real</h2>
          <p className="mt-2 text-sm leading-6 text-slate-600">
            El valor del envío se calcula automáticamente según el peso de tu pedido y la dirección de entrega —
            lo ves exacto en el checkout antes de pagar, nunca es una tarifa a ciegas.
          </p>
        </div>
        <div className="rounded-2xl border border-slate-200 p-6">
          <Truck className="size-6 text-ari-marino" />
          <h2 className="mt-3 font-black">Transportadoras aliadas</h2>
          <p className="mt-2 text-sm leading-6 text-slate-600">
            Cotizamos automáticamente entre {CARRIERS.join(", ")} y asignamos la tarifa más conveniente para cada
            pedido.
          </p>
        </div>
        <div className="rounded-2xl border border-slate-200 p-6">
          <Clock className="size-6 text-ari-marino" />
          <h2 className="mt-3 font-black">Tiempos de entrega</h2>
          <p className="mt-2 text-sm leading-6 text-slate-600">
            Varían según la transportadora asignada y tu ciudad — una vez despachado tu pedido te compartimos el
            número de guía para hacerle seguimiento.
          </p>
        </div>
        <div className="rounded-2xl border border-slate-200 p-6">
          <MapPinned className="size-6 text-ari-marino" />
          <h2 className="mt-3 font-black">Cobertura</h2>
          <p className="mt-2 text-sm leading-6 text-slate-600">
            Envíos a todo el territorio nacional colombiano desde nuestra bodega en Santiago de Cali, Valle del Cauca
          </p>
        </div>
      </div>

      <p className="mt-10 text-sm text-slate-500">
        ¿Tenés dudas puntuales sobre un pedido? Escribinos por{" "}
        <a href="/contacto" className="font-bold text-ari-marino hover:underline">
          nuestros canales de contacto
        </a>
        .
      </p>
    </section>
  );
}