/* eslint-disable */
/* global React, useLang */
/* Mockups of AI tools (Claude / ChatGPT / Gemini) — i18n-aware.
   All copy comes from the MOCKUPS dictionary keyed by language. */

const { useState, useRef, useEffect } = React;

/* ── i18n content for every mockup ──────────────────────────── */

const MOCKUPS = {
  es: {
    /* Tabs */
    caps: {
      vender:    { label: 'Vender más',          sub: 'Estrategia comercial sobre tu CRM' },
      costos:    { label: 'Bajar costos',        sub: 'Sin tocar al equipo' },
      retener:   { label: 'Retener clientes',    sub: 'Detectá riesgo de churn' },
      stock:     { label: 'Liberar plata en stock', sub: 'Inventario muerto' },
      producto:  { label: 'Producto más rentable',  sub: 'Por margen neto real' },
      anticipar: { label: 'Anticipar lo que viene', sub: 'Forecast con tus datos' },
    },
    mcp: {
      result: 'Result',
      createTable: 'Crear Tabla Calculada',
      queryPrefix: 'Consultar tabla',
      ctxClientes: 'clientes inactivos',
      ctxGastos:   'gastos operativos',
      ctxRiesgo:   'cuentas en riesgo',
      ctxStock:    'stock por SKU',
      ctxMargen:   'margen por producto',
      ctxVentas:   'ventas 12 meses',
    },

    claudeSales: {
      sidebar: {
        connection: 'Conexión',
        connected: 'Teramot · Conectado',
        recents: 'Recientes',
        items: ['Estrategia comercial Q4', 'Análisis de margen', 'Forecast diciembre'],
      },
      user: '¿Qué hago para vender más este trimestre?',
      intro: 'Mirando tu CRM y las ventas de los últimos 6 meses, veo 3 jugadas con ROI claro:',
      cards: [
        { title: 'Reactivar 47 clientes inactivos', tag: '+$340k', body: 'Compraron en los últimos 9 meses, ticket promedio $7.2k. Ya están en Salesforce con email validado.', bar: 78 },
        { title: 'Subir precio en línea Premium',   tag: '+$120k', body: 'Demanda elástica baja según histórico. +6% no mueve volumen, deja margen.', bar: 54 },
        { title: 'Cross-sell a top 20 cuentas',     tag: '+$95k',  body: '12 de 20 nunca compraron tu línea de servicios. Margen 3× superior.', bar: 38 },
      ],
      footPre: 'Total: ', footTotal: '$555k', footPost: ' · todo accionable este trimestre.',
      placeholder: 'Responde con un plan accionable…',
    },

    chatgptCosts: {
      model: 'GPT-5 · Teramot',
      user: '¿Dónde puedo bajar costos sin tocar al equipo?',
      intro: 'Crucé tus gastos operativos con uso real. 4 zonas con ahorro inmediato:',
      cols: ['Categoría', 'Gasto/mes', 'Ahorro', 'Acción'],
      rows: [
        { color: '#10A37F', cat: 'Licencias SaaS', spend: '$28.4k', save: '−$11.2k', action: '34 usuarios sin login 90+ días' },
        { color: '#3B82F6', cat: 'Logística',      spend: '$62.0k', save: '−$8.7k',  action: 'Consolidar rutas Norte (3 → 2)' },
        { color: '#F59E0B', cat: 'Energía',        spend: '$14.8k', save: '−$3.6k',  action: 'Cambiar a tarifa nocturna' },
        { color: '#A855F7', cat: 'Proveedores',    spend: '$41.2k', save: '−$5.4k',  action: 'Renegociar contratos vencidos' },
      ],
      footPre: 'Total recuperable: ', footTotal: '$28.9k/mes', footPost: ' — ninguna decisión afecta headcount.',
      placeholder: 'Pregunta a ChatGPT…',
    },

    geminiRetention: {
      chip: '2.5 Pro · Teramot',
      user: '¿Qué clientes están en riesgo de irse?',
      intro_pre: 'Identifiqué ', intro_strong: '14 cuentas', intro_post: ' con señales de churn en los últimos 30 días. Las 5 más urgentes:',
      acctSuffix: '/año',
      rows: [
        { name: 'Aurelia Foods',  acct: '$184k', risk: 92, signals: ['Tickets sin respuesta', '−42% pedidos', 'NPS bajó a 4'] },
        { name: 'Northwind Co.',  acct: '$152k', risk: 87, signals: ['CEO cambió', 'Pause renewal', '60d sin contacto'] },
        { name: 'Vega Logistics', acct: '$96k',  risk: 81, signals: ['Pidió comparativa', 'Llamadas a Soporte ↑'] },
        { name: 'Helios Mfg.',    acct: '$74k',  risk: 74, signals: ['Uso bajó 38%', 'Sin login admin'] },
        { name: 'Mercato Plus',   acct: '$58k',  risk: 68, signals: ['Demoró pago', 'Cambió plan'] },
      ],
      footPre: 'Suman ', footTotal: '$564k/año', footPost: '. ¿Te armo un email de outreach personalizado para cada uno?',
    },

    chatgptStock: {
      sub: 'con Teramot',
      user: '¿Cuánta plata tengo trabada en stock?',
      intro: 'Cruzando inventario con rotación:',
      heroNum: '$1.84M',
      heroLabel: 'en stock muerto (90+ días sin movimiento)',
      rows: [
        { name: 'Línea Premium', bar: 78, val: '$720k' },
        { name: 'Repuestos',     bar: 52, val: '$480k' },
        { name: 'Accesorios',    bar: 34, val: '$315k' },
        { name: 'Otros',         bar: 22, val: '$205k' },
      ],
    },

    claudeProduct: {
      user: '¿Cuál es mi producto más rentable?',
      intro: 'Por margen neto, top 5 SKUs:',
      rows: [
        { sku: 'TM-204', name: 'Kit Industrial Pro',  margin: 64, rev: '$412k' },
        { sku: 'TM-118', name: 'Filtro Premium 12"',  margin: 58, rev: '$285k' },
        { sku: 'TM-076', name: 'Adaptador serie B',   margin: 51, rev: '$198k' },
        { sku: 'TM-301', name: 'Bomba 2HP eléctrica', margin: 47, rev: '$372k' },
        { sku: 'TM-052', name: 'Sensor de presión',   margin: 42, rev: '$144k' },
      ],
    },

    geminiForecast: {
      chip: '2.5 Pro · Teramot',
      user: '¿Qué tendencias veo en los próximos 30 días?',
      intro: 'Modelando con tus últimos 12 meses + estacionalidad real:',
      title: 'Ventas proyectadas · Q4',
      up: '↑ +18% vs últimos 90 días',
      forecastLabel: 'Forecast',
      cardLabels: ['Pico esperado', 'Ingreso forecast', 'Confianza'],
      cardNums: ['Sem 47', '$3.2M', '87%'],
      foot: 'Te recomiendo subir stock de TM-204 y TM-118 antes del pico — son los que limitan el upside.',
    },
  },

  en: {
    caps: {
      vender:    { label: 'Sell more',           sub: 'Sales strategy on your CRM' },
      costos:    { label: 'Cut costs',           sub: 'Without touching the team' },
      retener:   { label: 'Keep customers',      sub: 'Spot churn risk' },
      stock:     { label: 'Free up stock cash',  sub: 'Dead inventory' },
      producto:  { label: 'Most profitable product', sub: 'By real net margin' },
      anticipar: { label: 'See what is coming',  sub: 'Forecast on your data' },
    },
    mcp: {
      result: 'Result',
      createTable: 'Create Calculated Table',
      queryPrefix: 'Query table',
      ctxClientes: 'inactive customers',
      ctxGastos:   'operating expenses',
      ctxRiesgo:   'at-risk accounts',
      ctxStock:    'stock by SKU',
      ctxMargen:   'margin by product',
      ctxVentas:   '12-month sales',
    },

    claudeSales: {
      sidebar: {
        connection: 'Connection',
        connected: 'Teramot · Connected',
        recents: 'Recent',
        items: ['Q4 sales strategy', 'Margin analysis', 'December forecast'],
      },
      user: 'What can I do to sell more this quarter?',
      intro: 'Looking at your CRM and the last 6 months of sales, I see 3 plays with clear ROI:',
      cards: [
        { title: 'Reactivate 47 inactive customers', tag: '+$340k', body: 'They bought in the last 9 months, average ticket $7.2k. Already in Salesforce with verified email.', bar: 78 },
        { title: 'Raise price on Premium line',      tag: '+$120k', body: 'Demand elasticity low based on history. +6% does not move volume, leaves margin.', bar: 54 },
        { title: 'Cross-sell to top 20 accounts',    tag: '+$95k',  body: '12 of 20 never bought your services line. Margin 3× higher.', bar: 38 },
      ],
      footPre: 'Total: ', footTotal: '$555k', footPost: ' · all actionable this quarter.',
      placeholder: 'Reply with an actionable plan…',
    },

    chatgptCosts: {
      model: 'GPT-5 · Teramot',
      user: 'Where can I cut costs without touching the team?',
      intro: 'I cross-referenced your OpEx with actual usage. 4 areas with immediate savings:',
      cols: ['Category', 'Spend/mo', 'Savings', 'Action'],
      rows: [
        { color: '#10A37F', cat: 'SaaS licenses', spend: '$28.4k', save: '−$11.2k', action: '34 users with no login 90+ days' },
        { color: '#3B82F6', cat: 'Logistics',     spend: '$62.0k', save: '−$8.7k',  action: 'Consolidate North routes (3 → 2)' },
        { color: '#F59E0B', cat: 'Energy',        spend: '$14.8k', save: '−$3.6k',  action: 'Switch to off-peak tariff' },
        { color: '#A855F7', cat: 'Vendors',       spend: '$41.2k', save: '−$5.4k',  action: 'Renegotiate expired contracts' },
      ],
      footPre: 'Total recoverable: ', footTotal: '$28.9k/mo', footPost: ' — no decision affects headcount.',
      placeholder: 'Ask ChatGPT…',
    },

    geminiRetention: {
      chip: '2.5 Pro · Teramot',
      user: 'Which customers are at risk of leaving?',
      intro_pre: 'I found ', intro_strong: '14 accounts', intro_post: ' showing churn signals in the last 30 days. The 5 most urgent:',
      acctSuffix: '/yr',
      rows: [
        { name: 'Aurelia Foods',  acct: '$184k', risk: 92, signals: ['Unanswered tickets', '−42% orders', 'NPS dropped to 4'] },
        { name: 'Northwind Co.',  acct: '$152k', risk: 87, signals: ['CEO changed', 'Renewal paused', '60d no contact'] },
        { name: 'Vega Logistics', acct: '$96k',  risk: 81, signals: ['Requested comparison', 'Support calls ↑'] },
        { name: 'Helios Mfg.',    acct: '$74k',  risk: 74, signals: ['Usage −38%', 'No admin login'] },
        { name: 'Mercato Plus',   acct: '$58k',  risk: 68, signals: ['Late payment', 'Plan changed'] },
      ],
      footPre: 'Total ', footTotal: '$564k/yr', footPost: '. Want me to draft a tailored outreach email for each?',
    },

    chatgptStock: {
      sub: 'with Teramot',
      user: 'How much cash do I have stuck in stock?',
      intro: 'Cross-referencing inventory with rotation:',
      heroNum: '$1.84M',
      heroLabel: 'in dead stock (90+ days idle)',
      rows: [
        { name: 'Premium line', bar: 78, val: '$720k' },
        { name: 'Spare parts',  bar: 52, val: '$480k' },
        { name: 'Accessories',  bar: 34, val: '$315k' },
        { name: 'Other',        bar: 22, val: '$205k' },
      ],
    },

    claudeProduct: {
      user: 'What is my most profitable product?',
      intro: 'By net margin, top 5 SKUs:',
      rows: [
        { sku: 'TM-204', name: 'Industrial Pro Kit',     margin: 64, rev: '$412k' },
        { sku: 'TM-118', name: 'Premium Filter 12"',     margin: 58, rev: '$285k' },
        { sku: 'TM-076', name: 'Series B Adapter',       margin: 51, rev: '$198k' },
        { sku: 'TM-301', name: 'Electric 2HP Pump',      margin: 47, rev: '$372k' },
        { sku: 'TM-052', name: 'Pressure Sensor',        margin: 42, rev: '$144k' },
      ],
    },

    geminiForecast: {
      chip: '2.5 Pro · Teramot',
      user: 'What trends should I expect over the next 30 days?',
      intro: 'Modeling on your last 12 months + real seasonality:',
      title: 'Projected sales · Q4',
      up: '↑ +18% vs last 90 days',
      forecastLabel: 'Forecast',
      cardLabels: ['Expected peak', 'Forecast revenue', 'Confidence'],
      cardNums: ['Wk 47', '$3.2M', '87%'],
      foot: 'I recommend stocking up on TM-204 and TM-118 before the peak — they are the upside-limiting SKUs.',
    },
  },
};

const useM = () => {
  const { lang } = useLang();
  return MOCKUPS[lang] || MOCKUPS.es;
};

/* ── Frame shells ────────────────────────────────────────────── */

const BrowserFrame = ({ url, theme = 'light', children, style }) => (
  <div className={`mk-browser mk-theme-${theme}`} style={style}>
    <div className="mk-browser-bar">
      <div className="mk-browser-dots">
        <span className="mk-dot mk-dot-r"></span>
        <span className="mk-dot mk-dot-y"></span>
        <span className="mk-dot mk-dot-g"></span>
      </div>
      <div className="mk-browser-url">
        <span className="mk-lock">🔒</span>
        <span>{url}</span>
      </div>
      <div className="mk-browser-spacer"></div>
    </div>
    <div className="mk-browser-body">{children}</div>
  </div>
);

const PhoneFrame = ({ children, time = '9:41', style }) => (
  <div className="mk-phone" style={style}>
    <div className="mk-phone-status">
      <span>{time}</span>
      <span className="mk-phone-notch"></span>
      <span className="mk-phone-status-right">
        <i className="ph-fill ph-wifi-high"></i>
        <i className="ph-fill ph-battery-full"></i>
      </span>
    </div>
    <div className="mk-phone-body">{children}</div>
    <div className="mk-phone-home"></div>
  </div>
);

/* ── MCP tool-call indicator (Teramot integration) ──────────── */

const TeramotMiniMark = ({ size = 14 }) => (
  <svg viewBox="0 0 212 195" width={size} height={(size * 195) / 212} aria-hidden="true">
    <path d="M44.8 97.5h122.6c25 0 45.1-20.1 45.1-45.1S192.4 7.3 167.4 7.3H45.2C20.2 7.3 0 27.5 0 52.5s19.9 45 44.8 45z" fill="#5A6DF3"/>
    <circle cx="106.2" cy="142.2" r="44.7" fill="#91DFC8"/>
    <circle cx="106.2" cy="52.5" r="45.3" fill="#253DE5"/>
  </svg>
);

const McpIndicator = ({ tools, theme = 'light' }) => {
  const m = useM();
  return (
    <div className={`mk-mcp mk-mcp--${theme}`}>
      {tools.map((t, i) => (
        <div key={i} className="mk-mcp-tool">
          <TeramotMiniMark size={13}/>
          <span className="mk-mcp-tool-name">{t}</span>
          <span className="mk-mcp-tool-result">{m.mcp.result}</span>
        </div>
      ))}
    </div>
  );
};

/* ── Logos (real PNGs) ──────────────────────────────────────── */

const LogoChip = ({ src, alt, size = 18, bg = '#fff', padding }) => (
  <span
    className="mk-logo-chip"
    style={{
      width: size,
      height: size,
      background: bg,
      borderRadius: Math.max(4, size * 0.22),
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      flex: '0 0 auto',
      padding: padding == null ? size * 0.14 : padding,
      boxSizing: 'border-box',
    }}
    aria-hidden="true"
  >
    <img src={src} alt={alt} style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}/>
  </span>
);

const ClaudeLogo  = ({ size = 18 }) => <LogoChip src="brand/clients/claude.png"  alt="Claude"  size={size} bg="#F0E6DC" padding={size * 0.18}/>;
const GPTLogo     = ({ size = 18 }) => <LogoChip src="brand/clients/chatgpt.png" alt="ChatGPT" size={size} bg="#fff"    padding={size * 0.12}/>;
const GeminiLogo  = ({ size = 18 }) => <LogoChip src="brand/clients/gemini.png"  alt="Gemini"  size={size} bg="#fff"    padding={size * 0.14}/>;

/* ── Mockup: Claude (sell more) ─────────────────────────────── */

const ClaudeSales = () => {
  const m = useM();
  const t = m.claudeSales;
  return (
    <div className="mk-claude">
      <div className="mk-claude-side">
        <div className="mk-claude-side-head">
          <ClaudeLogo size={20}/>
          <span>Claude</span>
        </div>
        <div className="mk-claude-side-section">
          <span className="mk-claude-side-label">{t.sidebar.connection}</span>
          <div className="mk-claude-mcp">
            <span className="mk-claude-mcp-dot"></span>
            {t.sidebar.connected}
          </div>
        </div>
        <div className="mk-claude-side-section">
          <span className="mk-claude-side-label">{t.sidebar.recents}</span>
          <ul className="mk-claude-side-list">
            {t.sidebar.items.map((it, i) => (
              <li key={i} className={i === 0 ? 'is-active' : ''}>{it}</li>
            ))}
          </ul>
        </div>
      </div>
      <div className="mk-claude-main">
        <div className="mk-msg-user">
          <div className="mk-msg-body">{t.user}</div>
        </div>
        <div className="mk-msg-bot">
          <div className="mk-msg-avatar"><ClaudeLogo size={20}/></div>
          <div className="mk-msg-body">
            <McpIndicator tools={[m.mcp.createTable, `${m.mcp.queryPrefix} · ${m.mcp.ctxClientes}`]}/>
            <p>{t.intro}</p>
            {t.cards.map((c, i) => (
              <div key={i} className="mk-claude-card">
                <div className="mk-claude-card-head">
                  <span className="mk-claude-card-num">0{i + 1}</span>
                  <span className="mk-claude-card-title">{c.title}</span>
                  <span className="mk-claude-card-tag">{c.tag}</span>
                </div>
                <p className="mk-claude-card-body">{c.body}</p>
                <div className="mk-claude-bar">
                  <span className="mk-claude-bar-fill" style={{ width: c.bar + '%' }}></span>
                </div>
              </div>
            ))}
            <p className="mk-claude-foot">{t.footPre}<strong>{t.footTotal}</strong>{t.footPost}</p>
          </div>
        </div>
        <div className="mk-claude-input">
          <input placeholder={t.placeholder} readOnly/>
          <button>↑</button>
        </div>
      </div>
    </div>
  );
};

/* ── Mockup: ChatGPT (cut costs) ────────────────────────────── */

const ChatGPTCosts = () => {
  const m = useM();
  const t = m.chatgptCosts;
  return (
    <div className="mk-gpt">
      <div className="mk-gpt-head">
        <GPTLogo size={20}/>
        <span className="mk-gpt-title">ChatGPT</span>
        <span className="mk-gpt-model">{t.model}</span>
      </div>
      <div className="mk-gpt-body">
        <div className="mk-msg-user is-gpt">
          <div className="mk-msg-body">{t.user}</div>
        </div>
        <div className="mk-msg-bot is-gpt">
          <div className="mk-msg-avatar"><GPTLogo size={20}/></div>
          <div className="mk-msg-body">
            <McpIndicator theme="dark" tools={[m.mcp.createTable, `${m.mcp.queryPrefix} · ${m.mcp.ctxGastos}`]}/>
            <p>{t.intro}</p>
            <table className="mk-gpt-table">
              <thead>
                <tr>{t.cols.map((c, i) => <th key={i}>{c}</th>)}</tr>
              </thead>
              <tbody>
                {t.rows.map((r, i) => (
                  <tr key={i}>
                    <td><span className="mk-gpt-bullet" style={{background: r.color}}></span>{r.cat}</td>
                    <td>{r.spend}</td>
                    <td className="mk-gpt-positive">{r.save}</td>
                    <td>{r.action}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <p className="mk-gpt-foot">{t.footPre}<strong>{t.footTotal}</strong>{t.footPost}</p>
          </div>
        </div>
      </div>
      <div className="mk-gpt-input">
        <span className="mk-gpt-input-ico">+</span>
        <input placeholder={t.placeholder} readOnly/>
        <button>↑</button>
      </div>
    </div>
  );
};

/* ── Mockup: Gemini (retention) ─────────────────────────────── */

const GeminiRetention = () => {
  const m = useM();
  const t = m.geminiRetention;
  return (
    <div className="mk-gem">
      <div className="mk-gem-head">
        <GeminiLogo size={20}/>
        <span className="mk-gem-title">Gemini</span>
        <span className="mk-gem-chip">{t.chip}</span>
      </div>
      <div className="mk-gem-body">
        <div className="mk-msg-user is-gem">
          <div className="mk-msg-body">{t.user}</div>
        </div>
        <div className="mk-msg-bot is-gem">
          <div className="mk-msg-avatar"><GeminiLogo size={20}/></div>
          <div className="mk-msg-body">
            <McpIndicator theme="dark" tools={[m.mcp.createTable, `${m.mcp.queryPrefix} · ${m.mcp.ctxRiesgo}`]}/>
            <p>{t.intro_pre}<strong>{t.intro_strong}</strong>{t.intro_post}</p>
            <div className="mk-gem-list">
              {t.rows.map((r, i) => (
                <div key={i} className="mk-gem-row">
                  <div className="mk-gem-row-top">
                    <span className="mk-gem-row-name">{r.name}</span>
                    <span className="mk-gem-row-acct">{r.acct}{t.acctSuffix}</span>
                  </div>
                  <div className="mk-gem-row-mid">
                    <span className="mk-gem-meter">
                      <span className="mk-gem-meter-fill" style={{ width: r.risk + '%' }}></span>
                    </span>
                    <span className="mk-gem-meter-num">{r.risk}</span>
                  </div>
                  <div className="mk-gem-signals">
                    {r.signals.map((s, j) => <span key={j} className="mk-gem-signal">{s}</span>)}
                  </div>
                </div>
              ))}
            </div>
            <p className="mk-gem-foot">{t.footPre}<strong>{t.footTotal}</strong>{t.footPost}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ── Mobile mockups ─────────────────────────────────────────── */

const ChatGPTMobileStock = () => {
  const m = useM();
  const t = m.chatgptStock;
  return (
    <div className="mk-mobile-gpt">
      <div className="mk-mobile-gpt-head">
        <GPTLogo size={16}/>
        <span>ChatGPT</span>
        <span className="mk-mobile-gpt-sub">{t.sub}</span>
      </div>
      <div className="mk-mobile-gpt-body">
        <div className="mk-msg-user is-gpt-mob">
          <div className="mk-msg-body">{t.user}</div>
        </div>
        <div className="mk-msg-bot is-gpt-mob">
          <div className="mk-msg-body">
            <McpIndicator tools={[m.mcp.createTable, `${m.mcp.queryPrefix} · ${m.mcp.ctxStock}`]}/>
            <p>{t.intro}</p>
            <div className="mk-stock-hero">
              <span className="mk-stock-num">{t.heroNum}</span>
              <span className="mk-stock-label">{t.heroLabel}</span>
            </div>
            {t.rows.map((r, i) => (
              <div key={i} className="mk-stock-row">
                <span>{r.name}</span>
                <span className="mk-stock-bar"><i style={{ width: r.bar + '%' }}></i></span>
                <span>{r.val}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const ClaudeMobileProduct = () => {
  const m = useM();
  const t = m.claudeProduct;
  return (
    <div className="mk-mobile-claude">
      <div className="mk-mobile-claude-head">
        <ClaudeLogo size={16}/>
        <span>Claude</span>
      </div>
      <div className="mk-mobile-claude-body">
        <div className="mk-msg-user is-claude-mob">
          <div className="mk-msg-body">{t.user}</div>
        </div>
        <div className="mk-msg-bot is-claude-mob">
          <div className="mk-msg-body">
            <McpIndicator tools={[m.mcp.createTable, `${m.mcp.queryPrefix} · ${m.mcp.ctxMargen}`]}/>
            <p className="mk-claude-mb-lead">{t.intro}</p>
            {t.rows.map((p, i) => (
              <div key={i} className="mk-product-row">
                <div className="mk-product-rank">{i + 1}</div>
                <div className="mk-product-info">
                  <div className="mk-product-name">{p.name}</div>
                  <div className="mk-product-sku">{p.sku} · {p.rev}</div>
                </div>
                <div className="mk-product-margin">{p.margin}%</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

/* ── Forecast (Gemini desktop) ─────────────────────────────── */

const GeminiForecast = () => {
  const m = useM();
  const t = m.geminiForecast;
  const past = [42, 48, 45, 52, 58, 61, 65, 63, 68, 72, 75, 78];
  const forecast = [82, 86, 91];
  const all = [...past, ...forecast];
  const max = Math.max(...all);
  const W = 540, H = 180, P = 24;
  const stepX = (W - P * 2) / (all.length - 1);
  const points = all.map((v, i) => [P + i * stepX, H - P - ((v / max) * (H - P * 2))]);
  const path = points.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const splitX = points[past.length - 1][0];

  return (
    <div className="mk-gem">
      <div className="mk-gem-head">
        <GeminiLogo size={20}/>
        <span className="mk-gem-title">Gemini</span>
        <span className="mk-gem-chip">{t.chip}</span>
      </div>
      <div className="mk-gem-body">
        <div className="mk-msg-user is-gem">
          <div className="mk-msg-body">{t.user}</div>
        </div>
        <div className="mk-msg-bot is-gem">
          <div className="mk-msg-avatar"><GeminiLogo size={20}/></div>
          <div className="mk-msg-body">
            <McpIndicator theme="dark" tools={[m.mcp.createTable, `${m.mcp.queryPrefix} · ${m.mcp.ctxVentas}`]}/>
            <p>{t.intro}</p>
            <div className="mk-forecast">
              <div className="mk-forecast-head">
                <span className="mk-forecast-title">{t.title}</span>
                <span className="mk-forecast-up">{t.up}</span>
              </div>
              <svg viewBox={`0 0 ${W} ${H}`} className="mk-forecast-chart">
                <defs>
                  <linearGradient id="fc-area" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#4285F4" stopOpacity="0.35"/>
                    <stop offset="100%" stopColor="#4285F4" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                {[0,1,2,3].map(g => (
                  <line key={g} x1={P} x2={W-P} y1={P + g*(H-P*2)/3} y2={P + g*(H-P*2)/3} stroke="#eef" strokeWidth="1"/>
                ))}
                <path d={`${path} L${W-P},${H-P} L${P},${H-P} Z`} fill="url(#fc-area)"/>
                <path d={path} stroke="#4285F4" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
                <line x1={splitX} x2={splitX} y1={P} y2={H-P} stroke="#9B72CB" strokeWidth="1.5" strokeDasharray="4 4"/>
                <text x={splitX + 6} y={P + 12} fontSize="10" fill="#9B72CB" fontWeight="600">{t.forecastLabel}</text>
                {points.map((p, i) => (
                  <circle key={i} cx={p[0]} cy={p[1]} r={i >= past.length ? 4 : 2.5}
                          fill={i >= past.length ? '#9B72CB' : '#4285F4'}/>
                ))}
              </svg>
              <div className="mk-forecast-cards">
                {t.cardLabels.map((label, i) => (
                  <div key={i} className="mk-forecast-card">
                    <i className={`ph-bold ${['ph-calendar-blank', 'ph-currency-dollar', 'ph-seal-check'][i]} mk-forecast-card-icon`}></i>
                    <span className="mk-forecast-card-label">{label}</span>
                    <span className="mk-forecast-card-num">{t.cardNums[i]}</span>
                  </div>
                ))}
              </div>
            </div>
            <p className="mk-gem-foot">{t.foot}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ── Capabilities ───────────────────────────────────────────── */

const CAPABILITIES = [
  { key: 'vender',    icon: 'ph-trend-up',    surface: 'web',    render: () => <BrowserFrame url="claude.ai/chat"><ClaudeSales/></BrowserFrame> },
  { key: 'costos',    icon: 'ph-scissors',    surface: 'web',    render: () => <BrowserFrame url="chat.openai.com" theme="gpt"><ChatGPTCosts/></BrowserFrame> },
  { key: 'retener',   icon: 'ph-users-three', surface: 'web',    render: () => <BrowserFrame url="gemini.google.com" theme="gem"><GeminiRetention/></BrowserFrame> },
  { key: 'stock',     icon: 'ph-package',     surface: 'mobile', render: () => <PhoneFrame><ChatGPTMobileStock/></PhoneFrame> },
  { key: 'producto',  icon: 'ph-star',        surface: 'mobile', render: () => <PhoneFrame><ClaudeMobileProduct/></PhoneFrame> },
  { key: 'anticipar', icon: 'ph-chart-line-up', surface: 'web',   render: () => <BrowserFrame url="gemini.google.com/forecast" theme="gem"><GeminiForecast/></BrowserFrame> },
];

/* ── Features section ───────────────────────────────────────── */

const Features = () => {
  const m = useM();
  const [active, setActive] = useState(0);
  const cap = CAPABILITIES[active];

  return (
    <section className="tm-features" id="capabilities">
      <div className="tm-container">
        <div className="tm-features-tabs" role="tablist">
          {CAPABILITIES.map((cp, i) => {
            const labels = m.caps[cp.key];
            return (
              <button
                key={cp.key}
                role="tab"
                aria-selected={i === active}
                className={`tm-features-tab ${i === active ? 'is-active' : ''}`}
                onClick={() => setActive(i)}
              >
                <span className="tm-features-tab-icon" aria-hidden="true">
                  <i className={`ph-bold ${cp.icon}`}></i>
                </span>
                <span>
                  <span className="tm-features-tab-label">{labels.label}</span>
                  <br/>
                  <span className="tm-features-tab-sub">{labels.sub}</span>
                </span>
              </button>
            );
          })}
        </div>

        <div className={`tm-features-stage tm-features-stage--${cap.surface}`} key={cap.key}>
          {cap.render()}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Features, CAPABILITIES });