<?php
session_start();
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

if (!isset($_SESSION['streak'])) {
    $_SESSION['streak'] = 0;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Streaks - Chirivia</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;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-green: #2E8B57;
            --secondary-blue: #4682B4;
            --accent-color: #5F9EA0;
            --background-light: #F0F8FF;
            --surface-white: #FFFFFF;
            --text-dark: #2F4F4F;
            --font-headings: 'Inter', sans-serif;
            --font-body: 'Inter', sans-serif;
            --spacing-base: 8px;
            --border-radius: 0.5rem; /* 8px */
        }

        body {
            font-family: var(--font-body);
            background-color: var(--background-light);
            color: var(--text-dark);
            margin: 0;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: calc(var(--spacing-base) * 2);
        }

        h1, h2, h3 {
            font-family: var(--font-headings);
            color: var(--primary-green);
        }

        .header {
            background: var(--surface-white);
            padding: calc(var(--spacing-base) * 2) 0;
            border-bottom: 1px solid #eee;
            text-align: center;
        }
        
        .header .logo {
            font-family: var(--font-headings);
            font-size: 2rem;
            color: var(--primary-green);
            text-decoration: none;
            font-weight: bold;
        }
        
        main {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .content-wrapper {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing-base) * 8);
        }

        .image-container {
            flex-shrink: 0;
        }

        .streak-image {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            object-fit: contain;
            background-color: var(--surface-white);
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            border: 5px solid var(--surface-white);
            animation: bob 3s ease-in-out infinite;
        }

        .text-container {
            text-align: left;
        }
        
        @keyframes bob {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-15px);
            }
            100% {
                transform: translateY(0);
            }
        }
        
        .footer {
            background-color: var(--surface-white);
            text-align: center;
            padding: calc(var(--spacing-base) * 3) 0;
            margin-top: auto;
            font-size: 0.9rem;
        }
        
        .footer a {
            color: var(--primary-green);
            text-decoration: none;
        }
        
        .cta-button {
            background-color: var(--accent-color);
            color: var(--surface-white);
            padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 3);
            border: none;
            border-radius: var(--border-radius);
            font-size: 1.1rem;
            font-weight: bold;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-top: calc(var(--spacing-base) * 2);
            display: inline-block;
        }

        .cta-button:hover {
            background-color: #53868B;
        }

    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <a href="index.php" class="logo">Chirivia</a>
        </div>
    </header>

    <main class="container">
        <div class="content-wrapper">
            <div class="image-container">
                <img src="assets/pasted-20251005-170401-70cc8986.png" alt="Streaks Calendar" class="streak-image">
            </div>
            <div class="text-container">
                <h1>Track Your Progress</h1>
                <p>Your commitment to learning and taking action creates a powerful impact. Keep the momentum going!</p>
                <p style="font-size: 1.5rem; font-weight: bold; color: var(--secondary-blue);">
                    🔥 Current Streak: <?php echo $_SESSION['streak']; ?> <?php echo ($_SESSION['streak'] == 1) ? 'day' : 'days'; ?> 🔥
                </p>
                <a href="index.php" class="cta-button">Back to Home</a>
            </div>
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 Chirivia. All Rights Reserved. | <a href="privacy.php">Privacy Policy</a></p>
        </div>
    </footer>
</body>
</html>