/* ============================================================
   APIQO — Sections (light theme)
   ============================================================ */

/* ---------- 01 · What is an agent ---------- */
const SectionWhat = ({ t }) => {
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % 6), 1800);
    return () => clearInterval(id);
  }, []);

  const phases = [
    { k: 'INTENT',   c: '--brand-magenta', label: 'Recibe la intención', en: 'Receives intent' },
    { k: 'PLAN',     c: '--brand-blue',    label: 'Razona el plan', en: 'Plans the work' },
    { k: 'TOOLS',    c: '--brand-cyan',    label: 'Llama herramientas', en: 'Calls tools' },
    { k: 'VERIFY',   c: '--brand-blue',    label: 'Verifica resultado', en: 'Verifies output' },
    { k: 'ESCALATE', c: '--brand-magenta', label: 'Escala si hace falta', en: 'Escalates if needed' },
    { k: 'CLOSE',    c: '--ink',           label: 'Cierra y reporta', en: 'Closes & reports' },
  ];

  return (
    <section id="agents" className="sec-light">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow" style={{ color: 'var(--brand-magenta)' }}>{t.what.eyebrow}</div>
          <h2>{t.what.h2}</h2>
          <p>{t.what.p}</p>
        </div>

        <div className="anatomy">
          <div className="anatomy-trail">
            {phases.map((p, i) => (
              <div key={i} className={`atrail ${step === i ? 'on' : ''} ${step > i ? 'done' : ''}`}>
                <div className="atrail-dot" style={{ background: `var(${p.c})` }} />
                <div className="atrail-meta">
                  <div className="atrail-k mono">{String(i+1).padStart(2,'0')} · {p.k}</div>
                  <div className="atrail-l">{p.label}</div>
                </div>
              </div>
            ))}
          </div>

          <div className="anatomy-stage">
            <div className="ast-head">
              <span className="dot" style={{ background: '#3DD68C' }} />
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '.06em', textTransform: 'uppercase' }}>{t.what.label}</span>
              <span className="mono" style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--ink-4)' }}>09:42:18</span>
            </div>
            <AnatomyVisual step={step} />
          </div>
        </div>
      </div>
    </section>
  );
};

const AnatomyVisual = ({ step }) => (
  <div className="ast-body">
    <div className={`ast-card ast-intent ${step >= 0 ? 'on' : ''}`}>
      <div className="ast-tag" style={{ color: 'var(--brand-magenta)' }}>INTENT</div>
      <div className="ast-msg">"Procesa las cuentas vencidas de hoy y notifica al cliente con plan de pago."</div>
    </div>

    <div className={`ast-arrow ${step >= 1 ? 'on' : ''}`} />

    <div className={`ast-card ast-plan ${step >= 1 ? 'on' : ''}`}>
      <div className="ast-tag" style={{ color: 'var(--brand-blue)' }}>PLAN · 4 STEPS</div>
      <ol className="ast-plan-list">
        <li>Leer cuentas con vencimiento &lt; hoy</li>
        <li>Calcular plan según política #4</li>
        <li>Notificar por WhatsApp + email</li>
        <li>Mover tarjeta en monday → "Contactado"</li>
      </ol>
    </div>

    <div className={`ast-arrow ${step >= 2 ? 'on' : ''}`} />

    <div className={`ast-card ast-tools ${step >= 2 ? 'on' : ''}`}>
      <div className="ast-tag" style={{ color: 'var(--brand-cyan)' }}>TOOLS · MCP</div>
      <div className="tool-row">
        <span className="tool-pill"><span className="dot" style={{background:'var(--brand-cyan)'}}/>monday.read_board</span>
        <span className="tool-pill"><span className="dot" style={{background:'var(--brand-cyan)'}}/>policy.get</span>
      </div>
      <div className="tool-row">
        <span className="tool-pill"><span className="dot" style={{background:'var(--brand-cyan)'}}/>whatsapp.send</span>
        <span className="tool-pill"><span className="dot" style={{background:'var(--brand-cyan)'}}/>monday.update_card</span>
      </div>
    </div>

    <div className={`ast-arrow ${step >= 5 ? 'on' : ''}`} />

    <div className={`ast-card ast-out ${step >= 5 ? 'on' : ''}`}>
      <div className="ast-tag" style={{ color: 'var(--ink)' }}>RESULT</div>
      <div className="ast-grid">
        <div><div className="ast-num display">14</div><div className="ast-num-l">cuentas</div></div>
        <div><div className="ast-num display">2</div><div className="ast-num-l">escaladas</div></div>
        <div><div className="ast-num display">38s</div><div className="ast-num-l">duración</div></div>
      </div>
    </div>
  </div>
);

/* ---------- 02 · Catalog of agents ---------- */
const AGENTS = [
  { id: 'prospect',  name: 'Sofía',  role: 'Prospectos',  desc: 'Califica leads entrantes, agenda demos y escribe el primer mensaje con tu tono.', tools: ['HubSpot','WhatsApp','Calendar'], hue: 'magenta', icon: 'lead' },
  { id: 'cobranza',  name: 'Diego',  role: 'Cobranza',    desc: 'Recordatorios escalonados, plan de pago y actualización de estado en monday.', tools: ['monday','WhatsApp','Email'], hue: 'blue', icon: 'money' },
  { id: 'soporte',   name: 'Mateo',  role: 'Soporte L1',  desc: 'Resuelve tickets repetitivos, escala lo ambiguo y actualiza la base de conocimiento.', tools: ['Zendesk','Notion','Slack'], hue: 'cyan', icon: 'help' },
  { id: 'reportes',  name: 'Luna',   role: 'Reportes',    desc: 'Compone resúmenes ejecutivos diarios desde tus dashboards de monday y Sheets.', tools: ['monday','Sheets','Slack'], hue: 'magenta', icon: 'chart' },
  { id: 'rrhh',      name: 'Ema',    role: 'RR.HH.',      desc: 'Filtro de CVs, primeras entrevistas estructuradas y resumen para hiring manager.', tools: ['Workable','Calendar','Drive'], hue: 'blue', icon: 'people' },
  { id: 'compras',   name: 'Javi',   role: 'Compras',     desc: 'Compara cotizaciones, sugiere proveedor y arma orden de compra para aprobación.', tools: ['SAP','Email','Sheets'], hue: 'cyan', icon: 'cart' },
];

const SectionCatalog = ({ t }) => {
  const [active, setActive] = React.useState('prospect');
  const cur = AGENTS.find(a => a.id === active) || AGENTS[0];

  return (
    <section className="sec-soft" id="catalog">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow" style={{ color: 'var(--brand-blue)' }}>{t.catalog.eyebrow}</div>
          <h2>{t.catalog.h2}</h2>
          <p>{t.catalog.p}</p>
        </div>

        <div className="catalog-grid">
          <div className="catalog-list">
            {AGENTS.map(a => (
              <button
                key={a.id}
                onClick={() => setActive(a.id)}
                className={`agent-card ${active === a.id ? 'on' : ''} hue-${a.hue}`}
              >
                <div className="agent-card-head">
                  <AgentAvatar hue={a.hue} icon={a.icon} />
                  <div className="agent-card-meta">
                    <div className="agent-card-role mono">{a.role}</div>
                    <div className="agent-card-name display">{a.name}</div>
                  </div>
                  <div className="agent-card-arrow">→</div>
                </div>
                <div className="agent-card-desc">{a.desc}</div>
                <div className="agent-card-tools">
                  {a.tools.map(tool => <span key={tool} className="tool-pill sm">{tool}</span>)}
                </div>
              </button>
            ))}
          </div>

          <AgentDetail agent={cur} t={t} />
        </div>
      </div>
    </section>
  );
};

const AgentAvatar = ({ hue, icon }) => {
  const c = `var(--brand-${hue})`;
  return (
    <div className="agent-av" style={{ background: `linear-gradient(135deg, ${c}, var(--ink))` }}>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        {icon === 'lead'  && <><circle cx="12" cy="9" r="3"/><path d="M5 20c1.5-3.5 4-5 7-5s5.5 1.5 7 5"/><path d="M17 4l1.5 2L21 7l-1.5 1L19 10l-1.5-2L15 7z" fill="white"/></>}
        {icon === 'money' && <><path d="M12 6v12"/><path d="M16 9c0-1.5-1.8-2.5-4-2.5S8 7.5 8 9s1.5 2 4 2.5 4 1 4 2.5-1.8 2.5-4 2.5-4-1-4-2.5"/></>}
        {icon === 'help'  && <><circle cx="12" cy="12" r="8"/><path d="M9.5 9.5a2.5 2.5 0 015 0c0 1.5-2.5 2-2.5 3.5"/><circle cx="12" cy="16.5" r=".7" fill="white"/></>}
        {icon === 'chart' && <><path d="M4 20V8M10 20v-6M16 20V4M22 20H2"/></>}
        {icon === 'people'&& <><circle cx="9" cy="9" r="3"/><circle cx="17" cy="10" r="2.2"/><path d="M3 19c1-3 3.5-4.5 6-4.5s5 1.5 6 4.5"/><path d="M14 19c.7-2 2-3 3-3s2.5 1 3 3"/></>}
        {icon === 'cart'  && <><path d="M3 4h2l2 12h11l2-8H6"/><circle cx="9" cy="20" r="1.4"/><circle cx="17" cy="20" r="1.4"/></>}
      </svg>
    </div>
  );
};

const AgentDetail = ({ agent, t }) => (
  <div className={`agent-detail hue-${agent.hue}`}>
    <div className="ad-stripe" />
    <div className="ad-head">
      <AgentAvatar hue={agent.hue} icon={agent.icon} />
      <div>
        <div className="mono ad-role">{agent.role.toUpperCase()}</div>
        <h3 className="display ad-name">{agent.name}</h3>
      </div>
      <span className="pill pill-light" style={{ marginLeft: 'auto' }}>
        <span className="dot" style={{ background: `var(--brand-${agent.hue})` }} />
        {t.catalog.tag}
      </span>
    </div>

    <div className="ad-stat-row">
      <div className="ad-stat"><div className="display ad-stat-k">14d</div><div className="ad-stat-l">setup</div></div>
      <div className="ad-stat"><div className="display ad-stat-k">98%</div><div className="ad-stat-l">precisión</div></div>
      <div className="ad-stat"><div className="display ad-stat-k">24/7</div><div className="ad-stat-l">turno</div></div>
      <div className="ad-stat"><div className="display ad-stat-k">USD 0.01</div><div className="ad-stat-l">/ run</div></div>
    </div>

    <div className="ad-script">
      <div className="ad-script-head mono">→ ejemplo de tarea</div>
      <div className="ad-script-body">
        {agent.id === 'prospect'  && '"Califica este lead de LinkedIn y agenda con el AE asignado si cumple ICP B2B mid-market."'}
        {agent.id === 'cobranza'  && '"Procesa la lista de cuentas vencidas hoy. Plan de pago si > 60 días. Escala si > USD 5,000."'}
        {agent.id === 'soporte'   && '"Resuelve tickets de nivel 1. Si requiere base de datos productiva, escala a Laura."'}
        {agent.id === 'reportes'  && '"Resumen semanal de pipeline, ARR neto y OKRs. Envíalo al canal #liderazgo a las 7am lunes."'}
        {agent.id === 'rrhh'      && '"Revisa los 30 CVs del rol Senior Backend. Pre-entrevista a los top 5 sobre system design."'}
        {agent.id === 'compras'   && '"Compara estas tres cotizaciones contra el master agreement. Sugiere y arma OC #4193."'}
      </div>
    </div>

    <button className="btn btn-primary ad-cta"
      onClick={() => window.trackEvent('ViewContent', { content_name: 'ficha_agente' })}>
      {t.catalog.hire}
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
        <path d="M3 7h8m0 0L7.5 3.5M11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </button>
  </div>
);

window.SectionWhat = SectionWhat;
window.SectionCatalog = SectionCatalog;