// Atelier — Home page
const { useState: hUseState } = React;
const { Reveal: R, RevealText: RT, RotatingWord: RW, Marquee: MQ } = window;

/* ── HeroFlow — rubans Canvas 2D (style Stripe, palette NeoFlow) ── */
function HeroFlow() {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const resize = () => {
      const r = canvas.getBoundingClientRect();
      canvas.width  = Math.round(r.width)  || 800;
      canvas.height = Math.round(r.height) || 600;
    };
    resize();

    const ctx = canvas.getContext('2d');

    /* Palette NeoFlow — 6 rubans du plus clair au plus sombre */
    const ribbons = [
      { color: '#4EEADB', alpha: 0.82, w: 58, spd: 0.50, ph: 0.0 },
      { color: '#00C4A8', alpha: 0.78, w: 72, spd: 0.38, ph: 1.5 },
      { color: '#1A8A80', alpha: 0.80, w: 64, spd: 0.60, ph: 2.8 },
      { color: '#0E6058', alpha: 0.75, w: 78, spd: 0.45, ph: 0.8 },
      { color: '#073830', alpha: 0.68, w: 54, spd: 0.65, ph: 2.1 },
      { color: '#2ECFC0', alpha: 0.70, w: 60, spd: 0.35, ph: 3.5 },
    ];

    let raf;

    function draw(ts) {
      const W = canvas.width;
      const H = canvas.height;
      ctx.clearRect(0, 0, W, H);

      ribbons.forEach((rb, i) => {
        const t   = ts * 0.00025 * rb.spd + rb.ph;
        const amp = H * 0.14;

        const off = i * (H * 0.17);

        const x0  = W + 60;
        const y0  = -60 + off * 0.6 + Math.sin(t * 0.8) * amp * 0.3;

        const cx1 = W * 0.95;
        const cy1 = H * 0.30 + off * 0.4 + Math.sin(t * 1.1 + 0.5) * amp;

        const cx2 = W * 0.55;
        const cy2 = H * 0.62 + off * 0.35 + Math.sin(t * 0.9 + 1.2) * amp;

        const x3  = W * 0.05 + off * 0.1;
        const y3  = H + 60 + off * 0.3 + Math.sin(t * 1.0 + 1.8) * amp * 0.4;

        ctx.beginPath();
        ctx.moveTo(x0, y0);
        ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x3, y3);
        ctx.strokeStyle = rb.color;
        ctx.lineWidth   = rb.w;
        ctx.lineCap     = 'round';
        ctx.globalAlpha = rb.alpha;
        ctx.stroke();
      });

      ctx.globalAlpha = 1;

      /* Fondu gauche */
      const fade = ctx.createLinearGradient(0, 0, W * 0.55, 0);
      fade.addColorStop(0,    'rgba(248,248,246,1)');
      fade.addColorStop(0.75, 'rgba(248,248,246,0.15)');
      fade.addColorStop(1,    'rgba(248,248,246,0)');
      ctx.fillStyle = fade;
      ctx.fillRect(0, 0, W * 0.55, H);

      raf = requestAnimationFrame(draw);
    }

    raf = requestAnimationFrame(draw);
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);

    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
  }, []);

  return (
    <div className="hero-flow" aria-hidden="true">
      <canvas ref={canvasRef} className="hero-flow-canvas" />
    </div>
  );
}

/* ── HeroFlow WebGL rubans (backup — sinusoïdal diagonal) ── */
function HeroFlowWebGL_Ribbons_UNUSED() {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // Taille initiale
    const rect = canvas.getBoundingClientRect();
    canvas.width  = rect.width  || 800;
    canvas.height = rect.height || 600;

    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    if (!gl) return;

    /* ── Vertex shader ── */
    const VS = `attribute vec2 a_pos; void main(){gl_Position=vec4(a_pos,0.0,1.0);}`;

    /* ── Fragment shader : 6 rubans diagonaux + vagues sinusoïdales ── */
    const FS = `
      precision mediump float;
      uniform float u_t;
      uniform vec2  u_res;

      /* Masque d'un ruban : distance verticale à la ligne centrale */
      float ribbon(float py, float cx, float w) {
        return smoothstep(w, w * 0.05, abs(py - cx));
      }

      void main() {
        vec2 uv   = gl_FragCoord.xy / u_res;
        uv.y      = 1.0 - uv.y;
        float asp = u_res.x / u_res.y;
        float px  = uv.x * asp;   /* 0 .. aspect (~1.4) */
        float py  = uv.y;         /* 0 (haut) .. 1 (bas) */
        float t   = u_t * 0.00038;

        /* Palette NeoFlow : cyan vif -> teal sombre */
        vec3 c1 = vec3(0.306, 0.918, 0.859);  /* #4EEADB — cyan vif    */
        vec3 c2 = vec3(0.173, 0.824, 0.745);  /* #2CD2BE — mint        */
        vec3 c3 = vec3(0.000, 0.694, 0.596);  /* #00B198 — teal clair  */
        vec3 c4 = vec3(0.102, 0.541, 0.502);  /* #1A8A80 — teal brand  */
        vec3 c5 = vec3(0.055, 0.376, 0.345);  /* #0E6058 — teal profond*/
        vec3 c6 = vec3(0.028, 0.220, 0.188);  /* #073830 — teal sombre */

        float w = 0.058;  /* demi-largeur des rubans */

        /*
          Chaque ruban :
            y_centre(px) = slope * px + base + amp * sin(px * freq + t * spd + phase)
          slope léger (-0.08) = diagonale douce
          sine = courbure organique (une bosse par canvas)
        */
        float cx1 = -0.08*px + 0.08 + 0.082*sin(px*2.20 + t*1.00 + 0.00);
        float cx2 = -0.08*px + 0.25 + 0.090*sin(px*2.00 + t*0.88 + 1.20);
        float cx3 = -0.08*px + 0.42 + 0.075*sin(px*2.40 + t*1.10 + 2.40);
        float cx4 = -0.08*px + 0.59 + 0.088*sin(px*2.10 + t*0.95 + 0.70);
        float cx5 = -0.08*px + 0.76 + 0.078*sin(px*2.30 + t*1.05 + 1.90);
        float cx6 = -0.08*px + 0.93 + 0.068*sin(px*2.50 + t*1.15 + 3.14);

        float m1 = ribbon(py, cx1, w * 1.00);
        float m2 = ribbon(py, cx2, w * 1.05);
        float m3 = ribbon(py, cx3, w * 1.10);
        float m4 = ribbon(py, cx4, w * 1.15);
        float m5 = ribbon(py, cx5, w * 1.05);
        float m6 = ribbon(py, cx6, w * 0.85);

        /* Accumulation des couleurs */
        vec3 col  = c1*m1 + c2*m2 + c3*m3 + c4*m4 + c5*m5 + c6*m6;
        float tot = m1 + m2 + m3 + m4 + m5 + m6;
        /* Normalise les zones de chevauchement */
        if (tot > 1.0) col = col / tot;
        float a = min(tot, 1.0);

        /* Fondu bord gauche (30 %) + haut/bas (4 %) */
        float fadeL = smoothstep(0.0, 0.30, uv.x);
        float fadeY = smoothstep(0.0, 0.04, uv.y) * smoothstep(0.0, 0.04, 1.0 - uv.y);

        gl_FragColor = vec4(col, a * fadeL * fadeY * 0.92);
      }
    `;

    function mkShader(type, src) {
      const s = gl.createShader(type);
      gl.shaderSource(s, src);
      gl.compileShader(s);
      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
        console.error('[HeroFlow] Shader error:', gl.getShaderInfoLog(s));
        return null;
      }
      return s;
    }

    const vs = mkShader(gl.VERTEX_SHADER, VS);
    const fs = mkShader(gl.FRAGMENT_SHADER, FS);
    if (!vs || !fs) return;

    const prog = gl.createProgram();
    gl.attachShader(prog, vs);
    gl.attachShader(prog, fs);
    gl.linkProgram(prog);
    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
      console.error('[HeroFlow] Program error:', gl.getProgramInfoLog(prog));
      return;
    }
    gl.useProgram(prog);

    /* Quad plein écran */
    const buf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER,
      new Float32Array([-1,-1, 1,-1, -1,1, 1,1]),
      gl.STATIC_DRAW);
    const aPos = gl.getAttribLocation(prog, 'a_pos');
    gl.enableVertexAttribArray(aPos);
    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

    const uT   = gl.getUniformLocation(prog, 'u_t');
    const uRes = gl.getUniformLocation(prog, 'u_res');

    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    let raf;

    function resize() {
      const r = canvas.getBoundingClientRect();
      canvas.width  = Math.round(r.width)  || 800;
      canvas.height = Math.round(r.height) || 600;
      gl.viewport(0, 0, canvas.width, canvas.height);
    }

    function draw(now) {
      gl.clearColor(0, 0, 0, 0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.uniform1f(uT, now);
      gl.uniform2f(uRes, canvas.width, canvas.height);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
      raf = requestAnimationFrame(draw);
    }

    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);
    raf = requestAnimationFrame(draw);

    return () => {
      cancelAnimationFrame(raf);
      ro.disconnect();
    };
  }, []);

  return (
    <div className="hero-flow" aria-hidden="true">
      <canvas ref={canvasRef} className="hero-flow-canvas" />
    </div>
  );
}

/* ── HeroFlow WebGL FBM backup (domain warping — non utilisé) ── */
function HeroFlowFBM_UNUSED() {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    if (!gl) return;

    const VS = `attribute vec2 a_pos; void main(){gl_Position=vec4(a_pos,0,1);}`;

    const FS = `
      precision mediump float;
      uniform float u_t;
      uniform vec2  u_res;

      /* --- noise de base --- */
      vec2 hash2(vec2 p){
        p=vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3)));
        return -1.0+2.0*fract(sin(p)*43758.5453);
      }
      float gn(vec2 p){
        vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);
        return mix(mix(dot(hash2(i),f),dot(hash2(i+vec2(1,0)),f-vec2(1,0)),u.x),
                   mix(dot(hash2(i+vec2(0,1)),f-vec2(0,1)),dot(hash2(i+vec2(1)),f-vec2(1)),u.x),u.y);
      }

      /* --- FBM : 5 octaves --- */
      float fbm(vec2 p){
        float v=0.0,a=0.5;
        for(int i=0;i<5;i++){v+=a*gn(p);p=p*2.1+vec2(3.1,1.7);a*=0.5;}
        return v;
      }

      void main(){
        vec2 uv=gl_FragCoord.xy/u_res;
        uv.y=1.0-uv.y;
        float t=u_t*0.035;

        /* --- domain warping (Inigo Quilez) --- */
        vec2 q=vec2(fbm(uv+t), fbm(uv+vec2(5.2,1.3)+t*0.9));
        vec2 r=vec2(fbm(uv+3.5*q+vec2(1.7,9.2)+t*0.5),
                    fbm(uv+3.5*q+vec2(8.3,2.8)+t*0.6));
        float f=fbm(uv+3.0*r+t*0.3);
        f=clamp(f*0.5+0.5,0.0,1.0);

        /* --- palette : contraste fort sombre/clair --- */
        vec3 cDark  =vec3(0.02,0.12,0.11);   /* quasi noir-teal          */
        vec3 cMid   =vec3(0.10,0.48,0.45);   /* brand #1A7A72            */
        vec3 cBright=vec3(0.00,0.78,0.68);   /* mint vif #00C7AD         */
        vec3 cPale  =vec3(0.55,0.90,0.86);   /* mint très clair #8CE6DC  */

        vec3 col=mix(cDark,cMid,   smoothstep(0.0,0.55,f));
        col     =mix(col, cBright, smoothstep(0.45,0.80,f));
        col     =mix(col, cPale,   smoothstep(0.72,1.00,f)*0.65);

        /* --- fondu bord gauche large + haut/bas --- */
        float fadeX=smoothstep(0.0,0.40,uv.x);
        float fadeY=smoothstep(0.0,0.08,uv.y)*smoothstep(0.0,0.08,1.0-uv.y);

        gl_FragColor=vec4(col,0.88*fadeX*fadeY);
      }
    `;

    function mkShader(type, src) {
      const s = gl.createShader(type);
      gl.shaderSource(s, src); gl.compileShader(s);
      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
        console.error(gl.getShaderInfoLog(s)); return null;
      }
      return s;
    }

    const prog = gl.createProgram();
    const vs = mkShader(gl.VERTEX_SHADER, VS);
    const fs = mkShader(gl.FRAGMENT_SHADER, FS);
    if (!vs || !fs) return;
    gl.attachShader(prog, vs); gl.attachShader(prog, fs); gl.linkProgram(prog);
    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { console.error(gl.getProgramInfoLog(prog)); return; }
    gl.useProgram(prog);

    const buf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]), gl.STATIC_DRAW);
    const posLoc = gl.getAttribLocation(prog, 'a_pos');
    gl.enableVertexAttribArray(posLoc);
    gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);

    const uT = gl.getUniformLocation(prog, 'u_t');
    const uR = gl.getUniformLocation(prog, 'u_res');
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    let raf; const t0 = performance.now();

    function resize() {
      const r = canvas.getBoundingClientRect();
      canvas.width  = Math.round(r.width)  || 700;
      canvas.height = Math.round(r.height) || 700;
      gl.viewport(0, 0, canvas.width, canvas.height);
    }

    function draw() {
      if (!canvas.width || !canvas.height) { raf = requestAnimationFrame(draw); return; }
      gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT);
      gl.uniform1f(uT, (performance.now()-t0)/1000);
      gl.uniform2f(uR, canvas.width, canvas.height);
      gl.drawArrays(gl.TRIANGLES, 0, 6);
      raf = requestAnimationFrame(draw);
    }

    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);
    raf = requestAnimationFrame(draw);
    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
  }, []);

  return <canvas ref={canvasRef} className="hero-flow" aria-hidden="true" />;
}

function Hero({ setRoute }) {
  const words = ['agence', 'commerce', 'cabinet', 'restaurant', 'studio', 'entreprise', 'atelier', 'activité'];
  return (
    <section className="hero" data-section="hero">
      <div className="hero-grain" aria-hidden="true"></div>
      <div className="wrap hero-inner">
        <div className="hero-tag mono">
          <span className="dot"></span>
          <span>Agence digitale · Disponible · Réponse 24h</span>
        </div>
        <h1 className="hero-h1">
          <span className="line"><RT text="On développe vos outils" stagger={40} delay={120} /></span>
          <span className="line line-italic">
            <span className="rt-tail"><RT text="Vous, votre" stagger={48} delay={520} /></span>
            <span className="rotw-slot">
              <RW words={words} />
              <svg className="rotw-underline" viewBox="0 0 200 10" preserveAspectRatio="none" aria-hidden="true">
                <path d="M 2 6 Q 100 0, 198 6" stroke="currentColor" strokeWidth="1" fill="none" />
              </svg>
            </span>
            <span className="period"></span>
          </span>
        </h1>
        <div className="hero-meta">
          <p className="hero-lede">Sites web, applications, automatisations et agents IA — construits sur mesure pour votre métier. Un seul interlocuteur, de bout en bout.</p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={() => { window.posthog && window.posthog.capture('cta_click', { cta: 'hero_demarrer', page: 'home' }); setRoute('/demarrer'); }}>
              <span>Démarrer un projet</span>
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" strokeWidth="1.4" /></svg>
            </button>
            <a className="btn btn-ghost" href="#services" onClick={() => window.posthog && window.posthog.capture('cta_click', { cta: 'hero_services', page: 'home' })}>
              <span>Voir nos services</span>
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" strokeWidth="1.2" /></svg>
            </a>
          </div>
        </div>
        <div className="hero-floor mono">
          <span>① Sur mesure</span>
          <span>② Un interlocuteur</span>
          <span>③ Tout est sur devis</span>
          <span>④ Hébergement inclus</span>
        </div>
      </div>

      <HeroFlow />
    </section>);

}

function Services() {
  const items = [
  { n: '01', verb: 'On développe', body: "Applications web, outils internes, interfaces sur mesure. Tout ce dont votre métier a besoin, construit pour durer.", tags: ['Sites web', 'Outils internes', 'Apps métier'] },
  { n: '02', verb: 'On automatise', body: "Les tâches répétitives qui vous font perdre du temps — on les supprime. Synchronisations, workflows, relances, rapports.", tags: ['Workflows', 'Synchronisations', 'Relances'] },
  { n: '03', verb: "On intègre l'IA", body: "Des agents qui répondent, qualifient et analysent à votre place. L'intelligence artificielle au service de votre réalité quotidienne.", tags: ['Agents conversationnels', 'Qualification', 'Analyse'] }];

  return (
    <section className="services" id="services" data-section="services">
      <div className="wrap">
        <div className="section-head">
          <div className="mono section-n">§ 01 · Services</div>
          <h2 className="section-title"><RT text="Ce qu'on fait." stagger={40} /></h2>
        </div>
        <div className="services-grid">
          {items.map((s, i) =>
          <R key={s.n} delay={i * 120} className="service">
              <div className="service-top mono"><span>{s.n}</span><span className="line-h"></span></div>
              <h3 className="service-verb">{s.verb}</h3>
              <p className="service-body">{s.body}</p>
              <ul className="service-tags">
                {s.tags.map((t) => <li key={t}>— {t}</li>)}
              </ul>
            </R>
          )}
        </div>
        <R className="services-foot">
          <p><em>Pas de package préconçu.</em> On échange, on comprend votre métier, et on construit exactement ce dont vous avez besoin.</p>
        </R>
      </div>
    </section>);

}

function MarqueeDiv({ items }) {
  return (
    <div className="marquee-divider">
      <MQ speed={48}>
        {items.map((t, i) =>
        <span key={i} className="mq-item"><span className="mq-dot">✦</span><span>{t}</span></span>
        )}
      </MQ>
    </div>);

}

function Process() {
  const steps = [
  { n: '01', title: 'On comprend votre besoin', body: "Premier échange — par message ou par appel. On prend le temps de comprendre votre métier, vos contraintes, ce que vous voulez vraiment.", meta: 'Sans engagement' },
  { n: '02', title: 'On construit ensemble', body: "On conçoit la solution et on vous la présente avant de développer. Vous validez, vous ajustez, on construit. Vous suivez l'avancement à chaque étape.", meta: 'Itératif' },
  { n: '03', title: 'On livre. Vous utilisez.', body: "Mise en ligne, hébergement, infrastructure — on gère tout. Vous recevez une solution clé en main, prête à l'emploi. Rien à gérer de votre côté.", meta: 'Clé en main' }];

  return (
    <section className="process" id="process" data-section="process">
      <div className="wrap">
        <div className="section-head">
          <div className="mono section-n">§ 02 · Process</div>
          <h2 className="section-title"><RT text="Comment ça se passe." stagger={40} /></h2>
        </div>
        <ol className="process-list">
          {steps.map((s, i) =>
          <R as="li" key={s.n} className="step" delay={i * 100}>
              <div className="step-num mono">{s.n}</div>
              <div className="step-body">
                <h3 className="step-title">{s.title}</h3>
                <p>{s.body}</p>
              </div>
              <div className="step-meta mono">{s.meta}</div>
            </R>
          )}
        </ol>
      </div>
    </section>);

}

function Noakim() {
  return (
    <section className="noakim" id="noakim" data-section="noakim">
      <div className="wrap noakim-grid">
        <div className="noakim-portrait">
          <R>
            <div className="portrait">
              <div className="portrait-frame">
                <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
                  <defs>
                    <pattern id="grain-n" x="0" y="0" width="3" height="3" patternUnits="userSpaceOnUse">
                      <rect width="3" height="3" fill="var(--bg-2)" />
                      <circle cx="1.5" cy="1.5" r="0.3" fill="var(--fg-2)" opacity="0.18" />
                    </pattern>
                  </defs>
                  <rect width="400" height="500" fill="url(#grain-n)" />
                  <g stroke="var(--fg)" strokeWidth="0.6">
                    <line x1="40" y1="40" x2="60" y2="40" /><line x1="40" y1="40" x2="40" y2="60" />
                    <line x1="360" y1="40" x2="340" y2="40" /><line x1="360" y1="40" x2="360" y2="60" />
                    <line x1="40" y1="460" x2="60" y2="460" /><line x1="40" y1="460" x2="40" y2="440" />
                    <line x1="360" y1="460" x2="340" y2="460" /><line x1="360" y1="460" x2="360" y2="440" />
                  </g>
                  <text x="200" y="248" textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="11" fill="var(--fg-2)" letterSpacing="2">[ PORTRAIT ]</text>
                  <text x="200" y="268" textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="10" fill="var(--fg-3)" letterSpacing="2">NOAKIM GRELIER</text>
                  <text x="200" y="286" textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="9" fill="var(--fg-3)" letterSpacing="2">À AJOUTER</text>
                </svg>
              </div>
              <div className="portrait-caption mono">
                <span>Noakim Grelier</span>
                <span>Fondateur · 2026</span>
              </div>
            </div>
          </R>
        </div>
        <div className="noakim-text">
          <div className="mono section-n">§ 03 · L'interlocuteur</div>
          <h2 className="noakim-name">Noakim <em>Grelier</em></h2>
          <div className="noakim-body">
            <p><RT text="J'ai 16 ans, autodidacte — j'ai appris sur le terrain, en construisant des projets concrets, un après l'autre." stagger={6} mode="word" /></p>
            <p>C'est ce que j'aime dans ce métier : partir d'un problème concret, réfléchir à la meilleure solution, et la voir exister là où il n'y avait rien. Du premier échange jusqu'à la livraison — <em>un seul interlocuteur</em>, une vraie présence à chaque étape.</p>
            <p className="noakim-sign">C'est pour ça que j'ai créé NeoFlow Agency</p>
          </div>
          <div className="noakim-meta">
            <div><span className="mono">Base</span> Haute-Goulaine, près de Nantes</div>
            <div><span className="mono">Formé</span> En autodidacte, sur le terrain</div>
            <div><span className="mono">Approche</span> Sur mesure, sans intermédiaire</div>
          </div>
        </div>
      </div>
    </section>);

}

function About() {
  return (
    <section className="about dark-section" id="about" data-section="about">
      <div className="wrap">
        <div className="section-head">
          <div className="mono section-n">§ 04 · NeoFlow Agency</div>
          <h2 className="section-title section-title-lg">
            <em><RT text="L'écart se creuse," stagger={40} /></em>
            <br />
            <RT text="à l'ère de l'IA." stagger={40} delay={400} />
          </h2>
        </div>
        <div className="about-grid">
          <div className="about-col">
            <p>Ceux qui prennent le virage aujourd'hui auront une longueur d'avance demain. Ceux qui attendent n'accumulent pas quelques semaines de retard, ils en accumulent des années.</p>
            <p>NeoFlow est née d'un constat : la technologie qui transforme les grandes entreprises reste trop souvent hors de portée des PME, des commerces, des structures indépendantes.</p>
          </div>
          <div className="about-col">
            <p>On conçoit des sites web, des applications, des automatisations, des agents IA. Pas des solutions génériques — des projets construits pour chaque métier, chaque réalité, chaque objectif.</p>
            <p><em>Chaque projet est différent. Chaque solution l'est aussi.</em></p>
            <p>Noakim Grelier, fondateur — basé à Haute-Goulaine, près de Nantes. Autodidacte, convaincu que la technologie doit être un levier accessible à tous, pas un avantage réservé aux grandes structures.</p>
          </div>
        </div>
        <R className="quote">
          <div className="quote-mark">"</div>
          <blockquote>
            <p>La meilleure façon de prédire le futur,<br /><em>c'est de l'inventer.</em></p>
            <cite>— Alan Kay</cite>
          </blockquote>
        </R>
      </div>
    </section>);

}

function ImmoTeaser({ setRoute }) {
  return (
    <section className="immo-teaser dark-section" id="immo-teaser" data-section="immo-teaser">
      <div className="wrap">
        <div className="section-head">
          <div className="mono section-n">§ 05 · Projet immobilier</div>
          <h2 className="section-title section-title-lg">
            <em>NeoFlow Immo —</em><br />
            construit par vous,<br />
            pour vous.
          </h2>
        </div>
        <div className="about-grid">
          <R className="about-col">
            <p>Les grands réseaux ont des outils puissants. Les agences indépendantes, elles, gèrent encore avec Excel et des sites qui ne génèrent pas de leads.</p>
            <p>NeoFlow Immo est né de ce constat — construire avec ceux qui vivent ça au quotidien, pas pour eux.</p>
          </R>
          <R className="about-col" delay={100}>
            <p>Automatisations, site connecté, pipeline contacts, agent IA 24h/24 — des outils pensés pour les indépendants, pas pour les grandes franchises.</p>
            <p><em>Customer discovery en cours. Aucun engagement. Anonymat possible.</em></p>
            <a
              className="btn btn-ghost"
              href="#/immobilier"
              style={{ marginTop: '24px', display: 'inline-flex' }}
              onClick={(e) => { e.preventDefault(); if (window.posthog) window.posthog.capture('cta_click', { cta: 'immo_teaser', page: 'home' }); setRoute('/immobilier'); }}
            >
              <span>Découvrir NeoFlow Immo</span>
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" strokeWidth="1.4" /></svg>
            </a>
          </R>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
  { q: 'Quel est le budget pour un projet ?', a: "Tout dépend du projet. On échange d'abord, on vous revient avec une proposition transparente. Pas de tarif fixe." },
  { q: 'Combien de temps prend un projet ?', a: "De quelques jours pour une automatisation simple à plusieurs semaines pour une application complète. On définit ensemble un calendrier réaliste dès le départ." },
  { q: "Je n'y connais rien en technique. C'est un problème ?", a: "Pas du tout. C'est notre travail de traduire votre besoin en solution. Vous n'avez pas besoin de comprendre comment ça fonctionne — juste de savoir ce que vous voulez." },
  { q: "Est-ce qu'il y a un engagement ?", a: "Non. On commence par un échange sans engagement. La suite se décide ensemble." },
  { q: 'Vous êtes disponibles rapidement ?', a: "On répond sous 24h. Un interlocuteur unique tout au long du projet." }];

  const [open, setOpen] = hUseState(0);
  return (
    <section className="faq" id="faq" data-section="faq">
      <div className="wrap faq-grid">
        <div className="faq-left">
          <div className="mono section-n">§ 06 · FAQ</div>
          <h2 className="section-title">Questions <em>fréquentes.</em></h2>
          <p className="faq-aside">Une question qui n'est pas listée ? Utilisez le formulaire <a href="#contact">Poser une question</a> ci-dessous — on répond toujours sous 24h.</p>
        </div>
        <ul className="faq-list">
          {items.map((it, i) =>
          <li key={i} className={`faq-item ${open === i ? 'is-open' : ''}`}>
              <button className="faq-q" onClick={() => { if (open !== i && window.posthog) window.posthog.capture('faq_open', { question: it.q, index: i }); setOpen(open === i ? -1 : i); }} data-cursor>
                <span className="faq-q-num mono">{String(i + 1).padStart(2, '0')}</span>
                <span className="faq-q-text">{it.q}</span>
                <span className="faq-q-ic" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 14 14"><line x1="2" y1="7" x2="12" y2="7" stroke="currentColor" strokeWidth="1.2" /><line className="vline" x1="7" y1="2" x2="7" y2="12" stroke="currentColor" strokeWidth="1.2" /></svg>
                </span>
              </button>
              <div className="faq-a-wrap"><div className="faq-a">{it.a}</div></div>
            </li>
          )}
        </ul>
      </div>
    </section>);

}

function Contact({ setRoute }) {
  return (
    <section className="contact" id="contact" data-section="contact">
      <div className="wrap">
        <div className="section-head contact-head">
          <div className="mono section-n">§ 07 · Contact</div>
          <h2 className="section-title">On vous répond <em>sous 24h.</em></h2>
          <p className="contact-sub">Choisissez comment vous voulez échanger.</p>
        </div>
        <div className="home-contact-cards">
          <div className="home-contact-card home-contact-card-dark">
            <div className="hcc-num mono">① Démarrer un projet</div>
            <h3>Un projet en tête ?</h3>
            <p>Partagez votre besoin — on vous revient sous 24h avec une proposition concrète. Aucun engagement.</p>
            <button
              className="btn btn-primary"
              onClick={() => { if (window.posthog) window.posthog.capture('contact_card_click', { card: 'demarrer', page: 'home' }); setRoute('/demarrer'); }}
            >
              <span>Envoyer ma demande</span>
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" strokeWidth="1.4"/></svg>
            </button>
          </div>
          <div className="home-contact-card">
            <div className="hcc-num mono">② Poser une question</div>
            <h3>Une question rapide ?</h3>
            <p>Sur nos services, nos tarifs, ou votre projet — on répond à tout, toujours sous 24h.</p>
            <button
              className="btn btn-ghost"
              onClick={() => { if (window.posthog) window.posthog.capture('contact_card_click', { card: 'question', page: 'home' }); setRoute('/question'); }}
            >
              <span>Écrire un message</span>
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" strokeWidth="1.2"/></svg>
            </button>
          </div>
        </div>
        <div className="contact-foot mono">
          <span>contact@neoflow-agency.cloud</span>
          <span>·</span>
          <span>Réponse sous 24h</span>
          <span>·</span>
          <span>Tout est sur devis</span>
        </div>
      </div>
    </section>
  );
}

function HomePage({ setRoute }) {
  return (
    <div className="page page-home" data-screen-label="01 Accueil — Atelier">
      <Hero setRoute={setRoute} />
      <MarqueeDiv items={['Sites web sur mesure', 'Applications métier', 'Automatisations', 'Agents IA', 'Hébergement inclus', 'Un seul interlocuteur', 'Réponse sous 24h']} />
      <Services />
      <Process />
      <About />
      <Noakim />
      <ImmoTeaser setRoute={setRoute} />
      <FAQ />
      <Contact setRoute={setRoute} />
    </div>);

}

window.HomePage = HomePage;