"use client";

import { useState } from "react";
import { useLocale } from "@/i18n/LocaleProvider";
import { CONTACT } from "@/content/legal";
import { WhatsAppIcon } from "@/components/icons";

/**
 * Contact page. The marketing site has no backend, so the form composes a mailto: link (opening the
 * visitor's own mail client) rather than posting anywhere. Direct contact details are shown too.
 */
export default function ContactPage() {
  const { t, locale } = useLocale();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const mailto = () => {
    const subject = encodeURIComponent(`${t("contact.subjectPrefix")} ${name}`.trim());
    const body = encodeURIComponent(`${message}\n\n${name}\n${email}`);
    window.location.href = `mailto:${CONTACT.email}?subject=${subject}&body=${body}`;
  };

  return (
    <div className="mx-auto max-w-5xl px-5 py-14 md:py-20">
      <h1 className="text-3xl font-extrabold tracking-tight md:text-4xl">{t("contact.title")}</h1>

      <div className="mt-10 grid gap-10 md:grid-cols-2">
        {/* Details */}
        <div className="space-y-6">
          <a
            href={`https://wa.me/${CONTACT.whatsapp}`}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2.5 rounded-full bg-[#25D366] px-6 py-3 font-semibold text-white transition hover:opacity-90"
          >
            <WhatsAppIcon className="h-6 w-6" />
            {t("contact.whatsapp")}
          </a>
          <Detail label={t("contact.email")}>
            <a href={`mailto:${CONTACT.email}`} className="text-brand hover:underline">
              {CONTACT.email}
            </a>
          </Detail>
          <Detail label={t("contact.phone")}>
            <a href={`tel:${CONTACT.phone.replace(/\s/g, "")}`} className="hover:underline">
              <span dir="ltr">{CONTACT.phone}</span>
            </a>
          </Detail>
          <Detail label={t("contact.address")}>{CONTACT.address[locale]}</Detail>
          <Detail label={t("contact.hours")}>{CONTACT.hours[locale]}</Detail>
        </div>

        {/* Form (composes an email; no server) */}
        <form
          onSubmit={(e) => {
            e.preventDefault();
            mailto();
          }}
          className="rounded-2xl border border-line bg-surface p-6"
        >
          <div className="space-y-4">
            <label className="block">
              <span className="mb-1.5 block text-sm font-medium">{t("contact.name")}</span>
              <input
                required
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="w-full rounded-lg border border-line bg-background px-3 py-2.5 text-sm outline-none focus:border-brand"
              />
            </label>
            <label className="block">
              <span className="mb-1.5 block text-sm font-medium">{t("contact.emailLabel")}</span>
              <input
                required
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full rounded-lg border border-line bg-background px-3 py-2.5 text-sm outline-none focus:border-brand"
              />
            </label>
            <label className="block">
              <span className="mb-1.5 block text-sm font-medium">{t("contact.message")}</span>
              <textarea
                required
                rows={5}
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                className="w-full resize-y rounded-lg border border-line bg-background px-3 py-2.5 text-sm outline-none focus:border-brand"
              />
            </label>
            <button
              type="submit"
              disabled={!name || !email || !message}
              className="btn-primary w-full disabled:opacity-50"
            >
              {t("contact.send")}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function Detail({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <div className="text-sm font-semibold text-muted">{label}</div>
      <div className="mt-1 text-foreground/90">{children}</div>
    </div>
  );
}