// BSA Copilot — page components (3 home variations + 5 secondary pages)

// ============ HOME — Variation A: hero proposition de valeur, sticky CTA ============
const HomeA = () => (
  <>
    <section className="hero-a">
      <div className="container">
        <div className="hero-a-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="pill"><span style={{ width: 6, height: 6, background: 'var(--bsa-gold)', borderRadius: '50%' }}></span>Copilote IA pour appels d’offres</span>
            </div>
            <h1>Développez votre <em>chiffre d’affaires</em><br/>avec BSA Copilot.</h1>
            <p className="lede">73 % des appels d’offres sont gagnés par les 12 % qui répondent vite et bien. BSA Copilot vous met dans ces 12 %.</p>
            <div className="hero-actions">
              <button className="btn btn-primary btn-lg" onClick={() => window.scrollToCta && window.scrollToCta()}>Réserver une démo · 30 min</button>
              <button className="btn btn-dark btn-lg" onClick={() => window.go && window.go('product')}>Voir le produit →</button>
            </div>
          </div>
          <div>
            <div className="hero-shot">
              <img src="design/screen-dashboard.png" alt="Tableau de bord BSA Copilot — pipeline et potentiel CA" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <LogoStrip />
    <KpiBand />
    <CeoVideo />
    <StepsBlock />
    <FeaturesBlock intro={<SourceMarquee />} />
    <Pocket />
    <Testimonials />
    <PressBand />
    <TrustBand />
    <CtaBand />
    <Magnet />
    <FaqBlock />
  </>
);

// ============ HOME — Variation B: hero démo produit, CTA inline répété ============
const HomeB = () => (
  <>
    <section className="hero-b">
      <div className="container">
        <div className="hero-b-head">
          <span className="eyebrow gold"><span className="dot"></span>BSA Copilot · Démo produit</span>
          <h1>Développez votre <span style={{ color: 'var(--bsa-gold-deep)' }}>chiffre d’affaires</span> avec BSA Copilot.</h1>
          <p className="lede">Le copilote IA qui scanne, qualifie et rédige vos réponses aux marchés publics et privés. Pour les PME et ETI qui veulent gagner plus que la moyenne.</p>
          <div className="hero-actions">
            <button className="btn btn-primary btn-lg" onClick={() => window.scrollToCta && window.scrollToCta()}>Voir la démo en direct</button>
            <button className="btn btn-ghost btn-lg" onClick={() => window.go && window.go('pricing')}>Voir les tarifs</button>
          </div>
        </div>
        <div className="product-frame">
          <div className="chrome">
            <span></span><span></span><span></span>
            <span className="url">app.bsacopilot.com / pipeline</span>
          </div>
          <div className="product-frame-shot">
            <img src="design/screen-dashboard.png" alt="BSA Copilot — pipeline et détail d’un appel d’offres" />
          </div>
        </div>
      </div>
    </section>
    <KpiBand />
    {/* Inline CTA #1 */}
    <section className="section-sm" style={{ background: 'var(--surface-soft)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
        <div>
          <span className="eyebrow"><span className="dot"></span>Démo personnalisée</span>
          <div className="display-sm" style={{ marginTop: 8 }}>30 min, 0 pitch. Vous repartez avec un rapport PDF.</div>
        </div>
        <button className="btn btn-primary btn-lg" onClick={() => window.scrollToCta && window.scrollToCta()}>Réserver un créneau</button>
      </div>
    </section>
    <FeaturesBlock />
    {/* Inline CTA #2 */}
    <section className="section-sm dark" style={{ borderTop: '1px solid rgba(255,255,255,0.06)' }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
        <div>
          <span className="eyebrow gold"><span className="dot"></span>Démo personnalisée</span>
          <div className="display-sm" style={{ marginTop: 8, color: '#fff' }}>Branchez vos critères. Voyez votre pipeline rejoué.</div>
        </div>
        <button className="btn btn-primary btn-lg" onClick={() => window.scrollToCta && window.scrollToCta()}>Réserver un créneau →</button>
      </div>
    </section>
    <StepsBlock />
    <Testimonials />
    <LogoStrip />
    <TrustBand />
    <CtaBand />
    <Magnet />
    <FaqBlock />
  </>
);

// ============ HOME — Variation C: hero chiffres bruts, CTA modal ============
const HomeC = ({ openModal }) => (
  <>
    <section className="hero-c">
      <div className="container">
        <div className="hero-c-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="eyebrow gold"><span className="dot"></span>BSA Copilot</span>
            </div>
            <h1>Développez votre chiffre d’affaires.</h1>
            <p className="lede">BSA Copilot transforme la façon dont les PME et ETI répondent aux marchés publics et privés. Voici ce que ça donne, en moyenne, après 6 mois.</p>
            <div className="hero-actions">
              <button className="btn btn-primary btn-lg" onClick={openModal}>Réserver une démo · 30 min</button>
              <button className="btn btn-ghost btn-lg" onClick={() => window.go && window.go('usecases')}>Voir les études de cas</button>
            </div>
            <div className="hero-meta">
              <span className="mono">30 clients · 4 secteurs · 12 mois de recul</span>
            </div>
          </div>
          <div className="figures">
            <div className="fig">
              <span className="num gold">×4,5</span>
              <span className="label">d’AO traités par mois, en moyenne</span>
              <span className="delta">↗ +350 %</span>
            </div>
            <div className="fig">
              <span className="num">19 %</span>
              <span className="label">taux de transformation post-Copilot (médiane secteur : 9 %)</span>
              <span className="delta">↗ +10 pts</span>
            </div>
            <div className="fig">
              <span className="num">62 h</span>
              <span className="label">économisées par mois et par chargé d’affaires</span>
              <span className="delta">↗ −74 %</span>
            </div>
            <div className="fig">
              <span className="num gold">2,4 M€</span>
              <span className="label">de pipeline supplémentaire généré / client / an</span>
              <span className="delta">↗ moyenne</span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <LogoStrip />
    <FeaturesBlock />
    <StepsBlock />
    <Testimonials />
    <TrustBand />
    <section className="section dark">
      <div className="container" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
        <span className="eyebrow gold"><span className="dot"></span>Démo personnalisée</span>
        <h2 className="display-lg" style={{ marginTop: 16, color: '#fff' }}>Vos chiffres, dans 30 minutes.</h2>
        <p className="lede" style={{ margin: '16px auto 32px', color: 'rgba(255,255,255,0.72)' }}>
          On branche votre profil sur le copilote. On rejoue 12 mois de BOAMP. Vous voyez le pipeline manqué, en €.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary btn-lg" onClick={openModal}>Réserver mon audit AO →</button>
          <button className="btn btn-dark btn-lg" onClick={() => window.go('resources')}>Télécharger le playbook</button>
        </div>
      </div>
    </section>
    <Magnet />
    <FaqBlock />
  </>
);

// ============ PRODUIT ============
const ProductPage = () => (
  <>
    <section className="page-head">
      <div className="container">
        <span className="eyebrow gold"><span className="dot"></span>Produit</span>
        <h1>Quatre couches. Une seule interface. Zéro friction.</h1>
        <p className="lede">Détection, qualification, rédaction, pilotage. Le copilote couvre toute la chaîne de vie d’un AO, de la veille BOAMP au reporting.</p>
      </div>
    </section>
    <KpiBand />
    <FeaturesBlock />
    <section className="section">
      <div className="container">
        <div className="integ-grid">
          <div className="integ-copy">
            <span className="eyebrow"><span className="dot"></span>Intégration Hub</span>
            <h2 className="display-md" style={{ marginTop: 12, marginBottom: 16, maxWidth: '16ch' }}>Connectez BSA à vos outils existants.</h2>
            <p className="lede">CRM, messagerie, stockage documentaire. BSA Copilot s’intègre à votre stack sans friction. Les AO détectés et les livrables circulent là où vos équipes travaillent déjà.</p>
            <div className="integ-tags">
              {['Salesforce', 'HubSpot', 'Pipedrive', 'Slack', 'Teams', 'Notion', 'Google Drive', 'SharePoint', 'Zapier', 'API REST', 'Webhooks', 'CSV / Excel'].map(n => (
                <span key={n} className="integ-tag">{n}</span>
              ))}
            </div>
          </div>
          <div className="integ-vis">
            <img src="design/screen-integrations.png" alt="Intégration Hub — BSA connecté à vos outils" />
          </div>
        </div>
      </div>
    </section>
    <CtaBand />
  </>
);

// ============ USE CASES ============
const UseCasesPage = () => (
  <>
    <section className="page-head">
      <div className="container">
        <span className="eyebrow gold"><span className="dot"></span>Cas d’usage</span>
        <h1>Quatre secteurs. Quatre façons de gagner plus.</h1>
        <p className="lede">Chaque secteur a ses contraintes : montant moyen, fréquence, complexité du DCE. Le copilote s’y adapte.</p>
      </div>
    </section>
    <section className="section">
      <div className="container">
        <div className="uc-grid">
          {[
            { tag: 'BTP & Construction', t: 'Gagner sans gonfler les équipes commerciales.', s: [['×3,8', 'AO traités'], ['+42 %', 'taux de gain'], ['1,9 M€', 'pipeline / mois']] },
            { tag: 'Services & Conseil', t: 'Répondre vite, et seulement aux bons.', s: [['×5,2', 'AO traités'], ['+11 pts', 'transformation'], ['620 k€', 'pipeline / mois']] },
            { tag: 'Industrie & Énergie', t: 'Couvrir BOAMP, JOUE et plateformes privées.', s: [['×2,9', 'AO traités'], ['+34 %', 'taux de réponse'], ['3,2 M€', 'pipeline / mois']] },
            { tag: 'Cabinets enterprise', t: 'L’AO comme nouveau canal d’acquisition.', s: [['×4,1', 'AO traités'], ['+27 %', 'win rate'], ['1,1 M€', 'pipeline / mois']] },
          ].map((uc, i) => (
            <div className="uc" key={i}>
              <span className="tag">{uc.tag}</span>
              <h3>{uc.t}</h3>
              <p style={{ font: 'var(--t-body-sm)', color: 'var(--fg-3)' }}>Étude de cas chiffrée : métriques moyennes observées sur 12 mois.</p>
              <div className="stats">
                {uc.s.map((s, j) => (
                  <div key={j}>
                    <div className="n">{s[0]}</div>
                    <div className="l">{s[1]}</div>
                  </div>
                ))}
              </div>
              <div className="uc-cta">
                <button className="btn btn-ghost btn-sm" style={{ alignSelf: 'start' }}>Lire l’étude →</button>
                <span className="uc-soon">En cours de rédaction · arrive bientôt</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
    <PressBand videos={[
      { id: '4rauQNy63eM', mount: 'uc-yt-short', short: true },
      { id: '8XspMBAgllc', mount: 'uc-yt-wide', short: false },
    ]} />
    <Testimonials />
    <CtaBand />
  </>
);

// ============ PRICING ============
const PricingPage = () => (
  <>
    <section className="page-head">
      <div className="container">
        <span className="eyebrow gold"><span className="dot"></span>Tarifs</span>
        <h1>Une offre unique, calibrée sur vos enjeux.</h1>
        <p className="lede">Pas de grille figée : chaque accompagnement BSA Copilot est dimensionné selon vos volumes d’AO, vos secteurs et votre organisation. Tarif sur devis, après un audit gratuit de 30 minutes.</p>
      </div>
    </section>
    <section className="section">
      <div className="container">
        <div className="plan-solo">
          <div className="plan-solo-main">
            <span className="eyebrow gold"><span className="dot"></span>BSA Copilot</span>
            <h2 className="display-md" style={{ marginTop: 12, marginBottom: 12 }}>L’offre complète, sur devis.</h2>
            <p className="lede" style={{ marginBottom: 0 }}>
              Une solution unique qui couvre toute la chaîne de l’appel d’offres : détection, qualification, rédaction et pilotage. Le périmètre et le tarif s’adaptent à votre structure.
            </p>
            <div className="plan-solo-cta">
              <a className="btn btn-primary btn-lg" href="https://2ejpb0.share-eu1.hsforms.com/20esujLC-RPCL-_ZZD9VdKw" target="_blank" rel="noopener noreferrer">Obtenir mon devis →</a>
              <span className="plan-solo-note">Audit gratuit · 30 min · sans engagement</span>
            </div>
          </div>
          <div className="plan-solo-feats">
            <div className="plan-solo-feats-title">Tout est inclus</div>
            <ul>
              <li>Détection sur 40+ sources (BOAMP, JOUE, plateformes privées)</li>
              <li>Experts en appel d’offres dédiés à l’accompagnement</li>
              <li>AO qualifiés et scorés en illimité</li>
              <li>Rédaction IA illimitée + bibliothèque de réponses</li>
              <li>Pipeline temps réel & reporting</li>
              <li>Intégrations CRM, Slack, Teams, Drive</li>
              <li>Sources privées sur mesure</li>
              <li>SSO, audit logs, conformité RGPD</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <FaqBlock />
    <CtaBand />
  </>
);

// ============ RESOURCES ============
const ResourcesPage = () => (
  <>
    <section className="page-head">
      <div className="container">
        <span className="eyebrow gold"><span className="dot"></span>Ressources</span>
        <h1>Le manuel d’opérations qu’on aurait aimé avoir.</h1>
        <p className="lede">Playbooks, études de cas chiffrées, benchmarks sectoriels. Tout ce qu’on apprend chez nos clients, partagé sans paywall.</p>
      </div>
    </section>
    <section className="section">
      <div className="container">
        <div className="res-grid">
          {[
            { tag: 'Playbook', t: '+5 % de conversion sur vos réponses AO', d: 'Le framework de scoring qu’utilisent nos clients pour dire non plus vite, et oui mieux.', m: '42 p · PDF' },
            { tag: 'Étude de cas', t: 'Comment tripler son taux de gain en 9 mois', d: 'De 4 AO/mois à 18, et de 11 % à 27 % de transformation.', m: '12 p · PDF' },
            { tag: 'Benchmark', t: 'Marchés publics 2026 — État des lieux PME / ETI', d: 'Volumes BOAMP, taux d’attribution, médianes de prix par CPV.', m: '24 p · PDF' },
            { tag: 'Webinaire', t: 'Anatomie d’un DCE : les 17 critères qui pèsent', d: 'Replay 45 min avec Émile Pinson + un dirigeant client.', m: '45 min · vidéo' },
            { tag: 'Article', t: 'Pourquoi 73 % des AO sont gagnés par 12 % des répondants', d: 'Une plongée dans la statistique des marchés publics français.', m: '8 min · lecture' },
            { tag: 'Outil', t: 'Calculateur ROI — combien BSA Copilot vaut pour vous', d: 'Entrez votre volume d’AO actuel, on simule l’impact.', m: 'interactif' },
          ].map((r, i) => (
            <div className="res" key={i}>
              <div className="thumb thumb-soon">En cours de rédaction</div>
              <div className="body">
                <span className="tag">{r.tag}</span>
                <h3>{r.t}</h3>
                <p>{r.d}</p>
                <span className="meta">{r.m}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
    <Magnet />
  </>
);

// ============ ABOUT ============
const AboutPage = () => (
  <>
    <section className="page-head">
      <div className="container">
        <span className="eyebrow gold"><span className="dot"></span>À propos</span>
        <h1>Construit par des opérateurs. Pour des opérateurs.</h1>
        <p className="lede">BSA Partners est née de la frustration : 73 % des AO publics sont gagnés par 12 % des répondants. Le reste laisse l’argent sur la table. On a construit le copilote qu’on aurait voulu avoir.</p>
      </div>
    </section>
    <section className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <span className="eyebrow"><span className="dot"></span>Notre mission</span>
            <h2 className="display-md" style={{ marginTop: 12 }}>Rendre l’accès aux marchés publics aussi fluide qu’un canal d’acquisition normal.</h2>
          </div>
          <div>
            <p className="lede">Les marchés publics français représentent 200+ milliards d’euros par an. La majorité est captée par les acteurs qui ont les moyens d’avoir un bureau d’études dédié.</p>
            <p style={{ font: 'var(--t-body-lg)', color: 'var(--fg-2)', marginTop: 24 }}>BSA Copilot redistribue cette capacité aux PME et ETI : un bureau d’études virtuel, branché sur 40+ sources, qui transforme un DCE de 412 pages en un brief actionnable.</p>
          </div>
        </div>
      </div>
    </section>
    <section className="section" style={{ background: 'var(--surface-soft)' }}>
      <div className="container">
        <span className="eyebrow"><span className="dot"></span>Founder & Management Team</span>
        <h2 className="display-md" style={{ marginTop: 12, marginBottom: 16, maxWidth: '24ch' }}>Une équipe capable d’exécuter, pas juste de réfléchir.</h2>
        <p className="lede" style={{ marginBottom: 32 }}>BSA est portée par une équipe fondatrice expérimentée qui combine business development, SaaS et expertise de la commande publique.</p>
        <div className="team-hero">
          <img src="design/team-group.png" alt="L’équipe BSA Copilot" />
        </div>
        <div className="team-grid team-grid-4">
          {[
            {
              n: 'Émile Pinson',
              r: 'CEO & Founder',
              img: 'design/team-emile-v2.png',
              li: 'https://www.linkedin.com/in/emilepinson/',
              bio: 'Ex-Vinci, Émile a généré plus de 25 M€ via les appels d’offres et apporte une connaissance opérationnelle approfondie du marché. Lauréat Réseau Entreprendre 2025, il pilote la stratégie, les levées de fonds et le développement commercial.',
            },
            {
              n: 'Paul Bourgues',
              r: 'Chief Product Officer',
              img: 'design/team-paul-v3.png',
              bio: 'Expert de la commande publique, Paul porte la vision produit, la roadmap et le product-market fit.',
            },
            {
              n: 'Joffroy Louchart',
              r: 'Advisor',
              img: 'design/team-joffroy-v2.png',
              bio: 'Ex-CEO de Finalcad (Next40, +70 M$ levés), Joffroy apporte une expertise de premier plan en stratégie go-to-market et scaling international.',
            },
            {
              n: 'Pierre Beunardeau',
              r: 'Chief Technology Officer',
              img: 'design/team-pierre-v2.png',
              bio: 'Spécialisé en IA et architectures SaaS scalables, Pierre porte la stratégie technique et l’infrastructure de la plateforme.',
            },
            {
              n: 'Mickaël Alves DeAlmeida',
              r: 'Head of Sales',
              img: 'design/team-mickael.png',
              bio: 'Fort d’une solide expérience en business development, il structure la croissance, l’organisation commerciale et l’accélération du revenu.',
            },
            {
              n: 'Experts en appels d’offres',
              r: 'Pôle accompagnement client',
              img: 'design/team-experts-ao.png',
              imgPos: 'center 30%',
              bio: 'Dédiés à la relation client, nos experts cumulent plusieurs années d’expérience sur les marchés publics et privés, avec des réussites concrètes. Ils accompagnent chaque client de la détection à la signature.',
            },
          ].map((t, i) => (
            <div className="team-card" key={i}>
              <div className="photo">{t.img ? <img src={t.img} alt={t.n} style={t.imgPos ? { objectPosition: t.imgPos } : null} /> : <span className="photo-empty">Photo à venir</span>}</div>
              <div className="body">
                <div className="name">
                  {t.n}
                  {t.li &&
                  <a className="team-linkedin" href={t.li} target="_blank" rel="noopener noreferrer" aria-label={`LinkedIn de ${t.n}`}>
                      <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></svg>
                    </a>}
                </div>
                <div className="role">{t.r}</div>
                <p className="bio">{t.bio}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
    <section className="section dark">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
          {[
            ['2023', 'Année de fondation'],
            ['30', 'Clients PME, ETI, grands groupes'],
            ['10', 'Personnes'],
          ].map(([n, l], i) => (
            <div key={i} style={{ background: 'var(--ink-900)', padding: 32 }}>
              <div className="num-xl" style={{ color: 'var(--bsa-gold)', fontSize: 48 }}>{n}</div>
              <div style={{ font: 'var(--t-body-sm)', color: 'rgba(255,255,255,0.6)', marginTop: 8 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
    <PressBand />
    <CtaBand />
  </>
);

// ============ MENTIONS LÉGALES ============
const LegalPage = () => (
  <>
    <section className="page-head">
      <div className="container">
        <span className="eyebrow gold"><span className="dot"></span>Informations légales</span>
        <h1>Mentions légales</h1>
        <p className="lede">Mentions légales et traitement des données personnelles.</p>
      </div>
    </section>
    <section className="section">
      <div className="container legal-doc">
        <div className="legal-cols">
          <div className="legal-block">
            <h3>Société</h3>
            <p>
              <strong>BSA PARTNERS</strong><br />
              8 rue Grande<br />
              77710 Paley<br />
              France
            </p>
            <p><a href="mailto:contact@bsacopilot.com">contact@bsacopilot.com</a></p>
          </div>
          <div className="legal-block">
            <h3>Hébergeur</h3>
            <p>
              <strong>GOOGLE CLOUD FRANCE</strong><br />
              8 rue de Londres, 75009 Paris, France<br />
              SIRET 910 738 392 00018
            </p>
          </div>
        </div>
        <div className="legal-block">
          <h3>Traitement des données</h3>
          <p>Les informations recueillies font l’objet d’un traitement informatique destiné à répondre à vos questions. Le destinataire des données est BSA Partners.</p>
          <p>Conformément à la loi « informatique et libertés » du 6 janvier 1978 modifiée en 2004, ainsi qu’à la Réglementation Européenne pour la Protection des Données 2016/679 (General Data Protection Regulation) mise en application le 25 mai 2018, vous bénéficiez d’un droit d’accès et de rectification aux informations qui vous concernent, que vous pouvez exercer grâce au formulaire de contact ou en vous adressant à BSA Partners — <a href="mailto:contact@bsacopilot.com">contact@bsacopilot.com</a>.</p>
          <p>Vous pouvez également vous opposer au traitement des données vous concernant.</p>
        </div>
      </div>
    </section>
  </>
);

Object.assign(window, { HomeA, HomeB, HomeC, ProductPage, UseCasesPage, PricingPage, ResourcesPage, AboutPage, LegalPage });