<?php
session_start();
include '../tracking.php';

$app_info = [
    'name' => 'Fretebras: fretes pra caminhão',
    'developer' => 'Frete.com', 
    'rating' => '4.2',
    'reviews' => '75,1 mil',
    'downloads' => '5 mi+',
    'age_rating' => 'Livre',
    'price' => 'Grátis',
    'version' => '4.2.1',
    'updated' => '19 de novembro de 2025',
    'size' => '127 MB',
    'requires' => 'Android 8.0 ou superior',
    'category' => 'Produtividade',
    'description' => 'Encontre sua carga e negocie sem sair do aplicativo. Fretes com segurança e sem burocracia para caminhões leves, médios, pesados, VUC e Fiorinos.',
    'contains_ads' => true,
    'in_app_purchases' => true
];

$screenshots = [];
for ($i = 1; $i <= 6; $i++) {
    if (file_exists("img/img$i.webp")) {
        $screenshots[] = "img/img$i.webp";
    }
}

$app_logo = file_exists('img/logo.jpeg') ? 'img/logo.jpeg' : 'img/playstore.png';
$apk_file = 'app/fretebras.apk';
$apk_exists = file_exists($apk_file);

// AVALIAÇÕES ATUALIZADAS
$reviews = [
    [
        'name' => 'Thaís Carvalho',
        'initials' => 'TC',
        'photo' => 'https://play-lh.googleusercontent.com/a-/ALV-UjXMVGSZKospV-wWBIUppaZQAAxgMAKIhbsuwxa_Or8sgXua6Y_72g=s32-rw',
        'date' => '21 de março de 2022',
        'stars' => 5,
        'text' => 'O melhor app para encontrar frete! Informações completas e filtros ótimos! Mas sempre é possível melhorar, então minha dica é manter a oferta de carga atualizada, algumas vezes entrei em contato e já não estava mais disponível, sei que é bem dinâmico, mas volta e meia encontro anúncios de mais de 2 dias. Outra dica é poder filtrar exatamente pra cidade de destino. Exemplo: SSA x VDC. De modo geral, estão de PARABÉNS!!! 😄 👏👏👏👏',
        'helpful' => '7.730',
        'response' => null
    ]
];
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fretebras: fretes pra caminhão - Apps no Google Play</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="css/style.css">
    <style>
        /* RESET E BASE */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            background: #fff;
            color: #3c4043;
            line-height: 1.4;
        }

        /* HEADER SUPERIOR */
        .top-header {
            background: #fff;
            border-bottom: 1px solid #dadce0;
            padding: 12px 16px;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .top-nav {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .nav-item {
            font-size: 14px;
            font-weight: 500;
            color: #5f6368;
            text-decoration: none;
            padding: 8px 0;
        }

        .nav-item.active {
            color: #1a73e8;
            border-bottom: 2px solid #1a73e8;
        }

        /* HEADER DO APP */
        .app-header-section {
            background: #fff;
            padding: 20px 16px;
            border-bottom: 1px solid #dadce0;
        }

        .app-header-content {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            max-width: 1200px;
            margin: 0 auto;
        }

        .app-icon {
            flex-shrink: 0;
        }

        .app-icon img {
            width: 80px;
            height: 80px;
            border-radius: 16px;
            object-fit: cover;
        }

        .app-info-main {
            flex: 1;
            min-width: 0;
        }

        .app-info-main h1 {
            font-size: 20px;
            font-weight: 400;
            color: #3c4043;
            margin-bottom: 4px;
        }

        .app-developer {
            font-size: 14px;
            color: #1a73e8;
            text-decoration: none;
            margin-bottom: 12px;
            display: block;
        }

        .app-tags {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
        }

        .tag {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: #5f6368;
        }

        .app-stats {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 12px;
        }

        .rating {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .stars {
            display: flex;
            align-items: center;
            gap: 1px;
        }

        .stars .material-icons {
            font-size: 16px;
            color: #fbbc04;
        }

        .reviews, .downloads {
            font-size: 14px;
            color: #5f6368;
        }

        .age-rating {
            font-size: 14px;
            color: #5f6368;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .age-rating .material-icons {
            font-size: 16px;
            color: #5f6368;
        }

        .install-section {
            flex-shrink: 0;
            text-align: center;
        }

        .price {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
            color: #3c4043;
        }

        .install-btn {
            background: #1a73e8;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 24px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            margin-bottom: 8px;
            width: 100%;
            max-width: 120px;
        }

        .devices-info {
            font-size: 12px;
            color: #5f6368;
            display: flex;
            align-items: center;
            gap: 4px;
            justify-content: center;
        }

        /* FILTROS DE AVALIAÇÃO */
        .ratings-filters {
            background: #f8f9fa;
            padding: 16px;
            border-bottom: 1px solid #dadce0;
        }

        .filters-header {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 12px;
            color: #3c4043;
        }

        .device-filter {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }

        .device-option {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .device-option input[type="checkbox"] {
            width: 16px;
            height: 16px;
        }

        .verified-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #5f6368;
            margin-bottom: 16px;
        }

        .verified-badge .material-icons {
            font-size: 16px;
            color: #34a853;
        }

        /* RESUMO DE AVALIAÇÕES */
        .ratings-summary {
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 16px 0;
        }

        .overall-rating {
            text-align: center;
        }

        .rating-number {
            font-size: 48px;
            font-weight: 300;
            color: #3c4043;
            line-height: 1;
        }

        .rating-stars {
            display: flex;
            align-items: center;
            gap: 1px;
            margin: 4px 0;
        }

        .rating-stars .material-icons {
            font-size: 20px;
            color: #fbbc04;
        }

        .rating-count {
            font-size: 14px;
            color: #5f6368;
        }

        .rating-bars {
            flex: 1;
        }

        .rating-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }

        .bar-label {
            font-size: 12px;
            color: #5f6368;
            width: 16px;
        }

        .bar-container {
            flex: 1;
            background: #f1f3f4;
            height: 8px;
            border-radius: 4px;
            overflow: hidden;
        }

        .bar-fill {
            background: #fbbc04;
            height: 100%;
            border-radius: 4px;
        }

        /* AVALIAÇÕES INDIVIDUAIS */
        .reviews-section {
            padding: 16px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .review-item {
            padding: 16px 0;
            border-bottom: 1px solid #dadce0;
        }

        .review-header {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 8px;
        }

        .review-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #01875f;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 500;
            flex-shrink: 0;
        }

        .review-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .review-info {
            flex: 1;
            min-width: 0;
        }

        .review-author {
            font-weight: 500;
            font-size: 14px;
            margin-bottom: 2px;
            color: #3c4043;
        }

        .review-meta {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .review-rating {
            display: flex;
            align-items: center;
            gap: 1px;
        }

        .review-rating .material-icons {
            font-size: 14px;
            color: #fbbc04;
        }

        .review-date {
            font-size: 12px;
            color: #5f6368;
        }

        .review-text {
            font-size: 14px;
            line-height: 1.4;
            color: #3c4043;
            margin-bottom: 12px;
        }

        .review-helpful {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 14px;
            color: #5f6368;
        }

        .helpful-buttons {
            display: flex;
            gap: 8px;
        }

        .helpful-btn {
            background: none;
            border: 1px solid #dadce0;
            border-radius: 4px;
            padding: 4px 12px;
            font-size: 12px;
            color: #5f6368;
            cursor: pointer;
        }

        /* FOOTER */
        .footer {
            background: #f8f9fa;
            padding: 20px 16px;
            text-align: center;
            border-top: 1px solid #dadce0;
            margin-top: 20px;
        }

        .footer p {
            font-size: 12px;
            color: #5f6368;
        }

        /* RESPONSIVIDADE */
        @media (max-width: 768px) {
            .app-header-content {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .install-section {
                align-self: stretch;
                text-align: left;
            }
            
            .install-btn {
                max-width: none;
            }
            
            .ratings-summary {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
            
            .overall-rating {
                text-align: left;
            }
            
            .review-helpful {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
        }

        @media (max-width: 480px) {
            .top-nav {
                gap: 16px;
                overflow-x: auto;
                padding-bottom: 8px;
            }
            
            .nav-item {
                white-space: nowrap;
            }
            
            .app-stats {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
        }
    </style>
</head>
<body>
    <!-- Header Superior -->
    <header class="top-header">
        <nav class="top-nav">
            <a href="#" class="nav-item">Jogos</a>
            <a href="#" class="nav-item active">Apps</a>
            <a href="#" class="nav-item">Livros</a>
            <a href="#" class="nav-item">Crianças</a>
        </nav>
    </header>

    <!-- Header do App -->
    <section class="app-header-section">
        <div class="app-header-content">
            <div class="app-icon"><img src="<?php echo $app_logo; ?>" alt="Fretebras"></div>
            <div class="app-info-main">
                <h1><?php echo $app_info['name']; ?></h1>
                <a href="#" class="app-developer"><?php echo $app_info['developer']; ?></a>
                <div class="app-tags">
                    <?php if($app_info['contains_ads']): ?><div class="tag"><i class="material-icons" style="font-size:14px;">campaign</i>Contém anúncios</div><?php endif; ?>
                    <?php if($app_info['in_app_purchases']): ?><div class="tag"><i class="material-icons" style="font-size:14px;">shopping_cart</i>Compras no app</div><?php endif; ?>
                </div>
                <div class="app-stats">
                    <div class="rating">
                        <span class="stars">
                            <i class="material-icons">star</i>
                            <i class="material-icons">star</i>
                            <i class="material-icons">star</i>
                            <i class="material-icons">star</i>
                            <i class="material-icons">star_half</i>
                        </span> 
                        <?php echo $app_info['rating']; ?>
                    </div>
                    <div class="reviews"><?php echo $app_info['reviews']; ?> avaliações</div>
                    <div class="downloads"><?php echo $app_info['downloads']; ?> downloads</div>
                </div>
                <div class="age-rating">
                    <i class="material-icons">info</i> 
                    Classificação <?php echo $app_info['age_rating']; ?>
                </div>
            </div>
            <div class="install-section">
                <div class="price"><?php echo $app_info['price']; ?></div>
                <button class="install-btn">Instalar</button>
                <div class="devices-info">
                    <i class="material-icons">devices</i> 
                    Este app está disponível para todos os seus dispositivos
                </div>
            </div>
        </div>
    </section>

    <!-- Filtros de Avaliação -->
    <section class="ratings-filters">
        <div class="filters-header">Classificações e reservas</div>
        <div class="verified-badge">
            <i class="material-icons">verified</i>
            <span>As notas e avaliações são verificadas.</span>
        </div>
        <div class="device-filter">
            <div class="device-option">
                <input type="checkbox" id="phone">
                <label for="phone">Telefone</label>
            </div>
            <div class="device-option">
                <input type="checkbox" id="tablet" checked>
                <label for="tablet">Tablet</label>
            </div>
        </div>
    </section>

    <!-- Resumo de Avaliações -->
    <section class="ratings-filters">
        <div class="ratings-summary">
            <div class="overall-rating">
                <div class="rating-number">4,2</div>
                <div class="rating-stars">
                    <i class="material-icons">star</i>
                    <i class="material-icons">star</i>
                    <i class="material-icons">star</i>
                    <i class="material-icons">star</i>
                    <i class="material-icons">star_half</i>
                </div>
                <div class="rating-count">75,1 mil avaliações</div>
            </div>
            <div class="rating-bars">
                <div class="rating-bar">
                    <span class="bar-label">5</span>
                    <div class="bar-container"><div class="bar-fill" style="width: 70%"></div></div>
                </div>
                <div class="rating-bar">
                    <span class="bar-label">4</span>
                    <div class="bar-container"><div class="bar-fill" style="width: 20%"></div></div>
                </div>
                <div class="rating-bar">
                    <span class="bar-label">3</span>
                    <div class="bar-container"><div class="bar-fill" style="width: 10%"></div></div>
                </div>
                <div class="rating-bar">
                    <span class="bar-label">2</span>
                    <div class="bar-container"><div class="bar-fill" style="width: 0%"></div></div>
                </div>
                <div class="rating-bar">
                    <span class="bar-label">1</span>
                    <div class="bar-container"><div class="bar-fill" style="width: 0%"></div></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Avaliações Individuais -->
    <section class="reviews-section">
        <?php foreach($reviews as $rev): ?>
        <div class="review-item">
            <div class="review-header">
                <div class="review-avatar">
                    <?php if($rev['photo']): ?>
                        <img src="<?php echo $rev['photo']; ?>" alt="<?php echo $rev['name']; ?>" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                        <span style="display:none;"><?php echo $rev['initials']; ?></span>
                    <?php else: ?>
                        <?php echo $rev['initials']; ?>
                    <?php endif; ?>
                </div>
                <div class="review-info">
                    <div class="review-author"><?php echo $rev['name']; ?></div>
                    <div class="review-meta">
                        <div class="review-rating">
                            <?php for($i=1;$i<=5;$i++): ?>
                                <i class="material-icons"><?php echo $i<=$rev['stars']?'star':'star_border'; ?></i>
                            <?php endfor; ?>
                        </div>
                        <div class="review-date"><?php echo $rev['date']; ?></div>
                    </div>
                </div>
            </div>
            <div class="review-text"><?php echo $rev['text']; ?></div>
            <div class="review-helpful">
                <span>Essa avaliação foi marcada como útil por <?php echo $rev['helpful']; ?> pessoas</span>
                <div class="helpful-buttons">
                    <button class="helpful-btn">Sim</button>
                    <button class="helpful-btn">Não</button>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </section>

    <footer class="footer">
        <p>Google Play e o logo do Google Play são marcas registradas da Google LLC.</p>
    </footer>

    <script src="js/script.js"></script>
    <script>window.appConfig={apkPath:'<?php echo $apk_file; ?>',apkExists:<?php echo $apk_exists?'true':'false'; ?>};</script>
</body>
</html>