/* Page /cas-usage — hub central qui list toutes les pages cas d'usage
 * (les "spokes"), groupées par fonction métier. Consomme USE_CASES et
 * USE_CASE_CATEGORIES depuis window.BMShared (source unique). Pour ajouter
 * un cas d'usage, éditer shared.jsx — il apparaîtra ici automatiquement. */

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

const PageNav = () => {
  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" 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="/cas-usage" className="active">Cas d'usage</a>
              <a href="/partners">Partenaires</a>
            </div>
          </div>
          <a href="/tarifs">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="/cas-usage" className="active">Cas d'usage</a>
        <a href="/partners">Partenaires</a>
        <a href="/tarifs">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>
    </>
  );
};

const PageBreadcrumb = () => (
  <nav className="expertises-breadcrumb" aria-label="Fil d'Ariane">
    <a href="/">Accueil</a>
    <span className="expertises-breadcrumb-sep" aria-hidden="true">/</span>
    <span aria-current="page">Cas d'usage</span>
  </nav>
);

const CasUsageCard = ({ uc }) => (
  <a href={`/${uc.slug}`} className="case-card">
    <div className="case-card-tag">{uc.tag}</div>
    <h3 className="case-card-title">{uc.title}</h3>
    <p className="case-card-lead">{uc.lead}</p>
    <span className="case-card-link">Lire le détail <ArrowUpRight size={12} /></span>
  </a>
);

const CasUsagePage = () => {
  useReveal();

  /* Groupement par catégorie, on n'affiche que les catégories qui ont
   * au moins 1 cas d'usage. */
  const grouped = USE_CASE_CATEGORIES
    .map((cat) => ({
      ...cat,
      items: USE_CASES.filter((uc) => uc.category === cat.id),
    }))
    .filter((cat) => cat.items.length > 0);

  return (
    <div className="cas-usage-page tarifs-page">
      <PageNav />

      {/* HERO */}
      <article className="audit-hero">
        <div className="container">
          <PageBreadcrumb />
          <span className="eyebrow"><span className="pulse" /> Cas d'usage · automatisation par fonction</span>
          <h1>
            Toutes les automatisations <em>qu'on déploie</em> chez nos clients.
          </h1>
          <p className="lead">
            Pages détaillées par fonction métier : prospection, opérations, service client, marketing. Chaque cas inclut les outils orchestrés, le process en étapes, les KPIs moyens, les FAQ, et nos cas clients réels. <strong>ROI sous 90 jours garanti, sinon on ne déploie pas.</strong>
          </p>
        </div>
      </article>

      <section className="expertises-content tarifs-content">
        <div className="container">
          <div className="expertises-main">

            {/* === Intro pédagogique === */}
            <section className="expertises-cases">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Comment lire cette page</div>
              <h2 className="expertises-cases-title">
                Pas un catalogue. <em>Des cas en production.</em>
              </h2>
              <p className="expertises-cases-lead">
                Chaque page recense ce qu'on fait réellement pour nos clients aujourd'hui, avec les outils précis, les chiffres mesurés et les pièges qu'on a appris à éviter. Si ton besoin ressemble à un de ces cas, c'est qu'on a déjà fait. Si tu hésites entre plusieurs, l'audit gratuit en 24h te donne la bonne piste.
              </p>
            </section>

            {/* === Catégories === */}
            {grouped.map((cat) => (
              <section className="expertises-cases case-category" id={cat.id} key={cat.id}>
                <div className="expertise-eyebrow eyebrow"><span className="pulse" />{cat.label}</div>
                <h2 className="expertises-cases-title">
                  {cat.h2.split(' ').slice(0, -1).join(' ')}{' '}
                  <em>{cat.h2.split(' ').slice(-1)[0]}</em>
                </h2>
                <p className="expertises-cases-lead">
                  {cat.items.length === 1
                    ? '1 cas d\'usage documenté dans cette catégorie. D\'autres arriveront au fil des projets clients.'
                    : `${cat.items.length} cas d'usage documentés dans cette catégorie.`}
                </p>
                <div className="case-grid">
                  {cat.items.map((uc) => <CasUsageCard uc={uc} key={uc.slug} />)}
                </div>
              </section>
            ))}

          </div>
        </div>
      </section>

      {/* === CTA final === */}
      <section className="partners-content partners-content-minimal">
        <div className="container">
          <div className="partners-cta-final">
            <h2>Ton cas n'est pas dans la liste&nbsp;?</h2>
            <p>30 minutes, gratuit, sans engagement. On regarde ton stack, ton process actuel, et ce que tu veux automatiser. À la fin de l'appel, tu sais si on peut t'aider et combien ça coûte.</p>
            <div className="partners-cta">
              <a href="/audit-gratuit" className="btn btn-glow">Réserver l'audit gratuit <ArrowUpRight /></a>
              <a href="/expertises" className="btn btn-ghost">Voir nos 3 piliers <ArrowUpRight /></a>
            </div>
          </div>
        </div>
      </section>

      <FooterMin />
    </div>
  );
};

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