// V3 DARK blueprints — palette: bg #1d1d1b, ink #ffffff, accent #e94e1b, blue #1f3c90
const INK = "#ffffff";
const BG = "#232321";
const ACC = "#e94e1b";
const BLUE = "#1f3c90";
const G1 = "#8a8780";
const G2 = "#5a5853";
const G3 = "#36342f";

function HeroAtom() {
  return (
    <svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg">
      <g className="atom-ring-cw">
        {Array.from({length:72}).map((_,i)=>{
          const a=(i/72)*Math.PI*2; const r1=218, r2=i%6===0?226:222;
          const x1=240+Math.cos(a)*r1, y1=240+Math.sin(a)*r1;
          const x2=240+Math.cos(a)*r2, y2=240+Math.sin(a)*r2;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={i%6===0?INK:G2} strokeWidth={i%6===0?1:0.6}/>;
        })}
      </g>
      <circle cx="240" cy="240" r="180" fill="none" stroke={INK} strokeWidth="1"/>
      <circle cx="240" cy="240" r="138" fill="none" stroke={INK} strokeWidth="0.6" strokeDasharray="3 4" className="atom-dash"/>
      <g className="atom-ellipse-a"><ellipse cx="240" cy="240" rx="200" ry="90" fill="none" stroke={BLUE} strokeWidth="0.8" transform="rotate(28 240 240)" strokeDasharray="2 3"/></g>
      <g className="atom-ellipse-b"><ellipse cx="240" cy="240" rx="200" ry="90" fill="none" stroke={INK} strokeWidth="0.6" transform="rotate(-28 240 240)" strokeDasharray="2 3"/></g>
      <circle cx="240" cy="240" r="28" fill={INK}/>
      <circle cx="240" cy="240" r="46" fill="none" stroke={INK} className="atom-core-pulse"/>
      <text x="240" y="244" textAnchor="middle" fontFamily="Space Mono" fontWeight="700" fontSize="10" fill="#1d1d1b" letterSpacing="0.15em">ROARK</text>
      <g>
        <g><animateTransform attributeName="transform" type="rotate" from="0 240 240" to="360 240 240" dur="40s" repeatCount="indefinite"/>
          <circle cx="420" cy="240" r="5" fill={ACC}/><circle cx="420" cy="240" r="12" fill="none" stroke={ACC} strokeWidth="0.8"/></g>
        <text x="430" y="236" fontFamily="Space Mono" fontSize="8" fill={G1} letterSpacing="0.1em">DASHBOARD</text>
        <text x="430" y="248" fontFamily="Space Mono" fontSize="8" fill={INK}>128 ACTIVOS</text>
      </g>
      <g><g><animateTransform attributeName="transform" type="rotate" from="0 240 240" to="-360 240 240" dur="55s" repeatCount="indefinite"/><circle cx="120" cy="148" r="4" fill={INK}/></g>
        <text x="108" y="138" fontFamily="Space Mono" fontSize="8" fill={G1} letterSpacing="0.1em">AGENTE·QA</text></g>
      <g><g><animateTransform attributeName="transform" type="rotate" from="0 240 240" to="360 240 240" dur="70s" repeatCount="indefinite"/><circle cx="140" cy="340" r="4" fill={BLUE}/></g>
        <text x="52" y="354" fontFamily="Space Mono" fontSize="8" fill={G1} letterSpacing="0.1em">PORTAL·CLIENTE</text></g>
      <g><g><animateTransform attributeName="transform" type="rotate" from="0 240 240" to="-360 240 240" dur="48s" repeatCount="indefinite"/><circle cx="330" cy="372" r="4" fill={INK}/></g>
        <text x="320" y="390" fontFamily="Space Mono" fontSize="8" fill={G1} letterSpacing="0.1em">SOAP·NOM-004</text></g>
      <g><g><animateTransform attributeName="transform" type="rotate" from="0 240 240" to="360 240 240" dur="62s" repeatCount="indefinite"/><circle cx="332" cy="110" r="4" fill={INK}/></g>
        <text x="290" y="98" fontFamily="Space Mono" fontSize="8" fill={G1} letterSpacing="0.1em">CFDI·VALIDADO</text></g>
      <line x1="0" y1="240" x2="480" y2="240" stroke={G3} strokeWidth="0.5" strokeDasharray="2 4"/>
      <line x1="240" y1="0" x2="240" y2="480" stroke={G3} strokeWidth="0.5" strokeDasharray="2 4"/>
      <g fontFamily="Space Mono" fontSize="8" fill={G1} letterSpacing="0.15em">
        <text x="8" y="14">FIG·01 · SISTEMA-OPERATIVO</text>
        <text x="8" y="472">ESC 1:1</text>
        <text x="472" y="14" textAnchor="end">R-MX · 2026</text>
        <text x="472" y="472" textAnchor="end">ATOMO·OPERACIONAL</text>
      </g>
    </svg>
  );
}

// Compact dark blueprints — keep structure, recolor for dark
function PlanJuridico() {
  const cases = [{id:"C-0148",cli:"ROS-14",t:"Civil",p:82,hi:false},{id:"C-0149",cli:"MTZ-07",t:"Mercantil",p:54,hi:true},{id:"C-0150",cli:"GRC-22",t:"Laboral",p:31,hi:false},{id:"C-0151",cli:"PRZ-03",t:"Fiscal",p:68,hi:false},{id:"C-0152",cli:"VEL-18",t:"Civil",p:12,hi:false},{id:"C-0153",cli:"LOP-11",t:"Familiar",p:94,hi:false}];
  const bars = [12,18,9,22,15,27,19];
  const spark = [2,3,2,4,3,5,4,3,7,4,3,4,2,3,4,3];
  return (
    <svg viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
      <rect width="640" height="480" fill={BG}/>
      <g opacity="0.5">{Array.from({length:30}).map((_,i)=><line key={"h"+i} x1="0" y1={i*16} x2="640" y2={i*16} stroke={G3} strokeWidth="0.3"/>)}{Array.from({length:40}).map((_,i)=><line key={"v"+i} x1={i*16} y1="0" x2={i*16} y2="480" stroke={G3} strokeWidth="0.3"/>)}</g>
      <text x="16" y="16" fontFamily="Space Mono" fontSize="8" fill={G1} letterSpacing="0.18em">DASHBOARD·JURÍDICO / 128 EXPEDIENTES ACTIVOS</text>
      <line x1="16" y1="22" x2="624" y2="22" stroke={INK} strokeWidth="0.6"/>
      <text x="16" y="38" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">A · EXPEDIENTES</text>
      <g transform="translate(16,46)">
        {cases.map((c,i)=>{const col=i%2,row=Math.floor(i/2),x=col*148,y=row*62;return (
          <g key={c.id} transform={`translate(${x},${y})`}>
            <rect width="140" height="54" fill={c.hi?ACC:BG} stroke={INK} strokeWidth={c.hi?1.2:0.6}/>
            <text x="8" y="12" fontFamily="Space Mono" fontSize="7" fill={c.hi?"#1d1d1b":G1} letterSpacing="0.1em">{c.id} · {c.cli}</text>
            <text x="8" y="26" fontFamily="Roboto" fontSize="11" fill={c.hi?"#1d1d1b":INK} fontWeight="500" fontStyle="italic">{c.t}</text>
            <rect x="8" y="36" width="120" height="4" fill={c.hi?"rgba(0,0,0,0.25)":G3}/>
            <rect x="8" y="36" width={120*c.p/100} height="4" fill={c.hi?"#1d1d1b":INK}/>
            <text x="8" y="50" fontFamily="Space Mono" fontSize="6.5" fill={c.hi?"#1d1d1b":G1}>{c.p}% · ACT {i+1}D</text>
          </g>);})}
      </g>
      <text x="320" y="38" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">B · INGESTA / 7D</text>
      <g transform="translate(320,46)">
        <rect width="150" height="120" fill={BG} stroke={INK} strokeWidth="0.6"/>
        {[0,10,20,30].map((v,i)=>(<g key={i}><line x1="0" y1={120-v*3} x2="150" y2={120-v*3} stroke={G3} strokeWidth="0.4" strokeDasharray="2 3"/><text x="-4" y={123-v*3} fontFamily="Space Mono" fontSize="6" fill={G1} textAnchor="end">{v}</text></g>))}
        {bars.map((v,i)=>{const x=8+i*20,h=v*3;return <rect key={i} x={x} y={120-h} width="14" height={h} fill={i===5?ACC:INK}/>;})}
        {["L","M","X","J","V","S","D"].map((d,i)=>(<text key={d} x={8+i*20+7} y="134" textAnchor="middle" fontFamily="Space Mono" fontSize="6.5" fill={G1}>{d}</text>))}
      </g>
      <text x="320" y="180" fontFamily="Space Mono" fontSize="6.5" fill={G1}>Σ 122 DOCS · PROM 17.4/D</text>
      <text x="492" y="38" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">C · AGENTE·IA</text>
      <g transform="translate(492,46)">
        <rect width="132" height="168" fill={BG} stroke={INK} strokeWidth="0.6"/>
        <text x="8" y="14" fontFamily="Space Mono" fontSize="6" fill={G1}>» 14:22  SOCIA</text>
        <text x="8" y="24" fontFamily="Space Mono" fontSize="6.5" fill={INK}>¿C-0152 últ mov?</text>
        <line x1="8" y1="30" x2="124" y2="30" stroke={G3} strokeDasharray="1 2"/>
        <text x="8" y="42" fontFamily="Space Mono" fontSize="6" fill={ACC}>« 14:22  ROARK</text>
        <text x="8" y="52" fontFamily="Space Mono" fontSize="6.5" fill={INK}>Prom 11/03 · audi-</text>
        <text x="8" y="60" fontFamily="Space Mono" fontSize="6.5" fill={INK}>encia 18/04 16:30.</text>
        <line x1="8" y1="66" x2="124" y2="66" stroke={G3} strokeDasharray="1 2"/>
        <text x="8" y="78" fontFamily="Space Mono" fontSize="6" fill={G1}>» 14:25  PASANTE</text>
        <text x="8" y="88" fontFamily="Space Mono" fontSize="6.5" fill={INK}>Busca cláusula</text>
        <text x="8" y="96" fontFamily="Space Mono" fontSize="6.5" fill={INK}>no-competencia.</text>
        <line x1="8" y1="102" x2="124" y2="102" stroke={G3} strokeDasharray="1 2"/>
        <text x="8" y="114" fontFamily="Space Mono" fontSize="6" fill={ACC}>« 14:25  ROARK</text>
        <text x="8" y="124" fontFamily="Space Mono" fontSize="6.5" fill={INK}>C-0149 §7.2 — 24m</text>
        <text x="8" y="132" fontFamily="Space Mono" fontSize="6.5" fill={INK}>radio 50km. +2 sim.</text>
        <line x1="8" y1="138" x2="124" y2="138" stroke={G3} strokeDasharray="1 2"/>
        <text x="8" y="150" fontFamily="Space Mono" fontSize="6" fill={G1}>» 14:31  CLIENTE</text>
        <text x="8" y="160" fontFamily="Space Mono" fontSize="6.5" fill={INK}>Status C-0150...</text>
        <circle cx="122" cy="10" r="2" fill={ACC}/>
      </g>
      <text x="16" y="248" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">D · DETECTOR·IRREGULARIDADES</text>
      <line x1="16" y1="254" x2="624" y2="254" stroke={INK} strokeWidth="0.4" strokeDasharray="1 3"/>
      <g transform="translate(16,262)">
        <rect width="608" height="86" fill={BG} stroke={INK} strokeWidth="0.6"/>
        <g transform="translate(16,18)">
          <text x="0" y="-4" fontFamily="Space Mono" fontSize="6.5" fill={G1}>TASA · 30D</text>
          <polyline fill="none" stroke={INK} strokeWidth="1" points={spark.map((v,i)=>`${i*18},${40-v*4}`).join(" ")}/>
          {spark.map((v,i)=>{const isAn=v>=6;return <circle key={i} cx={i*18} cy={40-v*4} r={isAn?2.4:1.4} fill={isAn?ACC:INK}/>;})}
          <line x1="0" y1="46" x2="288" y2="46" stroke={G3}/>
          <text x="0" y="58" fontFamily="Space Mono" fontSize="6" fill={G1}>D-30</text>
          <text x="288" y="58" fontFamily="Space Mono" fontSize="6" fill={G1} textAnchor="end">D-0</text>
        </g>
        <g transform="translate(340,18)">
          <text x="0" y="0" fontFamily="Space Mono" fontSize="6.5" fill={G1}>FLAG-21 / C-0149</text>
          <text x="0" y="14" fontFamily="Roboto" fontSize="14" fill={ACC} fontWeight="500" fontStyle="italic">Fecha vto anómala</text>
          <text x="0" y="26" fontFamily="Space Mono" fontSize="6.5" fill={G1}>PROB 92.1% · 14:28</text>
          <line x1="0" y1="34" x2="240" y2="34" stroke={G3}/>
          <text x="0" y="48" fontFamily="Space Mono" fontSize="6.5" fill={G1}>ANOMALÍAS</text>
          <text x="120" y="48" fontFamily="Space Mono" fontSize="6.5" fill={INK} textAnchor="end">3 · 30D</text>
          <text x="0" y="60" fontFamily="Space Mono" fontSize="6.5" fill={G1}>TASA</text>
          <text x="120" y="60" fontFamily="Space Mono" fontSize="6.5" fill={INK} textAnchor="end">4.2%</text>
        </g>
      </g>
      <text x="16" y="368" fontFamily="Space Mono" fontSize="6.5" fill={G1} letterSpacing="0.15em">LFPDPPP · CIFRADO EN REPOSO · AUDITORÍA·CONTINUA</text>
      <line x1="16" y1="374" x2="624" y2="374" stroke={INK} strokeWidth="0.4"/>
      <g transform="translate(16,384)" fontFamily="Space Mono" fontSize="7" fill={INK}>
        {["INGESTA","DASHBOARD","AGENTE·IA","PORTAL·CTE"].map((s,i)=>(
          <g key={s} transform={`translate(${i*124},0)`}>
            <rect width="82" height="28" fill={BG} stroke={INK} strokeWidth="0.6"/>
            <text x="41" y="18" textAnchor="middle">{s}</text>
            <line x1="82" y1="14" x2="120" y2="14" stroke={INK} strokeWidth="0.6"/>
            <polygon points="118,11 124,14 118,17" fill={INK}/>
          </g>))}
        <rect x="496" y="0" width="112" height="28" fill={ACC} stroke={INK} strokeWidth="0.6"/>
        <text x="552" y="18" textAnchor="middle" fill="#1d1d1b">DETECTOR·ANOMALÍAS</text>
      </g>
      <text x="16" y="470" fontFamily="Space Mono" fontSize="6.5" fill={G1} letterSpacing="0.15em">V·01 / JURÍDICO · PLANO·OPERACIONAL</text>
      <text x="624" y="470" fontFamily="Space Mono" fontSize="6.5" fill={G1} letterSpacing="0.15em" textAnchor="end">REV·A · 04·26</text>
    </svg>
  );
}

function PlanFisio() {
  const wave = Array.from({length:120}).map((_,i)=>{const t=i/120;return 0.5+0.35*Math.sin(t*14)+0.18*Math.sin(t*38)+0.08*Math.sin(t*77);});
  const ag = [[3,2,3,1,0,2,3,1],[2,3,3,3,2,1,2,2],[1,2,3,3,3,3,2,1],[3,3,3,2,1,2,3,3],[2,3,3,3,3,3,3,2],[1,2,2,3,3,2,1,0],[0,1,1,2,1,0,0,0]];
  const colors = [BG, "#3a3833", "#6a655c", INK];
  const cash = [320,480,640,820,960,1200,1420,1680,1900];
  return (
    <svg viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
      <rect width="640" height="480" fill={BG}/>
      <g opacity="0.5">{Array.from({length:30}).map((_,i)=><line key={"h"+i} x1="0" y1={i*16} x2="640" y2={i*16} stroke={G3} strokeWidth="0.3"/>)}{Array.from({length:40}).map((_,i)=><line key={"v"+i} x1={i*16} y1="0" x2={i*16} y2="480" stroke={G3} strokeWidth="0.3"/>)}</g>
      <text x="16" y="16" fontFamily="Space Mono" fontSize="8" fill={G1} letterSpacing="0.18em">CLÍNICA·FISIO / EXPEDIENTE-SE-ESCRIBE-SOLO · NOM-004</text>
      <line x1="16" y1="22" x2="624" y2="22" stroke={INK}/>
      <text x="16" y="38" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">A · SESIÓN·GRABADA / 42:17 MIN</text>
      <g transform="translate(16,46)">
        <rect width="608" height="84" fill={BG} stroke={INK} strokeWidth="0.6"/>
        <g transform="translate(8,42)">
          {wave.map((v,i)=>{const h=(v-0.5)*60,x=i*5;return <line key={i} x1={x} y1={-Math.abs(h)} x2={x} y2={Math.abs(h)} stroke={INK} strokeWidth="1"/>;})}
          <line x1="0" y1="0" x2="600" y2="0" stroke={G3} strokeWidth="0.4"/>
        </g>
        {[{n:"S",x:60,l:"Subjetivo"},{n:"O",x:220,l:"Objetivo"},{n:"A",x:380,l:"Análisis"},{n:"P",x:520,l:"Plan"}].map(m=>(
          <g key={m.n} transform={`translate(${m.x},0)`}>
            <line x1="0" y1="8" x2="0" y2="76" stroke={ACC} strokeWidth="0.8" strokeDasharray="2 2"/>
            <rect x="-10" y="2" width="20" height="12" fill={ACC}/>
            <text x="0" y="11" textAnchor="middle" fontFamily="Space Mono" fontSize="8" fill="#1d1d1b" fontWeight="700">{m.n}</text>
            <text x="0" y="80" textAnchor="middle" fontFamily="Space Mono" fontSize="6" fill={G1}>{m.l}</text>
          </g>))}
      </g>
      <text x="16" y="150" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">B · EXPEDIENTE·SOAP / EXP-0418-MTZ</text>
      <g transform="translate(16,158)">
        <rect width="290" height="186" fill={BG} stroke={INK} strokeWidth="0.6"/>
        {[{k:"S",t:"Subjetivo",l:"Dolor lumbar 6/10, irradiado MID. 3ª sesión."},{k:"O",t:"Objetivo",l:"Lasègue+ 40°. FABER+. Paravert. contractura L4-L5."},{k:"A",t:"Análisis",l:"Lumbociática derecha subaguda. Mejora 20%."},{k:"P",t:"Plan",l:"Neurodinamia · McKenzie · 3×/sem · 4 sem."}].map((r,i)=>(
          <g key={r.k} transform={`translate(10,${12+i*44})`}>
            <rect width="18" height="18" fill={INK}/>
            <text x="9" y="13" textAnchor="middle" fontFamily="Space Mono" fontSize="10" fill="#1d1d1b" fontWeight="700">{r.k}</text>
            <text x="28" y="8" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.12em">{r.t.toUpperCase()}</text>
            <text x="28" y="22" fontFamily="Roboto" fontSize="10" fill={INK} fontStyle="italic">{r.l}</text>
            <line x1="28" y1="32" x2="270" y2="32" stroke={G3} strokeDasharray="1 2"/>
          </g>))}
      </g>
      <text x="318" y="150" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">C · AGENDA / 7D · 3 CUBÍCULOS</text>
      <g transform="translate(318,158)">
        <rect width="306" height="186" fill={BG} stroke={INK} strokeWidth="0.6"/>
        <g transform="translate(34,26)">
          {["09","10","11","12","13","14","15","16"].map((h,i)=>(<text key={h} x={i*32+16} y="-8" textAnchor="middle" fontFamily="Space Mono" fontSize="6" fill={G1}>{h}</text>))}
          {["L","M","X","J","V","S","D"].map((d,r)=>(
            <g key={d}>
              <text x="-8" y={r*20+13} textAnchor="end" fontFamily="Space Mono" fontSize="7" fill={G1}>{d}</text>
              {ag[r].map((v,c)=>(<rect key={c} x={c*32} y={r*20+2} width="30" height="16" fill={colors[v]} stroke={INK} strokeWidth="0.3"/>))}
            </g>))}
        </g>
        <g transform="translate(16,160)">
          <text x="0" y="0" fontFamily="Space Mono" fontSize="6" fill={G1} letterSpacing="0.1em">OCUPACIÓN</text>
          {[0,1,2,3].map(i=>(<g key={i} transform={`translate(${70+i*52},-6)`}><rect width="14" height="8" fill={colors[i]} stroke={INK} strokeWidth="0.3"/><text x="18" y="7" fontFamily="Space Mono" fontSize="6" fill={G1}>{["0","1","2","3"][i]}/3</text></g>))}
        </g>
      </g>
      <text x="16" y="362" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">D · WHATSAPP·BOT / SEGUIMIENTO</text>
      <g transform="translate(16,370)">
        <rect width="290" height="96" fill={BG} stroke={INK} strokeWidth="0.6"/>
        <g transform="translate(10,10)">
          <rect x="0" y="0" width="180" height="20" fill="#2e2c28" stroke={G2} strokeWidth="0.4"/>
          <text x="6" y="13" fontFamily="Roboto" fontSize="10" fill={INK}>Hola Sra. Martínez,</text>
          <text x="174" y="13" textAnchor="end" fontFamily="Space Mono" fontSize="6" fill={G1}>14:02</text>
          <rect x="90" y="26" width="180" height="20" fill={ACC}/>
          <text x="96" y="39" fontFamily="Roboto" fontSize="10" fill="#1d1d1b">confirmo cita jueves 10am</text>
          <text x="264" y="39" textAnchor="end" fontFamily="Space Mono" fontSize="6" fill="#1d1d1b">14:03</text>
          <rect x="0" y="52" width="200" height="20" fill="#2e2c28" stroke={G2} strokeWidth="0.4"/>
          <text x="6" y="65" fontFamily="Roboto" fontSize="10" fill={INK}>Confirmada. Cubículo 2. ✓</text>
          <text x="194" y="65" textAnchor="end" fontFamily="Space Mono" fontSize="6" fill={G1}>14:03</text>
        </g>
      </g>
      <text x="318" y="362" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">E · CORTE·DE·CAJA / 21·ABR</text>
      <g transform="translate(318,370)">
        <rect width="306" height="96" fill={BG} stroke={INK} strokeWidth="0.6"/>
        <g transform="translate(16,14)">
          {cash.map((v,i)=>{const h=v/30;return <rect key={i} x={i*28} y={60-h} width="20" height={h} fill={i===cash.length-1?ACC:INK}/>;})}
          <line x1="0" y1="60" x2="250" y2="60" stroke={INK} strokeWidth="0.6"/>
          {["09","10","11","12","13","14","15","16","17"].map((h,i)=>(<text key={h} x={i*28+10} y="72" textAnchor="middle" fontFamily="Space Mono" fontSize="6" fill={G1}>{h}h</text>))}
        </g>
        <g transform="translate(16,82)">
          <text x="0" y="0" fontFamily="Space Mono" fontSize="6.5" fill={G1} letterSpacing="0.12em">TOTAL·DÍA</text>
          <text x="270" y="0" textAnchor="end" fontFamily="Roboto" fontSize="12" fill={INK} fontWeight="500" fontStyle="italic">$18,420 MXN</text>
        </g>
      </g>
      <text x="16" y="470" fontFamily="Space Mono" fontSize="6.5" fill={G1} letterSpacing="0.15em">V·02 / FISIO · PLANO·OPERACIONAL</text>
      <text x="624" y="470" fontFamily="Space Mono" fontSize="6.5" fill={G1} letterSpacing="0.15em" textAnchor="end">NOM-004 · REV·A</text>
    </svg>
  );
}

function PlanContable() {
  const levels = [{n:"N1",l:"Aviso",c:42,d:"0-3D",fill:BG,txt:INK},{n:"N2",l:"Recordatorio",c:18,d:"4-10D",fill:"#3a3833",txt:INK},{n:"N3",l:"Llamada·Bot",c:7,d:"11-20D",fill:BLUE,txt:INK},{n:"N4",l:"Escalamiento",c:2,d:"21D+",fill:ACC,txt:"#1d1d1b"}];
  return (
    <svg viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
      <rect width="640" height="480" fill={BG}/>
      <g opacity="0.5">{Array.from({length:30}).map((_,i)=><line key={"h"+i} x1="0" y1={i*16} x2="640" y2={i*16} stroke={G3} strokeWidth="0.3"/>)}{Array.from({length:40}).map((_,i)=><line key={"v"+i} x1={i*16} y1="0" x2={i*16} y2="480" stroke={G3} strokeWidth="0.3"/>)}</g>
      <text x="16" y="16" fontFamily="Space Mono" fontSize="8" fill={G1} letterSpacing="0.18em">DESPACHO·CONTABLE / CUMPLIMIENTO·SAT-SIN-FRICCIÓN</text>
      <line x1="16" y1="22" x2="624" y2="22" stroke={INK}/>
      <text x="16" y="38" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">A · EXTRACTOR·CFDI / 247 DOCS·HOY</text>
      <g transform="translate(16,46)">
        <rect width="290" height="160" fill={BG} stroke={INK} strokeWidth="0.6"/>
        <g transform="translate(14,14)">
          <rect width="36" height="26" fill={BG} stroke={INK}/>
          <polyline points="0,0 18,16 36,0" fill="none" stroke={INK}/>
          <text x="18" y="40" textAnchor="middle" fontFamily="Space Mono" fontSize="6" fill={G1}>XML·EMAIL</text>
          <line x1="40" y1="13" x2="66" y2="13" stroke={INK} strokeWidth="0.6"/>
          <polygon points="64,10 70,13 64,16" fill={INK}/>
        </g>
        <g transform="translate(92,12)">
          <rect width="186" height="132" fill={BG} stroke={INK} strokeWidth="0.8"/>
          <rect x="0" y="0" width="186" height="16" fill={INK}/>
          <text x="6" y="11" fontFamily="Space Mono" fontSize="7" fill="#1d1d1b" letterSpacing="0.12em" fontWeight="700">CFDI·4.0 · PARSED OK</text>
          {[{k:"EMISOR",v:"ACM921115Q14"},{k:"RECEPTOR",v:"SRV180304A29"},{k:"UUID",v:"8E3F...B21C"},{k:"FECHA",v:"18·ABR·26"},{k:"SUBTOTAL",v:"$ 12,400.00"},{k:"IVA 16%",v:"$  1,984.00"},{k:"TOTAL",v:"$ 14,384.00"}].map((r,i)=>(
            <g key={r.k} transform={`translate(8,${28+i*14})`}>
              <text x="0" y="0" fontFamily="Space Mono" fontSize="6.5" fill={G1}>{r.k}</text>
              <text x="170" y="0" textAnchor="end" fontFamily="Space Mono" fontSize="7" fill={INK}>{r.v}</text>
              <line x1="0" y1="3" x2="170" y2="3" stroke={G3} strokeDasharray="1 2"/>
            </g>))}
        </g>
      </g>
      <text x="318" y="38" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">B · VALIDADOR·PRE-SAT / ANTES DEL 17</text>
      <g transform="translate(318,46)">
        <rect width="306" height="160" fill={BG} stroke={INK} strokeWidth="0.6"/>
        <g transform="translate(153,106)">
          <path d="M -96 0 A 96 96 0 0 1 -33 -90" stroke={INK} strokeWidth="10" fill="none"/>
          <path d="M -33 -90 A 96 96 0 0 1 33 -90" stroke={BLUE} strokeWidth="10" fill="none"/>
          <path d="M 33 -90 A 96 96 0 0 1 96 0" stroke={ACC} strokeWidth="10" fill="none"/>
          {Array.from({length:21}).map((_,i)=>{const a=Math.PI+i*Math.PI/20;const x1=Math.cos(a)*82,y1=Math.sin(a)*82;const x2=Math.cos(a)*(i%5===0?72:76),y2=Math.sin(a)*(i%5===0?72:76);return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={INK} strokeWidth={i%5===0?0.8:0.4}/>;})}
          <line x1="0" y1="0" x2={Math.cos(Math.PI+Math.PI*0.22)*84} y2={Math.sin(Math.PI+Math.PI*0.22)*84} stroke={INK} strokeWidth="2"/>
          <circle r="6" fill={INK}/>
          <circle r="2.5" fill={BG}/>
          <text x="-96" y="16" textAnchor="middle" fontFamily="Space Mono" fontSize="6" fill={INK}>SEGURO</text>
          <text x="0" y="-104" textAnchor="middle" fontFamily="Space Mono" fontSize="6" fill={G1}>REVISAR</text>
          <text x="96" y="16" textAnchor="middle" fontFamily="Space Mono" fontSize="6" fill={ACC}>ALERTA</text>
          <text x="0" y="-44" textAnchor="middle" fontFamily="Roboto" fontSize="18" fill={INK} fontWeight="500" fontStyle="italic">4 / 247</text>
          <text x="0" y="-28" textAnchor="middle" fontFamily="Space Mono" fontSize="6" fill={G1}>INCONSISTENCIAS</text>
        </g>
        <g transform="translate(16,140)" fontFamily="Space Mono" fontSize="6.5" fill={G1}>
          <text x="0" y="0" letterSpacing="0.12em">FALTA·XML</text><text x="72" y="0" fill={INK}>2</text>
          <text x="100" y="0" letterSpacing="0.12em">RFC·INV</text><text x="160" y="0" fill={INK}>1</text>
          <text x="200" y="0" letterSpacing="0.12em">USO·CFDI</text><text x="272" y="0" fill={ACC}>1</text>
        </g>
      </g>
      <text x="16" y="220" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">C · DECLARACIÓN·SAT / TABLAS·VIGENTES</text>
      <g transform="translate(16,228)">
        <rect width="290" height="124" fill={BG} stroke={INK} strokeWidth="0.6"/>
        <g transform="translate(14,16)">
          <text x="0" y="0" fontFamily="Space Mono" fontSize="6.5" fill={G1} letterSpacing="0.12em">RÉGIMEN</text>
          <text x="118" y="0" fontFamily="Space Mono" fontSize="6.5" fill={G1} letterSpacing="0.12em" textAnchor="end">BASE</text>
          <text x="260" y="0" fontFamily="Space Mono" fontSize="6.5" fill={G1} letterSpacing="0.12em" textAnchor="end">IMPUESTO</text>
          <line x1="0" y1="4" x2="260" y2="4" stroke={INK}/>
          {[{k:"ISR·PM",b:"$ 124,800",v:"$ 37,440"},{k:"IVA·16%",b:"$ 124,800",v:"$ 19,968"},{k:"RESICO",b:"$  48,200",v:"$  1,205"},{k:"RETENC.",b:"$  12,480",v:"$  1,248"}].map((r,i)=>(
            <g key={r.k} transform={`translate(0,${18+i*20})`}>
              <rect x="-4" y="-12" width="268" height="2" fill={i===2?ACC:G3}/>
              <text x="0" y="0" fontFamily="Space Mono" fontSize="8" fill={INK}>{r.k}</text>
              <rect x="52" y="-8" width={i===0?56:i===1?44:i===2?14:10} height="5" fill={i===2?ACC:INK}/>
              <text x="118" y="0" textAnchor="end" fontFamily="Space Mono" fontSize="7" fill={G1}>{r.b}</text>
              <text x="260" y="0" textAnchor="end" fontFamily="Space Mono" fontSize="8" fill={INK}>{r.v}</text>
            </g>))}
        </g>
      </g>
      <text x="318" y="220" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">D · COBRANZA·4·NIVELES / 69 CUENTAS</text>
      <g transform="translate(318,228)">
        <rect width="306" height="124" fill={BG} stroke={INK} strokeWidth="0.6"/>
        {levels.map((L,i)=>{const x=14+i*70,y=96-i*16;return (
          <g key={L.n}>
            <rect x={x} y={y} width="64" height={20+i*16} fill={L.fill} stroke={INK} strokeWidth="0.8"/>
            <text x={x+32} y={y+12} textAnchor="middle" fontFamily="Space Mono" fontSize="7" fill={L.txt} letterSpacing="0.1em" fontWeight="700">{L.n}</text>
            <text x={x+32} y={y+22} textAnchor="middle" fontFamily="Roboto" fontSize="10" fill={L.txt} fontStyle="italic">{L.l}</text>
            <text x={x+32} y={y+34} textAnchor="middle" fontFamily="Space Mono" fontSize="6.5" fill={L.txt} opacity="0.7">{L.d}</text>
            <text x={x+32} y={y-4} textAnchor="middle" fontFamily="Roboto" fontSize="14" fill={INK} fontWeight="500">{L.c}</text>
            {i<3 && (<g><line x1={x+64} y1={y+10} x2={x+72} y2={y+10} stroke={INK} strokeWidth="0.6"/><polygon points={`${x+70},${y+7} ${x+74},${y+10} ${x+70},${y+13}`} fill={INK}/></g>)}
          </g>);})}
      </g>
      <text x="16" y="372" fontFamily="Space Mono" fontSize="7" fill={G1} letterSpacing="0.2em">E · FLUJO·CLIENTE → SAT</text>
      <line x1="16" y1="378" x2="624" y2="378" stroke={INK} strokeWidth="0.4"/>
      <g transform="translate(16,388)" fontFamily="Space Mono" fontSize="7" fill={INK}>
        {["PORTAL·CTE","WHATSAPP·BOT","EXTRACTOR","VALIDADOR","SAT·DECL","COBRANZA"].map((s,i)=>{const x=i*104,isLast=i===5;return (
          <g key={s} transform={`translate(${x},0)`}>
            <rect width="92" height="28" fill={isLast?ACC:BG} stroke={INK} strokeWidth="0.6"/>
            <text x="46" y="18" textAnchor="middle" fill={isLast?"#1d1d1b":INK}>{s}</text>
            {i<5 && (<g><line x1="92" y1="14" x2="104" y2="14" stroke={INK} strokeWidth="0.6"/><polygon points="102,11 106,14 102,17" fill={INK}/></g>)}
          </g>);})}
      </g>
      <text x="16" y="470" fontFamily="Space Mono" fontSize="6.5" fill={G1} letterSpacing="0.15em">V·03 / CONTABLE · PLANO·OPERACIONAL</text>
      <text x="624" y="470" fontFamily="Space Mono" fontSize="6.5" fill={G1} letterSpacing="0.15em" textAnchor="end">SAT·CFDI·4.0 · REV·A</text>
    </svg>
  );
}

Object.assign(window, { HeroAtom, PlanJuridico, PlanFisio, PlanContable });
