<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#c91420">
  <title>Cardápio online</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="assets/css/vars.css">
  <link rel="stylesheet" href="assets/css/base.css">
  <link rel="stylesheet" href="assets/css/header-banner.css">
  <link rel="stylesheet" href="assets/css/nav.css">
  <link rel="stylesheet" href="assets/css/products.css">
  <link rel="stylesheet" href="assets/css/modals.css">
  <link rel="stylesheet" href="assets/css/responsive.css">
  <link rel="stylesheet" href="assets/css/modal-taxa.css">
  <link rel="stylesheet" href="assets/css/modern.css">
</head>
<body class="page-menu">
  <header class="logoNome">
    <div id="cardapioBanner" class="cardapio-banner" aria-hidden="true"></div>
    <div class="hero-overlay" aria-hidden="true"></div>
    <div class="restaurant-summary">
      <img id="logoEmpresa" src="assets/img/placeholder.jpg" alt="Logo do restaurante">
      <div class="info-empresa">
        <p class="restaurant-eyebrow">Cardápio online</p>
        <h1 id="nomeEmpresa">Carregando restaurante</h1>
        <div class="status-container" aria-live="polite"></div>
      </div>
    </div>
  </header>

  <nav class="menu-fixo" aria-label="Categorias do cardápio">
    <ul id="menuCategorias"></ul>
    <button class="carrinho-btn modo-desktop" type="button" aria-controls="carrinho" aria-expanded="false">
      <i class="mdi mdi-cart-outline" aria-hidden="true"></i>
      <span>Carrinho</span>
      <span class="carrinho-badge">0</span>
    </button>
  </nav>

  <section class="menu-intro">
    <div>
      <p class="menu-kicker">Escolha com calma</p>
      <h2>O que você quer pedir hoje?</h2>
      <p>Confira as opções disponíveis e monte seu pedido.</p>
    </div>
    <label class="menu-search" for="buscarProduto">
      <i class="mdi mdi-magnify" aria-hidden="true"></i>
      <input id="buscarProduto" type="search" placeholder="Buscar no cardápio" autocomplete="off">
    </label>
  </section>

  <main class="container-principal" id="cardapio"></main>
  <p id="semResultados" class="no-results" hidden>
    Nenhum produto encontrado para essa busca.
  </p>

  <div id="loading" class="loading-overlay" aria-live="polite">
    <span class="loading-spinner" aria-hidden="true"></span>
    <strong>Preparando o cardápio</strong>
  </div>

  <div id="cartBackdrop" class="cart-backdrop" aria-hidden="true"></div>
  <aside id="carrinho" class="carrinho" aria-label="Seu carrinho" aria-hidden="true">
    <div class="cart-header">
      <div>
        <p>Seu pedido</p>
        <h2>Carrinho</h2>
      </div>
      <button class="fechar-carrinho-btn" type="button" aria-label="Fechar carrinho">
        <i class="mdi mdi-close" aria-hidden="true"></i>
      </button>
    </div>
    <ul id="listaCarrinho"></ul>
    <div class="cart-summary">
      <span>Subtotal</span>
      <strong id="subtotalCarrinho">R$ 0,00</strong>
    </div>
    <button id="finalizarPedido" type="button">Continuar pedido</button>
  </aside>

  <button class="carrinho-btn btn-mobile mobile-cart-button" type="button" aria-controls="carrinho" aria-expanded="false">
    <span class="mobile-cart-icon">
      <i class="mdi mdi-cart-outline" aria-hidden="true"></i>
      <span class="carrinho-badge">0</span>
    </span>
    <span>Ver carrinho</span>
    <strong id="totalCarrinhoMobile">R$ 0,00</strong>
  </button>

  <div id="modalEndereco" class="modal" role="dialog" aria-modal="true" aria-labelledby="tituloEndereco">
    <div class="modal-content">
      <button class="close closeEndereco" type="button" aria-label="Fechar">
        <i class="mdi mdi-close" aria-hidden="true"></i>
      </button>
      <p class="modal-eyebrow">Quase pronto</p>
      <h2 id="tituloEndereco">Endereço de entrega</h2>
      <form id="formEndereco">
        <label for="nome">Nome</label>
        <input type="text" id="nome" autocomplete="name" required>

        <label for="telefone">Telefone</label>
        <input type="tel" id="telefone" placeholder="(99) 9 9999-9999" autocomplete="tel" required>

        <label for="bairro">Bairro</label>
        <select id="bairro" required></select>

        <div class="form-grid">
          <label for="rua">
            <span>Rua</span>
            <input type="text" id="rua" autocomplete="street-address" required>
          </label>
          <label for="numero">
            <span>Número</span>
            <input type="text" id="numero" required>
          </label>
        </div>

        <label for="complemento">Complemento</label>
        <input type="text" id="complemento">

        <label for="infoAdicional">Informações adicionais</label>
        <textarea id="infoAdicional" rows="3"></textarea>

        <label for="formaPagamento">Forma de pagamento</label>
        <select id="formaPagamento" required></select>

        <button id="confirmarPedido" type="submit">Confirmar pedido</button>
      </form>
    </div>
  </div>

  <div id="modalProduto" class="modal" role="dialog" aria-modal="true" aria-labelledby="produtoNome">
    <div class="modal-content product-modal-content">
      <button class="closeProduto" type="button" aria-label="Fechar">
        <i class="mdi mdi-close" aria-hidden="true"></i>
      </button>
      <img id="produtoImagem" class="produto-modal-img" src="" alt="">
      <div class="product-modal-copy">
        <h2 id="produtoNome"></h2>
        <p id="produtoDescricao"></p>
        <strong id="produtoPreco"></strong>
      </div>

      <label for="observacoesProduto">Alguma observação?</label>
      <textarea id="observacoesProduto" rows="3" placeholder="Ex.: sem cebola, molho à parte"></textarea>

      <h3 id="tituloADD"></h3>
      <ul id="listaAdicionais"></ul>

      <button id="confirmarProduto" type="button">Adicionar ao carrinho</button>
    </div>
  </div>

  <div id="modalTaxaEntrega" class="modal-taxa">
    <div class="modal-content-taxa">
      <button id="fecharModalTaxa" class="close-taxa" type="button" aria-label="Fechar">
        <i class="mdi mdi-close" aria-hidden="true"></i>
      </button>
      <h2 class="title-taxa">Consultar taxa de entrega</h2>
      <input type="text" id="searchBairro" placeholder="Digite o bairro" class="input-search-taxa">
      <div id="resultadoTaxa" class="resultado-taxa"></div>
    </div>
  </div>

  <footer class="footer">
    <span>Pedidos online com</span>
    <strong>Pedidix</strong>
  </footer>

  <script type="module" src="assets/js/firebaseConfig.js"></script>
  <script type="module" src="assets/js/cardapio-config.js"></script>
  <script type="module" src="assets/js/cardapio-init.js"></script>
  <script type="module" src="assets/js/modal-taxa.js"></script>
  <script type="module" src="assets/js/address-loader.js"></script>
  <script type="module" src="assets/js/cardapio.js"></script>
</body>
</html>
