const React = window.React;
const { useEffect, useRef } = React;
const { Header, Footer, Arrow, useReveal, TeamCard, TEAM } = window.NodeItParts;

const VALUES = [
  { no: "01", t: "Une seule équipe", d: "Pas de sous-traitance en chaîne. Les mêmes personnes cadrent, construisent et font vivre ce qu'on livre." },
  { no: "02", t: "Du concret, vite", d: "On livre des choses qui tournent en production, pas des slides. On préfère un produit utile maintenant qu'un parfait dans un an." },
  { no: "03", t: "On reste dans la durée", d: "Le lancement n'est pas la fin. On assure le suivi et, si vous le souhaitez, on bascule en contrat de support pour faire évoluer et maintenir votre produit." },
];

const METHOD_ICON = {
  search: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>,
  target: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="8" /><circle cx="12" cy="12" r="3.4" /></svg>,
  pen: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4 20 10 8 22 3 22 3 17 14 4Z" /><path d="m12.5 5.5 6 6" /></svg>,
  code: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m8 8-5 4 5 4" /><path d="m16 8 5 4-5 4" /><path d="m13 5-2 14" /></svg>,
  rocket: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 15c-1.5 1.5-2 5-2 5s3.5-.5 5-2" /><path d="M9 13c1-5 4-9 10-10 1 6-1 9-6 11l-4-1Z" /><circle cx="14.5" cy="9.5" r="1.6" /></svg>,
};

const METHOD = [
  { icon: "search", k: "Étape 01", t: "Découverte", d: "On comprend votre contexte, vos contraintes et l'objectif réel, pas seulement la demande de surface." },
  { icon: "target", k: "Étape 02", t: "Cadrage", d: "On définit le périmètre, les priorités et un plan clair. On vous dit franchement par où commencer." },
  { icon: "pen", k: "Étape 03", t: "Conception", d: "On dessine le produit, les parcours et l'architecture avant d'écrire la moindre ligne de code." },
  { icon: "code", k: "Étape 04", t: "Réalisation", d: "On construit, on y branche l'IA et l'automatisation, on teste. Vous suivez l'avancement en continu." },
  { icon: "rocket", k: "Étape 05", t: "Lancement & croissance", d: "On met en production, on mesure ce qui compte et on fait grandir. On forme vos équipes pour l'autonomie." },
];

function Methodology() {
  const wrapRef = useRef(null);
  useEffect(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;
    const track = wrap.querySelector(".method__track");
    const fill = wrap.querySelector(".method__fill");
    const steps = [...wrap.querySelectorAll(".method__step")];
    const update = () => {
      const ref = window.innerHeight * 0.5;
      const tr = track.getBoundingClientRect();
      const h = Math.min(Math.max(ref - tr.top, 0), tr.height);
      fill.style.height = h + "px";
      steps.forEach((st) => {
        const nb = st.querySelector(".method__node").getBoundingClientRect();
        if (nb.top + nb.height / 2 <= ref) st.setAttribute("data-on", "true");
        else st.removeAttribute("data-on");
      });
    };
    const onScroll = () => { update(); };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, []);
  return (
    <section className="section band--surface">
      <div className="container">
        <div className="sec-head" style={{ marginBottom: "var(--space-7)" }}>
          <span className="kicker">Méthodologie</span>
          <h2>Comment on travaille.</h2>
          <p style={{ color: "var(--text-muted)", fontSize: "var(--fs-lead)", lineHeight: "var(--lh-relaxed)" }}>Un accompagnement de bout en bout, en cinq étapes. Pas de boîte noire : vous savez toujours où on en est.</p>
        </div>
        <div className="method" ref={wrapRef}>
          <div className="method__track" />
          <div className="method__fill" />
          {METHOD.map((m, i) => (
            <div className="method__step" key={i}>
              <div className="method__node">{METHOD_ICON[m.icon]}</div>
              <div className="method__c">
                <span className="method__k">{m.k}</span>
                <h3>{m.t}</h3>
                <p>{m.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AgenceApp() {
  useReveal();
  return (
    <div className="site">
      <Header />
      <section className="section">
        <div className="container">
          <div className="agence-hero reveal is-in" style={{ maxWidth: "820px" }}>
            <span className="kicker">L'agence</span>
            <h1>Le studio produit, IA et growth de <span className="text-gradient">Node it</span>.</h1>
            <p>Agence Node it réunit le développement, l'intelligence artificielle et le growth dans une seule équipe. On conçoit vos produits, on les rend intelligents et on les fait grandir, avec une vraie logique d'agence et zéro sous-traitance en cascade.</p>
          </div>
        </div>
      </section>

      <Methodology />

      <section className="section" id="equipe">
        <div className="container">
          <div className="sec-head" style={{ marginBottom: "var(--space-7)" }}>
            <span className="kicker">L'équipe</span>
            <h2>Une équipe resserrée, trois métiers.</h2>
          </div>
          <div className="team-grid">
            {TEAM.map((m, i) => <TeamCard key={i} {...m} />)}
          </div>
        </div>
      </section>

      <section className="section band--surface">
        <div className="container">
          <div className="sec-head" style={{ marginBottom: "var(--space-7)" }}>
            <span className="kicker">Ce qui compte pour nous</span>
            <h2>Nos principes.</h2>
          </div>
          <div className="grid-3">
            {VALUES.map((v, i) => (
              <div className="value-card reveal" key={i}>
                <div className="value-card__no">{v.no}</div>
                <h3>{v.t}</h3>
                <p>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section band--surface">
        <div className="container">
          <div className="form-single reveal">
            <span className="kicker">Organisme de formation</span>
            <h2>On déploie les outils. On forme vos équipes à les piloter.</h2>
            <p>Node it est un organisme de formation certifié Qualiopi. Au-delà des produits qu'on construit, on forme vos équipes pour qu'elles deviennent autonomes sur leurs nouveaux outils. Nos formations sont finançables.</p>
            <div className="form-actions">
              <a className="ni-btn" data-variant="primary" href="https://www.nodeit.fr" target="_blank" rel="noreferrer">Découvrir Node it formations <Arrow cls="ni-btn__icon" /></a>
              <span className="qualiopi-badge"><img src="assets/logo-qualiopi.png" alt="Qualiopi — Processus certifié — République Française" loading="lazy" /></span>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="cta-panel on-dark reveal">
            <div className="ink-glow" />
            <span className="kicker" style={{ justifyContent: "center" }}>On se parle</span>
            <h2>Racontez-nous votre projet. On vous dit ce qu'on en <span className="v">pense</span>.</h2>
            <p>30 minutes pour cadrer votre besoin, 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.NodeItAgence = AgenceApp;