---
import BaseLayout from "@layouts/BaseLayout.astro";
import Icon from "@components/Icon.astro";
import type { Locale } from "@/types";
import { t, DEMO_URL } from "@/i18n";

interface Props {
  locale: Locale;
}

const { locale } = Astro.props;
const i = t(locale);
const c = i.contact;
---

<BaseLayout title={i.meta.contact.title} description={i.meta.contact.description} locale={locale}>
  <!-- Hero -->
  <section class="section-padding bg-gradient-to-br from-primary-50 via-white to-accent-50">
    <div class="container-narrow mx-auto text-center max-w-3xl">
      <h1 class="text-4xl sm:text-5xl font-bold">
        {c.heroTitle} <span class="text-primary-600">{c.heroTitleHighlight}</span>
      </h1>
      <p class="mt-6 text-lg text-dark-500 leading-relaxed">{c.heroSubtitle}</p>
    </div>
  </section>

  <!-- Contact Section -->
  <section class="section-padding bg-white">
    <div class="container-narrow mx-auto">
      <div class="grid grid-cols-1 lg:grid-cols-5 gap-12">
        <div class="lg:col-span-3">
          <h2 class="text-2xl font-bold mb-6">{c.formTitle}</h2>
          <form id="contact-form" class="space-y-6" novalidate
            data-v-firstname={c.validation.firstName}
            data-v-lastname={c.validation.lastName}
            data-v-email={c.validation.email}
            data-v-message={c.validation.message}
            data-success={c.success}
            data-error={c.error}
            data-sending={c.sending}
            data-submit={c.submit}
          >
            <input type="text" name="website" class="hidden" tabindex="-1" autocomplete="off" aria-hidden="true" />

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div>
                <label for="firstName" class="block text-sm font-medium text-dark-700 mb-2">
                  {c.firstName} <span class="text-red-500" aria-label={c.required}>*</span>
                </label>
                <input type="text" id="firstName" name="firstName" required minlength="2" maxlength="100" class="input-field" placeholder={c.firstName} autocomplete="given-name" />
              </div>
              <div>
                <label for="lastName" class="block text-sm font-medium text-dark-700 mb-2">
                  {c.lastName} <span class="text-red-500" aria-label={c.required}>*</span>
                </label>
                <input type="text" id="lastName" name="lastName" required minlength="2" maxlength="100" class="input-field" placeholder={c.lastName} autocomplete="family-name" />
              </div>
            </div>

            <div>
              <label for="email" class="block text-sm font-medium text-dark-700 mb-2">
                {c.email} <span class="text-red-500" aria-label={c.required}>*</span>
              </label>
              <input type="email" id="email" name="email" required maxlength="254" class="input-field" placeholder={locale === "fr" ? "vous@entreprise.fr" : "you@company.com"} autocomplete="email" />
            </div>

            <div>
              <label for="company" class="block text-sm font-medium text-dark-700 mb-2">{c.company}</label>
              <input type="text" id="company" name="company" maxlength="200" class="input-field" placeholder={c.company} autocomplete="organization" />
            </div>

            <div>
              <label for="phone" class="block text-sm font-medium text-dark-700 mb-2">{c.phone}</label>
              <input type="tel" id="phone" name="phone" maxlength="20" class="input-field" placeholder="06 12 34 56 78" autocomplete="tel" />
            </div>

            <div>
              <label for="message" class="block text-sm font-medium text-dark-700 mb-2">
                {c.message} <span class="text-red-500" aria-label={c.required}>*</span>
              </label>
              <textarea id="message" name="message" required minlength="10" maxlength="2000" rows="5" class="input-field resize-y" placeholder={locale === "fr" ? "Décrivez votre activité et vos besoins..." : "Describe your business and needs..."}></textarea>
            </div>

            <div>
              <button type="submit" class="btn-primary w-full sm:w-auto" id="submit-btn">
                <Icon name="send" size={18} class="mr-2" />
                {c.submit}
              </button>
            </div>

            <div id="form-feedback" class="hidden" role="status" aria-live="polite"></div>
          </form>
        </div>

        <div class="lg:col-span-2">
          <h2 class="text-2xl font-bold mb-6">{c.coordTitle}</h2>
          <div class="space-y-6">
            <div class="flex gap-4">
              <div class="w-10 h-10 rounded-lg bg-primary-100 text-primary-600 flex items-center justify-center shrink-0">
                <Icon name="globe" size={20} />
              </div>
              <div>
                <div class="text-sm font-medium text-dark-700">{c.websiteLabel}</div>
                <a href="https://taaazzz-prog.fr" class="text-primary-600 hover:text-primary-700" rel="noopener noreferrer" target="_blank">taaazzz-prog.fr</a>
              </div>
            </div>

            <div class="flex gap-4">
              <div class="w-10 h-10 rounded-lg bg-primary-100 text-primary-600 flex items-center justify-center shrink-0">
                <Icon name="map-pin" size={20} />
              </div>
              <div>
                <div class="text-sm font-medium text-dark-700">{c.publisherLabel}</div>
                <p class="text-dark-500">Bruno Guns — Entreprise Individuelle<br />Taaazzz-prog</p>
              </div>
            </div>

            <div class="flex gap-4">
              <div class="w-10 h-10 rounded-lg bg-primary-100 text-primary-600 flex items-center justify-center shrink-0">
                <Icon name="clock" size={20} />
              </div>
              <div>
                <div class="text-sm font-medium text-dark-700">{c.hoursLabel}</div>
                <p class="text-dark-500">{c.hoursContent}</p>
              </div>
            </div>
          </div>

          <div class="mt-8 p-6 bg-primary-50 rounded-xl border border-primary-100">
            <h3 class="font-semibold text-dark-900 mb-2">{c.demoTitle}</h3>
            <p class="text-sm text-dark-500 leading-relaxed">{c.demoDescription}</p>
            <a href={DEMO_URL} class="mt-4 inline-flex items-center text-sm font-semibold text-primary-600 hover:text-primary-700" target="_blank" rel="noopener noreferrer">
              {c.demoCta}
              <Icon name="arrow-right" size={16} class="ml-1" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</BaseLayout>

<script>
  const form = document.getElementById("contact-form") as HTMLFormElement | null;
  const feedback = document.getElementById("form-feedback");
  const submitBtn = document.getElementById("submit-btn") as HTMLButtonElement | null;

  function sanitize(value: string): string {
    return value.trim().slice(0, 2000);
  }

  function isValidEmail(email: string): boolean {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }

  function showFeedback(message: string, type: "success" | "error"): void {
    if (!feedback) return;
    feedback.textContent = message;
    feedback.className = type === "success"
      ? "p-4 rounded-lg bg-green-50 text-green-700 border border-green-200"
      : "p-4 rounded-lg bg-red-50 text-red-700 border border-red-200";
    feedback.classList.remove("hidden");
  }

  form?.addEventListener("submit", async (e: Event) => {
    e.preventDefault();
    if (!form || !submitBtn) return;

    const data = new FormData(form);
    const vFirstName = form.dataset.vFirstname ?? "";
    const vLastName = form.dataset.vLastname ?? "";
    const vEmail = form.dataset.vEmail ?? "";
    const vMessage = form.dataset.vMessage ?? "";
    const successMsg = form.dataset.success ?? "";
    const errorMsg = form.dataset.error ?? "Une erreur est survenue.";
    const sendingMsg = form.dataset.sending ?? "";
    const submitMsg = form.dataset.submit ?? "";

    if (data.get("website")) return;

    const firstName = sanitize(String(data.get("firstName") ?? ""));
    const lastName = sanitize(String(data.get("lastName") ?? ""));
    const email = sanitize(String(data.get("email") ?? ""));
    const message = sanitize(String(data.get("message") ?? ""));

    if (!firstName || firstName.length < 2) { showFeedback(vFirstName, "error"); return; }
    if (!lastName || lastName.length < 2) { showFeedback(vLastName, "error"); return; }
    if (!email || !isValidEmail(email)) { showFeedback(vEmail, "error"); return; }
    if (!message || message.length < 10) { showFeedback(vMessage, "error"); return; }

    submitBtn.disabled = true;
    submitBtn.textContent = sendingMsg;

    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          firstName,
          lastName,
          email,
          company: sanitize(String(data.get("company") ?? "")),
          phone: sanitize(String(data.get("phone") ?? "")),
          message,
          website: String(data.get("website") ?? ""),
        }),
      });

      if (res.ok) {
        showFeedback(successMsg, "success");
        form.reset();
      } else {
        const json = await res.json().catch(() => ({}));
        showFeedback(json.error || errorMsg, "error");
      }
    } catch {
      showFeedback(errorMsg, "error");
    } finally {
      submitBtn.disabled = false;
      submitBtn.textContent = submitMsg;
    }
  });
</script>