// PricingComparison — Tableau matrice des 5 tiers Vestora
// Vague 5 PR 5.1 — Découverte / Investisseur / Pro Courtier / Pro Commercial / Entreprise
//
// Conventions Vestora vanilla : aucun import/export ES,
// composant exposé via window.PricingComparison, React/hooks accédés via le global.

(function () {
  const { useMemo } = React;

  // Définition des 5 tiers (colonnes du tableau)
  const TIERS = [
    { id: 'decouverte',     name: 'Découverte',     price: 'Gratuit',  accent: 'var(--ink-3)' },
    { id: 'investisseur',   name: 'Investisseur',   price: '24$/mo',   accent: 'var(--accent)' },
    { id: 'pro',            name: 'Pro Courtier',   price: '59$/mo',   accent: 'oklch(0.36 0.07 155)' },
    { id: 'pro_commercial', name: 'Pro Commercial', price: '129$/mo',  accent: 'oklch(0.45 0.10 250)' },
    { id: 'entreprise',     name: 'Entreprise',     price: 'Sur devis',accent: 'var(--ink-1)' },
  ];

  // Matrice features × tiers (true = inclus, false = bloqué, string = info)
  // Chaque ligne suit la hiérarchie naturelle d'héritage (Pro inclut Investisseur,
  // Pro Commercial inclut Pro, Entreprise inclut tout).
  const FEATURES = [
    // Bloc 1 — Recherche & exploration
    { section: 'Recherche et exploration' },
    { label: 'Carte interactive + pins scores',         decouverte: true,         investisseur: true,  pro: true,  pro_commercial: true,  entreprise: true },
    { label: 'Filtres essentiels (type, prix, unités)', decouverte: true,         investisseur: true,  pro: true,  pro_commercial: true,  entreprise: true },
    { label: 'Filtres avancés (12+ critères)',          decouverte: false,        investisseur: true,  pro: true,  pro_commercial: true,  entreprise: true },
    { label: 'Multi-zones illimitées',                  decouverte: '1 zone',     investisseur: true,  pro: true,  pro_commercial: true,  entreprise: true },

    // Bloc 2 — Analyse financière
    { section: 'Analyse financière' },
    { label: 'Analyse rapide (3 KPIs)',                 decouverte: '1/sem',      investisseur: 'Illimité', pro: 'Illimité', pro_commercial: 'Illimité', entreprise: 'Illimité' },
    { label: 'Analyse complète (8 KPIs)',               decouverte: false,        investisseur: true,  pro: true,  pro_commercial: true,  entreprise: true },
    { label: 'Hypothèses personnalisables',             decouverte: false,        investisseur: true,  pro: true,  pro_commercial: true,  entreprise: true },
    { label: 'Test de stress 3 taux',                   decouverte: false,        investisseur: true,  pro: true,  pro_commercial: true,  entreprise: true },
    { label: 'Projection 10 ans + IRR actualisé',       decouverte: false,        investisseur: false, pro: true,  pro_commercial: true,  entreprise: true },
    { label: 'Fiscalité QC (CCA + gain en capital)',    decouverte: false,        investisseur: false, pro: true,  pro_commercial: true,  entreprise: true },
    { label: 'PDF analyse à partager',                  decouverte: false,        investisseur: false, pro: true,  pro_commercial: true,  entreprise: true },

    // Bloc 3 — Dashboard courtier
    { section: 'Dashboard courtier' },
    { label: 'Dashboard courtier (Marché, Opportunités, Clients, Fiche)', decouverte: false, investisseur: false, pro: true, pro_commercial: true, entreprise: true },
    { label: 'Matching automatique clients ↔ listings', decouverte: false,        investisseur: false, pro: true,  pro_commercial: true,  entreprise: true },
    { label: 'Alertes nouvelles annonces illimitées',   decouverte: false,        investisseur: false, pro: true,  pro_commercial: true,  entreprise: true },
    { label: 'Digest email hebdo personnalisé',         decouverte: false,        investisseur: false, pro: true,  pro_commercial: true,  entreprise: true },
    { label: 'Fiche PDF brandée client',                decouverte: false,        investisseur: false, pro: true,  pro_commercial: true,  entreprise: true },

    // Bloc 4 — Pro Commercial (exclusif)
    { section: 'Pro Commercial (multilog 6+ et mixte)' },
    { label: 'Dossier IA Commercial inclus (1/mois)',   decouverte: false,        investisseur: false, pro: false, pro_commercial: true,  entreprise: 'Illimité' },
    { label: 'Comps cap rate par sous-marché',          decouverte: false,        investisseur: false, pro: false, pro_commercial: true,  entreprise: true },
    { label: 'IRR 5/10 ans + stress test approfondi',   decouverte: false,        investisseur: false, pro: false, pro_commercial: true,  entreprise: true },
    { label: 'Pro forma normalisée 12+ portes',         decouverte: false,        investisseur: false, pro: false, pro_commercial: true,  entreprise: true },
    { label: 'Glossaire et lexique commercial étendu',  decouverte: false,        investisseur: false, pro: false, pro_commercial: true,  entreprise: true },

    // Bloc 5 — Entreprise (exclusif)
    { section: 'Entreprise' },
    { label: 'Multi-sièges (équipe courtiers)',         decouverte: false,        investisseur: false, pro: false, pro_commercial: false, entreprise: true },
    { label: 'API REST + webhooks',                     decouverte: false,        investisseur: false, pro: false, pro_commercial: false, entreprise: true },
    { label: 'White-label personnalisable',             decouverte: false,        investisseur: false, pro: false, pro_commercial: false, entreprise: true },
    { label: 'Onboarding 1-on-1 + SLA',                 decouverte: false,        investisseur: false, pro: false, pro_commercial: false, entreprise: true },
  ];

  function Cell({ val }) {
    if (val === true) {
      return <span style={{ color: 'oklch(0.42 0.13 150)', fontSize: 16, lineHeight: 1, fontWeight: 700 }}>✓</span>;
    }
    if (val === false) {
      return <span style={{ color: 'var(--ink-4)', fontSize: 14 }}>—</span>;
    }
    return <span style={{ fontSize: 12, color: 'var(--ink-2)', fontWeight: 500 }}>{val}</span>;
  }

  function PricingComparison({ highlightTier }) {
    // highlightTier : optionnel, met en évidence la colonne correspondante.
    const tiers = useMemo(() => TIERS, []);

    return (
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px', fontFamily: 'var(--sans)' }}>
        <h2 style={{
          fontFamily: 'var(--serif)', fontSize: 26, fontWeight: 500,
          textAlign: 'center', marginBottom: 8, color: 'var(--ink-1)',
          letterSpacing: '-0.01em',
        }}>
          Comparaison complète des plans
        </h2>
        <p style={{
          textAlign: 'center', fontSize: 13, color: 'var(--ink-3)',
          marginBottom: 32, lineHeight: 1.6,
        }}>
          Découverte gratuit · Investisseur 24$ · Pro Courtier 59$ · Pro Commercial 129$ · Entreprise sur devis
        </p>

        <div style={{ overflowX: 'auto', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)' }}>
          <table style={{
            width: '100%', borderCollapse: 'collapse',
            fontSize: 13, color: 'var(--ink-1)',
            minWidth: 760,
          }}>
            <thead>
              <tr style={{ background: 'var(--bg-warm)', borderBottom: '2px solid var(--line)' }}>
                <th style={{ textAlign: 'left', padding: '14px 14px', fontWeight: 600, width: '32%' }}>
                  Fonctionnalité
                </th>
                {tiers.map(t => (
                  <th
                    key={t.id}
                    style={{
                      textAlign: 'center', padding: '14px 10px',
                      fontFamily: 'var(--serif)',
                      background: highlightTier === t.id ? 'oklch(0.45 0.10 250 / 0.06)' : 'transparent',
                    }}
                  >
                    <div style={{ fontSize: 14, fontWeight: 700, color: t.accent }}>
                      {t.name}
                    </div>
                    <div style={{
                      fontSize: 11, color: 'var(--ink-3)', fontWeight: 500,
                      fontFamily: 'var(--mono)', marginTop: 2,
                    }}>
                      {t.price}
                    </div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {FEATURES.map((row, i) => {
                if (row.section) {
                  return (
                    <tr key={`sec-${i}`} style={{ background: 'var(--bg-warm)' }}>
                      <td colSpan={1 + tiers.length} style={{
                        padding: '10px 14px',
                        fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
                        textTransform: 'uppercase', color: 'var(--ink-2)',
                      }}>
                        {row.section}
                      </td>
                    </tr>
                  );
                }
                return (
                  <tr key={i} style={{ borderTop: '1px solid var(--line-soft)' }}>
                    <td style={{ padding: '10px 14px', color: 'var(--ink-2)', lineHeight: 1.4 }}>
                      {row.label}
                    </td>
                    {tiers.map(t => (
                      <td
                        key={t.id}
                        style={{
                          textAlign: 'center', padding: '10px 10px',
                          background: highlightTier === t.id ? 'oklch(0.45 0.10 250 / 0.04)' : 'transparent',
                        }}
                      >
                        <Cell val={row[t.id]} />
                      </td>
                    ))}
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  window.PricingComparison = PricingComparison;
})();