$pageTitle = "Gurukul 2.0 | The Ultimate Coaching Ecosystem";
$navType = "public";
$disableTheme = true;
include 'includes/header.php';
?>

<style>
    :root {
        --hero-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
        --glass-bg: rgba(255, 255, 255, 0.03);
        --glass-border: rgba(255, 255, 255, 0.1);
    }

    .hero-section {
        min-height: 90vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.15), transparent),
                    radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.15), transparent);
        padding: 4rem 5%;
        overflow: hidden;
        position: relative;
    }

    .hero-content {
        max-width: 900px;
        z-index: 2;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--primary-glow);
        border: 1px solid var(--border-accent);
        padding: 0.5rem 1.25rem;
        border-radius: 30px;
        color: var(--primary);
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 2rem;
        animation: fadeInDown 0.8s ease-out;
    }

    .hero-title {
        font-size: clamp(2.5rem, 8vw, 4.5rem);
        line-height: 1.1;
        font-weight: 800;
        margin-bottom: 1.5rem;
        animation: slideUp 0.8s ease-out;
    }

    .hero-title span {
        background: var(--hero-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        color: var(--text-muted);
        max-width: 600px;
        margin: 0 auto 3rem;
        line-height: 1.6;
        animation: slideUp 1s ease-out;
    }

    .feature-card {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        padding: 2.5rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(10px);
        height: 100%;
    }

    .feature-card:hover {
        transform: translateY(-10px);
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--primary);
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        background: var(--primary-glow);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
        color: var(--primary);
        border: 1px solid var(--border-accent);
    }

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 2rem;
        margin-top: 4rem;
    }

    .section-header {
        text-align: center;
        max-width: 700px;
        margin: 0 auto 5rem;
    }

    .section-header h2 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .section-header p {
        color: var(--text-muted);
        font-size: 1.1rem;
    }

    .bento-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 200px;
        gap: 1.5rem;
    }

    .bento-item {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 24px;
        padding: 2rem;
        position: relative;
        overflow: hidden;
    }

    .bento-item.large { grid-column: span 2; grid-row: span 2; }
    .bento-item.tall { grid-row: span 2; }

    .stat-pill {
        display: inline-block;
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .live-dot {
        width: 10px;
        height: 10px;
        background: var(--danger);
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
        box-shadow: 0 0 10px var(--danger);
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.2); }
        100% { opacity: 1; transform: scale(1); }
    }

    .device-preview {
        margin-top: 6rem;
        padding: 2rem;
        background: var(--bg-surface);
        border-radius: 40px;
        border: 1px solid var(--border-subtle);
        box-shadow: 0 40px 100px rgba(0,0,0,0.5);
    }

    .floating-icons {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 1;
    }

    .floating-icon {
        position: absolute;
        opacity: 0.1;
        animation: float 6s infinite ease-in-out;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }

    /* Interactive Elements Highlight */
    .feature-item-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.25rem;
        margin-top: 3rem;
    }

    .feature-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem;
        background: rgba(255,255,255,0.02);
        border: 1px solid var(--border-subtle);
        border-radius: 16px;
        transition: 0.2s;
    }

    .feature-item:hover {
        background: rgba(255,255,255,0.05);
        border-color: var(--primary);
    }

    .check-icon {
        color: var(--success);
        font-weight: bold;
    }
</style>

<div class="hero-section">
    <div class="floating-icons">
        <span class="floating-icon" style="top: 20%; left: 10%; font-size: 3rem;">📡</span>
        <span class="floating-icon" style="top: 60%; left: 5%; font-size: 2rem;">📚</span>
        <span class="floating-icon" style="top: 15%; right: 15%; font-size: 2.5rem;">👨‍🏫</span>
        <span class="floating-icon" style="bottom: 20%; right: 10%; font-size: 3.5rem;">🎓</span>
        <span class="floating-icon" style="top: 40%; right: 25%; font-size: 1.5rem;">💬</span>
    </div>

    <div class="hero-content">
        <div class="hero-badge">
            <span class="live-dot"></span> New 2026 Academic Suite Live
        </div>
        <h1 class="hero-title">Own Your Brand.<br><span>Teach The World.</span></h1>
        <p class="hero-subtitle">The ultimate all-in-one ecosystem for independent educators and coaching institutes. Launch your personalized school in minutes.</p>
        
        <div style="display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;">
            <a href="student-login.php" class="btn-primary" style="padding: 1.2rem 3rem; font-size: 1.1rem; border-radius: 50px;">Get Started as Student &rarr;</a>
            <a href="teacher-login.php" class="btn-secondary" style="padding: 1.2rem 3rem; font-size: 1.1rem; border-radius: 50px;">Join as Faculty</a>
        </div>

        <div style="margin-top: 4rem; display: flex; align-items: center; justify-content: center; gap: 3rem; opacity: 0.6; grayscale(100%);">
            <span style="font-weight: 700; font-size: 0.9rem;">TRUSTED BY EDUCATORS WORLDWIDE</span>
            <div style="display: flex; gap: 2rem;">
                <span style="font-size: 1.2rem; font-weight: 800;">RAZORPAY</span>
                <span style="font-size: 1.2rem; font-weight: 800;">PAYU</span>
                <span style="font-size: 1.2rem; font-weight: 800;">STRIPE</span>
            </div>
        </div>
    </div>
</div>

<section id="ecosystem" style="padding: 8rem 5%; background: var(--bg-canvas);">
    <div class="section-header">
        <span class="stat-pill" style="background: var(--primary-glow); color: var(--primary);">UNMATCHED CAPABILITIES</span>
        <h2>The Full Academic Lifecycle</h2>
        <p>From live broadcasting to secure payments, manage your entire coaching business from a single pane of glass.</p>
    </div>

    <div class="feature-grid">
        <!-- Live Feature -->
        <div class="feature-card">
            <div class="feature-icon">📡</div>
            <h3>Elite Live Learning</h3>
            <p>Seamless live classes with integrated real-time chat, student presence tracking, and specialized access control for batches.</p>
            <ul style="margin-top: 1.5rem; list-style: none; color: var(--text-muted); font-size: 0.9rem; gap: 0.5rem; display: grid;">
                <li><span class="check-icon">✓</span> Real-time Interactive Chat</li>
                <li><span class="check-icon">✓</span> Batch-specific Access Control</li>
                <li><span class="check-icon">✓</span> Attendance Tracking</li>
            </ul>
        </div>

        <!-- Content Feature -->
        <div class="feature-card">
            <div class="feature-icon">📦</div>
            <h3>Structured Curriculum</h3>
            <p>Organize content deeply with our unique Batch → Subject → Topic → Content hierarchy. Perfect for long-term courses.</p>
            <ul style="margin-top: 1.5rem; list-style: none; color: var(--text-muted); font-size: 0.9rem; gap: 0.5rem; display: grid;">
                <li><span class="check-icon">✓</span> Multi-format Content Support</li>
                <li><span class="check-icon">✓</span> Internal & YouTube Video Hosting</li>
                <li><span class="check-icon">✓</span> Study Material Management (PDF/ZIP)</li>
            </ul>
        </div>

        <!-- Business Feature -->
        <div class="feature-card">
            <div class="feature-icon">💳</div>
            <h3>Monetize Instantly</h3>
            <p>Sell individual courses or premium bundles (batches). Connect your favorite payment gateway and get paid directly.</p>
            <ul style="margin-top: 1.5rem; list-style: none; color: var(--text-muted); font-size: 0.9rem; gap: 0.5rem; display: grid;">
                <li><span class="check-icon">✓</span> One-click Enrollment Flow</li>
                <li><span class="check-icon">✓</span> International Payment Gateways</li>
                <li><span class="check-icon">✓</span> Coupon & Promotion Support</li>
            </ul>
        </div>
    </div>
</section>

<section id="features-list" style="padding: 8rem 5%; background: var(--bg-surface);">
     <div class="section-header">
        <h2>Features Designed for Success</h2>
        <p>Every tool you need to build, scale, and manage your online academy with confidence.</p>
    </div>

    <div class="feature-item-list">
        <div class="feature-item"><span>🚀</span> Live Class with Chat Feature</div>
        <div class="feature-item"><span>💰</span> Sell Online Courses & Batches</div>
        <div class="feature-item"><span>🛠️</span> Easy Live Class Setup</div>
        <div class="feature-item"><span>📊</span> Track Student Attendance</div>
        <div class="feature-item"><span>🛡️</span> Role-Based Access Control</div>
        <div class="feature-item"><span>🎥</span> Save Past Live Sessions</div>
        <div class="feature-item"><span>📱</span> Responsive Student Dashboard</div>
        <div class="feature-item"><span>🔔</span> Instant Notifications</div>
        <div class="feature-item"><span>👤</span> Profile Management System</div>
        <div class="feature-item"><span>📂</span> Organized Content Hierarchy</div>
        <div class="feature-item"><span>👨‍🏫</span> Faculty Allocation Matrix</div>
        <div class="feature-item"><span>📈</span> Enrollment Analytics</div>
        <div class="feature-item"><span>🎨</span> Custom Page Builder</div>
        <div class="feature-item"><span>📤</span> Direct File Uploads</div>
        <div class="feature-item"><span>🔗</span> External Content Integration</div>
        <div class="feature-item"><span>⚖️</span> Free & Paid Course Tiers</div>
        <div class="feature-item"><span>👑</span> Master Admin Panel</div>
        <div class="feature-item"><span>💼</span> Professional Teacher Panel</div>
        <div class="feature-item"><span>🕵️</span> Activity Monitoring</div>
        <div class="feature-item"><span>🔒</span> Content Security Suite</div>
        <div class="feature-item"><span>🏷️</span> White Label Branding</div>
        <div class="feature-item"><span>💻</span> Cross-Platform Compatibility</div>
        <div class="feature-item"><span>✨</span> Modern Professional Interface</div>
    </div>
</section>

<section id="explore-subjects" style="padding: 8rem 5%; background: var(--bg-canvas);">
    <div class="section-header">
        <span class="stat-pill" style="background: var(--primary-glow); color: var(--primary);">EXPLORE SUBJECTS</span>
        <h2>Find Your Passion</h2>
        <p>Browse through our expertly curated subject domains and discover courses, batches, and tests tailored for your success.</p>
    </div>

    <div id="subjects-landing-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem;">
        <p style="grid-column: 1/-1; text-align: center; opacity: 0.5;">Loading available domains...</p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            try {
                const res = await fetch('subjects-api.php?action=fetch');
                const result = await res.json();
                const subjects = result.data || [];
                const grid = document.getElementById('subjects-landing-grid');
                
                if (subjects.length === 0) {
                    grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; opacity: 0.5;">No subjects available yet.</p>';
                    return;
                }

                grid.innerHTML = subjects.map(s => `
                    <a href="subject-detail.php?id=${s.id}" class="glass-panel" style="display: block; text-decoration: none; transition: all 0.3s ease; padding: 1.5rem !important;">
                        <img src="${s.thumbnail_url || 'https://via.placeholder.com/300x200'}" style="width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; margin-bottom: 1.25rem; border: 1px solid var(--border-subtle);">
                        <h3 style="font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--text-main);">${s.name}</h3>
                        <p style="font-size: 0.85rem; color: var(--text-muted);">Explore courses, batches & tests &rarr;</p>
                    </a>
                `).join("");
            } catch (err) {
                console.error("Failed to load landing subjects:", err);
            }
        });
    </script>
</section>

<section id="cta" style="padding: 8rem 5%; background: var(--bg-canvas);">
    <div class="glass-panel" style="background: var(--hero-gradient); padding: 5rem !important; text-align: center; border: none; border-radius: 40px;">
        <h2 style="color: white; font-size: 3rem; margin-bottom: 1.5rem;">Ready to digitize your classroom?</h2>
        <p style="color: rgba(255,255,255,0.8); font-size: 1.25rem; margin-bottom: 3rem; max-width: 600px; margin-inline: auto;">Join the 2026 Academic Wave with Gurukul. The smarter way to teach.</p>
        <div style="display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;">
            <a href="admin-login.php" class="btn-primary" style="background: white !important; color: var(--primary) !important; padding: 1.2rem 3.5rem; font-weight: 800; border-radius: 50px;">Initialize My Academy</a>
            <a href="student-login.php" class="btn-secondary" style="border-color: white !important; color: white !important; padding: 1.2rem 3.5rem; border-radius: 50px;">Student Hub</a>
        </div>
    </div>
</section>

        <footer style="margin-top: 5rem;">
        <div style="margin-bottom: 1.5rem; display: flex; justify-content: center; gap: 2rem;">
            <a href="admin-login.php"
                style="color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: color 0.3s;"
                onmouseover="this.style.color='#f43f5e'" onmouseout="this.style.color='var(--text-muted)'">Admin
                Portal</a>
            <a href="teacher-login.php"
                style="color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: color 0.3s;"
                onmouseover="this.style.color='#10b981'" onmouseout="this.style.color='var(--text-muted)'">Teacher
                Portal</a>
            <a href="student-login.php"
                style="color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: color 0.3s;"
                onmouseover="this.style.color='#6366f1'" onmouseout="this.style.color='var(--text-muted)'">Student
                Portal</a>
        </div>
        <p>&copy; 2026 Gurukul Coaching App And Website. All rights reserved.</p>
    </footer>
    
    <script type="module" src="main.js"></script></body>
</html>