// BSA Copilot — shared UI primitives
// Logo, Nav, Footer, common KPI/testimonials/steps/cta blocks
// Globals expected: window.copy (the copy bank)

const Logo = ({ dark = true }) =>
<a href="#" className="brand" onClick={(e) => {e.preventDefault();window.go && window.go('home');}}>
    <img className="mark" src="design/bsa-logo.png" alt="BSA" />
    <span><strong>BSA</strong> <span className="copilot">Copilot</span></span>
  </a>;


const NAV_ITEMS = [
{ id: 'home', label: 'Accueil' },
{ id: 'product', label: 'Produit' },
{ id: 'usecases', label: 'Cas d\u2019usage' },
{ id: 'pricing', label: 'Tarifs' },
{ id: 'blog', label: 'Blog' },
{ id: 'resources', label: 'Ressources' },
{ id: 'about', label: 'À propos' }];


const Nav = ({ current, onNav, onCta }) =>
<header className="nav">
    <Logo />
    <nav className="links">
      {NAV_ITEMS.map((it) =>
    <a key={it.id} href="#" className={current === it.id ? 'active' : ''}
    onClick={(e) => {e.preventDefault();onNav(it.id);}}>{it.label}</a>
    )}
    </nav>
    <div className="nav-cta">
      <a href="https://app.bsacopilot.com/" target="_blank" rel="noopener noreferrer" className="nav-login">Connexion</a>
      <button className="btn btn-primary btn-sm" onClick={onCta}>Réserver une démo</button>
    </div>
  </header>;


const Footer = ({ onNav }) =>
<footer className="footer">
    <div className="container">
      <div className="grid">
        <div className="col">
          <div className="brand"><img className="mark" src="design/bsa-logo.png" alt="BSA" /> BSA Copilot</div>
          <p style={{ maxWidth: 32 + 'ch', marginTop: 8 }}>
            Copilote IA qui détecte, analyse et rédige vos réponses aux appels d’offres publics et privés.
          </p>
          <div style={{ marginTop: 24, display: 'flex', gap: 8 }}>
            <a className="footer-li" href="https://www.linkedin.com/in/emilepinson/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
              <svg viewBox="0 0 24 24" width="18" height="18" 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>
            <a className="footer-li mail" href="mailto:contact@bsacopilot.com" aria-label="Nous écrire — contact@bsacopilot.com" title="contact@bsacopilot.com">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m2 7 10 6 10-6"></path></svg>
            </a>
          </div>
        </div>
        <div className="col">
          <h4>Produit</h4>
          <ul>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('product');}}>Détection</a></li>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('product');}}>Analyse DCE</a></li>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('product');}}>Rédaction IA</a></li>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('product');}}>Pipeline</a></li>
          </ul>
        </div>
        <div className="col">
          <h4>Solutions</h4>
          <ul>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('usecases');}}>BTP & Construction</a></li>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('usecases');}}>Services & Conseil</a></li>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('usecases');}}>Industrie</a></li>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('pricing');}}>Tarifs</a></li>
          </ul>
        </div>
        <div className="col">
          <h4>Ressources</h4>
          <ul>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('resources');}}>Playbook AO</a></li>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('usecases');}}>Études de cas</a></li>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('blog');}}>Blog</a></li>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('resources');}}>Documentation</a></li>
          </ul>
        </div>
        <div className="col">
          <h4>Société</h4>
          <ul>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('about');}}>À propos</a></li>
            <li><a href="#" onClick={(e) => {e.preventDefault();onNav('about');}}>Carrières</a></li>
            <li><a href="mailto:contact@bsacopilot.com">Contact</a></li>
          </ul>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 BSA Partners — Tous droits réservés</span>
        <span><a href="#" onClick={(e) => {e.preventDefault();onNav('legal');}}>Mentions légales</a> · <a href="#" onClick={(e) => {e.preventDefault();onNav('cgu');}}>CGU</a> · <a href="#" onClick={(e) => {e.preventDefault();onNav('privacy');}}>Confidentialité</a></span>
      </div>
    </div>
  </footer>;


const KpiBand = ({ tone }) =>
<section className="kpi-band">
    <div className="container">
      <div className="grid">
        <div className="cell"><span className="num gold">847</span><span className="label">AO pertinents détectés ce mois</span></div>
        <div className="cell"><span className="num">+38 %</span><span className="label">de taux de réponse vs. baseline secteur</span></div>
        <div className="cell"><span className="num">14 h</span><span className="label">économisées par appel d’offres traité</span></div>
        <div className="cell"><span className="num">2,4 M€</span><span className="label">de pipeline généré par client / an</span></div>
      </div>
    </div>
  </section>;


const StepsBlock = () =>
<section className="section">
    <div className="container">
      <div className="steps-head">
        <div>
          <span className="eyebrow"><span className="dot"></span>Comment ça marche</span>
          <h2>Du scan BOAMP à la réponse signée. En quatre temps.</h2>
        </div>
        <p className="lede" style={{ maxWidth: '40ch' }}>
          Connectez vos critères, le copilote fait le reste. Vous gardez le contrôle éditorial sur chaque livrable.
        </p>
      </div>
      <div className="steps">
        {[
      { n: '01', t: 'Détection', d: 'Le copilote scanne BOAMP, JOUE et 40+ plateformes chaque heure. Filtrage par CPV, géo, montant.', img: 'design/step-profil.png' },
      { n: '02', t: 'Qualification', d: 'Scoring de pertinence sur vos critères de gain. Les 17 points qui pèsent dans chaque DCE, extraits.', img: 'design/step-detection.png' },
      { n: '03', t: 'Rédaction', d: 'Trame de réponse générée à partir de votre bibliothèque de réponses passées et du DCE.', img: 'design/step-redaction.png' },
      { n: '04', t: 'Suivi', d: 'Pipeline temps réel, deadlines, équipe. Reporting export CSV / API CRM.', img: 'design/step-suivi.png' }].
      map((s) =>
      <div className="step" key={s.n}>
            <span className="num">ÉTAPE {s.n}</span>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
            {s.img ?
        <div className="step-shot"><img src={s.img} alt={`Capture produit — ${s.t}`} /></div> :
        <div className="ph">[capture produit — étape {s.n}]</div>}
          </div>
      )}
      </div>
    </div>
  </section>;


const FeaturesBlock = ({ intro = null }) =>
<section className="section">
    <div className="container">
      <div style={{ marginBottom: 16 }}>
        <span className="eyebrow gold"><span className="dot"></span>Le produit</span>
        <h2 className="display-md" style={{ marginTop: 12, maxWidth: '20ch' }}>
          Toute la chaîne de l’appel d’offres, pilotée par un seul copilote.
        </h2>
      </div>
      {intro}
      <div className="feat-block">
        <div className="copy">
          <span className="eyebrow">Détection</span>
          <h3>Tout ce qui sort, en moins de 60 minutes.</h3>
          <p>BOAMP, JOUE, AWS-Achat, Marchés Sécurisés, Achatpublic, plateformes privées scrapées. Un seul flux, dédupliqué.</p>
          <ul>
            <li>40+ sources branchées en natif, mises à jour horaires</li>
            <li>Filtres CPV, code postal, montant, type de marché</li>
            <li>Alertes Slack, Teams, email , en temps réel</li>
          </ul>
        </div>
        <div className="feat-vis has-shot">
          <img className="feat-shot" src="design/screen-detection.png" alt="Veille marchés — détection automatique des AO" />
        </div>
      </div>
      <div className="feat-block flip">
        <div className="copy">
          <span className="eyebrow">Analyse DCE</span>
          <h3>412 pages devenues 17 critères qui pèsent.</h3>
          <p>Le copilote lit le DCE, extrait les critères de jugement, les seuils éliminatoires, les pièces obligatoires.</p>
          <ul>
            <li>Détection automatique des critères techniques et financiers</li>
            <li>Score de compatibilité avec votre profil entreprise</li>
            <li>Comparaison historique avec les AO similaires gagnés / perdus</li>
          </ul>
        </div>
        <div className="feat-vis has-shot">
          <img className="feat-shot" src="design/screen-analyse.png" alt="Analyse DCE — score IA et critères analysés" />
        </div>
      </div>
      <div className="feat-block">
        <div className="copy">
          <span className="eyebrow">Rédaction IA</span>
          <h3>La trame qui aurait pris trois jours, en quarante minutes.</h3>
          <p>À partir de votre bibliothèque de réponses passées et du DCE, le copilote génère une trame de mémoire technique cohérente.</p>
          <ul>
            <li>Bibliothèque de réponses indexée et réutilisable</li>
            <li>Génération de trame structurée critère par critère</li>
            <li>Édition collaborative, versioning, export Word / PDF</li>
          </ul>
        </div>
        <div className="feat-vis has-shot">
          <img className="feat-shot" src="design/screen-redaction.png" alt="Rédaction IA — éditeur de mémoire technique" />
        </div>
      </div>
    </div>
  </section>;


const Testimonials = () =>
<section className="section">
    <div className="container">
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <span className="eyebrow"><span className="dot"></span>Témoignages</span>
        <h2 className="display-md" style={{ marginTop: 12 }}>
          Découvrez les succès de nos clients grâce à BSA
        </h2>
      </div>
      <div className="result-grid">
        {[
      { fig: '51 058,75 €', client: 'J&CO', desc: 'BSA a permis à notre client J&CO de remporter un marché d’une valeur de 51 058,75 €.' },
      { fig: 'Lauréat 2025', client: 'Réseau Entreprendre', logo: 'design/logo-reseau-entreprendre.png', desc: 'Nous sommes Lauréats 2025 de Réseau Entreprendre pour notre projet innovant.' },
      { fig: '199 315 €', client: 'Altitude TS', logo: 'design/logo-altitude.png', desc: 'Grâce à BSA, Altitude TS a généré un chiffre d’affaires de 199 315 € en combinant les secteurs Privé et Public.' },
      { fig: '2 M€ de pipeline', client: 'Zetos', logo: 'design/logo-zetos.png', bleed: true, desc: 'Nous avons généré en 3 mois une pipeline de projets de plus de 2 millions d’euros pour le client Zetos.' }].
      map((r, i) =>
      <div className="result-card" key={i}>
            {r.logo
              ? <div className={`result-logo has-img${r.bleed ? ' bleed' : ''}`}><img src={r.logo} alt={r.client} /></div>
              : <div className="result-logo wordmark"><span>{r.client}</span></div>}
            <div className="result-fig">{r.fig}</div>
            <p className="result-desc">{r.desc}</p>
          </div>
      )}
      </div>
      <div className="case-studies">
        <div className="case-col">
          <img src="design/case-ligne18.png" alt="Use case 1 — Ligne 18 du Grand Paris Express (BSA × Vinci Construction)" />
          <div className="case-text">
            <h3>Ligne 18 du Grand Paris Express</h3>
            <div className="case-client">Client : VINCI Construction & Bysteel</div>
            <p>Dans le cadre de la réalisation des trois gares aériennes de la Ligne 18 du Grand Paris Express, VINCI Construction et son cotraitant Bysteel recherchaient des entreprises spécialisées pour sécuriser les opérations de montage de la charpente métallique.</p>
            <p>Sur ce chantier, BSA a déroulé l’ensemble de son process : détection de l’opportunité, qualification du besoin, accompagnement à la réponse et suivi jusqu’à la contractualisation.</p>
            <div className="case-sub">Résultats</div>
            <ul>
              <li>Opportunité détectée et qualifiée en amont</li>
              <li>Gain de temps pour les équipes travaux</li>
              <li>Sécurisation des opérations de chantier</li>
              <li>Respect des délais du projet</li>
            </ul>
          </div>
        </div>
        <div className="case-col">
          <img src="design/case-pierrefitte.png" alt="Use case 2 — Isolation extérieure de la mairie de Pierrefitte-sur-Seine" />
          <div className="case-text">
            <h3>Isolation thermique extérieure Pierrefitte-sur-Seine</h3>
            <div className="case-client">Client : Ville de Pierrefitte-sur-Seine</div>
            <p>La Ville de Pierrefitte-sur-Seine recherchait une entreprise spécialisée pour réaliser les travaux d’isolation thermique par l’extérieur (ITE) de plusieurs bâtiments municipaux.</p>
            <p>BSA a identifié l’opportunité, analysé le dossier, mis en relation l’entreprise adaptée et l’a accompagnée dans sa réponse jusqu’à l’attribution du marché.</p>
            <div className="case-sub">Résultats</div>
            <ul>
              <li>Marché remporté pour 505 317,75 €</li>
              <li>Détection et qualification du marché</li>
              <li>Réponse optimisée par BSA</li>
              <li>Accompagnement jusqu’à la contractualisation</li>
            </ul>
          </div>
        </div>
      </div>
      <div className="cc-compare">
        <div className="cc-head">
          <span className="eyebrow"><span className="dot"></span>Cas clients similaires à la vôtre</span>
          <p className="cc-sub">Chiffres réels de clients existants. BSA Copilot accompagne +30 clients.</p>
        </div>
        {[
          {
            client: 'Société Atlas Bâtiment', secteur: 'BTP général',
            before: 'Structuration de réponse aux appels d’offres sans nouveaux outils IA',
            bRep: '10', bClose: '0 %',
            after: '+500 k€ de CA signé en 8 mois de collaboration',
            aRep: '6', aClose: '17 %',
            quote: 'On répondait aux AO sans méthode. BSA nous a apporté l’expertise et les outils qu’on n’avait pas. Résultat : +500 k€ signés en 8 mois.',
          },
          {
            client: 'Société Bulldozer', secteur: 'Marketing',
            before: 'Pas de dossier d’AO remporté',
            bRep: '10', bClose: '0 %',
            after: '+5 M€ dans la pipeline en 3 mois',
            aRep: '8', aClose: 'En cours',
            quote: 'On savait que les AO marketing étaient un canal sous-exploité, mais on n’arrivait pas à les remporter. BSA nous a ouvert un pipeline de 5 M€ en 3 mois.',
          },
          {
            client: 'Société J&Co', secteur: 'BTP, corps d’état secondaire',
            before: 'Aucune structuration de réponse aux appels d’offres',
            bRep: '0', bClose: '0 %',
            after: '+50 % sur leur chiffre d’affaires en 6 mois',
            aRep: '1', aClose: '100 %',
            quote: 'Le corps d’état secondaire est ultra-concurrentiel. BSA a structuré notre démarche AO et fait grimper notre CA de +50 % en 6 mois.',
          },
        ].map((c, i) => (
          <div className="cc-row" key={i}>
            <div className="cc-profile">
              <div className="cc-client">{c.client}</div>
              <span className="cc-tag">{c.secteur}</span>
            </div>
            <div className="cc-states">
              <div className="cc-state before">
                <div className="cc-state-label">Avant BSA</div>
                <p className="cc-state-desc">{c.before}</p>
                <div className="cc-metrics">
                  <div><span className="cc-m-label">Réponses</span><span className="cc-m-val">{c.bRep}</span></div>
                  <div><span className="cc-m-label">Closing</span><span className="cc-m-val">{c.bClose}</span></div>
                </div>
              </div>
              <div className="cc-arrow" aria-hidden="true">→</div>
              <div className="cc-state after">
                <div className="cc-state-label">Avec BSA</div>
                <p className="cc-state-desc">{c.after}</p>
                <div className="cc-metrics">
                  <div><span className="cc-m-label">Réponses</span><span className="cc-m-val">{c.aRep}</span></div>
                  <div><span className="cc-m-label">Closing</span><span className="cc-m-val">{c.aClose}</span></div>
                </div>
              </div>
            </div>
            <blockquote className="cc-quote">{c.quote}</blockquote>
          </div>
        ))}
      </div>
    </div>
  </section>;


const CLIENT_LOGOS = [
{ name: 'Zetos', img: 'design/logo-zetos.png' },
{ name: 'J&Co' },
{ name: 'Altitude Travaux Spéciaux', img: 'design/logo-altitude.png' },
{ name: 'IRIS', img: 'design/client-iris.png' },
{ name: 'VINCI', img: 'design/client-vinci.png' },
{ name: 'Bysteel', img: 'design/client-bysteel.png' },
{ name: 'BE', img: 'design/client-be.png' },
{ name: 'ORMA Bâtiment', img: 'design/client-orma2.png' },
{ name: 'Studio Réverbère', img: 'design/client-studio-reverbere2.png' },
{ name: 'IA Reshape', img: 'design/client-ia-reshape.png' },
{ name: 'Eiffage', img: 'design/client-eiffage.png' },
{ name: 'Humoon', img: 'design/client-humoon.png' },
{ name: 'Tartenson', img: 'design/client-tartenson.png' },
{ name: 'Climat-CVC', img: 'design/client-climat-cvc.png' },
{ name: 'Delval Frères', img: 'design/client-delval-freres.png' },
{ name: 'Atex Renov', img: 'design/client-atex-renov.png' },
{ name: 'Tak Renov', img: 'design/client-tak-renov.png' }];


const LogoMark = ({ name, img, style }) =>
img
  ? <img className="logo-mark-img" src={img} alt={name} />
  : <span className="logo-mark" style={style}>{name}</span>;


const SOURCE_LOGOS = [
{ name: 'BOAMP', img: 'design/src-boamp.png' },
{ name: 'EUR-Lex', img: 'design/src-eurlex.png' },
{ name: 'PLACE', img: 'design/src-place.png' },
{ name: 'Maximilien', img: 'design/src-maximilien.png' },
{ name: 'AchatPublic', img: 'design/src-achatpublic.png' },
{ name: 'Avenue-Web Systèmes', img: 'design/src-avenueweb.png' },
{ name: 'Marchés Sécurisés', img: 'design/src-marchessecurises.png' },
{ name: 'e-marchespublics', img: 'design/src-emarches.png' },
{ name: 'marches-demat', img: 'design/src-marchesdemat.png' },
{ name: 'xmarchés', img: 'design/src-xmarches.png' },
{ name: 'ATEXO', img: 'design/src-atexo.png' },
{ name: 'Klekoon', img: 'design/src-klekoon.png' },
{ name: 'SafeTender', img: 'design/src-safetender.png' },
{ name: 'APProch', img: 'design/src-approch.png' }];

const SourceMarquee = () => {
  const loop = [...SOURCE_LOGOS, ...SOURCE_LOGOS];
  return (
    <div className="hero-a-trust hero-a-trust--inline source-strip">
      <div className="label">Sources connectées</div>
      <div className="source-marquee">
        <div className="source-marquee-track">
          {loop.map((l, i) => (
            <div className="source-chip" key={i}>
              <img src={l.img} alt={l.name} />
            </div>
          ))}
        </div>
      </div>
      <div className="sources-more">+ 40 autres sources d’appels d’offres publics, semi-publics et privés</div>
    </div>);

};

const LogoStrip = ({ dark = false, label = 'Les clients que nous avons accompagnés' }) => {
  const mid = Math.ceil(CLIENT_LOGOS.length / 2);
  const rowA = CLIENT_LOGOS.slice(0, mid);
  const rowB = CLIENT_LOGOS.slice(mid);
  const loopA = [...rowA, ...rowA];
  const loopB = [...rowB, ...rowB];
  return (
    <div className={`logo-marquee-wrap ${dark ? 'dark' : ''}`}>
      <div className="container">
        <div className="logo-marquee-head">
          <div className="logo-marquee-label">{label}</div>
          <div className="logo-marquee-count">
            <span className="num">35<span className="plus">+</span></span>
            <span className="cap">clients accompagnés</span>
          </div>
        </div>
      </div>
      <div className="logo-marquee-rows">
        <div className="logo-marquee">
          <div className="logo-marquee-track">
            {loopA.map((l, i) => <LogoMark key={i} name={l.name} img={l.img} style={l.style} />)}
          </div>
        </div>
        <div className="logo-marquee">
          <div className="logo-marquee-track reverse">
            {loopB.map((l, i) => <LogoMark key={i} name={l.name} img={l.img} style={l.style} />)}
          </div>
        </div>
      </div>
    </div>);

};

const QualForm = ({ compact = false }) => {
  return (
    <div className="qual-form">
      <span className="step-pill">Audit gratuit · 30 min</span>
      <h3>Réservez votre audit personnalisé.</h3>
      <p className="qf-lede">Renseignez vos coordonnées sur notre formulaire sécurisé, puis choisissez votre créneau. On revient vers vous avec une estimation chiffrée de votre potentiel AO.</p>
      <ul className="qf-points">
        <li><span className="ic">✓</span>30 min, sans engagement</li>
        <li><span className="ic">✓</span>Rapport PDF personnalisé</li>
        <li><span className="ic">✓</span>Avec Émile Pinson ou son équipe</li>
      </ul>
      <a className="btn btn-primary submit" href="https://2ejpb0.share-eu1.hsforms.com/20esujLC-RPCL-_ZZD9VdKw" target="_blank" rel="noopener noreferrer">Réserver mon créneau →</a>
      <p className="legal">Vos coordonnées sont enregistrées dans notre CRM (HubSpot).</p>
    </div>);

};

const CtaBand = ({ id }) =>
<section className="cta-band" id={id}>
    <div className="container">
      <div className="cta-grid">
        <div>
          <span className="eyebrow gold"><span className="dot"></span>Audit personnalisé — 30 min</span>
          <h2>De votre marché à votre pipeline : <em>on fait le calcul.</em></h2>
          <p className="lede">On part de votre profil d’entreprise, on identifie les marchés sur lesquels vous pouvez réellement vous positionner, et on vous remet une estimation de chiffre d’affaires et de marge potentiels.</p>
          <ul className="cta-bullets">
            <li><span className="ic">→</span><span><b style={{ color: '#fff' }}>Audit de profil.</b> On cartographie votre typologie : métiers, certifications, zones d’intervention.</span></li>
            <li><span className="ic">→</span><span><b style={{ color: '#fff' }}>Potentiel de volume.</b> Marchés accessibles, paniers moyens, régions et typologies de contrats où vous placer.</span></li>
            <li><span className="ic">→</span><span><b style={{ color: '#fff' }}>ROI chiffré.</b> Estimation du chiffre d’affaires adressable et de la marge dégageable.</span></li>
          </ul>
        </div>
        <QualForm />
      </div>
    </div>
  </section>;


const Pocket = () =>
<section className="section pocket">
    <div className="container">
      <div className="pocket-head">
        <span className="eyebrow gold"><span className="dot"></span>Application mobile</span>
        <h2 className="display-md" style={{ marginTop: 12 }}>BSA Copilot dans votre poche.</h2>
        <p className="lede" style={{ margin: '16px auto 0' }}>
          Tout ça, visible en un coup d’œil. Entre deux rendez-vous. Depuis votre téléphone.
          Parce que le business development ne devrait jamais dépendre d’un bureau ou d’un fichier Excel.
        </p>
      </div>
      <div className="pocket-vis">
        <img src="design/mobile-pocket.png" alt="BSA Copilot — application mobile" />
      </div>
    </div>
  </section>;


const Magnet = () =>
<section className="section magnet">
    <div className="container">
      <div className="grid">
        <div>
          <span className="eyebrow gold"><span className="dot"></span>Lead magnet</span>
          <h2>Le playbook : +5 % de conversion sur vos réponses AO.</h2>
          <p className="lede">42 pages, 11 cas chiffrés, le framework de scoring de pertinence qu’utilisent nos clients. Pas un PDF marketing — un manuel d’opérations.</p>
          <div className="form-inline">
            <a className="btn btn-primary btn-lg" href="https://2ejpb0.share-eu1.hsforms.com/2H1WZ4vmdT4mJNzwhmHMHLg" target="_blank" rel="noopener noreferrer">Recevoir le PDF</a>
          </div>
          <p className="mono" style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 12 }}>437 dirigeants, directeurs commerciaux, responsables de bureaux d’études, l’ont déjà téléchargé</p>
        </div>
        <div className="book-shot">
          <img src="design/playbook-cover.png" alt="Livre blanc Bid Management — BSA Copilot, Édition 2026" />
        </div>
      </div>
    </div>
  </section>;


const FAQ_ITEMS = [
  { q: 'Comment le copilote se branche sur nos plateformes existantes ?', a: 'Le copilote se connecte aux sources publiques (BOAMP, JOUE/TED) et privées sans installation : vous définissez vos critères, on branche votre profil entreprise, et les opportunités remontent dans votre tableau de bord. Un export CSV ou une API CRM est disponible pour le reste de votre stack.' },
  { q: 'Combien de temps pour être opérationnel ?', a: 'Comptez 24 à 48 h. On configure votre profil (métiers, certifications, zones d’intervention, montants), puis la veille démarre immédiatement.' },
  { q: 'Mes données et mes mémoires techniques restent confidentielles ?', a: 'Oui. Vos mémoires et vos données restent les vôtres, hébergées en Europe. Jamais utilisées pour entraîner des modèles tiers, jamais partagées avec d’autres clients.' },
  { q: 'L’IA remplace-t-elle nos chargés d’affaires ?', a: 'Non. Le copilote leur retire la veille et la première trame de réponse, pour qu’ils se concentrent sur l’analyse, la stratégie et la relation. Vous gardez le contrôle éditorial sur chaque livrable.' },
  { q: 'Est-ce compatible avec les marchés défense / sécurité ?', a: 'Oui, avec un paramétrage dédié et des règles de confidentialité renforcées. On cadre votre périmètre ensemble lors de la démo.' },
  { q: 'Quel est le ROI moyen observé chez vos clients ?', a: 'Nos clients identifient en moyenne nettement plus d’opportunités pertinentes et réduisent de plusieurs heures le temps de réponse par AO. On chiffre votre potentiel précis lors de l’audit de 30 min.' },
];

const FaqItem = ({ q, a }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="q" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        <span className="qt">{q}</span><span className="ic">{open ? '−' : '+'}</span>
      </button>
      <div className="faq-a" hidden={!open}><p>{a}</p></div>
    </div>
  );
};

const FaqBlock = () =>
<section className="section">
    <div className="container">
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <span className="eyebrow"><span className="dot"></span>FAQ</span>
        <h2 className="display-md" style={{ marginTop: 12 }}>Les questions qu’on nous pose vraiment.</h2>
      </div>
      <div className="faq">
        {FAQ_ITEMS.map((item, i) => <FaqItem key={i} q={item.q} a={item.a} />)}
      </div>
    </div>
  </section>;


const PRESS_LOGOS = [
{ name: 'Réseau Entreprendre', img: 'design/press-reseau-entreprendre.png', url: 'https://www.reseau-entreprendre.org/' },
{ name: '6H du BAT', img: 'design/press-6h-du-bat.png', url: 'https://www.linkedin.com/company/6-h-du-bat/posts/?feedView=all' },
{ name: 'Contech France', img: 'design/press-cointech.png', url: 'https://www.contech-france.org/' }];


const PressBand = ({ videos }) => {
  const wrapRef = React.useRef(null);
  const playersRef = React.useRef([]);

  React.useEffect(() => {
    if (!videos || !videos.length) return;
    if (!window.YT) {
      const tag = document.createElement('script');
      tag.src = 'https://www.youtube.com/iframe_api';
      document.head.appendChild(tag);
    }
    const init = () => {
      playersRef.current = videos.map((v) => new window.YT.Player(v.mount, {
        videoId: v.id,
        playerVars: { rel: 0, modestbranding: 1, playsinline: 1, controls: 1, autoplay: 0 },
      }));
    };
    if (window.YT && window.YT.Player) init();
    else {
      const prev = window.onYouTubeIframeAPIReady;
      window.onYouTubeIframeAPIReady = () => { prev && prev(); init(); };
    }
  }, []);

  return (
    <section className="section press-band">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="eyebrow"><span className="dot"></span>Presse & médias</span>
          <h2 className="display-md" style={{ marginTop: 12 }}>Ils parlent de nous.</h2>
        </div>
        <div className="press-logos">
          {PRESS_LOGOS.map((l) =>
          <a className="press-logo" key={l.name} href={l.url} target="_blank" rel="noopener noreferrer" title={l.name}>
              <img src={l.img} alt={l.name} />
            </a>
          )}
        </div>
        {videos && videos.length > 0 &&
        <div className="press-videos" ref={wrapRef}>
            {videos.map((v) =>
          <div className={`press-video-frame ${v.short ? 'press-video-short' : 'press-video-wide'}`} key={v.mount}>
                <div id={v.mount}></div>
              </div>
          )}
          </div>}
      </div>
    </section>);

};


const TrustBand = () =>
<section className="section-sm trust-band">
    <div className="container">
      <div className="trust-head">
        <p className="trust-eyebrow">Rejoignez nos clients satisfaits et développez votre chiffre d’affaires</p>
        <button className="btn btn-ghost btn-lg trust-cta" onClick={() => window.go && window.go('product')}>
          Découvrir nos solutions <span style={{ marginLeft: 6 }}>→</span>
        </button>
      </div>
      <p className="trust-sub">Découvrez ce que nos clients disent de nous</p>
      <div className="trust-badges">
        <div className="trust-badge">
          <a className="trust-badge-card trustpilot" href="https://fr.trustpilot.com/review/bsa-partners.com" target="_blank" rel="noopener noreferrer">
            <div className="tp-name">★ Trustpilot</div>
            <div className="tp-stars">
              <span></span><span></span><span></span><span></span><span className="half"></span>
            </div>
          </a>
          <p className="trust-caption">Excellent · Trustpilot</p>
        </div>
        <div className="trust-badge">
          <a className="trust-badge-card re" href="https://www.reseau-entreprendre.org/fr/qui-sommes-nous/" target="_blank" rel="noopener noreferrer">
            <div className="re-marks">
              <span className="re-d red"></span>
              <span className="re-d blue"></span>
              <span className="re-d orange"></span>
            </div>
            <div className="re-text">Réseau<br />Entreprendre<span className="re-r">®</span></div>
          </a>
          <p className="trust-caption">Lauréat 2025 · Réseau Entreprendre</p>
        </div>
      </div>
    </div>
  </section>;


const CeoVideo = () => {
  const wrapRef = React.useRef(null);
  const playersRef = React.useRef([]);
  const [ready, setReady] = React.useState(false);
  const VIDEOS = [
  { id: '0LKSmvOOZLw', mount: 'ceo-yt-2' },
  { id: 'nql2PeUTZPE', mount: 'ceo-yt' }];


  React.useEffect(() => {
    // Load YouTube IFrame API once
    if (!window.YT) {
      const tag = document.createElement('script');
      tag.src = 'https://www.youtube.com/iframe_api';
      document.head.appendChild(tag);
    }
    const init = () => {
      playersRef.current = VIDEOS.map((v) => new window.YT.Player(v.mount, {
        videoId: v.id,
        playerVars: { rel: 0, modestbranding: 1, playsinline: 1, controls: 1, autoplay: 0 },
        events: { onReady: () => setReady(true) }
      }));
    };
    if (window.YT && window.YT.Player) init();else
    window.onYouTubeIframeAPIReady = init;
  }, []);

  // Pause the video if the user scrolls away while it's playing — but never
  // auto-start it. It stays paused until the visitor clicks play (with sound).
  React.useEffect(() => {
    if (!ready || !wrapRef.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (!e.isIntersecting) {
          playersRef.current.forEach((p) => {
            try {p && p.pauseVideo();} catch (_) {}
          });
        }
      });
    }, { threshold: [0, 0.5, 1] });
    io.observe(wrapRef.current);
    return () => io.disconnect();
  }, [ready]);

  return (
    <section className="section ceo-video-section">
      <div className="container">
        <div className="ceo-video-head">
          <span className="eyebrow gold"><span className="dot"></span>Le mot du fondateur</span>
          <h2 className="display-md" style={{ marginTop: 12, maxWidth: '22ch' }}>
            Émile Pinson vous explique BSA Copilot.
          </h2>
          <p className="lede" style={{ margin: '16px auto 0' }}>
            Ex-Vinci, +25 M€ d’AO générés, Lauréat Réseau Entreprendre 2025. Il vous explique concrètement ce que fait BSA Copilot.
          </p>
        </div>
        <div className="ceo-video-row" ref={wrapRef}>
          <div className="ceo-video-frame ceo-video-short">
            <div id="ceo-yt-2"></div>
          </div>
          <div className="ceo-video-frame ceo-video-short">
            <div id="ceo-yt"></div>
          </div>
        </div>
        <div className="ceo-video-foot">
          <p className="ceo-video-note">
            Cliquez sur la vidéo pour la lancer avec le son.
          </p>
          <a className="ceo-linkedin" href="https://www.linkedin.com/in/emilepinson/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn d’Émile Pinson">
            <svg viewBox="0 0 24 24" width="20" height="20" 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>
    </section>);

};

Object.assign(window, {
  Logo, Nav, Footer, KpiBand, StepsBlock, FeaturesBlock, Testimonials,
  LogoStrip, SourceMarquee, QualForm, CtaBand, Magnet, FaqBlock, TrustBand, CeoVideo, Pocket, PressBand
});