/* Contact.jsx — formulaire qualifiant "Parlons de votre cabinet" + footer */

function Contact() {
  const [sent, setSent] = useState(false);
  const [civ, setCiv] = useState('M.');
  const [f, setF] = useState({ prenom:'', nom:'', cabinet:'', email:'', tel:'', encours:'', ville:'', message:'' });
  const set = k => e => setF(s => ({ ...s, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    // TODO(backend) : brancher vers l'endpoint de capture (Neon / email équipe M&A).
    // En l'absence de backend, on bascule en état "envoyé" et on garde un fallback e-mail ci-dessous.
    setSent(true);
  };

  return (
    <section id="contact" style={{ position:'relative', background:'#161616', padding:'120px 40px', overflow:'hidden' }}>
      <Bg src="assets/img/contact-bg.jpg" position="center" opacity={0.5} />
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(18,18,18,.88), rgba(18,18,18,.95))' }} />
      <div style={{ position:'relative', maxWidth:1120, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.05fr', gap:72, alignItems:'start' }} className="pf-contact-grid">
        <Reveal>
          <div>
            <Eyebrow style={{ color:'#BCB2A6' }}>Parlons de votre cabinet</Eyebrow>
            <h2 className="pf-display-2" style={{ color:'#F2EEE8', marginTop:16 }}>
              Tout commence<br/><em style={{ color:'#F2EEE8' }}>par un échange.</em>
            </h2>
            <p className="pf-body-lg" style={{ color:'rgba(242,238,232,.74)', marginTop:22, maxWidth:'42ch' }}>
              Confidentiel et sans engagement. Dites-nous quelques mots de votre cabinet, nous revenons vers vous rapidement.
            </p>
            <div style={{ marginTop:40, paddingTop:28, borderTop:'1px solid rgba(255,255,255,.12)' }}>
              <div className="pf-caption" style={{ color:'rgba(242,238,232,.55)' }}>Votre interlocuteur</div>
              <div className="pf-h3" style={{ color:'#F2EEE8', marginTop:6 }}>Emmanuel Lutaud</div>
              <div className="pf-body" style={{ color:'rgba(242,238,232,.7)', marginTop:2 }}>Directeur M&A, Groupe Patrimmofi</div>
            </div>
            <div style={{ marginTop:24 }}>
              <div className="pf-caption" style={{ color:'rgba(242,238,232,.55)' }}>Siège social</div>
              <div className="pf-body" style={{ color:'rgba(242,238,232,.8)', marginTop:6 }}>41, rue de Prony, 75017 Paris · +33 1 56 88 54 60</div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={140}>
          <div style={{ background:'rgba(33,31,29,.7)', border:'1px solid rgba(255,255,255,.1)', borderRadius:4, padding:'34px 32px', backdropFilter:'blur(6px)' }}>
            {sent ? (
              <div style={{ textAlign:'center', padding:'40px 0' }}>
                <PfIcon name="contrat" size={48} tone="creme" style={{ margin:'0 auto' }} />
                <div className="pf-h3" style={{ color:'#F2EEE8', marginTop:20, fontStyle:'italic' }}>Merci, {f.prenom || 'à très vite'}.</div>
                <p style={{ color:'rgba(242,238,232,.7)', fontFamily:'var(--font-sans)', fontWeight:300, marginTop:10 }}>
                  Nous revenons vers vous sous 48 h, en toute confidentialité.
                </p>
                <a href="mailto:contact@groupe-patrimmofi.com?subject=Mon%20cabinet%20x%20Patrimmofi" style={{ ...ghostBtn, display:'inline-block', textDecoration:'none' }}>Nous écrire directement</a>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap:14 }}>
                <div style={{ display:'flex', gap:8 }}>
                  {['M.','Mme'].map(c=>(
                    <button type="button" key={c} onClick={()=>setCiv(c)} aria-pressed={civ===c} style={{
                      flex:1, padding:'11px 0', borderRadius:2, cursor:'pointer', fontFamily:'var(--font-sans)', fontSize:'var(--small-size)',
                      border:`1px solid ${civ===c?'#F2EEE8':'rgba(255,255,255,.18)'}`,
                      background: civ===c?'rgba(242,238,232,.1)':'transparent', color: civ===c?'#F2EEE8':'rgba(242,238,232,.6)', transition:'.25s' }}>{c}</button>
                  ))}
                </div>
                <div style={{ display:'flex', gap:12 }} className="pf-field-row">
                  <Field aria-label="Prénom" placeholder="Prénom" value={f.prenom} onChange={set('prenom')} required />
                  <Field aria-label="Nom" placeholder="Nom" value={f.nom} onChange={set('nom')} required />
                </div>
                <Field aria-label="Nom de votre cabinet" placeholder="Nom de votre cabinet" value={f.cabinet} onChange={set('cabinet')} required />
                <div style={{ display:'flex', gap:12 }} className="pf-field-row">
                  <Field aria-label="Email" placeholder="Email" type="email" value={f.email} onChange={set('email')} required />
                  <Field aria-label="Téléphone" placeholder="Téléphone" type="tel" value={f.tel} onChange={set('tel')} />
                </div>
                <div style={{ display:'flex', gap:12 }} className="pf-field-row">
                  <select aria-label="Encours sous gestion" value={f.encours} onChange={set('encours')} required style={{ ...fieldStyle, color: f.encours ? '#F2EEE8' : 'rgba(242,238,232,.5)' }}>
                    <option value="" disabled>Encours sous gestion</option>
                    <option value="<50">Moins de 50 M€</option>
                    <option value="50-100">50 à 100 M€</option>
                    <option value="100-300">100 à 300 M€</option>
                    <option value=">300">Plus de 300 M€</option>
                  </select>
                  <Field aria-label="Ville" placeholder="Ville" value={f.ville} onChange={set('ville')} />
                </div>
                <textarea aria-label="Quelques mots sur votre cabinet et votre projet" placeholder="Quelques mots sur votre cabinet et votre projet" value={f.message} onChange={set('message')} rows={3} style={{ ...fieldStyle, resize:'vertical' }} />
                <button type="submit" style={{
                  marginTop:6, fontFamily:'var(--font-sans)', fontSize:'var(--small-size)', fontWeight:500, letterSpacing:'.02em',
                  background:'#F2EEE8', color:'#161616', border:'none', borderRadius:3, padding:'14px 0', cursor:'pointer', transition:'background .3s' }}
                  onMouseEnter={e=>e.currentTarget.style.background='#FFFFFF'} onMouseLeave={e=>e.currentTarget.style.background='#F2EEE8'}>
                  Envoyer
                </button>
                <p className="pf-caption" style={{ color:'rgba(242,238,232,.45)', textAlign:'center', margin:'2px 0 0' }}>
                  Vos informations restent strictement confidentielles.
                </p>
              </form>
            )}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const fieldStyle = {
  width:'100%', fontFamily:'var(--font-sans)', fontSize:'var(--body-size)', fontWeight:300, color:'#F2EEE8',
  background:'rgba(255,255,255,.04)', border:'1px solid rgba(255,255,255,.16)', borderRadius:2,
  padding:'12px 14px', boxSizing:'border-box', transition:'border-color .25s, box-shadow .25s',
};
const ghostBtn = { marginTop:24, background:'none', border:'1px solid rgba(255,255,255,.25)', color:'#F2EEE8',
  fontFamily:'var(--font-sans)', fontSize:'var(--small-size)', padding:'10px 20px', borderRadius:3, cursor:'pointer' };

function Field({ ...props }) {
  return <input {...props} style={fieldStyle}
    onFocus={e=>{ e.target.style.borderColor='#F2EEE8'; e.target.style.boxShadow='0 0 0 3px rgba(242,238,232,.1)'; }}
    onBlur={e=>{ e.target.style.borderColor='rgba(255,255,255,.16)'; e.target.style.boxShadow='none'; }} />;
}

function Footer() {
  const cols = [
    ['Le projet', [['Pourquoi nous','pourquoi'],['Ce qui ne change pas','autonomie'],['Le parcours','parcours'],['Ils nous ont rejoints','cabinets'],["L'équipe dirigeante",'equipe'],['Parlons de votre cabinet','contact']]],
    ['Groupe Patrimmofi', ['Gestion privée','Family office','Accompagnement de dirigeants','Immobilier de prestige','Investissements alternatifs']],
  ];
  return (
    <footer style={{ background:'#0E0E0E', color:'#F2EEE8', padding:'80px 40px 36px' }}>
      <div style={{ maxWidth:1280, margin:'0 auto' }}>
        <h2 className="pf-display-2" style={{ color:'#F2EEE8', maxWidth:'20ch' }}>
          Construisons, ensemble, <em style={{ color:'#F2EEE8' }}>le premier groupe patrimonial indépendant.</em>
        </h2>
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap:48, marginTop:56, paddingTop:48, borderTop:'1px solid rgba(255,255,255,.1)' }} className="pf-footer-grid">
          <div>
            <img src="assets/logos/LOGO_PATRIMMOFI_GROUPE_HRZ_CREME_RVB.svg" alt="Groupe Patrimmofi" style={{ height:42, width:'auto' }} />
            <div style={{ marginTop:20, fontFamily:'var(--font-sans)', fontWeight:300, fontSize:'var(--small-size)', color:'rgba(242,238,232,.6)', lineHeight:1.8 }}>
              41, rue de Prony, 75017 Paris<br/>+33 1 56 88 54 60<br/>groupe-patrimmofi.com
            </div>
          </div>
          {cols.map(([h,items])=>(
            <div key={h}>
              <div className="pf-eyebrow" style={{ color:'#BCB2A6' }}>{h}</div>
              <ul style={{ listStyle:'none', margin:'18px 0 0', padding:0, display:'flex', flexDirection:'column', gap:12 }}>
                {items.map(it => {
                  const isLink = Array.isArray(it);
                  const label = isLink ? it[0] : it;
                  const id = isLink ? it[1] : null;
                  return <li key={label} style={{ fontFamily:'var(--font-sans)', fontWeight:300, fontSize:'var(--small-size)', color:'rgba(242,238,232,.72)' }}>
                    {isLink
                      ? <a href={`#${id}`} onClick={(e)=>{ e.preventDefault(); scrollToId(id); }} style={{ color:'inherit' }}>{label}</a>
                      : label}
                  </li>;
                })}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop:48, paddingTop:24, borderTop:'1px solid rgba(255,255,255,.1)', display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:14 }}>
          <div style={{ fontFamily:'var(--font-sans)', fontSize:'var(--caption-size)', color:'rgba(242,238,232,.4)' }}>© {new Date().getFullYear()} Groupe Patrimmofi - Sous tutelle AMF & ACPR</div>
          <div style={{ display:'flex', gap:22, fontFamily:'var(--font-sans)', fontSize:'var(--caption-size)', color:'rgba(242,238,232,.5)' }}>
            <span>Mentions légales</span><span>Protection des données</span><span>Certifications</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer, Field });