import type { Metadata } from "next";
import Link from "next/link";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";

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

// Solo preguntas cuya respuesta es un hecho real del storefront (ver
// ADR 0009/0010) -- nada de metodos de pago, plazos u opciones que no
// esten realmente implementados.
const FAQS: { question: string; answer: React.ReactNode }[] = [
  {
    question: "¿Qué métodos de pago aceptan?",
    answer: "Pagás por PSE, con transferencia directa desde tu banco. Podés pagar como persona natural o jurídica.",
  },
  {
    question: "¿A qué ciudades hacen envíos?",
    answer: "A todo el territorio nacional colombiano. El costo del envío se calcula automáticamente según tu dirección y lo ves en el checkout antes de pagar.",
  },
  {
    question: "¿Cuánto tarda en llegar mi pedido?",
    answer: (
      <>
        Depende de la transportadora asignada y tu ciudad — más detalle en{" "}
        <Link href="/envios" className="font-bold text-ari-marino hover:underline">
          Envíos
        </Link>
        .
      </>
    ),
  },
  {
    question: "¿Puedo cambiar un producto que no me sirvió?",
    answer: (
      <>
        Sí, tenés 5 días hábiles desde que lo recibís y nosotros asumimos el envío de vuelta — más detalle en{" "}
        <Link href="/cambios" className="font-bold text-ari-marino hover:underline">
          Cambios
        </Link>
        .
      </>
    ),
  },
  {
    question: "Tengo otra pregunta, ¿cómo los contacto?",
    answer: (
      <>
        Escribinos por WhatsApp o correo desde{" "}
        <Link href="/contacto" className="font-bold text-ari-marino hover:underline">
          Contacto
        </Link>
        , te respondemos lo antes posible.
      </>
    ),
  },
];

export default function PreguntasFrecuentesPage() {
  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">Preguntas frecuentes</h1>
      <Accordion type="single" collapsible className="mt-10">
        {FAQS.map((faq) => (
          <AccordionItem key={faq.question} value={faq.question}>
            <AccordionTrigger>{faq.question}</AccordionTrigger>
            <AccordionContent>{faq.answer}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </section>
  );
}