<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maywok • Personal Site</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
        <style>
            /* Critical inline styles so layout works even if styles.css fails to load */
            html, body { height: 100%; margin: 0; }
            body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial; }
            .app { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
            .section { max-width: 900px; margin: 0 auto; padding: 48px 24px; }
            .hero { text-align: center; }
            .type { font-size: clamp(64px, 14vw, 160px); font-weight: 800; letter-spacing: -1px; }
            .hover-color { color: #111; transition: color .18s ease; }
            .hover-color:hover { color: #ef4444; }
            /* Top icon bar (critical inline fallback) */
            .icon-bar { position: sticky; top: 12px; display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; margin: 0 auto; }
            .icon { color: #000000; text-decoration: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; position: relative; z-index: 1; }
            .icon:hover { color: #b22222; filter: drop-shadow(0 0 6px rgba(178,34,34,0.55)); }
            .icon.active { color: #e85c5c; filter: drop-shadow(0 0 6px rgba(232,92,92,0.55)); }
            .icon.active:hover { color: #e85c5c; filter: drop-shadow(0 0 8px rgba(232,92,92,0.65)); }
            .bubble { position: absolute; top: 0; left: 0; border-radius: 14px; background: rgba(178,34,34,0.25); border: 2px solid rgba(178,34,34,0.65); box-shadow: 0 6px 14px rgba(178,34,34,0.20); pointer-events: none; }
            .site-footer { text-align: center; padding: 16px; }

            /* Inline split background and pattern to validate visuals even if external CSS fails */
            .split-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #f5deb3; }
            .split-bg::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
                background-image: radial-gradient(#1f2937 1px, transparent 1px);
                background-size: 18px 18px; opacity: 0.12; pointer-events: none; }
            @media (max-width: 640px) { .split-bg { background: #f5deb3; } .split-bg::after { left: 0; top: 0; right: 0; bottom: 0; } }
        </style>
</head>
<body>
        <!-- Robust split background independent of body background -->
        <div class="split-bg" aria-hidden="true"></div>
        <div class="icon-bar" aria-label="Primary navigation">
            <div class="bubble" id="bubble"></div>
            <a href="#/hello" class="icon" title="Home" data-route="#/hello" aria-label="Home">
                <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M12 3l9 8-1.5 1.8L18 11.2V20h-5v-5H11v5H6v-8.8L4.5 12.8 3 11z"/></svg>
            </a>
            <a href="#/about" class="icon" title="About" data-route="#/about" aria-label="About">
                <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M12 12a5 5 0 100-10 5 5 0 000 10zm-7 9v-1a7 7 0 0114 0v1H5z"/></svg>
            </a>
            <a href="#/gallery" class="icon" title="Gallery" data-route="#/gallery" aria-label="Gallery">
                <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M21 19V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2zM7 7h10v6l-3-3-4 4-3-3z"/></svg>
            </a>
            <a href="#/notes" class="icon" title="Notes" data-route="#/notes" aria-label="Notes">
                <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M6 2h9l5 5v13a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm8 1v5h5"/></svg>
            </a>
            <a href="#/contact" class="icon" title="Contact" data-route="#/contact" aria-label="Contact">
                <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M4 4h16a2 2 0 012 2v1l-10 5L2 7V6a2 2 0 012-2zm0 6l8 4 8-4v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8z"/></svg>
            </a>
        </div>

        <main id="app" class="app"></main>

        <footer class="site-footer">
            <small>© <span id="year"></span> maywok • Made with care</small>
        </footer>

        <script>
            // Footer year
            document.getElementById('year').textContent = new Date().getFullYear();

            // Tiny SPA hash router
            const app = document.getElementById('app');
            const tabs = Array.from(document.querySelectorAll('.icon-bar .icon'));
            const bubble = document.getElementById('bubble');
            let prev = null;

            const views = {
                '#/hello': `
                    <section class="section hero hero-center">
                        <h1 class="type hover-color">maywok</h1>
                        <div class="actions">
                            <button class="btn" id="confettiBtn">Throw Confetti</button>
                            <a class="btn alt" href="#/gallery">See Gallery</a>
                        </div>
                    </section>
                `,
                '#/about': `
                    <section class="section">
                        <h2>About</h2>
                        <p>deez :)</p>
                    </section>
                `,
                '#/gallery': `
                    <section class="section">
                        <h2>Gallery</h2>
                        <ul class="card-list">
                            <li class="card">Color study #01</li>
                        </ul>
                    </section>
                `,
                '#/notes': `
                    <section class="section">
                        <h2>Notes</h2>
                        <p>Placeholder entries incoming.</p>
                    </section>
                `,
                '#/contact': `
                    <section class="section">
                        <h2>Contact</h2>
                        <p>Say hi: <a href="mailto:masonwalker159@gmail.com">masonwalker159@gmail.com</a></p>
                    </section>
                `
            };

            function positionBubble() {
                const hash = location.hash || '#/hello';
                const active = tabs.find(t => t.dataset.route === hash) || tabs[0];
                if (!active) return;
                const rect = active.getBoundingClientRect();
                const parentRect = bubble.parentElement.getBoundingClientRect();
                const x = rect.left - parentRect.left - 6;
                const y = rect.top - parentRect.top - 6;
                const w = rect.width + 12;
                const h = rect.height + 12;

                if (!prev) {
                    const prevTransition = bubble.style.transition;
                    bubble.style.transition = 'none';
                    bubble.style.width = w + 'px';
                    bubble.style.height = h + 'px';
                    bubble.style.transform = `translate(${x}px, ${y}px)`;
                    // force reflow to apply without animating
                    void bubble.offsetWidth;
                    bubble.style.transition = prevTransition || '';
                    prev = { x, y, w, h };
                    return;
                }

                const dx = x - prev.x;
                const dist = Math.abs(dx);
                const extra = Math.min(36, dist * 0.65);
                const squash = Math.min(8, extra * 0.2);

                // Stretch phase (one frame) then settle to final
                bubble.style.borderRadius = dist > 4 ? '12px' : '14px';
                bubble.style.width = (w + extra) + 'px';
                bubble.style.height = (h - squash) + 'px';
                bubble.style.transform = `translate(${x}px, ${y}px)`;

                requestAnimationFrame(() => {
                    bubble.style.width = w + 'px';
                    bubble.style.height = h + 'px';
                    bubble.style.borderRadius = '14px';
                });

                prev = { x, y, w, h };
            }

            function render() {
                const hash = location.hash || '#/hello';
                app.innerHTML = views[hash] || views['#/hello'];
                tabs.forEach(t => t.classList.toggle('active', t.dataset.route === hash));
                // position after layout
                requestAnimationFrame(positionBubble);

                // bind view actions
                const confettiBtn = document.getElementById('confettiBtn');
                if (confettiBtn) confettiBtn.addEventListener('click', confetti);
                typewriter();
            }

            // simple confetti effect
            function confetti() {
                const count = 60;
                for (let i = 0; i < count; i++) {
                    const s = document.createElement('span');
                    s.className = 'confetti';
                    s.style.left = Math.random() * 100 + 'vw';
                    s.style.background = `hsl(${Math.random()*360}, 90%, 60%)`;
                    document.body.appendChild(s);
                    setTimeout(() => s.remove(), 1500);
                }
            }

            // lightweight typewriter for hero title
            function typewriter() {
                const el = document.querySelector('.type');
                if (!el) return;
                const text = el.textContent;
                el.textContent = '';
                let i = 0;
                const tick = () => {
                    el.textContent += text[i++];
                    if (i < text.length) requestAnimationFrame(tick);
                };
                requestAnimationFrame(tick);
            }

            window.addEventListener('hashchange', render);
            window.addEventListener('resize', positionBubble);
            window.addEventListener('scroll', () => {
                // Throttle via rAF for smooth tracking during scroll
                if (positionBubble._raf) return;
                positionBubble._raf = requestAnimationFrame(() => {
                    positionBubble();
                    positionBubble._raf = 0;
                });
            });
            render();
        </script>
    </body>
</html>