/* Maison Silya — Contact / Enquiry. Formspree endpoint: mbdeezyg
   The calm close of the house: a confident invitation on the left, the
   correspondence on the right, presented like writing to a private studio. */
const MS_FORMSPREE = 'https://formspree.io/f/mbdeezyg';

function ContactScreen() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const formRef = React.useRef(null);
  // Order pre-fill: captured when arriving from a piece enquiry / Tufted order
  const [order] = React.useState(() => window.__MS_ORDER || null);
  React.useEffect(() => { window.__MS_ORDER = null; }, []);
  const lang = window.__MS_LANG || 'en';
  const L = (fr, en) => (lang === 'fr' ? fr : en);
  const isEnquiry = order && order.kind === 'enquiry';
  let orderMessage = '';
  if (order) {
    if (lang === 'fr') {
      orderMessage = isEnquiry
        ? `Bonjour, je souhaite en savoir plus sur la pi\u00e8ce « ${order.piece} »${order.size ? ` (${order.size})` : ''}.\n\nMerci de me recontacter pour \u00e9changer sur cette pi\u00e8ce et ses possibilit\u00e9s.`
        : `Bonjour, je souhaite commander la pi\u00e8ce « ${order.piece} ».\n\nTaille : ${order.size}\nMati\u00e8re : ${order.mat}\n\nMerci de me recontacter pour finaliser la commande.`;
    } else {
      orderMessage = isEnquiry
        ? `Hello, I would like to know more about the piece “${order.piece}”${order.size ? ` (${order.size})` : ''}.\n\nPlease contact me to discuss this piece and its possibilities.`
        : `Hello, I would like to order the piece “${order.piece}”.\n\nSize: ${order.size}\nMaterial: ${order.mat}\n\nPlease contact me to finalise the order.`;
    }
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    const data = new FormData(formRef.current);
    data.append('_language', window.__MS_LANG || 'en');
    data.append('_next', 'false');
    try {
      const res = await fetch(MS_FORMSPREE, { method: 'POST', body: data, headers: { Accept: 'application/json' } });
      setStatus(res.ok ? 'sent' : 'error');
    } catch (_) {
      setStatus('error');
    }
  }

  const sending = status === 'sending';

  return (
    <div style={{ background: C('canvas') }}>
      <section style={{ position: 'relative', padding: 'clamp(8rem,15vh,12rem) clamp(1.5rem,5vw,4rem) clamp(6rem,12vh,10rem)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(50% 38% at 22% 12%, rgba(166,136,90,0.06), rgba(166,136,90,0) 60%)', pointerEvents: 'none' }} />
        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(3rem,7vw,8rem)' }} className="ms-contact">

          {/* The invitation */}
          <div className="ms-stagger">
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <span style={{ width: 6, height: 6, background: C('accent'), rotate: '45deg', flex: 'none' }} />
              <span style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{t('ct.kicker')}</span>
            </div>
            <h1 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(2.6rem,5vw,4.25rem)', letterSpacing: '-0.02em', lineHeight: 1.03, margin: '26px 0 0', maxWidth: 480 }}>{t('ct.title')}</h1>
            <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 'clamp(1.15rem,1.5vw,1.4rem)', lineHeight: 1.75, color: C('ink-secondary'), marginTop: 28, maxWidth: 430 }}>
              {t('ct.lede')}
            </p>
            <div style={{ height: 1, background: C('line'), margin: 'clamp(2.5rem,5vh,3.5rem) 0', maxWidth: 430 }} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
              {[[t('ct.paris'), t('ct.paris_d')], [t('ct.corr'), (
                <span>
                  <a href="mailto:contact@silyaparis.com" style={{ color: 'inherit', textDecoration: 'none', borderBottom: `1px solid ${C('line-strong')}`, paddingBottom: 2 }}>contact@silyaparis.com</a>
                  {' · '}
                  <a href="tel:+33770085740" style={{ color: 'inherit', textDecoration: 'none', borderBottom: `1px solid ${C('line-strong')}`, paddingBottom: 2 }}>+33&nbsp;7&nbsp;70&nbsp;08&nbsp;57&nbsp;40</a>
                </span>
              )]].map(([h, d]) => (
                <div key={h}>
                  <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{h}</div>
                  <div style={{ fontFamily: C('font-serif'), fontSize: 17.5, color: C('ink'), marginTop: 8 }}>{d}</div>
                </div>
              ))}
              <div style={{ fontFamily: C('font-sans'), fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: C('ink-tertiary') }}>
                {L('Réponse de l’atelier sous 48 h', 'A reply from the atelier within 48 hours')}
              </div>
            </div>
          </div>

          {/* The correspondence */}
          <div style={{ background: C('limestone'), border: `1px solid ${C('line')}`, padding: 'clamp(2rem,4vw,3.5rem)' }}>
            {status === 'sent' ? (
              <div style={{ minHeight: 360, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start', gap: 18 }}>
                <Diamond size={6} />
                <h2 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 32, margin: 0 }}>{t('ct.thanks')}</h2>
                <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 18, lineHeight: 1.7, color: C('ink-secondary'), margin: 0, maxWidth: 360 }}>
                  {t('ct.thanks_d')}
                </p>
              </div>
            ) : (
              <form ref={formRef} onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 28, opacity: sending ? 0.5 : 1, transition: 'opacity 400ms ease', pointerEvents: sending ? 'none' : 'auto' }}>
                <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.26em', textTransform: 'uppercase', color: C('accent'), marginBottom: 2 }}>{L('Écrire à la maison', 'Write to the house')}</div>
                {order && (
                  <div style={{ border: `1px solid ${C('line-strong')}`, background: 'rgba(166,136,90,0.08)', padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <div style={{ fontFamily: C('font-sans'), fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: C('accent') }}>{isEnquiry ? L('Renseignement', 'Enquiry') : L('Demande de commande', 'Order enquiry')}</div>
                    <div style={{ fontFamily: C('font-serif'), fontSize: 18, color: C('ink') }}>{order.piece}{order.size ? ` · ${order.size}` : ''}</div>
                  </div>
                )}
                <div className="ms-form-name" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
                  <Field label={t('ct.first')} name="first_name" placeholder="Élise" required />
                  <Field label={t('ct.last')} name="last_name" placeholder="Moreau" required />
                </div>
                <div className="ms-form-email" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
                  <Field label={t('ct.email')} name="email" type="email" placeholder="vous@studio.com" required />
                  <Field label={t('ct.phone')} name="phone" type="tel" placeholder="+33 6 00 00 00 00" />
                </div>
                <label style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <span style={{ fontFamily: C('font-sans'), textTransform: 'uppercase', fontSize: 11, letterSpacing: '0.22em', color: C('ink-tertiary') }}>{t('ct.project')}</span>
                  <textarea name="message" rows={3} placeholder={t('ct.project_ph')} required defaultValue={orderMessage}
                    style={{ fontFamily: C('font-serif'), fontSize: 17, color: C('ink'), background: 'transparent', border: 'none', borderBottom: `1px solid ${C('line-strong')}`, borderRadius: 0, padding: '10px 0', outline: 'none', resize: 'none' }} />
                </label>
                {status === 'error' && (
                  <p style={{ fontFamily: C('font-serif'), fontStyle: 'italic', fontSize: 15, color: '#b0392a', margin: 0 }}>
                    {L("Une erreur s'est produite. Veuillez réessayer ou écrire directement à contact@silyaparis.com.", "Something went wrong. Please try again or write directly to contact@silyaparis.com.")}
                  </p>
                )}
                <Btn variant="primary" size="lg" as="button" type="submit" style={{ marginTop: 8, alignSelf: 'flex-start' }}>
                  {sending ? (t('ct.send') + '…') : t('ct.send')}
                </Btn>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { ContactScreen });