// Apricus — Contact (Calendly + formulaire)
function Contact() {
  const ref = useReveal();
  const D = 'var(--font-display)';
  const [form, setForm] = React.useState({ nom: '', email: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const valid = form.nom.trim() && /.+@.+\..+/.test(form.email);
  return (
    <section id="contact" ref={ref} style={{ padding: '100px 40px' }}>
      <div className="apr-fade" style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center', marginBottom: 52 }}>
        <Eyebrow style={{ justifyContent: 'center' }}>Entrons en contact</Eyebrow>
        <h2 style={{ fontFamily: D, fontSize: 'clamp(32px,4.4vw,54px)', lineHeight: 1.04,
          letterSpacing: '-0.02em', color: 'var(--apr-ink)', margin: '14px 0 0' }}>
          <span style={{ fontWeight: 300 }}>Une question, une </span>
          <span style={{ fontWeight: 900 }}>envie</span>
          <span style={{ fontWeight: 300, fontStyle: 'italic' }}> ?</span>
        </h2>
      </div>
      <div className="apr-fade" style={{ maxWidth: 1000, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '0.85fr 1.15fr', gap: 28, alignItems: 'stretch' }}>
        {/* Calendly card */}
        <div style={{ background: 'var(--apr-citron-pale)', backgroundSize: 'cover',
          borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-md)', padding: '40px 36px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
          <img src="assets/sun-motif.svg" alt="" style={{ position: 'absolute', bottom: -36, right: -30, width: 150, opacity: 0.4 }} />
          <Icon name="calendar" size={44} color="var(--apr-clay)" />
          <h3 style={{ fontFamily: D, fontWeight: 600, fontSize: 30, color: 'var(--apr-ink)', margin: '16px 0 8px' }}>
            Réservez un appel
          </h3>
          <p style={{ color: 'rgba(50,45,30,0.8)', fontSize: 15.5, lineHeight: 1.65, margin: '0 0 24px', maxWidth: 280 }}>
            Vingt minutes, en visio, pour faire connaissance et voir comment je peux vous accompagner.
          </p>
          <Button size="lg" variant="terra" onClick={bookCall}>
            Ouvrir mon agenda <Icon name="arrow-right" size={15} />
          </Button>
          <div style={{ marginTop: 22, fontSize: 14, color: 'rgba(50,45,30,0.7)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="instagram-logo" size={20} color="var(--apr-clay)" /> @aprrricus
          </div>
        </div>
        {/* form */}
        <div style={{ background: 'var(--apr-linen)', borderRadius: 'var(--radius-xl)',
          boxShadow: 'var(--shadow-sm)', padding: '36px 38px' }}>
          {sent ? (
            <div style={{ height: '100%', minHeight: 300, display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
              <div style={{ width: 74, height: 74, borderRadius: '50%', border: '1.5px solid var(--apr-zest)',
                display: 'grid', placeItems: 'center', marginBottom: 18 }}>
                <Icon name="check" size={38} color="var(--apr-zest)" />
              </div>
              <h3 style={{ fontFamily: D, fontWeight: 400, fontSize: 30, color: 'var(--apr-ink)', margin: '0 0 8px' }}>
                Merci pour votre message ✨
              </h3>
              <p style={{ color: 'var(--apr-ink-soft)', fontSize: 15.5, lineHeight: 1.65, maxWidth: 360 }}>
                Je vous réponds très vite, <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>piano piano</span>.
              </p>
            </div>
          ) : (
            <>
              <ContactField label="Prénom et nom" value={form.nom} onChange={v => setForm({ ...form, nom: v })} placeholder="Camille Durand" />
              <ContactField label="Email" type="email" value={form.email} onChange={v => setForm({ ...form, email: v })} placeholder="vous@exemple.fr" />
              <ContactField label="Votre message" textarea value={form.message} onChange={v => setForm({ ...form, message: v })} placeholder="Ce qui vous amène, vos envies…" />
              <Button size="lg" glow disabled={!valid} onClick={() => setSent(true)} style={{ marginTop: 6, justifyContent: 'center', width: '100%' }}>
                Envoyer <Icon name="arrow-right" size={15} />
              </Button>
            </>
          )}
        </div>
      </div>
    </section>
  );
}

function ContactField({ label, value, onChange, placeholder, type, textarea }) {
  const [focus, setFocus] = React.useState(false);
  const base = {
    width: '100%', boxSizing: 'border-box', fontFamily: 'var(--font-body)', fontSize: 15,
    color: 'var(--apr-ink)', background: 'var(--apr-shell)', borderRadius: 12, padding: '12px 14px',
    outline: 'none', resize: 'vertical',
    border: `1.5px solid ${focus ? 'var(--apr-zest)' : 'var(--apr-line-strong)'}`,
    boxShadow: focus ? '0 0 0 3px rgba(224,150,0,.18)' : 'none', transition: 'all .15s var(--ease-out)',
  };
  return (
    <div style={{ marginBottom: 16 }}>
      <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: 'var(--apr-ink-soft)', marginBottom: 7, letterSpacing: '0.02em' }}>{label}</label>
      {textarea
        ? <textarea rows={4} value={value} placeholder={placeholder} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} onChange={e => onChange(e.target.value)} style={base} />
        : <input type={type || 'text'} value={value} placeholder={placeholder} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} onChange={e => onChange(e.target.value)} style={base} />}
    </div>
  );
}
window.Contact = Contact;