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

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

// Numero real confirmado en vivo (probando el boton "Confirmar por
// WhatsApp" del checkout con navegador real): mismo canal que ya usan
// los clientes para confirmar pedidos, consistencia a proposito.
const WHATSAPP_URL = "https://wa.me/573016138155";
// Correo corporativo nuevo (contacto@cruzcloud.net -> reenviado por
// Cloudflare Email Routing a la casilla real) -- ver nota de
// implementacion en ADR 0010 para el paso manual de DNS pendiente.
const CONTACT_EMAIL = "contacto@cruzcloud.net";

export default function ContactoPage() {
  return (
    <section className="mx-auto max-w-2xl px-4 py-14 text-center 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">Contacto</h1>
      <p className="mt-5 text-lg leading-8 text-slate-600">
        ¿Tenés una pregunta sobre tu pedido, un producto o un cambio? Escribinos, te respondemos lo antes posible.
      </p>

      <div className="mt-10 grid gap-4 sm:grid-cols-2">
        <a
          href={WHATSAPP_URL}
          target="_blank"
          rel="noopener noreferrer"
          className="flex flex-col items-center gap-3 rounded-2xl border border-slate-200 p-6 transition hover:border-ari-marino hover:bg-ari-marino/5"
        >
          <MessageCircle className="size-7 text-ari-marino" />
          <div>
            <p className="font-black">WhatsApp</p>
            <p className="mt-1 text-sm text-slate-500">+57 301 613 8155</p>
          </div>
        </a>
        <a
          href={`mailto:${CONTACT_EMAIL}`}
          className="flex flex-col items-center gap-3 rounded-2xl border border-slate-200 p-6 transition hover:border-ari-marino hover:bg-ari-marino/5"
        >
          <Mail className="size-7 text-ari-marino" />
          <div>
            <p className="font-black">Correo</p>
            <p className="mt-1 text-sm text-slate-500">{CONTACT_EMAIL}</p>
          </div>
        </a>
      </div>

      <div className="mt-10 flex items-center justify-center gap-2 text-sm text-slate-500">
        <MapPin className="size-4" />
        Despachamos desde Santiago de Cali, Colombia
      </div>

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