<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Internet Grid — Own Your Pixel</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=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">

    <!-- 1. Load env FIRST (before anything else) -->
    <script src="./env.js"></script>

    <!-- 2. Load Supabase library -->
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.39.0/dist/umd/supabase.min.js"></script>

    <!-- 3. Load PayPal (async, will be used when needed) -->
    <script src="https://www.paypal.com/sdk/js?client-id=AZY902qT2i68uOFwV4gPFGSbgeOKoIbNmOxzTHUbeXhKRBnz4KEDJ07fCxZBv9sD3rn-ElG4fkeGN51U&currency=USD" data-sdk-integration-source="button-factory"></script>

    <!-- 4. Your styles -->
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
<nav class="nav">
    <a href="/" class="nav-brand">
        <span class="brand-symbol">■</span>
        <span class="brand-text">The Internet Grid</span>
    </a>
    <div class="nav-links">
        <a href="/" class="nav-link active">Grid</a>
        <a href="/about.html" class="nav-link">About</a>
        <a href="/leaderboard.html" class="nav-link">Leaderboard</a>
    </div>
    <div class="nav-auth">
        <div id="auth-loading" class="auth-state">Loading...</div>
        <div id="auth-guest" class="auth-state hidden">
            <button id="btn-login" class="btn btn-primary">Sign In</button>
        </div>
        <div id="auth-user" class="auth-state hidden">
            <a href="/profile.html" class="user-chip">
                <img id="user-avatar" src="" alt="">
                <span id="user-name"></span>
            </a>
            <button id="btn-logout" class="btn btn-ghost">Sign Out</button>
        </div>
    </div>
</nav>

<main class="main">
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">
                <span class="title-line">One Million</span>
                <span class="title-line accent">Unique Squares</span>
            </h1>
            <p class="hero-subtitle">Claim your permanent space on the internet. $1 per square. 50×50 pixels. Forever.</p>
            <div class="hero-stats">
                <div class="stat">
                    <span class="stat-value" id="stat-claimed">0</span>
                    <span class="stat-label">Claimed</span>
                </div>
                <div class="stat-divider"></div>
                <div class="stat">
                    <span class="stat-value">1,000,000</span>
                    <span class="stat-label">Total</span>
                </div>
                <div class="stat-divider"></div>
                <div class="stat">
                    <span class="stat-value">$1.00</span>
                    <span class="stat-label">Per Square</span>
                </div>
            </div>
            <button class="btn btn-cta" onclick="document.getElementById('grid-section').scrollIntoView({behavior: 'smooth'})">
                Explore the Canvas
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 5v14M19 12l-7 7-7-7"/>
                </svg>
            </button>
        </div>
    </section>

    <section id="grid-section" class="grid-section">
        <div class="grid-toolbar">
            <div class="toolbar-group">
                <span class="toolbar-label">Canvas 1000×1000</span>
                <div class="zoom-controls">
                    <button id="zoom-out" class="btn-icon" aria-label="Zoom out">−</button>
                    <span id="zoom-level" class="zoom-value">100%</span>
                    <button id="zoom-in" class="btn-icon" aria-label="Zoom in">+</button>
                    <button id="zoom-reset" class="btn-icon" aria-label="Reset view">⌂</button>
                </div>
            </div>
            <div class="toolbar-group">
                <span id="hover-coords" class="coords">x: — y: —</span>
            </div>
        </div>
        <div class="grid-viewport" id="grid-viewport">
            <div class="grid-canvas-container" id="grid-container">
                <canvas id="grid-canvas" width="1000" height="1000"></canvas>
                <div class="grid-crosshair-h" id="crosshair-h"></div>
                <div class="grid-crosshair-v" id="crosshair-v"></div>
            </div>
        </div>
    </section>
</main>

<div id="modal-square" class="modal hidden">
    <div class="modal-backdrop"></div>
    <div class="modal-content">
        <button class="modal-close" aria-label="Close">&times;</button>

        <div id="view-available" class="modal-view">
            <div class="modal-header">
                <span class="tag tag-available">Available</span>
                <h2 class="modal-title" id="modal-coords">Square (0, 0)</h2>
            </div>
            <div class="modal-body">
                <p class="modal-desc">This square is unclaimed. Purchase it permanently for <strong>$1.00 USD</strong>.</p>
                <div class="price-tag">$1.00</div>

                <div id="paypal-container" class="paypal-container"></div>

                <div id="login-prompt" class="login-prompt hidden">
                    <p>Please sign in to purchase squares</p>
                    <button id="btn-login-modal" class="btn btn-primary">Sign In with Google</button>
                </div>
            </div>
        </div>

        <div id="view-owned" class="modal-view hidden">
            <div class="modal-header">
                <span class="tag tag-owned">Claimed</span>
                <h2 class="modal-title" id="modal-coords-owned">Square (0, 0)</h2>
            </div>
            <div class="modal-body">
                <div class="square-preview" id="square-preview">
                    <div class="preview-placeholder">No image uploaded</div>
                    <img id="preview-img" src="" alt="Square content" class="hidden">
                </div>

                <div id="upload-section" class="upload-section hidden">
                    <p class="upload-hint">Upload 50×50 PNG/JPG (max 200KB)</p>
                    <div class="upload-zone" id="upload-zone">
                        <input type="file" id="file-input" accept="image/png,image/jpeg" hidden>
                        <div class="upload-prompt">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
                            </svg>
                            <span>Drop image or click to browse</span>
                        </div>
                    </div>
                    <div id="upload-preview" class="upload-preview hidden">
                        <img id="preview-thumb" src="" alt="Preview">
                        <button id="btn-upload" class="btn btn-primary">Confirm Upload</button>
                    </div>
                    <p id="upload-error" class="error-msg hidden"></p>
                </div>

                <div id="owner-info" class="owner-info">
                    <p>Owned by <span id="owner-name"></span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="toast-container" class="toast-container"></div>

<script type="module" src="js/app.js"></script>
</body>
</html>