import React from "react";

const card: React.CSSProperties = {
  background: "#ffffff",
  border: "1px solid #e2e8f0",
  borderRadius: 16,
  padding: 20,
  boxShadow: "0 8px 28px rgba(15, 23, 42, 0.06)",
};

const h2: React.CSSProperties = {
  fontSize: 28,
  fontWeight: 800,
  margin: "0 0 10px 0",
  color: "#0f172a",
};

const sectionTitle: React.CSSProperties = {
  fontSize: 22,
  fontWeight: 800,
  margin: "0 0 8px 0",
  color: "#0f172a",
};

const list: React.CSSProperties = {
  margin: "10px 0 0 0",
  paddingLeft: 18,
  color: "#334155",
  lineHeight: 1.6,
};

function Badge({ text }: { text: string }) {
  return (
    <span
      style={{
        display: "inline-block",
        padding: "6px 10px",
        borderRadius: 999,
        background: "#e0ecff",
        color: "#1d4ed8",
        fontSize: 12,
        fontWeight: 700,
        marginRight: 8,
        marginBottom: 8,
      }}
    >
      {text}
    </span>
  );
}

function Step({ n, title, detail }: { n: string; title: string; detail: string }) {
  return (
    <div style={{ ...card, padding: 16 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
        <div
          style={{
            width: 28,
            height: 28,
            borderRadius: "50%",
            background: "#1d4ed8",
            color: "#fff",
            display: "grid",
            placeItems: "center",
            fontWeight: 800,
            fontSize: 13,
          }}
        >
          {n}
        </div>
        <div style={{ fontWeight: 700, color: "#0f172a" }}>{title}</div>
      </div>
      <div style={{ color: "#475569", fontSize: 14, lineHeight: 1.55 }}>{detail}</div>
    </div>
  );
}

export default function ApresentacaoSistemaAppCanvas() {
  return (
    <div
      style={{
        fontFamily:
          "Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
        background: "#f8fafc",
        color: "#0f172a",
        padding: 24,
      }}
    >
      <div style={{ ...card, background: "linear-gradient(135deg, #eff6ff, #ffffff)" }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: "#1d4ed8", marginBottom: 8 }}>
          APRESENTACAO VISUAL
        </div>
        <h1 style={{ fontSize: 38, margin: 0, lineHeight: 1.15 }}>Sistema RH + Aplicativo do Colaborador</h1>
        <p style={{ margin: "12px 0 0 0", color: "#475569", fontSize: 16 }}>
          Visao ponta a ponta de funcionalidades, fluxos, seguranca e beneficios de negocio.
        </p>
        <div style={{ marginTop: 14 }}>
          <Badge text="Painel RH (Web)" />
          <Badge text="Aplicativo (Mobile)" />
          <Badge text="Chat em tempo quase real" />
          <Badge text="Ponto + Documentos + Assinatura" />
        </div>
      </div>

      <div style={{ height: 16 }} />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div style={card}>
          <h2 style={h2}>1. Visao Geral da Solucao</h2>
          <ul style={list}>
            <li>
              <b>Sistema RH (web):</b> gestao de colaboradores, ponto, documentos, holerites, monitoramento e chat.
            </li>
            <li>
              <b>Aplicativo:</b> ponto do colaborador, assinatura de holerite, chat com RH e modulos operacionais.
            </li>
            <li>
              <b>Back-end central:</b> API + banco por tenant, com regras de seguranca e rastreabilidade.
            </li>
          </ul>
        </div>
        <div style={card}>
          <h2 style={h2}>2. Problema que Resolve</h2>
          <ul style={list}>
            <li>Desorganizacao documental e dificuldade de comprovar assinaturas.</li>
            <li>Retrabalho no RH para cobranca e acompanhamento manual.</li>
            <li>Comunicacao descentralizada entre RH e colaboradores.</li>
            <li>Falta de controle integrado de ponto, documentos e obrigacoes.</li>
          </ul>
        </div>
      </div>

      <div style={{ height: 16 }} />

      <div style={card}>
        <h2 style={h2}>3. Tudo que o Sistema RH Tem</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Step n="3.1" title="Acesso e Seguranca" detail="Login do painel, perfis/permissoes, recuperacao de senha por CPF e protecoes de sessao/CSRF." />
          <Step n="3.2" title="Gestao de Colaboradores" detail="Cadastro, edicao, historico e organizacao de dados para manter base consistente." />
          <Step n="3.3" title="Ponto Gerencial" detail="Conferencia, ajustes e regras de jornada por empresa/departamento/colaborador." />
          <Step n="3.4" title="Documentos e Holerites" detail="Upload por colaborador, organizacao por pastas, trilha de assinatura e pacote assinado." />
          <Step n="3.5" title="Chat RH x Colaborador" detail="Mensagem de texto e anexos (imagem/PDF/arquivo), leitura e atualizacao quase em tempo real." />
          <Step n="3.6" title="Modulos Operacionais" detail="Ronda, limpeza, solicitacoes, monitoramento e recursos ativados por feature flag." />
        </div>
      </div>

      <div style={{ height: 16 }} />

      <div style={card}>
        <h2 style={h2}>4. Tudo que o Aplicativo Tem</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Step n="4.1" title="Login e Sessao" detail="Acesso autenticado do colaborador com contexto de tenant e colaborador." />
          <Step n="4.2" title="Home Inteligente" detail="Atalhos operacionais, aviso de pendencias e contador de mensagens do RH." />
          <Step n="4.3" title="Registro de Ponto" detail="Fluxo conforme regra da empresa (botao/facial/QR), com validacoes de backend." />
          <Step n="4.4" title="Holerites e Assinatura" detail="Lista de pendentes/assinados, visualizacao do PDF e assinatura no app." />
          <Step n="4.5" title="Chat com RH" detail="Texto, envio de imagem/PDF/arquivo, preview visual e navegacao de retorno para index." />
          <Step n="4.6" title="Modulos Condicionais" detail="Ronda, limpeza, solicitacoes e diario de condominio conforme configuracao do RH." />
        </div>
      </div>

      <div style={{ height: 16 }} />

      <div style={card}>
        <h2 style={h2}>5. Fluxo Ponta a Ponta (Principal)</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 10 }}>
          {[
            "RH publica holerite",
            "App exibe pendencia",
            "Ponto fica bloqueado",
            "Colaborador abre e assina",
            "Sistema registra assinatura",
            "Pendencia some",
            "Ponto e liberado",
          ].map((s, i) => (
            <div key={s} style={{ ...card, padding: 12, textAlign: "center", minHeight: 96 }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: "#1d4ed8" }}>ETAPA {i + 1}</div>
              <div style={{ marginTop: 6, fontWeight: 600, color: "#1e293b", fontSize: 13 }}>{s}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ height: 16 }} />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div style={card}>
          <h3 style={sectionTitle}>6. Seguranca e Governanca</h3>
          <ul style={list}>
            <li>Isolamento por tenant (dados separados por empresa).</li>
            <li>Autenticacao no painel e no app, com validacao no backend.</li>
            <li>Permissoes por perfil para limitar acoes sensiveis.</li>
            <li>Regras de negocio impedem bypass (ex.: bloqueio de ponto).</li>
            <li>Trilha de eventos e auditoria para conformidade.</li>
          </ul>
        </div>
        <div style={card}>
          <h3 style={sectionTitle}>7. Beneficios para a Empresa</h3>
          <ul style={list}>
            <li>Reducao de retrabalho no RH.</li>
            <li>Mais agilidade no fechamento de pendencias.</li>
            <li>Comunicacao direta e rastreavel com colaborador.</li>
            <li>Padronizacao operacional e mais controle de processo.</li>
            <li>Escalabilidade para crescer sem perder governanca.</li>
          </ul>
        </div>
      </div>

      <div style={{ height: 16 }} />

      <div style={card}>
        <h2 style={h2}>8. Proposta de Implantacao</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10 }}>
          <Step n="1" title="Setup Inicial" detail="Configurar tenant, usuarios do RH e regras essenciais." />
          <Step n="2" title="Base de Colaboradores" detail="Importar/cadastrar equipe e conferir dados-chave." />
          <Step n="3" title="Treinamento Rapido" detail="Capacitar RH e lideres com roteiro operacional." />
          <Step n="4" title="Piloto Assistido" detail="Rodar com grupo reduzido e ajustar pontos finos." />
          <Step n="5" title="Go-Live" detail="Expandir para toda empresa com acompanhamento inicial." />
        </div>
      </div>

      <div style={{ height: 16 }} />

      <div style={{ ...card, border: "1px solid #bfdbfe", background: "#eff6ff" }}>
        <h2 style={{ ...h2, color: "#1e3a8a" }}>Mensagem Final para a Reuniao</h2>
        <p style={{ margin: 0, color: "#1e3a8a", lineHeight: 1.6 }}>
          O sistema integra ponto, documentos, assinatura e comunicacao em um unico fluxo.
          <br />
          Isso reduz atrito operacional, aumenta controle do RH e melhora a experiencia do colaborador.
        </p>
      </div>
    </div>
  );
}