// 228 FILMS · Page Contact / Cadrage en cinq questions
// Section rendue sur /#contact : kicker + h2 + form 5 questions → mailto compose.
// Stub V1 : on construit un mailto avec subject + body pré-remplis.
// Phase 2 : remplacer par POST vers workflow n8n / Klaviyo si nécessaire.

function ContactCadrage() {
  const tr = useTr();
  const { isMobile } = useViewport();
  const [form, setForm] = React.useState({
    nom: '', email: '',
    q1: '', q2: '', q3: '', q4: '', q5: '',
  });
  const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const buildMailto = () => {
    const subject = encodeURIComponent('Cadrage 228 FILMS · ' + (form.nom || 'nouvelle demande'));
    const lines = [
      `Nom : ${form.nom}`,
      `Courriel : ${form.email}`,
      ``,
      `1. Quel est le projet ?`,
      form.q1,
      ``,
      `2. Quand et où ?`,
      form.q2,
      ``,
      `3. Pour quel usage final ?`,
      form.q3,
      ``,
      `4. Quel budget envisagé ?`,
      form.q4,
      ``,
      `5. Quelque chose à savoir ?`,
      form.q5,
    ];
    return `mailto:info@228films.com?subject=${subject}&body=${encodeURIComponent(lines.join('\n'))}`;
  };

  return (
    <section id="contact" style={{
      position: 'relative',
      paddingTop: isMobile ? 100 : 140, paddingBottom: isMobile ? 80 : 140,
      background: TOK.ivory,
    }}>
      <Container>
        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr',
          gap: isMobile ? 40 : 80, alignItems: 'start',
        }}>
          <div>
            <Reveal>
              <Kicker style={{ marginBottom: 22 }}>{tr({ fr: 'Cadrage', en: 'Briefing' })}</Kicker>
              <h2 style={h2Style}>
                {tr({
                  fr: 'Nous cadrons\nvotre projet\nen cinq questions,\npour vous donner\nun estimé sous 24 heures.',
                  en: 'We frame your project\nin five questions,\nto give you an estimate\nwithin 24 hours.',
                }).split('\n').map((line, i) => <div key={i}>{line}</div>)}
              </h2>
            </Reveal>
            <Reveal delay={2}>
              <p style={{ ...leadStyle, marginTop: 32, maxWidth: 480 }}>
                {tr({
                  fr: 'Nous lisons chaque demande nous-mêmes, pour vous revenir avec un estimé clair sous 24 heures ouvrables.',
                  en: 'We read each request ourselves, to come back to you with a clear estimate within 24 business hours.',
                })}
              </p>
            </Reveal>
          </div>

          {/* Form */}
          <Reveal delay={2}>
            <form action={buildMailto()} method="post" target="_blank" style={{
              background: TOK.paper, border: `1px solid ${TOK.ink10}`,
              padding: 36, position: 'relative',
              display: 'flex', flexDirection: 'column', gap: 20,
            }}>
              <div style={{ position: 'absolute', top: 0, right: 0, width: 80, height: 80, pointerEvents: 'none' }}>
                <div style={{ position: 'absolute', top: 0, right: 0, width: 14, height: 1, background: TOK.bronze }} />
                <div style={{ position: 'absolute', top: 0, right: 0, width: 1, height: 14, background: TOK.bronze }} />
              </div>

              <Kicker style={{ marginBottom: 8 }}>{tr({ fr: 'CADRAGE EN CINQ QUESTIONS', en: 'BRIEFING IN FIVE QUESTIONS' })}</Kicker>

              <FieldRow label={{ fr: 'NOM', en: 'NAME' }}>
                <input value={form.nom} onChange={upd('nom')} style={inputStyle} required />
              </FieldRow>

              <FieldRow label={{ fr: 'COURRIEL', en: 'EMAIL' }}>
                <input type="email" value={form.email} onChange={upd('email')} style={inputStyle} required />
              </FieldRow>

              <FieldRow label={{ fr: '1. QUEL EST LE PROJET ?', en: '1. WHAT IS THE PROJECT?' }}>
                <textarea rows={2} value={form.q1} onChange={upd('q1')} style={inputStyle} />
              </FieldRow>

              <FieldRow label={{ fr: '2. QUAND ET OÙ ?', en: '2. WHEN AND WHERE?' }}>
                <input value={form.q2} onChange={upd('q2')} style={inputStyle} />
              </FieldRow>

              <FieldRow label={{ fr: '3. POUR QUEL USAGE FINAL ?', en: '3. FOR WHAT FINAL USE?' }}>
                <input value={form.q3} onChange={upd('q3')} style={inputStyle} />
              </FieldRow>

              <FieldRow label={{ fr: '4. QUEL BUDGET ENVISAGÉ ?', en: '4. WHAT BUDGET RANGE?' }}>
                <input value={form.q4} onChange={upd('q4')} style={inputStyle} />
              </FieldRow>

              <FieldRow label={{ fr: '5. QUELQUE CHOSE À SAVOIR ?', en: '5. ANYTHING ELSE TO KNOW?' }}>
                <textarea rows={2} value={form.q5} onChange={upd('q5')} style={inputStyle} />
              </FieldRow>

              <a href={buildMailto()}
                style={{
                  marginTop: 6,
                  background: TOK.ink, color: TOK.ivory,
                  padding: '15px 28px', borderRadius: 999,
                  fontFamily: TOK.sans, fontSize: 15, fontWeight: 500,
                  textAlign: 'center', textDecoration: 'none',
                  display: 'inline-flex', alignItems: 'center', gap: 12,
                  alignSelf: 'flex-start',
                }}>
                {tr({ fr: 'Demander une soumission', en: 'Request a quote' })}
                <span style={{ color: TOK.aurum }}>→</span>
              </a>
              <p style={{
                margin: 0, fontFamily: TOK.sans, fontSize: 12,
                color: TOK.ink55, lineHeight: 1.5,
              }}>
                {tr({
                  fr: 'Votre messagerie s\'ouvre avec la demande pré-remplie. Vous relisez avant l\'envoi.',
                  en: 'Your mail client opens with the request pre-filled. You review before sending.',
                })}
              </p>
            </form>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

function FieldRow({ label, children }) {
  const tr = useTr();
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{
        fontFamily: TOK.mono, fontSize: 10, letterSpacing: '.18em',
        color: TOK.ink55, textTransform: 'uppercase',
      }}>{tr(label)}</span>
      {children}
    </label>
  );
}

const inputStyle = {
  all: 'unset',
  fontFamily: 'inherit', fontSize: 15, color: 'var(--fg)',
  padding: '10px 0',
  borderBottom: `1px solid var(--fg-22)`,
  width: '100%',
};

Object.assign(window, { ContactCadrage });