<section id="resume" class="bg-light-bg dark:bg-dark-bg py-20">
    <div class="container mx-auto px-6 lg:px-10" x-data="{ activeTab: 'education' }">
        <!-- Section Title -->
        <div class="text-center mb-16" data-aos="fade-up">
            <p class="text-sm font-medium text-primary text-transparent bg-clip-text 
    bg-gradient-to-r from-blue-300 via-purple-300 tracking-widest">5+ YEARS OF EXPERIENCE</p>
            <h2 class="text-4xl md:text-5xl font-bold text-light-headings dark:text-dark-headings mt-2">My Resume</h2>
        </div>

        <!-- Tab Navigation -->
        <div data-aos="fade-up" class="p-2 bg-light-bg dark:bg-dark-bg rounded-xl shadow-light-neumorphic dark:shadow-dark-neumorphic">
            <div class="flex flex-col sm:flex-row justify-center items-center gap-2">
                <button @click="activeTab = 'education'" class="relative w-full sm:w-auto flex-grow px-4 py-3 text-center transition-all duration-300 rounded-lg" :class="{'text-primary': activeTab === 'education', 'text-light-text dark:text-dark-text': activeTab !== 'education'}">
                    <span x-show="activeTab === 'education'" class="absolute inset-0 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset" x-transition></span>
                    <span class="relative z-10 font-medium">Education</span>
                </button>
                <button @click="activeTab = 'skills'" class="relative w-full sm:w-auto flex-grow px-4 py-3 text-center transition-all duration-300 rounded-lg" :class="{'text-primary': activeTab === 'skills', 'text-light-text dark:text-dark-text': activeTab !== 'skills'}">
                    <span x-show="activeTab === 'skills'" class="absolute inset-0 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset" x-transition></span>
                    <span class="relative z-10 font-medium">Professional Skills</span>
                </button>
                <button @click="activeTab = 'abs'" class="relative w-full sm:w-auto flex-grow px-4 py-3 text-center transition-all duration-300 rounded-lg" :class="{'text-primary': activeTab === 'abs', 'text-light-text dark:text-dark-text': activeTab !== 'abs'}">
                    <span x-show="activeTab === 'abs'" class="absolute inset-0 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset" x-transition></span>
                    <span class="relative z-10 font-medium">ABS Soft Pvt. Ltd.</span>
                </button>
                <button @click="activeTab = 'herirakhau'" class="relative w-full sm:w-auto flex-grow px-4 py-3 text-center transition-all duration-300 rounded-lg" :class="{'text-primary': activeTab === 'herirakhau', 'text-light-text dark:text-dark-text': activeTab !== 'herirakhau'}">
                    <span x-show="activeTab === 'herirakhau'" class="absolute inset-0 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset" x-transition></span>
                    <span class="relative z-10 font-medium">Herirakhau Media Pvt. Ltd.</span>
                </button>
                <button @click="activeTab = 'jaykul'" class="relative w-full sm:w-auto flex-grow px-4 py-3 text-center transition-all duration-300 rounded-lg" :class="{'text-primary': activeTab === 'jaykul', 'text-light-text dark:text-dark-text': activeTab !== 'jaykul'}">
                    <span x-show="activeTab === 'jaykul'" class="absolute inset-0 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset" x-transition></span>
                    <span class="relative z-10 font-medium">Jay Kul Dewata Traders</span>
                </button>
            </div>
        </div>

        <!-- Tab Content -->
        <div class="mt-16 w-full">
            <!-- Education & Job Experience Panel -->
            <div x-show="activeTab === 'education'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                <div class="grid md:grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-12">
                    <div data-aos="fade-right">
                        <div class="mb-8">
                            <p class="text-lg font-medium text-primary">2005 - 2022</p>
                            <h3 class="text-3xl font-bold text-light-headings dark:text-dark-headings mt-1">Education Experience</h3>
                        </div>
                        <div class="relative border-l-2 border-[#d9dee2] dark:border-gray-700 pl-12 space-y-10">
                            <!-- Timeline Item: BCA -->
                            <div class="relative group">
                                <span class="absolute top-5 -left-12 w-10 h-0.5 bg-[#d9dee2] dark:bg-gray-700"></span>
                                <div class="absolute -left-[57px] top-4 w-4 h-4 rounded-full bg-light-bg dark:bg-dark-bg border-2 border-[#d9dee2] dark:border-gray-700 group-hover:bg-primary group-hover:border-primary transition-colors duration-300"></div>
                                <div class="p-6 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic transition-all duration-300 group-hover:text-white group-hover:bg-gradient-to-br from-[#654ea3] to-[#ff014f] group-hover:-translate-y-1 group-hover:shadow-hire-glow min-h-[260px] flex flex-col">
                                    <div class="flex justify-between items-start flex-wrap gap-2"><div><h4 class="text-xl font-bold text-light-headings dark:text-dark-headings group-hover:text-white">BCA</h4><p class="text-light-text dark:text-dark-text text-sm mt-1 group-hover:text-white/80">(2017 - 2022)</p></div><span class="text-xs font-semibold text-primary bg-primary/10 px-3 py-1.5 rounded-md group-hover:bg-white/20 group-hover:text-white">Crimson College of Technology</span></div><div class="w-full h-px bg-[#d9dee2] dark:bg-dark-border/40 my-4 group-hover:bg-white/20"></div><p class="text-light-text dark:text-dark-text leading-relaxed group-hover:text-white/80 flex-grow">Crimson College offered me valuable learning and growth opportunities. The supportive faculty and practical approach prepared me well for real-world challenges.</p>
                                </div>
                            </div>
                            <!-- Timeline Item: Management -->
                            <div class="relative group">
                                <span class="absolute top-5 -left-12 w-10 h-0.5 bg-[#d9dee2] dark:bg-gray-700"></span>
                                <div class="absolute -left-[57px] top-4 w-4 h-4 rounded-full bg-light-bg dark:bg-dark-bg border-2 border-[#d9dee2] dark:border-gray-700 group-hover:bg-primary group-hover:border-primary transition-colors duration-300"></div>
                                <div class="p-6 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic transition-all duration-300 group-hover:text-white group-hover:bg-gradient-to-br from-[#654ea3] to-[#ff014f] group-hover:-translate-y-1 group-hover:shadow-hire-glow min-h-[260px] flex flex-col">
                                    <div class="flex justify-between items-start flex-wrap gap-2"><div><h4 class="text-xl font-bold text-light-headings dark:text-dark-headings group-hover:text-white">Management</h4><p class="text-light-text dark:text-dark-text text-sm mt-1 group-hover:text-white/80">(2015 - 2017)</p></div><span class="text-xs font-semibold text-primary bg-primary/10 px-3 py-1.5 rounded-md group-hover:bg-white/20 group-hover:text-white">Annapurna Model College</span></div><div class="w-full h-px bg-[#d9dee2] dark:bg-dark-border/40 my-4 group-hover:bg-white/20"></div><p class="text-light-text dark:text-dark-text leading-relaxed group-hover:text-white/80 flex-grow">Annapurna Model College, Butwal, gave me practical management skills and real-world insights. The supportive faculty and hands-on learning approach prepared me well for my career.</p>
                                </div>
                            </div>
                             <!-- Timeline Item: School -->
                            <div class="relative group">
                                <span class="absolute top-5 -left-12 w-10 h-0.5 bg-[#d9dee2] dark:bg-gray-700"></span>
                                <div class="absolute -left-[57px] top-4 w-4 h-4 rounded-full bg-light-bg dark:bg-dark-bg border-2 border-[#d9dee2] dark:border-gray-700 group-hover:bg-primary group-hover:border-primary transition-colors duration-300"></div>
                                <div class="p-6 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic transition-all duration-300 group-hover:text-white group-hover:bg-gradient-to-br from-[#654ea3] to-[#ff014f] group-hover:-translate-y-1 group-hover:shadow-hire-glow min-h-[260px] flex flex-col">
                                    <div class="flex justify-between items-start flex-wrap gap-2"><div><h4 class="text-xl font-bold text-light-headings dark:text-dark-headings group-hover:text-white">School</h4><p class="text-light-text dark:text-dark-text text-sm mt-1 group-hover:text-white/80">(2005 - 2015)</p></div><span class="text-xs font-semibold text-primary bg-primary/10 px-3 py-1.5 rounded-md group-hover:bg-white/20 group-hover:text-white">Shree Birendra Higher Secondary School</span></div><div class="w-full h-px bg-[#d9dee2] dark:bg-dark-border/40 my-4 group-hover:bg-white/20"></div><p class="text-light-text dark:text-dark-text leading-relaxed group-hover:text-white/80 flex-grow">My school education at Shree Birendra Higher Secondary School provided a strong academic foundation, with dedicated teachers fostering essential skills for my future success.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div data-aos="fade-left">
                        <div class="mb-8"><p class="text-lg font-medium text-primary">2020 - Present</p><h3 class="text-3xl font-bold text-light-headings dark:text-dark-headings mt-1">Job Experience</h3></div>
                        <div class="relative border-l-2 border-[#d9dee2] dark:border-gray-700 pl-12 space-y-10">
                            <!-- Timeline Item: ABS Soft -->
                            <div class="relative group"><span class="absolute top-5 -left-12 w-10 h-0.5 bg-[#d9dee2] dark:bg-gray-700"></span><div class="absolute -left-[57px] top-4 w-4 h-4 rounded-full bg-light-bg dark:bg-dark-bg border-2 border-[#d9dee2] dark:border-gray-700 group-hover:bg-primary group-hover:border-primary transition-colors duration-300"></div><div class="p-6 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic transition-all duration-300 group-hover:text-white group-hover:bg-gradient-to-br from-[#654ea3] to-[#ff014f] group-hover:-translate-y-1 group-hover:shadow-hire-glow min-h-[260px] flex flex-col"><div class="flex justify-between items-start flex-wrap gap-2"><div><h4 class="text-xl font-bold text-light-headings dark:text-dark-headings group-hover:text-white">ABS Soft Pvt. Ltd.</h4><p class="text-light-text dark:text-dark-text text-sm mt-1 group-hover:text-white/80">Visit Website</p></div><span class="text-xs font-semibold text-primary bg-primary/10 px-3 py-1.5 rounded-md group-hover:bg-white/20 group-hover:text-white">Founder, CEO</span></div><div class="w-full h-px bg-[#d9dee2] dark:bg-dark-border/40 my-4 group-hover:bg-white/20"></div><p class="text-light-text dark:text-dark-text leading-relaxed group-hover:text-white/80 flex-grow">ABS Soft is a company that offers complete IT solutions in Nepal. ABS Soft Pvt. Ltd. is specialized in web designing, web branding services and many IT solutions.</p></div></div>
                            <!-- Timeline Item: Jay Kul Dewata -->
                            <div class="relative group"><span class="absolute top-5 -left-12 w-10 h-0.5 bg-[#d9dee2] dark:bg-gray-700"></span><div class="absolute -left-[57px] top-4 w-4 h-4 rounded-full bg-light-bg dark:bg-dark-bg border-2 border-[#d9dee2] dark:border-gray-700 group-hover:bg-primary group-hover:border-primary transition-colors duration-300"></div><div class="p-6 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic transition-all duration-300 group-hover:text-white group-hover:bg-gradient-to-br from-[#654ea3] to-[#ff014f] group-hover:-translate-y-1 group-hover:shadow-hire-glow min-h-[260px] flex flex-col"><div class="flex justify-between items-start flex-wrap gap-2"><div><h4 class="text-xl font-bold text-light-headings dark:text-dark-headings group-hover:text-white">Jay Kul Dewata Traders</h4><p class="text-light-text dark:text-dark-text text-sm mt-1 group-hover:text-white/80">FEB 2025 - Present</p></div><span class="text-xs font-semibold text-primary bg-primary/10 px-3 py-1.5 rounded-md group-hover:bg-white/20 group-hover:text-white">Founder</span></div><div class="w-full h-px bg-[#d9dee2] dark:bg-dark-border/40 my-4 group-hover:bg-white/20"></div><p class="text-light-text dark:text-dark-text leading-relaxed group-hover:text-white/80 flex-grow">A premier Auto Parts and workshop specializing in the maintenance and repair of large vehicles, including trucks and Tippers.</p></div></div>
                            <!-- Timeline Item: Herirakhau -->
                            <div class="relative group"><span class="absolute top-5 -left-12 w-10 h-0.5 bg-[#d9dee2] dark:bg-gray-700"></span><div class="absolute -left-[57px] top-4 w-4 h-4 rounded-full bg-light-bg dark:bg-dark-bg border-2 border-[#d9dee2] dark:border-gray-700 group-hover:bg-primary group-hover:border-primary transition-colors duration-300"></div><div class="p-6 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic transition-all duration-300 group-hover:text-white group-hover:bg-gradient-to-br from-[#654ea3] to-[#ff014f] group-hover:-translate-y-1 group-hover:shadow-hire-glow min-h-[260px] flex flex-col"><div class="flex justify-between items-start flex-wrap gap-2"><h4 class="text-xl font-bold text-light-headings dark:text-dark-headings group-hover:text-white">Herirakhau Media Pvt. Ltd.</h4><span class="text-xs font-semibold text-primary bg-primary/10 px-3 py-1.5 rounded-md group-hover:bg-white/20 group-hover:text-white">Founder</span></div><div class="w-full h-px bg-[#d9dee2] dark:bg-dark-border/40 my-4 group-hover:bg-white/20"></div><p class="text-light-text dark:text-dark-text leading-relaxed group-hover:text-white/80 flex-grow">Herirakhau Media is one of the site that provides news about all the things that are happening in Nepalese film industry. It is very useful to get all the latest news.</p></div></div>
                            <!-- Timeline Item: Infonet ISP -->
                            <div class="relative group"><span class="absolute top-5 -left-12 w-10 h-0.5 bg-[#d9dee2] dark:bg-gray-700"></span><div class="absolute -left-[57px] top-4 w-4 h-4 rounded-full bg-light-bg dark:bg-dark-bg border-2 border-[#d9dee2] dark:border-gray-700 group-hover:bg-primary group-hover:border-primary transition-colors duration-300"></div><div class="p-6 bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic transition-all duration-300 group-hover:text-white group-hover:bg-gradient-to-br from-[#654ea3] to-[#ff014f] group-hover:-translate-y-1 group-hover:shadow-hire-glow min-h-[260px] flex flex-col"><div class="flex justify-between items-start flex-wrap gap-2"><div><h4 class="text-xl font-bold text-light-headings dark:text-dark-headings group-hover:text-white">Infonet ISP</h4><p class="text-light-text dark:text-dark-text text-sm mt-1 group-hover:text-white/80">AUG 2021 - Present</p></div><span class="text-xs font-semibold text-primary bg-primary/10 px-3 py-1.5 rounded-md group-hover:bg-white/20 group-hover:text-white">Technical Officer [Remote]</span></div><div class="w-full h-px bg-[#d9dee2] dark:bg-dark-border/40 my-4 group-hover:bg-white/20"></div><ul class="list-disc list-inside text-light-text dark:text-dark-text space-y-1 group-hover:text-white/80 flex-grow"><li>Network Monitoring</li><li>Performance Analysis</li><li>Service Deployment</li><li>Configuration Management</li></ul></div></div>
                            <!-- Timeline Item: 4Sight -->
                            
                    </div>
                        </div>
                    </div>
                </div>
            </div>
           
            <!-- Professional Skills Tab Panel -->
            <div x-show="activeTab === 'skills'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                <div class="grid md:grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-12">
                    <div data-aos="fade-right" class="space-y-8">
                        <div><p class="text-lg font-medium text-primary">Features</p><h3 class="text-3xl font-bold text-light-headings dark:text-dark-headings mt-1">Design Skill</h3>
                        </div>
                        <div class="space-y-6">
                            <div>
                                <div class="flex justify-between mb-2"><span class="font-medium text-light-text dark:text-dark-text uppercase tracking-wider">Adobe Photoshop</span><span class="font-medium text-light-text dark:text-dark-text">90%</span>
                                </div>
                                <div class="w-full bg-light-bg dark:bg-dark-bg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset rounded-full h-2">
                                    <div class="bg-gradient-to-r from-white/80 via-primary to-primary h-2 rounded-full" style="width: 90%">
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-2"><span class="font-medium text-light-text dark:text-dark-text uppercase tracking-wider">Figma</span><span class="font-medium text-light-text dark:text-dark-text">80%</span></div><div class="w-full bg-light-bg dark:bg-dark-bg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset rounded-full h-2"><div class="bg-gradient-to-r from-white/80 via-primary to-primary h-2 rounded-full" style="width: 80%"></div></div></div><div><div class="flex justify-between mb-2"><span class="font-medium text-light-text dark:text-dark-text uppercase tracking-wider">Adobe Illustrator</span><span class="font-medium text-light-text dark:text-dark-text">70%</span></div><div class="w-full bg-light-bg dark:bg-dark-bg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset rounded-full h-2"><div class="bg-gradient-to-r from-white/80 via-primary to-primary h-2 rounded-full" style="width: 70%"></div></div></div><div><div class="flex justify-between mb-2"><span class="font-medium text-light-text dark:text-dark-text uppercase tracking-wider">Adobe Premiere Pro</span><span class="font-medium text-light-text dark:text-dark-text">85%</span></div><div class="w-full bg-light-bg dark:bg-dark-bg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset rounded-full h-2"><div class="bg-gradient-to-r from-white/80 via-primary to-primary h-2 rounded-full" style="width: 85%"></div></div></div></div></div><div data-aos="fade-left" class="space-y-8"><div><p class="text-lg font-medium text-primary">Features</p><h3 class="text-3xl font-bold text-light-headings dark:text-dark-headings mt-1">Development Skill</h3></div><div class="space-y-6"><div><div class="flex justify-between mb-2"><span class="font-medium text-light-text dark:text-dark-text uppercase tracking-wider">React</span><span class="font-medium text-light-text dark:text-dark-text">80%</span></div><div class="w-full bg-light-bg dark:bg-dark-bg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset rounded-full h-2"><div class="bg-gradient-to-r from-white/80 via-primary to-primary h-2 rounded-full" style="width: 80%"></div></div></div><div><div class="flex justify-between mb-2"><span class="font-medium text-light-text dark:text-dark-text uppercase tracking-wider">JavaScript</span><span class="font-medium text-light-text dark:text-dark-text">85%</span></div><div class="w-full bg-light-bg dark:bg-dark-bg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset rounded-full h-2"><div class="bg-gradient-to-r from-white/80 via-primary to-primary h-2 rounded-full" style="width: 85%"></div></div></div><div><div class="flex justify-between mb-2"><span class="font-medium text-light-text dark:text-dark-text uppercase tracking-wider">MySQL</span><span class="font-medium text-light-text dark:text-dark-text">85%</span></div><div class="w-full bg-light-bg dark:bg-dark-bg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset rounded-full h-2"><div class="bg-gradient-to-r from-white/80 via-primary to-primary h-2 rounded-full" style="width: 85%"></div></div></div><div><div class="flex justify-between mb-2"><span class="font-medium text-light-text dark:text-dark-text uppercase tracking-wider">Google Cloud</span><span class="font-medium text-light-text dark:text-dark-text">80%</span></div><div class="w-full bg-light-bg dark:bg-dark-bg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset rounded-full h-2"><div class="bg-gradient-to-r from-white/80 via-primary to-primary h-2 rounded-full" style="width: 80%"></div></div></div><div><div class="flex justify-between mb-2"><span class="font-medium text-light-text dark:text-dark-text uppercase tracking-wider">Wordpress</span><span class="font-medium text-light-text dark:text-dark-text">90%</span></div><div class="w-full bg-light-bg dark:bg-dark-bg shadow-light-neumorphic-inset dark:shadow-dark-neumorphic-inset rounded-full h-2"><div class="bg-gradient-to-r from-white/80 via-primary to-primary h-2 rounded-full" style="width: 90%"></div></div></div></div></div></div>
            </div>

            <!-- ABS Soft iFrame Panel -->
            <div x-show="activeTab === 'abs'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                <div class="w-full h-[80vh] bg-light-card dark:bg-dark-card rounded-xl shadow-soft overflow-hidden">
                    <iframe src="https://www.abssoft.com.np/" class="w-full h-full border-0" title="ABS Soft Pvt. Ltd."></iframe>
                </div>
            </div>

            <!-- Herirakhau iFrame Panel -->
            <div x-show="activeTab === 'herirakhau'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                 <div class="w-full h-[80vh] bg-light-card dark:bg-dark-card rounded-xl shadow-soft overflow-hidden">
                    <iframe src="https://herirakhau.com/" class="w-full h-full border-0" title="Herirakhau Media Pvt. Ltd."></iframe>
                </div>
            </div>
            
            <!-- Jay Kul Dewata Traders iFrame Panel -->
            <div x-show="activeTab === 'jaykul'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                 <div class="w-full h-[80vh] bg-light-card dark:bg-dark-card rounded-xl shadow-soft overflow-hidden">
                 <iframe src="https://jaykuldewata.com.np" class="w-full h-full border-0" title="Jay Kul Dewata Traders"></iframe>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section><?php /**PATH /home2/kcashok/public_html/portfolio/resources/views/components/resume-section.blade.php ENDPATH**/ ?>