<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evolução do Sistema - ALOCAMA</title>
    <link rel="icon" type="image/png" href="images/icons/icon-desenvolvimento.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

        * {
            font-family: 'Inter', sans-serif;
        }

        body {
            background: #000;
            color: #fff;
            overflow-x: hidden;
            padding-bottom: 0;
        }

        .lightning-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.6;
            pointer-events: none;
        }

        .lightning-canvas {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
        }

        .timeline-container {
            position: relative;
            min-height: 100vh;
            width: 100%;
            overflow: hidden;
        }

        .header-section {
            text-align: center;
            padding: 60px 20px;
            background: transparent;
        }

        .header-title {
            font-size: 3rem;
            font-weight: 900;
            color: #8b5cf6;
            margin-bottom: 16px;
            text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
        }

        .header-subtitle {
            font-size: 1.2rem;
            color: #d1d5db;
            max-width: 600px;
            margin: 0 auto;
        }

        .timeline-content {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px 0;
        }

        .timeline-line {
            position: absolute;
            left: 50%;
            top: 0;
            width: 2px;
            height: 100%;
            background: rgba(99, 102, 241, 0.3);
            transform: translateX(-50%);
            z-index: 10;
        }

        .timeline-progress {
            position: absolute;
            left: 50%;
            top: 0;
            width: 2px;
            background: linear-gradient(to bottom, #22d3ee, #6366f1, #a855f7);
            transform: translateX(-50%);
            z-index: 11;
            transition: height 0.3s ease;
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.5), 0 0 25px rgba(168, 85, 247, 0.3);
        }

        .timeline-comet {
            position: absolute;
            left: 50%;
            top: 0;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, rgba(168, 85, 247, 0.8) 0%, rgba(99, 102, 241, 0.5) 40%, rgba(34, 211, 238, 0) 70%);
            border-radius: 50%;
            transform: translateX(-50%) translateY(-50%);
            z-index: 12;
            box-shadow:
                0 0 15px 4px rgba(168, 85, 247, 0.6),
                0 0 25px 8px rgba(99, 102, 241, 0.4),
                0 0 40px 15px rgba(34, 211, 238, 0.2);
            animation: cometPulse 2s ease-in-out infinite;
        }

        @keyframes cometPulse {

            0%,
            100% {
                transform: translateX(-50%) translateY(-50%) scale(1);
            }

            50% {
                transform: translateX(-50%) translateY(-50%) scale(1.3);
            }
        }


        .event-card {
            position: relative;
            width: calc(40% - 20px);
            background: #000;
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 12px;
            padding: 20px;
            margin: 80px 0;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            opacity: 0;
            z-index: 0;
            transform: translateY(20px);
        }

        .event-card.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .event-card.left {
            margin-right: calc(50% + 100px);
            margin-left: 0;
        }

        .event-card.right {
            margin-left: calc(50% + 100px);
            margin-right: 0;
        }

        .event-year {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            font-weight: 700;
            color: #6366f1;
            margin-bottom: 8px;
        }

        .event-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 8px;
        }

        .event-subtitle {
            font-size: 1rem;
            font-weight: 600;
            color: #d1d5db;
            margin-bottom: 12px;
        }

        .event-description {
            font-size: 0.9rem;
            color: #9ca3af;
            line-height: 1.6;
        }

        .metrics-section {
            background: #000;
            padding: 60px 20px 40px 20px;
            text-align: center;
            border-top: 1px solid #333;
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }

        .credits-section {
            background: #000;
            padding: 40px 20px 20px 20px;
            text-align: center;
            border-top: 1px solid #333;
            margin-top: 0;
        }

        .back-button {
            display: inline-block;
            background: linear-gradient(135deg, #8b5cf6, #a855f7);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 20px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .back-button:hover {
            background: linear-gradient(135deg, #7c3aed, #9333ea);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
        }

        .credits-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #8b5cf6;
            margin-bottom: 10px;
        }

        .credits-text {
            font-size: 1rem;
            color: #ccc;
            line-height: 1.6;
            max-width: 600px;
            margin: 0 auto;
        }

        .metrics-section.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .metrics-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 50px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .metrics-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto 50px;
        }

        .metrics-grid .metric-item:nth-child(1),
        .metrics-grid .metric-item:nth-child(2),
        .metrics-grid .metric-item:nth-child(3),
        .metrics-grid .metric-item:nth-child(4) {
            flex: 0 0 auto;
            width: 200px;
        }

        .metrics-grid .metric-item:nth-child(5),
        .metrics-grid .metric-item:nth-child(6),
        .metrics-grid .metric-item:nth-child(7) {
            flex: 0 0 auto;
            width: 200px;
        }

        .metric-item {
            text-align: center;
            padding: 20px;
        }

        .metric-number {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 10px;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        }

        .metric-number.white {
            color: #fff;
        }

        .metric-number.purple {
            background: linear-gradient(135deg, #8b5cf6, #ec4899);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .metric-label {
            font-size: 1rem;
            color: #fff;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .social-buttons-container {
            display: flex;
            justify-content: center;
            margin-top: 40px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }

        .social-buttons-container.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Social Buttons Styles */
        .card {
            display: flex;
            height: 70px;
            width: 350px;
        }

        .card svg {
            position: absolute;
            display: flex;
            width: 60%;
            height: 100%;
            font-size: 24px;
            font-weight: 700;
            opacity: 1;
            transition: opacity 0.25s;
            z-index: 2;
            padding: 0.25rem;
            cursor: pointer;
        }

        .card .social-link1,
        .card .social-link2,
        .card .social-link3,
        .card .social-link4,
        .card .social-link5 {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 25%;
            color: whitesmoke;
            font-size: 24px;
            text-decoration: none;
            transition: 0.25s;
            border-radius: 50px;
        }

        .card svg {
            transform: scale(1);
        }

        .card .social-link1:hover {
            background: #f09433;
            background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
            animation: bounce_613 0.4s linear;
        }

        .card .social-link2:hover {
            background-color: #242c34;
            animation: bounce_613 0.4s linear;
        }

        .card .social-link3:hover {
            background-color: #5865f2;
            animation: bounce_613 0.4s linear;
        }

        .card .social-link4:hover {
            background-color: #0a66c2;
            animation: bounce_613 0.4s linear;
        }

        .card .social-link5:hover {
            background-color: #ff8000;
            animation: bounce_613 0.4s linear;
        }

        @keyframes bounce_613 {
            40% {
                transform: scale(1.4);
            }

            60% {
                transform: scale(0.8);
            }

            80% {
                transform: scale(1.2);
            }

            100% {
                transform: scale(1);
            }
        }

        @media (max-width: 768px) {
            .header-title {
                font-size: 2rem;
            }

            .event-card {
                width: calc(100% - 40px);
                margin-left: 20px;
                margin-right: 20px;
            }

            .event-card.left,
            .event-card.right {
                margin-left: 20px;
                margin-right: 20px;
            }

            .timeline-line,
            .timeline-progress {
                left: 20px;
            }

            .timeline-node,
            .timeline-comet {
                left: 20px;
            }

            .navigation-buttons {
                flex-direction: column;
                bottom: 20px;
            }
        }
    </style>
</head>

<body>
    <!-- Lightning Effects -->
    <div class="lightning-container">
        <canvas class="lightning-canvas" id="lightning-canvas"></canvas>
    </div>

    <!-- Header Section -->
    <div class="header-section">
        <h1 class="header-title">Evolução do Sistema ALOCAMA</h1>
        <p class="header-subtitle">Scroll para explorar a jornada de desenvolvimento</p>
    </div>

    <!-- Timeline Container -->
    <div class="timeline-container">
        <div class="timeline-content">
            <!-- Timeline Line -->
            <div class="timeline-line"></div>

            <!-- Timeline Progress -->
            <div class="timeline-progress" id="timeline-progress"></div>

            <!-- Timeline Comet -->
            <div class="timeline-comet" id="timeline-comet"></div>

            <!-- Event Cards -->
            <div class="event-card left" id="card-0" style="margin-top: 150px;">
                <div class="event-year">
                    <span>15-25 Setembro 2025</span>
                </div>
                <h3 class="event-title">FASE 1: ESTRUTURA BASE</h3>
                <p class="event-subtitle">Fundação do Sistema</p>
                <p class="event-description">
                    Criação da estrutura base do projeto, implementação do sistema de autenticação,
                    desenvolvimento do catálogo inicial com produtos básicos, configuração do banco de dados SQLite
                    e interface inicial do sistema.
                </p>
            </div>

            <div class="event-card right" id="card-1" style="margin-top: 350px;">
                <div class="event-year">
                    <span>26-28 Setembro 2025</span>
                </div>
                <h3 class="event-title">FASE 2: EXPANSÃO DO CATÁLOGO</h3>
                <p class="event-subtitle">Ampliação de Produtos</p>
                <p class="event-description">
                    Adição das categorias "LINHA DE APOIO" e "HOSPITALAR", implementação de 15+ modelos de camas
                    hospitalares,
                    integração de 10+ modelos de cadeiras de rodas, sistema de upload e gerenciamento de imagens,
                    correção de especificações técnicas de todos os produtos.
                </p>
            </div>

            <div class="event-card left" id="card-2" style="margin-top: 550px;">
                <div class="event-year">
                    <span>29 Setembro - 2 Outubro 2025</span>
                </div>
                <h3 class="event-title">FASE 3: SISTEMA DE PROPOSTAS</h3>
                <p class="event-subtitle">Módulos Comerciais</p>
                <p class="event-description">
                    Desenvolvimento dos módulos "Comercial" e "Atendimento" com sistema de propostas,
                    geração de PDFs, cálculo de valores, gestão de clientes e integração com dashboard de gestão.
                </p>
            </div>

            <div class="event-card right" id="card-3" style="margin-top: 750px;">
                <div class="event-year">
                    <span>3-5 Outubro 2025</span>
                </div>
                <h3 class="event-title">FASE 4: DASHBOARD DE GESTÃO</h3>
                <p class="event-subtitle">Controle Administrativo</p>
                <p class="event-description">
                    Implementação do dashboard de gestão com visualização de propostas, controle de status,
                    métricas de vendas, relatórios e sistema de autenticação avançado.
                </p>
            </div>

            <div class="event-card left" id="card-4" style="margin-top: 950px;">
                <div class="event-year">
                    <span>6-8 Outubro 2025</span>
                </div>
                <h3 class="event-title">FASE 5: OTIMIZAÇÃO E DEPLOY</h3>
                <p class="event-subtitle">Finalização do Projeto</p>
                <p class="event-description">
                    Otimização de performance, correção de bugs, implementação de responsividade,
                    deploy na Hostinger e configuração do domínio catalogoalocama.com.
                </p>
            </div>

            <div class="event-card right" id="card-5" style="margin-top: 1150px;">
                <div class="event-year">
                    <span>9-10 Outubro 2025</span>
                </div>
                <h3 class="event-title">FASE 6: SINCRONIZAÇÃO E OTIMIZAÇÃO</h3>
                <p class="event-subtitle">Sistema Completo</p>
                <p class="event-description">
                    Sincronização completa entre modais e dashboard, implementação de APIs REST completas,
                    sistema de atualização de status em tempo real, otimização de performance do banco de dados,
                    correção de bugs e melhorias finais.
                </p>
            </div>
        </div>
    </div>

    <!-- Development Metrics Footer -->
    <div class="metrics-section">
        <h2 class="metrics-title">Métricas do Desenvolvimento</h2>

        <div class="metrics-grid">
            <div class="metric-item">
                <div class="metric-number white">94.211</div>
                <div class="metric-label">Linhas de Código</div>
            </div>

            <div class="metric-item">
                <div class="metric-number white">191</div>
                <div class="metric-label">Arquivos Criados</div>
            </div>

            <div class="metric-item">
                <div class="metric-number white">120-150</div>
                <div class="metric-label">Horas de Desenvolvimento</div>
            </div>

            <div class="metric-item">
                <div class="metric-number white">17</div>
                <div class="metric-label">Dias de Trabalho</div>
            </div>

            <div class="metric-item">
                <div class="metric-number purple">6</div>
                <div class="metric-label">Fases de Desenvolvimento</div>
            </div>

            <div class="metric-item">
                <div class="metric-number purple">50+</div>
                <div class="metric-label">Produtos no Catálogo</div>
            </div>

            <div class="metric-item">
                <div class="metric-number purple">100%</div>
                <div class="metric-label">Sistema Funcional</div>
            </div>
        </div>

        <div class="social-buttons-container" id="social-buttons">
            <div class="card">
                <a class="social-link1" href="https://www.instagram.com/_lkristo/" target="_blank">
                    <svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
                        <path
                            d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
                            fill="white">
                        </path>
                    </svg>
                </a>
                <a class="social-link2" href="https://github.com/LucasMissiba" target="_blank">
                    <svg viewBox="0 0 496 512" height="1em" fill="#fff" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
                        </path>
                    </svg>
                </a>
                <a class="social-link3" href="https://discord.com/users/925473889696489542" target="_blank">
                    <svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
                        <path
                            d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"
                            fill="white">
                        </path>
                    </svg>
                </a>
                <a class="social-link4" href="https://www.linkedin.com/in/lucas-missiba-6a95ab179/" target="_blank">
                    <svg fill="#fff" viewBox="0 0 448 512" height="1em" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z">
                        </path>
                    </svg>
                </a>
            </div>
        </div>
    </div>

    <!-- Credits Section -->
    <div class="credits-section">
        <div class="credits-title">Desenvolvido por Lucas Missiba</div>
        <div class="credits-text">
            Este sistema de catálogo digital foi desenvolvido com tecnologias modernas de frontend,
            incluindo HTML5, CSS3, JavaScript ES6+ e WebGL para efeitos visuais avançados.
            O projeto demonstra expertise em desenvolvimento web responsivo, design de interface
            e implementação de funcionalidades interativas para gestão de catálogos empresariais.
        </div>
        <a href="index.html" class="back-button">← Voltar ao Menu</a>
    </div>

    <script>
        // Lightning WebGL Effect
        class LightningEffect {
            constructor(canvas, options = {}) {
                this.canvas = canvas;
                this.options = {
                    hue: 220,
                    xOffset: 0,
                    speed: 1,
                    intensity: 1,
                    size: 1,
                    ...options
                };

                this.init();
            }

            init() {
                const gl = this.canvas.getContext('webgl');
                if (!gl) {
                    console.error('WebGL not supported');
                    return;
                }

                this.gl = gl;
                this.setupShaders();
                this.setupBuffers();
                this.setupUniforms();
                this.startRender();
            }

            setupShaders() {
                const vertexShaderSource = `
                    attribute vec2 aPosition;
                    void main() {
                        gl_Position = vec4(aPosition, 0.0, 1.0);
                    }
                `;

                const fragmentShaderSource = `
                    precision mediump float;
                    uniform vec2 iResolution;
                    uniform float iTime;
                    uniform float uHue;
                    uniform float uXOffset;
                    uniform float uSpeed;
                    uniform float uIntensity;
                    uniform float uSize;
                    
                    #define OCTAVE_COUNT 10

                    vec3 hsv2rgb(vec3 c) {
                        vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0,4.0,2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
                        return c.z * mix(vec3(1.0), rgb, c.y);
                    }

                    float hash11(float p) {
                        p = fract(p * .1031);
                        p *= p + 33.33;
                        p *= p + p;
                        return fract(p);
                    }

                    float hash12(vec2 p) {
                        vec3 p3 = fract(vec3(p.xyx) * .1031);
                        p3 += dot(p3, p3.yzx + 33.33);
                        return fract((p3.x + p3.y) * p3.z);
                    }

                    mat2 rotate2d(float theta) {
                        float c = cos(theta);
                        float s = sin(theta);
                        return mat2(c, -s, s, c);
                    }

                    float noise(vec2 p) {
                        vec2 ip = floor(p);
                        vec2 fp = fract(p);
                        float a = hash12(ip);
                        float b = hash12(ip + vec2(1.0, 0.0));
                        float c = hash12(ip + vec2(0.0, 1.0));
                        float d = hash12(ip + vec2(1.0, 1.0));
                        
                        vec2 t = smoothstep(0.0, 1.0, fp);
                        return mix(mix(a, b, t.x), mix(c, d, t.x), t.y);
                    }

                    float fbm(vec2 p) {
                        float value = 0.0;
                        float amplitude = 0.5;
                        for (int i = 0; i < OCTAVE_COUNT; ++i) {
                            value += amplitude * noise(p);
                            p *= rotate2d(0.45);
                            p *= 2.0;
                            amplitude *= 0.5;
                        }
                        return value;
                    }

                    void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
                        vec2 uv = fragCoord / iResolution.xy;
                        uv = 2.0 * uv - 1.0;
                        uv.x *= iResolution.x / iResolution.y;
                        uv.x += uXOffset;
                        
                        uv += 2.0 * fbm(uv * uSize + 0.8 * iTime * uSpeed) - 1.0;
                        
                        float dist = abs(uv.x);
                        
                        // Limitar o efeito ao centro mas com mais amplitude
                        float centerMask = 1.0 - smoothstep(0.0, 0.8, abs(uv.x));
                        
                        vec3 baseColor = hsv2rgb(vec3(uHue / 360.0, 0.7, 0.8));
                        vec3 col = baseColor * pow(mix(0.0, 0.07, hash11(iTime * uSpeed)) / dist, 1.0) * uIntensity * centerMask;
                        col = pow(col, vec3(1.0));
                        fragColor = vec4(col, 1.0);
                    }

                    void main() {
                        mainImage(gl_FragColor, gl_FragCoord.xy);
                    }
                `;

                this.program = this.createProgram(vertexShaderSource, fragmentShaderSource);
                this.gl.useProgram(this.program);
            }

            createProgram(vertexSource, fragmentSource) {
                const vertexShader = this.compileShader(vertexSource, this.gl.VERTEX_SHADER);
                const fragmentShader = this.compileShader(fragmentSource, this.gl.FRAGMENT_SHADER);

                const program = this.gl.createProgram();
                this.gl.attachShader(program, vertexShader);
                this.gl.attachShader(program, fragmentShader);
                this.gl.linkProgram(program);

                if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
                    console.error('Program linking error:', this.gl.getProgramInfoLog(program));
                    return null;
                }

                return program;
            }

            compileShader(source, type) {
                const shader = this.gl.createShader(type);
                this.gl.shaderSource(shader, source);
                this.gl.compileShader(shader);

                if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
                    console.error('Shader compile error:', this.gl.getShaderInfoLog(shader));
                    this.gl.deleteShader(shader);
                    return null;
                }

                return shader;
            }

            setupBuffers() {
                const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
                this.vertexBuffer = this.gl.createBuffer();
                this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
                this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);

                const aPosition = this.gl.getAttribLocation(this.program, 'aPosition');
                this.gl.enableVertexAttribArray(aPosition);
                this.gl.vertexAttribPointer(aPosition, 2, this.gl.FLOAT, false, 0, 0);
            }

            setupUniforms() {
                this.uniforms = {
                    iResolution: this.gl.getUniformLocation(this.program, 'iResolution'),
                    iTime: this.gl.getUniformLocation(this.program, 'iTime'),
                    uHue: this.gl.getUniformLocation(this.program, 'uHue'),
                    uXOffset: this.gl.getUniformLocation(this.program, 'uXOffset'),
                    uSpeed: this.gl.getUniformLocation(this.program, 'uSpeed'),
                    uIntensity: this.gl.getUniformLocation(this.program, 'uIntensity'),
                    uSize: this.gl.getUniformLocation(this.program, 'uSize')
                };
            }

            resizeCanvas() {
                this.canvas.width = this.canvas.clientWidth;
                this.canvas.height = this.canvas.clientHeight;
            }

            startRender() {
                this.startTime = performance.now();
                this.render();
            }

            render() {
                this.resizeCanvas();
                this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);

                const currentTime = performance.now();
                const time = (currentTime - this.startTime) / 1000.0;

                this.gl.uniform2f(this.uniforms.iResolution, this.canvas.width, this.canvas.height);
                this.gl.uniform1f(this.uniforms.iTime, time);
                this.gl.uniform1f(this.uniforms.uHue, this.options.hue);
                this.gl.uniform1f(this.uniforms.uXOffset, this.options.xOffset);
                this.gl.uniform1f(this.uniforms.uSpeed, this.options.speed);
                this.gl.uniform1f(this.uniforms.uIntensity, this.options.intensity);
                this.gl.uniform1f(this.uniforms.uSize, this.options.size);

                this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);

                requestAnimationFrame(() => this.render());
            }
        }

        // Timeline functionality
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize Lightning Effect
            const canvas = document.getElementById('lightning-canvas');
            if (canvas) {
                new LightningEffect(canvas, {
                    hue: 280,
                    xOffset: 0,
                    speed: 2,
                    intensity: 1.5,
                    size: 1
                });
            }

            const timelineProgress = document.getElementById('timeline-progress');
            const timelineComet = document.getElementById('timeline-comet');
            const cards = document.querySelectorAll('.event-card');

            let ticking = false;

            function updateTimeline() {
                if (!ticking) {
                    requestAnimationFrame(() => {
                        const scrollTop = window.pageYOffset;
                        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
                        const scrollPercent = scrollTop / docHeight;

                        // Update progress line
                        const progressHeight = Math.min(scrollPercent * 100, 100);
                        timelineProgress.style.height = progressHeight + '%';

                        // Update comet position
                        const cometTop = progressHeight + '%';
                        timelineComet.style.top = cometTop;

                        // Update card visibility and active state
                        cards.forEach((card, index) => {
                            const cardTop = card.offsetTop;
                            const cardHeight = card.offsetHeight;
                            const viewportTop = scrollTop;
                            const viewportBottom = scrollTop + window.innerHeight;
                            const viewportCenter = scrollTop + window.innerHeight / 2;

                            // Show card when it comes into view
                            if (cardTop < viewportBottom && cardTop + cardHeight > viewportTop) {
                                card.classList.add('visible');
                            }

                            // Activate card when it's near center of viewport
                            if (cardTop + cardHeight / 2 < viewportCenter + 100 &&
                                cardTop + cardHeight / 2 > viewportCenter - 100) {
                                card.classList.add('active');
                            } else {
                                card.classList.remove('active');
                            }
                        });

                        ticking = false;
                    });
                    ticking = true;
                }
            }

            // Metrics and social buttons visibility
            const socialButtons = document.getElementById('social-buttons');
            const metricsSection = document.querySelector('.metrics-section');

            function checkMetricsVisibility() {
                if (metricsSection) {
                    const scrollTop = window.pageYOffset;
                    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
                    const scrollPercent = scrollTop / docHeight;

                    // Show metrics when user scrolls to 90% of the page
                    if (scrollPercent >= 0.9) {
                        metricsSection.classList.add('visible');
                    } else {
                        metricsSection.classList.remove('visible');
                    }
                }
            }

            function checkSocialButtonsVisibility() {
                if (socialButtons && metricsSection) {
                    // Show social buttons when metrics are visible
                    if (metricsSection.classList.contains('visible')) {
                        socialButtons.classList.add('visible');
                    } else {
                        socialButtons.classList.remove('visible');
                    }
                }
            }

            window.addEventListener('scroll', updateTimeline, { passive: true });
            window.addEventListener('scroll', checkMetricsVisibility, { passive: true });
            window.addEventListener('scroll', checkSocialButtonsVisibility, { passive: true });
            updateTimeline();
            checkMetricsVisibility();
            checkSocialButtonsVisibility();
        });
    </script>
</body>

</html>