// NeoFlow — /immobilier page
const { useState: iUseState } = React;
const { Reveal: IR, RevealText: IRT, Marquee: IMQ } = window;


/* ── HeroFlowImmo — mêmes rubans que la home, palette bleue immo ── */
function HeroFlowImmo() {
  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 bleue immo — même structure que les rubans teal de la home */
    const ribbons = [
      { color: '#7B79F0', alpha: 0.82, w: 58, spd: 0.50, ph: 0.0 },
      { color: '#403edb', alpha: 0.78, w: 72, spd: 0.38, ph: 1.5 },
      { color: '#2a29a8', alpha: 0.80, w: 64, spd: 0.60, ph: 2.8 },
      { color: '#1a107a', alpha: 0.75, w: 78, spd: 0.45, ph: 0.8 },
      { color: '#0d0850', alpha: 0.68, w: 54, spd: 0.65, ph: 2.1 },
      { color: '#5250d4', alpha: 0.70, w: 60, spd: 0.35, ph: 3.5 },
    ];
    let raf;
    function draw(ts) {
      const W = canvas.width, 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;
      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 immo-hero-flow" aria-hidden="true">
      <canvas ref={canvasRef} className="hero-flow-canvas" />
    </div>
  );
}

/* ── Hero — même structure exacte que la home ── */
function ImmoHero({ setRoute }) {
  return (
    <section className="hero immo-hero" data-section="immo-hero">
      <div className="hero-grain" aria-hidden="true"></div>
      <div className="wrap hero-inner">
        <div className="immo-crumbs mono">
          <a href="#/" onClick={(e) => { e.preventDefault(); setRoute('/'); }}>NeoFlow Agency</a>
          <span>/</span>
          <span>Immobilier</span>
        </div>
        <div className="immo-hero-stamp mono" style={{ marginTop: '20px' }}>
          <span className="stamp-dot"></span>
          <span>Customer discovery · Co-construction en cours</span>
        </div>
        <h1 className="hero-h1 immo-h1-hero">
          <span className="line">NeoFlow <em>Immo —</em></span>
          <span className="line">construit par vous,</span>
          <span className="line line-italic"><em>pour vous.</em></span>
        </h1>
        <div className="hero-meta">
          <p className="hero-lede">Un projet pensé pour les agences immobilières indépendantes. On ne vend rien. On construit avec celles et ceux qui le vivent au quotidien.</p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={() => { window.posthog && window.posthog.capture('cta_click', { cta: 'immo_hero_repondre', page: 'immobilier' }); setRoute('/immo/repondre'); }}>
              <span>Répondre aux questions</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>
            <button className="btn btn-ghost" onClick={() => { window.posthog && window.posthog.capture('cta_click', { cta: 'immo_hero_question', page: 'immobilier' }); setRoute('/immo/question'); }}>
              <span>Poser une question</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="hero-floor immo-floor mono">
          <span>① Sans engagement</span>
          <span>② Anonyme si voulu</span>
          <span>③ Aucun frais</span>
          <span>④ Accès prioritaire</span>
        </div>
      </div>
      <HeroFlowImmo />
    </section>
  );
}

/* ── Pourquoi — section sombre (style About) ── */
function Pourquoi() {
  return (
    <section className="pourquoi dark-section" data-section="pourquoi">
      <div className="wrap">
        <div className="section-head">
          <div className="mono section-n">§ 01 · Pourquoi on fait ça</div>
          <h2 className="section-title section-title-lg">
            <em>L'écart se creuse.</em><br/>
            On veut le combler.
          </h2>
        </div>
        <div className="pourquoi-grid">
          <IR className="pourquoi-col">
            <p>Les grands réseaux ont des outils puissants, des équipes dédiées, des budgets tech qui leur permettent de capter des mandats, de qualifier des prospects, de travailler mieux — et plus vite.</p>
            <p>Les agences indépendantes, elles, gèrent encore avec Excel, des appels téléphoniques, et des sites qui ne génèrent pas de leads.</p>
          </IR>
          <IR className="pourquoi-col" delay={140}>
            <p>NeoFlow Immo est né de ce constat.</p>
            <p>On pense que chaque agence — quelle que soit sa taille — mérite des outils à la hauteur de son ambition. Et on veut construire ça <em>depuis le terrain</em>, avec ceux qui le vivent au quotidien.</p>
            <p>Pas une solution générique habillée pour l'immobilier. Quelque chose de construit autour de votre façon de travailler, de votre équipe, de vos besoins réels.</p>
          </IR>
        </div>
      </div>
    </section>
  );
}

/* ── Bénéfices — texte simple, bénéfices pas fonctionnalités ── */
function Benefices() {
  return (
    <section className="immo-benefices" data-section="benefices">
      <div className="wrap">
        <div className="section-head">
          <div className="mono section-n">§ 02 · Ce que ça change</div>
          <h2 className="section-title">Concrètement,<br/><em>voilà ce qu'on imagine.</em></h2>
        </div>
        <div className="benefices-body">
          <IR>
            <p>Plus de dimanches perdus à relancer des mandats qui expirent dans la semaine. Un site qui capte de vrais prospects pendant que vous êtes en rendez-vous, pas un catalogue statique que personne ne visite.</p>
          </IR>
          <IR delay={80}>
            <p>Vos acheteurs, vendeurs, bailleurs, locataires — chacun dans son propre pipeline, visible d'un coup d'œil. Fini les fichiers Excel avec 400 lignes que vous ne savez plus lire.</p>
          </IR>
          <IR delay={160}>
            <p>Un assistant qui répond à 23h quand un propriétaire visite votre site, qui qualifie son projet, et vous présente un résumé le lendemain matin. Et vos clients qui suivent l'avancement de leur dossier eux-mêmes — sans vous appeler trois fois dans la semaine.</p>
          </IR>
          <IR delay={240} className="benefices-foot">
            <p><em>Ce sont des hypothèses. C'est exactement ce qu'on veut valider avec vous — pour construire quelque chose qui correspond vraiment à votre réalité.</em></p>
          </IR>
        </div>
      </div>
    </section>
  );
}

/* ── Ce qu'on vous demande ── */
function Demande() {
  return (
    <section className="demande dark-section" data-section="demande">
      <div className="wrap demande-grid">
        <div className="demande-left">
          <div className="mono section-n">§ 03 · Ce qu'on vous demande</div>
          <h2 className="section-title">Quelques minutes.<br/><em>Aucun engagement.</em></h2>
        </div>
        <div className="demande-right">
          <IR><p>On ne vous demande pas de signer quoi que ce soit. On ne vous vend rien.</p></IR>
          <IR delay={80}><p>Juste quelques minutes pour répondre à nos questions — votre quotidien, vos outils, ce qui vous prend trop de temps, ce qui vous manque. <em>Anonyme si vous le souhaitez.</em></p></IR>
          <IR delay={160}><p>Certains voudront juste partager leur avis et ne plus entendre parler de nous — c'est parfait, chaque réponse compte vraiment. D'autres voudront rester en contact et suivre l'avancement. Dans les deux cas, aucune obligation.</p></IR>
        </div>
      </div>
    </section>
  );
}

/* ── Contact — 3 cartes CTA ── */
function ImmoContact({ setRoute }) {
  const cards = [
    {
      num: '①',
      title: 'Répondre aux questions',
      desc: 'Quelques minutes pour partager votre quotidien. Anonyme si vous le souhaitez.',
      cta: 'Commencer',
      route: '/immo/repondre',
      event: 'immo_card_repondre',
    },
    {
      num: '②',
      title: 'Réserver un appel',
      desc: 'Choisissez un créneau directement dans l\'agenda — 30 minutes, sans engagement.',
      cta: 'Voir les disponibilités',
      route: '/immo/appel',
      event: 'immo_card_appel',
    },
    {
      num: '③',
      title: 'Poser une question',
      desc: 'Une interrogation sur le projet ? On répond sous 24h.',
      cta: 'Écrire',
      route: '/immo/question',
      event: 'immo_card_question',
    },
  ];

  return (
    <section className="contact immo-contact" id="contact" data-section="contact">
      <div className="wrap">
        <div className="section-head contact-head">
          <div className="mono section-n">§ 04 · Contact</div>
          <h2 className="section-title">Quelques minutes <em>suffisent.</em></h2>
          <p className="contact-sub">Vos réponses construiront quelque chose de concret.</p>
        </div>
        <div className="immo-contact-cards">
          {cards.map(({ num, title, desc, cta, route, event }) => (
            <div className="immo-contact-card" key={route}>
              <div className="icc-num mono">{num}</div>
              <h3>{title}</h3>
              <p>{desc}</p>
              <button
                className="btn btn-primary"
                onClick={() => {
                  if (window.posthog) window.posthog.capture('contact_card_click', { card: event, page: 'immobilier' });
                  setRoute(route);
                }}
                data-cursor
              >
                <span>{cta}</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>
        <div className="contact-foot mono">
          <span>contact@neoflow-agency.cloud</span>
          <span>·</span>
          <span>Réponse sous 24h</span>
          <span>·</span>
          <span>Tout est gratuit</span>
        </div>
      </div>
    </section>
  );
}

/* ── Page assembly ── */
function ImmoPage({ setRoute }) {
  return (
    <div className="page page-immo" data-screen-label="02 Immobilier — NeoFlow">
      <ImmoHero setRoute={setRoute} />
      <IMQ speed={56}>
        {['Customer discovery', 'Co-construction', 'Agences pilotes', 'Tarif préférentiel', 'Accès prioritaire', 'Anonymat possible', 'Aucun engagement'].map((t, i) => (
          <span key={i} className="mq-item"><span className="mq-dot">◆</span><span>{t}</span></span>
        ))}
      </IMQ>
      <Pourquoi />
      <Benefices />
      <Demande />
      <ImmoContact setRoute={setRoute} />
    </div>
  );
}

window.ImmoPage = ImmoPage;