// Klyvio — ReportTabs v4
// Niveau 2 : taux de récupération sourcés (McKinsey, MIT Sloan) sous les hypothèses
// Niveau 3 : BeforeAfter sectoriel — étapes adaptées selon le secteur du dirigeant

// ─────────────────────────────────────────────────────────────
// PAIN POINTS
// ─────────────────────────────────────────────────────────────
function PainPoints({ data }) {
  const sevCfg = {
    high: { label: "Critique",     bg: "var(--danger-dim)",  color: "var(--danger)",  border: "rgba(239,68,68,0.25)" },
    med:  { label: "Important",    bg: "var(--warn-dim)",    color: "var(--warn)",    border: "rgba(245,158,11,0.25)" },
    low:  { label: "À surveiller", bg: "var(--accent-dim)",  color: "var(--gray)",    border: "var(--border)" },
  };
  const dims = window.KLYVIO_DIMENSIONS;
  const critiques = data.pains.filter(p => p.severity === "high").length;
  const introText = critiques > 0
    ? `${data.pains.length} points identifiés à partir de vos réponses — dont ${critiques} critique${critiques > 1 ? "s" : ""} à traiter en priorité.`
    : `${data.pains.length} points identifiés à partir de vos réponses. Classés par niveau de criticité.`;

  return (
    <div>
      <div style={{ marginBottom: 28 }}>
        <div className="eyebrow-line" style={{ marginBottom: 10 }}>Diagnostic</div>
        <h2 className="display" style={{ fontSize: 36, margin: "0 0 8px", color: "var(--white)" }}>Ce qui vous freine aujourd'hui.</h2>
        <p style={{ fontSize: 15, color: "var(--gray)", maxWidth: 640, margin: 0 }}>{introText}</p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
        {data.pains.map((p, i) => {
          const cfg = sevCfg[p.severity];
          const dim = dims.find(d => d.id === p.dim);
          return (
            <div key={i} className="card" style={{ padding: "24px 26px", borderLeft: `3px solid ${cfg.color}` }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 999, fontSize: 10, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", background: cfg.bg, color: cfg.color, border: `1px solid ${cfg.border}` }}>
                  <span className="dot" /> {cfg.label}
                </span>
                <span className="chip" style={{ fontSize: 10 }}>
                  <Icon name={dim?.icon || "alert"} size={10} /> {dim?.short || dim?.label}
                </span>
              </div>
              <h3 style={{ fontSize: 17, fontWeight: 600, margin: "0 0 10px", lineHeight: 1.3, color: "var(--white)" }}>{p.title}</h3>
              <p style={{ fontSize: 13, color: "var(--gray)", lineHeight: 1.55, margin: "0 0 14px" }}>{p.desc}</p>
              <div style={{ padding: "10px 12px", background: "rgba(239,68,68,0.06)", border: "1px solid rgba(239,68,68,0.15)", borderRadius: 8, fontSize: 13, color: "var(--white)", display: "flex", alignItems: "center", gap: 8 }}>
                <Icon name="trendDown" size={13} color="var(--danger)" />
                <strong style={{ fontWeight: 500 }}>Impact :</strong> {p.impact}
              </div>
            </div>
          );
        })}
      </div>

      <div className="card" style={{ padding: "22px 26px", marginTop: 24, display: "flex", alignItems: "center", gap: 18 }}>
        <div style={{ width: 44, height: 44, borderRadius: 12, background: "var(--accent-dim)", border: "1px solid var(--border)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
          <Icon name="sparkles" size={20} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 3, color: "var(--white)" }}>Bonne nouvelle</div>
          <div style={{ fontSize: 13, color: "var(--gray)", lineHeight: 1.5 }}>
            Chacun de ces points a une solution concrète dans la roadmap. Commencez par les quick wins pour engranger rapidement des résultats visibles.
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// AUTOMATIONS — niveau 3 : BeforeAfter sectoriel
// ─────────────────────────────────────────────────────────────
function Automations({ data }) {
  const [selected, setSelected] = useState(data.autos[0]?.id);
  const current = data.autos.find(a => a.id === selected) || data.autos[0];
  const sector = data.sector || "services";

  return (
    <div>
      <div style={{ marginBottom: 28 }}>
        <div className="eyebrow-line" style={{ marginBottom: 10 }}>Processus automatisables</div>
        <h2 className="display" style={{ fontSize: 36, margin: "0 0 8px", color: "var(--white)" }}>{data.autos.length} opportunités priorisées.</h2>
        <p style={{ fontSize: 15, color: "var(--gray)", maxWidth: 640, margin: 0 }}>
          Classement par impact décroissant selon vos réponses. Cliquez une ligne pour voir le détail et l'avant/après.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 20 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {data.autos.map((a) => {
            const active = a.id === selected;
            return (
              <button key={a.id} onClick={() => setSelected(a.id)} style={{
                display: "flex", alignItems: "center", gap: 16, padding: "16px 20px",
                background: active ? "var(--accent-dim)" : "rgba(255,255,255,0.02)",
                color: active ? "var(--white)" : "var(--gray)",
                border: `1px solid ${active ? "var(--accent)" : "var(--gray-dim)"}`,
                borderRadius: 12, cursor: "pointer", textAlign: "left", transition: "all .15s ease",
              }}>
                <div style={{ width: 28, height: 28, borderRadius: 7, flexShrink: 0, background: active ? "var(--accent)" : "rgba(255,255,255,0.05)", color: active ? "#000" : "var(--text-mute)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700 }}>{a.priority}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 3 }}>{a.label}</div>
                  <div style={{ fontSize: 12, color: active ? "var(--gray)" : "var(--text-mute)" }}>{a.applicableStaff} pers. · {a.weeklyHoursSaved} h/sem · {a.type}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ fontSize: 18, fontWeight: 800, color: active ? "var(--accent)" : "var(--white)", fontVariantNumeric: "tabular-nums" }}>{formatEur(a.annualGain)}</div>
                  <div style={{ fontSize: 11, color: "var(--text-mute)" }}>/ an</div>
                </div>
              </button>
            );
          })}
        </div>

        <div>
          <div className="card" style={{ padding: "26px", position: "sticky", top: 120 }}>
            <span className="chip chip-accent" style={{ marginBottom: 10 }}>
              <Icon name="workflow" size={11} /> Automatisation {current.priority}
            </span>
            <h3 className="display" style={{ fontSize: 24, margin: "8px 0 0", lineHeight: 1.15, color: "var(--white)" }}>{current.label}</h3>
            <p style={{ fontSize: 13, color: "var(--gray)", lineHeight: 1.55, margin: "10px 0 14px" }}>{current.desc}</p>

            {current.result && (
              <div style={{ padding: "12px 14px", marginBottom: 18, background: "var(--success-dim)", border: "1px solid rgba(34,197,94,0.2)", borderRadius: 10, display: "flex", alignItems: "center", gap: 10 }}>
                <Icon name="trendUp" size={14} color="var(--success)" />
                <div style={{ fontSize: 13, color: "var(--success)", fontWeight: 500 }}>{current.result}</div>
              </div>
            )}

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 18 }}>
              <MiniStat label="Heures/an"   value={formatHours(current.annualHours)} />
              <MiniStat label="Gain annuel" value={formatEur(current.annualGain)} highlight />
              <MiniStat label="Effort"      value={`${current.effort}/5`} />
              <MiniStat label="Délai"       value={current.type} />
            </div>

            <div style={{ fontSize: 11, fontWeight: 600, color: "var(--text-mute)", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 10 }}>Avant → après</div>
            {/* Niveau 3 — BeforeAfter sectoriel */}
            <BeforeAfter auto={current} sector={sector} />
          </div>
        </div>
      </div>
    </div>
  );
}

function MiniStat({ label, value, highlight }) {
  return (
    <div style={{ padding: "12px 14px", background: highlight ? "var(--accent-dim)" : "rgba(255,255,255,0.03)", borderRadius: 10, border: `1px solid ${highlight ? "var(--border)" : "var(--gray-dim)"}` }}>
      <div style={{ fontSize: 10, fontWeight: 600, color: "var(--text-mute)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 18, fontWeight: 800, color: highlight ? "var(--accent)" : "var(--white)", fontVariantNumeric: "tabular-nums" }}>{value}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// BEFORE/AFTER — niveau 3 : adapté par secteur
// ─────────────────────────────────────────────────────────────

// Structure : BEFORE_AFTER[autoId][sector] = { before: {steps, time}, after: {steps, time} }
// Fallback : [autoId].default si le secteur n'est pas défini

const BEFORE_AFTER = {
  mail: {
    default: {
      before: { steps: ["Lire l'email", "Chercher les éléments de contexte", "Rédiger une réponse", "Relire et envoyer"], time: "12–15 min" },
      after:  { steps: ["L'agent propose une réponse contextualisée", "Vous relisez et ajustez en 1 min", "Envoi en 1 clic"], time: "3–4 min" },
    },
    btp: {
      before: { steps: ["Lire la demande client ou fournisseur", "Vérifier l'avancement du chantier", "Rédiger la réponse", "Envoyer"], time: "15–20 min" },
      after:  { steps: ["L'agent détecte le chantier concerné", "Propose une réponse avec le contexte chantier", "Vous validez et envoyez"], time: "3–5 min" },
    },
    health: {
      before: { steps: ["Lire la demande patient ou mutuelle", "Vérifier le dossier", "Rédiger la réponse", "Classer"], time: "10–15 min" },
      after:  { steps: ["L'agent identifie le type de demande", "Propose une réponse conforme", "Vous validez et classez automatiquement"], time: "2–3 min" },
    },
    industry: {
      before: { steps: ["Lire la demande fournisseur ou client", "Vérifier le planning de production", "Rédiger la réponse", "Envoyer"], time: "12–18 min" },
      after:  { steps: ["L'agent consulte le planning en temps réel", "Propose une réponse avec délais actualisés", "Vous validez"], time: "3–4 min" },
    },
  },
  devis: {
    default: {
      before: { steps: ["Extraire le besoin client", "Chercher les tarifs en vigueur", "Remplir un modèle", "Valider et envoyer"], time: "25–35 min" },
      after:  { steps: ["L'email client est analysé automatiquement", "Le devis est pré-rempli", "Vous validez ou ajustez et envoyez"], time: "5–8 min" },
    },
    btp: {
      before: { steps: ["Lire le cahier des charges", "Calculer les métrés manuellement", "Appliquer les tarifs", "Rédiger et envoyer"], time: "2–4 h" },
      after:  { steps: ["L'agent extrait les métrés du document", "Applique votre grille tarifaire", "Vous vérifiez et signez"], time: "20–30 min" },
    },
    services: {
      before: { steps: ["Analyser le besoin exprimé", "Chercher des missions similaires", "Rédiger la proposition", "Chiffrer et envoyer"], time: "1–2 h" },
      after:  { steps: ["L'agent analyse le brief", "Génère une proposition à partir de vos modèles", "Vous ajustez et envoyez"], time: "15–25 min" },
    },
    health: {
      before: { steps: ["Identifier les actes concernés", "Vérifier la nomenclature", "Rédiger le devis patient", "Transmettre"], time: "15–20 min" },
      after:  { steps: ["L'agent identifie les actes et codes", "Génère le devis conforme", "Vous validez et transmettez"], time: "3–5 min" },
    },
  },
  support: {
    default: {
      before: { steps: ["Lire la demande", "Chercher dans la doc interne", "Rédiger une réponse", "Transférer si complexe"], time: "8–12 min" },
      after:  { steps: ["L'agent répond instantanément 24h/24", "Escalade automatique si cas complexe", "Vous ne traitez que les exceptions"], time: "2–3 min (manuel)" },
    },
    commerce: {
      before: { steps: ["Lire la question client (stock, livraison…)", "Vérifier dans l'ERP", "Répondre par email ou téléphone"], time: "8–15 min" },
      after:  { steps: ["L'agent consulte le stock en temps réel", "Répond instantanément au client", "Escalade si réclamation complexe"], time: "< 1 min (automatique)" },
    },
    health: {
      before: { steps: ["Décrocher le téléphone", "Identifier le patient", "Répondre à la question", "Mettre à jour le dossier"], time: "5–10 min" },
      after:  { steps: ["L'agent répond aux questions fréquentes (horaires, RDV, résultats)", "Transfère les urgences à une secrétaire", "Dossier mis à jour automatiquement"], time: "< 1 min (automatique)" },
    },
  },
  report: {
    default: {
      before: { steps: ["Collecter les chiffres dans plusieurs outils", "Copier/coller dans un tableau", "Mettre en forme", "Commenter et diffuser"], time: "2–4 h/sem" },
      after:  { steps: ["Données agrégées automatiquement", "Synthèse rédigée par l'agent", "Vous validez et diffusez"], time: "15–30 min/sem" },
    },
    industry: {
      before: { steps: ["Collecter les données de production", "Calculer les indicateurs qualité et délais", "Mettre en forme le rapport", "Diffuser à la direction"], time: "3–5 h/sem" },
      after:  { steps: ["L'agent agrège les données machines et production", "Calcule automatiquement les KPIs", "Envoie le rapport à la direction chaque lundi matin"], time: "0 min (automatique)" },
    },
    btp: {
      before: { steps: ["Collecter l'avancement de chaque chantier", "Calculer les marges", "Rédiger le rapport de direction", "Diffuser"], time: "4–6 h/sem" },
      after:  { steps: ["L'agent collecte les données chantier en temps réel", "Calcule les marges et alertes de dépassement", "Diffuse le rapport automatiquement"], time: "0 min (automatique)" },
    },
  },
  agenda: {
    default: {
      before: { steps: ["Vérifier les disponibilités de chacun", "Envoyer des créneaux par email", "Attendre les retours", "Ressaisir dans le calendrier"], time: "30–60 min/sem" },
      after:  { steps: ["L'agent trouve les créneaux disponibles", "Invitations envoyées automatiquement", "Comptes-rendus rédigés après la réunion"], time: "5–10 min/sem" },
    },
    health: {
      before: { steps: ["Gérer les appels de prise de RDV", "Vérifier les disponibilités des praticiens", "Confirmer par téléphone ou SMS"], time: "2–3 h/jour" },
      after:  { steps: ["L'agent gère les prises de RDV en ligne et par téléphone", "Synchronise automatiquement les agendas", "Envoie les rappels patients automatiquement"], time: "15 min/jour (supervison)" },
    },
    btp: {
      before: { steps: ["Coordonner les plannings des équipes de chantier", "Gérer les conflits de ressources", "Communiquer les planning par téléphone"], time: "1–2 h/jour" },
      after:  { steps: ["L'agent optimise les plannings selon les contraintes", "Notifie les équipes automatiquement", "Alerte sur les conflits de ressources"], time: "15–20 min/jour" },
    },
  },
  content: {
    default: {
      before: { steps: ["Trouver l'angle et le message", "Rédiger", "Trouver des visuels", "Publier et suivre"], time: "1–2 h/post" },
      after:  { steps: ["Un brief court suffit", "L'agent produit un draft complet", "Vous ajustez et publiez"], time: "15–25 min/post" },
    },
    commerce: {
      before: { steps: ["Préparer les fiches produits", "Rédiger les descriptions", "Créer les posts promotionnels", "Planifier et publier"], time: "2–3 h/semaine" },
      after:  { steps: ["L'agent génère les fiches produits depuis votre catalogue", "Rédige les posts selon votre charte", "Planifie et publie automatiquement"], time: "20–30 min/semaine" },
    },
    services: {
      before: { steps: ["Définir le sujet et l'angle", "Rédiger l'article ou le post LinkedIn", "Relire et corriger", "Publier et répondre aux commentaires"], time: "2–4 h/post" },
      after:  { steps: ["Brief en 5 min sur votre expertise", "L'agent rédige un post ou article structuré", "Vous ajustez le ton et publiez"], time: "20–30 min/post" },
    },
  },
  docs: {
    default: {
      before: { steps: ["Chercher dans ses emails", "Chercher dans les dossiers partagés", "Demander à un collègue", "Ressaisir si introuvable"], time: "15–30 min/recherche" },
      after:  { steps: ["Vous posez votre question en langage naturel", "La réponse arrive en quelques secondes", "Source indiquée pour vérification"], time: "< 1 min" },
    },
    btp: {
      before: { steps: ["Chercher le bon plan ou CCTP", "Appeler le conducteur de travaux", "Retrouver la bonne version du document", "Transmettre"], time: "20–40 min/recherche" },
      after:  { steps: ["Vous demandez 'plan R+2 chantier Dupont'", "L'agent retrouve le bon document en quelques secondes", "Version et date confirmées automatiquement"], time: "< 1 min" },
    },
    health: {
      before: { steps: ["Chercher le protocole ou la procédure", "Demander à un collègue senior", "Vérifier la dernière version", "Appliquer"], time: "10–20 min/recherche" },
      after:  { steps: ["Vous demandez le protocole en langage naturel", "L'agent retrouve la version en vigueur", "Source et date de mise à jour affichées"], time: "< 1 min" },
    },
  },
};

function BeforeAfter({ auto, sector }) {
  const autoData = BEFORE_AFTER[auto.id];
  if (!autoData) {
    return (
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
        <div style={{ padding: 12, background: "rgba(255,255,255,0.03)", borderRadius: 10, border: "1px solid var(--gray-dim)" }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: "var(--text-mute)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>Avant</div>
          <div style={{ fontSize: 12, color: "var(--gray)" }}>Processus entièrement manuel</div>
        </div>
        <div style={{ padding: 12, background: "var(--success-dim)", borderRadius: 10, border: "1px solid rgba(34,197,94,0.2)" }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: "var(--success)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>Après</div>
          <div style={{ fontSize: 12, color: "var(--white)" }}>L'agent automatise les étapes répétitives</div>
        </div>
      </div>
    );
  }

  // Priorité : secteur spécifique → default
  const { before, after } = autoData[sector] || autoData.default;

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
      <div style={{ padding: 12, background: "rgba(255,255,255,0.03)", borderRadius: 10, border: "1px solid var(--gray-dim)" }}>
        <div style={{ fontSize: 10, fontWeight: 600, color: "var(--text-mute)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>Avant · {before.time}</div>
        <ol style={{ margin: 0, padding: "0 0 0 16px", fontSize: 12, color: "var(--gray)", lineHeight: 1.6 }}>
          {before.steps.map((s, i) => <li key={i}>{s}</li>)}
        </ol>
      </div>
      <div style={{ padding: 12, background: "var(--success-dim)", borderRadius: 10, border: "1px solid rgba(34,197,94,0.2)" }}>
        <div style={{ fontSize: 10, fontWeight: 600, color: "var(--success)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>Après · {after.time}</div>
        <ol style={{ margin: 0, padding: "0 0 0 16px", fontSize: 12, color: "var(--white)", lineHeight: 1.6 }}>
          {after.steps.map((s, i) => <li key={i}>{s}</li>)}
        </ol>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ROI SIMULATOR — niveau 2 : taux sourcés McKinsey/MIT Sloan
// ─────────────────────────────────────────────────────────────
function ROISimulator({ data, answers, simHoursPct, setSimHoursPct, simStaffPct, setSimStaffPct }) {
  const hFactor = simHoursPct / 100;
  const sFactor = simStaffPct / 100;

  const adjusted = data.autos.map(a => ({
    ...a,
    annualHours: Math.round(a.annualHours * hFactor * sFactor),
    annualGain:  Math.round(a.annualGain  * hFactor * sFactor),
  }));

  const totalGain  = adjusted.reduce((s, a) => s + a.annualGain, 0);
  const totalHours = adjusted.reduce((s, a) => s + a.annualHours, 0);
  const invest     = data.roi.totalInvest;
  const net        = totalGain - invest;
  const payback    = totalGain > 0
    ? Math.max(0.5, Math.round((invest / (totalGain / 12)) * 10) / 10)
    : 999;

  const nominalGain = data.roi.totalGain;
  const scenarios = [
    { label: "Conservateur", gain: Math.round(nominalGain * 0.50), desc: "50% des heures réellement récupérées, adoption partielle" },
    { label: "Nominal",      gain: nominalGain,                    desc: "Hypothèses de base issues de vos réponses", nominal: true },
    { label: "Optimiste",    gain: Math.round(nominalGain * 1.30), desc: "Adoption rapide + réinvestissement du temps en croissance" },
  ];

  const roiDetail = data.roiDetail;

  const sliderStyle = (val, min, max) => ({
    width: "100%", height: 6, appearance: "none",
    background: `linear-gradient(to right, var(--accent) 0%, var(--accent) ${(val - min) / (max - min) * 100}%, var(--gray-dim) ${(val - min) / (max - min) * 100}%)`,
    borderRadius: 999, cursor: "pointer", outline: "none",
  });

  return (
    <div>
      <div style={{ marginBottom: 28 }}>
        <div className="eyebrow-line" style={{ marginBottom: 10 }}>Simulateur ROI</div>
        <h2 className="display" style={{ fontSize: 36, margin: "0 0 8px", color: "var(--white)" }}>Ajustez les hypothèses, voyez le gain.</h2>
        <p style={{ fontSize: 15, color: "var(--gray)", maxWidth: 640, margin: "0 0 10px" }}>
          Calculé à partir de vos réponses — {roiDetail?.headcount || "?"} personnes · {roiDetail?.hoursLostWk || "?"} h/sem perdues · coût horaire moyen {formatEur(roiDetail?.hourlyCost || 0)}.
        </p>
        {!roiDetail?.smicAdjusted && !roiDetail?.hourlyFloored ? (
          <p style={{ fontSize: 12, color: "var(--text-mute)", maxWidth: 640, margin: "0 0 6px", lineHeight: 1.5 }}>
            Le coût horaire est calculé sur la base de votre masse salariale déclarée, divisée par le nombre de salariés, 47 semaines travaillées et 35 h/semaine.
          </p>
        ) : (
          <>
            <p style={{ fontSize: 12, color: "var(--text-mute)", maxWidth: 640, margin: "0 0 6px", lineHeight: 1.5 }}>
              Le coût horaire moyen est calculé à partir de la masse salariale annuelle, divisée par le nombre de salariés, 47 semaines travaillées et 35 h/semaine.
            </p>
            {roiDetail?.smicAdjusted && (
              <div style={{ display: "flex", alignItems: "flex-start", gap: 8, marginTop: 8, padding: "10px 14px", borderRadius: 8, background: "rgba(251,191,36,0.08)", border: "1px solid rgba(251,191,36,0.25)", maxWidth: 640 }}>
                <span style={{ fontSize: 15, flexShrink: 0 }}>⚠️</span>
                <p style={{ fontSize: 12, color: "var(--warn-500, #f59e0b)", margin: 0, lineHeight: 1.5 }}>
                  La masse salariale déclarée est inférieure au SMIC chargé en vigueur (21 000 €/an par salarié). Le calcul a été automatiquement basé sur ce minimum légal.
                </p>
              </div>
            )}
            {roiDetail?.hourlyFloored && !roiDetail?.smicAdjusted && (
              <div style={{ display: "flex", alignItems: "flex-start", gap: 8, marginTop: 8, padding: "10px 14px", borderRadius: 8, background: "rgba(251,191,36,0.08)", border: "1px solid rgba(251,191,36,0.25)", maxWidth: 640 }}>
                <span style={{ fontSize: 15, flexShrink: 0 }}>⚠️</span>
                <p style={{ fontSize: 12, color: "var(--warn-500, #f59e0b)", margin: 0, lineHeight: 1.5 }}>
                  Le coût horaire calculé est inférieur au minimum observé en PME françaises. Il a été ajusté à 20 €/h pour refléter la réalité du marché.
                </p>
              </div>
            )}
          </>
        )}
      </div>

      {/* 3 scénarios */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 24 }}>
        {scenarios.map((sc, i) => {
          const netSc = sc.gain - invest;
          return (
            <div key={sc.label} style={{
              padding: "20px 22px", borderRadius: 14,
              background: sc.nominal ? "var(--accent-dim)" : "rgba(255,255,255,0.02)",
              border: `1px solid ${sc.nominal ? "var(--accent)" : "var(--gray-dim)"}`,
            }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: sc.nominal ? "var(--accent)" : "var(--text-mute)", marginBottom: 8 }}>
                {sc.label} {sc.nominal && "· Votre estimation"}
              </div>
              <div style={{ fontSize: 32, fontWeight: 800, color: sc.nominal ? "var(--accent)" : "var(--white)", fontVariantNumeric: "tabular-nums", marginBottom: 4 }}>
                {formatEur(sc.gain)}
              </div>
              <div style={{ fontSize: 12, color: "var(--gray)", marginBottom: 8 }}>Gain brut annuel</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: netSc >= 0 ? "var(--success)" : "var(--danger)" }}>
                Net : {formatEur(netSc)}
              </div>
              <div style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 6, lineHeight: 1.4 }}>{sc.desc}</div>
            </div>
          );
        })}
      </div>

      {/* Disclaimer */}
      <div style={{ padding: "14px 18px", marginBottom: 24, background: "rgba(245,158,11,0.06)", border: "1px solid rgba(245,158,11,0.2)", borderRadius: 10, display: "flex", alignItems: "flex-start", gap: 12 }}>
        <Icon name="info" size={15} color="var(--warn)" style={{ flexShrink: 0, marginTop: 2 }} />
        <div style={{ fontSize: 13, color: "var(--gray)", lineHeight: 1.6 }}>
          <strong style={{ color: "var(--white)" }}>Ces estimations représentent un potentiel, pas une garantie.</strong>{" "}
          Le gain réel dépend du taux d'adoption de vos équipes, de la qualité de vos données et de la vitesse de déploiement.
          Les heures récupérées peuvent être réinvesties en croissance ou en réduction de coûts selon votre priorité.
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 24 }}>
        <div className="card" style={{ padding: "26px 30px" }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Affinez votre scénario</div>

          {[
            { label: "Heures gagnées vs estimation", val: simHoursPct, set: setSimHoursPct, min: 40, max: 130, step: 5, marks: ["Conservateur", "Nominal", "Optimiste"] },
            { label: "Taux d'adoption par les équipes", val: simStaffPct, set: setSimStaffPct, min: 30, max: 100, step: 5, marks: ["Pilote", "Partiel", "Total"] },
          ].map((s, k) => (
            <div key={k} style={{ marginBottom: k === 0 ? 28 : 0 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: "var(--white)" }}>{s.label}</div>
                <div style={{ fontSize: 20, fontWeight: 800, color: "var(--accent)", fontVariantNumeric: "tabular-nums" }}>{s.val}%</div>
              </div>
              <input type="range" min={s.min} max={s.max} step={s.step} value={s.val}
                onChange={e => s.set(parseInt(e.target.value))}
                style={sliderStyle(s.val, s.min, s.max)} />
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--text-mute)", marginTop: 8 }}>
                {s.marks.map(m => <span key={m}>{m}</span>)}
              </div>
            </div>
          ))}

          {/* Niveau 2 — hypothèses avec sources McKinsey / MIT Sloan */}
          {roiDetail && (
            <div style={{ marginTop: 24, padding: "14px 16px", background: "rgba(255,255,255,0.03)", border: "1px solid var(--gray-dim)", borderRadius: 10 }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: "var(--text-mute)", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 10 }}>
                Hypothèses de calcul
              </div>
              {[
                { label: "Effectif",          value: `${roiDetail.headcount} pers.` },
                { label: "Heures perdues",    value: `${roiDetail.hoursLostWk} h/sem/pers.` },
                { label: "Taux de récup.",    value: `${Math.round(roiDetail.recoveryRate * 100)}%` },
                { label: "Coût horaire moy.", value: formatEur(roiDetail.hourlyCost) },
                { label: "Offre recommandée", value: roiDetail.offerName || data.offer?.name || "—" },
              ].map(h => (
                <div key={h.label} style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--gray)", padding: "5px 0", borderBottom: "1px dashed rgba(255,255,255,0.05)" }}>
                  <span>{h.label}</span>
                  <span style={{ color: "var(--white)", fontWeight: 500 }}>{h.value}</span>
                </div>
              ))}

              {/* Niveau 2 — sources des taux */}
              <div style={{ marginTop: 12, fontSize: 11, color: "var(--text-mute)", lineHeight: 1.6 }}>
                <strong style={{ color: "var(--gray)" }}>Sources des taux de récupération :</strong><br />
                Tâches administratives (45%) — McKinsey Global Institute, <em>A Future That Works</em>, 2017.<br />
                Emails et communication (35%) — MIT Sloan Management Review, <em>AI at Work</em>, 2023.<br />
                Reporting et consolidation (40%) — Bpifrance Le Lab, <em>Baromètre IA PME</em>, 2023.<br />
                Taux appliqués aux postes déclarés dans vos réponses.
              </div>
            </div>
          )}
        </div>

        <div>
          <div className="card" style={{ padding: "26px 30px", marginBottom: 14 }}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-mute)", marginBottom: 10 }}>
              Gain net — scénario personnalisé
            </div>
            <div style={{ fontSize: 64, fontWeight: 800, lineHeight: 1, color: net >= 0 ? "var(--accent)" : "var(--danger)", marginBottom: 8, fontVariantNumeric: "tabular-nums" }}>
              {formatEur(net)}
            </div>
            <div style={{ fontSize: 13, color: "var(--gray)", marginBottom: 20 }}>
              {formatHours(totalHours)} économisées · Investissement {formatEur(invest)}
            </div>
            <div style={{ height: 6, background: "var(--gray-dim)", borderRadius: 999, overflow: "hidden", marginBottom: 8 }}>
              <div style={{ width: "100%", display: "flex", height: "100%" }}>
                <div style={{ flex: Math.max(0, invest), background: "var(--warn)" }} />
                <div style={{ flex: Math.max(0, totalGain - invest), background: "var(--success)" }} />
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--gray)" }}>
              <span>Investissement {formatEur(invest)}</span>
              <span>Net {formatEur(net)}</span>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10, marginBottom: 14 }}>
            <StatCard eyebrow="Heures économisées" value={formatHours(totalHours)} sub="/ an" icon="clock" />
            <div className="card" style={{ padding: "16px 18px" }}>
              <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-mute)", marginBottom: 6 }}>Retour sur invest.</div>
              <div style={{ fontSize: 28, fontWeight: 800, color: "var(--white)", fontVariantNumeric: "tabular-nums", lineHeight: 1, marginBottom: 4 }}>{payback} mois</div>
              <div style={{ fontSize: 12, color: "var(--gray)", marginBottom: 8 }}>pour rentabiliser</div>
              <div style={{ borderTop: "1px dashed var(--border)", paddingTop: 8 }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: "var(--white)", marginBottom: 2 }}>
                  {roiDetail?.offer?.name || data.offer?.name || `${data.tier === "starter" ? "1" : data.tier === "duo" ? "2" : "3"} agents autonomes`}
                </div>
                <div style={{ fontSize: 12, color: "var(--accent)", fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>
                  {formatEur(invest)} la 1ère année
                </div>
                <div style={{ fontSize: 11, color: "var(--text-mute)", fontVariantNumeric: "tabular-nums" }}>
                  puis {formatEur(roiDetail?.subscription || 0)}/an
                </div>
                <div style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 6, lineHeight: 1.4, fontStyle: "italic" }}>
                  Basé sur les automatisations les plus impactantes. Périmètre complet défini lors de votre entretien.
                </div>
              </div>
            </div>
          </div>

          <div className="card" style={{ padding: "18px 20px" }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Par automatisation</div>
            {adjusted.map(a => (
              <div key={a.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "7px 0", borderBottom: "1px dashed var(--border)" }}>
                <div style={{ flex: 1, fontSize: 13, color: "var(--white)" }}>{a.label}</div>
                <div style={{ height: 4, width: 80, background: "var(--gray-dim)", borderRadius: 999, overflow: "hidden" }}>
                  <div style={{ width: `${Math.min(100, (a.annualGain / Math.max(1, adjusted[0].annualGain)) * 100)}%`, height: "100%", background: "var(--accent)" }} />
                </div>
                <div className="mono" style={{ fontSize: 12, minWidth: 60, textAlign: "right", color: "var(--accent)" }}>{formatEur(a.annualGain)}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ROADMAP
// ─────────────────────────────────────────────────────────────
function Roadmap({ data }) {
  const profile  = data?.profile;
  const isUrgent = profile?.id === "urgent";

  return (
    <div>
      <div style={{ marginBottom: 28 }}>
        <div className="eyebrow-line" style={{ marginBottom: 10 }}>Plan d'action</div>
        <h2 className="display" style={{ fontSize: 36, margin: "0 0 8px", color: "var(--white)" }}>Votre roadmap sur 12 mois.</h2>
        <p style={{ fontSize: 15, color: "var(--gray)", maxWidth: 640, margin: 0 }}>
          {isUrgent
            ? "Votre situation permet de démarrer dès cette semaine — les quick wins ci-dessous sont activables sans prérequis technique."
            : "Trois phases, séquencées selon l'effort et l'impact. Chaque phase livre une valeur concrète avant la suivante."}
        </p>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        {data.roadmap.map((phase, idx) => (
          <div key={idx} className="card" style={{ padding: "26px 30px", borderLeft: `3px solid ${phase.color}` }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 18 }}>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.1em", color: phase.color }}>PHASE {idx + 1}</div>
              <div className="display" style={{ flex: 1, fontSize: 24, margin: 0, color: "var(--white)" }}>
                {phase.title}
                {idx === 0 && isUrgent && (
                  <span style={{ fontSize: 12, fontWeight: 600, color: "var(--warn)", marginLeft: 12, verticalAlign: "middle" }}>← À démarrer maintenant</span>
                )}
              </div>
              <span className="chip"><Icon name="clock" size={10} /> {phase.phase}</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
              {phase.items.map((it, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 15px", background: "rgba(255,255,255,0.02)", border: "1px solid var(--gray-dim)", borderRadius: 10 }}>
                  <div style={{ width: 30, height: 30, borderRadius: 8, flexShrink: 0, background: it.kind === "auto" ? "var(--accent-dim)" : "rgba(255,255,255,0.05)", border: "1px solid var(--border)", color: it.kind === "auto" ? "var(--accent)" : "var(--gray)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon name={it.kind === "auto" ? "workflow" : "check"} size={13} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 2, color: "var(--white)" }}>{it.label}</div>
                    {it.kind === "auto"   && <div style={{ fontSize: 11, color: "var(--gray)" }}>{formatEur(it.annualGain)}/an · {it.applicableStaff} collab.</div>}
                    {it.kind === "action" && <div style={{ fontSize: 11, color: "var(--gray)" }}>Action organisationnelle · Effort {it.effort}/5</div>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// BENCHMARK — sources réelles
// ─────────────────────────────────────────────────────────────
const SECTOR_DIM_OFFSETS = {
  services: { context: +4, org: +3, data: +2, processes: +1, usage: +6, readiness: +3, vision: +5 },
  commerce: { context: +2, org: +1, data: -1, processes: +3, usage: +2, readiness: -1, vision: +1 },
  industry: { context: -2, org: +2, data: -3, processes: +4, usage: -4, readiness: -2, vision: -3 },
  health:   { context: -4, org: -2, data: -5, processes: -3, usage: -6, readiness: -4, vision: -5 },
  btp:      { context: -5, org: -3, data: -6, processes: -2, usage: -8, readiness: -5, vision: -6 },
  other:    { context:  0, org:  0, data:  0, processes:  0, usage:  0, readiness:  0, vision:  0 },
};

const SECTOR_SOURCES = {
  services: "Bpifrance Le Lab — Baromètre IA PME 2023",
  commerce: "CCI France — Étude maturité numérique 2023",
  industry: "Symop / Bpifrance — Industrie du futur 2024",
  health:   "FEHAP / ANAP — Maturité numérique secteur santé 2023",
  btp:      "FNTP / FFB — Baromètre digital BTP 2023",
  other:    "Bpifrance Le Lab — Baromètre IA PME 2023",
};

function Benchmark({ data, company }) {
  const { percentile, sectorAvg, distribution } = data.bench;
  const offsets = SECTOR_DIM_OFFSETS[data.sector] || SECTOR_DIM_OFFSETS.other;
  const source  = SECTOR_SOURCES[data.sector]     || SECTOR_SOURCES.other;

  return (
    <div>
      <div style={{ marginBottom: 28 }}>
        <div className="eyebrow-line" style={{ marginBottom: 10 }}>Comparaison sectorielle</div>
        <h2 className="display" style={{ fontSize: 36, margin: "0 0 8px", color: "var(--white)" }}>Où vous situez-vous ?</h2>
        <p style={{ fontSize: 15, color: "var(--gray)", maxWidth: 640, margin: 0 }}>
          Votre position vs {data.sectorLabel} · Moyenne sectorielle issue de {source}.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 20 }}>
        <div className="card" style={{ padding: "28px 32px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Votre position</div>
          <div style={{ fontSize: 64, fontWeight: 800, lineHeight: 1, margin: "0 0 8px", fontVariantNumeric: "tabular-nums" }}>
            Top <span style={{ color: "var(--accent)" }}>{100 - percentile}%</span>
          </div>
          <div style={{ fontSize: 14, color: "var(--gray)", marginBottom: 28 }}>
            Vous êtes plus avancé·e que {percentile}% des PME de {data.sectorLabel}.
          </div>

          <div style={{ display: "flex", alignItems: "flex-end", gap: 3, height: 120, padding: "0 0 20px" }}>
            {distribution.buckets.map((v, i) => (
              <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", position: "relative" }}>
                <div style={{ width: "100%", height: `${v * 2.2}px`, background: i === distribution.userBucket ? "var(--accent)" : "var(--gray-dim)", borderRadius: "3px 3px 0 0", transition: "height .6s" }} />
                {i === distribution.userBucket && (
                  <div style={{ position: "absolute", bottom: `calc(${v * 2.2}px + 8px)`, fontSize: 10, fontWeight: 700, color: "var(--accent)", whiteSpace: "nowrap" }}>
                    Vous · {data.global}
                  </div>
                )}
              </div>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--text-mute)" }}>
            <span>0</span><span>50</span><span>100</span>
          </div>
          <div style={{ marginTop: 12, fontSize: 11, color: "var(--text-mute)", lineHeight: 1.5, fontStyle: "italic" }}>
            Moyenne sectorielle : {source}
          </div>
        </div>

        <div className="card" style={{ padding: "28px 32px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>vs moyenne {data.sectorLabel}</div>
          <div style={{ marginBottom: 28 }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 8 }}>
              <div style={{ fontSize: 52, fontWeight: 800, color: "var(--white)", fontVariantNumeric: "tabular-nums" }}>{data.global}</div>
              <div style={{ fontSize: 14, color: "var(--gray)" }}>vs</div>
              <div style={{ fontSize: 32, fontWeight: 800, color: "var(--gray)", fontVariantNumeric: "tabular-nums" }}>{sectorAvg}</div>
              <div style={{ fontSize: 13, color: "var(--gray)" }}>moy. secteur</div>
              <span className={`chip ${data.global >= sectorAvg ? "chip-success" : "chip-warn"}`} style={{ marginLeft: "auto" }}>
                <Icon name={data.global >= sectorAvg ? "trendUp" : "trendDown"} size={11} />
                {data.global >= sectorAvg ? "+" : ""}{data.global - sectorAvg} pts
              </span>
            </div>
            <div style={{ position: "relative", height: 8, background: "var(--gray-dim)", borderRadius: 999, marginTop: 14 }}>
              <div style={{ position: "absolute", left: `${sectorAvg}%`, top: -3, bottom: -3, width: 2, background: "var(--gray)", borderRadius: 1 }} />
              <div style={{ position: "absolute", left: `${Math.min(98, data.global)}%`, top: -4, bottom: -4, width: 3, background: "var(--accent)", borderRadius: 2 }} />
            </div>
          </div>

          <div className="eyebrow" style={{ marginBottom: 12 }}>Dimensions vs secteur</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {data.scores.map(s => {
              const sectorV = Math.max(0, Math.min(100, sectorAvg + (offsets[s.id] || 0)));
              const diff    = Math.round(s.value - sectorV);
              return (
                <div key={s.id} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <div style={{ fontSize: 12, minWidth: 100, color: "var(--white)" }}>{s.label}</div>
                  <div style={{ flex: 1, height: 5, background: "var(--gray-dim)", borderRadius: 999, position: "relative" }}>
                    <div style={{ position: "absolute", left: `${Math.max(0, Math.min(100, sectorV))}%`, top: -2, bottom: -2, width: 2, background: "var(--gray)", borderRadius: 1 }} />
                    <div style={{ width: `${Math.min(100, s.value)}%`, height: "100%", background: s.color, borderRadius: 999 }} />
                  </div>
                  <div className="mono" style={{ fontSize: 11, minWidth: 36, textAlign: "right", color: diff >= 0 ? "var(--success)" : "var(--danger)" }}>
                    {diff >= 0 ? "+" : ""}{diff}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PainPoints, Automations, ROISimulator, Roadmap, Benchmark });