// LandingPage — Route #/landing (page marketing publique)
// Affichée aux visiteurs non-authentifiés ou depuis le header "Accueil".
// Track Lead via window.vestora.analytics sur clic CTA signup.

(function () {
  'use strict';

  const { useState, useEffect } = React;

  /* ─── helpers ─── */
  function trackLead(source) {
    if (window.vestora && window.vestora.analytics) {
      window.vestora.analytics.track('Lead', { source });
    }
  }

  function openLogin() {
    if (window.vestora && window.vestora.auth && typeof window.vestora.auth.openModal === 'function') {
      window.vestora.auth.openModal();
    } else {
      window.navigateTo('#/tarifs');
    }
  }

  /* ─── sub-components ─── */

  // --- AppMockup: CSS mockup du drawer investissement ---
  function AppMockup() {
    return (
      <div style={{
        background: 'var(--bg-elev)',
        border: '1px solid var(--line)',
        borderRadius: 'var(--radius-lg)',
        boxShadow: 'var(--shadow-lg)',
        overflow: 'hidden',
        maxWidth: 480,
        width: '100%',
        fontFamily: 'var(--sans)',
      }}>
        {/* Header barre */}
        <div style={{
          background: 'var(--bg-warm)',
          borderBottom: '1px solid var(--line)',
          padding: '10px 16px',
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'oklch(0.65 0.14 28)' }} />
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'oklch(0.72 0.12 70)' }} />
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'oklch(0.52 0.13 150)' }} />
          <span style={{ marginLeft: 8, fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--mono)' }}>
            vestora.ca/app
          </span>
        </div>

        {/* Score badge + adresse */}
        <div style={{ padding: '16px 20px 12px', borderBottom: '1px solid var(--line-soft)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
            <div style={{
              width: 52, height: 52, borderRadius: 10,
              background: 'oklch(0.52 0.13 150 / 0.12)',
              border: '2px solid oklch(0.52 0.13 150)',
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <span style={{ fontFamily: 'var(--mono)', fontWeight: 700, fontSize: 18, color: 'oklch(0.38 0.13 150)', lineHeight: 1 }}>74</span>
              <span style={{ fontSize: 9, color: 'oklch(0.52 0.13 150)', fontWeight: 600, letterSpacing: '0.04em' }}>/100</span>
            </div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--ink-1)' }}>4-plex · Limoilou, Québec</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>595 000 $ · 10 jours sur le marché</div>
              <div style={{
                display: 'inline-block', marginTop: 4, padding: '2px 8px',
                borderRadius: 10, background: 'oklch(0.52 0.13 150 / 0.10)',
                fontSize: 11, color: 'oklch(0.38 0.13 150)', fontWeight: 600,
              }}>
                Cashflow Hunter ✓
              </div>
            </div>
          </div>
        </div>

        {/* KPI grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 1, background: 'var(--line-soft)',
          borderBottom: '1px solid var(--line-soft)',
        }}>
          {[
            { label: 'Cap Rate', value: '5.8%', good: true },
            { label: 'DSCR', value: '1.12', good: true },
            { label: 'Cash-flow', value: '+340$/mo', good: true },
            { label: 'GRM', value: '14.2', good: false },
          ].map((k, i) => (
            <div key={i} style={{
              background: 'var(--bg-elev)',
              padding: '10px 8px', textAlign: 'center',
            }}>
              <div style={{
                fontFamily: 'var(--mono)', fontWeight: 700, fontSize: 13,
                color: k.good ? 'oklch(0.42 0.13 150)' : 'var(--ink-1)',
              }}>{k.value}</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 2 }}>{k.label}</div>
            </div>
          ))}
        </div>

        {/* Stress test */}
        <div style={{ padding: '12px 20px', borderBottom: '1px solid var(--line-soft)' }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', marginBottom: 8, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
            Stress test taux
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            {[
              { rate: '5%', cf: '+340$', ok: true },
              { rate: '6%', cf: '+128$', ok: true },
              { rate: '7%', cf: '−84$', ok: false },
            ].map((s, i) => (
              <div key={i} style={{
                flex: 1, padding: '6px 8px', borderRadius: 6, textAlign: 'center',
                background: s.ok ? 'oklch(0.52 0.13 150 / 0.08)' : 'oklch(0.55 0.16 28 / 0.08)',
                border: `1px solid ${s.ok ? 'oklch(0.52 0.13 150 / 0.2)' : 'oklch(0.55 0.16 28 / 0.2)'}`,
              }}>
                <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{s.rate}</div>
                <div style={{
                  fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 600,
                  color: s.ok ? 'oklch(0.38 0.13 150)' : 'oklch(0.45 0.16 28)',
                }}>{s.cf}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Verdict */}
        <div style={{
          padding: '12px 20px',
          background: 'oklch(0.52 0.13 150 / 0.05)',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
            background: 'oklch(0.52 0.13 150)',
          }} />
          <span style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5 }}>
            <strong style={{ color: 'var(--ink-1)' }}>Solide.</strong>{' '}
            Cap rate supérieur à la médiane du quartier (+0.9 pp). Cash-flow positif jusqu'à 6%. Résiste bien au stress.
          </span>
        </div>
      </div>
    );
  }

  // --- FAQItem ---
  function FAQItem({ q, a }) {
    const [open, setOpen] = useState(false);
    return (
      <div style={{ borderBottom: '1px solid var(--line)' }}>
        <button
          onClick={() => setOpen(o => !o)}
          style={{
            width: '100%', textAlign: 'left', background: 'none', border: 'none',
            padding: '16px 0', display: 'flex', justifyContent: 'space-between',
            alignItems: 'center', gap: 12, cursor: 'pointer',
            fontSize: 14, fontWeight: 500, color: 'var(--ink-1)',
            fontFamily: 'inherit',
          }}
        >
          <span>{q}</span>
          <span style={{
            fontSize: 18, color: 'var(--ink-3)', flexShrink: 0,
            transform: open ? 'rotate(45deg)' : 'none',
            transition: 'transform 0.2s',
          }}>+</span>
        </button>
        {open && (
          <div style={{
            fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.65,
            paddingBottom: 16,
          }}>
            {a}
          </div>
        )}
      </div>
    );
  }

  /* ─── data ─── */
  const FAQ_ITEMS = [
    {
      q: "C'est quoi un DSCR ?",
      a: "Le DSCR (Debt Service Coverage Ratio) mesure si vos revenus locatifs couvrent votre hypothèque. Un DSCR ≥ 1 signifie que le plex se finance lui-même. Vestora le calcule automatiquement pour chaque bien selon vos hypothèses personnelles (mise de fonds, taux, amortissement).",
    },
    {
      q: "Comment obtenez-vous les données ?",
      a: "Vestora agrège des sources publiques fiables : rôles d'évaluation municipale (MAMH/Québec), données démographiques (Statistique Canada), indicateurs du marché locatif (SCHL/CMHC) et scores de marchabilité (Walk Score®). Aucune donnée privée n'est collectée sans votre consentement.",
    },
    {
      q: "Est-ce que ça remplace un courtier immobilier ou hypothécaire ?",
      a: "Non. Vestora est un outil d'aide à la décision. Il vous donne les métriques financières clés pour repérer les bons dossiers rapidement — mais la diligence finale (inspection, financement, contrat) doit être faite avec les professionnels appropriés.",
    },
    {
      q: "Loi 25 — comment protégez-vous mes données ?",
      a: "Vestora est conforme à la Loi 25 (Québec) et au RGPD. Vos données personnelles sont hébergées sur Supabase (région Canada), chiffrées en transit (TLS) et au repos. Vous contrôlez vos cookies via le bandeau de consentement. Consultez notre politique de confidentialité pour tous les détails.",
    },
    {
      q: "Comment annuler mon abonnement ?",
      a: "En 1 clic depuis votre espace compte. Aucun engagement, aucuns frais de résiliation. L'accès reste actif jusqu'à la fin de la période payée. Votre compte revient automatiquement en mode Découverte (gratuit).",
    },
    {
      q: "Les analyses sont-elles fiables pour une décision d'achat réelle ?",
      a: "Les métriques (cap rate, DSCR, cash-flow, IRR) sont calculées selon les standards de l'industrie canadienne. Cependant, les résultats dépendent des données disponibles et de vos hypothèses financières. Faites toujours valider par un comptable ou courtier avant de signer.",
    },
    {
      q: "Quand les données sont-elles mises à jour ?",
      a: "Les données de marché et évaluations municipales sont synchronisées régulièrement depuis les sources officielles. Les métriques financières (cap rate, DSCR, cash-flow) sont recalculées en temps réel selon vos hypothèses personnelles dans l'app.",
    },
  ];

  const PRICING_TEASER = [
    {
      name: 'Découverte',
      price: 'Gratuit',
      color: 'var(--ink-3)',
      features: ['Carte + filtres basiques', '3 KPIs par listing (5/mois)', '6 profils investisseur'],
      cta: 'Commencer',
      ctaAction: 'free',
    },
    {
      name: 'Investisseur',
      price: '24$/mois',
      badge: 'Plus populaire',
      color: 'var(--accent)',
      features: ['8 KPIs complets illimités', 'HypothesesStrip live', 'Comparateur 4 biens', 'Stress test 3 taux'],
      cta: 'Essai 7j gratuit',
      ctaAction: 'trial',
    },
    {
      name: 'Pro',
      price: '59$/mois',
      color: 'oklch(0.36 0.07 155)',
      features: ['Tout Investisseur +', 'Fiscalité QC (CCA + gain capital)', 'AnalyzePage 10 ans + IRR', 'PDF export signé'],
      cta: 'Essai 7j gratuit',
      ctaAction: 'trial',
    },
  ];

  /* ─── main component ─── */
  function LandingPage({ lang, onOpenLogin }) {
    const [currentUser, setCurrentUser] = useState(
      window.vestora && window.vestora.auth ? window.vestora.auth.getUser() : null
    );

    useEffect(() => {
      document.body.classList.add('landing-active');
      return () => document.body.classList.remove('landing-active');
    }, []);

    useEffect(() => {
      if (!window.vestora || !window.vestora.auth) return;
      const unsub = window.vestora.auth.onAuthStateChange((user) => setCurrentUser(user));
      return () => { if (unsub && unsub.unsubscribe) unsub.unsubscribe(); };
    }, []);

    const handleCTASignup = (source) => {
      trackLead(source || 'hero');
      if (typeof onOpenLogin === 'function') {
        onOpenLogin();
      } else {
        openLogin();
      }
    };

    return (
      <div style={{
        minHeight: '100vh',
        background: 'var(--bg)',
        fontFamily: 'var(--sans)',
        overflowY: 'auto',
        overflowX: 'hidden',
      }}>

        {/* ── Sticky nav ── */}
        <nav style={{
          position: 'sticky', top: 0, zIndex: 100,
          background: 'var(--bg-elev)',
          borderBottom: '1px solid var(--line)',
          padding: '0 24px',
          height: 56,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <a href="#/landing" style={{
            textDecoration: 'none',
            fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 500,
            color: 'var(--ink-1)', letterSpacing: '-0.02em',
          }}>
            Vestora
          </a>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <a href="#/tarifs" style={{
              fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none',
              fontWeight: 500, padding: '6px 10px', borderRadius: 'var(--radius)',
            }}>
              Tarifs
            </a>
            {currentUser ? (
              <a
                href="#/"
                style={{
                  padding: '8px 18px', borderRadius: 'var(--radius)',
                  background: 'var(--accent)', color: 'var(--accent-fg)',
                  fontWeight: 600, fontSize: 13, textDecoration: 'none',
                  fontFamily: 'inherit',
                }}
              >
                Accéder à l'app →
              </a>
            ) : (
              <>
                <button
                  onClick={() => handleCTASignup('nav-login')}
                  style={{
                    padding: '8px 14px', borderRadius: 'var(--radius)',
                    background: 'transparent', color: 'var(--ink-1)',
                    border: '1px solid var(--line)', fontWeight: 500, fontSize: 13,
                    cursor: 'pointer', fontFamily: 'inherit',
                  }}
                >
                  Se connecter
                </button>
                <button
                  onClick={() => handleCTASignup('nav')}
                  style={{
                    padding: '8px 18px', borderRadius: 'var(--radius)',
                    background: 'var(--accent)', color: 'var(--accent-fg)',
                    border: 'none', fontWeight: 600, fontSize: 13,
                    cursor: 'pointer', fontFamily: 'inherit',
                  }}
                >
                  Essai gratuit
                </button>
              </>
            )}
          </div>
        </nav>

        {/* ─────────────────────────────────────────
            1. HERO
        ───────────────────────────────────────── */}
        <section style={{
          maxWidth: 1100, margin: '0 auto',
          padding: 'clamp(48px, 8vw, 96px) 24px clamp(40px, 6vw, 72px)',
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 48, alignItems: 'center',
        }}>
          <div>
            {/* Eyebrow */}
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              background: 'var(--accent-soft)', color: 'var(--accent-ink)',
              borderRadius: 20, padding: '4px 14px',
              fontSize: 12, fontWeight: 600, letterSpacing: '0.04em',
              marginBottom: 20, textTransform: 'uppercase',
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%',
                background: 'var(--accent)', display: 'inline-block',
              }} />
              Plex au Québec — Analyse financière instantanée
            </div>

            {/* H1 */}
            <h1 style={{
              fontFamily: 'var(--serif)',
              fontSize: 'clamp(30px, 5vw, 52px)',
              fontWeight: 500, margin: '0 0 20px',
              color: 'var(--ink-1)',
              lineHeight: 1.12, letterSpacing: '-0.02em',
            }}>
              Trouvez le plex qui fait{' '}
              <em style={{ fontStyle: 'italic', color: 'var(--accent-ink)' }}>
                vraiment du cashflow.
              </em>
            </h1>

            <p style={{
              fontSize: 16, color: 'var(--ink-2)', margin: '0 0 32px',
              lineHeight: 1.65, maxWidth: 480,
            }}>
              Vestora analyse chaque multiplex en temps réel : cap rate, DSCR, cash-flow, stress test,
              fiscalité QC et données municipales. Pour investir avec méthode, pas avec espoir.
            </p>

            {/* CTAs */}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
              <button
                onClick={() => handleCTASignup('hero-primary')}
                style={{
                  padding: '14px 28px', borderRadius: 'var(--radius)',
                  background: 'var(--accent)', color: 'var(--accent-fg)',
                  border: 'none', fontWeight: 700, fontSize: 15,
                  cursor: 'pointer', fontFamily: 'inherit',
                  boxShadow: 'var(--shadow-md)',
                  transition: 'opacity 0.15s, transform 0.15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.opacity = '0.88'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
                onMouseLeave={e => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.transform = 'translateY(0)'; }}
              >
                Essai gratuit — sans carte
              </button>
              <a
                href="#/tarifs"
                style={{
                  padding: '14px 24px', borderRadius: 'var(--radius)',
                  border: '1.5px solid var(--line)', color: 'var(--ink-1)',
                  textDecoration: 'none', fontWeight: 600, fontSize: 15,
                  fontFamily: 'inherit', display: 'inline-block',
                  transition: 'border-color 0.15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--ink-3)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; }}
              >
                Voir les tarifs
              </a>
            </div>

            <p style={{
              marginTop: 16, fontSize: 12, color: 'var(--ink-4)',
            }}>
              7 jours Pro gratuits · Annule en 1 clic · Aucun engagement
            </p>
          </div>

          {/* App mockup */}
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start' }}>
            <div style={{ position: 'relative' }}>
              <AppMockup />
              {/* Floating badge */}
              <div style={{
                position: 'absolute', bottom: -12, right: -12,
                background: 'var(--bg-elev)',
                border: '1px solid var(--line)',
                borderRadius: 'var(--radius-lg)',
                padding: '8px 14px',
                boxShadow: 'var(--shadow-md)',
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ fontSize: 16 }}>📍</span>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-1)' }}>149 plex analysés</div>
                  <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>Québec, Limoilou, Lévis…</div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ─────────────────────────────────────────
            2. POURQUOI VESTORA — 3 colonnes
        ───────────────────────────────────────── */}
        <section style={{
          background: 'var(--bg-warm)',
          borderTop: '1px solid var(--line)',
          borderBottom: '1px solid var(--line)',
          padding: 'clamp(40px, 6vw, 72px) 24px',
        }}>
          <div style={{ maxWidth: 960, margin: '0 auto' }}>
            <h2 style={{
              fontFamily: 'var(--serif)',
              fontSize: 'clamp(22px, 3.5vw, 34px)',
              fontWeight: 500, textAlign: 'center',
              margin: '0 0 12px', color: 'var(--ink-1)',
              letterSpacing: '-0.02em',
            }}>
              Tout ce dont un investisseur sérieux a besoin
            </h2>
            <p style={{
              textAlign: 'center', fontSize: 15, color: 'var(--ink-3)',
              margin: '0 0 48px', lineHeight: 1.6,
            }}>
              Pas un simple comparateur de prix — un vrai moteur d'analyse financière.
            </p>

            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
              gap: 24,
            }}>
              {[
                {
                  icon: (
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="3" y="3" width="7" height="7" rx="1.5"/>
                      <rect x="14" y="3" width="7" height="7" rx="1.5"/>
                      <rect x="3" y="14" width="7" height="7" rx="1.5"/>
                      <rect x="14" y="14" width="7" height="7" rx="1.5"/>
                    </svg>
                  ),
                  title: 'Analyse 8 KPIs financiers',
                  desc: 'Cap rate, DSCR, cash-flow net, cash-on-cash, NOI, GRM, expense ratio et price per unit — calculés en temps réel selon vos hypothèses.',
                },
                {
                  icon: (
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <circle cx="12" cy="10" r="3.5"/>
                      <path d="M12 16c-5 0-8 2-8 3.5V21h16v-1.5c0-1.5-3-3.5-8-3.5z"/>
                      <path d="M17 5a5 5 0 010 10"/>
                    </svg>
                  ),
                  title: 'Données municipales + démographie',
                  desc: "Évaluations MAMH, données Census, Walk Score — chaque bien situé dans son contexte réel de marché.",
                },
                {
                  icon: (
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M3 9l4-4 4 4 4-4 4 4"/>
                      <path d="M3 15l4-4 4 4 4-4 4 4"/>
                    </svg>
                  ),
                  title: 'Profils investisseur adaptatifs',
                  desc: '6 profils (Cashflow Hunter, BRRRR, First Buyer, Buy & Hold…) qui adaptent les scores et les filtres à votre stratégie réelle.',
                },
              ].map((f, i) => (
                <div key={i} style={{
                  background: 'var(--bg-elev)',
                  border: '1px solid var(--line)',
                  borderRadius: 'var(--radius-lg)',
                  padding: '28px 24px',
                  transition: 'box-shadow 0.2s, transform 0.2s',
                }}
                  onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                  onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'translateY(0)'; }}
                >
                  <div style={{
                    width: 44, height: 44, borderRadius: 10,
                    background: 'var(--accent-soft)',
                    color: 'var(--accent-ink)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    marginBottom: 16,
                  }}>
                    {f.icon}
                  </div>
                  <h3 style={{
                    fontFamily: 'var(--serif)', fontSize: 17, fontWeight: 500,
                    margin: '0 0 10px', color: 'var(--ink-1)',
                    letterSpacing: '-0.01em',
                  }}>{f.title}</h3>
                  <p style={{
                    fontSize: 13, color: 'var(--ink-2)', margin: 0,
                    lineHeight: 1.65,
                  }}>{f.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ─────────────────────────────────────────
            3. DÉMO EN CHIFFRES
        ───────────────────────────────────────── */}
        <section style={{
          padding: 'clamp(40px, 6vw, 72px) 24px',
          maxWidth: 860, margin: '0 auto',
        }}>
          <h2 style={{
            fontFamily: 'var(--serif)',
            fontSize: 'clamp(22px, 3.5vw, 34px)',
            fontWeight: 500, textAlign: 'center',
            margin: '0 0 12px', color: 'var(--ink-1)',
            letterSpacing: '-0.02em',
          }}>
            Construit sur des données réelles
          </h2>
          <p style={{
            textAlign: 'center', fontSize: 15, color: 'var(--ink-3)',
            margin: '0 0 48px', lineHeight: 1.6,
          }}>
            Mis à jour régulièrement depuis les sources officielles québécoises
          </p>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
            gap: 20,
          }}>
            {[
              { number: '149', label: 'plex analysés', sub: 'dans la région de Québec' },
              { number: '22', label: 'quartiers couverts', sub: 'Québec, Lévis, banlieues' },
              { number: '8', label: 'KPIs financiers', sub: 'calculés en temps réel' },
              { number: '2.84M', label: 'unités au registre', sub: 'base MAMH Québec complète' },
            ].map((s, i) => (
              <div key={i} style={{
                background: 'var(--bg-elev)',
                border: '1px solid var(--line)',
                borderRadius: 'var(--radius-lg)',
                padding: '24px 20px', textAlign: 'center',
                boxShadow: 'var(--shadow-sm)',
              }}>
                <div style={{
                  fontFamily: 'var(--mono)',
                  fontSize: 'clamp(28px, 5vw, 40px)',
                  fontWeight: 700, color: 'var(--accent-ink)',
                  lineHeight: 1, marginBottom: 6,
                }}>{s.number}</div>
                <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--ink-1)', marginBottom: 4 }}>{s.label}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-4)' }}>{s.sub}</div>
              </div>
            ))}
          </div>
        </section>

        {/* ─────────────────────────────────────────
            4. TÉMOIGNAGE / SOCIAL PROOF
        ───────────────────────────────────────── */}
        <section style={{
          background: 'oklch(0.36 0.07 155 / 0.04)',
          borderTop: '1px solid var(--line)',
          borderBottom: '1px solid var(--line)',
          padding: 'clamp(40px, 6vw, 72px) 24px',
        }}>
          <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
            <div style={{
              width: 48, height: 48, borderRadius: '50%',
              background: 'var(--accent-soft)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              margin: '0 auto 24px',
              fontSize: 22,
            }}>
              🏗️
            </div>
            <p style={{
              fontFamily: 'var(--serif)',
              fontSize: 'clamp(17px, 2.5vw, 22px)',
              fontWeight: 400, fontStyle: 'italic',
              color: 'var(--ink-1)', margin: '0 0 24px',
              lineHeight: 1.55, letterSpacing: '-0.01em',
            }}>
              « Construit avec des courtiers immobiliers et des investisseurs québécois qui en ont assez
              des chiffres approximatifs et des surprises au closing. »
            </p>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', fontWeight: 500 }}>
              Maëlle Ratheau — Responsable du traitement, Vestora
            </div>
            <div style={{
              marginTop: 32,
              display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 16,
            }}>
              {['MAMH', 'SCHL/CMHC', 'Statistique Canada', 'Walk Score®'].map((src, i) => (
                <span key={i} style={{
                  padding: '4px 12px',
                  background: 'var(--bg-elev)',
                  border: '1px solid var(--line)',
                  borderRadius: 20, fontSize: 12,
                  color: 'var(--ink-3)', fontWeight: 500,
                }}>
                  {src}
                </span>
              ))}
            </div>
          </div>
        </section>

        {/* ─────────────────────────────────────────
            5. PRICING TEASER
        ───────────────────────────────────────── */}
        <section style={{
          padding: 'clamp(40px, 6vw, 72px) 24px',
          maxWidth: 960, margin: '0 auto',
        }}>
          <h2 style={{
            fontFamily: 'var(--serif)',
            fontSize: 'clamp(22px, 3.5vw, 34px)',
            fontWeight: 500, textAlign: 'center',
            margin: '0 0 12px', color: 'var(--ink-1)',
            letterSpacing: '-0.02em',
          }}>
            Commencez gratuitement, upgradez quand vous êtes prêt
          </h2>
          <p style={{
            textAlign: 'center', fontSize: 15, color: 'var(--ink-3)',
            margin: '0 0 48px',
          }}>
            Aucune carte de crédit requise pour démarrer.
          </p>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
            gap: 20, marginBottom: 32,
          }}>
            {PRICING_TEASER.map((plan, i) => (
              <div key={i} style={{
                background: 'var(--bg-elev)',
                border: plan.badge ? '2px solid var(--accent)' : '1px solid var(--line)',
                borderRadius: 'var(--radius-lg)',
                padding: '24px 20px',
                position: 'relative',
                boxShadow: plan.badge ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
              }}>
                {plan.badge && (
                  <div style={{
                    position: 'absolute', top: -13, left: '50%', transform: 'translateX(-50%)',
                    background: 'var(--accent)', color: 'var(--accent-fg)',
                    borderRadius: 20, padding: '3px 12px',
                    fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap',
                  }}>
                    {plan.badge}
                  </div>
                )}
                <div style={{
                  fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 500,
                  marginBottom: 6, color: 'var(--ink-1)',
                }}>{plan.name}</div>
                <div style={{
                  fontFamily: 'var(--mono)', fontSize: 26, fontWeight: 700,
                  color: plan.badge ? 'var(--accent-ink)' : 'var(--ink-1)',
                  marginBottom: 16,
                }}>{plan.price}</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 20px', display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {plan.features.map((f, j) => (
                    <li key={j} style={{
                      display: 'flex', alignItems: 'flex-start', gap: 8,
                      fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.4,
                    }}>
                      <span style={{ color: 'oklch(0.42 0.13 150)', flexShrink: 0, marginTop: 1 }}>✓</span>
                      {f}
                    </li>
                  ))}
                </ul>
                <button
                  onClick={() => {
                    if (plan.ctaAction === 'free') {
                      handleCTASignup('pricing-teaser-free');
                    } else {
                      trackLead('pricing-teaser-trial');
                      window.navigateTo('#/tarifs');
                    }
                  }}
                  style={{
                    width: '100%', padding: '11px 16px',
                    borderRadius: 'var(--radius)',
                    border: plan.badge ? 'none' : '1.5px solid var(--line)',
                    background: plan.badge ? 'var(--accent)' : 'var(--bg-warm)',
                    color: plan.badge ? 'var(--accent-fg)' : 'var(--ink-1)',
                    fontWeight: 600, fontSize: 13, cursor: 'pointer',
                    fontFamily: 'inherit',
                    transition: 'opacity 0.15s',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.opacity = '0.85'; }}
                  onMouseLeave={e => { e.currentTarget.style.opacity = '1'; }}
                >
                  {plan.cta}
                </button>
              </div>
            ))}
          </div>

          <div style={{ textAlign: 'center' }}>
            <a
              href="#/tarifs"
              style={{
                fontSize: 14, color: 'var(--accent-ink)',
                textDecoration: 'none', fontWeight: 500,
                display: 'inline-flex', alignItems: 'center', gap: 4,
              }}
            >
              Voir le comparatif complet →
            </a>
          </div>
        </section>

        {/* ─────────────────────────────────────────
            6. FAQ
        ───────────────────────────────────────── */}
        <section style={{
          background: 'var(--bg-warm)',
          borderTop: '1px solid var(--line)',
          padding: 'clamp(40px, 6vw, 72px) 24px',
        }}>
          <div style={{ maxWidth: 680, margin: '0 auto' }}>
            <h2 style={{
              fontFamily: 'var(--serif)',
              fontSize: 'clamp(22px, 3.5vw, 34px)',
              fontWeight: 500, textAlign: 'center',
              margin: '0 0 40px', color: 'var(--ink-1)',
              letterSpacing: '-0.02em',
            }}>
              Questions fréquentes
            </h2>
            {FAQ_ITEMS.map((item, i) => (
              <FAQItem key={i} q={item.q} a={item.a} />
            ))}
          </div>
        </section>

        {/* ─────────────────────────────────────────
            7. CTA FINAL
        ───────────────────────────────────────── */}
        <section style={{
          padding: 'clamp(48px, 8vw, 96px) 24px',
          textAlign: 'center',
          borderTop: '1px solid var(--line)',
        }}>
          <div style={{ maxWidth: 640, margin: '0 auto' }}>
            <h2 style={{
              fontFamily: 'var(--serif)',
              fontSize: 'clamp(24px, 4vw, 40px)',
              fontWeight: 500, margin: '0 0 16px',
              color: 'var(--ink-1)', letterSpacing: '-0.02em',
              lineHeight: 1.2,
            }}>
              Analysez votre prochain plex{' '}
              <em style={{ fontStyle: 'italic', color: 'var(--accent-ink)' }}>
                en 2 minutes.
              </em>
            </h2>
            <p style={{
              fontSize: 15, color: 'var(--ink-3)', margin: '0 0 36px',
              lineHeight: 1.6,
            }}>
              Sans inscription pour commencer. Sans carte de crédit. Sans engagement.
            </p>
            <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 12 }}>
              <button
                onClick={() => handleCTASignup('cta-final')}
                style={{
                  padding: '16px 36px', borderRadius: 'var(--radius)',
                  background: 'var(--accent)', color: 'var(--accent-fg)',
                  border: 'none', fontWeight: 700, fontSize: 16,
                  cursor: 'pointer', fontFamily: 'inherit',
                  boxShadow: 'var(--shadow-md)',
                  transition: 'opacity 0.15s, transform 0.15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.opacity = '0.88'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={e => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.transform = 'translateY(0)'; }}
              >
                Commencer gratuitement
              </button>
              <a
                href="#/tarifs"
                style={{
                  padding: '16px 28px', borderRadius: 'var(--radius)',
                  border: '1.5px solid var(--line)', color: 'var(--ink-1)',
                  textDecoration: 'none', fontWeight: 600, fontSize: 16,
                  fontFamily: 'inherit', display: 'inline-block',
                }}
              >
                Voir les tarifs
              </a>
            </div>
          </div>
        </section>

        {/* ─────────────────────────────────────────
            FOOTER
        ───────────────────────────────────────── */}
        <footer style={{
          borderTop: '1px solid var(--line)',
          padding: '24px 24px 32px',
          background: 'var(--bg-elev)',
        }}>
          <div style={{ maxWidth: 960, margin: '0 auto' }}>
            <div style={{
              display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between',
              alignItems: 'flex-start', gap: 24, marginBottom: 20,
            }}>
              <div>
                <div style={{
                  fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 500,
                  color: 'var(--ink-1)', marginBottom: 6,
                }}>Vestora</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', maxWidth: 260, lineHeight: 1.5 }}>
                  Moteur d'analyse de plex au Québec pour investisseurs sérieux.
                </div>
              </div>
              <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 10 }}>
                    Produit
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <a href="#/app" style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>Explorer les plex</a>
                    <a href="#/tarifs" style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>Tarifs</a>
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 10 }}>
                    Légal
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <a href="#/confidentialite" style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>Confidentialité</a>
                    <a href="#/conditions" style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>Conditions</a>
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 10 }}>
                    Contact
                  </div>
                  <a href="mailto:contact@vestora.ca" style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>
                    contact@vestora.ca
                  </a>
                </div>
              </div>
            </div>

            <div style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 16 }}>
              <div style={{ fontSize: 11, color: 'var(--ink-4)', lineHeight: 1.6, marginBottom: 8 }}>
                Vestora est un outil d'aide à la décision à des fins informatives uniquement. Les scores, verdicts et analyses
                présentés ne constituent pas un conseil financier, fiscal, juridique ou d'investissement. Consultez un professionnel
                qualifié avant toute décision d'achat. Les données sont fournies « telles quelles » sans garantie d'exactitude.
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
                <div style={{ fontSize: 11, color: 'var(--ink-4)' }}>
                  © {new Date().getFullYear()} Vestora
                  {' · '}
                  Sources :{' '}
                  <a href="https://www.donneesquebec.ca/recherche/dataset/roles-d-evaluation-fonciere-du-quebec" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink-3)' }}>MAMH</a>
                  {' · '}
                  <a href="https://www.cmhc-schl.gc.ca/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink-3)' }}>SCHL/CMHC</a>
                  {' · '}
                  <a href="https://www.statcan.gc.ca/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink-3)' }}>Statistique Canada</a>
                  {' · '}
                  <a href="https://www.walkscore.com/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink-3)' }}>Walk Score®</a>
                </div>
                <button
                  type="button"
                  onClick={() => window.vestora && window.vestora.consent && window.vestora.consent.openBanner()}
                  style={{
                    background: 'none', border: 'none', cursor: 'pointer',
                    fontSize: 11, color: 'var(--ink-4)', fontFamily: 'inherit',
                    padding: 0,
                  }}
                >
                  Gérer mes cookies
                </button>
              </div>
            </div>
          </div>
        </footer>

        {window.CookieBanner ? <window.CookieBanner lang={lang || 'fr'} /> : null}
      </div>
    );
  }

  window.LandingPage = LandingPage;
})();