/* Sections2.jsx — Parcours, Profil recherché, Cabinets membres, Ambition */

const STEPS = [
  ['01', 'On échange', "Un premier contact confidentiel, sans engagement. On prend le temps de se comprendre, vous et nous."],
  ['02', 'On étudie ensemble', "Audits usuels - finance, juridique, fiscal, social - menés par nos conseils historiques. Une exécution rapide, cadrée, et respectueuse de votre cabinet."],
  ['03', "On construit l'association", "Un projet sur mesure, pensé pour le dirigeant et son équipe. Des termes clairs, discutés en direct et en confiance."],
  ['04', 'On vous accueille', "Intégration en quelques semaines : outils, conformité, communauté. Vous gardez la main, vous gagnez un groupe."],
];

function Parcours() {
  return (
    <section id="parcours" style={{ background:'#161616', padding:'120px 40px' }}>
      <div style={{ maxWidth:1180, margin:'0 auto' }}>
        <Reveal><Eyebrow style={{ color:'#BCB2A6' }}>Le parcours</Eyebrow></Reveal>
        <Reveal delay={100}>
          <h2 className="pf-display-2" style={{ color:'#F2EEE8', marginTop:12, maxWidth:'20ch' }}>
            Simple, rapide, <em style={{ color:'#F2EEE8' }}>et sans mauvaise surprise.</em>
          </h2>
        </Reveal>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:28, marginTop:64 }} className="pf-steps-grid">
          {STEPS.map(([n,t,body],i)=>(
            <Reveal key={n} delay={i*90}>
              <div style={{ borderTop:'1px solid rgba(242,238,232,.22)', paddingTop:24, height:'100%' }}>
                <div className="pf-step-number" style={{ color:'#6C1714' }}>
                  <span style={{ color:'rgba(242,238,232,.9)' }}>{n}</span>
                </div>
                <h3 className="pf-h3" style={{ color:'#F2EEE8', fontStyle:'italic', marginTop:14 }}>{t}</h3>
                <p className="pf-body" style={{ color:'rgba(242,238,232,.74)', marginTop:12 }}>{body}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120}>
          <p className="pf-body-lg" style={{ color:'rgba(242,238,232,.7)', fontStyle:'italic', marginTop:54, maxWidth:'40ch' }}>
            Sélectifs, mais loyaux : quand un cabinet nous convainc, nous allons au bout.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* À qui on parle — profil recherché (deck slide 16, softened) */
const CRIT = [
  ['homme', 'Un dirigeant que l’on admire', "Passionné, engagé, entrepreneurial. Un A-player reconnu dans son écosystème : de ceux qu'on a envie de pousser plus loin, jamais de standardiser."],
  ['portefeuille', 'Un portefeuille de qualité', "Des produits que vous assumez, et au moins deux tiers de chiffre d'affaires récurrent."],
  ['hausse', 'Une taille significative', "Des encours à partir de 50 à 100 M€. Et nous savons être opportunistes en dessous."],
];

function Profil() {
  return (
    <section style={{ background:'#F2EEE8', padding:'120px 40px' }}>
      <div style={{ maxWidth:1180, margin:'0 auto' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:72, alignItems:'center' }} className="pf-profil-grid">
          <Reveal>
            <div>
              <Eyebrow>Le cabinet que nous cherchons</Eyebrow>
              <h2 className="pf-display-2" style={{ marginTop:14, maxWidth:'15ch' }}>
                Nous cherchons des maisons <em>que l'on admire.</em>
              </h2>
              <p className="pf-body-lg" style={{ color:'#5C5246', marginTop:24, maxWidth:'42ch' }}>
                Plus de 330 dossiers reçus depuis 2021, une quarantaine d'offres remises. Nous sommes exigeants sur ce qui compte, et souples sur le reste.
              </p>
              <p className="pf-title-sec" style={{ marginTop:22 }}>
                Vous ne cochez pas toutes les cases ? Parlons-en quand même.
              </p>
            </div>
          </Reveal>
          <Reveal delay={140}>
            <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
              {CRIT.map(([icon,t,body])=>(
                <div key={t} style={{ display:'flex', gap:20, alignItems:'flex-start', background:'#FAF8F4', border:'1px solid #E7E0D5', borderRadius:4, padding:'26px 26px' }}>
                  <PfIcon name={icon} size={40} tone="rouge" style={{ flexShrink:0, marginTop:2 }} />
                  <div>
                    <h3 className="pf-h3">{t}</h3>
                    <p className="pf-body" style={{ color:'#5C5246', marginTop:6 }}>{body}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* Cabinets membres + présence nationale */
const FIRMS = [
  ['Tourville','tourville.svg'],['LS Patrimoine','ls-patrimoine.svg'],['Haskell','haskell.svg'],
  ['Vendôme Investissement Conseil','vendome.svg'],['Alias Finance','alias-finance.svg'],['Asfidia','asfidia.svg'],
  ['Hortus','hortus.svg'],['Institut du Patrimoine','institut-du-patrimoine.svg'],['Patrimoine & Gestion','patrimoine-gestion.svg'],
  ['Rive Gauche Finance','rive-gauche-finance.svg'],['Torandell','torandell.svg'],['Valorial','valorial.svg'],
];
const CITIES = ['Paris','Lyon','Toulouse','Montpellier','Nantes','Rennes','Reims','Dijon','Biarritz','Lille','Caen','Angers','Saint-Étienne','Compiègne'];

function Cabinets() {
  return (
    <section id="cabinets" style={{ background:'#161616', padding:'120px 40px' }}>
      <div style={{ maxWidth:1180, margin:'0 auto', textAlign:'center' }}>
        <Reveal><Eyebrow style={{ color:'#BCB2A6' }}>Ils nous ont rejoints</Eyebrow></Reveal>
        <Reveal delay={100}>
          <h2 className="pf-display-2" style={{ color:'#F2EEE8', marginTop:12, maxWidth:'20ch', marginInline:'auto' }}>
            Ils nous ont rejoints. <em style={{ color:'#F2EEE8' }}>Ils sont restés eux-mêmes.</em>
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:'14px', marginTop:56 }} className="pf-firms-grid">
            {FIRMS.map(([name,file])=>(
              <div key={file} style={{ minHeight:100, display:'grid', placeItems:'center', padding:'22px 24px',
                border:'1px solid rgba(255,255,255,.1)', borderRadius:3, background:'#1C1A18' }}>
                <img src={`assets/logos/filiales/${file}`} alt={name} loading="lazy" style={{ maxHeight:46, maxWidth:'100%', objectFit:'contain', opacity:.92 }} />
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ marginTop:64, paddingTop:40, borderTop:'1px solid rgba(255,255,255,.1)' }}>
            <p className="pf-eyebrow" style={{ color:'#BCB2A6' }}>Présents partout en France</p>
            <p className="pf-body" style={{ color:'rgba(242,238,232,.7)', marginTop:18, lineHeight:2, maxWidth:'70ch', marginInline:'auto' }}>
              {CITIES.join('  ·  ')}
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* Ambition — transition vers le contact */
function Ambition() {
  return (
    <section style={{ position:'relative', background:'#161616', padding:'130px 40px', overflow:'hidden' }}>
      <Bg src="assets/img/engagement.jpg" position="center" opacity={0.55} />
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(18,18,18,.82), rgba(18,18,18,.94))' }} />
      <div style={{ position:'relative', maxWidth:1000, margin:'0 auto', textAlign:'center' }}>
        <Reveal>
          <div className="pf-monument" style={{ color:'#F2EEE8' }}>10 Md€</div>
        </Reveal>
        <Reveal delay={140}>
          <p className="pf-h2" style={{ color:'#F2EEE8', fontStyle:'italic', marginTop:22 }}>
            Notre ambition à moyen terme.
          </p>
        </Reveal>
        <Reveal delay={260}>
          <p className="pf-body-lg" style={{ color:'rgba(242,238,232,.78)', marginTop:20, maxWidth:'34ch', marginInline:'auto' }}>
            Le prochain cabinet à rejoindre le Groupe, c'est peut-être le vôtre.
          </p>
        </Reveal>
        <Reveal delay={360}>
          <div style={{ display:'flex', justifyContent:'center', marginTop:36, opacity:.7 }}>
            <Sillage color="rgba(242,238,232,.42)" size={420} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Parcours, Profil, Cabinets, Ambition });