// NeoFlow — /immobilier/produit — Page produit avec sidebar drum wheel iOS 26
const { useState: pUseState, useEffect: pUseEffect, useRef: pUseRef, useCallback: pUseCallback } = React;
const { Reveal: PR, RevealText: PRT } = window;

/* ── Sections de navigation ── */
const PRODUIT_SECTIONS = [
  { id: 'site',  abbr: 'Site', label: 'Site Vitrine'    },
  { id: 'crm',   abbr: 'CRM',  label: 'CRM intégré'     },
  { id: 'auto',  abbr: 'Auto', label: 'Automatisations' },
  { id: 'ia',    abbr: 'IA',   label: 'Agent IA'        },
];

/* ── Drum Wheel Pill ── */
function WheelPill({ active, onNavigate }) {
  const activeIndex = PRODUIT_SECTIONS.findIndex(s => s.id === active);

  return (
    <nav className="wheel-pill" aria-label="Navigation du produit">
      <div className="wheel-track">
        <div
          className="wheel-list"
          style={{ '--active': activeIndex }}
        >
          {PRODUIT_SECTIONS.map((s) => (
            <button
              key={s.id}
              type="button"
              className={`wheel-item${active === s.id ? ' is-active' : ''}`}
              onClick={() => onNavigate(s.id)}
              aria-current={active === s.id ? 'true' : undefined}
              title={s.label}
            >
              <span className="wheel-abbr">{s.abbr}</span>
              <span className="wheel-label">{s.label}</span>
            </button>
          ))}
        </div>
      </div>
    </nav>
  );
}

/* ── Canvas animation Hero (réutilisée depuis immobilier) ── */
function HeroFlowProduit() {
  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');
    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, y0 = -60 + off * 0.6 + Math.sin(t * 0.8) * amp * 0.3;
        const cx1 = W * 0.95, cy1 = H * 0.30 + off * 0.4 + Math.sin(t * 1.1 + 0.5) * amp;
        const cx2 = W * 0.55, cy2 = H * 0.62 + off * 0.35 + Math.sin(t * 0.9 + 1.2) * amp;
        const x3 = W * 0.05 + off * 0.1, 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 court ── */
function ProduitHero({ setRoute }) {
  return (
    <section className="hero immo-hero produit-hero" data-section="produit-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>
          <a href="#/immobilier" onClick={(e) => { e.preventDefault(); setRoute('/immobilier'); }}>NeoFlow Immo</a>
          <span>/</span>
          <span>Le produit</span>
        </div>
        <div className="immo-hero-stamp mono" style={{ marginTop: '20px' }}>
          <span className="stamp-dot"></span>
          <span>Site vitrine · CRM · Automatisations · Agent IA</span>
        </div>
        <h1 className="hero-h1 immo-h1-hero produit-h1">
          <span className="line">Quatre piliers.</span>
          <span className="line line-italic"><em>Combinés pour vous.</em></span>
        </h1>
        <div className="hero-meta">
          <p className="hero-lede">Les briques sont les mêmes. L'assemblage est unique. Voici ce qu'on construit — et pourquoi chaque pièce compte.</p>
        </div>
      </div>
      <HeroFlowProduit />
    </section>
  );
}

/* ── § A — Site Vitrine ── */
function SectionSite() {
  const features = [
    {
      title: 'Vitrine & Listings',
      desc: "Votre catalogue de biens présenté avec soin. Recherche, filtres, carte interactive Mapbox — le visiteur trouve ce qu'il cherche sans vous appeler.",
      detail: "La mise en ligne d'un bien depuis le BOS se répercute instantanément sur le site. Pas de double saisie."
    },
    {
      title: 'Estimation en ligne',
      desc: "Un formulaire intelligent qui calcule une fourchette réaliste basée sur les données DVF (Demandes de Valeurs Foncières) — les vraies transactions du marché.",
      detail: "Chaque estimation reçue crée automatiquement une fiche prospect dans le CRM."
    },
    {
      title: 'Prise de RDV intégrée',
      desc: "Vos disponibilités directement sur le site. Le prospect choisit un créneau, vous recevez une confirmation. Fini les 3-4 allers-retours téléphoniques.",
      detail: "Synchronisé avec l'agenda du BOS. Un RDV pris en ligne apparaît immédiatement pour toute l'équipe."
    },
    {
      title: 'Alertes biens automatiques',
      desc: "Un visiteur définit ses critères et s'abonne. Dès qu'un bien correspondant est publié, il reçoit un SMS ou email automatique.",
      detail: "Vous n'avez rien à faire. Nouveau bien publié → détection des critères → envoi automatique."
    },
    {
      title: 'Espace client',
      desc: "Chaque vendeur, acheteur ou locataire accède à un espace personnel pour suivre l'avancement de son dossier, consulter ses documents, voir l'historique.",
      detail: "Résultat : moins d'appels entrants du type « où en est mon dossier ? ». Le client a l'information sans vous solliciter."
    },
    {
      title: 'Agent IA conseiller',
      desc: "Un assistant conversationnel disponible 24h/24. Il répond aux questions sur vos biens, qualifie les visiteurs, et vous passe la main quand c'est le bon moment.",
      detail: "Il ne dit jamais n'importe quoi — si la réponse n'est pas dans ses données, il l'admet et propose de vous mettre en relation."
    },
  ];

  return (
    <section className="produit-section" id="site" data-section="site">
      <div className="wrap">
        <div className="produit-section-head">
          <div className="mono section-n">§ A · Site Vitrine</div>
          <h2 className="section-title">Le visage public<br/><em>de votre agence.</em></h2>
          <p className="contact-sub">Conçu pour convertir les visiteurs en contacts qualifiés.</p>
        </div>
        <div className="produit-features-stack">
          {features.map((f, i) => (
            <PR key={i} delay={i * 50} className="produit-feature-row">
              <div className="produit-feature-mark mono">— {String(i + 1).padStart(2, '0')}</div>
              <div className="produit-feature-body">
                <h3>{f.title}</h3>
                <p className="produit-feature-desc">{f.desc}</p>
                <p className="produit-feature-detail mono">{f.detail}</p>
              </div>
            </PR>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── § B — CRM ── */
function SectionCRM() {
  const modules = [
    {
      title: 'Dashboard temps réel',
      desc: "La vue d'ensemble de votre agence : nouveaux leads, biens actifs, RDV à venir, mandats qui expirent dans 30 jours, transactions en cours.",
      detail: "Tout se met à jour en temps réel. Vous ouvrez le BOS le matin — vous savez immédiatement ce qui est urgent."
    },
    {
      title: '4 pipelines Kanban',
      desc: "Un pipeline dédié pour chaque type de contact : Vendeur, Acheteur, Bailleur, Locataire. Chacun avec son propre flux.",
      detail: "L'historique de chaque interaction est conservé automatiquement. Vous glissez une fiche d'une colonne à l'autre."
    },
    {
      title: 'Matching acheteurs / biens',
      desc: "Chaque acheteur a des critères enregistrés. Quand un nouveau bien correspondant est publié, le matching est fait automatiquement.",
      detail: "Vous n'avez plus à chercher manuellement « quel acheteur pourrait être intéressé ? ». La réponse est déjà là."
    },
    {
      title: 'Gestion des mandats',
      desc: "Numéro séquentiel chronologique généré automatiquement (obligation légale loi Hoguet). Alerte 30 jours avant expiration.",
      detail: "Sans ce numéro, le mandat est juridiquement nul. Il est généré à la création, sans que vous ayez à y penser."
    },
    {
      title: 'Suivi transactions vente',
      desc: "Du compromis à l'acte notarié. Dates légales calculées automatiquement : rétractation (J+10), condition suspensive (J+45 min).",
      detail: "Les délais légaux apparaissent avec une alerte si une échéance approche. Vous ne ratez pas un délai."
    },
    {
      title: 'Module Location complet',
      desc: "Dossier locataire avec check-list documents, garant, bail (nu/meublé/étudiant), état des lieux entrée et sortie.",
      detail: "Le bail calcule sa date de fin selon le type. Les documents manquants déclenchent une relance automatique."
    },
    {
      title: 'Analytique intégrée',
      desc: "PostHog connecté au site public : trafic, biens les plus consultés, sources de leads, taux de conversion.",
      detail: "Vous voyez d'où viennent vos leads et quels biens génèrent le plus d'intérêt."
    },
  ];

  return (
    <section className="produit-section dark-section" id="crm" data-section="crm">
      <div className="wrap">
        <div className="produit-section-head">
          <div className="mono section-n">§ B · CRM intégré</div>
          <h2 className="section-title">Votre back-office.<br/><em>Tout au même endroit.</em></h2>
          <p className="contact-sub">Biens, contacts, mandats, transactions — un seul outil, paramétré pour votre façon de travailler.</p>
        </div>
        <div className="produit-features-stack">
          {modules.map((m, i) => (
            <PR key={i} delay={(i % 4) * 50} className="produit-feature-row">
              <div className="produit-feature-mark mono">— {String(i + 1).padStart(2, '0')}</div>
              <div className="produit-feature-body">
                <h3>{m.title}</h3>
                <p className="produit-feature-desc">{m.desc}</p>
                <p className="produit-feature-detail mono">{m.detail}</p>
              </div>
            </PR>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── § C — Automatisations ── */
function SectionAuto() {
  const automations = [
    { trigger: 'Nouveau lead entrant sur le site',        action: "Email + notification push à l'agent assigné" },
    { trigger: 'Nouveau bien publié',                     action: "SMS + email aux acheteurs avec critères matchants" },
    { trigger: 'Visite effectuée + retour agent saisi',   action: "Compte-rendu envoyé automatiquement au propriétaire" },
    { trigger: "Mandat à 30 jours de l'expiration",      action: "Alerte email au directeur d'agence" },
    { trigger: 'Bien sans offre depuis 90 jours',         action: "Alerte à l'agent responsable du bien" },
    { trigger: 'RDV du jour',                             action: "Rappel matinal envoyé à l'agent concerné" },
    { trigger: 'Visite sans relance depuis 48h',          action: "Email / SMS de relance automatique au prospect" },
    { trigger: 'Tâche arrivée à échéance',                action: "Notification à l'agent assigné" },
    { trigger: 'Dossier locataire incomplet depuis 48h',  action: "Relance automatique au locataire" },
  ];

  return (
    <section className="produit-section" id="auto" data-section="auto">
      <div className="wrap">
        <div className="produit-section-head">
          <div className="mono section-n">§ C · Automatisations</div>
          <h2 className="section-title">Ce que vous faites<br/><em>à la main aujourd'hui.</em></h2>
          <p className="contact-sub">Et qu'on déclenche tout seul. Configurées avec vos règles, pas des règles génériques.</p>
        </div>
        <div className="produit-auto-table">
          <div className="produit-auto-head mono">
            <span>Quand</span>
            <span>Alors</span>
          </div>
          {automations.map((a, i) => (
            <PR key={i} delay={i * 35} className="produit-auto-row">
              <span className="produit-auto-trigger">
                <span className="produit-auto-dot" aria-hidden="true"></span>
                {a.trigger}
              </span>
              <span className="produit-auto-action">{a.action}</span>
            </PR>
          ))}
        </div>
        <PR className="services-foot" style={{ marginTop: '48px' }}>
          <p>Ces automatisations tournent sur <em>n8n</em>, hébergé sur votre serveur. Vos données ne transitent pas par un SaaS tiers. Vous pouvez en ajouter autant que vous en avez besoin.</p>
        </PR>
      </div>
    </section>
  );
}

/* ── § D — Agent IA ── */
function SectionAI() {
  const capacites = [
    {
      title: 'Répond en temps réel, 24h/24',
      desc: "Un visiteur pose une question à 23h sur un bien — il reçoit une réponse précise en quelques secondes. Vous, vous dormez.",
      detail: "L'agent connaît votre catalogue complet : prix, surfaces, DPE, disponibilité. Tout ce que vous lui donnez."
    },
    {
      title: 'Qualifie les leads avant de vous les transmettre',
      desc: "Budget, projet, timing, financement — l'IA pose les bonnes questions avant de vous passer la main.",
      detail: "Vous recevez un lead avec un contexte. Pas juste un nom et un email."
    },
    {
      title: 'Propose des créneaux de visite',
      desc: "L'agent accède à votre agenda et propose des créneaux disponibles. Le prospect réserve directement.",
      detail: "Synchronisé avec l'agenda du BOS. Pas de double réservation possible."
    },
    {
      title: 'Détecte les leads chauds',
      desc: "Certains comportements signalent un acheteur très motivé. Quand l'IA les détecte, elle vous alerte.",
      detail: "Questions précises, plusieurs visites du même bien, demande de financement — des signaux que vous manquez en volume."
    },
    {
      title: 'Passe la main au bon moment',
      desc: "L'agent ne prétend pas tout savoir. Il reconnaît les situations qui nécessitent un humain et vous les transfère.",
      detail: "Le ton, les limites, la posture — c'est vous qui les définissez dans le paramétrage. Jamais agressif."
    },
  ];

  return (
    <section className="produit-section dark-section" id="ia" data-section="ia">
      <div className="wrap">
        <div className="produit-section-head">
          <div className="mono section-n">§ D · Agent IA</div>
          <h2 className="section-title">Pas un chatbot<br/><em>générique.</em></h2>
          <p className="contact-sub">Un assistant qui connaît votre agence, votre catalogue et votre façon de travailler.</p>
        </div>
        <div className="produit-features-stack">
          {capacites.map((c, i) => (
            <PR key={i} delay={i * 60} className="produit-feature-row">
              <div className="produit-feature-mark mono">— {String(i + 1).padStart(2, '0')}</div>
              <div className="produit-feature-body">
                <h3>{c.title}</h3>
                <p className="produit-feature-desc">{c.desc}</p>
                <p className="produit-feature-detail mono">{c.detail}</p>
              </div>
            </PR>
          ))}
        </div>
        <PR className="services-foot" style={{ marginTop: '48px' }}>
          <p className="mono" style={{ opacity: 0.45, fontSize: '13px' }}>Stack — Claude API (Anthropic) · System prompt personnalisé par agence · Les données restent chez vous.</p>
        </PR>
      </div>
    </section>
  );
}

/* ── Footer CTA ── */
function ProduitFooterCTA({ setRoute }) {
  return (
    <section className="contact immo-contact produit-footer-cta" data-section="produit-cta">
      <div className="wrap">
        <div className="section-head contact-head">
          <div className="mono section-n">→ Prochaine étape</div>
          <h2 className="section-title">Prêt à <em>démarrer ?</em></h2>
          <p className="contact-sub">Deux portes. Aucune n'engage à rien.</p>
        </div>
        <div className="rejoindre-secondary" style={{ marginTop: '40px' }}>
          <PR>
            <button
              type="button"
              className="rejoindre-card"
              onClick={() => {
                if (window.posthog) window.posthog.capture('contact_card_click', { card: 'produit_rejoindre', page: 'produit' });
                setRoute('/immo/repondre');
              }}
            >
              <div className="mono rejoindre-num">① — Démarrer un projet</div>
              <h3>Construire votre solution <em>avec Noakim.</em></h3>
              <p>5 minutes pour décrire votre situation. On revient sous 48h avec une première proposition sur mesure.</p>
              <span className="rejoindre-card-cta">
                Je démarre
                <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>
              </span>
            </button>
          </PR>
          <PR delay={120}>
            <button
              type="button"
              className="rejoindre-card"
              onClick={() => {
                if (window.posthog) window.posthog.capture('contact_card_click', { card: 'produit_diagnostic', page: 'produit' });
                setRoute('/immobilier/diagnostic');
              }}
            >
              <div className="mono rejoindre-num">② — Faire le diagnostic</div>
              <h3>Analyser votre situation <em>avec notre IA.</em></h3>
              <p>5 questions, 3 minutes. Vous voyez exactement ce qu'on construirait pour vous.</p>
              <span className="rejoindre-card-cta">
                Commencer
                <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>
              </span>
            </button>
          </PR>
        </div>
        <div className="contact-foot mono">
          <span>contact@neoflow-agency.cloud</span>
          <span>·</span>
          <span>Réponse sous 48h</span>
          <span>·</span>
          <span>Rien ne vous engage</span>
        </div>
      </div>
    </section>
  );
}

/* ── Page assembly avec drum wheel ── */
function ImmoProduitPage({ setRoute }) {
  const [active, setActive] = pUseState('site');

  /* Scroll spy via IntersectionObserver */
  pUseEffect(() => {
    const ids = ['site', 'crm', 'auto', 'ia'];
    const observers = [];

    ids.forEach((id) => {
      const el = document.getElementById(id);
      if (!el) return;

      const obs = new IntersectionObserver(
        ([entry]) => { if (entry.isIntersecting) setActive(id); },
        { rootMargin: '-35% 0px -35% 0px', threshold: 0 }
      );
      obs.observe(el);
      observers.push(obs);
    });

    return () => observers.forEach(obs => obs.disconnect());
  }, []);

  /* Navigation depuis le pill */
  function handleNavigate(id) {
    const el = document.getElementById(id);
    if (!el) return;
    if (window.posthog) window.posthog.capture('produit_nav_click', { section: id });
    const top = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top, behavior: 'smooth' });
  }

  return (
    <div className="page page-immo page-produit" data-screen-label="03 Produit — NeoFlow Immo">
      <WheelPill active={active} onNavigate={handleNavigate} />
      <ProduitHero setRoute={setRoute} />
      <SectionSite />
      <SectionCRM />
      <SectionAuto />
      <SectionAI />
      <ProduitFooterCTA setRoute={setRoute} />
    </div>
  );
}

window.ImmoProduitPage = ImmoProduitPage;