/* ─────────────────────────────────────────────────────────
   Product screen mockups. Now using REAL screenshots of the
   RestaurantePro system (assets/screens/*.png) wrapped in
   browser chrome.
   ───────────────────────────────────────────────────────── */

/* Chrome wrapper */
const BrowserChrome = ({ children, url = "app.restaurantepro.com.br", className = "" }) => (
  <div className={`rounded-2xl overflow-hidden bg-[#0b1220] shadow-[0_40px_120px_-20px_rgba(2,6,23,.45),0_10px_30px_-10px_rgba(2,6,23,.4)] ring-1 ring-black/5 ${className}`}>
    <div className="flex items-center gap-2 px-3.5 py-2.5 bg-[#0f172a] border-b border-white/5">
      <div className="flex gap-1.5">
        <span className="w-2.5 h-2.5 rounded-full bg-red-400/80"></span>
        <span className="w-2.5 h-2.5 rounded-full bg-amber-400/80"></span>
        <span className="w-2.5 h-2.5 rounded-full bg-green-400/80"></span>
      </div>
      <div className="mx-auto px-3 py-1 rounded-md bg-black/30 text-[10px] text-white/50 mono tracking-tight">{url}</div>
      <div className="w-10"></div>
    </div>
    {children}
  </div>
);

const PhoneChrome = ({ children, className = "" }) => (
  <div className={`relative rounded-[36px] bg-[#0c0a09] p-2 shadow-[0_40px_120px_-20px_rgba(2,6,23,.55),0_10px_30px_-10px_rgba(2,6,23,.5)] ${className}`}>
    <div className="relative rounded-[28px] overflow-hidden bg-[#0f172a]">
      <div className="absolute top-0 left-1/2 -translate-x-1/2 h-6 w-28 bg-black rounded-b-2xl z-10"></div>
      {children}
    </div>
  </div>
);

/* Shared screen image component — real screenshots */
const ScreenImage = ({ src, alt }) => (
  <div className="relative bg-[#0b1220]">
    <img src={src} alt={alt}
         className="block w-full h-auto select-none"
         draggable="false"
         loading="lazy"/>
  </div>
);

const MockReservas    = () => <BrowserChrome url="app.restaurantepro.com.br/reservas"><ScreenImage src="assets/screens/reservas.png" alt="Painel de Reservas"/></BrowserChrome>;
const MockWhatsApp    = () => <BrowserChrome url="app.restaurantepro.com.br/mensagens"><ScreenImage src="assets/screens/mensagens.png" alt="Mensagens e WhatsApp integrado"/></BrowserChrome>;
const MockCardapio    = () => <BrowserChrome url="app.restaurantepro.com.br/cardapio"><ScreenImage src="assets/screens/cardapio.png" alt="Cardápio e Delivery"/></BrowserChrome>;
const MockAvaliacoes  = () => <BrowserChrome url="app.restaurantepro.com.br/avaliacoes"><ScreenImage src="assets/screens/avaliacoes.png" alt="Avaliações de Clientes"/></BrowserChrome>;
const MockCRM         = () => <BrowserChrome url="app.restaurantepro.com.br/crm"><ScreenImage src="assets/screens/crm.png" alt="CRM — Clientes"/></BrowserChrome>;
const MockFichas      = () => <BrowserChrome url="app.restaurantepro.com.br/fichas"><ScreenImage src="assets/screens/fichas.png" alt="Fichas Técnicas"/></BrowserChrome>;
const MockCompras     = () => <BrowserChrome url="app.restaurantepro.com.br/compras"><ScreenImage src="assets/screens/compras.png" alt="Cotações"/></BrowserChrome>;
const MockProducao    = () => <BrowserChrome url="app.restaurantepro.com.br/producao"><ScreenImage src="assets/screens/producao.png" alt="Dashboard de Produção"/></BrowserChrome>;
const MockChecklist   = () => <BrowserChrome url="app.restaurantepro.com.br/checklist"><ScreenImage src="assets/screens/checklist.png" alt="Checklists"/></BrowserChrome>;

/* MODULES metadata (unchanged) */
const MODULES = [
  { id:'reservas', label:'Reservas', category:'Atendimento', Mock: MockReservas, icon:I.calendar,
    tagline:'Confirmação automática, lembretes e pré-pagamento opcional.',
    bullets:['Reservas ilimitadas','Confirmação por WhatsApp','Pré-pagamento PIX','Gerenciamento de mesas e salões','Exportação & relatórios'] },
  { id:'whatsapp', label:'Atendimento IA', category:'Atendimento', Mock: MockWhatsApp, icon:I.message,
    tagline:'IA real (não chatbot) respondendo no WhatsApp e Instagram.',
    bullets:['API oficial Meta (WhatsApp + Instagram)','Inteligência artificial de verdade, não scripts','Consulta cardápio e faz reservas sozinha','Escalonamento automático para humano','Histórico completo por cliente'] },
  { id:'fichas', label:'Fichas Técnicas', category:'Operação', Mock: MockFichas, icon:I.fileText,
    tagline:'CMV em tempo real. Fichas conectadas ao estoque e compras.',
    bullets:['Cálculo automático de CMV','Rendimento e desperdício','Versão de receita','Controle por preparo','Integração com compras'] },
  { id:'compras', label:'Compras & Cotação', category:'Operação', Mock: MockCompras, icon:I.cart,
    tagline:'Fornecedores competem pela sua compra, item a item.',
    bullets:['Cotação multi-fornecedor','Sugestão de pedido otimizado','Histórico de preços','Baixa automática no estoque','Melhor preço destacado'] },
  { id:'producao', label:'Produção', category:'Operação', Mock: MockProducao, icon:I.factory,
    tagline:'Produção interna com lotes, validade e etiquetas.',
    bullets:['Receitas com rendimento','Controle de lotes e validade','Impressão de etiquetas','Custo por porção','Tempo de preparo'] },
  { id:'cardapio', label:'Cardápio & Delivery', category:'Atendimento', Mock: MockCardapio, icon:I.qr,
    tagline:'QR Code, delivery sem comissão, impressão por setores.',
    bullets:['QR Code dinâmico','Fotos, preços e promoções','Impressão setorial','Delivery próprio','Atualização em tempo real'] },
  { id:'checklist', label:'Checklists', category:'Operação', Mock: MockChecklist, icon:I.clipboard,
    tagline:'Rotinas auditáveis com evidência fotográfica.',
    bullets:['Abertura, fechamento, limpeza','Evidência por foto','Auditável em tempo real','Relatórios por responsável','Alertas de não conformidade'] },
  { id:'avaliacoes', label:'Avaliações & NPS', category:'Atendimento', Mock: MockAvaliacoes, icon:I.star,
    tagline:'Pesquisa automática pós-visita e dashboard NPS.',
    bullets:['Envio automático pós-visita','NPS e média por categoria','Respostas com comentários','Alertas de avaliação baixa','Exportação'] },
  { id:'crm', label:'CRM', category:'Atendimento', Mock: MockCRM, icon:I.contact,
    tagline:'Histórico, preferências e segmentação inteligente.',
    bullets:['Histórico de visitas','Ticket médio e total gasto','Segmentação automática','Campanhas via WhatsApp','Fidelização'] },
];

Object.assign(window, { BrowserChrome, PhoneChrome, MODULES,
  MockReservas, MockFichas, MockWhatsApp, MockProducao, MockCompras, MockCardapio, MockChecklist, MockAvaliacoes, MockCRM });