const React = window.React;
const { Header, Footer, Arrow, useReveal, PILLAR_ICONS } = window.NodeItParts;

const EXPERTISES = [
  {
    id: "dev", accent: "violet", no: "01", title: "Développement",
    lead: "On construit le produit, du cadrage à la mise en production. Code sur mesure, robuste et maintenable, pensé pour durer.",
    services: [
      { t: "Développement sur mesure", d: "Applications web et logiciels métier conçus autour de vos process réels, pas l'inverse." },
      { t: "Création de SaaS", d: "Du MVP à la plateforme multi-tenant : architecture, facturation, rôles et montée en charge." },
      { t: "Création de site web", d: "Sites vitrines et e-commerce rapides, bien référencés et faciles à faire vivre." },
      { t: "Intégration API", d: "On connecte vos outils et vos données pour que tout circule sans ressaisie." },
    ],
  },
  {
    id: "ia", accent: "blue", no: "02", title: "Intelligence Artificielle",
    lead: "On rend vos outils plus intelligents, plus rapides, plus autonomes. L'IA branchée là où elle crée vraiment de la valeur.",
    services: [
      { t: "Audit IA", d: "Cartographie des usages, des risques et de la conformité avant de déployer." },
      { t: "Création d'agent IA", d: "Des agents qui exécutent vos tâches répétitives : qualification, support, veille, documentation." },
      { t: "Chatbot", d: "Assistants conversationnels branchés sur votre doc métier, disponibles en continu." },
      { t: "Automation", d: "Workflows automatisés de bout en bout, orchestrés avec n8n et vos outils." },
    ],
  },
  {
    id: "growth", accent: "duo", no: "03", title: "Growth",
    lead: "On construit des tunnels d'acquisition intelligents et automatisés pour générer des leads qualifiés en continu.",
    services: [
      { t: "Go-to-market strategy", d: "Positionnement, offre et plan de lancement pour adresser le bon marché au bon moment." },
      { t: "Outbound marketing", d: "Prospection ciblée et séquences multicanal, alimentées par l'enrichissement de données." },
      { t: "Achat média", d: "Campagnes pilotées par la donnée, optimisées sur le coût par lead réel." },
      { t: "Tracking", d: "Mesure fiable de bout en bout pour décider sur des chiffres, pas des impressions." },
    ],
  },
];

function ExpertiseSection({ id, accent, no, title, lead, services }) {
  return (
    <section className="xp-block reveal" id={id} data-accent={accent}>
      <div className="container xp-block__inner">
        <div className="xp-block__head">
          <span className="xp-block__icon">{PILLAR_ICONS[accent]}</span>
          <span className="xp-block__no">{no}</span>
          <h2>{title}</h2>
          <p>{lead}</p>
          <a className="ni-btn" data-variant="primary" href="contact.html">Discuter de votre projet <Arrow cls="ni-btn__icon" /></a>
        </div>
        <div className="xp-services">
          {services.map((s, i) => (
            <div className="xp-service" key={i}>
              <span className="xp-service__dot" aria-hidden="true" />
              <div>
                <div className="xp-service__t">{s.t}</div>
                <p className="xp-service__d">{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ExpertiseApp() {
  useReveal();
  return (
    <div className="site">
      <Header />
      <section className="section xp-hero">
        <div className="hero__glow" />
        <div className="container">
          <div className="reveal is-in" style={{ maxWidth: "760px" }}>
            <span className="kicker">Expertises</span>
            <h1>Trois métiers, une seule équipe.</h1>
            <p className="hero__lead">On développe vos produits, on y branche l'IA et on les fait grandir. Pas de sous-traitance en chaîne : les mêmes personnes cadrent, construisent et font vivre ce qu'on livre.</p>
            <div className="xp-jump">
              {EXPERTISES.map((e) => (
                <a className="xp-jump__link" href={"#" + e.id} key={e.id} data-accent={e.accent}>{e.title}</a>
              ))}
            </div>
          </div>
        </div>
      </section>
      {EXPERTISES.map((e) => <ExpertiseSection key={e.id} {...e} />)}
      <section className="section">
        <div className="container">
          <div className="cta-panel on-dark reveal">
            <div className="ink-glow" />
            <span className="kicker" style={{ justifyContent: "center" }}>Le premier pas</span>
            <h2>On regarde votre besoin <span className="v">ensemble</span> ?</h2>
            <p>30 minutes pour cadrer votre projet, qu'il soit produit, IA ou acquisition, et vous dire par où commencer.</p>
            <a className="ni-btn" data-variant="primary" data-size="lg" href="contact.html">Prendre rendez-vous <Arrow cls="ni-btn__icon" /></a>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}

window.NodeItExpertise = ExpertiseApp;