import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { IconMapPin, IconPhone, IconMail } from "@tabler/icons-react";

import { hasLocale } from "@/app/[lang]/dictionaries";
import { buildPageMetadata } from "@/lib/seo/pages";

import { ContactForm } from "./_components/contact-form";

/*
 * Single source of truth for the business contact details shown on this page.
 * These values are locale-invariant (the same address/phone/email is rendered
 * for every language); only the surrounding labels are translated below.
 * TODO: replace with real business details before launch.
 */
const CONTACT_INFO = {
  address: ["SEO Insight", "Paris, France"],
  phone: { label: "+33 1 23 45 67 89", href: "tel:+33123456789" },
  email: {
    label: "hello@seoinsight.app",
    href: "mailto:hello@seoinsight.app",
  },
} as const;

export async function generateMetadata({
  params,
}: PageProps<"/[lang]/contact">): Promise<Metadata> {
  const { lang } = await params;
  return buildPageMetadata("/contact", lang);
}

export default async function ContactPage({
  params,
}: PageProps<"/[lang]/contact">) {
  const { lang } = await params;
  if (!hasLocale(lang)) notFound();

  /* Locale-selected copy. Contact details live in CONTACT_INFO (same across locales). */
  const content =
    lang === "fr"
      ? {
          title: "Entrons en",
          titleAccent: "contact.",
          intro:
            "Parlez-nous de votre site WordPress et des mots-clés sur lesquels vous voulez vous positionner. Réservez un audit gratuit ou dites-nous simplement bonjour. Nous répondons sous un jour ouvré.",
          srAddress: "Adresse",
          srPhone: "Téléphone",
          srEmail: "E-mail",
          form: {
            firstNameLabel: "Prénom",
            lastNameLabel: "Nom",
            emailLabel: "E-mail",
            phoneLabel: "Numéro de téléphone",
            phoneOptional: "(facultatif)",
            messageLabel: "Message",
            firstNameRequired: "Le prénom est requis",
            lastNameRequired: "Le nom est requis",
            emailRequired: "L'e-mail est requis",
            emailInvalid: "Saisissez un e-mail valide",
            phoneInvalid: "Saisissez un numéro de téléphone valide",
            messageMin:
              "Donnez-nous un peu plus de détails (10 caractères min.)",
            submitError:
              "Une erreur s'est produite lors de l'envoi de votre message. Veuillez réessayer.",
            networkError:
              "Impossible de joindre le serveur. Vérifiez votre connexion et réessayez.",
            successTitle: "Message envoyé",
            successBody:
              "Merci de nous avoir contactés. Nous vous répondrons sous un jour ouvré.",
            sendAnother: "Envoyer un autre message",
            submit: "Envoyer le message",
          },
        }
      : {
          title: "Get in",
          titleAccent: "touch.",
          intro:
            "Tell us about your WordPress site and what you want to rank for. Book a free audit or just say hello. We reply within one business day.",
          srAddress: "Address",
          srPhone: "Telephone",
          srEmail: "Email",
          form: {
            firstNameLabel: "First name",
            lastNameLabel: "Last name",
            emailLabel: "Email",
            phoneLabel: "Phone number",
            phoneOptional: "(optional)",
            messageLabel: "Message",
            firstNameRequired: "First name is required",
            lastNameRequired: "Last name is required",
            emailRequired: "Email is required",
            emailInvalid: "Enter a valid email",
            phoneInvalid: "Enter a valid phone number",
            messageMin: "Tell us a bit more (10+ characters)",
            submitError:
              "Something went wrong while sending your message. Please try again.",
            networkError:
              "We couldn't reach the server. Please check your connection and try again.",
            successTitle: "Message sent",
            successBody:
              "Thanks for reaching out. We'll get back to you within one business day.",
            sendAnother: "Send another message",
            submit: "Send message",
          },
        };

  return (
    <div className="bg-background relative isolate">
      <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
        {/* Left: intro + contact details (with decorative background) */}
        <div className="relative px-6 pt-24 pb-20 sm:pt-32 lg:static lg:px-8 lg:py-48">
          <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
            <div className="border-hairline bg-surface absolute inset-y-0 left-0 -z-10 w-full overflow-hidden border-r lg:w-1/2">
              <svg
                aria-hidden="true"
                className="stroke-ink-4/15 absolute inset-0 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)]"
              >
                <defs>
                  <pattern
                    x="100%"
                    y={-1}
                    id="contact-grid"
                    width={200}
                    height={200}
                    patternUnits="userSpaceOnUse"
                  >
                    <path d="M130 200V.5M.5 .5H200" fill="none" />
                  </pattern>
                </defs>
                <rect
                  fill="url(#contact-grid)"
                  width="100%"
                  height="100%"
                  strokeWidth={0}
                />
              </svg>
              <div
                aria-hidden="true"
                className="absolute top-[calc(100%-13rem)] -left-56 block transform-gpu blur-3xl lg:top-[calc(50%-7rem)] lg:left-[max(-14rem,calc(100%-59rem))]"
              >
                <div
                  style={{
                    clipPath:
                      "polygon(74.1% 56.1%, 100% 38.6%, 97.5% 73.3%, 85.5% 100%, 80.7% 98.2%, 72.5% 67.7%, 60.2% 37.8%, 52.4% 32.2%, 47.5% 41.9%, 45.2% 65.8%, 27.5% 23.5%, 0.1% 35.4%, 17.9% 0.1%, 27.6% 23.5%, 76.1% 2.6%, 74.1% 56.1%)",
                  }}
                  className="from-brand-blue to-brand-orange aspect-[1155/678] w-[72rem] bg-gradient-to-br opacity-20"
                />
              </div>
            </div>
            <h1 className="text-ink-1 text-4xl font-semibold tracking-tight text-pretty sm:text-5xl">
              {content.title}{" "}
              <span className="text-gradient-brand">{content.titleAccent}</span>
            </h1>
            <p className="text-ink-3 mt-6 text-lg/8">{content.intro}</p>
            <dl className="text-ink-2 mt-10 space-y-4 text-base/7">
              <div className="flex gap-x-4">
                <dt className="flex-none">
                  <span className="sr-only">{content.srAddress}</span>
                  <IconMapPin
                    aria-hidden="true"
                    className="text-ink-4 h-7 w-6"
                  />
                </dt>
                <dd>
                  {CONTACT_INFO.address.map((line, i) => (
                    <span key={line}>
                      {line}
                      {i < CONTACT_INFO.address.length - 1 && <br />}
                    </span>
                  ))}
                </dd>
              </div>
              <div className="flex gap-x-4">
                <dt className="flex-none">
                  <span className="sr-only">{content.srPhone}</span>
                  <IconPhone
                    aria-hidden="true"
                    className="text-ink-4 h-7 w-6"
                  />
                </dt>
                <dd>
                  <a
                    href={CONTACT_INFO.phone.href}
                    className="hover:text-ink-1 transition-colors"
                  >
                    {CONTACT_INFO.phone.label}
                  </a>
                </dd>
              </div>
              <div className="flex gap-x-4">
                <dt className="flex-none">
                  <span className="sr-only">{content.srEmail}</span>
                  <IconMail aria-hidden="true" className="text-ink-4 h-7 w-6" />
                </dt>
                <dd>
                  <a
                    href={CONTACT_INFO.email.href}
                    className="hover:text-ink-1 transition-colors"
                  >
                    {CONTACT_INFO.email.label}
                  </a>
                </dd>
              </div>
            </dl>
          </div>
        </div>

        {/* Right: form */}
        <div className="px-6 pt-20 pb-24 sm:pb-32 lg:px-8 lg:py-48">
          <div className="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
            <ContactForm dict={content.form} />
          </div>
        </div>
      </div>
    </div>
  );
}