"use client";

import { Mail } from "lucide-react";
import { LegalPageLayout } from "@/components/legal/legal-page-layout";
import { useLanguage } from "@/lib/i18n/context";

const CONTENT = {
  en: {
    title: "Contact",
    lastUpdated: "",
    draftNotice: "Replace [support email] below with your real support inbox before public launch.",
    body: (
      <>
        <p>We&apos;d like to hear from you. Reach us through any of the channels below.</p>

        <h2>General & support inquiries</h2>
        <p className="flex items-center gap-2">
          <Mail className="size-4 shrink-0" />
          <a href="mailto:support@toknext.com" className="text-foreground underline underline-offset-2">
            support@toknext.com
          </a>
        </p>
        <p>We aim to respond within 1–2 business days.</p>

        <h2>Billing questions</h2>
        <p>
          For billing or subscription questions, use the same support address above, or manage your
          subscription directly from{" "}
          <a href="/dashboard/billing" className="text-foreground underline underline-offset-2">
            your Billing page
          </a>
          .
        </p>
      </>
    ),
  },
  es: {
    title: "Contacto",
    lastUpdated: "",
    draftNotice: "Reemplaza [correo de soporte] abajo con tu bandeja de soporte real antes del lanzamiento público.",
    body: (
      <>
        <p>Nos gustaría saber de ti. Contáctanos por cualquiera de los canales abajo.</p>

        <h2>Consultas generales y de soporte</h2>
        <p className="flex items-center gap-2">
          <Mail className="size-4 shrink-0" />
          <a href="mailto:support@toknext.com" className="text-foreground underline underline-offset-2">
            support@toknext.com
          </a>
        </p>
        <p>Buscamos responder dentro de 1 a 2 días hábiles.</p>

        <h2>Preguntas de facturación</h2>
        <p>
          Para preguntas de facturación o suscripción, usa el mismo correo de soporte arriba, o
          gestiona tu suscripción directamente desde{" "}
          <a href="/dashboard/billing" className="text-foreground underline underline-offset-2">
            tu página de Facturación
          </a>
          .
        </p>
      </>
    ),
  },
};

export function ContactContent() {
  const { locale } = useLanguage();
  const c = CONTENT[locale];
  return (
    <LegalPageLayout title={c.title} lastUpdated={c.lastUpdated} draftNotice={c.draftNotice}>
      {c.body}
    </LegalPageLayout>
  );
}