---
import Layout from '../layouts/Layout.astro';
import Header from '../components/Header.astro';
import Ticker from '../components/Ticker.astro';
import Footer from '../components/Footer.astro';
import AsciiSep from '../components/AsciiSep.astro';
import { getSiteSettings } from '../lib/directus';

const s = await getSiteSettings();
---
<Layout
  title={`Contact — ${s.studio_name}. Studio photo a ${s.city.charAt(0) + s.city.slice(1).toLowerCase()} (${s.region}).`}
  description={`Demande de devis ou prise de contact pour ${s.studio_name}. Mariage, portrait, reportage, evenementiel.`}
>
  <Header studio={s.studio_name} addr={`CONTACT / DEVIS / ${s.city} / ${s.country}`} />

  <main id="top">
    <section class="contact-hero">
      <p class="tag">[05] CONTACT.</p>
      <h1>{s.contact_title}</h1>
      <p class="contact-hero__sub" set:html={s.contact_body}></p>
    </section>

    <AsciiSep label="FORMULAIRE" />

    <section class="contact-form-wrap">
      <form id="contact-form" class="contact-form" novalidate>
        <p class="field field--full hp" aria-hidden="true">
          <label>Ne pas remplir
            <input type="text" name="website" tabindex="-1" autocomplete="off" />
          </label>
        </p>

        <p class="field">
          <label for="cf-name">NOM <span class="req">*</span></label>
          <input id="cf-name" name="name" type="text" required maxlength="120" autocomplete="name" />
        </p>

        <p class="field">
          <label for="cf-email">EMAIL <span class="req">*</span></label>
          <input id="cf-email" name="email" type="email" required maxlength="200" autocomplete="email" />
        </p>

        <p class="field">
          <label for="cf-shoot">TYPE DE SHOOT</label>
          <select id="cf-shoot" name="shoot_type">
            <option value="">— choisir —</option>
            <option value="mariage">Mariage</option>
            <option value="portrait-lifestyle">Portrait / Lifestyle</option>
            <option value="reportage-editorial">Reportage / Editorial</option>
            <option value="evenementiel">Evenementiel</option>
            <option value="autre">Autre</option>
          </select>
        </p>

        <p class="field">
          <label for="cf-date">DATE APPROX.</label>
          <input id="cf-date" name="date_estim" type="text" maxlength="120" placeholder="Ex: ETE 2027" />
        </p>

        <p class="field">
          <label for="cf-lieu">LIEU</label>
          <input id="cf-lieu" name="lieu" type="text" maxlength="200" placeholder="Ex: CANNES, PROVENCE..." />
        </p>

        <p class="field">
          <label for="cf-budget">BUDGET INDICATIF</label>
          <input id="cf-budget" name="budget" type="text" maxlength="120" placeholder="A DISCUTER" />
        </p>

        <p class="field field--full">
          <label for="cf-msg">MESSAGE <span class="req">*</span></label>
          <textarea id="cf-msg" name="message" required maxlength="4000" rows="7" placeholder="DECRIS TON PROJET EN QUELQUES LIGNES..."></textarea>
        </p>

        <div class="form-footer">
          <button type="submit" class="cta cta--big">[ ENVOYER &rarr; ]</button>
          <p class="form-hint">REPONSE SOUS 48H &middot; OU PAR MAIL : <a href={`mailto:${s.email}`}>{s.email.toUpperCase()}</a></p>
        </div>

        <p id="cf-status" class="cf-status" role="status" aria-live="polite"></p>
      </form>
    </section>

    <AsciiSep label="ADRESSE" />
    <section class="contact-addr">
      <p set:html={s.contact_addr}></p>
    </section>
  </main>

  <Ticker items={[
    `STUDIO ${s.studio_name.toUpperCase()}`,
    `EST. ${s.est_year}`,
    `${s.city} / ${s.country}`,
    'MARIAGE / PORTRAIT / REPORTAGE / EVENEMENT',
    `COUVERTURE ${s.region} + FRANCE`,
    'REPONSE < 48H',
  ]} />
  <Footer studio={s.studio_name} city={s.city} country={s.country} est={s.est_year} />
</Layout>

<script>
  const form = document.getElementById('contact-form') as HTMLFormElement | null;
  const statusEl = document.getElementById('cf-status') as HTMLParagraphElement | null;
  if (form && statusEl) {
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const btn = form.querySelector('button[type=submit]') as HTMLButtonElement | null;
      if (btn) { btn.disabled = true; btn.textContent = '[ ENVOI... ]'; }
      statusEl.className = 'cf-status';
      statusEl.textContent = '';
      const fd = new FormData(form);
      const payload: Record<string, string> = {};
      fd.forEach((v, k) => { if (typeof v === 'string') payload[k] = v; });
      try {
        const r = await fetch('/api/contact', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
        const j = await r.json() as { ok?: boolean; error?: string };
        if (j.ok) {
          form.reset();
          statusEl.className = 'cf-status cf-status--ok';
          statusEl.textContent = 'MESSAGE ENVOYE. REPONSE SOUS 48H.';
        } else {
          statusEl.className = 'cf-status cf-status--err';
          statusEl.textContent = `ERREUR : ${(j.error || 'INCONNU').toUpperCase()}. RETENTE OU ECRIS-NOUS PAR MAIL.`;
        }
      } catch {
        statusEl.className = 'cf-status cf-status--err';
        statusEl.textContent = 'ERREUR RESEAU. RETENTE PLUS TARD OU ECRIS-NOUS PAR MAIL.';
      } finally {
        if (btn) { btn.disabled = false; btn.textContent = '[ ENVOYER → ]'; }
      }
    });
  }
</script>

<style>
  .contact-hero {
    padding: 3rem 1.5rem 1.5rem;
  }
  .contact-hero .tag {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--ink-2);
    margin: 0 0 1rem;
  }
  .contact-hero h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }
  .contact-hero__sub {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 50rem;
    margin: 0;
  }

  .contact-form-wrap {
    padding: 2rem 1.5rem 3rem;
    border-bottom: 2px solid var(--ink);
  }
  .contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.75rem;
    max-width: 60rem;
  }
  .field { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
  .field--full { grid-column: span 2; }
  .field.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .field label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--ink-2);
    font-weight: 500;
  }
  .field .req { color: var(--accent); }
  .field input,
  .field select,
  .field textarea {
    font: inherit;
    font-family: var(--mono);
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    padding: 0.75rem 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 0;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
  }
  .field textarea { text-transform: none; min-height: 8rem; resize: vertical; }
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    border-color: var(--accent);
    background: var(--paper-elev);
  }
  .field input:user-invalid,
  .field textarea:user-invalid {
    border-color: var(--accent);
    border-width: 2px;
  }

  .form-footer {
    grid-column: span 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
  }
  .form-hint {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--ink-2);
  }
  .form-hint a { border-bottom: 1px solid var(--ink-2); }

  .cf-status {
    grid-column: span 2;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    border: 1px solid transparent;
    min-height: 1rem;
  }
  .cf-status:empty { display: none; }
  .cf-status--ok { border-color: var(--ink); background: var(--paper-elev); color: var(--ink); }
  .cf-status--err { border-color: var(--accent); color: var(--accent); }

  .contact-addr {
    padding: 2rem 1.5rem 4rem;
  }
  .contact-addr p {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    margin: 0;
  }

  @media (max-width: 720px) {
    .contact-form { grid-template-columns: 1fr; }
    .field--full { grid-column: span 1; }
    .form-footer { grid-column: span 1; }
    .cf-status { grid-column: span 1; }
  }
</style>