// ═══════════════════════════════════════════════════════
// BAUKO CRM v2 — Ecossistema (hub de produtos integrados)
// ═══════════════════════════════════════════════════════
/* global React, CRM_DATA, Panel, Badge, fR */

function Ecossistema({ onNav }) {
  const produtos = [
    {
      key: "estoque", nome: "Estoque & Catálogo", tag: "ERP Bauko",
      desc: "Disponibilidade em tempo real de máquinas Komatsu, Manitou, Bomag e Yanmar nas filiais.",
      icon: "package", cor: "#007c44",
      stats: [{ k: "342", v: "máquinas ativas" }, { k: "12", v: "filiais conectadas" }],
      actions: [
        { label: "Reservar máquina", icon: "lock" },
        { label: "Conferir disponibilidade", icon: "search" },
      ],
    },
    {
      key: "configurador", nome: "Configurador técnico", tag: "Web",
      desc: "Monte a especificação completa do equipamento — implementos, lança, esteira, contrapeso — e gere ficha técnica.",
      icon: "sliders-horizontal", cor: "#3370b7",
      stats: [{ k: "47", v: "modelos" }, { k: "180+", v: "opcionais" }],
      actions: [
        { label: "Abrir configurador", icon: "external-link" },
        { label: "Importar para proposta", icon: "arrow-right-from-line" },
      ],
    },
    {
      key: "bkb", nome: "BKB · Banco Komatsu", tag: "Financeiro",
      desc: "Simulações de financiamento direto da fábrica com taxas dedicadas, prazos até 60 meses e aprovação digital.",
      icon: "landmark", cor: "#f4a300",
      stats: [{ k: "60 m", v: "prazo máx." }, { k: "0,89%", v: "taxa min. a.m." }],
      actions: [
        { label: "Simular financiamento", icon: "calculator" },
        { label: "Anexar à proposta atual", icon: "paperclip" },
      ],
    },
    {
      key: "pos_venda", nome: "Pós-venda & Peças", tag: "Service",
      desc: "Histórico de manutenções, ordens de serviço, contratos PMP e disponibilidade de peças genuínas.",
      icon: "wrench", cor: "#2e8b57",
      stats: [{ k: "1.247", v: "OS no mês" }, { k: "98,2%", v: "fill-rate peças" }],
      actions: [
        { label: "Ver contratos do cliente", icon: "file-check" },
        { label: "Solicitar visita técnica", icon: "calendar-plus" },
      ],
    },
    {
      key: "intel", nome: "Inteligência competitiva", tag: "Insights",
      desc: "Mercado de máquinas, win/loss vs Caterpillar e Volvo, sinais de oportunidade por região.",
      icon: "radar", cor: "#c94a4a",
      stats: [{ k: "23", v: "alertas ativos" }, { k: "67%", v: "win-rate" }],
      actions: [
        { label: "Ver mapa de oportunidades", icon: "map" },
        { label: "Analisar concorrente", icon: "swords" },
      ],
    },
    {
      key: "treinamento", nome: "Bauko Academy", tag: "Treinamento",
      desc: "Capacitação de operadores e mecânicos in loco e EaD. Inclusa em pacotes selecionados.",
      icon: "graduation-cap", cor: "#706f6f",
      stats: [{ k: "84", v: "turmas/ano" }, { k: "920", v: "alunos formados" }],
      actions: [
        { label: "Agendar turma", icon: "calendar-clock" },
        { label: "Ver programa", icon: "book-open" },
      ],
    },
  ];

  const integracoes = [
    { nome: "ERP Komatsu (KSM)", status: "online", desc: "Sincronizando pedidos, faturamento e estoque" },
    { nome: "BKB API", status: "online", desc: "Simulações em tempo real" },
    { nome: "Receita Federal", status: "online", desc: "Validação de CNPJ e situação fiscal" },
    { nome: "WhatsApp Business", status: "online", desc: "Envios e templates aprovados" },
    { nome: "DocuSign", status: "online", desc: "Aceite digital de propostas" },
    { nome: "Google Calendar", status: "atencao", desc: "Sincronização de agenda · 2 conflitos" },
  ];

  const statusColor = { online: "var(--ok)", atencao: "var(--warn)", offline: "var(--danger)" };
  const statusLabel = { online: "Conectado", atencao: "Atenção", offline: "Offline" };

  return (
    <div data-screen-label="06 Ecossistema">
      {/* Hero strip */}
      <div style={{
        background: "linear-gradient(135deg, var(--grn-700) 0%, var(--grn) 100%)",
        color: "#fff", borderRadius: "var(--r-lg)", padding: "26px 28px",
        marginBottom: 18, position: "relative", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: `radial-gradient(circle at 20% 80%, rgba(255,255,255,.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,.06) 0%, transparent 50%)`,
          pointerEvents: "none",
        }}></div>
        <div style={{ position: "relative", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 620 }}>
            <div style={{ font: "600 11px/1 var(--ff-body)", textTransform: "uppercase", letterSpacing: ".1em", opacity: .85, marginBottom: 10 }}>
              Hub de produtos Bauko
            </div>
            <h2 style={{ font: "400 36px/1.05 var(--ff-display)", letterSpacing: ".02em", textTransform: "uppercase", margin: 0 }}>
              Tudo que o time comercial precisa, em um lugar só
            </h2>
            <p style={{ font: "400 13px/1.55 var(--ff-body)", opacity: .9, marginTop: 12, maxWidth: 540 }}>
              O CRM conversa diretamente com o ERP Komatsu, BKB, configurador técnico e canais de comunicação. 
              Acesse cada produto sem trocar de janela e mantenha o contexto da oportunidade.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, minWidth: 260 }}>
            {[
              { k: "6", v: "produtos integrados" },
              { k: "12", v: "APIs ativas" },
              { k: "99,4%", v: "uptime mês" },
              { k: "< 2s", v: "tempo médio" },
            ].map((s, i) => (
              <div key={i} style={{
                background: "rgba(255,255,255,.1)", border: "1px solid rgba(255,255,255,.15)",
                borderRadius: "var(--r-md)", padding: "12px 14px", backdropFilter: "blur(8px)",
              }}>
                <div style={{ font: "400 22px/1 var(--ff-mono)", fontWeight: 500 }}>{s.k}</div>
                <div style={{ font: "400 10px/1.2 var(--ff-body)", opacity: .85, marginTop: 4 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Produtos grid */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: 14, marginBottom: 22 }}>
        {produtos.map(p => (
          <div key={p.key} style={{
            background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)",
            padding: 18, boxShadow: "var(--shadow-1)", display: "flex", flexDirection: "column", gap: 12,
            transition: "all 200ms", cursor: "pointer",
          }}
            onMouseEnter={e => { e.currentTarget.style.boxShadow = "var(--shadow-2)"; e.currentTarget.style.borderColor = "var(--border-2)"; }}
            onMouseLeave={e => { e.currentTarget.style.boxShadow = "var(--shadow-1)"; e.currentTarget.style.borderColor = "var(--border)"; }}
          >
            <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 10 }}>
              <div style={{
                width: 44, height: 44, borderRadius: "var(--r-md)",
                background: `${p.cor}18`, display: "grid", placeItems: "center", flexShrink: 0,
              }}>
                <i data-lucide={p.icon} style={{ width: 22, height: 22, color: p.cor }}></i>
              </div>
              <span style={{
                font: "600 9px/1 var(--ff-body)", textTransform: "uppercase", letterSpacing: ".08em",
                color: "var(--tx-3)", background: "var(--surface-2)", border: "1px solid var(--border)",
                borderRadius: "var(--r-pill)", padding: "4px 8px",
              }}>{p.tag}</span>
            </div>
            <div>
              <h3 style={{ font: "600 15px/1.2 var(--ff-body)", color: "var(--tx)", margin: 0 }}>{p.nome}</h3>
              <p style={{ font: "400 12px/1.55 var(--ff-body)", color: "var(--tx-2)", marginTop: 6 }}>{p.desc}</p>
            </div>
            <div style={{
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, paddingTop: 4,
              borderTop: "1px solid var(--border)", marginTop: 4,
            }}>
              {p.stats.map((s, i) => (
                <div key={i} style={{ paddingTop: 10 }}>
                  <div style={{ font: "400 18px/1 var(--ff-mono)", color: "var(--tx)", fontWeight: 500 }}>{s.k}</div>
                  <div style={{ font: "400 10px/1.2 var(--ff-body)", color: "var(--tx-3)", marginTop: 4 }}>{s.v}</div>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 4 }}>
              {p.actions.map((a, i) => (
                <button key={i} className={i === 0 ? "btn btn-primary" : "btn btn-secondary"} style={{ padding: "7px 11px", fontSize: 12 }}>
                  <i data-lucide={a.icon}></i> {a.label}
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Integrações ativas */}
      <Panel title="Integrações ativas" meta={`${integracoes.length} sistemas conectados`}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 10 }}>
          {integracoes.map((i, idx) => (
            <div key={idx} style={{
              display: "flex", alignItems: "center", gap: 10, padding: "10px 12px",
              background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: "var(--r-md)",
            }}>
              <div style={{
                width: 8, height: 8, borderRadius: "50%", background: statusColor[i.status],
                boxShadow: `0 0 0 3px ${statusColor[i.status]}33`,
              }}></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ font: "500 12px/1.2 var(--ff-body)", color: "var(--tx)" }}>{i.nome}</div>
                <div style={{ font: "400 10px/1.3 var(--ff-mono)", color: "var(--tx-3)", marginTop: 3 }}>{i.desc}</div>
              </div>
              <span style={{
                font: "600 9px/1 var(--ff-body)", textTransform: "uppercase", letterSpacing: ".06em",
                color: statusColor[i.status],
              }}>{statusLabel[i.status]}</span>
            </div>
          ))}
        </div>
      </Panel>
    </div>
  );
}
window.Ecossistema = Ecossistema;