/**
* The front page template file
*/

get_header('home'); ?>

<!-- Main Content -->
<main class="pt-28 pb-20 px-4 sm:px-6">
    <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-4 gap-6 auto-rows-[minmax(180px,auto)]">

        <!-- 1. Hero / Intro (Spans 2 cols, 2 rows) -->
        <div class="bento-card col-span-1 md:col-span-2 md:row-span-2 relative overflow-hidden group">
            <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-transparent opacity-50"></div>
            <!-- Background decorative glow -->
            <div
                class="absolute -top-24 -right-24 w-64 h-64 bg-indigo-600/20 rounded-full blur-3xl group-hover:bg-indigo-600/30 transition-all duration-700">
            </div>

            <div class="relative z-10 h-full flex flex-col justify-between p-8">
                <div>
                    <div
                        class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-xs font-semibold text-indigo-300 mb-6">
                        <span class="w-1.5 h-1.5 rounded-full bg-indigo-400 animate-pulse"></span>
                        Available for Consulting
                    </div>
                    <h1 class="font-display text-4xl sm:text-5xl font-bold leading-tight mb-4">
                        Navigating the Future of AI with <span
                            class="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-orange-400 font-serif italic">Timeless
                            Wisdom</span>.
                    </h1>
                    <p class="text-slate-400 text-lg max-w-md leading-relaxed">
                        I research AI Agents, build RAG systems, and translate ancient scriptures. Bridging the gap
                        between productivity and purpose.
                    </p>
                </div>
            </div>
        </div>

        <!-- 2. The Flagship: AI Course (Spans 2 cols) -->
        <div id="course"
            class="bento-card col-span-1 md:col-span-2 relative group cursor-pointer overflow-hidden border-indigo-500/30 hover:border-indigo-500/60 transition-colors">
            <div
                class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=1965&auto=format&fit=crop')] bg-cover bg-center opacity-20 group-hover:opacity-30 transition-opacity transform group-hover:scale-105 duration-700">
            </div>
            <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/50 to-transparent"></div>

            <div class="relative z-10 p-8 h-full flex flex-col justify-end">
                <h3
                    class="font-display text-2xl font-bold text-white mb-2 group-hover:text-indigo-300 transition-colors">
                    AI Foundations for Enterprise</h3>
                <p class="text-slate-400 text-sm mb-4">Join the cohort. Leverage LLMs for real-world tasks.</p>
                <div
                    class="flex items-center gap-2 text-indigo-400 font-semibold text-sm group-hover:translate-x-1 transition-transform">
                    View Curriculum <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </div>
            </div>
        </div>

        <!-- 3. DharmaSutra (Col 1, Row 2) -->
        <div id="dharma"
            class="bento-card col-span-1 md:col-span-1 row-span-2 flex flex-col justify-between group border-amber-500/20 hover:border-amber-500/50">
            <div class="p-6">
                <div
                    class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500/20 to-orange-600/20 flex items-center justify-center text-xl mb-4 text-amber-500 sticky top-0">
                    🕉️
                </div>
                <h3 class="font-serif text-2xl text-amber-100 mb-2">DharmaSutra</h3>
                <p class="text-slate-400 text-sm leading-relaxed">
                    Digitizing Sanskrit wisdom with AI search. Interactive Gita & Ramayana.
                </p>
            </div>
            <div class="p-6 bg-amber-950/10 border-t border-amber-500/10">
                <a href="#" class="text-amber-400 text-sm font-medium hover:underline">Read Scripture &rarr;</a>
            </div>
        </div>

        <!-- 4. The Lead Magnet: AI Tools Guide (Col 1) -->
        <div id="tools" class="bento-card col-span-1 p-0 relative group overflow-hidden">
            <div class="absolute inset-0 bg-slate-900 border border-slate-800"></div>
            <div class="relative z-10 p-6 flex flex-col h-full justify-between">
                <div>
                    <span
                        class="inline-block px-2 py-0.5 rounded text-[10px] font-bold tracking-wider uppercase bg-green-500/10 text-green-400 mb-2">Free
                        PDF</span>
                    <h3 class="font-display text-lg font-bold">2025 AI Tools Guide</h3>
                    <p class="text-slate-500 text-xs mt-1">I tested 200+ tools so you don't have to.</p>
                </div>
                <button
                    class="mt-4 w-full py-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-sm transition-colors flex items-center justify-center gap-2">
                    <i data-lucide="download" class="w-3 h-3"></i> Download
                </button>
            </div>
        </div>

        <!-- 5. Tech Stack (Col 1) -->
        <div class="bento-card col-span-1 p-6 flex flex-col justify-center">
            <h4 class="text-xs uppercase tracking-widest text-slate-500 mb-4 font-semibold">My Stack</h4>
            <div class="flex flex-wrap gap-2">
                <span class="stack-badge">Python</span>
                <span class="stack-badge">LangChain</span>
                <span class="stack-badge">Next.js</span>
                <span class="stack-badge border-indigo-500/40 text-indigo-300 bg-indigo-500/10">Cursor</span>
                <span class="stack-badge">WordPress</span>
            </div>
        </div>

        <!-- 6. Newsletter / Live (Col 2) -->
        <div class="bento-card col-span-1 md:col-span-2 flex items-center p-1">
            <div class="flex-1 p-6 md:p-8">
                <h3 class="font-display text-xl font-bold mb-1">Join the Inner Circle</h3>
                <p class="text-slate-400 text-sm mb-4">Weekly insights on AI agents & ancient philosophy. Read by 2k+.
                </p>

                <form class="flex gap-2">
                    <input type="email" placeholder="kumar@example.com"
                        class="bg-slate-950/50 border border-slate-800 rounded-lg px-4 py-2 text-sm w-full focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/50 transition-all placeholder:text-slate-600">
                    <button
                        class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap">
                        Subscribe
                    </button>
                </form>
            </div>
        </div>

    </div>

    <!-- Latest from the Lab (Writing) -->
    <section class="max-w-7xl mx-auto mt-24" id="writing">
        <div class="flex items-end justify-between mb-8 border-b border-slate-800 pb-4">
            <div>
                <h2 class="font-display text-3xl font-bold text-white">Latest from the Lab</h2>
                <p class="text-slate-400 mt-2">Experiments in code and consciousness.</p>
            </div>
            <a href="#" class="text-indigo-400 text-sm hover:text-indigo-300 hidden sm:inline-block">View Archive
                &rarr;</a>
        </div>

        <!-- Query Loop would go here in dynamic WP, static for now -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Article 1 -->
            <article class="group cursor-pointer">
                <div
                    class="aspect-video bg-slate-900 rounded-xl mb-4 overflow-hidden border border-slate-800 group-hover:border-indigo-500/30 transition-colors relative">
                    <div
                        class="absolute top-3 left-3 bg-slate-950/80 backdrop-blur px-2 py-1 rounded text-[10px] font-mono text-indigo-400 border border-slate-800">
                        AI ENGINEERING</div>
                </div>
                <h3 class="text-lg font-bold leading-snug group-hover:text-indigo-300 transition-colors">Building a RAG
                    Pipeline for High-Volume Verse Retrieval</h3>
                <p class="text-slate-500 text-sm mt-2 line-clamp-2">How we optimized Typesense nuances for Sanskrit
                    diacritics and semantic search.</p>
            </article>

            <!-- Article 2 -->
            <article class="group cursor-pointer">
                <div
                    class="aspect-video bg-slate-900 rounded-xl mb-4 overflow-hidden border border-slate-800 group-hover:border-amber-500/30 transition-colors relative">
                    <div
                        class="absolute top-3 left-3 bg-slate-950/80 backdrop-blur px-2 py-1 rounded text-[10px] font-mono text-amber-400 border border-slate-800">
                        SCRIPTURE</div>
                </div>
                <h3 class="text-lg font-bold leading-snug group-hover:text-amber-300 transition-colors">Reflections on
                    Bhagavad Gita Chapter 2: The Yoga of Wisdom</h3>
                <p class="text-slate-500 text-sm mt-2 line-clamp-2">Understanding the concept of Sthita-prajna in the
                    age of algorithmic distraction.</p>
            </article>

            <!-- Article 3 -->
            <article class="group cursor-pointer">
                <div
                    class="aspect-video bg-slate-900 rounded-xl mb-4 overflow-hidden border border-slate-800 group-hover:border-emerald-500/30 transition-colors relative">
                    <div
                        class="absolute top-3 left-3 bg-slate-950/80 backdrop-blur px-2 py-1 rounded text-[10px] font-mono text-emerald-400 border border-slate-800">
                        STRATEGY</div>
                </div>
                <h3 class="text-lg font-bold leading-snug group-hover:text-emerald-300 transition-colors">The Future of
                    SaaS in India: 2025 Outlook</h3>
                <p class="text-slate-500 text-sm mt-2 line-clamp-2">Why vertical AI agents will replace traditional
                    seat-based software models.</p>
            </article>
        </div>
    </section>

</main>

<footer class="border-t border-slate-900 mt-20 py-12 bg-slate-950">
    <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
        <div class="text-center md:text-left">
            <p class="font-display font-bold text-lg text-white">
                Kumar Gauraw            </p>
            <p class="text-slate-500 text-sm mt-1">&copy;
                2026. Built on WordPress.
            </p>
        </div>

        <div class="flex gap-6">
            <!-- Hardcoded social links for now. In a full theme, use Customizer settings. -->
            <a href="#" class="text-slate-500 hover:text-white transition-colors"><i data-lucide="linkedin"
                    class="w-5 h-5"></i></a>
            <a href="#" class="text-slate-500 hover:text-white transition-colors"><i data-lucide="twitter"
                    class="w-5 h-5"></i></a>
            <a href="#" class="text-slate-500 hover:text-white transition-colors"><i data-lucide="github"
                    class="w-5 h-5"></i></a>
        </div>

        <div class="text-center md:text-right">
            <p class="font-serif italic text-slate-600 text-sm">"Satyameva Jayate Nanritam"</p>
        </div>
    </div>
</footer>

<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/generate_press_child/*","/wp-content/themes/generatepress/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="generate-a11y">
!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("pointerdown",(function(){e.classList.add("using-mouse")}),{passive:!0}),e.addEventListener("keydown",(function(){e.classList.remove("using-mouse")}),{passive:!0})}}();
</script>
</body>

</html>