/* global React, Icon, BrandLogo, FinEngine */
/* ============================================================================
   3H FINANCIERO — Módulo cliente (financiero.jsx)
   Tu director financiero digital: viabilidad, diagnóstico, EVA, presupuesto,
   valoración y financiación con base mundial de financiadores.
   ========================================================================== */
(() => {
  const { useState, useEffect, useMemo, useRef } = React;
  const E = FinEngine;
  const M = 1e6;

  /* ---------------- helpers ---------------- */
  async function api(path, opts = {}) {
    const r = await fetch(`/api/fin/${path}`, {
      headers: { "content-type": "application/json" },
      ...opts,
      body: opts.body ? JSON.stringify(opts.body) : undefined,
    });
    const d = await r.json().catch(() => ({}));
    if (!r.ok) throw Object.assign(new Error(d.error || "Error"), { status: r.status, data: d });
    return d;
  }
  const goto = (h) => { location.hash = h; };
  const cop = (n) => E.fmtCOP(n);
  const mm = (n) => E.fmtMM(n);
  const pct = (x, d = 1) => E.fmtPct(x, d);

  /* ---------------- átomos UI (lenguaje visual 3H) ---------------- */
  const Eyebrow = ({ children, dark }) => <div className={`font-mono text-[11px] uppercase tracking-[0.18em] ${dark ? "text-amber-300" : "text-amber-600"}`}>{children}</div>;
  const FCard = ({ children, className = "" }) => <div className={`rounded-2xl bg-white ring-1 ring-taupe-200/70 shadow-sm ${className}`}>{children}</div>;
  const FBtn = ({ children, onClick, dark = true, className = "", size = "md", disabled }) => (
    <button onClick={onClick} disabled={disabled} className={`inline-flex items-center justify-center gap-2 rounded-full font-semibold transition disabled:opacity-50
      ${size === "lg" ? "px-6 py-3.5 text-[15px]" : size === "sm" ? "px-3 py-1.5 text-xs" : "px-4 py-2.5 text-sm"}
      ${dark ? "bg-taupe-900 text-white hover:bg-taupe-700" : "bg-white text-taupe-900 ring-1 ring-taupe-200 hover:bg-taupe-50"} ${className}`}>{children}</button>
  );
  const AmberBtn = ({ children, onClick, className = "", disabled }) => (
    <button onClick={onClick} disabled={disabled} className={`inline-flex items-center justify-center gap-2 rounded-full bg-amber-400 px-6 py-3.5 font-bold text-taupe-900 transition hover:bg-amber-300 disabled:opacity-50 ${className}`}>{children}</button>
  );
  const FField = ({ label, suffix, value, onChange, hint, type = "number", step, placeholder }) => (
    <label className="block">
      <div className="mb-1.5 flex items-baseline justify-between gap-2">
        <span className="text-sm font-semibold text-taupe-800">{label}</span>
        {hint && <span className="text-[11px] text-taupe-400">{hint}</span>}
      </div>
      <div className="flex items-center gap-2 rounded-xl bg-taupe-50 px-3.5 py-2.5 ring-1 ring-taupe-200 focus-within:ring-amber-400">
        <input type={type} value={value ?? ""} step={step} placeholder={placeholder}
          onChange={(e) => onChange(type === "number" ? (e.target.value === "" ? "" : parseFloat(e.target.value)) : e.target.value)}
          className="w-full bg-transparent text-[15px] font-bold text-taupe-900 outline-none placeholder:font-normal placeholder:text-taupe-300" />
        {suffix && <span className="shrink-0 font-mono text-[11px] text-taupe-500">{suffix}</span>}
      </div>
    </label>
  );
  const Chip = ({ children, tone = "taupe" }) => {
    const t = { taupe: "bg-taupe-100 text-taupe-700 ring-taupe-200/70", verde: "bg-emerald-100 text-emerald-700 ring-emerald-200", amarillo: "bg-amber-100 text-amber-700 ring-amber-200", rojo: "bg-red-100 text-red-700 ring-red-200" }[tone];
    return <span className={`rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wide ring-1 ${t}`}>{children}</span>;
  };
  const Dot = ({ tone }) => <span className={`inline-block h-2.5 w-2.5 rounded-full ${{ verde: "bg-emerald-500", amarillo: "bg-amber-400", rojo: "bg-red-500", gris: "bg-taupe-300" }[tone] || "bg-taupe-300"}`} />;
  const KPI = ({ k, v, d, ok }) => (
    <FCard className="p-5">
      <div className="flex items-center justify-between">
        <div className="font-mono text-[10px] uppercase tracking-wide text-taupe-400">{k}</div>
        {ok !== undefined && <Dot tone={ok ? "verde" : "rojo"} />}
      </div>
      <div className="mt-1.5 text-2xl font-extrabold tracking-tight text-taupe-900">{v}</div>
      {d && <div className="text-xs text-taupe-500">{d}</div>}
    </FCard>
  );

  /* ---------------- gráficos SVG ---------------- */
  function ChartFlujos({ data, w = 640, h = 230 }) { // data: [{t, fcl, acum}] en $M
    if (!data?.length) return null;
    const pad = { l: 46, r: 10, t: 12, b: 24 };
    const vals = data.flatMap((d) => [d.fcl, d.acum]);
    const min = Math.min(0, ...vals), max = Math.max(0, ...vals);
    const X = (i) => pad.l + (i + 0.5) * (w - pad.l - pad.r) / data.length;
    const Y = (v) => pad.t + (max - v) / (max - min || 1) * (h - pad.t - pad.b);
    const bw = Math.min(44, (w - pad.l - pad.r) / data.length * 0.55);
    return (
      <svg viewBox={`0 0 ${w} ${h}`} className="w-full">
        {[0.25, 0.5, 0.75].map((f) => <line key={f} x1={pad.l} x2={w - pad.r} y1={pad.t + f * (h - pad.t - pad.b)} y2={pad.t + f * (h - pad.t - pad.b)} stroke="#ebe5e1" strokeDasharray="3 3" />)}
        <line x1={pad.l} x2={w - pad.r} y1={Y(0)} y2={Y(0)} stroke="#9d8980" strokeWidth="1.2" />
        {data.map((d, i) => (
          <g key={i}>
            <rect x={X(i) - bw / 2} y={Math.min(Y(0), Y(d.fcl))} width={bw} height={Math.abs(Y(d.fcl) - Y(0)) || 1} rx="5" fill={d.fcl >= 0 ? "#f59e0b" : "#dc2626"} opacity="0.9" />
            <text x={X(i)} y={h - 7} textAnchor="middle" fontSize="10.5" fill="#7E706A" fontFamily="Space Mono, monospace">{d.t}</text>
          </g>
        ))}
        <polyline points={data.map((d, i) => `${X(i)},${Y(d.acum)}`).join(" ")} fill="none" stroke="#3a3431" strokeWidth="2.5" />
        {data.map((d, i) => <circle key={i} cx={X(i)} cy={Y(d.acum)} r="3.4" fill="#3a3431" />)}
        {[min, 0, max].filter((v, i, a) => a.indexOf(v) === i).map((v) => <text key={v} x={pad.l - 6} y={Y(v) + 3.5} textAnchor="end" fontSize="10" fill="#9d8980" fontFamily="Space Mono, monospace">{Math.round(v)}</text>)}
      </svg>
    );
  }
  function ChartPerfilVPN({ perfil, wacc, tir, w = 640, h = 220 }) { // perfil: [{tasa, vpn, vpnVT}] $ ; eje en %
    if (!perfil?.length) return null;
    const pad = { l: 52, r: 12, t: 12, b: 26 };
    const xs = perfil.map((p) => p.tasa);
    const ys = perfil.flatMap((p) => [p.vpn, p.vpnVT]);
    const minY = Math.min(...ys), maxY = Math.max(...ys);
    const X = (t) => pad.l + (t - xs[0]) / (xs[xs.length - 1] - xs[0] || 1) * (w - pad.l - pad.r);
    const Y = (v) => pad.t + (maxY - v) / (maxY - minY || 1) * (h - pad.t - pad.b);
    const line = (key, color, dash) => <polyline points={perfil.map((p) => `${X(p.tasa)},${Y(p[key])}`).join(" ")} fill="none" stroke={color} strokeWidth="2.4" strokeDasharray={dash} />;
    return (
      <svg viewBox={`0 0 ${w} ${h}`} className="w-full">
        <line x1={pad.l} x2={w - pad.r} y1={Y(0)} y2={Y(0)} stroke="#9d8980" strokeWidth="1.1" />
        {line("vpnVT", "#d8ccc4")}
        {line("vpn", "#f59e0b")}
        {wacc != null && X(wacc) > pad.l && <g><line x1={X(wacc)} x2={X(wacc)} y1={pad.t} y2={h - pad.b} stroke="#3a3431" strokeDasharray="4 3" /><text x={X(wacc) + 4} y={pad.t + 10} fontSize="10" fill="#3a3431" fontFamily="Space Mono, monospace">WACC {Math.round(wacc * 100)}%</text></g>}
        {tir != null && X(tir) > pad.l && X(tir) < w - pad.r && <g><circle cx={X(tir)} cy={Y(0)} r="5" fill="#059669" /><text x={X(tir)} y={Y(0) - 9} textAnchor="middle" fontSize="10.5" fontWeight="700" fill="#059669" fontFamily="Space Mono, monospace">TIR {(tir * 100).toFixed(1)}%</text></g>}
        {[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6].map((t) => <text key={t} x={X(t)} y={h - 8} textAnchor="middle" fontSize="10" fill="#9d8980" fontFamily="Space Mono, monospace">{t * 100}%</text>)}
        <text x={pad.l - 8} y={Y(0) + 3.5} textAnchor="end" fontSize="10" fill="#9d8980" fontFamily="Space Mono, monospace">0</text>
      </svg>
    );
  }
  const Bar = ({ pctv, tone = "amber" }) => (
    <div className="h-2 w-full overflow-hidden rounded-full bg-taupe-100">
      <div className={`h-full rounded-full ${{ amber: "bg-amber-400", verde: "bg-emerald-500", rojo: "bg-red-500", taupe: "bg-taupe-500" }[tone]}`} style={{ width: `${Math.max(2, Math.min(100, pctv))}%` }} />
    </div>
  );

  /* ---------------- carga de archivos (SheetJS + mapeo PUC) ---------------- */
  function useSheetJS() {
    const [ready, setReady] = useState(!!window.XLSX);
    useEffect(() => {
      if (window.XLSX) return;
      const s = document.createElement("script");
      s.src = "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js";
      s.onload = () => setReady(true);
      document.head.appendChild(s);
    }, []);
    return ready;
  }
  function FileImport({ onApply, periodos = 2 }) {
    const ready = useSheetJS();
    const [rows, setRows] = useState(null);
    const [err, setErr] = useState("");
    const inputRef = useRef(null);
    const leer = (file) => {
      const fr = new FileReader();
      fr.onload = (ev) => {
        try {
          const wb = window.XLSX.read(ev.target.result, { type: "array" });
          const out = [];
          for (const sn of wb.SheetNames.slice(0, 4)) {
            const sheet = window.XLSX.utils.sheet_to_json(wb.Sheets[sn], { header: 1, raw: true });
            for (const r of sheet) {
              if (!r || !r.length) continue;
              const nombre = String(r[0] ?? "").trim();
              const nums = r.slice(1).filter((x) => typeof x === "number" && isFinite(x));
              if (!nombre || !nums.length) continue;
              const map = E.mapearCuentaPUC(nombre);
              if (map) out.push({ cuenta: nombre.slice(0, 60), campo: map.campo, grupo: map.grupo, valores: nums.slice(0, periodos) });
            }
          }
          if (!out.length) setErr("No se reconocieron cuentas. Usa un archivo con nombres de cuenta en la primera columna y valores numéricos al lado (formato PUC o similar).");
          else { setErr(""); setRows(out); }
        } catch (e) { setErr("No se pudo leer el archivo: " + e.message); }
      };
      fr.readAsArrayBuffer(file);
    };
    const aplicar = () => {
      const agg = {};
      for (const r of rows) {
        r.valores.forEach((v, i) => {
          agg[i] = agg[i] || { balance: {}, pyg: {} };
          agg[i][r.grupo][r.campo] = (agg[i][r.grupo][r.campo] || 0) + v;
        });
      }
      onApply(Object.values(agg));
      setRows(null);
    };
    return (
      <div className="rounded-2xl border-2 border-dashed border-taupe-300 bg-taupe-50/60 p-5">
        {!rows ? (
          <div className="text-center">
            <Icon name="FileSpreadsheet" size={26} className="mx-auto text-taupe-400" />
            <div className="mt-2 text-sm font-bold text-taupe-800">Sube tu balance y estado de resultados</div>
            <div className="mx-auto mt-1 max-w-md text-xs text-taupe-500">Excel o CSV exportado de tu software contable (Siigo, Alegra, World Office, SAP…). El sistema reconoce las cuentas PUC automáticamente. También puedes seguir diligenciando manual.</div>
            <input ref={inputRef} type="file" accept=".xlsx,.xls,.csv" className="hidden" onChange={(e) => e.target.files[0] && leer(e.target.files[0])} />
            <FBtn className="mt-3" onClick={() => inputRef.current?.click()} disabled={!ready}><Icon name="Upload" size={15} /> {ready ? "Elegir archivo" : "Cargando lector…"}</FBtn>
            {err && <div className="mt-3 rounded-lg bg-red-50 px-3 py-2 text-xs font-semibold text-red-700 ring-1 ring-red-200">{err}</div>}
          </div>
        ) : (
          <div>
            <div className="flex items-center justify-between">
              <div className="text-sm font-bold text-taupe-900"><Icon name="Wand2" size={15} className="mr-1 inline text-amber-500" /> {rows.length} cuentas reconocidas y mapeadas</div>
              <button className="text-xs font-semibold text-taupe-500 hover:text-taupe-800" onClick={() => setRows(null)}>Cambiar archivo</button>
            </div>
            <div className="mt-3 max-h-44 overflow-y-auto rounded-xl bg-white ring-1 ring-taupe-200">
              <table className="w-full text-xs">
                <tbody>{rows.slice(0, 40).map((r, i) => (
                  <tr key={i} className="border-b border-taupe-100 last:border-0">
                    <td className="px-3 py-1.5 text-taupe-600">{r.cuenta}</td>
                    <td className="px-3 py-1.5 font-mono font-bold text-taupe-900">→ {r.campo}</td>
                    <td className="px-3 py-1.5 text-right font-mono text-taupe-700">{r.valores.map((v) => mm(v)).join(" · ")}</td>
                  </tr>))}
                </tbody>
              </table>
            </div>
            <AmberBtn className="mt-3 w-full" onClick={aplicar}><Icon name="CheckCircle2" size={16} /> Aplicar a los formularios</AmberBtn>
          </div>
        )}
      </div>
    );
  }

  /* ---------------- catálogo de servicios ---------------- */
  const SERV_META = {
    diagnostico: { icon: "Activity", tag: "Radiografía completa", desc: "18+ indicadores, semáforos, EBITDA, KTNO, ciclo de caja y conclusiones de tu empresa.", entrega: "Inmediato al pagar" },
    viabilidad: { icon: "Calculator", tag: "El más pedido", desc: "VPN, TIR, payback, perfil del VPN, sensibilidad, escenarios y concepto de viabilidad.", entrega: "Inmediato al pagar", top: true },
    presupuesto: { icon: "Wallet", tag: "Por sector", desc: "Presupuesto maestro 12 meses (comercial, industrial o servicios) con flujo de caja y alertas.", entrega: "Inmediato al pagar" },
    eva: { icon: "TrendingUp", tag: "Creación de valor", desc: "¿Tu empresa crea o destruye valor? EVA, ROCE, WACC y las 4 palancas de mejora.", entrega: "Inmediato al pagar" },
    valoracion: { icon: "Building2", tag: "Para vender o invertir", desc: "Valor de tu empresa por flujo de caja descontado y múltiplos, con rango negociable.", entrega: "Inmediato al pagar" },
    financiacion: { icon: "Handshake", tag: "Consigue recursos", desc: "Matching con la base mundial 3H de fondos, ángeles, banca y recursos no reembolsables + dossier.", entrega: "Matching inmediato + dossier 72h" },
    cfo: { icon: "Crown", tag: "Plan mensual", desc: "Todos los análisis ilimitados + seguimiento mensual + comité financiero con el equipo 3H.", entrega: "Activación inmediata" },
  };

  /* ---------------- LANDING ---------------- */
  function Landing({ prices, trm, stats, user, onAuth }) {
    const [moneda, setMoneda] = useState("COP");
    const precio = (p) => !p ? "—" : moneda === "COP" ? `${cop(p.precio_cop)} COP` : `USD ${(p.precio_usd || Math.round(p.precio_cop / trm)).toLocaleString("en-US")}`;
    const px = (id) => prices.find((p) => p.id === id);
    const empezar = (tipo) => user ? goto(`#/financiero/nuevo/${tipo}`) : onAuth(`#/financiero/nuevo/${tipo}`);
    const S = Object.assign({ v1: "15+", l1: "años evaluando proyectos", v2: "8", l2: "ventures desarrollados", v3: "45+", l3: "financiadores en base" }, stats || {});
    return (
      <div>
        {/* HERO */}
        <section className="relative overflow-hidden">
          <div className="mx-auto grid max-w-6xl items-center gap-12 px-6 py-14 md:grid-cols-[1.08fr_0.92fr] md:py-22">
            <div>
              <div className="inline-flex items-center gap-2 rounded-full bg-taupe-100 px-3 py-1.5 ring-1 ring-taupe-200">
                <span className="h-1.5 w-1.5 rounded-full bg-amber-500" />
                <span className="font-mono text-[11px] uppercase tracking-[0.16em] text-taupe-600">3H Financiero · dirección financiera digital</span>
              </div>
              <h1 className="mt-6 text-[clamp(2.4rem,5.2vw,4rem)] font-extrabold leading-[0.98] tracking-[-0.03em] text-taupe-900">
                Un buen proyecto no siempre gana.
                <br /><span className="text-taupe-500">Gana el mejor estructurado.</span>
              </h1>
              <p className="mt-6 max-w-xl text-lg leading-relaxed text-taupe-600">
                Evalúa la viabilidad de tu proyecto, diagnostica tu empresa, presupuesta como los grandes y
                convierte tu idea en <b className="text-taupe-900">recursos aprobados</b>: te conectamos con fondos,
                ángeles y banca en todo el mundo, con la metodología que 3H aplica desde 2010.
              </p>
              <div className="mt-8 flex flex-wrap items-center gap-4">
                <AmberBtn onClick={() => empezar("viabilidad")}>Evaluar mi proyecto gratis <Icon name="ArrowRight" size={17} /></AmberBtn>
                <FBtn size="lg" dark={false} onClick={() => document.getElementById("fin-servicios")?.scrollIntoView({ behavior: "smooth" })}>Servicios y precios</FBtn>
              </div>
              <div className="mt-12 flex items-center gap-8 border-t border-taupe-200/70 pt-6">
                <div><div className="text-2xl font-extrabold tracking-tight text-taupe-900">{S.v1}</div><div className="text-xs text-taupe-500">{S.l1}</div></div>
                <div><div className="text-2xl font-extrabold tracking-tight text-taupe-900">{S.v2}</div><div className="text-xs text-taupe-500">{S.l2}</div></div>
                <div><div className="text-2xl font-extrabold tracking-tight text-taupe-900">{S.v3}</div><div className="text-xs text-taupe-500">{S.l3}</div></div>
              </div>
            </div>
            <FCard className="p-6">
              <Eyebrow>Así funciona</Eyebrow>
              <div className="mt-4 grid gap-3">
                {[["Database", "1 · Conecta tus datos", "Sube el Excel de tu contabilidad, expórtalo de tu software o diligencia guiado. 10 minutos."],
                ["Zap", "2 · El motor 3H calcula", "La metodología de una banca de inversión, automatizada y verificada."],
                ["FileText", "3 · Recibe tu informe", "Documento profesional con concepto, gráficos, recomendaciones y plan de acción."],
                ["Handshake", "4 · Consigue los recursos", "Matching con financiadores compatibles y proyecto presentado en lenguaje evaluador."]].map(([ic, t, d]) => (
                  <div key={t} className="flex items-start gap-3.5 rounded-xl bg-taupe-50 p-3.5 ring-1 ring-taupe-100">
                    <span className="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-taupe-900 text-amber-400"><Icon name={ic} size={19} /></span>
                    <div><div className="text-sm font-bold text-taupe-900">{t}</div><div className="text-[13px] leading-snug text-taupe-500">{d}</div></div>
                  </div>))}
              </div>
            </FCard>
          </div>
        </section>

        {/* PARA QUIÉN */}
        <section className="border-y border-taupe-200/60 bg-white/60 py-10">
          <div className="mx-auto max-w-6xl px-6">
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              {[["Briefcase", "Empresarios", "que quieren crecer con cifras claras y sin deuda innecesaria"],
              ["Rocket", "Emprendedores", "con un negocio listo para escalar, pero sin capital"],
              ["HeartHandshake", "Líderes sociales", "con proyectos de impacto que necesitan recursos reales"],
              ["Landmark", "Organizaciones", "que postulan a convocatorias y quieren dejar de perder por mala formulación"]].map(([ic, t, d]) => (
                <div key={t} className="flex items-start gap-3">
                  <span className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-taupe-100 text-taupe-700 ring-1 ring-taupe-200"><Icon name={ic} size={18} /></span>
                  <div><div className="font-bold text-taupe-900">{t}</div><div className="text-[13px] leading-snug text-taupe-500">{d}</div></div>
                </div>))}
            </div>
          </div>
        </section>

        {/* SERVICIOS */}
        <section id="fin-servicios" className="py-16">
          <div className="mx-auto max-w-6xl px-6">
            <div className="flex flex-wrap items-end justify-between gap-4">
              <div>
                <Eyebrow>Servicios · paga solo lo que necesitas</Eyebrow>
                <h2 className="mt-2 text-3xl font-extrabold tracking-tight text-taupe-900 md:text-4xl">Catálogo financiero</h2>
              </div>
              <div className="flex items-center gap-3">
                <span className="font-mono text-xs text-taupe-400">IVA incluido</span>
                <div className="flex rounded-full bg-taupe-100 p-0.5 font-mono text-[11px] font-bold ring-1 ring-taupe-200">
                  {["COP", "USD"].map((c) => <button key={c} onClick={() => setMoneda(c)} className={`rounded-full px-2.5 py-1 transition ${moneda === c ? "bg-white shadow-sm text-taupe-900" : "text-taupe-500"}`}>{c}</button>)}
                </div>
              </div>
            </div>
            <div className="mt-9 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
              {prices.filter((p) => p.id !== "cfo").map((p) => {
                const meta = SERV_META[p.id] || {};
                return (
                  <FCard key={p.id} className={`flex flex-col p-6 ${meta.top ? "ring-2 ring-amber-400" : ""}`}>
                    <div className="flex items-start justify-between">
                      <span className="grid h-11 w-11 place-items-center rounded-xl bg-taupe-900 text-amber-400"><Icon name={meta.icon || "FileText"} size={21} /></span>
                      {meta.top ? <Chip tone="amarillo">Más pedido</Chip> : <span className="font-mono text-[10px] uppercase tracking-wide text-taupe-400">{meta.tag}</span>}
                    </div>
                    <h3 className="mt-4 text-lg font-extrabold leading-tight text-taupe-900">{p.nombre}</h3>
                    <p className="mt-1.5 text-[13.5px] leading-snug text-taupe-600">{p.descripcion || meta.desc}</p>
                    <div className="mt-auto flex items-end justify-between pt-5">
                      <div>
                        <div className="text-xl font-extrabold text-taupe-900">{precio(p)}</div>
                        <div className="font-mono text-[10px] uppercase text-taupe-400">{meta.entrega}</div>
                      </div>
                      <FBtn onClick={() => empezar(p.id)}>Empezar</FBtn>
                    </div>
                  </FCard>
                );
              })}
            </div>

            {/* PLAN CFO */}
            {px("cfo") && (
              <div className="mt-8 overflow-hidden rounded-2xl bg-taupe-900 text-white">
                <div className="grid items-center gap-8 p-8 md:grid-cols-[1.2fr_0.8fr] md:p-10">
                  <div>
                    <Eyebrow dark>Plan mensual · para empresas en marcha</Eyebrow>
                    <h3 className="mt-2 text-3xl font-extrabold tracking-tight">CFO Virtual 3H</h3>
                    <p className="mt-3 max-w-lg text-taupe-200">Toda la unidad financiera de 3H trabajando para tu empresa cada mes, como si el equipo estuviera adentro.</p>
                    <ul className="mt-5 grid gap-2 sm:grid-cols-2">
                      {["Todos los análisis e informes ilimitados", "Seguimiento mensual de indicadores", "Comité financiero mensual con el equipo 3H", "Alertas de convocatorias que hacen match", "Acceso prioritario a financiadores", "Acompañamiento en postulaciones"].map((i) => (
                        <li key={i} className="flex items-start gap-2 text-sm text-taupe-100"><Icon name="BadgeCheck" size={15} className="mt-0.5 shrink-0 text-amber-300" />{i}</li>))}
                    </ul>
                  </div>
                  <div className="rounded-2xl bg-white/5 p-6 text-center ring-1 ring-white/10">
                    <div className="text-4xl font-extrabold">{precio(px("cfo"))}</div>
                    <div className="mt-1 font-mono text-xs uppercase tracking-wide text-taupe-400">por mes · cancela cuando quieras</div>
                    <AmberBtn className="mt-5 w-full" onClick={() => empezar("cfo")}>Suscribirme</AmberBtn>
                    <div className="mt-3 flex items-center justify-center gap-1.5 text-[11px] text-taupe-400"><Icon name="ShieldCheck" size={13} /> Pago seguro Wompi · PSE, Nequi, tarjetas</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </section>

        {/* CTA evaluación gratuita */}
        <section className="border-t border-taupe-200/60 bg-white/70 py-14">
          <div className="mx-auto max-w-6xl px-6">
            <div className="grid items-center gap-8 md:grid-cols-[1.2fr_0.8fr]">
              <div>
                <Eyebrow>Antes de postular, ten claro esto</Eyebrow>
                <h3 className="mt-2 text-3xl font-extrabold tracking-tight text-taupe-900">La mayoría de proyectos no pierde por falta de impacto.<br />Pierde por mala estructuración.</h3>
                <p className="mt-3 max-w-xl text-taupe-600">Por eso la <b>pre-evaluación es gratis</b>: ingresa tus números, mira tu semáforo de viabilidad y tu score de financiabilidad al instante. Pagas solo cuando quieras el informe profesional o la conexión con financiadores.</p>
              </div>
              <div className="text-center md:text-right">
                <AmberBtn onClick={() => empezar("viabilidad")}>Probar gratis ahora <Icon name="ArrowRight" size={17} /></AmberBtn>
                <div className="mt-2 font-mono text-[11px] text-taupe-400">sin tarjeta · resultado en minutos</div>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }

  /* ---------------- AUTH ---------------- */
  function AuthModal({ open, onClose, onDone, destino }) {
    const [modo, setModo] = useState("registro");
    const [f, setF] = useState({ correo: "", password: "", nombre: "", empresa: "", telefono: "" });
    const [err, setErr] = useState(""); const [busy, setBusy] = useState(false);
    if (!open) return null;
    const enviar = async () => {
      setBusy(true); setErr("");
      try {
        const d = await api(modo === "registro" ? "register" : "login", { method: "POST", body: f });
        onDone(d.user, destino);
      } catch (e) { setErr(e.message); } finally { setBusy(false); }
    };
    const inp = "w-full rounded-xl bg-taupe-50 px-3.5 py-2.5 text-[15px] font-semibold text-taupe-900 ring-1 ring-taupe-200 outline-none focus:ring-amber-400";
    return (
      <div className="fixed inset-0 z-50 grid place-items-center bg-taupe-900/60 p-4 backdrop-blur-sm" onClick={onClose}>
        <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl" onClick={(e) => e.stopPropagation()}>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2.5">
              <span className="grid h-9 w-9 place-items-center rounded-xl bg-taupe-900 text-sm font-black text-amber-400">3H</span>
              <div className="font-extrabold text-taupe-900">{modo === "registro" ? "Crea tu cuenta gratis" : "Bienvenido de nuevo"}</div>
            </div>
            <button onClick={onClose} className="rounded-full p-1.5 text-taupe-400 hover:bg-taupe-100"><Icon name="X" size={17} /></button>
          </div>
          <div className="mt-5 grid gap-3">
            {modo === "registro" && <>
              <input className={inp} placeholder="Tu nombre" value={f.nombre} onChange={(e) => setF({ ...f, nombre: e.target.value })} />
              <input className={inp} placeholder="Empresa o proyecto (opcional)" value={f.empresa} onChange={(e) => setF({ ...f, empresa: e.target.value })} />
              <input className={inp} placeholder="WhatsApp (opcional)" value={f.telefono} onChange={(e) => setF({ ...f, telefono: e.target.value })} />
            </>}
            <input className={inp} type="email" placeholder="Correo" value={f.correo} onChange={(e) => setF({ ...f, correo: e.target.value })} />
            <input className={inp} type="password" placeholder="Contraseña (mín. 8)" value={f.password} onChange={(e) => setF({ ...f, password: e.target.value })} onKeyDown={(e) => e.key === "Enter" && enviar()} />
          </div>
          {err && <div className="mt-3 rounded-lg bg-red-50 px-3 py-2 text-xs font-semibold text-red-700 ring-1 ring-red-200">{err}</div>}
          <AmberBtn className="mt-4 w-full" onClick={enviar} disabled={busy}>{busy ? "Un momento…" : modo === "registro" ? "Crear cuenta y continuar" : "Entrar"}</AmberBtn>
          <button className="mt-3 w-full text-center text-xs font-semibold text-taupe-500 hover:text-taupe-800" onClick={() => setModo(modo === "registro" ? "login" : "registro")}>
            {modo === "registro" ? "Ya tengo cuenta · iniciar sesión" : "No tengo cuenta · registrarme gratis"}
          </button>
        </div>
      </div>
    );
  }

  /* ---------------- WIZARD: VIABILIDAD ---------------- */
  const D0 = {
    viabilidad: { nombre: "", sector: "Turismo / Hotelería", horizonte: 5, taxPct: 35, inversiones: { terrenos: 0, edificios: 400, maquinaria: 200, muebles: 50, vehiculos: 0, tecnologia: 0, diferidos: 45 }, finance: { aportePct: 40, tasaDeudaEA: 18, plazoAnios: 5, graciaMeses: 6 }, kePct: 22, ingresosY1: 780, crecPct: 12, costosVarPct: 40, gastosFijos: 170, inflacionPct: 5, nof: { diasCartera: 15, diasInventario: 10, diasProveedores: 20, cajaMinDias: 10 }, valorTerminal: { g: 3 }, tipoRecurso: "cualquiera", etapa: "temprana", montoBuscado: 0 },
  };
  const SECTORES = ["Turismo / Hotelería", "Comercial", "Industrial", "Servicios", "Inmobiliario", "Tecnología", "Agroindustria", "Otro"];

  function WizardViabilidad({ proyecto, onSave, guardando }) {
    const [step, setStep] = useState(0);
    const [d, setD] = useState(() => Object.keys(proyecto.datos || {}).length ? proyecto.datos : { ...D0.viabilidad, nombre: proyecto.nombre });
    const set = (path, v) => setD((s) => { const c = JSON.parse(JSON.stringify(s)); const ks = path.split("."); let o = c; for (let i = 0; i < ks.length - 1; i++) o = o[ks[i]]; o[ks[ks.length - 1]] = v; return c; });
    const R = useMemo(() => { try { return E.evaluarProyecto(escalar(d)); } catch (e) { return null; } }, [d]);
    function escalar(x) { const c = JSON.parse(JSON.stringify(x)); ["ingresosY1", "gastosFijos", "montoBuscado"].forEach((k) => c[k] = (c[k] || 0) * M); Object.keys(c.inversiones || {}).forEach((k) => c.inversiones[k] = (c.inversiones[k] || 0) * M); return c; }
    const pasos = ["Proyecto", "Inversión y financiación", "Operación", "Resultados"];
    return (
      <div>
        <Stepper pasos={pasos} step={step} setStep={setStep} />
        {step === 0 && <FCard className="mt-5 p-7">
          <div className="grid gap-5 md:grid-cols-2">
            <FField label="Nombre del proyecto" type="text" value={d.nombre} onChange={(v) => set("nombre", v)} placeholder="Ej: Eco-Hotel Bahía" />
            <label className="block"><span className="mb-1.5 block text-sm font-semibold text-taupe-800">Sector</span>
              <select value={d.sector} onChange={(e) => set("sector", e.target.value)} className="w-full rounded-xl bg-taupe-50 px-3.5 py-3 text-[15px] font-bold text-taupe-900 ring-1 ring-taupe-200 outline-none">{SECTORES.map((s) => <option key={s}>{s}</option>)}</select></label>
            <label className="block"><span className="mb-1.5 block text-sm font-semibold text-taupe-800">Etapa</span>
              <select value={d.etapa} onChange={(e) => set("etapa", e.target.value)} className="w-full rounded-xl bg-taupe-50 px-3.5 py-3 text-[15px] font-bold text-taupe-900 ring-1 ring-taupe-200 outline-none">{["idea", "temprana", "crecimiento", "madura"].map((s) => <option key={s}>{s}</option>)}</select></label>
            <FField label="Horizonte de evaluación" suffix="años (3-10)" value={d.horizonte} onChange={(v) => set("horizonte", v)} />
          </div>
          <p className="mt-4 rounded-xl bg-amber-50 px-4 py-3 text-[13px] text-taupe-700 ring-1 ring-amber-200"><Icon name="Sparkles" size={14} className="mr-1.5 inline text-amber-500" />Todos los valores monetarios se ingresan en <b>millones de COP</b>. La pre-evaluación es gratuita: mira tus resultados antes de pagar el informe.</p>
        </FCard>}
        {step === 1 && <FCard className="mt-5 p-7">
          <div className="font-mono text-[11px] uppercase tracking-[0.16em] text-amber-600">Plan de inversión (millones COP)</div>
          <div className="mt-3 grid gap-4 sm:grid-cols-3">
            {[["terrenos", "Terrenos"], ["edificios", "Edificios y adecuaciones"], ["maquinaria", "Maquinaria y equipos"], ["muebles", "Muebles y enseres"], ["vehiculos", "Vehículos"], ["tecnologia", "Tecnología y software"], ["diferidos", "Gastos preoperativos"]].map(([k, l]) => (
              <FField key={k} label={l} suffix="M" value={d.inversiones[k]} onChange={(v) => set(`inversiones.${k}`, v)} />))}
            <div className="rounded-xl bg-taupe-900 p-4 text-white">
              <div className="font-mono text-[10px] uppercase tracking-wide text-taupe-400">Inversión total (con capital de trabajo)</div>
              <div className="mt-1 text-2xl font-extrabold text-amber-400">{R ? mm(R.inversionTotal) : "—"}</div>
              <div className="text-[11px] text-taupe-400">KT inicial calculado por políticas: {R ? mm(R.ktInicial) : "—"}</div>
            </div>
          </div>
          <div className="mt-6 font-mono text-[11px] uppercase tracking-[0.16em] text-amber-600">Financiación</div>
          <div className="mt-3 grid gap-4 sm:grid-cols-3">
            <FField label="Aporte propio" suffix="%" value={d.finance.aportePct} onChange={(v) => set("finance.aportePct", v)} hint="el resto será crédito" />
            <FField label="Tasa del crédito" suffix="% EA" value={d.finance.tasaDeudaEA} onChange={(v) => set("finance.tasaDeudaEA", v)} />
            <FField label="Plazo del crédito" suffix="años" value={d.finance.plazoAnios} onChange={(v) => set("finance.plazoAnios", v)} />
            <FField label="Período de gracia" suffix="meses" value={d.finance.graciaMeses} onChange={(v) => set("finance.graciaMeses", v)} />
            <FField label="Rentabilidad exigida (Ke)" suffix="%" value={d.kePct} onChange={(v) => set("kePct", v)} hint="lo que exiges como inversionista" />
            <div className="rounded-xl bg-taupe-50 p-4 ring-1 ring-taupe-200">
              <div className="font-mono text-[10px] uppercase tracking-wide text-taupe-400">WACC — la vara a superar</div>
              <div className="mt-1 text-2xl font-extrabold text-taupe-900">{R ? pct(R.W.wacc) : "—"}</div>
              <div className="text-[11px] text-taupe-500">costo promedio ponderado de capital</div>
            </div>
          </div>
        </FCard>}
        {step === 2 && <FCard className="mt-5 p-7">
          <div className="grid gap-4 sm:grid-cols-3">
            <FField label="Ingresos año 1" suffix="M" value={d.ingresosY1} onChange={(v) => set("ingresosY1", v)} />
            <FField label="Crecimiento anual" suffix="%" value={d.crecPct} onChange={(v) => set("crecPct", v)} />
            <FField label="Costos variables" suffix="% ventas" value={d.costosVarPct} onChange={(v) => set("costosVarPct", v)} />
            <FField label="Gastos fijos año 1" suffix="M/año" value={d.gastosFijos} onChange={(v) => set("gastosFijos", v)} />
            <FField label="Inflación (gastos)" suffix="%" value={d.inflacionPct} onChange={(v) => set("inflacionPct", v)} />
            <FField label="Impuesto de renta" suffix="%" value={d.taxPct} onChange={(v) => set("taxPct", v)} />
          </div>
          <div className="mt-6 font-mono text-[11px] uppercase tracking-[0.16em] text-amber-600">Políticas de capital de trabajo (NOF)</div>
          <div className="mt-3 grid gap-4 sm:grid-cols-4">
            <FField label="Días de cartera" suffix="días" value={d.nof.diasCartera} onChange={(v) => set("nof.diasCartera", v)} />
            <FField label="Días de inventario" suffix="días" value={d.nof.diasInventario} onChange={(v) => set("nof.diasInventario", v)} />
            <FField label="Días de proveedores" suffix="días" value={d.nof.diasProveedores} onChange={(v) => set("nof.diasProveedores", v)} />
            <FField label="Caja mínima" suffix="días de gasto" value={d.nof.cajaMinDias} onChange={(v) => set("nof.cajaMinDias", v)} />
          </div>
          {R && <div className="mt-5 overflow-x-auto rounded-xl ring-1 ring-taupe-200">
            <table className="w-full min-w-[560px] text-sm">
              <thead><tr className="bg-taupe-50 font-mono text-[10px] uppercase text-taupe-500"><th className="px-4 py-2.5 text-left">Proyección (M)</th>{R.anos.map((a) => <th key={a.t} className="px-3 py-2.5 text-right">Año {a.t}</th>)}</tr></thead>
              <tbody>
                {[["Ingresos", "ingresos"], ["EBITDA", "ebitda"], ["Flujo de caja libre", "fclProyecto"]].map(([l, k], i) => (
                  <tr key={k} className={`border-t border-taupe-100 ${i === 2 ? "bg-amber-50/60 font-bold" : ""}`}><td className="px-4 py-2 font-semibold text-taupe-800">{l}</td>
                    {R.anos.map((a) => <td key={a.t} className={`px-3 py-2 text-right font-mono ${a[k] < 0 ? "text-red-600" : "text-taupe-800"}`}>{(a[k] / M).toLocaleString("es-CO", { maximumFractionDigits: 0 })}</td>)}</tr>))}
              </tbody>
            </table>
          </div>}
        </FCard>}
        {step === 3 && R && <ResultadosViabilidad R={R} d={d} />}
        <div className="mt-6 flex items-center justify-between">
          <FBtn dark={false} onClick={() => setStep((s) => Math.max(0, s - 1))} className={step === 0 ? "invisible" : ""}><Icon name="ChevronLeft" size={16} /> Anterior</FBtn>
          {step < 3
            ? <FBtn onClick={() => setStep((s) => s + 1)}>Siguiente <Icon name="ChevronRight" size={16} /></FBtn>
            : <AmberBtn onClick={() => onSave({ nombre: d.nombre, sector: d.sector, datos: escalar(d) })} disabled={guardando}>{guardando ? "Guardando…" : <><Icon name="Save" size={16} /> Guardar y continuar</>}</AmberBtn>}
        </div>
      </div>
    );
  }
  function Stepper({ pasos, step, setStep }) {
    return (
      <div className="flex flex-wrap items-center gap-1.5">
        {pasos.map((l, i) => (
          <button key={l} onClick={() => setStep(i)} className={`flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-bold transition
            ${i === step ? "bg-taupe-900 text-white" : i < step ? "bg-emerald-100 text-emerald-700" : "bg-taupe-100 text-taupe-500"}`}>
            {i < step ? <Icon name="Check" size={13} /> : <span className="font-mono">{i + 1}</span>} {l}
          </button>))}
      </div>
    );
  }

  function ResultadosViabilidad({ R, d }) {
    const v = R.veredicto;
    const tone = { verde: ["bg-emerald-50 ring-emerald-200", "bg-emerald-600"], amarillo: ["bg-amber-50 ring-amber-200", "bg-amber-500"], rojo: ["bg-red-50 ring-red-200", "bg-red-600"] }[v.nivel];
    return (
      <div className="mt-5 grid gap-5">
        <div className={`flex flex-wrap items-center justify-between gap-4 rounded-2xl p-6 ring-1 ${tone[0]}`}>
          <div className="flex items-center gap-4">
            <span className={`grid h-14 w-14 place-items-center rounded-2xl text-white ${tone[1]}`}><Icon name={v.nivel === "rojo" ? "AlertTriangle" : "Award"} size={26} /></span>
            <div>
              <div className="text-2xl font-extrabold tracking-tight text-taupe-900">{v.titulo}</div>
              <div className="max-w-xl text-sm text-taupe-600">{v.detalle}</div>
            </div>
          </div>
          <div className="text-right">
            <div className="font-mono text-[10px] uppercase text-taupe-400">Score de financiabilidad</div>
            <div className="text-3xl font-extrabold text-taupe-900">{R.score}<span className="text-base text-taupe-400">/100</span></div>
          </div>
        </div>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <KPI k="VPN" v={mm(R.vpn)} d={R.vpn >= 0 ? "crea valor" : "destruye valor"} ok={R.vpn >= 0} />
          <KPI k="TIR" v={pct(R.tir)} d={`vs WACC ${pct(R.W.wacc)}`} ok={R.tir !== null && R.tir > R.W.wacc} />
          <KPI k="Payback descontado" v={R.paybackDesc ? R.paybackDesc.toFixed(1) + " años" : "> horizonte"} d="recuperación de la inversión" ok={!!R.paybackDesc} />
          <KPI k="Beneficio / Costo" v={R.bc ? R.bc.toFixed(2) : "—"} d="por cada $1 invertido" ok={R.bc >= 1} />
        </div>
        <div className="grid gap-5 lg:grid-cols-2">
          <FCard className="p-6">
            <div className="mb-3 flex items-center justify-between"><h3 className="font-extrabold text-taupe-900">Flujo de caja del proyecto</h3><span className="font-mono text-[10px] uppercase text-taupe-400">millones COP</span></div>
            <ChartFlujos data={[{ t: "Año 0", fcl: -R.inversionTotal / M, acum: -R.inversionTotal / M }, ...R.anos.map((a, i) => ({ t: "A" + a.t, fcl: a.fclProyecto / M, acum: R.flowsProyecto.slice(0, i + 2).reduce((s, x) => s + x, 0) / M }))]} />
          </FCard>
          <FCard className="p-6">
            <div className="mb-3 flex items-center justify-between"><h3 className="font-extrabold text-taupe-900">Perfil del VPN</h3><span className="font-mono text-[10px] uppercase text-taupe-400">con y sin valor de continuidad</span></div>
            <ChartPerfilVPN perfil={R.perfilVPN.map((p) => ({ ...p, vpn: p.vpn / M, vpnVT: p.vpnVT / M }))} wacc={R.W.wacc} tir={R.tir} />
          </FCard>
        </div>
        <div className="grid gap-5 lg:grid-cols-3">
          <FCard className="p-6">
            <h3 className="font-extrabold text-taupe-900">Escenarios</h3>
            <div className="mt-3 grid gap-2">
              {[["Pesimista", R.escenarios.pesimista, "rojo"], ["Base", R.escenarios.base, "taupe"], ["Optimista", R.escenarios.optimista, "verde"]].map(([l, e2, t]) => (
                <div key={l} className="flex items-center justify-between rounded-lg bg-taupe-50 px-3.5 py-2.5 ring-1 ring-taupe-100">
                  <span className="text-sm font-semibold text-taupe-800">{l}</span>
                  <span className={`font-mono text-sm font-bold ${e2.vpn >= 0 ? "text-emerald-700" : "text-red-600"}`}>VPN {mm(e2.vpn)} · TIR {pct(e2.tir)}</span>
                </div>))}
            </div>
          </FCard>
          <FCard className="p-6">
            <h3 className="font-extrabold text-taupe-900">Sensibilidad del VPN</h3>
            <div className="mt-1 text-[11px] text-taupe-400">Ingresos (columnas) × WACC (filas)</div>
            <table className="mt-2 w-full text-center font-mono text-[11px]">
              <thead><tr><th></th>{R.ejeIng.map((x) => <th key={x} className="py-1 text-taupe-500">{x > 0 ? "+" : ""}{x}%</th>)}</tr></thead>
              <tbody>{R.sensibilidad.map((fila, i) => (
                <tr key={i}><td className="pr-1 text-taupe-500">{R.ejeWacc[i] > 0 ? "+" : ""}{R.ejeWacc[i]}pt</td>
                  {fila.map((v2, j2) => <td key={j2}><span className={`inline-block w-full rounded px-1 py-1 font-bold ${v2 >= 0 ? "bg-emerald-50 text-emerald-700" : "bg-red-50 text-red-600"}`}>{Math.round(v2 / M)}</span></td>)}</tr>))}
              </tbody>
            </table>
          </FCard>
          <FCard className="p-6">
            <h3 className="font-extrabold text-taupe-900">Estructura y servicio de deuda</h3>
            <div className="mt-3 grid gap-2 text-sm">
              <div className="flex justify-between"><span className="text-taupe-600">Aporte propio</span><b className="font-mono">{mm(R.equity)}</b></div>
              <div className="flex justify-between"><span className="text-taupe-600">Crédito</span><b className="font-mono">{mm(R.deuda)}</b></div>
              <div className="flex justify-between"><span className="text-taupe-600">Punto de equilibrio (ventas año 1)</span><b className="font-mono">{mm(R.breakEvenVentas)}</b></div>
              <div className="flex justify-between"><span className="text-taupe-600">DSCR mínimo</span><b className="font-mono">{(() => { const m2 = Math.min(...R.anos.map((a) => a.dscr ?? 99)); return m2 === 99 ? "sin deuda" : m2.toFixed(2) + "x"; })()}</b></div>
              <div className="flex justify-between"><span className="text-taupe-600">TIR del inversionista</span><b className="font-mono">{pct(R.tirInv)}</b></div>
              <div className="flex justify-between"><span className="text-taupe-600">VPN con continuidad</span><b className="font-mono">{mm(R.vpnVT)}</b></div>
            </div>
          </FCard>
        </div>
      </div>
    );
  }

  /* ---------------- WIZARD: DIAGNÓSTICO / EVA / VALORACIÓN (con importación) ---------------- */
  const B0 = { disponible: 0, inversionesCP: 0, cartera: 0, inventarios: 0, otrosAC: 0, activoFijoNeto: 0, otrosANC: 0, oblFinCP: 0, proveedores: 0, cxpOperativas: 0, impuestosPorPagar: 0, otrosPC: 0, oblFinLP: 0, otrosPNC: 0, patrimonio: 0 };
  const G0 = { ventas: 0, costoVentas: 0, gastosAdmin: 0, gastosVentas: 0, depreciaciones: 0, gastosFinancieros: 0, otrosIngresos: 0, otrosEgresos: 0, impuestos: 0 };
  const LBL_B = { disponible: "Caja y bancos", inversionesCP: "Inversiones temporales", cartera: "Cartera (clientes)", inventarios: "Inventarios", otrosAC: "Otros activos corrientes", activoFijoNeto: "Activo fijo neto", otrosANC: "Otros activos LP", oblFinCP: "Obligaciones fin. CP", proveedores: "Proveedores", cxpOperativas: "Cuentas por pagar", impuestosPorPagar: "Impuestos por pagar", otrosPC: "Otros pasivos CP", oblFinLP: "Obligaciones fin. LP", otrosPNC: "Otros pasivos LP", patrimonio: "Patrimonio" };
  const LBL_G = { ventas: "Ventas / ingresos", costoVentas: "Costo de ventas", gastosAdmin: "Gastos de administración", gastosVentas: "Gastos de ventas", depreciaciones: "Depreciación y amortización", gastosFinancieros: "Gastos financieros", otrosIngresos: "Otros ingresos", otrosEgresos: "Otros egresos", impuestos: "Impuesto de renta" };

  function WizardDiagnostico({ proyecto, onSave, guardando }) {
    const init = Object.keys(proyecto.datos || {}).length ? proyecto.datos : { sector: "Comercial", periodos: [{ nombre: String(new Date().getFullYear() - 1), balance: { ...B0 }, pyg: { ...G0 } }, { nombre: String(new Date().getFullYear()), balance: { ...B0 }, pyg: { ...G0 } }] };
    const [d, setD] = useState(init);
    const [pi, setPi] = useState(d.periodos.length - 1);
    const R = useMemo(() => { try { return E.diagnostico(escala(d)); } catch (e) { return null; } }, [d]);
    function escala(x) { const c = JSON.parse(JSON.stringify(x)); c.periodos.forEach((p) => { Object.keys(p.balance).forEach((k) => p.balance[k] *= M); Object.keys(p.pyg).forEach((k) => p.pyg[k] *= M); }); return c; }
    const setB = (grupo, k, v) => setD((s) => { const c = JSON.parse(JSON.stringify(s)); c.periodos[pi][grupo][k] = v || 0; return c; });
    const aplicarImport = (arr) => setD((s) => {
      const c = JSON.parse(JSON.stringify(s));
      arr.slice(0, c.periodos.length).forEach((imp, i) => {
        const t = c.periodos.length - arr.length + i;
        Object.entries(imp.balance).forEach(([k, v]) => c.periodos[t].balance[k] = Math.round(v / M * 100) / 100);
        Object.entries(imp.pyg).forEach(([k, v]) => c.periodos[t].pyg[k] = Math.round(v / M * 100) / 100);
      });
      return c;
    });
    return (
      <div className="grid gap-5">
        <FileImport periodos={d.periodos.length} onApply={aplicarImport} />
        <FCard className="p-6">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div className="flex items-center gap-2">
              {d.periodos.map((p, i) => (
                <button key={i} onClick={() => setPi(i)} className={`rounded-full px-3.5 py-1.5 text-xs font-bold ${i === pi ? "bg-taupe-900 text-white" : "bg-taupe-100 text-taupe-600"}`}>{p.nombre}</button>))}
            </div>
            <label className="block"><select value={d.sector} onChange={(e) => setD({ ...d, sector: e.target.value })} className="rounded-xl bg-taupe-50 px-3 py-2 text-sm font-bold text-taupe-900 ring-1 ring-taupe-200 outline-none">{SECTORES.map((s) => <option key={s}>{s}</option>)}</select></label>
          </div>
          <div className="mt-5 grid gap-6 lg:grid-cols-2">
            <div>
              <div className="font-mono text-[11px] uppercase tracking-[0.16em] text-amber-600">Balance general · {d.periodos[pi].nombre} (M COP)</div>
              <div className="mt-3 grid gap-3 sm:grid-cols-2">{Object.keys(B0).map((k) => <FField key={k} label={LBL_B[k]} suffix="M" value={d.periodos[pi].balance[k]} onChange={(v) => setB("balance", k, v)} />)}</div>
            </div>
            <div>
              <div className="font-mono text-[11px] uppercase tracking-[0.16em] text-amber-600">Estado de resultados · {d.periodos[pi].nombre} (M COP)</div>
              <div className="mt-3 grid gap-3 sm:grid-cols-2">{Object.keys(G0).map((k) => <FField key={k} label={LBL_G[k]} suffix="M" value={d.periodos[pi].pyg[k]} onChange={(v) => setB("pyg", k, v)} />)}</div>
            </div>
          </div>
        </FCard>
        {R && <ResultadosDiagnostico R={R} />}
        <div className="flex justify-end"><AmberBtn onClick={() => onSave({ nombre: proyecto.nombre, sector: d.sector, datos: escala(d) })} disabled={guardando}>{guardando ? "Guardando…" : <><Icon name="Save" size={16} /> Guardar y continuar</>}</AmberBtn></div>
      </div>
    );
  }
  function ResultadosDiagnostico({ R }) {
    const i = R.indicadores[R.indicadores.length - 1];
    const semTone = (s) => ({ verde: "verde", amarillo: "amarillo", rojo: "rojo", gris: "taupe" }[s]);
    return (
      <div className="grid gap-5">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {[["Liquidez", "liquidez", `Razón corriente ${i.razonCorriente?.toFixed(2) ?? "—"}`], ["Endeudamiento", "endeudamiento", `${pct(i.endeudamiento)} del activo`], ["Rentabilidad", "rentabilidad", `Margen EBITDA ${pct(i.margenEbitda)}`], ["Actividad", "actividad", `Ciclo de caja ${i.cicloCaja?.toFixed(0) ?? "—"} días`]].map(([l, k, dsc]) => (
            <FCard key={k} className="p-5">
              <div className="flex items-center justify-between"><div className="font-mono text-[10px] uppercase tracking-wide text-taupe-400">{l}</div><Dot tone={R.semaforos[k]} /></div>
              <div className="mt-1.5 text-lg font-extrabold text-taupe-900 capitalize">{R.semaforos[k]}</div>
              <div className="text-xs text-taupe-500">{dsc}</div>
            </FCard>))}
        </div>
        <FCard className="p-6">
          <div className="flex items-center justify-between"><h3 className="font-extrabold text-taupe-900">Salud financiera</h3><div className="text-2xl font-extrabold text-taupe-900">{R.scoreSalud}<span className="text-sm text-taupe-400">/100</span></div></div>
          <div className="mt-2"><Bar pctv={R.scoreSalud} tone={R.scoreSalud >= 70 ? "verde" : R.scoreSalud >= 45 ? "amber" : "rojo"} /></div>
          <div className="mt-5 grid gap-3">
            {R.conclusiones.map((c, ix) => (
              <div key={ix} className={`rounded-xl p-4 ring-1 ${c.ok ? "bg-emerald-50/70 ring-emerald-200" : "bg-red-50/70 ring-red-200"}`}>
                <div className="flex items-center gap-2 text-sm font-bold text-taupe-900"><Icon name={c.ok ? "CheckCircle2" : "AlertTriangle"} size={15} className={c.ok ? "text-emerald-600" : "text-red-600"} />{c.area}</div>
                <p className="mt-1 text-[13px] leading-relaxed text-taupe-700">{c.texto}</p>
              </div>))}
          </div>
        </FCard>
      </div>
    );
  }

  function WizardEVA({ proyecto, onSave, guardando }) {
    const [d, setD] = useState(() => Object.keys(proyecto.datos || {}).length ? proyecto.datos : { utilOperacional: 200, taxPct: 35, pasivosOperativos: 100, pasivoFinanciero: 300, patrimonio: 500, tasaDeudaEA: 18, kePct: 22 });
    const R = useMemo(() => { try { return E.eva({ ...d, utilOperacional: d.utilOperacional * M, pasivosOperativos: d.pasivosOperativos * M, pasivoFinanciero: d.pasivoFinanciero * M, patrimonio: d.patrimonio * M }); } catch (e) { return null; } }, [d]);
    return (
      <div className="grid gap-5">
        <FCard className="p-7">
          <div className="grid gap-4 sm:grid-cols-3">
            <FField label="Utilidad operacional (año)" suffix="M" value={d.utilOperacional} onChange={(v) => setD({ ...d, utilOperacional: v })} />
            <FField label="Pasivos operativos" suffix="M" value={d.pasivosOperativos} onChange={(v) => setD({ ...d, pasivosOperativos: v })} hint="proveedores, CxP sin costo" />
            <FField label="Pasivo financiero" suffix="M" value={d.pasivoFinanciero} onChange={(v) => setD({ ...d, pasivoFinanciero: v })} />
            <FField label="Patrimonio" suffix="M" value={d.patrimonio} onChange={(v) => setD({ ...d, patrimonio: v })} />
            <FField label="Costo de la deuda" suffix="% EA" value={d.tasaDeudaEA} onChange={(v) => setD({ ...d, tasaDeudaEA: v })} />
            <FField label="Costo de oportunidad (Ke)" suffix="%" value={d.kePct} onChange={(v) => setD({ ...d, kePct: v })} />
          </div>
        </FCard>
        {R && <>
          <div className={`flex flex-wrap items-center justify-between gap-4 rounded-2xl p-6 ring-1 ${R.eva >= 0 ? "bg-emerald-50 ring-emerald-200" : "bg-red-50 ring-red-200"}`}>
            <div className="flex items-center gap-4">
              <span className={`grid h-14 w-14 place-items-center rounded-2xl text-white ${R.eva >= 0 ? "bg-emerald-600" : "bg-red-600"}`}><Icon name={R.eva >= 0 ? "TrendingUp" : "TrendingDown"} size={26} /></span>
              <div><div className="text-2xl font-extrabold tracking-tight text-taupe-900">{R.veredicto.titulo}</div><div className="max-w-xl text-sm text-taupe-600">{R.veredicto.detalle}</div></div>
            </div>
            <div className="text-right"><div className="font-mono text-[10px] uppercase text-taupe-400">EVA anual</div><div className={`text-3xl font-extrabold ${R.eva >= 0 ? "text-emerald-700" : "text-red-600"}`}>{mm(R.eva)}</div></div>
          </div>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <KPI k="UODI" v={mm(R.uodi)} d="utilidad operativa después de imp." />
            <KPI k="Capital empleado" v={mm(R.capitalEmpleado)} d="con costo (deuda + patrimonio)" />
            <KPI k="ROCE" v={pct(R.roce)} d="retorno sobre capital empleado" ok={R.spread >= 0} />
            <KPI k="WACC" v={pct(R.wacc)} d={`spread ${pct(R.spread)}`} ok={R.spread >= 0} />
          </div>
          <FCard className="p-6">
            <h3 className="font-extrabold text-taupe-900">Palancas para crear más valor</h3>
            <div className="mt-3 grid gap-3 sm:grid-cols-2">
              {R.palancas.map((p2) => (
                <div key={p2.p} className="rounded-xl bg-taupe-50 p-4 ring-1 ring-taupe-100">
                  <div className="text-sm font-bold text-taupe-900">{p2.p}</div>
                  <div className="text-[13px] text-taupe-600">{p2.como}</div>
                </div>))}
            </div>
          </FCard>
        </>}
        <div className="flex justify-end"><AmberBtn onClick={() => onSave({ nombre: proyecto.nombre, datos: { ...d, utilOperacional: d.utilOperacional * M, pasivosOperativos: d.pasivosOperativos * M, pasivoFinanciero: d.pasivoFinanciero * M, patrimonio: d.patrimonio * M } })} disabled={guardando}>{guardando ? "Guardando…" : <><Icon name="Save" size={16} /> Guardar y continuar</>}</AmberBtn></div>
      </div>
    );
  }

  function WizardPresupuesto({ proyecto, onSave, guardando }) {
    const [d, setD] = useState(() => Object.keys(proyecto.datos || {}).length ? proyecto.datos : { sector: "Comercial", ventasAno: 1200, costoPct: 55, mpPct: 30, moPct: 15, cifPct: 10, nominaMes: 18, factorPrestacional: 1.52, gastosFijosMes: 14, gastosVarPct: 3, depreciacionMes: 3, diasCartera: 30, diasProveedores: 20, cajaInicial: 30, carteraInicial: 0, impuestosAno: 35, mesImpuestos: 4, servicioDeudaMes: 0, estacionalidad: [0.8, 0.8, 0.9, 1, 1, 1.1, 1.1, 1, 1.1, 1.1, 1, 1.9] });
    const R = useMemo(() => { try { return E.presupuesto({ ...d, ventasAno: d.ventasAno * M, nominaMes: d.nominaMes * M, gastosFijosMes: d.gastosFijosMes * M, depreciacionMes: d.depreciacionMes * M, cajaInicial: d.cajaInicial * M, carteraInicial: d.carteraInicial * M, impuestosAno: d.impuestosAno * M, servicioDeudaMes: d.servicioDeudaMes * M }); } catch (e) { return null; } }, [d]);
    const MESES = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"];
    return (
      <div className="grid gap-5">
        <FCard className="p-7">
          <div className="grid gap-4 sm:grid-cols-3">
            <label className="block"><span className="mb-1.5 block text-sm font-semibold text-taupe-800">Sector del presupuesto</span>
              <select value={d.sector} onChange={(e) => setD({ ...d, sector: e.target.value })} className="w-full rounded-xl bg-taupe-50 px-3.5 py-3 text-[15px] font-bold text-taupe-900 ring-1 ring-taupe-200 outline-none">{["Comercial", "Industrial", "Servicios"].map((s) => <option key={s}>{s}</option>)}</select></label>
            <FField label="Ventas del año" suffix="M" value={d.ventasAno} onChange={(v) => setD({ ...d, ventasAno: v })} />
            {d.sector === "Industrial"
              ? <div className="grid grid-cols-3 gap-2">
                <FField label="MP" suffix="%" value={d.mpPct} onChange={(v) => setD({ ...d, mpPct: v })} hint="materia prima" />
                <FField label="MO" suffix="%" value={d.moPct} onChange={(v) => setD({ ...d, moPct: v })} hint="mano de obra" />
                <FField label="CIF" suffix="%" value={d.cifPct} onChange={(v) => setD({ ...d, cifPct: v })} />
              </div>
              : <FField label={d.sector === "Comercial" ? "Costo de mercancía" : "Costo del servicio"} suffix="% ventas" value={d.costoPct} onChange={(v) => setD({ ...d, costoPct: v })} />}
            <FField label="Nómina mensual (básica)" suffix="M" value={d.nominaMes} onChange={(v) => setD({ ...d, nominaMes: v })} />
            <FField label="Factor prestacional" suffix="x" value={d.factorPrestacional} step={0.01} onChange={(v) => setD({ ...d, factorPrestacional: v })} hint="1.52 = prestaciones CO" />
            <FField label="Gastos fijos mensuales" suffix="M" value={d.gastosFijosMes} onChange={(v) => setD({ ...d, gastosFijosMes: v })} />
            <FField label="Gastos variables" suffix="% ventas" value={d.gastosVarPct} onChange={(v) => setD({ ...d, gastosVarPct: v })} />
            <FField label="Días de cartera" suffix="días" value={d.diasCartera} onChange={(v) => setD({ ...d, diasCartera: v })} />
            <FField label="Días de proveedores" suffix="días" value={d.diasProveedores} onChange={(v) => setD({ ...d, diasProveedores: v })} />
            <FField label="Caja inicial" suffix="M" value={d.cajaInicial} onChange={(v) => setD({ ...d, cajaInicial: v })} />
            <FField label="Impuestos del año (pago)" suffix="M" value={d.impuestosAno} onChange={(v) => setD({ ...d, impuestosAno: v })} />
            <FField label="Servicio de deuda mensual" suffix="M" value={d.servicioDeudaMes} onChange={(v) => setD({ ...d, servicioDeudaMes: v })} />
          </div>
          <div className="mt-5">
            <div className="mb-2 flex items-center justify-between"><span className="text-sm font-semibold text-taupe-800">Estacionalidad de ventas (peso por mes)</span><span className="font-mono text-[10px] text-taupe-400">ajusta los picos de tu negocio</span></div>
            <div className="grid grid-cols-6 gap-2 sm:grid-cols-12">
              {d.estacionalidad.map((v, i) => (
                <label key={i} className="block text-center">
                  <input type="number" step="0.1" value={v} onChange={(e) => { const c = [...d.estacionalidad]; c[i] = parseFloat(e.target.value) || 0; setD({ ...d, estacionalidad: c }); }}
                    className="w-full rounded-lg bg-taupe-50 px-1 py-1.5 text-center font-mono text-xs font-bold text-taupe-900 ring-1 ring-taupe-200 outline-none focus:ring-amber-400" />
                  <span className="font-mono text-[9px] uppercase text-taupe-400">{MESES[i]}</span>
                </label>))}
            </div>
          </div>
        </FCard>
        {R && <>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <KPI k="Ventas presupuestadas" v={mm(R.totalPyg.ventas)} d="año completo" />
            <KPI k="EBITDA presupuestado" v={mm(R.totalPyg.ebitda)} d={`margen ${pct(R.margenEbitda)}`} ok={R.margenEbitda >= 0.08} />
            <KPI k="Saldo mínimo de caja" v={mm(R.saldoMinimo)} d="mes más apretado" ok={R.saldoMinimo >= 0} />
            <KPI k="Cupo de crédito sugerido" v={R.necesidadCredito ? mm(R.necesidadCredito * 1.1) : "No requiere"} d="para cubrir valles de caja" ok={!R.necesidadCredito} />
          </div>
          <FCard className="p-6">
            <div className="mb-3 flex items-center justify-between"><h3 className="font-extrabold text-taupe-900">Flujo de caja mensual</h3><span className="font-mono text-[10px] uppercase text-taupe-400">millones COP</span></div>
            <ChartFlujos data={R.caja.map((c, i) => ({ t: MESES[i], fcl: c.neto / M, acum: c.saldo / M }))} />
            {R.alertas.length > 0 && <div className="mt-4 grid gap-2">{R.alertas.map((a, i) => (
              <div key={i} className="flex items-start gap-2 rounded-xl bg-amber-50 px-4 py-3 text-[13px] text-taupe-800 ring-1 ring-amber-200"><Icon name="AlertTriangle" size={15} className="mt-0.5 shrink-0 text-amber-600" />{a}</div>))}</div>}
          </FCard>
        </>}
        <div className="flex justify-end"><AmberBtn onClick={() => onSave({ nombre: proyecto.nombre, sector: d.sector, datos: { ...d, ventasAno: d.ventasAno * M, nominaMes: d.nominaMes * M, gastosFijosMes: d.gastosFijosMes * M, depreciacionMes: d.depreciacionMes * M, cajaInicial: d.cajaInicial * M, carteraInicial: d.carteraInicial * M, impuestosAno: d.impuestosAno * M, servicioDeudaMes: d.servicioDeudaMes * M } })} disabled={guardando}>{guardando ? "Guardando…" : <><Icon name="Save" size={16} /> Guardar y continuar</>}</AmberBtn></div>
      </div>
    );
  }

  function WizardValoracion({ proyecto, onSave, guardando }) {
    const [d, setD] = useState(() => Object.keys(proyecto.datos || {}).length ? proyecto.datos : { sector: "Comercial", horizonte: 5, ventasActuales: 2300, margenEbitdaPct: 15, crecPct: 8, capexPctVentas: 3, ktnoPctVentas: 12, depPctVentas: 3, taxPct: 35, deudaPct: 40, tasaDeudaEA: 16, kePct: 24, gPerpetuo: 3, deudaFinanciera: 450, cajaExcedente: 60 });
    const R = useMemo(() => { try { return E.valoracion({ ...d, ventasActuales: d.ventasActuales * M, deudaFinanciera: d.deudaFinanciera * M, cajaExcedente: d.cajaExcedente * M }); } catch (e) { return null; } }, [d]);
    return (
      <div className="grid gap-5">
        <FileImport periodos={1} onApply={(arr) => { const im = arr[arr.length - 1]; if (!im) return; const v = (im.pyg.ventas || 0) / M; const ebitda = ((im.pyg.ventas || 0) - (im.pyg.costoVentas || 0) - (im.pyg.gastosAdmin || 0) - (im.pyg.gastosVentas || 0)) / M; setD((s) => ({ ...s, ventasActuales: Math.round(v), margenEbitdaPct: v ? Math.round(ebitda / v * 100) : s.margenEbitdaPct, deudaFinanciera: Math.round(((im.balance.oblFinCP || 0) + (im.balance.oblFinLP || 0)) / M), cajaExcedente: Math.round((im.balance.disponible || 0) / M) })); }} />
        <FCard className="p-7">
          <div className="grid gap-4 sm:grid-cols-3">
            <label className="block"><span className="mb-1.5 block text-sm font-semibold text-taupe-800">Sector</span>
              <select value={d.sector} onChange={(e) => setD({ ...d, sector: e.target.value })} className="w-full rounded-xl bg-taupe-50 px-3.5 py-3 text-[15px] font-bold text-taupe-900 ring-1 ring-taupe-200 outline-none">{SECTORES.map((s) => <option key={s}>{s}</option>)}</select></label>
            <FField label="Ventas últimos 12 meses" suffix="M" value={d.ventasActuales} onChange={(v) => setD({ ...d, ventasActuales: v })} />
            <FField label="Margen EBITDA" suffix="%" value={d.margenEbitdaPct} onChange={(v) => setD({ ...d, margenEbitdaPct: v })} />
            <FField label="Crecimiento esperado" suffix="%/año" value={d.crecPct} onChange={(v) => setD({ ...d, crecPct: v })} />
            <FField label="Crecimiento a perpetuidad (g)" suffix="%" value={d.gPerpetuo} onChange={(v) => setD({ ...d, gPerpetuo: v })} />
            <FField label="Capex" suffix="% ventas" value={d.capexPctVentas} onChange={(v) => setD({ ...d, capexPctVentas: v })} />
            <FField label="KTNO" suffix="% ventas" value={d.ktnoPctVentas} onChange={(v) => setD({ ...d, ktnoPctVentas: v })} />
            <FField label="Estructura de deuda" suffix="%" value={d.deudaPct} onChange={(v) => setD({ ...d, deudaPct: v })} />
            <FField label="Costo de la deuda" suffix="% EA" value={d.tasaDeudaEA} onChange={(v) => setD({ ...d, tasaDeudaEA: v })} />
            <FField label="Ke (exigencia del dueño)" suffix="%" value={d.kePct} onChange={(v) => setD({ ...d, kePct: v })} />
            <FField label="Deuda financiera actual" suffix="M" value={d.deudaFinanciera} onChange={(v) => setD({ ...d, deudaFinanciera: v })} />
            <FField label="Caja excedente" suffix="M" value={d.cajaExcedente} onChange={(v) => setD({ ...d, cajaExcedente: v })} />
          </div>
        </FCard>
        {R && <>
          <div className="rounded-2xl bg-taupe-900 p-7 text-white">
            <Eyebrow dark>Valor estimado del patrimonio</Eyebrow>
            <div className="mt-3 flex flex-wrap items-end gap-x-10 gap-y-4">
              <div><div className="text-4xl font-extrabold text-amber-400">{mm(R.rango.min)} — {mm(R.rango.max)}</div><div className="mt-1 text-sm text-taupe-300">rango negociable (DCF y múltiplos, ±10%)</div></div>
              <div className="grid grid-cols-2 gap-x-8 gap-y-1 text-sm">
                <span className="text-taupe-300">Por flujo de caja (DCF)</span><b className="font-mono text-right">{mm(R.valorPatrimonio)}</b>
                <span className="text-taupe-300">Por múltiplos ({R.multiplo}x EBITDA)</span><b className="font-mono text-right">{mm(R.patrimonioMultiplos)}</b>
                <span className="text-taupe-300">Valor de las operaciones</span><b className="font-mono text-right">{mm(R.valorOperaciones)}</b>
                <span className="text-taupe-300">(−) Deuda neta</span><b className="font-mono text-right">{mm(R.deudaNeta)}</b>
              </div>
            </div>
          </div>
          <div className="grid gap-5 lg:grid-cols-2">
            <FCard className="p-6">
              <h3 className="font-extrabold text-taupe-900">Flujo de caja libre proyectado</h3>
              <ChartFlujos data={R.anos.map((a) => ({ t: "A" + a.t, fcl: a.fcl / M, acum: R.anos.slice(0, a.t).reduce((s, x) => s + x.fcl, 0) / M }))} />
              <div className="mt-2 text-[11px] text-taupe-400">Peso del valor terminal en el valor total: <b>{pct(R.pesoVT)}</b> · WACC {pct(R.W.wacc)}</div>
            </FCard>
            <FCard className="p-6">
              <h3 className="font-extrabold text-taupe-900">Sensibilidad del valor</h3>
              <div className="mt-1 text-[11px] text-taupe-400">WACC (columnas) × crecimiento g (filas) — patrimonio en M</div>
              <table className="mt-2 w-full text-center font-mono text-[11px]">
                <thead><tr><th></th>{R.ejeW.map((x) => <th key={x} className="py-1 text-taupe-500">{x > 0 ? "+" : ""}{x}pt</th>)}</tr></thead>
                <tbody>{R.sensibilidad.map((fila, i) => (
                  <tr key={i}><td className="pr-1 text-taupe-500">g{R.ejeG[i] > 0 ? "+" : ""}{R.ejeG[i]}</td>
                    {fila.map((v2, j2) => <td key={j2}><span className={`inline-block w-full rounded px-1 py-1 font-bold ${v2 === null ? "bg-taupe-50 text-taupe-300" : v2 >= 0 ? "bg-emerald-50 text-emerald-700" : "bg-red-50 text-red-600"}`}>{v2 === null ? "—" : Math.round(v2 / M)}</span></td>)}</tr>))}
                </tbody>
              </table>
            </FCard>
          </div>
        </>}
        <div className="flex justify-end"><AmberBtn onClick={() => onSave({ nombre: proyecto.nombre, sector: d.sector, datos: { ...d, ventasActuales: d.ventasActuales * M, deudaFinanciera: d.deudaFinanciera * M, cajaExcedente: d.cajaExcedente * M } })} disabled={guardando}>{guardando ? "Guardando…" : <><Icon name="Save" size={16} /> Guardar y continuar</>}</AmberBtn></div>
      </div>
    );
  }

  /* ---------------- FINANCIACIÓN (matching) ---------------- */
  function VistaFinanciacion({ projectId, prices, onPagar }) {
    const [data, setData] = useState(null);
    const [err, setErr] = useState("");
    useEffect(() => { api(`funders?project=${projectId}`).then(setData).catch((e) => setErr(e.message)); }, [projectId]);
    if (err) return <div className="rounded-xl bg-red-50 p-4 text-sm text-red-700 ring-1 ring-red-200">{err}</div>;
    if (!data) return <Cargando texto="Cruzando tu proyecto con la base de financiadores…" />;
    const precioFin = prices.find((p) => p.id === "financiacion");
    return (
      <div className="grid gap-4">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="text-sm text-taupe-600"><b className="text-taupe-900">{data.total}</b> financiadores en base · {data.unlocked ? "acceso completo activo" : "los 3 mejores matches son gratis"}</div>
          {!data.unlocked && <FBtn size="sm" onClick={() => onPagar("financiacion", projectId)}><Icon name="Unlock" size={13} /> Desbloquear todos + dossier · {cop(precioFin?.precio_cop)} COP</FBtn>}
        </div>
        {(data.matches || []).map((f, i) => (
          <FCard key={f.id || i} className={`flex flex-col gap-4 p-5 md:flex-row md:items-center ${f.bloqueado ? "opacity-80" : ""}`}>
            <div className="flex min-w-0 flex-1 items-start gap-4">
              <span className="grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-taupe-900 text-amber-400">
                <Icon name={f.bloqueado ? "Lock" : (f.tipo || "").match(/reembols|cofinan|premio/i) ? "PiggyBank" : (f.tipo || "").match(/cr[eé]dito|deuda/i) ? "Landmark" : "Users"} size={22} />
              </span>
              <div className="min-w-0">
                <div className="flex flex-wrap items-center gap-2">
                  <h3 className={`font-extrabold leading-tight text-taupe-900 ${f.bloqueado ? "blur-[3px] select-none" : ""}`}>{f.bloqueado ? "Financiador compatible" : f.nombre}</h3>
                  {f.estado && !f.bloqueado && <Chip tone={/abiert|permanente/i.test(f.estado) ? "verde" : "taupe"}>{f.estado}</Chip>}
                </div>
                <div className="mt-0.5 flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-taupe-500">
                  <span className="font-semibold text-taupe-700">{f.tipo}</span>
                  {f.paises && <span className="inline-flex items-center gap-1"><Icon name="Globe" size={11} /> {f.paises}</span>}
                  {(f.ticket_min || f.ticket_max) && <span className="inline-flex items-center gap-1"><Icon name="Banknote" size={11} /> {f.ticket_min ? mm(f.ticket_min) : ""}{f.ticket_max ? ` – ${mm(f.ticket_max)}` : "+"} {f.moneda || ""}</span>}
                </div>
                {!f.bloqueado && f.requisitos && <div className="mt-2 flex flex-wrap gap-1.5">{String(f.requisitos).split(";").filter(Boolean).slice(0, 4).map((r) => <span key={r} className="rounded-md bg-taupe-100 px-2 py-0.5 text-[11px] font-medium text-taupe-600 ring-1 ring-taupe-200/70">{r.trim()}</span>)}</div>}
              </div>
            </div>
            <div className="flex shrink-0 items-center gap-5 md:flex-col md:items-end md:gap-1.5">
              <div className="text-right">
                <div className={`text-2xl font-extrabold ${f.score >= 85 ? "text-emerald-600" : f.score >= 70 ? "text-amber-600" : "text-taupe-400"}`}>{f.score}%</div>
                <div className="font-mono text-[9px] uppercase tracking-wide text-taupe-400">compatibilidad</div>
              </div>
              {!f.bloqueado && f.url && <a href={f.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-xs font-bold text-amber-600 hover:text-amber-700">Ver convocatoria <Icon name="ArrowUpRight" size={12} /></a>}
            </div>
          </FCard>))}
        <div className="rounded-2xl bg-taupe-900 p-6 text-white md:p-7">
          <div className="flex flex-wrap items-center justify-between gap-4">
            <div className="max-w-xl">
              <Eyebrow dark>Servicio completo · matching + dossier + postulación</Eyebrow>
              <h3 className="mt-1 text-2xl font-extrabold">Tu proyecto, presentado en lenguaje evaluador</h3>
              <p className="mt-2 text-sm text-taupe-300">El equipo 3H prepara tu dossier inversionista (pitch one-pager + informe + proyecciones en el formato que cada fondo exige) y te acompaña en la postulación. Los proyectos llegan listos para aprobar.</p>
            </div>
            <AmberBtn onClick={() => onPagar("financiacion", projectId)}>Preparar mi postulación</AmberBtn>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- INFORME (imprimible, con narrativa IA) ---------------- */
  function VistaInforme({ proyecto, user, prices, onPagar }) {
    const [rep, setRep] = useState(null);
    const [err, setErr] = useState(null);
    const [busy, setBusy] = useState(true);
    useEffect(() => {
      api(`report/${proyecto.id}`, { method: "POST" }).then((d) => { setRep(d); setBusy(false); })
        .catch((e) => { setErr(e); setBusy(false); });
    }, [proyecto.id]);
    const R = proyecto.resultados;
    const precio = prices.find((p) => p.id === (proyecto.tipo === "financiacion" ? "financiacion" : proyecto.tipo));
    const fecha = new Date().toLocaleDateString("es-CO", { year: "numeric", month: "long", day: "numeric" });
    if (busy) return <Cargando texto="Preparando tu informe…" />;
    const bloqueado = err && err.status === 402;
    return (
      <div>
        <div className="mb-4 flex flex-wrap items-center justify-between gap-3 print:hidden">
          <h2 className="text-2xl font-extrabold tracking-tight text-taupe-900">Informe · {proyecto.nombre}</h2>
          <div className="flex gap-2">
            {!bloqueado && <FBtn onClick={() => window.print()}><Icon name="Download" size={15} /> Descargar PDF</FBtn>}
            {bloqueado && <AmberBtn onClick={() => onPagar(proyecto.tipo, proyecto.id)}><Icon name="Lock" size={15} /> Desbloquear informe · {cop(precio?.precio_cop)} COP</AmberBtn>}
          </div>
        </div>
        <div className="overflow-hidden rounded-2xl bg-white ring-1 ring-taupe-200 print:ring-0">
          <div className="border-b-4 border-amber-400 bg-taupe-900 p-8 text-white">
            <div className="flex items-center justify-between">
              <span className="grid h-10 w-10 place-items-center rounded-xl bg-white/10 font-black text-amber-400">3H</span>
              <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-taupe-400">{rep?.numero || "Vista previa"} · Confidencial</span>
            </div>
            <h3 className="mt-6 text-2xl font-extrabold">{({ viabilidad: "Evaluación de Viabilidad Financiera", diagnostico: "Diagnóstico Financiero Integral", eva: "Determinación del EVA", presupuesto: "Presupuesto y Planeación Financiera", valoracion: "Valoración de Empresa" })[proyecto.tipo] || "Informe Financiero"}</h3>
            <div className="text-taupe-300">{proyecto.nombre} · {proyecto.sector} · {fecha}</div>
          </div>
          <div className="p-8">
            {R && proyecto.tipo === "viabilidad" && <ResultadosViabilidad R={R} d={{}} />}
            {R && proyecto.tipo === "diagnostico" && <ResultadosDiagnostico R={R} />}
            {R && proyecto.tipo === "eva" && <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4"><KPI k="EVA" v={mm(R.eva)} ok={R.eva >= 0} /><KPI k="UODI" v={mm(R.uodi)} /><KPI k="ROCE" v={pct(R.roce)} ok={R.spread >= 0} /><KPI k="WACC" v={pct(R.wacc)} /></div>}
            {R && proyecto.tipo === "valoracion" && <div className="rounded-2xl bg-taupe-900 p-6 text-white"><Eyebrow dark>Valor estimado del patrimonio</Eyebrow><div className="mt-2 text-3xl font-extrabold text-amber-400">{mm(R.rango?.min)} — {mm(R.rango?.max)}</div></div>}
            {R && proyecto.tipo === "presupuesto" && <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4"><KPI k="Ventas" v={mm(R.totalPyg?.ventas)} /><KPI k="EBITDA" v={mm(R.totalPyg?.ebitda)} d={pct(R.margenEbitda)} /><KPI k="Saldo mín. caja" v={mm(R.saldoMinimo)} ok={R.saldoMinimo >= 0} /><KPI k="Crédito sugerido" v={R.necesidadCredito ? mm(R.necesidadCredito * 1.1) : "N/A"} /></div>}

            <div className="relative mt-8">
              <h4 className="font-mono text-[11px] uppercase tracking-[0.18em] text-amber-600">Análisis y recomendaciones del CFO 3H</h4>
              {bloqueado ? (
                <div className="mt-4 rounded-2xl bg-taupe-50 p-10 text-center ring-1 ring-taupe-200">
                  <span className="mx-auto grid h-12 w-12 place-items-center rounded-full bg-taupe-900 text-amber-400"><Icon name="Lock" size={20} /></span>
                  <div className="mt-3 font-extrabold text-taupe-900">Informe profesional bloqueado</div>
                  <div className="mx-auto mt-1 max-w-sm text-sm text-taupe-500">Análisis del CFO, recomendaciones accionables, sello 3H y PDF descargable.</div>
                  <AmberBtn className="mt-4" onClick={() => onPagar(proyecto.tipo, proyecto.id)}><Icon name="CreditCard" size={16} /> Pagar {cop(precio?.precio_cop)} COP y desbloquear</AmberBtn>
                </div>
              ) : (
                <div className="prose-sm mt-3 max-w-none leading-relaxed text-taupe-800" style={{ whiteSpace: "pre-wrap" }}>
                  {rep?.narrativa || (R?.veredicto ? `**Lectura ejecutiva**\n${R.veredicto.titulo}: ${R.veredicto.detalle}` : "Completa los datos del análisis para generar las recomendaciones.")}
                </div>
              )}
            </div>
            <div className="mt-10 flex items-center justify-between border-t border-taupe-200 pt-5 text-[11px] text-taupe-400">
              <span>3H · treshache.co — desarrollamos proyectos desde 2010</span>
              <span className="font-mono">Documento generado con la metodología 3H · no constituye asesoría de inversión regulada</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const Cargando = ({ texto }) => (
    <div className="grid place-items-center rounded-2xl bg-white p-14 ring-1 ring-taupe-200">
      <div className="h-8 w-8 animate-spin rounded-full border-[3px] border-taupe-200 border-t-amber-500" />
      <div className="mt-3 text-sm font-semibold text-taupe-500">{texto}</div>
    </div>
  );

  /* ---------------- PANEL: mis análisis ---------------- */
  const TIPOS = [
    { id: "viabilidad", n: "Evaluación de viabilidad", icon: "Calculator" },
    { id: "diagnostico", n: "Diagnóstico financiero", icon: "Activity" },
    { id: "presupuesto", n: "Presupuesto y planeación", icon: "Wallet" },
    { id: "eva", n: "EVA — creación de valor", icon: "TrendingUp" },
    { id: "valoracion", n: "Valoración de empresa", icon: "Building2" },
  ];
  function Panel({ user, onPagar }) {
    const [data, setData] = useState(null);
    useEffect(() => { api("projects").then(setData).catch(() => setData({ projects: [] })); }, []);
    if (!data) return <Cargando texto="Cargando tus análisis…" />;
    const pagosDe = (pid) => (data.pagos || []).filter((o) => o.project_id === pid).map((o) => o.servicio);
    return (
      <div>
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div>
            <Eyebrow>Panel del cliente{data.cfo ? " · Plan CFO Virtual activo" : ""}</Eyebrow>
            <h2 className="mt-1 text-3xl font-extrabold tracking-tight text-taupe-900">Mis análisis</h2>
          </div>
          <div className="flex flex-wrap gap-2">{TIPOS.map((t) => <FBtn key={t.id} size="sm" dark={false} onClick={() => goto(`#/financiero/nuevo/${t.id}`)}><Icon name={t.icon} size={13} /> {t.n.split(" ")[0]}</FBtn>)}</div>
        </div>
        {data.projects.length === 0 ? (
          <FCard className="mt-6 p-12 text-center">
            <Icon name="FolderOpen" size={30} className="mx-auto text-taupe-300" />
            <div className="mt-3 text-lg font-extrabold text-taupe-900">Empieza tu primer análisis</div>
            <div className="mx-auto mt-1 max-w-md text-sm text-taupe-500">Evalúa un proyecto, diagnostica tu empresa o arma tu presupuesto. La pre-evaluación siempre es gratuita.</div>
            <div className="mt-5 flex flex-wrap justify-center gap-2">{TIPOS.map((t) => <FBtn key={t.id} onClick={() => goto(`#/financiero/nuevo/${t.id}`)}><Icon name={t.icon} size={14} /> {t.n}</FBtn>)}</div>
          </FCard>
        ) : (
          <div className="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {data.projects.map((p) => {
              const meta = TIPOS.find((t) => t.id === p.tipo) || {};
              const pagado = data.cfo || pagosDe(p.id).includes(p.tipo);
              return (
                <FCard key={p.id} className="flex flex-col p-5">
                  <div className="flex items-start justify-between gap-2">
                    <div className="flex items-center gap-2.5">
                      <span className="grid h-10 w-10 place-items-center rounded-xl bg-taupe-900 text-amber-400"><Icon name={meta.icon || "FileText"} size={18} /></span>
                      <div><h3 className="font-extrabold leading-tight text-taupe-900">{p.nombre}</h3><div className="text-xs text-taupe-500">{meta.n} · {p.sector}</div></div>
                    </div>
                    <Chip tone={pagado ? "verde" : "amarillo"}>{pagado ? "Informe activo" : "Pre-evaluación"}</Chip>
                  </div>
                  <div className="mt-auto flex flex-wrap gap-2 pt-4">
                    <FBtn size="sm" onClick={() => goto(`#/financiero/proyecto/${p.id}`)}><Icon name="Pencil" size={12} /> Editar datos</FBtn>
                    <FBtn size="sm" dark={false} onClick={() => goto(`#/financiero/informe/${p.id}`)}><Icon name="FileText" size={12} /> Informe</FBtn>
                    {p.tipo === "viabilidad" && <FBtn size="sm" dark={false} onClick={() => goto(`#/financiero/financiacion/${p.id}`)}><Icon name="Handshake" size={12} /> Financiación</FBtn>}
                  </div>
                </FCard>
              );
            })}
          </div>
        )}
      </div>
    );
  }

  /* ---------------- PAGO (retorno de Wompi / demo) ---------------- */
  function VistaPago() {
    const [st, setSt] = useState({ estado: "verificando" });
    useEffect(() => {
      const ref = localStorage.getItem("fin_ref");
      if (!ref) { setSt({ estado: "sin-ref" }); return; }
      let intentos = 0;
      const tick = async () => {
        try {
          const d = await api(`orders/status?reference=${encodeURIComponent(ref)}`);
          if (d.status === "APPROVED") { setSt({ estado: "ok", d }); localStorage.removeItem("fin_ref"); return; }
          if (["DECLINED", "ERROR", "VOIDED"].includes(d.status)) { setSt({ estado: "fallo", d }); return; }
        } catch (e) { /* seguir */ }
        if (++intentos < 15) setTimeout(tick, 2500); else setSt({ estado: "timeout" });
      };
      tick();
    }, []);
    return (
      <div className="mx-auto max-w-md py-10">
        <FCard className="p-8 text-center">
          {st.estado === "verificando" && <><div className="mx-auto h-9 w-9 animate-spin rounded-full border-[3px] border-taupe-200 border-t-amber-500" /><div className="mt-4 font-extrabold text-taupe-900">Confirmando tu pago con Wompi…</div><div className="mt-1 text-sm text-taupe-500">Esto toma unos segundos.</div></>}
          {st.estado === "ok" && <><span className="mx-auto grid h-16 w-16 place-items-center rounded-full bg-emerald-100 text-emerald-600"><Icon name="CheckCircle2" size={30} /></span><h3 className="mt-4 text-xl font-extrabold text-taupe-900">¡Pago aprobado!</h3><p className="mt-1 text-sm text-taupe-600">Tu servicio quedó activo.</p><AmberBtn className="mt-5 w-full" onClick={() => goto(st.d?.projectId ? `#/financiero/informe/${st.d.projectId}` : "#/financiero/app")}>Continuar <Icon name="ArrowRight" size={15} /></AmberBtn></>}
          {(st.estado === "fallo" || st.estado === "timeout" || st.estado === "sin-ref") && <><span className="mx-auto grid h-16 w-16 place-items-center rounded-full bg-red-100 text-red-600"><Icon name="AlertTriangle" size={28} /></span><h3 className="mt-4 text-xl font-extrabold text-taupe-900">{st.estado === "fallo" ? "El pago no fue aprobado" : "No pudimos confirmar el pago"}</h3><p className="mt-1 text-sm text-taupe-600">Si el dinero salió de tu cuenta, escríbenos y lo resolvemos de inmediato.</p><FBtn className="mt-5 w-full" onClick={() => goto("#/financiero/app")}>Volver a mi panel</FBtn></>}
        </FCard>
      </div>
    );
  }

  /* ---------------- RAÍZ del módulo ---------------- */
  function Financiero() {
    const [hash, setHash] = useState(location.hash);
    const [user, setUser] = useState(undefined);
    const [prices, setPrices] = useState([]);
    const [trm, setTrm] = useState(4000);
    const [stats, setStats] = useState({});
    const [auth, setAuth] = useState({ open: false, destino: null });
    const [proyecto, setProyecto] = useState(null);
    const [guardando, setGuardando] = useState(false);
    const [aviso, setAviso] = useState("");

    useEffect(() => {
      const f = () => setHash(location.hash);
      window.addEventListener("hashchange", f); return () => window.removeEventListener("hashchange", f);
    }, []);
    useEffect(() => { api("session").then((d) => setUser(d.user)).catch(() => setUser(null)); }, []);
    useEffect(() => { api("prices").then((d) => { setPrices(d.prices || []); setTrm(d.trm || 4000); setStats(d.stats || {}); }).catch(() => { }); }, []);

    const ruta = hash.replace(/^#\/financiero\/?/, "").split("/");
    const vista = ruta[0] || "landing";
    const pid = ruta[1];

    // Cargar proyecto cuando la ruta lo requiere
    useEffect(() => {
      if (["proyecto", "informe", "financiacion"].includes(vista) && pid && user) {
        setProyecto(null);
        api(`projects/${pid}`).then((d) => setProyecto(d.project)).catch(() => setProyecto({ error: true }));
      }
    }, [vista, pid, user]);

    // Crear proyecto nuevo
    useEffect(() => {
      if (vista === "nuevo" && user) {
        const tipo = pid || "viabilidad";
        if (tipo === "cfo" || tipo === "financiacion") { pagar(tipo, null); goto("#/financiero/app"); return; }
        api("projects", { method: "POST", body: { nombre: "Nuevo análisis", tipo, sector: "Otro" } })
          .then((d) => goto(`#/financiero/proyecto/${d.id}`))
          .catch((e) => setAviso(e.message));
      }
      if (vista === "nuevo" && user === null) setAuth({ open: true, destino: hash });
    }, [vista, pid, user]);

    async function pagar(servicio, projectId) {
      try {
        const d = await api("orders", { method: "POST", body: { servicio, projectId } });
        if (d.demo) { setAviso("Pago aprobado (modo demostración — la pasarela Wompi se activa próximamente)."); if (projectId) goto(`#/financiero/informe/${projectId}`); else location.reload(); return; }
        localStorage.setItem("fin_ref", d.reference);
        location.href = d.checkoutUrl;
      } catch (e) {
        if (e.data?.auth) setAuth({ open: true, destino: hash });
        else setAviso(e.message);
      }
    }
    const guardar = async (payload) => {
      setGuardando(true);
      try {
        const d = await api(`projects/${proyecto.id}`, { method: "PUT", body: { ...payload, estado: "calculado" } });
        setProyecto((p) => ({ ...p, ...payload, resultados: d.resultados }));
        goto(`#/financiero/informe/${proyecto.id}`);
      } catch (e) { setAviso(e.message); } finally { setGuardando(false); }
    };

    const NavLink = ({ h, children }) => <button onClick={() => goto(h)} className={`rounded-full px-3.5 py-2 text-sm font-semibold transition ${hash === h ? "bg-taupe-900 text-white" : "text-taupe-600 hover:bg-taupe-100"}`}>{children}</button>;

    return (
      <div className="min-h-screen bg-stone-50 text-taupe-900">
        {/* NAV propio del módulo */}
        <header className="sticky top-0 z-30 border-b border-taupe-200/70 bg-stone-50/90 backdrop-blur print:hidden">
          <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3 sm:px-6">
            <button onClick={() => goto("#/financiero")} className="flex items-center gap-2.5">
              <span className="grid h-9 w-9 place-items-center rounded-xl bg-taupe-900 font-black text-amber-400">3H</span>
              <div className="text-left">
                <div className="text-sm font-extrabold leading-none tracking-tight">FINANCIERO</div>
                <div className="font-mono text-[9px] uppercase tracking-[0.16em] text-taupe-500">by treshache.co</div>
              </div>
            </button>
            <nav className="hidden items-center gap-1 md:flex">
              <NavLink h="#/financiero">Servicios</NavLink>
              {user && <NavLink h="#/financiero/app">Mis análisis</NavLink>}
              <button onClick={() => goto("#/")} className="rounded-full px-3.5 py-2 text-sm font-semibold text-taupe-600 transition hover:bg-taupe-100">Volver a 3H</button>
            </nav>
            <div className="flex items-center gap-2">
              {user === undefined ? null : user ? (
                <div className="flex items-center gap-2">
                  <button onClick={() => goto("#/financiero/app")} className="hidden items-center gap-2 rounded-full bg-white px-3 py-2 text-xs font-bold text-taupe-800 ring-1 ring-taupe-200 sm:flex"><Icon name="User" size={13} /> {user.nombre || user.correo}</button>
                  <FBtn size="sm" dark={false} onClick={async () => { await api("logout", { method: "POST" }); setUser(null); goto("#/financiero"); }}>Salir</FBtn>
                </div>
              ) : (
                <FBtn onClick={() => setAuth({ open: true, destino: "#/financiero/app" })}><Icon name="LogIn" size={15} /> Entrar</FBtn>
              )}
            </div>
          </div>
        </header>

        {aviso && (
          <div className="mx-auto mt-3 max-w-6xl px-6 print:hidden">
            <div className="flex items-center justify-between rounded-xl bg-amber-50 px-4 py-3 text-sm font-semibold text-taupe-800 ring-1 ring-amber-200">
              <span><Icon name="Info" size={14} className="mr-1.5 inline text-amber-600" />{aviso}</span>
              <button onClick={() => setAviso("")} className="text-taupe-400 hover:text-taupe-700"><Icon name="X" size={14} /></button>
            </div>
          </div>
        )}

        <main className={vista === "landing" ? "" : "mx-auto max-w-6xl px-6 py-8"}>
          {vista === "landing" && <Landing prices={prices} trm={trm} stats={stats} user={user} onAuth={(dest) => setAuth({ open: true, destino: dest })} />}
          {vista === "app" && (user ? <Panel user={user} onPagar={pagar} /> : user === null ? <div className="py-10 text-center"><FBtn onClick={() => setAuth({ open: true, destino: "#/financiero/app" })}>Inicia sesión para ver tu panel</FBtn></div> : <Cargando texto="…" />)}
          {vista === "pago" && <VistaPago />}
          {vista === "proyecto" && (proyecto?.error ? <div className="text-taupe-500">Proyecto no encontrado.</div> : !proyecto ? <Cargando texto="Cargando proyecto…" /> : (
            <div>
              <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
                <div>
                  <Eyebrow>{(TIPOS.find((t) => t.id === proyecto.tipo) || {}).n || "Análisis"} · pre-evaluación gratuita</Eyebrow>
                  <input value={proyecto.nombre} onChange={(e) => setProyecto({ ...proyecto, nombre: e.target.value })}
                    className="mt-1 w-full max-w-lg bg-transparent text-3xl font-extrabold tracking-tight text-taupe-900 outline-none placeholder:text-taupe-300" placeholder="Nombre del análisis" />
                </div>
                <FBtn size="sm" dark={false} onClick={() => goto("#/financiero/app")}><Icon name="ChevronLeft" size={13} /> Mis análisis</FBtn>
              </div>
              {proyecto.tipo === "viabilidad" && <WizardViabilidad proyecto={proyecto} onSave={guardar} guardando={guardando} />}
              {proyecto.tipo === "diagnostico" && <WizardDiagnostico proyecto={proyecto} onSave={guardar} guardando={guardando} />}
              {proyecto.tipo === "eva" && <WizardEVA proyecto={proyecto} onSave={guardar} guardando={guardando} />}
              {proyecto.tipo === "presupuesto" && <WizardPresupuesto proyecto={proyecto} onSave={guardar} guardando={guardando} />}
              {proyecto.tipo === "valoracion" && <WizardValoracion proyecto={proyecto} onSave={guardar} guardando={guardando} />}
            </div>
          ))}
          {vista === "informe" && (!proyecto ? <Cargando texto="Cargando informe…" /> : <VistaInforme proyecto={proyecto} user={user} prices={prices} onPagar={pagar} />)}
          {vista === "financiacion" && (!proyecto ? <Cargando texto="Cargando…" /> : (
            <div>
              <div className="mb-5">
                <Eyebrow>Base mundial de financiadores · matching automático</Eyebrow>
                <h2 className="mt-1 text-3xl font-extrabold tracking-tight text-taupe-900">Financiadores para {proyecto.nombre}</h2>
              </div>
              <VistaFinanciacion projectId={proyecto.id} prices={prices} onPagar={pagar} />
            </div>
          ))}
        </main>

        <footer className="mt-12 border-t border-taupe-200/70 bg-stone-50 py-8 print:hidden">
          <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3 px-6">
            <div className="flex items-center gap-2"><span className="grid h-7 w-7 place-items-center rounded-lg bg-taupe-900 text-[11px] font-black text-amber-400">3H</span><span className="text-sm font-bold">Financiero</span></div>
            <div className="font-mono text-[11px] text-taupe-400">© 2026 3H · treshache.co · pagos seguros con Wompi</div>
          </div>
        </footer>

        <AuthModal open={auth.open} destino={auth.destino} onClose={() => setAuth({ open: false })}
          onDone={(u, dest) => { setUser(u); setAuth({ open: false }); if (dest) goto(dest); }} />
      </div>
    );
  }

  /* ---------------- Promo para el sitio público ---------------- */
  function FinPromo() {
    return (
      <section className="border-y border-taupe-200/60 bg-taupe-900 py-16 text-white">
        <div className="mx-auto grid max-w-6xl items-center gap-10 px-6 md:grid-cols-[1.15fr_0.85fr]">
          <div>
            <div className="inline-flex items-center gap-1.5 rounded-full bg-amber-400 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide text-taupe-900"><Icon name="Sparkles" size={13} /> Nuevo</div>
            <h2 className="mt-4 text-3xl font-extrabold leading-tight tracking-tight md:text-4xl">3H Financiero:<br />tu director financiero digital</h2>
            <p className="mt-4 max-w-xl text-lg leading-relaxed text-taupe-200">Evalúa la viabilidad de tu proyecto, diagnostica tu empresa, calcula tu EVA, arma presupuestos profesionales y consigue financiación con nuestra base mundial de fondos e inversionistas.</p>
            <div className="mt-6 flex flex-wrap gap-3">
              <AmberBtn onClick={() => { location.hash = "#/financiero"; }}>Conocer el servicio <Icon name="ArrowRight" size={16} /></AmberBtn>
              <FBtn size="lg" dark={false} onClick={() => { location.hash = "#/financiero/nuevo/viabilidad"; }}>Evaluar mi proyecto gratis</FBtn>
            </div>
          </div>
          <div className="grid gap-2.5">
            {[["Calculator", "Viabilidad de proyectos", "VPN, TIR, sensibilidad y concepto 3H"], ["Activity", "Diagnóstico integral", "18+ indicadores con semáforos y conclusiones"], ["Handshake", "Financiación", "Matching con fondos, ángeles y banca mundial"], ["Building2", "Valoración de empresas", "DCF + múltiplos con rango negociable"]].map(([ic, t, d2]) => (
              <div key={t} className="flex items-center gap-3.5 rounded-xl bg-white/5 p-4 ring-1 ring-white/10">
                <span className="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-amber-400/15 text-amber-300"><Icon name={ic} size={19} /></span>
                <div><div className="text-sm font-bold">{t}</div><div className="text-[12.5px] text-taupe-300">{d2}</div></div>
              </div>))}
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { Financiero, FinPromo });
})();