<?php
declare(strict_types=1);
use App\Helpers\View;

$tituloPagina = $tituloPagina
    ?? 'Loja Online';
$descricaoPagina = $descricaoPagina
    ?? 'Loja online com produtos, ofertas, atendimento ao cliente e compra segura.';
$quantidadeCarrinho = $quantidadeCarrinho ?? 0;
$baseUrl = defined('BASE_URL') ? BASE_URL : ''; ?>
<!doctype html>
<html lang="pt-BR">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>
        <?=
            htmlspecialchars(
                $tituloPagina,
                ENT_QUOTES,
                'UTF-8'
            )
            ?>
    </title>
    <!--
        Caminho-base das rotas no XAMPP.
        Quando o projeto funcionar sem /public, altere para:
        <base href="/loja_online/">
    -->
    <base href="/loja_online/public/">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link rel="stylesheet" href="<?= htmlspecialchars($baseUrl . '/assets/css/site.css', ENT_QUOTES, 'UTF-8') ?>">
</head>

<body>
    <!-- ============================================================
         1. BARRA SUPERIOR
    =====================   ======================================== -->
    <?php //require_once APP_ROOT  . '/views/componentes/site/sections/barraSuperior.php'; 
    ?>
    <?php View::componente('sections/barraSuperior'); ?>
    <!-- ============================================================
         2. MENU PRINCIPAL
    ============================================================= -->

    <?php //require_once APP_ROOT  . '/views/componentes/site/header.php'; 
    ?>
    <?php //View::componente('header');
    ?>
    <?php    View::componente('header', ['categorias' => $categorias, 'quantidadeCarrinho' => $quantidadeCarrinho,]);  ?>
    <main>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <main class="py-4">

                        <div class="container">

                            <!-- ============================================================
             1. BREADCRUMB
        ============================================================= -->
                            <nav aria-label="breadcrumb" class="mb-4">
                                <ol class="breadcrumb">

                                    <li class="breadcrumb-item">
                                        <a href="./" class="text-decoration-none">
                                            Início
                                        </a>
                                    </li>

                                    <li class="breadcrumb-item">
                                        <a href="produtos" class="text-decoration-none">
                                            Produtos
                                        </a>
                                    </li>

                                    <li class="breadcrumb-item active" aria-current="page">
                                        Notebook Gamer
                                    </li>

                                </ol>
                            </nav>


                            <!-- ============================================================
             2. DETALHES PRINCIPAIS DO PRODUTO
        ============================================================= -->
                            <section class="mb-5">

                                <div class="row g-5">

                                    <!-- ====================================================
                     IMAGEM DO PRODUTO
                ===================================================== -->
                                    <div class="col-12 col-md-6">

                                        <div class="border rounded-4 p-4 bg-white text-center">

                                            <img src="assets/img/produtos/notebook.jpg" alt="Notebook Gamer"
                                                class="img-fluid" style="max-height: 450px; object-fit: contain;">

                                        </div>

                                    </div>


                                    <!-- ====================================================
                     INFORMAÇÕES DO PRODUTO
                ===================================================== -->
                                    <div class="col-12 col-md-6">

                                        <!-- Categoria -->
                                        <span class="badge text-bg-secondary mb-3">
                                            Informática
                                        </span>


                                        <!-- Nome -->
                                        <h1 class="h2 fw-bold mb-3">
                                            Notebook Gamer Ryzen 7 16GB SSD 512GB
                                        </h1>


                                        <!-- Código -->
                                        <p class="text-muted small mb-3">
                                            Código do produto:
                                            <strong>PROD-001</strong>
                                        </p>


                                        <!-- Avaliação -->
                                        <div class="mb-3">

                                            <span class="text-warning">
                                                ★★★★★
                                            </span>

                                            <span class="text-muted ms-2">
                                                4.8 (125 avaliações)
                                            </span>

                                        </div>


                                        <hr>


                                        <!-- =================================================
                         PREÇO
                    ================================================== -->
                                        <div class="mb-4">

                                            <small class="text-muted">
                                                De:
                                            </small>

                                            <div>
                                                <span class="text-decoration-line-through text-muted">
                                                    R$ 5.499,90
                                                </span>

                                                <span class="badge text-bg-danger ms-2">
                                                    15% OFF
                                                </span>
                                            </div>


                                            <div class="mt-2">

                                                <span class="text-muted">
                                                    Por:
                                                </span>

                                                <div class="display-6 fw-bold text-success">
                                                    R$ 4.674,92
                                                </div>

                                            </div>


                                            <p class="text-muted mb-0">
                                                ou 10x de
                                                <strong>R$ 467,49</strong>
                                                sem juros
                                            </p>

                                        </div>


                                        <!-- =================================================
                         ESTOQUE
                    ================================================== -->
                                        <div class="mb-4">

                                            <span class="badge text-bg-success">
                                                Produto disponível
                                            </span>

                                            <small class="text-muted ms-2">
                                                12 unidades em estoque
                                            </small>

                                        </div>


                                        <!-- =================================================
                         QUANTIDADE
                    ================================================== -->
                                        <div class="mb-4">

                                            <label for="quantidade" class="form-label fw-semibold">
                                                Quantidade
                                            </label>

                                            <div style="max-width: 130px;">

                                                <input type="number" class="form-control" id="quantidade"
                                                    name="quantidade" value="1" min="1" max="12">

                                            </div>

                                        </div>


                                        <!-- =================================================
                         BOTÕES
                    ================================================== -->
                                        <div class="d-grid gap-2">

                                            <button type="button" class="btn btn-primary btn-lg">

                                                <i class="bi bi-cart-plus"></i>
                                                Adicionar ao carrinho

                                            </button>


                                            <button type="button" class="btn btn-success btn-lg">

                                                Comprar agora

                                            </button>

                                        </div>


                                        <hr class="my-4">


                                        <!-- =================================================
                         INFORMAÇÕES ADICIONAIS
                    ================================================== -->
                                        <div class="row g-3">

                                            <div class="col-12 col-sm-6">



                                            </div>


                                            <div class="col-12 col-sm-6">

                                                <div class="border rounded p-3 h-100">

                                                    <strong>
                                                        🔒 Compra segura
                                                    </strong>

                                                    <div class="small text-muted mt-1">
                                                        Ambiente protegido para sua compra.
                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </section>


                            <!-- ============================================================
             3. DESCRIÇÃO DO PRODUTO
        ============================================================= -->
                            <section class="mb-5">

                                <div class="card border-0 shadow-sm">

                                    <div class="card-body p-4">

                                        <h2 class="h4 fw-bold mb-3">
                                            Descrição do produto
                                        </h2>

                                        <p>
                                            Notebook de alto desempenho indicado para
                                            atividades profissionais, estudos, desenvolvimento
                                            de sistemas, edição de imagens e jogos.
                                        </p>



                                    </div>

                                </div>

                            </section>





                            <!-- ============================================================
             5. FORMAS DE PAGAMENTO
        ============================================================= -->
                            <section class="mb-5">

                                <div class="card border-0 shadow-sm">

                                    <div class="card-body p-4">

                                        <h2 class="h4 fw-bold mb-4">
                                            Formas de pagamento
                                        </h2>

                                        <div class="row g-3">

                                            <div class="col-12 col-md-4">

                                                <div class="border rounded p-3 h-100">

                                                    <strong>
                                                        💳 Cartão de crédito
                                                    </strong>

                                                    <p class="small text-muted mb-0 mt-2">
                                                        Parcele sua compra em até 10x sem juros.
                                                    </p>

                                                </div>

                                            </div>


                                            <div class="col-12 col-md-4">

                                                <div class="border rounded p-3 h-100">

                                                    <strong>
                                                        ⚡ PIX
                                                    </strong>

                                                    <p class="small text-muted mb-0 mt-2">
                                                        Pagamento rápido e confirmação imediata.
                                                    </p>

                                                </div>

                                            </div>


                                            <div class="col-12 col-md-4">

                                                <div class="border rounded p-3 h-100">

                                                    <strong>
                                                        🧾 Boleto
                                                    </strong>

                                                    <p class="small text-muted mb-0 mt-2">
                                                        Pagamento através de boleto bancário.
                                                    </p>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </section>




                        </div>

                    </main>
                </div>
            </div>
        </div>

    </main>
    <!-- ============================================================
         9. RODAPÉ
    ============================================================= -->
    <?php View::componente('footer'); ?>
    <?php //require_once __DIR__ . '/../layouts/site/footer.php'; 
    ?>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
        crossorigin="anonymous"></script>
</body>

</html>