/* eslint-disable */
const { Icon, Tool, WhinkLogo, Reveal } = window.Whink;
const { useState, useEffect, useRef } = React;

/* ============== AGENT IA CARDS ============== */
function AgentSection() {
  const cards = [
  [Icon.Chat, 'Atención al cliente automatizada 24/7', 'Tu agente atiende a cada cliente como lo haría tu mejor empleado, sin tiempos de espera, en cualquier canal, a cualquier hora.'],
  [Icon.Target, 'Gestión y seguimiento de clientes potenciales', 'Califica, nutre, identifica oportunidades y hace seguimiento de cada lead de forma automática e inteligente.'],
  [Icon.Cal, 'Gestión de agenda', 'Gestiona reservas, turnos y citas directamente desde WhatsApp, Instagram o tu sitio web, sin intervención humana.'],
  [Icon.Brain, 'Base de conocimiento', 'Opera con acceso a tus bases de datos, manuales, precios, políticas y toda la información de tu negocio actualizada en tiempo real.'],
  [Icon.Bell, 'Notificaciones y recordatorios', 'Automatiza el envío de alertas, confirmaciones y recordatorios personalizados, tanto para tus clientes como para tu equipo interno.'],
  [Icon.Gear, 'Procesamiento de pedidos y facturación', 'Recibe solicitudes, procesa pedidos, confirma acciones, genera links de pago, lee comprobantes de pago y gestiona cobros de forma autónoma.']];

  return (
    <section id="agente" className="section">
      <div className="glow" style={{ width: 500, height: 500, top: 80, left: -200, opacity: 0.6 }} />
      <div className="container">
        <Reveal className="eyebrow">¿Qué es un Agente IA?</Reveal>
        <Reveal as="h2" className="h-section section-title" delay={80}>
          Un <span className="grad-text">Agente IA</span> no es un chatbot, es mucho más
        </Reveal>
        <Reveal as="p" className="lead section-sub" delay={140}>
          Imaginá un ChatGPT personal entrenado con todo el conocimiento de tu negocio, conectado a tus sistemas y aplicaciones, capaz de ejecutar tareas por sí solo.
        </Reveal>
        <div className="agent-grid">
          {cards.map(([IconC, t, d], i) =>
          <Reveal className="card agent-card" delay={200 + i * 90} key={t}>
              <div className="agent-card-icon"><IconC width="22" height="22" /></div>
              <h3 className="h-card">{t}</h3>
              <p className="muted" style={{ fontSize: 14, lineHeight: 1.55, margin: 0 }}>{d}</p>
            </Reveal>
          )}
        </div>
      </div>
      <style>{`
        .section-title { margin-top: 16px; max-width: 22ch; text-wrap: balance; }
        .section-sub { margin-top: 18px; }
        .agent-grid {
          margin-top: 56px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        .agent-card {
          display: flex;
          flex-direction: column;
          gap: 14px;
          min-height: 200px;
          background: rgba(255,255,255,0.018);
          backdrop-filter: blur(6px) saturate(140%);
          -webkit-backdrop-filter: blur(6px) saturate(140%);
          border: 1px solid rgba(255,255,255,0.08);
          box-shadow: 0 20px 60px -40px rgba(0,0,0,0.6);
        }
        .agent-card:hover {
          background: rgba(255,255,255,0.035);
          border-color: rgba(37,211,102,0.28);
          box-shadow: 0 30px 80px -50px rgba(37,211,102,0.35), 0 20px 60px -40px rgba(0,0,0,0.6);
        }
        [data-theme="light"] .agent-card {
          background: rgba(255,255,255,0.22);
          border-color: rgba(0,0,0,0.06);
          box-shadow: 0 20px 60px -40px rgba(0,0,0,0.15);
        }
        [data-theme="light"] .agent-card:hover {
          background: rgba(255,255,255,0.38);
          border-color: rgba(37,211,102,0.32);
        }
        .agent-card-icon {
          width: 44px; height: 44px;
          display: inline-flex; align-items: center; justify-content: center;
          border-radius: 10px;
          background: #1a1a1a;
          color: var(--green);
          border: 1px solid rgba(255,255,255,0.12);
          transition: background var(--t), border-color var(--t);
        }
        .agent-card:hover .agent-card-icon {
          background: rgba(37,211,102,0.08);
          border-color: rgba(37,211,102,0.5);
        }
        .agent-card:hover .agent-card-icon {
          background: rgba(37,211,102,0.12);
          border-color: rgba(37,211,102,0.45);
        }
        [data-theme="light"] .agent-card-icon {
          background: rgba(37,211,102,0.07);
          border-color: rgba(37,211,102,0.22);
        }
        @media (max-width: 1024px) {
          .agent-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 640px) {
          .agent-grid { grid-template-columns: 1fr; gap: 12px; }
          .agent-card { padding: 22px; min-height: 0; }
        }
      `}</style>
    </section>);

}

/* ============== CHANNELS — diagram + mini cards + mockup ============== */
function ChannelDiagram() {
  const flowPaths = [
  { d: 'M70 80 Q 200 130, 250 240', delay: '0s' },
  { d: 'M430 80 Q 300 130, 250 240', delay: '-0.6s' },
  { d: 'M40 240 Q 130 240, 250 240', delay: '-1.2s' },
  { d: 'M460 240 Q 370 240, 250 240', delay: '-1.8s' },
  { d: 'M70 400 Q 200 350, 250 240', delay: '-2.4s' },
  { d: 'M430 400 Q 300 350, 250 240', delay: '-3s' }];

  const nodes = [
  { cx: 70, cy: 80, ly: 138, label: 'WhatsApp' },
  { cx: 430, cy: 80, ly: 138, label: 'Instagram' },
  { cx: 40, cy: 240, ly: 298, label: 'Email' },
  { cx: 460, cy: 240, ly: 298, label: 'Web Chat' },
  { cx: 70, cy: 400, ly: 458, label: 'MercadoLibre' },
  { cx: 430, cy: 400, ly: 458, label: 'Shopify' }];

  return (
    <div className="diagram">
      <svg className="diagram-lines" viewBox="0 0 500 480" aria-hidden="true">
        {/* connection lines */}
        <g strokeLinecap="round">
          {flowPaths.map((p) =>
          <path key={`b${p.d}`} className="ch-line" d={p.d} />
          )}
        </g>
        {/* flow lines (animated) */}
        <g>
          {flowPaths.map((p) =>
          <path key={`f${p.d}`} className="ch-line-flow" d={p.d} style={{ animationDelay: p.delay }} />
          )}
        </g>
        {/* nodes */}
        <g>
          {nodes.map((n) =>
          <React.Fragment key={n.label}>
              <circle className="ch-node" cx={n.cx} cy={n.cy} r="34" style={{ opacity: "1" }} />
              <text className="ch-node-label" x={n.cx} y={n.ly}>{n.label}</text>
            </React.Fragment>
          )}
        </g>
        {/* channel icons — brand logos rendered monochrome white via SVG filter */}
        <defs>
          <filter id="iconWhite">
            <feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0" />
          </filter>
        </defs>
        <g>
          <image href="assets/brands/whatsapp.svg" x="54" y="64" width="32" height="32" filter="url(#iconWhite)" />
          <image href="assets/brands/instagram.svg" x="414" y="64" width="32" height="32" filter="url(#iconWhite)" />
          <image href="assets/brands/email.svg" x="24" y="224" width="32" height="32" filter="url(#iconWhite)" />
          <image href="assets/brands/web.svg" x="444" y="224" width="32" height="32" filter="url(#iconWhite)" />
          <image href="assets/brands/mercadolibre.svg" x="54" y="384" width="32" height="32" filter="url(#iconWhite)" />
          <image href="assets/brands/shopify.svg" x="414" y="384" width="32" height="32" filter="url(#iconWhite)" />
        </g>
      </svg>
      <div className="diagram-center">
        <div className="diagram-pulse" />
        <div className="diagram-core">
          <img src="assets/logo.svg" width="40" height="40" alt="Whink" />
        </div>
      </div>
      <style>{`
        .diagram {
          position: relative;
          width: 100%;
          aspect-ratio: 1 / 1;
          max-width: 480px;
          margin: 0 auto;
        }
        .diagram-lines {
          position: absolute;
          inset: 0;
          width: 100%; height: 100%;
        }
        .diagram-center {
          position: absolute;
          left: 50%; top: 50%;
          transform: translate(-50%, -50%);
          width: 110px; height: 110px;
        }
        .diagram-pulse {
          position: absolute; inset: -20px;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(37,211,102,0.5), rgba(37,211,102,0) 65%);
          animation: glowPulse 3s ease-in-out infinite;
        }
        .diagram-core {
          position: absolute; inset: 0;
          border-radius: 50%;
          background: radial-gradient(circle at 35% 30%, #0d3b1f 0%, #0a1f12 70%, #050a07 100%);
          border: 1px solid rgba(37,211,102,0.4);
          display: flex; align-items: center; justify-content: center;
          box-shadow: 0 0 60px rgba(37,211,102,0.35), inset 0 0 30px rgba(37,211,102,0.2);
        }
        .diagram-node {
          position: absolute;
          transform: translate(-50%, -50%);
          display: flex; flex-direction: column; align-items: center; gap: 6px;
        }
        .diagram-node-icon {
          width: 52px; height: 52px;
          border-radius: 50%;
          background: var(--card);
          border: 1px solid var(--border);
          display: flex; align-items: center; justify-content: center;
          color: var(--fg);
          backdrop-filter: blur(8px);
        }
        .diagram-node-icon img,
        .diagram-node-icon svg {
          width: 20px !important;
          height: 20px !important;
          opacity: 0.95;
        }
        .diagram-node span {
          font-size: 11.5px;
          color: var(--fg-dim);
          letter-spacing: -0.005em;
          white-space: nowrap;
        }
        @media (max-width: 480px) {
          .diagram { max-width: 360px; }
          .diagram-node-icon { width: 44px; height: 44px; }
          .diagram-node span { font-size: 10.5px; }
          .diagram-center { width: 90px; height: 90px; }
        }
      `}</style>
    </div>);

}

function ChannelMockup() {
  const contacts = [
  { name: 'María González', I: Tool.WhatsApp, msg: 'Dale', tag: 'CONFIRMADO', tagColor: '#25d366', active: true, unread: 0 },
  { name: 'Lucas Pérez', I: Tool.WhatsApp, msg: '¿Hacen envíos a Córdoba?', tag: 'NUEVO', tagColor: '#f59e0b', unread: 2 },
  { name: 'Sofía Ramírez', I: Tool.Instagram, msg: 'Te paso la cotización solicitada.', tag: 'SIN ETIQUETA', tagColor: '#9ca3af', unread: 0 },
  { name: 'Daniel Torres', I: Tool.Instagram, msg: '¿En qué puedo ayudarte hoy?', tag: 'AGENTE IA', tagColor: '#a78bfa', unread: 0 },
  { name: 'Carla Méndez', I: Tool.WhatsApp, msg: 'Pago confirmado, en preparación.', tag: 'PAGADO', tagColor: '#25d366', unread: 1 }];

  return (
    <div className="mockup-frame">
      <div className="mockup-window glass">
        <div className="mockup-titlebar">
          <span className="dot" style={{ background: '#ff5f57' }} />
          <span className="dot" style={{ background: '#febc2e' }} />
          <span className="dot" style={{ background: '#28c840' }} />
          <span className="mockup-title">Whink — Bandeja unificada</span>
        </div>
        <div className="mockup-body">
          <aside className="mockup-list">
            <div className="mockup-search">
              <span style={{ opacity: 0.6 }}>Buscar conversaciones…</span>
            </div>
            {contacts.map((c) =>
            <div key={c.name} className={`contact ${c.active ? 'active' : ''}`}>
                <div className="contact-avatar">
                  {c.name.split(' ').map((p) => p[0]).slice(0, 2).join('')}
                  <span className="contact-channel"><c.I width="11" height="11" /></span>
                </div>
                <div className="contact-meta">
                  <strong className="contact-name">{c.name}</strong>
                  {c.tag && <span className="tag contact-tag" style={{ color: c.tagColor, borderColor: c.tagColor + '55', background: c.tagColor + '15' }}>{c.tag}</span>}
                  <span className="contact-msg">{c.msg}</span>
                </div>
                {c.unread > 0 && <span className="unread">{c.unread}</span>}
              </div>
            )}
          </aside>
          <main className="mockup-chat">
            <div className="chat-head">
              <div className="contact-avatar lg">MG<span className="contact-channel"><Tool.WhatsApp width="11" height="11" /></span></div>
              <div>
                <strong>María González</strong>
                <div className="dim" style={{ fontSize: 11.5 }}>WhatsApp · activa hace 2 min</div>
              </div>
            </div>
            <div className="chat-body">
              <div className="bubble user">Hola, ¿tienen la campera de cuero en talle M?</div>
              <div className="bubble bot">Hola! Sí, tenemos stock en talle M en negro y marrón. ¿Hacemos el pedido o preferís pasar por el local?</div>
              <div className="bubble user">Lo quiero con envío, ¿cuánto tarda?</div>
              <div className="bubble bot">Envío a todo el país en 3-5 días hábiles. ¿Te armo el pedido ahora?</div>
              <div className="bubble user">Dale</div>
            </div>
          </main>
        </div>
      </div>
      <style>{`
        .mockup-frame {
          position: relative;
          margin: 80px auto 0;
          max-width: 1080px;
          width: 100%;
        }
        .mockup-glow {
          position: absolute; inset: -40px;
          border-radius: 32px;
          background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(37,211,102,0.25), transparent 70%);
          filter: blur(40px);
          animation: glowPulse 4s ease-in-out infinite;
          z-index: 0;
        }
        .mockup-window {
          position: relative;
          border-radius: 16px;
          overflow: hidden;
          background: rgba(10, 14, 11, 0.94);
          backdrop-filter: none;
          overflow: hidden;
          box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7), 0 0 0 1px var(--border);
          z-index: 1;
        }
        .mockup-titlebar {
          display: flex; align-items: center; gap: 8px;
          padding: 12px 16px;
          background: rgba(0,0,0,0.3);
          border-bottom: 1px solid var(--border);
        }
        .dot { width: 12px; height: 12px; border-radius: 50%; }
        .mockup-title {
          font-size: 12.5px; color: var(--fg-muted);
          margin-left: 12px; letter-spacing: -0.005em;
        }
        .mockup-body {
          display: grid;
          grid-template-columns: 320px 1fr;
          height: auto;
          min-height: 380px;
        }
        .mockup-list {
          border-right: 1px solid var(--border);
          padding: 14px;
          overflow-y: auto;
          display: flex; flex-direction: column; gap: 4px;
        }
        .mockup-search {
          padding: 10px 12px;
          background: rgba(255,255,255,0.04);
          border-radius: 8px;
          font-size: 12.5px;
          margin-bottom: 8px;
        }
        [data-theme="light"] .mockup-search { background: rgba(0,0,0,0.04); }
        .contact {
          display: grid;
          grid-template-columns: 40px 1fr auto;
          align-items: center;
          gap: 10px;
          padding: 10px;
          border-radius: 10px;
          cursor: pointer;
          transition: background var(--t);
        }
        .contact:hover { background: rgba(255,255,255,0.03); }
        [data-theme="light"] .contact:hover { background: rgba(0,0,0,0.03); }
        .contact.active { background: rgba(37,211,102,0.08); }
        .contact-avatar {
          position: relative;
          width: 38px; height: 38px;
          border-radius: 50%;
          background: linear-gradient(135deg, #1a3324, #0a1f12);
          color: var(--green);
          display: flex; align-items: center; justify-content: center;
          font-size: 12.5px; font-weight: 600;
          border: 1px solid rgba(37,211,102,0.3);
          flex-shrink: 0;
        }
        .contact-avatar.lg { width: 44px; height: 44px; font-size: 13.5px; }
        .contact-channel {
          position: absolute; bottom: -2px; right: -3px;
          width: 18px; height: 18px;
          background: var(--bg-alt);
          border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          border: 1.5px solid var(--bg);
          color: var(--fg-dim);
        }
        .mockup-list .contact-meta {
          min-width: 0;
          padding: 0;
          margin: 0;
          display: grid;
          grid-template-areas:
            "name tag"
            "msg  msg";
          grid-template-columns: auto 1fr;
          align-items: center;
          column-gap: 8px;
          row-gap: 4px;
        }
        .contact-name {
          grid-area: name;
          font-size: 13px;
          font-weight: 600;
          letter-spacing: -0.005em;
          color: var(--fg);
          line-height: 1.1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .contact-tag {
          grid-area: tag;
          justify-self: start;
          align-self: center;
        }
        .contact-msg {
          grid-area: msg;
          font-size: 12px;
          color: var(--fg-dim);
          line-height: 1.1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
        }
        .tag {
          font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
          padding: 2px 6px;
          border-radius: 4px;
          border: 1px solid;
          white-space: nowrap;
          display: inline-block;
          line-height: 1.3;
        }
        .unread {
          width: 18px; height: 18px;
          background: var(--green);
          color: #002b10;
          border-radius: 50%;
          font-size: 10px; font-weight: 700;
          display: flex; align-items: center; justify-content: center;
          align-self: center;
        }
        .mockup-chat {
          display: flex; flex-direction: column;
        }
        .chat-head {
          display: flex; align-items: center; gap: 12px;
          padding: 14px 18px;
          border-bottom: 1px solid var(--border);
        }
        .chat-head strong { font-size: 14px; display: block; }
        .chat-body {
          flex: 1;
          padding: 18px;
          display: flex; flex-direction: column;
          gap: 8px;
          overflow-y: auto;
        }
        .bubble {
          max-width: 70%;
          padding: 10px 14px;
          border-radius: 14px;
          font-size: 13px;
          line-height: 1.4;
        }
        .bubble.user {
          align-self: flex-start;
          background: rgba(255,255,255,0.06);
          border-bottom-left-radius: 4px;
        }
        [data-theme="light"] .bubble.user { background: rgba(0,0,0,0.05); }
        .bubble.bot {
          align-self: flex-end;
          background: rgba(37,211,102,0.15);
          color: var(--fg);
          border-bottom-right-radius: 4px;
          border: 1px solid rgba(37,211,102,0.25);
        }
        @media (max-width: 768px) {
          .mockup-frame { margin-top: 48px; }
          .mockup-body { grid-template-columns: 1fr; height: auto; }
          .mockup-list {
            max-height: none; border-right: none; border-bottom: none;
            padding: 10px; gap: 4px;
          }
          .mockup-chat { display: none; }
          .mockup-titlebar { padding: 10px 14px; }
          .mockup-title { font-size: 11.5px; margin-left: 8px; }
          .contact { padding: 11px 10px; gap: 12px; grid-template-columns: 40px 1fr auto; }
          .contact-avatar { width: 40px; height: 40px; font-size: 13px; }
          .mockup-list .contact-meta { row-gap: 3px; }
          .contact-name { font-size: 13.5px; }
          .contact-msg { font-size: 12px; line-height: 1.4; }
          .tag { font-size: 9px; padding: 2px 6px; }
          .unread { width: 20px; height: 20px; font-size: 10.5px; }
        }
      `}</style>
    </div>);

}

function ChannelsSection() {
  const minis = [
  [Icon.Layers, 'Contexto persistente', 'El agente recuerda el historial, preferencias y operaciones previas de cada cliente.'],
  [Icon.HandOff, 'Hand-off humano', 'Cuando hace falta, notifica y deriva al equipo correcto con todo el contexto adjunto.'],
  [Icon.Chart, 'Métricas y reportes', 'Evaluá el rendimiento de tus conversaciones y optimizá tu operación continuamente.'],
  [Icon.Tag, 'Etiquetas y filtrado', 'Organizá y priorizá conversaciones por estado, canal o etiqueta.'],
  [Icon.Crm, 'CRM integrado', 'Organizá tus clientes por fases, gestioná el pipeline comercial y seguí cada oportunidad.']];

  return (
    <section id="canales" className="section">
      <div className="container">
        <Reveal className="eyebrow">Canales</Reveal>
        <Reveal as="h2" className="h-section section-title" delay={80}>
          Toda la comunicación de tu negocio, en <span className="grad-text">un solo lugar</span>
        </Reveal>
        <Reveal as="p" className="lead section-sub" delay={140}>
          Tu agente atiende en WhatsApp, Instagram, Email y más. Y vos accedés a todas las conversaciones, de todos los canales, desde una única plataforma centralizada.
        </Reveal>
        <div className="channels-grid">
          <Reveal variant="scale" delay={200}><ChannelDiagram /></Reveal>
          <div className="channels-mini">
            {minis.map(([IconC, t, d], i) =>
            <Reveal key={t} className="card mini-card" delay={300 + i * 90}>
                <div className="mini-icon"><IconC width="18" height="18" /></div>
                <div>
                  <h4 className="h-card" style={{ fontSize: 15 }}>{t}</h4>
                  <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.5, margin: '4px 0 0' }}>{d}</p>
                </div>
              </Reveal>
            )}
          </div>
        </div>
        <Reveal variant="scale" delay={150}><ChannelMockup /></Reveal>
      </div>
      <style>{`
        .channels-grid {
          margin-top: 72px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 64px;
          align-items: center;
        }
        .channels-mini { display: flex; flex-direction: column; gap: 10px; }
        .mini-card {
          padding: 18px 20px;
          display: flex; align-items: flex-start; gap: 14px;
        }
        .mini-icon {
          width: 36px; height: 36px;
          flex-shrink: 0;
          border-radius: 9px;
          background: #1a1a1a;
          color: var(--green);
          display: flex; align-items: center; justify-content: center;
          border: 1px solid rgba(255,255,255,0.12);
          transition: background var(--t), border-color var(--t);
        }
        .mini-card:hover .mini-icon {
          background: rgba(37,211,102,0.08);
          border-color: rgba(37,211,102,0.5);
        }
        @media (max-width: 1024px) {
          .channels-grid { grid-template-columns: 1fr; gap: 48px; }
        }
      `}</style>
    </section>);

}

window.WhinkParts = Object.assign(window.WhinkParts || {}, { AgentSection, ChannelsSection });