import type { Metadata } from "next";
import { MessageCircle, PackageOpen, ShieldCheck, Truck } from "lucide-react";
import { Button } from "@/components/ui/button";

export const metadata: Metadata = { title: "Cambios | ARI Shopping" };

const WHATSAPP_URL = "https://wa.me/573016138155";

export default function CambiosPage() {
  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">Cambios</h1>
      <p className="mt-5 text-lg leading-8 text-slate-600">
        Si tu pedido no es lo que esperabas, te ayudamos a cambiarlo.
      </p>

      <div className="mt-10 grid gap-6 sm:grid-cols-2">
        <div className="rounded-2xl border border-slate-200 p-6">
          <PackageOpen className="size-6 text-ari-marino" />
          <h2 className="mt-3 font-black">5 días hábiles</h2>
          <p className="mt-2 text-sm leading-6 text-slate-600">
            Tenés 5 días hábiles desde que recibís tu pedido para solicitar un cambio.
          </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">Envío de vuelta sin costo</h2>
          <p className="mt-2 text-sm leading-6 text-slate-600">
            ARI Shopping asume el costo del envío de vuelta del producto — no tenés que pagar nada extra.
          </p>
        </div>
        <div className="rounded-2xl border border-slate-200 p-6">
          <ShieldCheck className="size-6 text-ari-marino" />
          <h2 className="mt-3 font-black">Condiciones</h2>
          <p className="mt-2 text-sm leading-6 text-slate-600">
            El producto debe estar sin usar, con su empaque y etiquetas originales.
          </p>
        </div>
        <div className="rounded-2xl border border-slate-200 p-6">
          <MessageCircle className="size-6 text-ari-marino" />
          <h2 className="mt-3 font-black">¿Cómo lo pido?</h2>
          <p className="mt-2 text-sm leading-6 text-slate-600">
            Escribinos por WhatsApp con tu número de pedido y coordinamos la recolección y el cambio.
          </p>
        </div>
      </div>

      <Button asChild variant="primary" size="lg" className="mt-10">
        <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
          <MessageCircle className="size-5" />
          Solicitar un cambio por WhatsApp
        </a>
      </Button>
    </section>
  );
}