/* Page /partners — outils & technologies utilisés par Boom Maker.
 * Version épurée : pas de descriptions, juste les outils.
 * Les cards avec lien affilié ouvrent dans un nouvel onglet (rel="noopener nofollow sponsored"). */

const { useState } = React;
const { Logo, ArrowUpRight, ThemeToggle, FooterMin } = window.BMShared;

const PartnersNav = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <nav className="nav" id="nav">
        <a href="/" className="nav-logo" aria-label="Boom Maker"><Logo /></a>
        <div className="nav-links">
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger active" aria-haspopup="true">
              Expertises <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/expertises">3 piliers</a>
              <a href="/#process">Process</a>
              <a href="/partners" className="active">Partenaires</a>
            </div>
          </div>
          <a href="/#prix">Tarifs</a>
          <a href="/news">News</a>
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger" aria-haspopup="true">
              À propos <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/a-propos">BoomMaker</a>
              <a href="/#faq">FAQ</a>
            </div>
          </div>
          <a href="/contact">Contact</a>
        </div>
        <ThemeToggle />
        <a href="/audit-gratuit" className="btn btn-glow nav-cta-desktop">Audit gratuit <ArrowUpRight /></a>
        <button className="nav-burger" aria-label="Menu" aria-expanded={open}
                onClick={() => setOpen((o) => !o)}>
          <span /><span /><span />
        </button>
      </nav>
      <div className={`nav-mobile ${open ? 'open' : ''}`} onClick={() => setOpen(false)}>
        <span className="nav-mobile-group">/ Expertises</span>
        <a href="/expertises">3 piliers</a>
        <a href="/#process">Process</a>
        <a href="/partners" className="active">Partenaires</a>
        <a href="/#prix">Tarifs</a>
        <a href="/news">News</a>
        <span className="nav-mobile-group">/ À propos</span>
        <a href="/a-propos">BoomMaker</a>
        <a href="/#faq">FAQ</a>
        <a href="/contact">Contact</a>
        <a href="/audit-gratuit" className="btn btn-glow">Audit gratuit <ArrowUpRight /></a>
      </div>
    </>
  );
};

/* Outils par catégorie.
 * `href` (optionnel) = lien d'affiliation. Si présent, la card devient cliquable
 * et ajoute le badge "Affilié" + l'attribut rel="sponsored". */
const SECTIONS = [
  {
    id: 'no-code',
    eyebrow: '01 · Orchestration',
    title: 'Automatisation no-code',
    lead: "La couche qui fait parler tes outils entre eux. On choisit Make pour 9 projets sur 10 : interface visuelle, scénarios complexes possibles, et tarif imbattable pour le volume de tâches géré. n8n quand il faut du self-hosted ou de la conformité RGPD stricte.",
    items: [
      { name: 'Make', emoji: '⚙️', href: 'https://www.make.com/en/register?pc=boommaker' },
      { name: 'n8n', emoji: '🔗' },
      { name: 'Zapier', emoji: '⚡' },
      { name: 'Pabbly', emoji: '🔄' },
    ],
  },
  {
    id: 'ia',
    eyebrow: '02 · Intelligence artificielle',
    title: 'Agents IA',
    lead: "Claude (Anthropic) est notre default : meilleur rapport qualité/structure JSON, suit les prompts versionnés avec discipline. ChatGPT et Gemini en backup ou pour des cas spécifiques. Perplexity quand il faut de la recherche temps réel avec sources citées.",
    items: [
      { name: 'Claude (Anthropic)', emoji: '🧠', href: 'https://claude.ai/referral/JkRs2Ml5fA' },
      { name: 'ChatGPT (OpenAI)', emoji: '💬' },
      { name: 'Gemini (Google)', emoji: '✨' },
      { name: 'Perplexity', emoji: '🔍' },
    ],
  },
  {
    id: 'prospection',
    eyebrow: '03 · Cold outbound',
    title: 'Prospection & multicanal',
    lead: "Sales Navigator pour le sourcing ICP chirurgical. Emelia pour le cold email avec warmup (REST + GraphQL + webhooks instant — c'est ce qu'on intègre le plus). PhantomBuster pour les automatisations LinkedIn spécifiques. lemlist et Apollo selon les préférences client.",
    items: [
      { name: 'Sales Navigator', emoji: '🎯' },
      { name: 'Emelia', emoji: '✉️', href: 'https://emelia.io/fr?_by=julia87' },
      { name: 'PhantomBuster', emoji: '👻' },
      { name: 'lemlist', emoji: '💌' },
      { name: 'Apollo.io', emoji: '🚀' },
    ],
  },
  {
    id: 'enrichissement',
    eyebrow: '04 · Sourcing & enrichissement data',
    title: 'Enrichissement entreprise',
    lead: "Pour transformer un nom d'entreprise en un dossier complet (NAF, effectifs, dirigeant, date de création, adresse siège) avant que Claude rédige l'accroche. SIRENE gouv.fr en source officielle française gratuite. Explorium pour l'international.",
    items: [
      { name: 'SIRENE (gouv.fr)', emoji: '🏛️' },
      { name: 'Explorium', emoji: '🌍' },
    ],
  },
  {
    id: 'crm',
    eyebrow: '05 · Pipeline & data',
    title: 'CRM & bases de données',
    lead: "On connecte ton CRM existant, on n'en impose pas. HubSpot pour les setups marketing complets, Pipedrive pour la simplicité commerciale, Cerca pour la franchise/réseaux, Salesforce sur les plus gros comptes. Airtable comme base flexible côté ops, Notion comme dashboard équipe.",
    items: [
      { name: 'HubSpot', emoji: '🟠' },
      { name: 'Pipedrive', emoji: '📊' },
      { name: 'Cerca', emoji: '🎯' },
      { name: 'Salesforce', emoji: '☁️' },
      { name: 'Airtable', emoji: '🗂️', href: 'https://airtable.com/invite/r/b7FpxImb' },
      { name: 'Notion', emoji: '📓' },
      { name: 'Softr', emoji: '🖥️' },
    ],
  },
  {
    id: 'comms',
    eyebrow: '06 · Communication',
    title: 'Email, agenda & messagerie',
    lead: "La couche communication qu'on branche en webhook ou API : Gmail / Outlook pour les envois et le tracking, Calendly pour les RDV automatisés (avec création auto de lead côté CRM), Slack pour les alertes équipe en temps réel.",
    items: [
      { name: 'Gmail', emoji: '📧' },
      { name: 'Outlook', emoji: '📨' },
      { name: 'Google Workspace', emoji: '🅖' },
      { name: 'Microsoft 365', emoji: '🪟' },
      { name: 'Calendly', emoji: '📅' },
      { name: 'Slack', emoji: '💬' },
    ],
  },
  {
    id: 'paiement',
    eyebrow: '07 · Cash & facturation',
    title: 'Paiement & facturation',
    lead: "Pour automatiser ce qui touche au cash : Stripe pour les encaissements en ligne, QuickBooks / Pennylane / Sellsy pour la facturation française avec relances auto sur impayés (J+15, J+30, J+45).",
    items: [
      { name: 'Stripe', emoji: '💳' },
      { name: 'QuickBooks', emoji: '📒' },
      { name: 'Pennylane', emoji: '🪙' },
      { name: 'Sellsy', emoji: '🧾' },
    ],
  },
  {
    id: 'sites',
    eyebrow: '08 · Sites & déploiement',
    title: 'Sites, CMS & déploiement',
    lead: "Pour les clients qui ont aussi besoin d'un site qui convertit et qui ranke : React + Vercel en hosting, Contentful en CMS, GitHub Actions pour la CI/CD, Puppeteer pour le pré-rendu SEO (Googlebot voit le HTML, pas une page React vide). Kroki et HCTI pour les images et schémas auto-générés.",
    items: [
      { name: 'Vercel', emoji: '▲' },
      { name: 'Contentful', emoji: '🗄️' },
      { name: 'GitHub Actions', emoji: '⚡' },
      { name: 'Puppeteer', emoji: '🧪' },
      { name: 'Kroki / Mermaid', emoji: '📐' },
      { name: 'HCTI', emoji: '🖼️' },
    ],
  },
];

const PartnerCard = ({ item }) => {
  if (item.href) {
    return (
      <a
        href={item.href}
        className="partner-card partner-card-link"
        target="_blank"
        rel="noopener nofollow sponsored"
        aria-label={`${item.name} — lien affilié`}
      >
        <span className="brand-icon" style={{ fontSize: 26 }}>{item.emoji}</span>
        <span className="partner-name">{item.name}</span>
        <span className="partner-affiliate-chip">Affilié</span>
        <span className="partner-arr" aria-hidden="true"><ArrowUpRight /></span>
      </a>
    );
  }
  return (
    <div className="partner-card">
      <span className="brand-icon" style={{ fontSize: 26 }}>{item.emoji}</span>
      <span className="partner-name">{item.name}</span>
    </div>
  );
};

const PartnersBreadcrumb = () => (
  <nav className="partners-breadcrumb" aria-label="Fil d'Ariane">
    <a href="/">Accueil</a>
    <span className="partners-breadcrumb-sep" aria-hidden="true">/</span>
    <span aria-current="page">Partenaires &amp; outils</span>
  </nav>
);

const PartnersPage = () => (
  <div className="partners-page">
    <PartnersNav />

    <article className="audit-hero">
      <div className="container">
        <PartnersBreadcrumb />
        <span className="eyebrow"><span className="pulse" /> 30+ outils maîtrisés</span>
        <h1>Les outils <em>qu'on intègre</em> chez nos clients.</h1>
        <p className="lead">
          La vraie stack — celle qu'on déploie en prod, pas un catalogue de marques. Classée par usage, avec le contexte d'utilisation et les choix qu'on défend. Les liens marqués <span className="partner-affiliate-chip partner-affiliate-chip-inline">Affilié</span> sont des codes de parrainage Boom Maker.
        </p>
      </div>
    </article>

    <section className="partners-content partners-content-minimal">
      <div className="container">
        {SECTIONS.map((section) => (
          <div className="partners-section" id={section.id} key={section.id}>
            <div className="partners-section-head">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />{section.eyebrow}</div>
              <h2>{section.title}</h2>
              {section.lead && <p className="partners-section-lead">{section.lead}</p>}
            </div>
            <div className="partners-grid">
              {section.items.map((item) => (
                <PartnerCard item={item} key={item.name} />
              ))}
            </div>
          </div>
        ))}

        <div className="partners-cta-final">
          <h2>Tu utilises un outil pas dans la liste ?</h2>
          <p>On intègre tout ce qui a une API ou un webhook. 30 minutes d'échange gratuit pour voir si on peut le connecter à ton stack.</p>
          <div className="partners-cta">
            <a href="/audit-gratuit" className="btn btn-glow">Audit gratuit <ArrowUpRight /></a>
            <a href="/contact" className="btn btn-ghost">Poser une question <ArrowUpRight /></a>
          </div>
        </div>
      </div>
    </section>

    <FooterMin />
  </div>
);

ReactDOM.createRoot(document.getElementById('root')).render(<PartnersPage />);