import type { ReactNode } from 'react';

// Set of simple line icons — one per concept used across Mecanismo,
// ComoEmpezar and Disciplinas. Same stroke weight and geometric language as
// the manual's own iconography guidance ("líneas simples, geométricas,
// consistentes en grosor"), hand-drawn to match each step's specific idea
// rather than generic stock glyphs.

export type IconoNombre =
  | 'inmersion'
  | 'desafiar'
  | 'estrategia'
  | 'escribeme'
  | 'diagnostico'
  | 'plan'
  | 'comunicacion'
  | 'digital'
  | 'experiencias'
  | 'reloj';

const PATHS: Record<IconoNombre, ReactNode> = {
  // A line dives through two layers down to a core point — "me sumerjo
  // hasta comprenderla desde dentro".
  inmersion: (
    <>
      <path d="M12 3v11" />
      <path d="M7 8h10" />
      <path d="M9 12h6" />
      <path d="m8 14 4 4 4-4" />
      <circle cx="12" cy="20.5" r="0.75" fill="currentColor" stroke="none" />
    </>
  ),
  // A circle (the assumption) cracked by a bolt — "cuestiono lo que todos
  // dan por hecho".
  desafiar: (
    <>
      <circle cx="12" cy="12" r="8.5" />
      <path d="m13 6-4 6h4l-2 6 5-7.5h-4z" fill="currentColor" stroke="none" />
    </>
  ),
  // A path rising to a flag — "una estrategia que puedas ejecutar".
  estrategia: (
    <>
      <path d="M4 20 10 12 14 15 20 6" strokeDasharray="1.5 3" />
      <path d="M20 6v6" />
      <path d="M20 6h-5l2.5-3.5L20 6" fill="currentColor" stroke="none" />
    </>
  ),
  // A speech bubble mid-thought — "cuéntame dónde está tu negocio hoy".
  escribeme: (
    <>
      <path d="M4 5.5h16v10H10l-4 3.5v-3.5H4z" />
      <path d="M8 9.5h8" />
      <path d="M8 12.5h5" />
    </>
  ),
  // A magnifying glass over a short list — "una conversación para ubicar tu
  // punto de inflexión".
  diagnostico: (
    <>
      <path d="M5 4h9v9.5" />
      <path d="M8 8h5" />
      <path d="M8 11h2.5" />
      <circle cx="15.5" cy="15.5" r="4" />
      <path d="m18.6 18.6 2.4 2.4" />
    </>
  ),
  // A short checklist — "sales con claridad y tu siguiente movimiento
  // definido".
  plan: (
    <>
      <rect x="5" y="3.5" width="14" height="17" rx="1.5" />
      <path d="m8.3 8.5 1.2 1.2L11.7 7.5" />
      <path d="M14 8.5h5" />
      <path d="m8.3 14 1.2 1.2 2.2-2.2" />
      <path d="M14 14h5" />
    </>
  ),
  // Two overlapping bubbles — mensaje que alinea a tu equipo y tu mercado.
  comunicacion: (
    <>
      <path d="M3 6.5h11v7.5H9l-3 2.5v-2.5H3z" />
      <path d="M12 6.5A2.5 2.5 0 0 1 14.5 4H20v6.5h-3v2.5l-2.7-2.5" />
    </>
  ),
  // A screen with a signal — presencia y procesos que escalan.
  digital: (
    <>
      <rect x="3.5" y="5" width="17" height="12" rx="1.2" />
      <path d="M9 20.5h6" />
      <path d="M12 17v3.5" />
      <path d="M8.5 12.5a3.6 3.6 0 0 1 7 0" strokeDasharray="0.1 3" />
      <circle cx="12" cy="12.5" r="0.9" fill="currentColor" stroke="none" />
    </>
  ),
  // A ripple from a single touch — cada toque con tu marca construye
  // confianza.
  experiencias: (
    <>
      <circle cx="12" cy="12" r="1.3" fill="currentColor" stroke="none" />
      <circle cx="12" cy="12" r="5" />
      <circle cx="12" cy="12" r="9" strokeOpacity={0.55} />
    </>
  ),
  // Simple clock — "cada proceso tiene su ritmo".
  reloj: (
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3.5 3.5" />
    </>
  ),
};

export function Icono({ nombre, className = '' }: { nombre: IconoNombre; className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.6}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
      focusable="false"
    >
      {PATHS[nombre]}
    </svg>
  );
}