<?php
// Depto de Engenharia e Automação - Master Automação - Autor: Derlivon Silva
$nomeEmpresa = trim((string)($config['nome_empresa'] ?? ($config['empresa'] ?? '')));
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= \App\Core\View::e($titulo ?? 'Cozinha — Início') ?></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<style>
:root{
  --bg:#0a0e14; --bg2:#10151c; --card:#1a2230; --border:#2a3340;
  --txt:#f1f5f9; --muted:#94a3b8;
  --verde:#10b981; --amarelo:#f59e0b; --indigo:#6366F1; --azul:#3b82f6; --cinza:#64748b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;min-height:100vh}
a{text-decoration:none;color:inherit}

.mn-topbar{
  display:flex;align-items:center;gap:1rem;padding:1.4rem 2rem;background:var(--bg2);
  border-bottom:2px solid var(--border)
}
.mn-logo{display:flex;align-items:center;gap:.8rem;font-size:1.8rem;font-weight:800;color:var(--indigo)}
.mn-logo i{font-size:2.2rem}
.mn-empresa{font-size:1.1rem;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-versao{font-size:.8rem;color:#475569;background:#0d141d;padding:.3rem .7rem;border-radius:6px;border:1px solid var(--border)}

.mn-wrap{max-width:1300px;margin:0 auto;padding:2.5rem 2rem}
.mn-titulo{font-size:2rem;font-weight:800;margin-bottom:.4rem;letter-spacing:-.02em}
.mn-sub{color:var(--muted);font-size:1.05rem;margin-bottom:2.5rem;max-width:680px}

.mn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}

.mn-card{
  background:var(--card);border:2px solid var(--border);border-radius:18px;padding:1.8rem 1.4rem;
  display:flex;flex-direction:column;gap:.9rem;cursor:pointer;
  transition:transform .15s,border-color .25s,background .25s;
  position:relative;overflow:hidden;text-align:left
}
.mn-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none
}
.mn-card:hover{transform:translateY(-4px)}

.mn-card.verde:hover  { border-color:var(--verde);   box-shadow:0 8px 30px rgba(16,185,129,.25) }
.mn-card.amarelo:hover{ border-color:var(--amarelo); box-shadow:0 8px 30px rgba(245,158,11,.25) }
.mn-card.indigo:hover { border-color:var(--indigo);  box-shadow:0 8px 30px rgba(99,102,241,.25) }
.mn-card.cinza:hover  { border-color:var(--cinza);   box-shadow:0 8px 30px rgba(100,116,139,.25) }

.mn-card-icone{
  width:74px;height:74px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;font-size:2.4rem
}
.mn-card.verde   .mn-card-icone{ background:rgba(16,185,129,.18);  color:var(--verde) }
.mn-card.amarelo .mn-card-icone{ background:rgba(245,158,11,.18); color:var(--amarelo) }
.mn-card.indigo  .mn-card-icone{ background:rgba(99,102,241,.18); color:var(--indigo) }
.mn-card.cinza   .mn-card-icone{ background:rgba(100,116,139,.20);color:#cbd5e1 }

.mn-card-titulo{font-size:1.35rem;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.mn-card-desc{font-size:.95rem;color:var(--muted);line-height:1.4;flex:1}
.mn-card-link{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:700;
  margin-top:.4rem
}
.mn-card.verde   .mn-card-link{ color:var(--verde) }
.mn-card.amarelo .mn-card-link{ color:var(--amarelo) }
.mn-card.indigo  .mn-card-link{ color:var(--indigo) }
.mn-card.cinza   .mn-card-link{ color:#cbd5e1 }
.mn-card-link i{transition:transform .15s}
.mn-card:hover .mn-card-link i{transform:translateX(4px)}

.mn-secundario{
  margin-top:2.5rem;padding-top:1.8rem;border-top:1px solid var(--border)
}
.mn-secundario h3{font-size:.9rem;color:var(--muted);font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:1rem}
.mn-secundario-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}
.mn-secundario-card{
  background:#131922;border:1px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;
  display:flex;align-items:center;gap:.7rem;color:var(--muted);transition:background .2s,color .2s
}
.mn-secundario-card:hover{background:#1a2230;color:var(--txt)}
.mn-secundario-card i{font-size:1.3rem;color:var(--azul)}

.mn-rodape{text-align:center;padding:1rem;font-size:.8rem;color:#475569;border-top:1px solid var(--border);background:#070a0e;margin-top:3rem}
</style>
</head>
<body>

<div class="mn-topbar">
    <div class="mn-logo"><i class="bi bi-fire"></i><span>Cozinha</span></div>
    <div class="mn-empresa"><?= \App\Core\View::e($nomeEmpresa) ?></div>
    <span class="mn-versao">v<?= \App\Core\View::e(\App\Core\Versao::ATUAL) ?></span>
</div>

<div class="mn-wrap">

    <h1 class="mn-titulo">O que você quer fazer agora?</h1>
    <p class="mn-sub">Toque em um dos cartões pra abrir a tela. Cada um é um aplicativo separado da operação da cozinha.</p>

    <div class="mn-grid">

        <a href="/cozinha" class="mn-card verde">
            <div class="mn-card-icone"><i class="bi bi-display"></i></div>
            <div class="mn-card-titulo">Painel da Cozinha</div>
            <div class="mn-card-desc">Tela do tablet na cozinha. Mostra os pedidos com cronômetro e botão "Pronto".</div>
            <span class="mn-card-link">Abrir painel <i class="bi bi-arrow-right"></i></span>
        </a>

        <a href="/cozinha/avisos" class="mn-card amarelo">
            <div class="mn-card-icone"><i class="bi bi-bell-fill"></i></div>
            <div class="mn-card-titulo">Avisos pro Garçom</div>
            <div class="mn-card-desc">Tela da TV no balcão. Quando o prato fica pronto, aparece aqui com bipe.</div>
            <span class="mn-card-link">Abrir avisos <i class="bi bi-arrow-right"></i></span>
        </a>

        <a href="/cozinha/relatorio" class="mn-card indigo">
            <div class="mn-card-icone"><i class="bi bi-stopwatch"></i></div>
            <div class="mn-card-titulo">Tempo de Preparo</div>
            <div class="mn-card-desc">Relatório do gerente. Tempo de cada prato individual, ranking de garçons, gráficos.</div>
            <span class="mn-card-link">Ver relatório <i class="bi bi-arrow-right"></i></span>
        </a>

        <a href="/cozinha/config" class="mn-card cinza">
            <div class="mn-card-icone"><i class="bi bi-sliders"></i></div>
            <div class="mn-card-titulo">Configurar</div>
            <div class="mn-card-desc">Ajustar tempo de alerta (verde/amarelo/vermelho) e quais grupos vão pra fila.</div>
            <span class="mn-card-link">Configurar <i class="bi bi-arrow-right"></i></span>
        </a>

    </div>

    <div class="mn-secundario">
        <h3>Outras opções</h3>
        <div class="mn-secundario-grid">
            <a href="/cozinha/links" class="mn-secundario-card">
                <i class="bi bi-qr-code"></i>
                <div>
                    <div style="font-weight:700">Links e QR Code</div>
                    <div style="font-size:.78rem">Endereços pra apontar tablet e TV</div>
                </div>
            </a>
        </div>
    </div>

</div>

<div class="mn-rodape">
    Fire Sistemas &middot; Premium Express BI v<?= \App\Core\View::e(\App\Core\Versao::ATUAL) ?> &middot; Cozinha
</div>

</body>
</html>
