import type { Metadata } from "next";
import { Mail, Clock, Sparkles } from "@/components/ui/icons";
import { Badge } from "@/components/ui/badge";
import { Reveal } from "@/components/ui/reveal";
import { ContactForm } from "./contact-form";

export const metadata: Metadata = {
  title: "Contact",
  description:
    "Parlons de votre projet. Décrivez votre besoin en quelques lignes, on revient vers vous rapidement avec un interlocuteur humain.",
};

export default function ContactPage() {
  return (
    <div className="relative overflow-hidden">

      {/* Hero compact : pas de mise en scène solennelle sur un form contact
          d'agence à 49-99 euros. Le formulaire doit être au-dessus du fold. */}
      <section className="relative z-10 mx-auto max-w-4xl px-4 sm:px-6 md:px-10 pt-12 pb-6">
        <Reveal>
          <Badge tone="muted">Parlons de votre projet</Badge>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="font-editorial mt-4 text-2xl md:text-4xl font-medium text-text leading-tight">
            Dites-nous tout, on vous répond rapidement.
          </h1>
        </Reveal>
        <Reveal delay={240}>
          <p className="mt-3 text-sm md:text-base text-text-muted max-w-2xl leading-relaxed">
            Un site à refaire, une idée à concrétiser, une question avant de vous lancer. Décrivez votre besoin
            en quelques lignes, pas de standardiste, pas de formulaire à 18 champs.
          </p>
        </Reveal>
      </section>

      {/* Form + sidebar */}
      <section className="relative z-10 mx-auto max-w-6xl px-4 sm:px-6 md:px-10 pb-20">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Formulaire : client component avec useActionState + Server Action.
              Validation Zod, honeypot anti-bot, rate limit IP, envoi 2 emails
              (notification interne + confirmation prospect) via lib/email. */}
          <Reveal delay={400} className="lg:col-span-2">
            <ContactForm />
          </Reveal>

          {/* Sidebar coordonnées */}
          <Reveal delay={520}>
            <aside className="space-y-4">
            <div className="panel p-6">
              <div className="flex items-center gap-2 text-accent">
                <Clock className="size-4" />
                <span className="text-micro uppercase tracking-wider font-semibold">Délai de réponse</span>
              </div>
              <p className="mt-3 text-sm text-text-muted leading-relaxed">
                Un interlocuteur humain vous répond rapidement, du lundi au vendredi.
              </p>
            </div>

            <div className="panel p-6">
              <ContactRow
                icon={Mail}
                label="E-mail"
                value="contact@agence-novelia.fr"
                href="mailto:contact@agence-novelia.fr"
              />
            </div>

            <div className="panel p-6 border-accent/20 bg-accent/[0.03]">
              <Sparkles className="size-5 text-accent" />
              <h2 className="mt-3 text-sm font-semibold text-text">Demander un aperçu personnalisé</h2>
              <p className="mt-1.5 text-xs text-text-muted leading-relaxed">
                Donnez-nous le nom de votre activité et 2-3 phrases de contexte, on vous envoie une maquette
                de votre futur site sous 48 h, sans engagement.
              </p>
            </div>
            </aside>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function ContactRow({
  icon: Icon,
  label,
  value,
  href,
}: {
  icon: typeof Mail;
  label: string;
  value: string;
  href?: string;
}) {
  const content = (
    <div className="flex items-start gap-3">
      <span className="size-9 shrink-0 rounded-md bg-stone-900/[0.03] border border-border flex items-center justify-center text-text-muted">
        <Icon className="size-4" />
      </span>
      <div>
        <div className="text-micro uppercase tracking-wider text-text-faint">{label}</div>
        <div className="text-sm text-text mt-0.5">{value}</div>
      </div>
    </div>
  );
  if (href) {
    return (
      <a href={href} className="block hover:text-accent transition-colors">
        {content}
      </a>
    );
  }
  return content;
}