// MEMORI — Services (Setup & Run) redesign
function Services() {
  const [openItem, setOpenItem] = React.useState(null);
  const toggle = (id) => setOpenItem(openItem === id ? null : id);

  const setupItems = [
    {
      id: 'A',
      title: 'Refonte du profil LinkedIn',
      desc: 'Transformation en landing page de conversion. Crédibilité, vision, positionnement : chaque section travaille pour vous.'
    },
    {
      id: 'B',
      title: 'Stratégie T.A.P.I. sur-mesure',
      desc: 'Architecture éditoriale construite autour de votre personnalité, vos objectifs et votre secteur. La base de tout ce qui suit.'
    }
  ];

  const runGroups = [
    {
      category: 'Contenu & Ghostwriting',
      items: [
        {
          id: 'A',
          title: 'Interview bi-mensuelle (30 à 60 min)',
          desc: 'On capture votre pensée brute toutes les deux semaines. Votre expertise, votre ton, vos convictions, sans que vous n\'ayez à écrire une ligne.'
        },
        {
          id: 'B',
          title: 'Posts LinkedIn : 1, 2 ou 3 par semaine',
          desc: 'Rédaction, validation, publication. Une présence éditoriale cohérente tenue dans le temps, alignée sur votre voix et vos objectifs business.'
        },
        {
          id: 'C',
          title: 'Newsletter LinkedIn',
          desc: 'Des pièces de contenu long qui touchent exclusivement les abonnés les plus engagés. Un canal de profondeur qui amplifie la portée de vos posts et installe votre autorité dans la durée, en complément de la stratégie de contenu sur-mesure.'
        },
      ]
    },
    {
      category: 'Growth & Lead Gen',
      items: [
        {
          id: 'D',
          title: 'Livraison hebdomadaire de contacts qualifiés',
          desc: 'Chaque semaine, une liste de profils correspondant à vos critères ICP exacts : secteur, taille d\'entreprise et poste. On extrait, on qualifie et on vous les livre prêts à être intégrés dans votre stratégie commerciale.'
        },
        {
          id: 'E',
          title: '+80 à 100 invitations qualifiées par semaine',
          desc: 'Construction active d\'un réseau dense et pertinent autour de votre positionnement. Chaque invitation est ciblée, chaque connexion est un potentiel point de contact commercial.'
        },
        {
          id: 'F',
          title: 'Benchmark concurrentiel',
          desc: 'Veille active sur les positions éditoriales de vos concurrents. On identifie les angles non exploités pour vous positionner là où personne n\'est encore, et garder une longueur d\'avance.'
        },
      ]
    },
    {
      category: 'Pilotage',
      items: [
        {
          id: 'G',
          title: 'Reporting mensuel',
          desc: 'Analyse complète de ce qui a été fait sur le mois : impressions, engagement, croissance du réseau, leads générés. Ce qui a fonctionné, ce qui n\'a pas fonctionné, les ajustements. Tout est tracé, rien n\'est laissé au hasard.'
        },
      ]
    }
  ];

  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="s-head fade-up">
          <span className="eyebrow">§ 02 : Notre accompagnement</span>
          <h2>Un accompagnement <em>en deux temps</em>.</h2>
          <p className="lede">
            Un setup stratégique pour poser des fondations solides, puis un run mensuel
            pour faire vivre la marque, semaine après semaine, sans que vous n'ayez à y penser.
          </p>
        </div>

        {/* Phase 01 — Setup stratégique */}
        <div className="svc-setup fade-up">
          <div className="svc-setup-label">
            <span className="svc-phase-tag">Phase 01</span>
            <h3 className="svc-setup-h">Setup <em>stratégique</em>.</h3>
          </div>
          <div className="svc-setup-items">
            {setupItems.map(item => (
              <div className="svc-setup-item" key={item.id}>
                <span className="svc-setup-num">{item.id}.</span>
                <div>
                  <span className="svc-setup-title">{item.title}</span>
                  <span className="svc-setup-desc">{item.desc}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Connecteur */}
        <div className="svc-connector fade-up">
          <div className="svc-connector-line"></div>
          <span className="svc-connector-label">Puis, chaque mois</span>
          <div className="svc-connector-line"></div>
        </div>

        {/* Phase 02 — Run mensuel */}
        <div className="svc-run fade-up">
          <div className="svc-run-header">
            <div>
              <span className="svc-phase-tag">Phase 02</span>
              <h3 className="svc-run-h">Run <em>mensuel</em>.</h3>
            </div>
            <div className="svc-time-badge">
              <span className="svc-time-num">2h</span>
              <span className="svc-time-label">maximum<br/>de votre temps<br/>par semaine</span>
            </div>
          </div>

          {runGroups.map((group, gi) => (
            <div className="svc-group" key={gi}>
              <div className="svc-group-label">{group.category}</div>
              {group.items.map(item => (
                <div className={`svc-acc-item ${openItem === group.category + item.id ? 'open' : ''}`} key={item.id}>
                  <button
                    className="svc-acc-trigger"
                    onClick={() => toggle(group.category + item.id)}
                    aria-expanded={openItem === group.category + item.id}
                  >
                    <span className="svc-acc-num">{item.id}.</span>
                    <span className="svc-acc-title">{item.title}</span>
                    <span className="svc-acc-icon" aria-hidden="true"></span>
                  </button>
                  <div className="svc-acc-body">
                    <p className="svc-acc-desc">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Services });