// NeoFlow — /immobilier/diagnostic — Page dédiée au calculateur IA
// Inclusion dans index.html : <script type="text/babel" src="cinetique/diagnostic.jsx?v=16"></script>

const { useEffect: dgUseEffect } = React;
const { Reveal: DgR } = window;

function DiagnosticPage({ setRoute }) {
  const Calc = window.Calculateur;

  dgUseEffect(() => {
    document.title = 'Diagnostic NeoFlow Immo — Analysez votre situation';
    return () => { document.title = 'NeoFlow Agency — Cinétique'; };
  }, []);

  return (
    <div className="page page-immo page-diagnostic" data-screen-label="04 Diagnostic — NeoFlow Immo">

      {/* ── Hero court ── */}
      <section className="hero immo-hero diagnostic-hero" data-section="diagnostic-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>Diagnostic</span>
          </div>
          <div className="immo-hero-stamp mono" style={{ marginTop: '20px' }}>
            <span className="stamp-dot"></span>
            <span>Analyse IA · 3 minutes · Résultat immédiat</span>
          </div>
          <h1 className="hero-h1 immo-h1-hero" style={{ maxWidth: '640px' }}>
            <span className="line">Votre situation,</span>
            <span className="line line-italic"><em>analysée en 3 min.</em></span>
          </h1>
          <div className="hero-meta">
            <p className="hero-lede" style={{ maxWidth: '540px' }}>
              Répondez à 5 questions sur votre façon de travailler. Notre IA analyse vos réponses et vous dit précisément ce qu'on construirait pour régler vos problèmes — et combien d'heures vous y gagneriez chaque semaine.
            </p>
          </div>
          <div className="hero-floor diagnostic-floor mono">
            <span>Aucun engagement</span>
            <span>Résultat immédiat</span>
            <span>IA personnalisée</span>
            <span>Gratuit</span>
          </div>
        </div>
      </section>

      {/* ── Calculateur ── */}
      <div className="diagnostic-calc-wrap">
        {Calc
          ? <Calc setRoute={setRoute} />
          : (
            <div className="wrap" style={{ padding: '80px 0', textAlign: 'center' }}>
              <p className="mono" style={{ opacity: 0.5 }}>Chargement du diagnostic…</p>
            </div>
          )
        }
      </div>

      {/* ── Footer rassurant ── */}
      <DgR>
        <div className="diagnostic-footer wrap">
          <p className="mono" style={{ opacity: 0.45, fontSize: '13px', textAlign: 'center' }}>
            Vos réponses sont traitées de manière confidentielle · Politique de confidentialité :{' '}
            <a
              href="#/confidentialite"
              style={{ textDecoration: 'underline', opacity: 0.7 }}
              onClick={(e) => { e.preventDefault(); setRoute('/confidentialite'); }}
            >
              lire la politique
            </a>
          </p>
        </div>
      </DgR>

    </div>
  );
}

window.DiagnosticPage = DiagnosticPage;