// V3 dark mini-icons + diagrams — white strokes
const MI_INK = "#ffffff";
const MI_ACC = "#e94e1b";
const MI_BLUE = "#1f3c90";
const MI_G1 = "#8a8780";
const MI_G2 = "#5a5853";
const MI_G3 = "#36342f";

const I = {
  seguros: <svg viewBox="0 0 40 40"><path d="M20 4 L34 10 L34 22 C34 30 20 36 20 36 C20 36 6 30 6 22 L6 10 Z" fill="none" stroke={MI_INK} strokeWidth="1"/><path d="M13 20 L18 25 L28 14" fill="none" stroke={MI_ACC} strokeWidth="1.5"/></svg>,
  dental: <svg viewBox="0 0 40 40"><path d="M12 6 C8 6 6 10 7 15 C8 19 9 22 10 27 C11 32 13 34 14 34 C16 34 16 28 17 25 C18 23 19 23 20 25 C21 28 22 34 24 34 C27 34 28 30 30 22 C32 14 30 6 26 6 C24 6 22 7 20 7 C18 7 15 6 12 6 Z" fill="none" stroke={MI_INK} strokeWidth="1"/></svg>,
  escuela: <svg viewBox="0 0 40 40"><path d="M4 16 L20 8 L36 16 L20 24 Z" fill="none" stroke={MI_INK} strokeWidth="1"/><path d="M10 19 L10 28 C10 30 14 32 20 32 C26 32 30 30 30 28 L30 19" fill="none" stroke={MI_INK} strokeWidth="1"/><line x1="34" y1="16" x2="34" y2="26" stroke={MI_ACC} strokeWidth="1.2"/></svg>,
  inmo: <svg viewBox="0 0 40 40"><path d="M6 18 L20 6 L34 18 L34 34 L6 34 Z" fill="none" stroke={MI_INK} strokeWidth="1"/><rect x="16" y="22" width="8" height="12" fill="none" stroke={MI_INK} strokeWidth="1"/><circle cx="27" cy="14" r="2" fill={MI_ACC}/></svg>,
  resto: <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="12" fill="none" stroke={MI_INK} strokeWidth="1"/><line x1="20" y1="8" x2="20" y2="20" stroke={MI_INK} strokeWidth="1"/><line x1="20" y1="20" x2="28" y2="24" stroke={MI_ACC} strokeWidth="1.5"/><circle cx="20" cy="20" r="1.5" fill={MI_INK}/></svg>,
  notaria: <svg viewBox="0 0 40 40"><rect x="10" y="6" width="20" height="28" fill="none" stroke={MI_INK} strokeWidth="1"/><line x1="14" y1="12" x2="26" y2="12" stroke={MI_INK} strokeWidth="0.8"/><line x1="14" y1="17" x2="26" y2="17" stroke={MI_INK} strokeWidth="0.8"/><line x1="14" y1="22" x2="22" y2="22" stroke={MI_INK} strokeWidth="0.8"/><circle cx="26" cy="28" r="3" fill="none" stroke={MI_ACC} strokeWidth="1"/></svg>,
  marketing: <svg viewBox="0 0 40 40"><rect x="5" y="10" width="30" height="20" fill="none" stroke={MI_INK} strokeWidth="1"/><polyline points="9,24 14,18 19,20 24,14 30,16" fill="none" stroke={MI_ACC} strokeWidth="1.3"/><circle cx="24" cy="14" r="1.5" fill={MI_ACC}/></svg>,
  arq: <svg viewBox="0 0 40 40"><polygon points="6,34 20,6 34,34" fill="none" stroke={MI_INK} strokeWidth="1"/><line x1="13" y1="22" x2="27" y2="22" stroke={MI_INK} strokeWidth="0.8" strokeDasharray="2 2"/><line x1="20" y1="6" x2="20" y2="34" stroke={MI_G3} strokeWidth="0.6" strokeDasharray="1 2"/><circle cx="20" cy="22" r="2" fill={MI_ACC}/></svg>,
};

function MoatDiag1() {
  return (
    <svg viewBox="0 0 220 72">
      <text x="0" y="8" fontFamily="Space Mono" fontSize="7" fill={MI_G1} letterSpacing="0.14em">DÍAS · 01—02</text>
      <line x1="0" y1="50" x2="220" y2="50" stroke={MI_INK} strokeWidth="0.6"/>
      {[0,1,2,3,4].map(i=>(<g key={i}><line x1={i*55} y1="46" x2={i*55} y2="54" stroke={MI_INK}/><text x={i*55} y="64" fontFamily="Space Mono" fontSize="7" fill={MI_G1} textAnchor="middle">D{i}</text></g>))}
      <rect x="0" y="26" width="110" height="18" fill={MI_ACC}/>
      <text x="55" y="39" textAnchor="middle" fontFamily="Space Mono" fontSize="8" fill="#1d1d1b" letterSpacing="0.1em" fontWeight="700">DIAGNÓSTICO</text>
      <rect x="110" y="26" width="110" height="18" fill="none" stroke={MI_INK} strokeDasharray="3 3"/>
      <text x="165" y="39" textAnchor="middle" fontFamily="Space Mono" fontSize="8" fill={MI_G1} letterSpacing="0.1em">CÓDIGO·DESPUÉS</text>
    </svg>
  );
}
function MoatDiag2() {
  return (
    <svg viewBox="0 0 220 72">
      <text x="0" y="8" fontFamily="Space Mono" fontSize="7" fill={MI_G1} letterSpacing="0.14em">N = 1 · HECHO·A·MEDIDA</text>
      <g transform="translate(0,20)">
        {[0,1,2,3,4,5,6,7].map(i=>(<rect key={i} x={i*28} y="0" width="24" height="36" fill={i===3?MI_ACC:"none"} stroke={MI_INK} strokeWidth="0.8"/>))}
        {[0,1,2,3,4,5,6,7].map(i=>(<text key={i} x={i*28+12} y="22" textAnchor="middle" fontFamily="Space Mono" fontSize="8" fill={i===3?"#1d1d1b":MI_G1} fontWeight="700">{i===3?"TÚ":"—"}</text>))}
      </g>
      <text x="0" y="68" fontFamily="Space Mono" fontSize="7" fill={MI_G1}>CATÁLOGO = 0 · SKU = 0</text>
    </svg>
  );
}
function MoatDiag3() {
  return (
    <svg viewBox="0 0 220 72">
      <text x="0" y="8" fontFamily="Space Mono" fontSize="7" fill={MI_G1} letterSpacing="0.14em">STACK·COMPLETO · 5 MÓDULOS</text>
      <g transform="translate(0,22)">
        {["DASH","AGENT","PORTAL","WA","FACT"].map((s,i)=>(<g key={s} transform={`translate(${i*44},0)`}><rect width="40" height="28" fill="none" stroke={MI_INK} strokeWidth="0.8"/><text x="20" y="18" textAnchor="middle" fontFamily="Space Mono" fontSize="7" fill={MI_INK}>{s}</text></g>))}
        <line x1="0" y1="40" x2="216" y2="40" stroke={MI_ACC} strokeWidth="1.2"/>
        {[0,1,2,3,4].map(i=>(<line key={i} x1={i*44+20} y1="28" x2={i*44+20} y2="40" stroke={MI_ACC} strokeWidth="0.8"/>))}
        <text x="108" y="54" textAnchor="middle" fontFamily="Space Mono" fontSize="7" fill={MI_ACC} letterSpacing="0.14em" fontWeight="700">BUS · ÚNICO</text>
      </g>
    </svg>
  );
}

// Íconos visuales limpios — sin texto, estilo marca (línea blanca + acento naranja)
// Fase 1 · Diagnóstico → lupa sobre proceso (encontrar el cuello de botella)
function FaseDiag1() {
  return (
    <svg viewBox="0 0 120 96" fill="none">
      <circle cx="52" cy="44" r="26" stroke={MI_INK} strokeWidth="1.5"/>
      <line x1="71" y1="63" x2="92" y2="84" stroke={MI_INK} strokeWidth="1.5" strokeLinecap="round"/>
      <circle cx="44" cy="40" r="3" fill={MI_INK}/>
      <circle cx="60" cy="36" r="3" fill={MI_INK}/>
      <circle cx="52" cy="52" r="4" fill={MI_ACC}/>
      <line x1="44" y1="40" x2="52" y2="52" stroke={MI_INK} strokeWidth="0.8"/>
      <line x1="60" y1="36" x2="52" y2="52" stroke={MI_INK} strokeWidth="0.8"/>
    </svg>
  );
}
// Fase 2 · Demo con tus datos → pantalla/navegador con sistema corriendo
function FaseDiag2() {
  return (
    <svg viewBox="0 0 120 96" fill="none">
      <rect x="24" y="20" width="72" height="56" rx="3" stroke={MI_INK} strokeWidth="1.5"/>
      <line x1="24" y1="33" x2="96" y2="33" stroke={MI_INK} strokeWidth="1.5"/>
      <circle cx="31" cy="26.5" r="1.6" fill={MI_ACC}/>
      <circle cx="37" cy="26.5" r="1.6" fill={MI_INK}/>
      <rect x="33" y="44" width="22" height="22" rx="2" fill={MI_ACC}/>
      <line x1="62" y1="46" x2="86" y2="46" stroke={MI_INK} strokeWidth="1.2" strokeLinecap="round"/>
      <line x1="62" y1="54" x2="86" y2="54" stroke={MI_INK} strokeWidth="1.2" strokeLinecap="round"/>
      <line x1="62" y1="62" x2="76" y2="62" stroke={MI_INK} strokeWidth="1.2" strokeLinecap="round"/>
    </svg>
  );
}
// Fase 3 · Producción → engrane / sistema operando
function FaseDiag3() {
  const teeth = [];
  for (let i = 0; i < 8; i++) {
    const a = (i / 8) * Math.PI * 2;
    teeth.push({ x1: 60 + Math.cos(a) * 26, y1: 48 + Math.sin(a) * 26, x2: 60 + Math.cos(a) * 33, y2: 48 + Math.sin(a) * 33 });
  }
  return (
    <svg viewBox="0 0 120 96" fill="none">
      <circle cx="60" cy="48" r="26" stroke={MI_INK} strokeWidth="1.5"/>
      {teeth.map((t, i) => <line key={i} x1={t.x1} y1={t.y1} x2={t.x2} y2={t.y2} stroke={MI_INK} strokeWidth="3" strokeLinecap="round"/>)}
      <circle cx="60" cy="48" r="9" fill={MI_ACC}/>
      <path d="M55 48 l3.5 3.5 L66 44" stroke="#050505" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

Object.assign(window, { I, MoatDiag1, MoatDiag2, MoatDiag3, FaseDiag1, FaseDiag2, FaseDiag3 });
