import { Mail, MapPin, Phone } from "lucide-react";
import Link from "next/link";

import { MotionFade } from "@/components/motion-fade";
import { resolveLocale } from "@/lib/site-data";

type ContactPageProps = {
  params: {
    locale: string;
  };
};

export default function ContactPage({ params: { locale } }: ContactPageProps) {
  const localeKey = resolveLocale(locale);

  const copy =
    localeKey === "de"
      ? {
          title: "Kontakt",
          intro: "Schreib uns kurz dein Ziel und wir melden uns zeitnah.",
          name: "Name",
          email: "E-Mail",
          message: "Nachricht",
          submit: "Senden",
          preview: "Success Seite ansehen",
          phone: "+49 30 123456",
          mail: "hello@moh-sass.dev",
          city: "Berlin, Germany",
        }
      : {
          title: "Contact",
          intro: "Share your goal and we will get back quickly.",
          name: "Name",
          email: "Email",
          message: "Message",
          submit: "Submit",
          preview: "Open success page",
          phone: "+49 30 123456",
          mail: "hello@moh-sass.dev",
          city: "Berlin, Germany",
        };

  return (
    <div className="mx-auto grid w-full max-w-6xl gap-6 px-4 py-10 sm:px-6 lg:grid-cols-2 lg:px-8 lg:py-14">
      <MotionFade>
        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
          <h1 className="text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
            {copy.title}
          </h1>
          <p className="mt-4 text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
            {copy.intro}
          </p>

          <ul className="mt-6 space-y-3 text-sm text-zinc-700 dark:text-zinc-200">
            <li className="inline-flex items-center gap-2">
              <Phone className="h-4 w-4" />
              {copy.phone}
            </li>
            <li className="inline-flex items-center gap-2">
              <Mail className="h-4 w-4" />
              {copy.mail}
            </li>
            <li className="inline-flex items-center gap-2">
              <MapPin className="h-4 w-4" />
              {copy.city}
            </li>
          </ul>
        </section>
      </MotionFade>

      <MotionFade delay={0.05}>
        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
          <form className="grid gap-4">
            <label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
              {copy.name}
              <input
                type="text"
                className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
                placeholder={copy.name}
              />
            </label>

            <label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
              {copy.email}
              <input
                type="email"
                className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
                placeholder={copy.email}
              />
            </label>

            <label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
              {copy.message}
              <textarea
                rows={5}
                className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
                placeholder={copy.message}
              />
            </label>

            <div className="flex flex-wrap gap-3">
              <button
                type="button"
                className="inline-flex rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
              >
                {copy.submit}
              </button>
              <Link
                href={`/${localeKey}/success`}
                className="inline-flex rounded-lg border border-zinc-300 px-4 py-2.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
              >
                {copy.preview}
              </Link>
            </div>
          </form>
        </section>
      </MotionFade>
    </div>
  );
}