// inquiry.jsx — Two inquiry form variations

function InquiryPage({ navigate, accent, inquiryStyle, setInquiryStyle, inquiryVariationLocked }) {
  return (
    <div className="page">
      {/* Variation toggle — hidden when locked to the chosen direction */}
      {!inquiryVariationLocked && (
      <div style={{
        position: 'fixed', top: 150, right: 40, zIndex: 60,
        background: 'rgba(245,240,230,0.96)',
        border: '1px solid rgba(17,17,17,0.14)',
        padding: '10px 14px',
        display: 'flex', alignItems: 'center', gap: 14,
        backdropFilter: 'blur(12px)',
      }}>
        <span className="micro" style={{ fontSize: 9, color: '#6B6257' }}>Variation</span>
        <button onClick={() => setInquiryStyle('dialogue')} style={{
          background: 'transparent', border: 'none', cursor: 'pointer',
          fontFamily: 'Inter', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: inquiryStyle === 'dialogue' ? accent : '#111',
          borderBottom: inquiryStyle === 'dialogue' ? `1px solid ${accent}` : '1px solid transparent',
          paddingBottom: 2,
        }}>A · Dialogue</button>
        <button onClick={() => setInquiryStyle('letter')} style={{
          background: 'transparent', border: 'none', cursor: 'pointer',
          fontFamily: 'Inter', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: inquiryStyle === 'letter' ? accent : '#111',
          borderBottom: inquiryStyle === 'letter' ? `1px solid ${accent}` : '1px solid transparent',
          paddingBottom: 2,
        }}>B · Letter</button>
      </div>
      )}

      {inquiryStyle === 'dialogue'
        ? <InquiryDialogue navigate={navigate} accent={accent} />
        : <InquiryLetter navigate={navigate} accent={accent} />}
    </div>
  );
}

/* -------- VARIATION A — Conversational, one question at a time -------- */
function InquiryDialogue({ navigate, accent }) {
  const ref = useReveal();
  const isMobile = useIsMobile();
  const questions = [
    { id: 'name', prompt: 'How shall we address you?', sub: 'A name, in your own hand.', type: 'text', placeholder: 'Your given name' },
    { id: 'introduction', prompt: 'Who made the introduction?', sub: 'We accept commissions by referral. Name the party — or write “a gentle exception.”', type: 'text', placeholder: 'A name, or a note' },
    { id: 'discipline', prompt: 'Which discipline do you seek?', sub: 'Choose as many as feel true.', type: 'chips', multi: true, other: true, options: ['A Wedding', 'A Gala', 'A Private Assembly', 'A Retreat', 'A Sanctuary', 'Continuum'] },
    { id: 'when', prompt: 'And when, approximately?', sub: 'A season will do.', type: 'chips', options: ['Spring', 'Summer', 'Autumn', 'Winter', 'Open to counsel'] },
    { id: 'guests', prompt: 'For how many?', sub: 'Intimacy is often underestimated.', type: 'chips', options: ['≤ 12', '12 – 40', '40 – 120', '120 +'] },
    { id: 'where', prompt: 'Where, if anywhere?', sub: 'A region, a country, or simply — you decide.', type: 'text', placeholder: 'Anywhere in the world, or leave it to us' },
    { id: 'letter', prompt: 'Finally — in a few lines, what should we know?', sub: 'Write to us as you would to a trusted correspondent.', type: 'textarea', placeholder: 'We are listening…' },
  ];

  const [i, setI] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [done, setDone] = React.useState(false);
  const q = questions[i];

  const setA = (v) => setAnswers({ ...answers, [q.id]: v });
  const val = answers[q.id];
  const otherKey = q.id + '__other';
  const otherVal = answers[otherKey] || '';
  const setOther = (v) => setAnswers({ ...answers, [otherKey]: v });

  const canAdvance = (() => {
    if (q.type !== 'chips') return !!val && val.trim().length > 0;
    if (q.multi) {
      const picks = Array.isArray(val) ? val : [];
      const hasOther = picks.includes('Other');
      if (hasOther) return picks.length > 1 || otherVal.trim().length > 0;
      return picks.length > 0;
    }
    if (val === 'Other') return otherVal.trim().length > 0;
    return !!val;
  })();

  const next = () => {
    if (i < questions.length - 1) setI(i + 1);
    else setDone(true);
  };

  if (done) {
    return (
      <div ref={ref} style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', padding: '140px 0' }}>
        <div className="container" style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
          <div className="reveal" style={{ marginBottom: 40 }}>
            <Wordmark size="lg" />
          </div>
          <h1 className="display reveal reveal-delay-1" style={{ fontSize: 'clamp(44px, 6vw, 88px)', lineHeight: 1.02 }}>
            Thank you.<br /><em>The dialogue has begun.</em>
          </h1>
          <p className="body-lede reveal reveal-delay-2" style={{ marginTop: 36, maxWidth: 560, margin: '36px auto 0' }}>
            A member of the collective will write to you within three days — at the address you have shared, and never from anywhere else.
          </p>
          <div className="reveal reveal-delay-3" style={{ marginTop: 56, display: 'flex', justifyContent: 'center', gap: 16 }}>
            <CTA onClick={() => navigate('home')}>Return to the Threshold</CTA>
          </div>
          <div className="reveal reveal-delay-4" style={{
            marginTop: 80, paddingTop: 32,
            borderTop: '1px solid rgba(17,17,17,0.14)',
            display: 'flex', justifyContent: 'space-between', maxWidth: 520, margin: '80px auto 0',
          }}>
            <span className="micro" style={{ fontSize: 10, color: '#6B6257' }}>Reference</span>
            <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#111' }}>
              CAJE · {new Date().getFullYear()} · {Math.random().toString(36).slice(2, 8).toUpperCase()}
            </span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <section ref={ref} style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 80, position: 'relative' }}>
      {/* progress */}
      <div style={{
        position: 'absolute', top: 100, left: isMobile ? 24 : 56, right: isMobile ? 24 : 56,
        display: 'flex', gap: isMobile ? 4 : 8,
      }}>
        {questions.map((_, idx) => (
          <div key={idx} style={{
            flex: 1, height: 1, background: idx <= i ? accent : 'rgba(17,17,17,0.12)',
            transition: 'background 0.6s var(--ease-silk)',
          }} />
        ))}
      </div>

      <div className="container">
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          <div key={q.id} style={{ animation: 'fadeUp 0.8s var(--ease-slow) both' }}>
            <style>{`@keyframes fadeUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }`}</style>

            <div style={{ marginBottom: 32, display: 'flex', alignItems: 'center', gap: 18 }}>
              <span className="numeral" style={{ fontSize: 32, color: accent }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              <span style={{ height: 1, width: 40, background: accent, opacity: 0.6 }} />
              <span className="micro" style={{ fontSize: 10, color: '#6B6257' }}>
                of {String(questions.length).padStart(2, '0')}
              </span>
            </div>

            <h1 className="display" style={{
              fontSize: 'clamp(32px, 6vw, 84px)', lineHeight: 1.04,
            }}>
              {q.prompt}
            </h1>
            <p className="body-lede" style={{ marginTop: 24, maxWidth: 580, color: '#6B6257' }}>
              {q.sub}
            </p>

            <div style={{ marginTop: isMobile ? 40 : 64 }}>
              {q.type === 'text' && (
                <input type="text" value={val || ''} placeholder={q.placeholder}
                  onChange={(e) => setA(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && canAdvance && next()}
                  autoFocus
                  style={{
                    width: '100%', maxWidth: 680, padding: '16px 0',
                    border: 'none', borderBottom: '1px solid rgba(17,17,17,0.3)',
                    background: 'transparent', outline: 'none',
                    fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
                    fontSize: isMobile ? 24 : 32, color: '#111', letterSpacing: '-0.005em',
                  }} />
              )}
              {q.type === 'textarea' && (
                <textarea value={val || ''} placeholder={q.placeholder}
                  onChange={(e) => setA(e.target.value)}
                  autoFocus rows={4}
                  style={{
                    width: '100%', maxWidth: 780, padding: '16px 0',
                    border: 'none', borderBottom: '1px solid rgba(17,17,17,0.3)',
                    background: 'transparent', outline: 'none', resize: 'none',
                    fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
                    fontSize: 24, color: '#111', lineHeight: 1.5,
                  }} />
              )}
              {q.type === 'chips' && (
                <div style={{ maxWidth: 820 }}>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14 }}>
                    {[...q.options, ...(q.other ? ['Other'] : [])].map(opt => {
                      const picks = Array.isArray(val) ? val : (val ? [val] : []);
                      const active = picks.includes(opt);
                      const handle = () => {
                        if (q.multi) {
                          const next = active ? picks.filter(x => x !== opt) : [...picks, opt];
                          setA(next);
                        } else {
                          setA(active ? null : opt);
                        }
                      };
                      return (
                        <button key={opt} onClick={handle}
                          style={{
                            padding: isMobile ? '13px 20px' : '16px 28px',
                            background: active ? accent : 'transparent',
                            border: `1px solid ${active ? accent : 'rgba(17,17,17,0.22)'}`,
                            color: active ? '#F5F0E6' : '#111',
                            fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
                            fontSize: isMobile ? 17 : 20, cursor: 'pointer',
                            display: 'inline-flex', alignItems: 'center', gap: 10,
                            transition: 'all 0.5s var(--ease-silk)',
                          }}>
                          {q.multi && (
                            <span style={{
                              width: 10, height: 10, borderRadius: '50%',
                              border: `1px solid ${active ? '#F5F0E6' : 'rgba(17,17,17,0.3)'}`,
                              background: active ? '#F5F0E6' : 'transparent',
                            }} />
                          )}
                          {opt}
                        </button>
                      );
                    })}
                  </div>
                  {/* Inline "Other" freeform input */}
                  {(() => {
                    const picks = Array.isArray(val) ? val : (val ? [val] : []);
                    if (!picks.includes('Other')) return null;
                    return (
                      <div style={{ marginTop: 28, maxWidth: 680, animation: 'fadeUp 0.5s var(--ease-slow) both' }}>
                        <div className="micro" style={{ fontSize: 10, color: '#6B6257', marginBottom: 10 }}>
                          In your own words
                        </div>
                        <input type="text" value={otherVal}
                          onChange={(e) => setOther(e.target.value)}
                          onKeyDown={(e) => e.key === 'Enter' && canAdvance && next()}
                          placeholder="Describe what you have in mind…"
                          autoFocus
                          style={{
                            width: '100%', padding: '12px 0',
                            border: 'none', borderBottom: `1px solid ${accent}`,
                            background: 'transparent', outline: 'none',
                            fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
                            fontSize: 24, color: '#111',
                          }} />
                      </div>
                    );
                  })()}
                  {q.multi && (
                    <div className="micro" style={{ fontSize: 9, color: '#6B6257', marginTop: 18, opacity: 0.7 }}>
                      Multiple selections welcome
                    </div>
                  )}
                </div>
              )}
            </div>

            <div style={{ marginTop: 72, display: 'flex', alignItems: 'center', gap: 24 }}>
              {i > 0 && (
                <button onClick={() => setI(i - 1)} style={{
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  fontFamily: 'Inter', fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
                  color: '#6B6257',
                  display: 'flex', alignItems: 'center', gap: 12,
                }}>
                  <span style={{ width: 20, height: 1, background: 'currentColor' }} /> Previous
                </button>
              )}
              <div style={{ flex: 1 }} />
              <CTA onClick={() => canAdvance && next()} dark={canAdvance}>
                {i === questions.length - 1 ? 'Transmit' : 'Continue'}
              </CTA>
              <span className="micro" style={{ fontSize: 9, color: '#6B6257', opacity: canAdvance ? 1 : 0.5 }}>
                ↵ Enter
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------- VARIATION B — Long-form editorial letter, all on one page -------- */
function InquiryLetter({ navigate, accent }) {
  const ref = useReveal();
  const isMobile = useIsMobile();
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    name: '', email: '', phone: '',
    introduction: '',
    discipline: [],
    season: '',
    guests: '',
    where: '',
    letter: '',
  });

  const setF = (k, v) => setForm({ ...form, [k]: v });
  const toggleD = (d) => setF('discipline', form.discipline.includes(d)
    ? form.discipline.filter(x => x !== d) : [...form.discipline, d]);

  if (submitted) {
    const reference = React.useMemo(() =>
      'CAJE-' + new Date().getFullYear() + '-' +
      Math.random().toString(36).slice(2, 6).toUpperCase() + '-' +
      Math.random().toString(36).slice(2, 6).toUpperCase(), []);
    const today = new Date().toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' });

    return (
      <div ref={ref} style={{ minHeight: '100vh', paddingTop: isMobile ? 110 : 140, paddingBottom: 120, display: 'flex', alignItems: 'center', background: 'var(--ivory)' }}>
        <div className="container" style={{ maxWidth: 900, margin: '0 auto', width: '100%' }}>
          {/* Bordered editorial card */}
          <div className="reveal" style={{
            border: '1px solid rgba(17,17,17,0.14)',
            padding: isMobile ? '48px 24px 44px' : '80px 72px 72px',
            position: 'relative',
            background: 'var(--ivory-soft)',
          }}>
            {/* Inner gold frame */}
            <div style={{
              position: 'absolute', inset: isMobile ? 12 : 20,
              border: `1px solid ${accent}`, opacity: 0.28, pointerEvents: 'none',
            }} />

            {/* Stamp / mark */}
            <div className="reveal reveal-delay-1" style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              textAlign: 'center', marginBottom: 48,
            }}>
              <div style={{
                width: 64, height: 64, borderRadius: '50%',
                border: `1px solid ${accent}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 24,
              }}>
                <div style={{
                  fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
                  fontSize: 26, color: accent,
                }}>✓</div>
              </div>
              <Eyebrow num="✦" label="Letter Received · Correspondence Begun" align="center" />
            </div>

            {/* Headline */}
            <h1 className="display reveal reveal-delay-2" style={{
              fontSize: 'clamp(44px, 6vw, 92px)', lineHeight: 1.0,
              textAlign: 'center',
            }}>
              <em>Thank you.</em><br />
              <span style={{ fontStyle: 'normal', fontWeight: 300 }}>We will</span> <em>reach out</em> <span style={{ fontStyle: 'normal', fontWeight: 300 }}>soon.</span>
            </h1>

            {/* Body copy */}
            <p className="body-lede reveal reveal-delay-3" style={{
              margin: '40px auto 0', maxWidth: 580, textAlign: 'center',
            }}>
              A member of the collective will write to you within <em>three days</em> — at the address you have shared, and never from anywhere else. Please watch your correspondence; our notes have been known to rest quietly among the unread.
            </p>

            {/* Reference card */}
            <div className="reveal reveal-delay-4" style={{
              marginTop: 64, paddingTop: 32, paddingBottom: 8,
              borderTop: `1px solid ${accent}`,
              display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr 1fr', gap: isMobile ? 20 : 32,
              maxWidth: 620, margin: '64px auto 0',
              textAlign: isMobile ? 'center' : 'left',
            }}>
              <div>
                <div className="micro" style={{ fontSize: 9, color: '#6B6257', marginBottom: 8 }}>Reference</div>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#111', letterSpacing: '0.05em' }}>
                  {reference}
                </div>
              </div>
              <div>
                <div className="micro" style={{ fontSize: 9, color: '#6B6257', marginBottom: 8 }}>Date</div>
                <div style={{ fontFamily: 'EB Garamond, serif', fontStyle: 'italic', fontSize: 15, color: '#111' }}>
                  {today}
                </div>
              </div>
              <div>
                <div className="micro" style={{ fontSize: 9, color: '#6B6257', marginBottom: 8 }}>Response</div>
                <div style={{ fontFamily: 'EB Garamond, serif', fontStyle: 'italic', fontSize: 15, color: '#111' }}>
                  Within three days
                </div>
              </div>
            </div>

            {/* Signature */}
            <div className="reveal reveal-delay-5" style={{
              marginTop: 56, textAlign: 'center',
            }}>
              <div style={{
                fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
                fontSize: 32, color: '#111', lineHeight: 1.2,
              }}>
                With every regard,
              </div>
              <div style={{ marginTop: 20, display: 'flex', justifyContent: 'center' }}>
                <Wordmark size="md" />
              </div>
            </div>
          </div>

          {/* Actions outside the card */}
          <div className="reveal" style={{
            marginTop: 56, display: 'flex', justifyContent: 'center', gap: 20, flexWrap: 'wrap',
          }}>
            <CTA onClick={() => navigate('home')}>Return to the Threshold</CTA>
            <CTA onClick={() => navigate('about')}>The Collective</CTA>
          </div>

          <div className="reveal" style={{
            marginTop: 48, textAlign: 'center',
            fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
            fontSize: 14, color: '#6B6257',
          }}>
            Should you wish to add anything further, write to us directly at <span style={{ color: accent }}>private@cajecollective.com</span>.
          </div>
        </div>
      </div>
    );
  }

  return (
    <div ref={ref} className="page" style={{ paddingTop: 140 }}>
      {/* Header */}
      <section style={{ padding: isMobile ? '20px 0 50px' : '40px 0 80px' }}>
        <div className="container">
          <div className="reveal"><Eyebrow num="I" label="Begin the Dialogue" /></div>
          <h1 className="display reveal reveal-delay-1" style={{
            fontSize: 'clamp(40px, 8vw, 116px)', lineHeight: 1.0, maxWidth: 1200, marginTop: 24,
          }}>
            A <em>letter</em> — in your own hand.
          </h1>
          <p className="body-lede reveal reveal-delay-2" style={{ marginTop: 40, maxWidth: 620 }}>
            We prefer language to forms; sensibility to check-boxes. Write as you would to a trusted correspondent — a few lines are enough to begin.
          </p>
        </div>
      </section>

      {/* Letter as editorial layout */}
      <section style={{ padding: isMobile ? '24px 0 80px' : '60px 0 120px' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2.4fr', gap: isMobile ? 44 : 80 }}>
            {/* Side column */}
            <aside className="reveal">
              <div style={{ position: isMobile ? 'static' : 'sticky', top: 140 }}>
                <div className="micro" style={{ color: accent, marginBottom: 18 }}>Correspondence</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                  <div>
                    <div className="micro" style={{ fontSize: 10, color: '#6B6257' }}>By letter</div>
                    <div style={{ fontFamily: 'EB Garamond, serif', fontStyle: 'italic', fontSize: 18, color: '#111', marginTop: 4 }}>
                      private@cajecollective.com
                    </div>
                  </div>
                  <div>
                    <div className="micro" style={{ fontSize: 10, color: '#6B6257' }}>By voice</div>
                    <div style={{ fontFamily: 'EB Garamond, serif', fontStyle: 'italic', fontSize: 18, color: '#111', marginTop: 4 }}>
                      By appointment only
                    </div>
                  </div>
                  <div>
                    <div className="micro" style={{ fontSize: 10, color: '#6B6257' }}>Response</div>
                    <div style={{ fontFamily: 'EB Garamond, serif', fontStyle: 'italic', fontSize: 18, color: '#111', marginTop: 4 }}>
                      Within three days
                    </div>
                  </div>
                </div>
                <div style={{ marginTop: 48, paddingTop: 28, borderTop: '1px solid rgba(17,17,17,0.12)', color: '#6B6257', fontFamily: 'EB Garamond, serif', fontStyle: 'italic', fontSize: 15, lineHeight: 1.6 }}>
                  We accept twelve commissions per season. All correspondence is treated with the utmost discretion.
                </div>
              </div>
            </aside>

            {/* Form */}
            <form className="reveal reveal-delay-1" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
              <FieldSet num="I" title="The Correspondent">
                <Row>
                  <Field label="Name" value={form.name} onChange={(v) => setF('name', v)} />
                  <Field label="Email" value={form.email} onChange={(v) => setF('email', v)} type="email" />
                </Row>
                <Row>
                  <Field label="Telephone, if you wish" value={form.phone} onChange={(v) => setF('phone', v)} optional />
                  <Field label="Who made the introduction?" value={form.introduction} onChange={(v) => setF('introduction', v)} />
                </Row>
              </FieldSet>

              <FieldSet num="II" title="The Commission">
                <div style={{ marginBottom: 32 }}>
                  <LabelRow text="Which disciplines do you seek?" sub="Choose as many as feel true" />
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                    {['A Wedding', 'A Gala', 'A Private Assembly', 'A Retreat', 'A Sanctuary', 'Continuum'].map(d => (
                      <Chip key={d} active={form.discipline.includes(d)} onClick={() => toggleD(d)} accent={accent}>{d}</Chip>
                    ))}
                  </div>
                </div>
                <Row>
                  <div>
                    <LabelRow text="When" />
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                      {['Spring', 'Summer', 'Autumn', 'Winter', 'Open'].map(s => (
                        <Chip key={s} active={form.season === s} onClick={() => setF('season', s)} accent={accent}>{s}</Chip>
                      ))}
                    </div>
                  </div>
                  <div>
                    <LabelRow text="Number of guests" />
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                      {['≤ 12', '12 – 40', '40 – 120', '120 +'].map(g => (
                        <Chip key={g} active={form.guests === g} onClick={() => setF('guests', g)} accent={accent}>{g}</Chip>
                      ))}
                    </div>
                  </div>
                </Row>
                <div style={{ marginBottom: 32 }}>
                  <LabelRow text="Where, if anywhere" sub="A region, a country, or simply — leave it to us" />
                  <input type="text" value={form.where} onChange={(e) => setF('where', e.target.value)}
                    placeholder="Anywhere in the world, or leave it to us"
                    style={{
                      width: '100%', padding: '10px 0', border: 'none',
                      borderBottom: '1px solid rgba(17,17,17,0.2)',
                      background: 'transparent', outline: 'none',
                      fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
                      fontSize: 22, color: '#111',
                    }} />
                </div>
              </FieldSet>

              <FieldSet num="III" title="The Letter">
                <LabelRow text="In a few lines, what should we know?" sub="Your own words — no length is too short." />
                <textarea value={form.letter} onChange={(e) => setF('letter', e.target.value)} rows={8}
                  placeholder="Dear CAJE — "
                  style={{
                    width: '100%', padding: '20px 0',
                    border: 'none', borderBottom: '1px solid rgba(17,17,17,0.2)',
                    background: 'transparent', outline: 'none', resize: 'vertical',
                    fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
                    fontSize: 22, color: '#111', lineHeight: 1.6,
                  }} />
              </FieldSet>

              <div style={{ marginTop: 72, display: 'flex', alignItems: isMobile ? 'stretch' : 'center', justifyContent: 'space-between', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 24 : 0 }}>
                <span className="micro" style={{ color: '#6B6257', maxWidth: 340, order: isMobile ? 2 : 1 }}>
                  By transmitting this letter, you consent to correspondence. No details are shared outside the collective.
                </span>
                <button type="submit" className="cta" style={{ background: '#111', color: '#F5F0E6', borderColor: '#111', order: isMobile ? 1 : 2, justifyContent: 'center' }}>
                  <span>Transmit the Letter</span>
                  <span className="cta-arrow" />
                </button>
              </div>
            </form>
          </div>
        </div>
      </section>
    </div>
  );
}

function FieldSet({ num, title, children }) {
  return (
    <div style={{ marginBottom: 72, paddingBottom: 48, borderBottom: '1px solid rgba(17,17,17,0.1)' }}>
      <div style={{ marginBottom: 32, display: 'flex', alignItems: 'baseline', gap: 14 }}>
        <span className="numeral" style={{ fontSize: 16, color: '#B89A79' }}>{num}</span>
        <span style={{ height: 1, width: 32, background: '#B89A79', opacity: 0.7 }} />
        <span className="eyebrow">{title}</span>
      </div>
      {children}
    </div>
  );
}
function Row({ children }) {
  const isMobile = useIsMobile();
  return <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 28 : 40, marginBottom: 32 }}>{children}</div>;
}
function LabelRow({ text, sub }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div className="micro" style={{ fontSize: 10, color: '#111' }}>{text}</div>
      {sub && <div style={{ fontFamily: 'EB Garamond, serif', fontStyle: 'italic', fontSize: 13, color: '#6B6257', marginTop: 4 }}>{sub}</div>}
    </div>
  );
}
function Field({ label, value, onChange, type = 'text', placeholder, optional }) {
  return (
    <div>
      <LabelRow text={optional ? `${label} — optional` : label} />
      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        style={{
          width: '100%', padding: '10px 0', border: 'none',
          borderBottom: '1px solid rgba(17,17,17,0.2)',
          background: 'transparent', outline: 'none',
          fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
          fontSize: 22, color: '#111',
        }} />
    </div>
  );
}
function Chip({ children, active, onClick, accent }) {
  return (
    <button type="button" onClick={onClick}
      style={{
        padding: '10px 20px',
        background: active ? accent : 'transparent',
        border: `1px solid ${active ? accent : 'rgba(17,17,17,0.22)'}`,
        color: active ? '#F5F0E6' : '#111',
        fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
        fontSize: 15, cursor: 'pointer',
        transition: 'all 0.4s var(--ease-silk)',
      }}>
      {children}
    </button>
  );
}

Object.assign(window, { InquiryPage });