{{ define "main" }}
<div class="flex flex-col md:flex-row items-center justify-center gap-8 w-full max-w-5xl z-10">
    <!-- Left Side: Trainer Card -->
    <div class="pkmn-box w-full max-w-sm p-1 flex-shrink-0 card-pop" style="--delay: 50ms;">
        <div class="border-2 border-[#d0d0d8] rounded-[2px] p-4 bg-white min-h-[180px] flex flex-col justify-between">
            <div class="flex gap-4">
                <div class="flex-1">
                    <h1 class="text-xl mb-4 pkmn-text-shadow text-zinc-800 pixel">TRAINER CARD</h1>
                    <div class="flex justify-between items-end mb-2">
                        <span class="text-xs text-zinc-500 font-bold">NAME</span>
                        <span class="text-sm font-bold text-zinc-800 tracking-wider">JUHLIN</span>
                    </div>
                    <div class="w-full h-[2px] bg-zinc-800 mb-2"></div>
                    <div class="flex justify-between items-end">
                        <span class="text-xs text-zinc-500 font-bold">XP</span>
                        <span class="text-sm font-bold text-zinc-800 tracking-wider">8092</span>
                    </div>
                </div>
                <!-- Trainer Sprite -->
                <div class="w-24 h-24 bg-[#f8f8f8] border-2 border-[#d0d0d8] rounded flex items-center justify-center overflow-hidden self-start">
                    <img src="https://play.pokemonshowdown.com/sprites/trainers/red.png" 
                         alt="Trainer" 
                         class="w-full h-full object-contain"
                         style="image-rendering: pixelated; min-height: 96px; min-width: 96px; display: block;">
                </div>
            </div>
            
            <!-- Badges Section -->
            <div class="mt-6">
                <span class="text-[10px] text-zinc-400 font-bold">BADGES</span>
                <div class="flex flex-wrap justify-center gap-2 mt-2 px-1">
                    <div class="badge js" title="JavaScript">JS</div>
                    <div class="badge ts" title="TypeScript">TS</div>
                    <div class="badge py" title="Python">PY</div>
                    <div class="badge go" title="Go">GO</div>
                    <div class="badge re" title="React">RE</div>
                    <div class="badge db" title="SQL">DB</div>
                    <div class="badge git" title="Git">GIT</div>
                    <div class="badge sh" title="Shell">SH</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Side: Start Menu -->
    <div class="pkmn-box w-full max-w-[280px] card-pop" style="--delay: 120ms;">
        <div class="border-2 border-[#d0d0d8] rounded-[2px] bg-white py-2" id="main-menu">
        <ul class="flex flex-col">
            <!-- POKEDEX (Projects) -->
            <li>
                <button data-action="modal" data-payload="pokedex" class="menu-link w-full text-left px-4 py-3 text-sm font-bold text-zinc-500 hover:text-black transition-colors flex items-center group">
                    <span class="cursor opacity-0 w-6 text-[var(--theme-primary)] transition-opacity text-lg" style="margin-top:-4px">►</span>
                    <span class="pixel">POKEDEX</span>
                </button>
            </li>
            <!-- BAG (Resume/Contact) -->
            <li>
                <button data-action="modal" data-payload="bag" class="menu-link w-full text-left px-4 py-3 text-sm font-bold text-zinc-500 hover:text-black transition-colors flex items-center group">
                    <span class="cursor opacity-0 w-6 text-[var(--theme-primary)] transition-opacity text-lg" style="margin-top:-4px">►</span>
                    <span class="pixel">BAG</span>
                </button>
            </li>
            
            <!-- Standard Links -->
            {{ range .Site.Params.links }}
            <li>
                <a href="{{ .url }}" target="_blank" class="menu-link block px-4 py-3 text-sm font-bold text-zinc-500 hover:text-black transition-colors flex items-center group">
                    <span class="cursor opacity-0 w-6 text-[var(--theme-primary)] transition-opacity text-lg" style="margin-top:-4px">►</span>
                    <span class="pixel uppercase">{{ .name }}</span>
                </a>
            </li>
            {{ end }}

            <!-- OPTIONS (Theme) -->
             <li>
                <button data-action="modal" data-payload="options" class="menu-link w-full text-left px-4 py-3 text-sm font-bold text-zinc-500 hover:text-black transition-colors flex items-center group">
                    <span class="cursor opacity-0 w-6 text-[var(--theme-primary)] transition-opacity text-lg" style="margin-top:-4px">►</span>
                    <span class="pixel">OPTIONS</span>
                </button>
            </li>
        </ul>
    </div>
</div>

<!-- MODALS -->

<!-- Pokedex Modal (Projects) -->
<div id="modal-pokedex" class="modal">
    <div class="pkmn-box w-full max-w-2xl bg-white p-1">
        <div class="border-2 border-[#d0d0d8] rounded-[2px] bg-white h-[400px] flex flex-col relative">
            <!-- Header -->
            <div class="bg-[var(--theme-primary)] text-white p-2 text-center border-b-4 border-[#d0d0d8]">
                <h2 class="text-sm pixel">POKEDEX - PROJECTS</h2>
            </div>
            
            <!-- Content -->
            <div class="flex-1 overflow-y-auto p-4 space-y-4">
                <!-- Example Project 1 -->
                <div class="flex gap-4 items-start menu-link p-2 border-2 border-transparent hover:border-[var(--theme-primary)] transition-colors cursor-pointer" data-action="link" onclick="window.open('https://github.com/julle/project-1', '_blank')">
                    <div class="w-16 h-16 bg-zinc-100 border-2 border-zinc-300 flex items-center justify-center text-xs text-zinc-400">IMG</div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <h3 class="font-bold text-sm pixel">#001 PROJECT ONE</h3>
                            <span class="text-[10px] bg-zinc-200 px-1 rounded">WEB</span>
                        </div>
                        <p class="text-[10px] mt-2 text-zinc-600 leading-relaxed">A full-stack web application built with React and Go. Features real-time updates.</p>
                    </div>
                </div>

                <!-- Example Project 2 -->
                <div class="flex gap-4 items-start menu-link p-2 border-2 border-transparent hover:border-[var(--theme-primary)] transition-colors cursor-pointer" data-action="link" onclick="window.open('https://github.com/julle/project-2', '_blank')">
                    <div class="w-16 h-16 bg-zinc-100 border-2 border-zinc-300 flex items-center justify-center text-xs text-zinc-400">IMG</div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <h3 class="font-bold text-sm pixel">#002 CLI TOOL</h3>
                            <span class="text-[10px] bg-zinc-200 px-1 rounded">RUST</span>
                        </div>
                        <p class="text-[10px] mt-2 text-zinc-600 leading-relaxed">Fast command line utility for file processing. 10x faster than Python version.</p>
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <div class="p-2 border-t-2 border-[#d0d0d8] text-center">
                 <button data-action="close" class="menu-link text-xs hover:text-[var(--theme-primary)] pixel">[x] CLOSE</button>
            </div>
        </div>
    </div>
</div>

<!-- Bag Modal (Resume/Contact) -->
<div id="modal-bag" class="modal">
    <div class="pkmn-box w-full max-w-md bg-white p-1">
        <div class="border-2 border-[#d0d0d8] rounded-[2px] bg-white p-4">
             <h2 class="text-sm mb-4 border-b-2 border-zinc-200 pb-2 pixel">ITEM POCKET</h2>
             <ul class="space-y-2">
                 <li>
                     <a href="mailto:hello@juhlin.io" class="menu-link flex justify-between p-2 hover:bg-zinc-100 cursor-pointer">
                         <span class="font-bold text-sm pixel">E-MAIL</span>
                         <span class="text-xs text-zinc-500">x 1</span>
                     </a>
                 </li>
                 <li>
                     <a href="#" class="menu-link flex justify-between p-2 hover:bg-zinc-100 cursor-pointer">
                         <span class="font-bold text-sm pixel">RESUME.PDF</span>
                         <span class="text-xs text-zinc-500">x 1</span>
                     </a>
                 </li>
                 <li>
                     <div class="menu-link flex justify-between p-2 hover:bg-zinc-100 cursor-pointer" data-action="close">
                         <span class="font-bold text-sm pixel">CANCEL</span>
                     </div>
                 </li>
             </ul>
        </div>
    </div>
</div>

<!-- Options Modal (Theme) -->
<div id="modal-options" class="modal">
    <div class="pkmn-box w-full max-w-sm bg-white p-1">
        <div class="border-2 border-[#d0d0d8] rounded-[2px] bg-white p-4 text-center">
             <h2 class="text-sm mb-4 pixel">SELECT VERSION</h2>
             <p class="text-[10px] text-zinc-500 mb-4">Pick a colorway for the UI.</p>
             <div class="theme-grid">
                 <button data-action="theme" data-payload="theme-red" class="menu-link theme-swatch" style="--swatch: linear-gradient(135deg, #f83800, #ff7a5c);">
                     <span class="chip pixel"><span class="dot"></span>Fire Red</span>
                 </button>
                 <button data-action="theme" data-payload="theme-green" class="menu-link theme-swatch" style="--swatch: linear-gradient(135deg, #008000, #7ee07e);">
                     <span class="chip pixel"><span class="dot"></span>Leaf Green</span>
                 </button>
                 <button data-action="theme" data-payload="theme-blue" class="menu-link theme-swatch" style="--swatch: linear-gradient(135deg, #0060e0, #6db4ff);">
                     <span class="chip pixel"><span class="dot"></span>Water Blue</span>
                 </button>
             </div>
             <div class="theme-actions">
                 <button data-action="close" class="menu-link text-xs hover:text-[var(--theme-primary)] pixel">CANCEL</button>
             </div>
        </div>
    </div>
</div>
{{ end }}