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

import { MotionFade } from "@/components/motion-fade";
import { resolveLocale } from "@/lib/site-data";
import { Button } from "@/src/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/src/components/ui/card";
import { Input } from "@/src/components/ui/input";
import { Label } from "@/src/components/ui/label";
import { Textarea } from "@/src/components/ui/textarea";

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>
        <Card>
          <CardHeader>
            <CardTitle className="text-3xl sm:text-4xl">{copy.title}</CardTitle>
            <p className="text-base text-muted-foreground sm:text-lg">{copy.intro}</p>
          </CardHeader>
          <CardContent>
            <ul className="space-y-3 text-sm text-foreground/85">
              <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>
          </CardContent>
        </Card>
      </MotionFade>

      <MotionFade delay={0.05}>
        <Card>
          <CardContent className="pt-6">
            <form className="grid gap-4">
              <Label className="grid gap-2">
                {copy.name}
                <Input type="text" placeholder={copy.name} />
              </Label>

              <Label className="grid gap-2">
                {copy.email}
                <Input type="email" placeholder={copy.email} />
              </Label>

              <Label className="grid gap-2">
                {copy.message}
                <Textarea rows={5} placeholder={copy.message} />
              </Label>

              <div className="flex flex-wrap gap-3">
                <Button type="button">{copy.submit}</Button>
                <Button asChild variant="outline">
                  <Link href={`/${localeKey}/success`}>{copy.preview}</Link>
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </MotionFade>
    </div>
  );
}
