@extends('layouts.app')
@section('title', 'CareerPath Pakistan — Find Your Perfect Career')

@push('styles')
<style>
    /* HERO */
    .hero {
        min-height: 92vh;
        display: flex;
        align-items: center;
        padding: 80px 5%;
        position: relative;
        overflow: hidden;
    }
    .hero-bg {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 60% 50% at 70% 50%, rgba(108,63,232,0.2) 0%, transparent 70%),
            radial-gradient(ellipse 40% 40% at 20% 80%, rgba(255,107,53,0.12) 0%, transparent 60%),
            radial-gradient(ellipse 30% 30% at 80% 20%, rgba(0,212,161,0.1) 0%, transparent 50%);
    }
    .hero-grid {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(108,63,232,0.06) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(108,63,232,0.06) 1px, transparent 1px);
        background-size: 60px 60px;
        mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    }
    .hero-content { position: relative; max-width: 560px; z-index: 2; }
    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: rgba(108,63,232,0.15);
        border: 1px solid rgba(108,63,232,0.35);
        border-radius: 50px;
        font-size: 0.82rem;
        font-weight: 600;
        color: #A78BFA;
        margin-bottom: 24px;
    }
    .hero-badge span { width:8px;height:8px;background:#A78BFA;border-radius:50%;animation:pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

    .hero h1 {
        font-family: 'Outfit', sans-serif;
        font-size: clamp(2.4rem, 4.5vw, 3.8rem);
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 22px;
    }
    .hero h1 .gradient-text {
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .hero p {
        font-size: 1.05rem;
        color: var(--text-muted);
        line-height: 1.8;
        margin-bottom: 36px;
        max-width: 460px;
    }
    .hero-actions { display:flex;flex-wrap:wrap;gap:14px; }

    /* ===== 3D CANVAS VISUAL ===== */
    .hero-visual {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }
    #heroCanvas {
        width: 100%;
        height: 100%;
        display: block;
    }
    /* Floating info cards on top of canvas */
    .hero-float-cards {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    .hfc {
        position: absolute;
        background: rgba(30, 41, 59, 0.85);
        backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        padding: 12px 16px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        animation: floatY 5s ease-in-out infinite;
        white-space: nowrap;
    }
    .hfc:nth-child(1) { top: 15%; right: 12%; animation-delay: 0s; }
    .hfc:nth-child(2) { top: 42%; right: 3%;  animation-delay: -1.7s; }
    .hfc:nth-child(3) { bottom: 20%; right: 15%; animation-delay: -3.2s; }
    .hfc:nth-child(4) { top: 28%; right: 52%; animation-delay: -0.8s; }
    .hfc-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
    @keyframes floatY {
        0%,100% { transform: translateY(0px); }
        50%      { transform: translateY(-12px); }
    }

    .stats-bar {
        display: flex;
        gap: 40px;
        margin-top: 50px;
        padding-top: 40px;
        border-top: 1px solid var(--border);
    }
    .stat-item .num { font-family:'Outfit',sans-serif;font-size:1.8rem;font-weight:800; }
    .stat-item .lbl { font-size:0.82rem;color:var(--text-muted);margin-top:2px; }

    /* SEARCH */
    .search-section { padding: 0 5% 80px; }
    .search-box {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 20px;
        display: flex;
        gap: 12px;
        align-items: center;
        max-width: 800px;
        margin: 0 auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    .search-input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-size: 1rem;
        color: var(--text);
        font-family: inherit;
        padding: 4px 0;
    }
    .search-input::placeholder { color: var(--text-muted); }
    .search-divider { width:1px;height:30px;background:var(--border); }

    /* CATEGORIES */
    .cat-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
    .cat-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 24px;
        text-align: center;
        text-decoration: none;
        transition: all 0.3s;
        cursor: pointer;
    }
    .cat-card:hover { transform:translateY(-6px);border-color:rgba(108,63,232,0.4);box-shadow:0 20px 40px rgba(108,63,232,0.15); }
    .cat-icon { font-size: 2.2rem; margin-bottom: 12px; display:block; }
    .cat-name { font-weight:700;font-size:0.95rem;color:var(--text); }
    .cat-count { font-size:0.78rem;color:var(--text-muted);margin-top:4px; }

    /* CAREER CARDS */
    .career-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 24px;
        text-decoration: none;
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .career-card:hover { transform:translateY(-6px);border-color:rgba(108,63,232,0.4);box-shadow:var(--shadow); }
    .career-icon { font-size:2.2rem; }
    .career-name { font-weight:700;font-size:1rem;color:var(--text); }
    .career-cat { font-size:0.78rem;color:var(--text-muted);margin-top:2px; }
    .career-meta { display:flex;gap:8px;flex-wrap:wrap;margin-top:4px; }
    .salary-tag { font-size:0.8rem;color:var(--accent);font-weight:600; background:rgba(0,212,161,0.1);padding:3px 10px;border-radius:6px; }

    /* COUNSELOR CARDS */
    .counselor-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 28px;
        text-align: center;
        transition: all 0.3s;
    }
    .counselor-card:hover { transform:translateY(-6px);border-color:rgba(108,63,232,0.3);box-shadow:var(--shadow); }
    .counselor-avatar {
        width: 72px; height: 72px;
        border-radius: 50%;
        background: var(--gradient);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.6rem; font-weight: 700; color: white;
        margin: 0 auto 14px;
        border: 3px solid rgba(108,63,232,0.3);
    }
    .stars { color: #FBBF24;font-size:0.85rem;margin:6px 0; }
    .counselor-fee { font-weight:700;color:var(--accent);font-size:0.95rem;margin-top:8px; }

    /* BLOG CARDS */
    .blog-card { background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:all 0.3s;text-decoration:none;display:block; }
    .blog-card:hover { transform:translateY(-6px);border-color:rgba(108,63,232,0.3);box-shadow:var(--shadow); }
    .blog-thumb { height:160px;background:linear-gradient(135deg,var(--primary),#A855F7);display:flex;align-items:center;justify-content:center;font-size:3rem; }
    .blog-body { padding:20px; }
    .blog-cat { font-size:0.75rem;font-weight:700;color:#A78BFA;text-transform:uppercase;letter-spacing:0.5px; }
    .blog-title { font-weight:700;font-size:0.95rem;margin:8px 0;color:var(--text);line-height:1.5; }

    /* CTA */
    .cta-section {
        margin: 0 5% 80px;
        background: linear-gradient(135deg, rgba(108,63,232,0.2), rgba(168,85,247,0.1));
        border: 1px solid rgba(108,63,232,0.3);
        border-radius: 24px;
        padding: 70px 5%;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .cta-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, rgba(108,63,232,0.2) 0%, transparent 70%);
    }

    @media (max-width: 1024px) {
        .hero-visual { display:none; }
        .cat-grid { grid-template-columns:repeat(3,1fr); }
        .stats-bar { gap:24px; }
        .hero-content { max-width: 100%; }
    }
    @media (max-width: 768px) {
        .hero { min-height:auto;padding:60px 5%; }
        .cat-grid { grid-template-columns:repeat(2,1fr); }
        .stats-bar { flex-wrap:wrap;gap:20px; }
        .search-box { flex-direction:column;gap:10px; }
        .search-divider { display:none; }
    }
    @media (max-width: 480px) {
        .cat-grid { grid-template-columns:1fr 1fr; }
    }
</style>
@endpush

@section('content')

<!-- HERO -->
<section class="hero">
    <div class="hero-bg"></div>
    <div class="hero-grid"></div>

    <!-- LEFT: Text content -->
    <div class="hero-content animate__animated animate__fadeInUp">
        <div class="hero-badge">
            <span></span>
            Pakistan's #1 Career Guidance Platform
        </div>
        <h1>
            Discover Your<br>
            <span class="gradient-text">Perfect Career</span><br>
            Path Today
        </h1>
        <p>
            Take our AI-powered career quiz, explore 50+ career fields, and connect with expert counselors to build your future with confidence.
        </p>
        <div class="hero-actions">
            <a href="{{ route('quiz.index') }}" class="btn btn-primary btn-lg">
                <i class="fas fa-wand-magic-sparkles"></i>
                Take Career Quiz
            </a>
            <a href="{{ route('careers.index') }}" class="btn btn-outline btn-lg">
                <i class="fas fa-compass"></i>
                Explore Careers
            </a>
        </div>

        <div class="stats-bar">
            <div class="stat-item">
                <div class="num" style="background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">{{ $stats['careers'] }}+</div>
                <div class="lbl">Career Fields</div>
            </div>
            <div class="stat-item">
                <div class="num" style="color:var(--accent)">{{ $stats['counselors'] }}+</div>
                <div class="lbl">Expert Counselors</div>
            </div>
            <div class="stat-item">
                <div class="num" style="color:#FBBF24">{{ $stats['students'] }}</div>
                <div class="lbl">Students Guided</div>
            </div>
            <div class="stat-item">
                <div class="num" style="color:#FF6B35">{{ $stats['sessions'] }}</div>
                <div class="lbl">Sessions Done</div>
            </div>
        </div>
    </div>

    <!-- RIGHT: 3D Canvas Animation -->
    <div class="hero-visual">
        <canvas id="heroCanvas"></canvas>
        <div class="hero-float-cards">
            <div class="hfc">
                <div class="hfc-dot" style="background:#00D4A1"></div>
                💻 Software Engineer
            </div>
            <div class="hfc">
                <div class="hfc-dot" style="background:#A78BFA"></div>
                🏥 Medical Doctor
            </div>
            <div class="hfc">
                <div class="hfc-dot" style="background:#FF6B35"></div>
                📈 Business Analyst
            </div>
            <div class="hfc">
                <div class="hfc-dot" style="background:#FBBF24"></div>
                ⚖️ Lawyer
            </div>
        </div>
    </div>
</section>

<!-- SEARCH -->
<section class="search-section">
    <form action="{{ route('careers.index') }}" method="GET">
        <div class="search-box">
            <i class="fas fa-search" style="color:var(--text-muted);font-size:1.1rem;flex-shrink:0"></i>
            <input type="text" name="search" class="search-input" placeholder="Search careers, skills, or fields..." value="{{ request('search') }}">
            <div class="search-divider"></div>
            <select name="category" class="search-input" style="cursor:pointer;max-width:160px">
                <option value="">All Categories</option>
                @foreach($categories as $cat)
                <option value="{{ $cat }}">{{ $cat }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-primary" style="flex-shrink:0">
                <i class="fas fa-arrow-right"></i> Search
            </button>
        </div>
    </form>
</section>

<!-- CATEGORIES -->
<section class="section-sm" style="padding-top:0">
    <div class="container">
        <div style="text-align:center;margin-bottom:50px">
            <p style="color:var(--primary);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px">Explore By Field</p>
            <h2 style="font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800">Browse Career Categories</h2>
        </div>
        <div class="cat-grid">
            @php
            $catIcons = ['Engineering'=>'⚙️','Medical'=>'🏥','Information Technology'=>'💻','Business'=>'📈','Law'=>'⚖️','Arts & Design'=>'🎨','Education'=>'📚','Media'=>'📡'];
            $catCounts = [6,5,8,7,4,6,5,4];
            $i = 0;
            @endphp
            @foreach($categories as $cat)
            <a href="{{ route('careers.index', ['category'=>$cat]) }}" class="cat-card">
                <span class="cat-icon">{{ $catIcons[$cat] ?? '🎯' }}</span>
                <div class="cat-name">{{ $cat }}</div>
                <div class="cat-count">{{ $catCounts[$i++] ?? 5 }}+ careers</div>
            </a>
            @endforeach
        </div>
    </div>
</section>

<!-- FEATURED CAREERS -->
@if($featuredCareers->count())
<section class="section">
    <div class="container">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:40px">
            <div>
                <p style="color:var(--primary);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Top Picks</p>
                <h2 style="font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800">Featured Careers</h2>
            </div>
            <a href="{{ route('careers.index') }}" class="btn btn-outline">View All <i class="fas fa-arrow-right"></i></a>
        </div>
        <div class="grid-3">
            @foreach($featuredCareers as $career)
            <a href="{{ route('careers.show', $career->slug) }}" class="career-card">
                <div class="career-icon">{{ $career->icon ?? '💼' }}</div>
                <div>
                    <div class="career-name">{{ $career->name }}</div>
                    <div class="career-cat">{{ $career->category }}</div>
                </div>
                <p style="font-size:0.83rem;color:var(--text-muted);line-height:1.6">{{ Str::limit($career->description, 100) }}</p>
                <div class="career-meta">
                    <span class="salary-tag">💰 {{ $career->min_salary_pkr ?? '50k' }}–{{ $career->max_salary_pkr ?? '150k' }}/mo</span>
                    <span class="badge badge-info">{{ $career->difficulty ?? 'Moderate' }}</span>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- QUIZ BANNER -->
<section style="padding: 0 5% 80px">
    <div style="background:linear-gradient(135deg,rgba(108,63,232,0.25),rgba(0,212,161,0.1));border:1px solid rgba(108,63,232,0.25);border-radius:24px;padding:50px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap">
        <div>
            <h2 style="font-family:'Outfit',sans-serif;font-size:1.8rem;font-weight:800;margin-bottom:12px">🤔 Not sure which career suits you?</h2>
            <p style="color:var(--text-muted);max-width:500px;line-height:1.7">Take our 10-minute career personality quiz and get personalized career recommendations based on your interests, skills, and goals.</p>
        </div>
        <a href="{{ route('quiz.index') }}" class="btn btn-primary btn-lg" style="flex-shrink:0">
            <i class="fas fa-wand-magic-sparkles"></i>
            Start Free Quiz
        </a>
    </div>
</section>

<!-- TOP COUNSELORS -->
@if($topCounselors->count())
<section class="section" style="padding-top:0">
    <div class="container">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:40px">
            <div>
                <p style="color:var(--primary);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Expert Guidance</p>
                <h2 style="font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800">Top Counselors</h2>
            </div>
            <a href="{{ route('counselors.index') }}" class="btn btn-outline">All Counselors <i class="fas fa-arrow-right"></i></a>
        </div>
        <div class="grid-4">
            @foreach($topCounselors as $counselor)
            <div class="counselor-card">
                <div class="counselor-avatar">{{ substr($counselor->user->name ?? 'C', 0, 1) }}</div>
                <div style="font-weight:700;font-size:0.95rem">{{ $counselor->user->name ?? 'Counselor' }}</div>
                <div style="font-size:0.8rem;color:var(--text-muted);margin-top:4px">{{ Str::limit($counselor->specialization, 35) }}</div>
                <div class="stars">
                    @for($s=0;$s<5;$s++) {{ $s < round($counselor->rating ?? 4) ? '★' : '☆' }} @endfor
                    <span style="color:var(--text-muted);font-size:0.75rem">({{ $counselor->rating ?? '4.5' }})</span>
                </div>
                <div class="counselor-fee">PKR {{ number_format($counselor->session_fee ?? 2000) }}/session</div>
                <a href="{{ url('/bookings/create/'.$counselor->id) }}" class="btn btn-primary btn-sm btn-block" style="margin-top:14px">Book Session</a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- BLOG POSTS -->
@if($latestPosts->count())
<section class="section" style="padding-top:0;padding-bottom:80px">
    <div class="container">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:40px">
            <div>
                <p style="color:var(--primary);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Latest Insights</p>
                <h2 style="font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800">Career Tips & Articles</h2>
            </div>
            <a href="{{ url('/blog') }}" class="btn btn-outline">All Articles <i class="fas fa-arrow-right"></i></a>
        </div>
        <div class="grid-3">
            @foreach($latestPosts as $post)
            @php $emojis = ['💡','🚀','📊','🎯','🌟','💪']; @endphp
            <a href="{{ url('/blog/'.$post->slug) }}" class="blog-card">
                <div class="blog-thumb" style="background:linear-gradient(135deg,{{ ['#6C3FE8','#FF6B35','#00D4A1'][rand(0,2)] }},{{ ['#A855F7','#FF8C00','#0EA5E9'][rand(0,2)] }})">
                    {{ $emojis[array_rand($emojis)] }}
                </div>
                <div class="blog-body">
                    <div class="blog-cat">{{ $post->category ?? 'Career Tips' }}</div>
                    <div class="blog-title">{{ $post->title }}</div>
                    <div style="font-size:0.82rem;color:var(--text-muted);line-height:1.5;margin:8px 0">{{ Str::limit($post->excerpt ?? $post->content, 90) }}</div>
                    <div class="blog-date"><i class="fas fa-calendar-alt fa-xs"></i> {{ optional($post->published_at)->format('M d, Y') ?? 'Recently' }}</div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- CTA -->
<section class="cta-section">
    <div style="position:relative">
        <div style="font-size:3rem;margin-bottom:16px">🚀</div>
        <h2 style="font-family:'Outfit',sans-serif;font-size:2.2rem;font-weight:800;margin-bottom:16px">Ready to Shape Your Future?</h2>
        <p style="color:var(--text-muted);font-size:1rem;margin-bottom:32px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.7">
            Join 10,000+ students who have found their career direction with CareerPath Pakistan. It's free to get started.
        </p>
        <div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap">
            <a href="{{ route('register') }}" class="btn btn-primary btn-lg"><i class="fas fa-user-plus"></i> Create Free Account</a>
            <a href="{{ route('quiz.index') }}" class="btn btn-outline btn-lg"><i class="fas fa-clipboard-question"></i> Try Career Quiz</a>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
/* ============================================================
   3D HERO ANIMATION — Pure canvas, no external libs needed
   A rotating planet with glowing rings, orbiting particles,
   and a starfield background.
   ============================================================ */
(function() {
    const canvas = document.getElementById('heroCanvas');
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    let W, H, cx, cy, animId;
    let mouse = { x: 0, y: 0 };

    /* ---- Resize ---- */
    function resize() {
        const rect = canvas.parentElement.getBoundingClientRect();
        W = canvas.width  = rect.width;
        H = canvas.height = rect.height;
        cx = W / 2;
        cy = H / 2;
    }

    /* ---- Stars ---- */
    const STAR_COUNT = 140;
    const stars = Array.from({ length: STAR_COUNT }, () => ({
        x: Math.random(),
        y: Math.random(),
        r: Math.random() * 1.5 + 0.3,
        a: Math.random(),
        speed: Math.random() * 0.003 + 0.001,
        phase: Math.random() * Math.PI * 2,
    }));

    /* ---- Orbit particles ---- */
    const ORBITS = [
        { radius: 110, count: 8,  speed: 0.008,  size: 5,  color: '#6C3FE8', glow: 'rgba(108,63,232,0.6)' },
        { radius: 165, count: 12, speed: -0.005, size: 4,  color: '#A855F7', glow: 'rgba(168,85,247,0.5)' },
        { radius: 218, count: 6,  speed: 0.003,  size: 6,  color: '#00D4A1', glow: 'rgba(0,212,161,0.6)' },
        { radius: 270, count: 16, speed: -0.002, size: 3,  color: '#FF6B35', glow: 'rgba(255,107,53,0.4)' },
    ];
    const particles = [];
    ORBITS.forEach((orb, oi) => {
        for (let i = 0; i < orb.count; i++) {
            particles.push({
                orbit: oi,
                angle: (i / orb.count) * Math.PI * 2,
                ...orb,
            });
        }
    });

    /* ---- Planet texture dots ---- */
    const PLANET_DOTS = Array.from({ length: 60 }, () => ({
        lat: (Math.random() - 0.5) * Math.PI,
        lng: Math.random() * Math.PI * 2,
        r:   Math.random() * 4 + 2,
        color: ['rgba(168,85,247,0.5)','rgba(0,212,161,0.4)','rgba(108,63,232,0.6)','rgba(255,107,53,0.3)'][Math.floor(Math.random()*4)],
    }));

    let t = 0;
    const PLANET_R = 80;

    function draw() {
        ctx.clearRect(0, 0, W, H);

        /* --- Stars --- */
        stars.forEach(s => {
            const alpha = 0.3 + 0.5 * Math.sin(t * s.speed * 60 + s.phase);
            ctx.beginPath();
            ctx.arc(s.x * W, s.y * H, s.r, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(255, 255, 255,${alpha * s.a})`;
            ctx.fill();
        });

        /* --- Orbit rings (ellipses, tilted) --- */
        ORBITS.forEach((orb, i) => {
            ctx.save();
            ctx.translate(cx, cy);
            ctx.scale(1, 0.38);
            ctx.rotate(0.15 * i);
            ctx.beginPath();
            ctx.ellipse(0, 0, orb.radius, orb.radius, 0, 0, Math.PI * 2);
            ctx.strokeStyle = orb.color + '33';
            ctx.lineWidth = 1;
            ctx.stroke();
            ctx.restore();
        });

        /* --- Planet glow (outer halo) --- */
        const glow = ctx.createRadialGradient(cx, cy, PLANET_R * 0.6, cx, cy, PLANET_R * 2.2);
        glow.addColorStop(0, 'rgba(108,63,232,0.25)');
        glow.addColorStop(0.5,'rgba(168,85,247,0.10)');
        glow.addColorStop(1,  'rgba(0,0,0,0)');
        ctx.beginPath();
        ctx.arc(cx, cy, PLANET_R * 2.2, 0, Math.PI * 2);
        ctx.fillStyle = glow;
        ctx.fill();

        /* --- Planet body --- */
        const bodyGrad = ctx.createRadialGradient(cx - 22, cy - 22, 4, cx, cy, PLANET_R);
        bodyGrad.addColorStop(0,   '#7C4FFF');
        bodyGrad.addColorStop(0.4, '#5328C4');
        bodyGrad.addColorStop(0.75,'#1A0A40');
        bodyGrad.addColorStop(1,   '#0D0620');
        ctx.beginPath();
        ctx.arc(cx, cy, PLANET_R, 0, Math.PI * 2);
        ctx.fillStyle = bodyGrad;
        ctx.fill();

        /* --- Planet surface dots (rotating) --- */
        const planetRot = t * 0.18;
        ctx.save();
        ctx.beginPath();
        ctx.arc(cx, cy, PLANET_R - 1, 0, Math.PI * 2);
        ctx.clip();
        PLANET_DOTS.forEach(d => {
            const lng2 = d.lng + planetRot;
            const cosLat = Math.cos(d.lat);
            const x3d = cosLat * Math.cos(lng2);
            const y3d = Math.sin(d.lat);
            const z3d = cosLat * Math.sin(lng2);
            if (z3d < -0.1) return; // back face
            const px = cx + x3d * (PLANET_R - 4);
            const py = cy - y3d * (PLANET_R - 4) * 0.55;
            const alpha = 0.4 + 0.6 * z3d;
            ctx.beginPath();
            ctx.arc(px, py, d.r, 0, Math.PI * 2);
            ctx.fillStyle = d.color.replace(')', `,${alpha})`).replace('rgba(', 'rgba(');
            ctx.fill();
        });
        ctx.restore();

        /* --- Planet highlight (light reflection) --- */
        const highlight = ctx.createRadialGradient(cx - 28, cy - 28, 2, cx - 10, cy - 10, PLANET_R * 0.7);
        highlight.addColorStop(0,   'rgba(255,255,255,0.18)');
        highlight.addColorStop(0.5, 'rgba(255,255,255,0.04)');
        highlight.addColorStop(1,   'rgba(255,255,255,0)');
        ctx.beginPath();
        ctx.arc(cx, cy, PLANET_R, 0, Math.PI * 2);
        ctx.fillStyle = highlight;
        ctx.fill();

        /* --- Planet shadow (dark side) --- */
        const shadow = ctx.createRadialGradient(cx + 45, cy + 30, 0, cx + 40, cy + 25, PLANET_R * 1.1);
        shadow.addColorStop(0,   'rgba(0,0,0,0.75)');
        shadow.addColorStop(0.6, 'rgba(0,0,0,0.3)');
        shadow.addColorStop(1,   'rgba(0,0,0,0)');
        ctx.beginPath();
        ctx.arc(cx, cy, PLANET_R, 0, Math.PI * 2);
        ctx.fillStyle = shadow;
        ctx.fill();

        /* --- Orbit particles --- */
        particles.forEach(p => {
            p.angle += p.speed;
            const orb = ORBITS[p.orbit];

            // 3D-ish projection: tilt the orbit
            const tiltAngle = 0.15 * p.orbit;
            const cosA = Math.cos(p.angle);
            const sinA = Math.sin(p.angle);
            const px = cx + cosA * orb.radius;
            const py = cy + sinA * orb.radius * 0.38 * Math.cos(tiltAngle);

            // Depth for occlusion — hide particles behind planet
            const distToCenter = Math.sqrt((px - cx) ** 2 + (py - cy) ** 2);
            const behindPlanet = sinA > 0.2 && distToCenter < PLANET_R * 1.1;
            if (behindPlanet) return;

            // Glow
            const grad = ctx.createRadialGradient(px, py, 0, px, py, p.size * 3);
            grad.addColorStop(0,   orb.glow);
            grad.addColorStop(0.5, orb.glow.replace('0.6','0.2').replace('0.5','0.15').replace('0.4','0.1'));
            grad.addColorStop(1,   'rgba(0,0,0,0)');
            ctx.beginPath();
            ctx.arc(px, py, p.size * 3, 0, Math.PI * 2);
            ctx.fillStyle = grad;
            ctx.fill();

            // Core
            ctx.beginPath();
            ctx.arc(px, py, p.size * 0.7, 0, Math.PI * 2);
            ctx.fillStyle = orb.color;
            ctx.fill();
        });

        /* --- Mouse parallax subtle glow --- */
        const mx = (mouse.x / W - 0.5) * 40;
        const my = (mouse.y / H - 0.5) * 40;
        const mg = ctx.createRadialGradient(cx + mx, cy + my, 0, cx + mx, cy + my, 180);
        mg.addColorStop(0,   'rgba(168,85,247,0.07)');
        mg.addColorStop(1,   'rgba(0,0,0,0)');
        ctx.beginPath();
        ctx.arc(cx + mx, cy + my, 180, 0, Math.PI * 2);
        ctx.fillStyle = mg;
        ctx.fill();

        t += 0.016;
        animId = requestAnimationFrame(draw);
    }

    /* ---- Init ---- */
    window.addEventListener('resize', () => { resize(); });
    canvas.parentElement.addEventListener('mousemove', e => {
        const rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left;
        mouse.y = e.clientY - rect.top;
    });

    resize();
    draw();
})();
</script>
@endpush