// Plantillas por sector — 1280x800

const Ic = ({ size = 16, stroke = 1.75, children }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round">{children}</svg>
);
const IcLogoSm = (p) => <Ic {...p} stroke={2}><path d="M12 2v4"/><path d="M12 18v4"/><path d="M4.93 4.93l2.83 2.83"/><path d="M16.24 16.24l2.83 2.83"/><path d="M2 12h4"/><path d="M18 12h4"/><path d="M4.93 19.07l2.83-2.83"/><path d="M16.24 7.76l2.83-2.83"/></Ic>;
const IcBell   = (p) => <Ic {...p}><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></Ic>;
const IcCog    = (p) => <Ic {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></Ic>;
const IcHelp   = (p) => <Ic {...p}><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></Ic>;
const IcCheck  = (p) => <Ic {...p} stroke={2}><polyline points="20 6 9 17 4 12"/></Ic>;
const IcPlus   = (p) => <Ic {...p} stroke={2}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></Ic>;
const IcSearch = (p) => <Ic {...p}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></Ic>;

// Sector icons
const IcServer    = (p) => <Ic {...p}><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></Ic>;
const IcShield    = (p) => <Ic {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></Ic>;
const IcBriefcase = (p) => <Ic {...p}><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></Ic>;
const IcHeadphones= (p) => <Ic {...p}><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z"/><path d="M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/></Ic>;
const IcDatabase  = (p) => <Ic {...p}><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/><path d="M3 12c0 1.66 4 3 9 3s9-1.34 9-3"/></Ic>;
const IcPhone     = (p) => <Ic {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></Ic>;

const TEMPLATES = [
  { id: "it",     icon: IcServer,     name: "Consultor IT",          desc: "Redes, VLANs, firewalls, switches, enrutamiento.",       prompts: 12, active: true },
  { id: "sec",    icon: IcShield,     name: "Ciberseguridad",        desc: "Auditorías, pentesting, cumplimiento, políticas.",       prompts: 8 },
  { id: "b2b",    icon: IcBriefcase,  name: "Comercial técnico B2B", desc: "Argumentario de valor, objeciones, ROI, casos de uso.", prompts: 15 },
  { id: "sup",    icon: IcHeadphones, name: "Soporte técnico",       desc: "Diagnóstico, troubleshooting, escalado, tickets.",       prompts: 10 },
  { id: "erp",    icon: IcDatabase,   name: "ERP / Odoo",            desc: "Módulos, migraciones, integraciones, workflows.",        prompts: 9 },
  { id: "voip",   icon: IcPhone,      name: "Telefonía VoIP",        desc: "SIP, QoS, centralitas, números, configuración.",         prompts: 7 },
];

const Plantillas = () => {
  const [active, setActive] = React.useState("it");
  const [hoverId, setHover] = React.useState(null);
  return (
    <div className="hist-root" data-screen-label="12 Plantillas Sector">
      <header className="dash-header">
        <div className="dash-brand">
          <div className="dash-mark"><IcLogoSm size={14} /></div>
          <span className="dash-brand-name">Copilotoprompter</span>
          <span className="bcrumb">/ Plantillas</span>
        </div>
        <div className="dash-h-spacer" />
        <div className="dash-h-actions">
          <button className="dash-icon-btn" title="Ayuda"><IcHelp size={15} /></button>
          <button className="dash-icon-btn" title="Notificaciones">
            <IcBell size={15} /><span className="dot-violet" />
          </button>
          <button className="dash-icon-btn" title="Configuración"><IcCog size={15} /></button>
          <div className="avatar">JM</div>
        </div>
      </header>

      <main className="hist-main">
        <div className="tpl-page">
          <div className="hist-head">
            <h1>Plantillas por sector</h1>
            <p>Prompts preconfigurados para diferentes contextos profesionales.</p>
          </div>

          <div className="tpl-toolbar">
            <div className="hist-search tpl-search">
              <IcSearch size={14} />
              <input placeholder="Buscar plantilla por sector o prompt…" />
            </div>
            <span className="tpl-count">
              <b>{TEMPLATES.length}</b> sectores ·
              <b> {TEMPLATES.reduce((s, t) => s + t.prompts, 0)}</b> prompts
            </span>
          </div>

          <div className="tpl-grid">
            {TEMPLATES.map((t) => {
              const Icon = t.icon;
              const isActive = active === t.id;
              return (
                <article key={t.id}
                         className={`tpl-card ${isActive ? "active" : ""}`}
                         onMouseEnter={() => setHover(t.id)}
                         onMouseLeave={() => setHover(null)}>
                  <div className="tpl-card-top">
                    <div className="tpl-icon"><Icon size={22} /></div>
                    {isActive && (
                      <span className="tpl-pill-active">
                        <IcCheck size={11} /> Activa
                      </span>
                    )}
                  </div>
                  <h3 className="tpl-name">{t.name}</h3>
                  <p className="tpl-desc">{t.desc}</p>
                  <div className="tpl-card-foot">
                    <span className="tpl-meta">
                      <span className="tpl-dot" />
                      {t.prompts} prompts
                    </span>
                    <button
                      className={`tpl-btn ${isActive ? "active" : ""}`}
                      onClick={() => setActive(t.id)}
                      disabled={isActive}>
                      {isActive ? "Plantilla activa" : "Activar plantilla"}
                    </button>
                  </div>
                </article>
              );
            })}

            {/* Custom card */}
            <article className="tpl-card tpl-card-custom">
              <div className="tpl-card-top">
                <div className="tpl-icon-custom">
                  <IcPlus size={22} />
                </div>
              </div>
              <h3 className="tpl-name">Crear plantilla personalizada</h3>
              <p className="tpl-desc">Define tus propios prompts, contexto del cliente y vocabulario técnico.</p>
              <div className="tpl-card-foot">
                <span className="tpl-meta tpl-meta-muted">Sin límite de prompts</span>
                <button className="btn-primary tpl-btn-create">
                  <IcPlus size={12} /> Crear nueva
                </button>
              </div>
            </article>
          </div>
        </div>
      </main>
    </div>
  );
};

window.Plantillas = Plantillas;