/* global React, RateViz, GrowthBar, RoiNumber, SparklineArea, DeltaBadge, useInView */ /* ============================================================ Loyoly Benchmark — Views (Overview / Industry / KPI) Uses LangContext for i18n + localized data. ============================================================ */ const { useState, useMemo, useEffect, useRef, createContext, useContext } = React; const LangContext = createContext(null); window.LangContext = LangContext; // Helper hook function useLang() { return useContext(LangContext); } // CSV download utility function downloadCSV(filename, rows) { const escape = v => { const s = String(v ?? ""); return (s.includes(",") || s.includes('"') || s.includes("\n")) ? `"${s.replace(/"/g, '""')}"` : s; }; const csv = rows.map(r => r.map(escape).join(",")).join("\r\n"); const blob = new Blob(["" + csv], { type: "text/csv;charset=utf-8;" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; a.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); } // Export dropdown — CSV + PDF (print) function ExportMenu({ onCSV }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, [open]); const handleCSV = () => { setOpen(false); onCSV(); }; const handlePDF = () => { setOpen(false); window.print(); }; return (

{open && (

)}

); } // ---------- Small icon set ---------- function Icon({ name, size = 16 }) { const c = "currentColor"; const sw = 1.5; const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: c, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "shirt": return ; case "sparkles": return ; case "coffee": return ; case "leaf": return ; case "home": return ; case "pawprint": return ; case "dumbbell": return ; case "zap": return ; case "coins": return ; case "gift": return ; case "share-2": return ; case "user-plus": return ; case "users": return ; case "trending-up": return ; case "shopping-cart": return ; case "package": return ; case "arrow-right": return ; case "arrow-up-right": return ; case "download": return ; case "x": return ; case "info": return ; case "target": return ; case "chart": return ; case "grid": return ; case "globe": return ; case "external": return ; default: return ; } } const KPI_ICONS = { activation_rate: "zap", points_usage_rate: "coins", redemption_rate: "gift", referral_conversion: "share-2", new_customer_rate: "user-plus", participation_rate: "users", ltv_growth: "trending-up", aov_growth: "shopping-cart", orders_growth: "package", roi: "target", }; // resolve which viz to render for a KPI given the user's variant choice function resolveViz(kpi, override) { if (override === "auto" || !override) return kpi.defaultViz || "ring"; // ratesonly variants override only the rate viz; growth/roi keep their natives if (kpi.type === "rate") return override; return kpi.defaultViz || "bar"; } // ============================================================================ // VISUAL FORMULA — large legible math, alternative to

 style
// ============================================================================
function VisualFormula({ kpi }) {
  const { t } = useLang();
  const p = kpi.formulaParts;
  if (!p) {
    return (
      
        {t("kv_formula_lbl")}
        {kpi.formula}
      
    );
  }
  return (
    
      {t("kv_formula_lbl")}
      
        {p.num}
        
        {p.denom}
      
    
  );
}

// ============================================================================
// KPI CARD
// ============================================================================
function KpiCard({ kpi, value, benchmark, vizOverride, formulaStyle = "visual", showDelta = true, index = 0, dark, onClick }) {
  const { t, formatValue, classify } = useLang();
  const v = value;
  const cmp = (benchmark != null) ? classify(v, benchmark) : null;
  const variant = resolveViz(kpi, vizOverride);

  let body;
  if (kpi.type === "rate") {
    body = ;
  } else if (kpi.type === "growth") {
    body = ;
  } else if (kpi.type === "roi") {
    const spark = [v * 0.55, v * 0.7, v * 0.78, v * 0.9, v];
    body = ;
  }

  const clickable = !!onClick;
  const formula = (
    
      {t("kv_formula_lbl")}
      {kpi.formula}
    
  );

  return (
     { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } } : undefined}>
      
        
          
          {kpi.type === "rate" ? t("kpi_nav_" + kpi.id) : (kpi.short || kpi.name)}
        
        {showDelta && cmp && (
          
            vs. {t("card_avg_prefix")}
            
          
        )}
      
      {kpi.definition.split(". ")[0] + "."}
      {body}
      {formula}
      {clickable && (
        
          {t("card_view_kpi")}
          
        
      )}
    
  );
}

// ============================================================================
// MISSION IMPACT CHART
// ============================================================================
function MissionImpactChart({ data, dark }) {
  const { t } = useLang();
  const W = 720, H = 240;
  const padding = { l: 40, r: 24, t: 24, b: 36 };
  const innerW = W - padding.l - padding.r;
  const innerH = H - padding.t - padding.b;
  const series = [
    { id: "ltv",    name: t("mc_series_ltv"),    color: "var(--blue-primary)", data: data.ltv },
    { id: "orders", name: t("mc_series_orders"), color: "var(--pampas-700)",   data: data.orders },
    { id: "aov",    name: t("mc_series_aov"),    color: "var(--yellow-primary)", data: data.aov.map(v => (v / data.aov[0]) * 100) }
  ];
  const allVals = series.flatMap(s => s.data);
  const yMax = Math.ceil(Math.max(...allVals) / 50) * 50;
  const yMin = 80;
  const x = (i) => padding.l + (i / 4) * innerW;
  const y = (v) => padding.t + (1 - (v - yMin) / (yMax - yMin)) * innerH;
  const yTicks = useMemo(() => {
    const step = Math.ceil((yMax - yMin) / 4 / 25) * 25;
    const out = [];
    for (let v = yMin; v <= yMax; v += step) out.push(v);
    return out;
  }, [yMin, yMax]);

  const [ref, seen] = useInView();
  const [hover, setHover] = useState(null);
  // Fallback: trigger reveal on mount in case IntersectionObserver doesn't fire
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    const id = setTimeout(() => setMounted(true), 80);
    return () => clearTimeout(id);
  }, []);
  const reveal = (seen || mounted) ? 1 : 0;
  const labelMission = (i) => i === 1 ? t("mc_axis_mission_one") : t("mc_axis_mission_n");

  return (
    
      
        
          {t("mc_eyebrow")}
          {t("mc_title")}
          {t("mc_body")}
        
        
          {series.map(s => {s.name})}
        
      
      
        
        {hover != null && (
          
            {hover} {labelMission(hover)}
            {series.map(s => (
              
                {s.name}
                {Math.round(s.data[hover])}
              
            ))}
          
        )}
      
    
  );
}

// ============================================================================
// CLIENT LOGO STRIP (per sector — uses Loyoly logo as placeholder)
// ============================================================================
function ClientStrip({ sector }) {
  const { t } = useLang();
  return (
    
      
        {t("iv_clients_eyebrow")}
        {t("iv_clients_body")}
      
      
        {sector.clients.map((c, i) => (
          
            
              
              
            
          
        ))}
      
    
  );
}

// ============================================================================
// OVERVIEW VIEW
// ============================================================================
function OverviewView({ goTo, goToKpi, openBenchmark, vizOverride, formulaStyle, dark }) {
  const { t, data } = useLang();
  const { KPIS, SECTORS, GLOBAL, TOTAL_BRANDS } = data;

  return (
    
      {/* Hero B — data-forward + wayfinding index */}
      
        
          
            {t("hero_pill")} · 2026
          
          
            {t("hero_h1_pre")}
{t("hero_h1_post")}
          
          {t("hero_lead", { n: TOTAL_BRANDS })}
          
            
            
          
        
        
          
          
        
      

      {/* TWO WAYS IN */}
      
        
          
            01
            {t("sec01_eyebrow").replace(/^\s*\d+\s*[—–-]\s*/, "")}
            
          
          {t("sec01_title")}
          {t("sec01_lead")}
        
      
      
         s.id !== "other").length })}
          cta={t("entry_a_open")}
          chips={SECTORS.map(s => ({ icon: s.icon, label: s.short }))}
          onClick={() => goTo("industry")}
        />
         ({ label: k.short || k.name }))}
          chipsMore={KPIS.length - 6 > 0 ? t("entry_more", { n: KPIS.length - 6 }) : null}
          onClick={() => goTo("kpi")}
        />
      

      {/* CROSS-SECTOR AVERAGES */}
      
        
          
            02
            {t("sec02_eyebrow").replace(/^\s*\d+\s*[—–-]\s*/, "")}
            
          
          {t("sec02_title_a")}
{t("sec02_title_b")}
          {t("sec02_lead")}
        
        
          {t("chip_rates")}
          {t("chip_growth")}
          {t("chip_roi")}
        
      
      {/* BENCHMARK BANNER */}
      
        
          
             {t("banner_eyebrow")}
          
          {t("banner_title")}
          {t("banner_body")}
        
        
          
        
      

      
        {KPIS.map((k, i) => (
           goToKpi(k.id)} />
        ))}
      

      
    
  );
}

// ─── EntryCard — strong clickable affordance (Florian: "on comprend pas") ───
function EntryCard({ letter, eyebrow, title, body, cta, chips, chipsMore, onClick, tone }) {
  return (
    
  );
}

function Methodology() {
  const { t } = useLang();
  return (
    
      
        {t("meth_eyebrow")}
        {t("meth_title")}
      
      
        {t("meth_intro")}
        
          
            {t("meth_op_lbl")}
            
          
          
            {t("meth_lt_lbl")}
            
          
          
            {t("meth_smp_lbl")}
            
          
        
        {t("meth_footer")}
      
    
  );
}

// ============================================================================
// INDUSTRY VIEW
// ============================================================================
function IndustryView({ openBenchmark, vizOverride, formulaStyle, dark, sectorId, setSectorId }) {
  const { t, data, formatValue, formatDelta } = useLang();
  const { KPIS, SECTORS, GLOBAL, CATEGORIES } = data;
  const sector = SECTORS.find(s => s.id === sectorId) || SECTORS[0];
  const [exporting, setExporting] = useState(false);
  const handleExport = () => {
    if (exporting) return;
    setExporting(true);
    const catMap = Object.fromEntries((CATEGORIES || []).map(c => [c.id, c.label]));
    const rows = [
      ["KPI", "Category", `${sector.name} value`, "Cross-sector avg", "Δ vs avg"]
    ];
    KPIS.forEach(k => {
      const v = sector.kpis[k.id];
      const avg = GLOBAL[k.id];
      rows.push([
        k.name,
        catMap[k.category] || k.category,
        formatValue(k, v),
        formatValue(k, avg),
        v != null && avg != null ? (v - avg >= 0 ? "+" : "") + formatDelta(k.id, v - avg) : ""
      ]);
    });
    downloadCSV(`loyoly-benchmark-${sector.id}.csv`, rows);
    setExporting(false);
  };

  useEffect(() => { window.scrollTo({ top: 0, behavior: "smooth" }); }, [sectorId]);

  return (
    
      
        
          {t("iv_eyebrow")}
          {t("iv_title")}
        
        
          
          
        
      

      
        
          {SECTORS.filter(s => s.id !== "other").map(s => (
            
          ))}
        

        
          {/* Intro: sector name + intro, client strip replaces minicards */}
          
            
              
                 {t("iv_sector_overview")}
              
              {sector.name}
              {sector.intro.split("\n").map((para, i) => (
                 0 ? 10 : 0 }}>{para}
              ))}
            
            {sector.clients && sector.clients.length > 0 && }
          

          
            {CATEGORIES.map((cat, ci) => {
              const items = KPIS.filter(k => k.category === cat.id);
              if (items.length === 0) return null;
              return (
                
                  
                    {String(ci + 1).padStart(2, "0")}
                    
                      {cat.label}
                      {cat.blurb}
                    
                    {t("iv_kpis_count", { n: items.length })}
                  
                  
                    {items.map((k, i) => (
                      
                    ))}
                  
                
              );
            })}
          
        
      
    
  );
}

// ============================================================================
// KPI VIEW
// ============================================================================
function KpiView({ openBenchmark, dark, kpiId, setKpiId, vizOverride, formulaStyle, insightsLayout = "split", goToIndustry }) {
  const { t, data, formatValue, formatDelta, classify } = useLang();
  const { KPIS, SECTORS, GLOBAL, CATEGORIES } = data;
  const [exporting, setExporting] = useState(false);
  const kpi = KPIS.find(k => k.id === kpiId) || KPIS[0];
  const avg = GLOBAL[kpi.id];
  const rankingSectors = SECTORS.filter(s => s.id !== "other");
  const handleExport = () => {
    if (exporting) return;
    setExporting(true);
    const sorted = [...rankingSectors].sort((a, b) => (b.kpis[kpi.id] || 0) - (a.kpis[kpi.id] || 0));
    const rows = [["Rank", "Sector", kpi.name, "Cross-sector avg", "Δ vs avg"]];
    sorted.forEach((s, i) => {
      const v = s.kpis[kpi.id];
      rows.push([
        i + 1,
        s.name,
        formatValue(kpi, v),
        formatValue(kpi, avg),
        v != null ? (v - avg >= 0 ? "+" : "") + formatDelta(kpi.id, v - avg) : ""
      ]);
    });
    downloadCSV(`loyoly-benchmark-${kpi.id}.csv`, rows);
    setExporting(false);
  };
  const allVals = rankingSectors.map(s => s.kpis[kpi.id]).concat([avg]).filter(v => typeof v === "number");
  const max = Math.max(...allVals);
  const axisMax = (kpi.type === "roi") ? Math.ceil(max + 1) : Math.ceil(max / 5) * 5 + 5;
  const sorted = [...rankingSectors].sort((a, b) => (b.kpis[kpi.id] || 0) - (a.kpis[kpi.id] || 0));
  const avgPct = (avg / axisMax) * 100;

  return (
    
      
        
          {t("kv_eyebrow")}
          {t("kv_title")}
        
        
          
          
        
      

      
        
          {(CATEGORIES || []).map(cat => {
            const catKpis = KPIS.filter(k => k.category === cat.id);
            if (catKpis.length === 0) return null;
            return (
              
                {cat.label}
                {catKpis.map(k => (
                  
                ))}
              
            );
          })}
        

        
          {/* KPI HERO — longer definition fully visible */}
          
            
              {t("kv_definition_lbl")}
              {kpi.name}
              {kpi.definition}
              {formulaStyle === "code" ? (
                
                  {t("kv_formula_lbl")}{kpi.formula}
                
              ) : (
                
                  {t("kv_formula_lbl")}{kpi.formula}
                
              )}
            
            
              {t("kv_cross_avg")}
              {kpi.type === "rate" && }
              {kpi.type === "growth" && }
              {kpi.type === "roi" && }
            
          

          {/* SECTOR COMPARE — single continuous avg line */}
          
            
              
                {t("kv_ranking_eyebrow")}
                {t("kv_ranking_title", { kpi: kpi.name })}
              
              
                {t("kv_legend_sector")}
                {t("kv_legend_avg")}
              
            

            {/* Body wraps rows + the single continuous avg overlay line */}
            
              
                {t("kv_avg_short")} {formatValue(kpi, avg)}
              
              {sorted.map((s, idx) => {
                const v = s.kpis[kpi.id];
                const pct = (v / axisMax) * 100;
                const cmp = classify(v, avg);
                return (
                  
                );
              })}
            

            
              0
              {Math.round(axisMax/4)}
              {Math.round(axisMax/2)}
              {Math.round(axisMax*0.75)}
              {Math.round(axisMax)}{kpi.type === "roi" ? "×" : "%"}
            
          

          {/* INSIGHTS */}
          {kpi.insights && (
            
          )}

          
            
              {t("kv_tips_eyebrow")}
              {t("kv_tips_title", { kpi: kpi.nameAbout || kpi.short || kpi.name })}
            
          
          
            {kpi.tips.map((tip, i) => {
              const obj = (typeof tip === "string") ? { title: "", body: tip } : tip;
              return (
                
                  {i + 1}
                  {obj.title && {obj.title}}
                  {obj.body}
                  
                    {t("kv_tip_cta")} 
                  
                
              );
            })}
          
        
      
    
  );
}

function CompareRow({ sector, value, pct, cmp, kpi, index, goToIndustry }) {
  const { formatValue, formatDelta, t, data } = useLang();
  const [hover, setHover] = useState(false);
  const [w, setW] = useState(0);
  useEffect(() => { const id = setTimeout(() => setW(pct), 40); return () => clearTimeout(id); }, [pct]);
  const avg = data.GLOBAL[kpi.id];
  const delta = value - avg;
  return (
    
      
       setHover(true)}
           onMouseLeave={() => setHover(false)}
           onClick={() => goToIndustry && goToIndustry(sector.id)}>
        
        
        {hover && (
          
            {formatValue(kpi, value)}
            {formatDelta(kpi, delta)} vs avg
          
        )}
      
      
        {formatValue(kpi, value)}
        
      
    
  );
}

// ============================================================================
// INSIGHTS SECTION — "What the data says" (3 switchable layouts)
// ============================================================================
function InsightsSection({ kpi, sorted, formatValue, t, dark, layout = "split" }) {
  const paras = (kpi.insights || "").split("\n").map(s => s.trim()).filter(Boolean);
  const leadPara = paras[0] || "";
  const lagPara = paras[1] || paras[0] || "";
  const top = sorted && sorted[0];
  const bottom = sorted && sorted[sorted.length - 1];
  const topVal = top ? formatValue(kpi, top.kpis[kpi.id]) : "";
  const botVal = bottom ? formatValue(kpi, bottom.kpis[kpi.id]) : "";

  const Header = (
    
      {t("kv_insights_eyebrow")}
      {t("kv_insights_title", { kpi: kpi.nameAbout || kpi.short || kpi.name })}
    
  );

  let body;
  if (layout === "panel") {
    body = (
      
        {paras.map((para, i) => (
           0 ? "10px 0 0" : 0 }}>{para}
        ))}
      
    );
  } else if (layout === "editorial") {
    body = (
      
        
          {top && {top.name}{topVal}}
          {bottom && {bottom.name}{botVal}}
        
        {paras.map((para, i) => (
           0 ? "12px 0 0" : 0 }}>{para}
        ))}
      
    );
  } else {
    // split (default): leader vs laggard cards
    body = (
      
        
          
            
            
              {t("insights_leader")}
              {top && }{top && top.name}
            
            {topVal}
          
          {leadPara}
        
        
          
            
            
              {t("insights_laggard")}
              {bottom && }{bottom && bottom.name}
            
            {botVal}
          
          {lagPara}
        
      
    );
  }

  return (
    
      
      {Header}
      {body}
    
  );
}

Object.assign(window, {
  OverviewView, IndustryView, KpiView, Icon, LangContext, useLang,
  resolveViz, ClientStrip, EntryCard, Methodology, MissionImpactChart, KpiCard,
  InsightsSection
});

{t("mc_title")}

{t("sec01_title")}

{t("sec02_title_a")}{t("sec02_title_b")}

{t("banner_title")}

{title}

{t("meth_title")}

{t("iv_title")}

{sector.name}

{cat.label}

{t("kv_title")}

{kpi.name}

{t("kv_ranking_title", { kpi: kpi.name })}

{t("kv_tips_title", { kpi: kpi.nameAbout || kpi.short || kpi.name })}

{obj.title}

{t("kv_insights_title", { kpi: kpi.nameAbout || kpi.short || kpi.name })}

{t("sec02_title_a")}
{t("sec02_title_b")}