"use client";

import React, { useEffect, useRef } from 'react';
import Link from 'next/link';
import {
    Layers,
    Pencil,
    BookOpen,
    Lightbulb,
    Atom,
    GraduationCap,
    ArrowRight,
    MousePointerClick,
    Brain,
    CheckSquare,
    Video,
    TrendingUp,
    FileText,
    Copy,
    Presentation,
    Folder,
    BarChart2,
    ShieldAlert,
    PencilRuler,
    ClipboardCheck,
    Share2,
    Users,
    Check,
    Target,
    LineChart,
    UserCheck,
    Clock,
    Award,
    Monitor,
    Database,
    PieChart,
    Star,
    Sparkles,
    Rocket,
    Zap
} from 'lucide-react';

export default function TeachingLearningPlatform() {
    const containerRef = useRef<HTMLDivElement>(null);

    // Mind Map logic
    useEffect(() => {
        const container = containerRef.current;
        if (!container) return;

        const nodes = container.querySelectorAll('.mindmap-node') as NodeListOf<HTMLElement>;
        const lines = [
            { id: 'line-1', from: 'node-center', to: 'node-1' },
            { id: 'line-2', from: 'node-center', to: 'node-2' },
            { id: 'line-3', from: 'node-center', to: 'node-3' },
            { id: 'line-4', from: 'node-center', to: 'node-4' },
            { id: 'line-5', from: 'node-center', to: 'node-5' }
        ];

        nodes.forEach((node) => {
            const x = node.getAttribute('data-x');
            const y = node.getAttribute('data-y');
            node.style.left = x + '%';
            node.style.top = y + '%';
            node.style.transform = 'translate(-50%, -50%)';
        });

        function updateLines() {
            if (!container) return;
            const containerRect = container.getBoundingClientRect();
            lines.forEach((l) => {
                const lineEl = document.getElementById(l.id);
                const fromEl = document.getElementById(l.from);
                const toEl = document.getElementById(l.to);
                if (!lineEl || !fromEl || !toEl) return;

                const fromIcon = fromEl.querySelector('div');
                const toIcon = toEl.querySelector('div');
                if (!fromIcon || !toIcon) return;

                const fromRect = fromIcon.getBoundingClientRect();
                const toRect = toIcon.getBoundingClientRect();

                lineEl.setAttribute('x1', String(fromRect.left + fromRect.width / 2 - containerRect.left));
                lineEl.setAttribute('y1', String(fromRect.top + fromRect.height / 2 - containerRect.top));
                lineEl.setAttribute('x2', String(toRect.left + toRect.width / 2 - containerRect.left));
                lineEl.setAttribute('y2', String(toRect.top + toRect.height / 2 - containerRect.top));
            });
        }

        const interval = setInterval(updateLines, 100);
        setTimeout(() => clearInterval(interval), 1000);
        window.addEventListener('resize', updateLines);

        let activeNode: HTMLElement | null = null;

        nodes.forEach((node) => {
            const onMouseDown = (e: MouseEvent) => {
                activeNode = node;
                nodes.forEach((n) => (n.style.zIndex = '10'));
                node.style.zIndex = '20';
                e.preventDefault();
            };
            node.addEventListener('mousedown', onMouseDown);

            // cleanup attached later
            (node as any)._onMouseDown = onMouseDown;
        });

        const onMouseMove = (e: MouseEvent) => {
            if (!activeNode || !container) return;
            const containerRect = container.getBoundingClientRect();
            let x = e.clientX - containerRect.left;
            let y = e.clientY - containerRect.top;

            x = Math.max(0, Math.min(x, containerRect.width));
            y = Math.max(0, Math.min(y, containerRect.height));

            activeNode.style.left = x + 'px';
            activeNode.style.top = y + 'px';
            updateLines();
        };

        const onMouseUp = () => {
            activeNode = null;
        };

        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);

        // Touch support
        nodes.forEach((node) => {
            const onTouchStart = (e: TouchEvent) => {
                activeNode = node;
                nodes.forEach((n) => (n.style.zIndex = '10'));
                node.style.zIndex = '20';
            };
            node.addEventListener('touchstart', onTouchStart, { passive: true });
            (node as any)._onTouchStart = onTouchStart;
        });

        const onTouchMove = (e: TouchEvent) => {
            if (!activeNode || !container) return;
            const touch = e.touches[0];
            const containerRect = container.getBoundingClientRect();
            let x = touch.clientX - containerRect.left;
            let y = touch.clientY - containerRect.top;

            x = Math.max(0, Math.min(x, containerRect.width));
            y = Math.max(0, Math.min(y, containerRect.height));

            activeNode.style.left = x + 'px';
            activeNode.style.top = y + 'px';
            updateLines();
        };

        const onTouchEnd = () => {
            activeNode = null;
        };

        document.addEventListener('touchmove', onTouchMove, { passive: true });
        document.addEventListener('touchend', onTouchEnd);

        return () => {
            window.removeEventListener('resize', updateLines);
            clearInterval(interval);
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            document.removeEventListener('touchmove', onTouchMove);
            document.removeEventListener('touchend', onTouchEnd);

            nodes.forEach(node => {
                if ((node as any)._onMouseDown) node.removeEventListener('mousedown', (node as any)._onMouseDown);
                if ((node as any)._onTouchStart) node.removeEventListener('touchstart', (node as any)._onTouchStart);
            });
        };
    }, []);

    return (
        <div className="w-full bg-[#F8FAFC] flex flex-col relative font-sans text-[#0F172A] overflow-x-hidden">
            {/* Hero Section */}
            <section className="relative pt-12 pb-32 overflow-hidden">
                {/* Background subtle animations & Floating School Elements */}
                <div className="absolute inset-0 z-0 pointer-events-none">
                    {/* Glows */}
                    <div className="absolute top-20 left-10 w-64 h-64 bg-[#3B82F6]/10 rounded-full blur-3xl animate-pulse"></div>
                    <div className="absolute top-40 right-20 w-80 h-80 bg-[#F59E0B]/10 rounded-full blur-3xl animate-pulse"></div>
                    <div className="absolute bottom-10 left-1/2 w-96 h-96 bg-[#EF4444]/10 rounded-full blur-3xl animate-pulse"></div>

                    {/* Floating Icons */}
                    <div className="absolute top-32 left-10 md:left-20 text-[#F59E0B]/40 animate-bounce">
                        <Pencil size={48} />
                    </div>
                    <div className="absolute top-40 right-10 md:right-20 text-[#EF4444]/40 animate-pulse">
                        <BookOpen size={60} />
                    </div>
                    <div className="absolute bottom-40 left-1/4 text-[#3B82F6]/40 animate-bounce" style={{ animationDelay: '0.5s' }}>
                        <Lightbulb size={48} />
                    </div>
                    <div className="absolute top-20 left-1/3 text-[#10B981]/40 animate-spin" style={{ animationDuration: '8s' }}>
                        <Atom size={36} />
                    </div>
                    <div className="absolute bottom-20 right-1/4 text-[#F59E0B]/30 animate-bounce" style={{ animationDelay: '1s' }}>
                        <GraduationCap size={60} />
                    </div>
                </div>

                <div className="max-w-7xl mx-auto px-6 relative z-10 text-center">
                    <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#FFFFFF] border border-[#E2E8F0] mb-8 hover:scale-105 transition-transform cursor-default shadow-sm">
                        <span className="w-2 h-2 rounded-full bg-[#EF4444] animate-ping"></span>
                        <span className="text-xs font-bold text-[#EF4444] tracking-wide uppercase">Interactive Learning Environment</span>
                    </div>
                    <h1 className="text-4xl md:text-6xl lg:text-5xl font-sans font-bold text-[#0F172A] leading-tight tracking-tight max-w-5xl mx-auto mb-6">
                        AI-Powered Teaching & Learning Platform <br className="hidden md:block" /> For{' '}
                        <span className="text-[#3B82F6] relative inline-block">
                            Modern Schools
                            <svg className="absolute w-full h-3 -bottom-1 left-0 text-[#F59E0B]" viewBox="0 0 100 10" preserveAspectRatio="none">
                                <path d="M0 5 Q 50 10 100 5" stroke="currentColor" strokeWidth="4" fill="transparent" strokeLinecap="round" />
                            </svg>
                        </span>
                    </h1>
                    <p className="text-lg md:text-xl text-[#64748b] max-w-3xl mx-auto mb-10 leading-relaxed">
                        Empower teachers with AI-generated lesson plans, study materials, assessments, videos, and classroom resources-all from one intelligent platform.
                    </p>
                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                        <Link href="/contact" className="w-full sm:w-auto px-8 py-4 text-base font-bold bg-[#3B82F6] text-white rounded-full shadow-xl shadow-[#3B82F6]/30 hover:bg-[#3B82F6]/90 hover:-translate-y-1 hover:scale-105 active:scale-95 transition-all duration-300 flex items-center justify-center gap-2 group">
                            <span>Book Free Demo</span>
                            <ArrowRight className="group-hover:translate-x-1 transition-transform" />
                        </Link>
                        <Link href="/plans" className="w-full sm:w-auto px-8 py-4 text-base font-bold text-[#0F172A] bg-[#FFFFFF] border-2 border-[#E2E8F0] rounded-full shadow-sm hover:border-[#F59E0B] hover:text-[#F59E0B] hover:-translate-y-1 hover:scale-105 active:scale-95 transition-all duration-300 text-center">
                            Start Free Trial
                        </Link>
                    </div>

                    <div className="mt-20 relative mx-auto max-w-5xl group">
                        <div className="absolute -inset-4 bg-gradient-to-r from-[#3B82F6]/20 via-[#F59E0B]/20 to-[#EF4444]/20 rounded-[2.5rem] blur-xl opacity-50 group-hover:opacity-100 transition-opacity duration-500"></div>
                        <div ref={containerRef} className="absolute inset-8 md:inset-12 bg-[#F8FAFC]/80 backdrop-blur-sm z-10 rounded-3xl overflow-hidden flex items-center justify-center" id="mindmap-container">
                            <div className="absolute top-6 left-6 flex items-center gap-2 text-[#64748b] bg-[#F8FAFC]/80 backdrop-blur px-4 py-2 rounded-full border border-[#E2E8F0] z-20 shadow-sm animate-pulse">
                                <MousePointerClick className="text-[#F59E0B]" size={20} />
                                <span className="text-sm font-medium">Drag nodes to play!</span>
                            </div>

                            <svg className="absolute inset-0 w-full h-full pointer-events-none z-0" id="mindmap-lines">
                                <line id="line-1" stroke="currentColor" strokeWidth="3" className="text-[#3B82F6]/40 transition-all duration-300" strokeDasharray="8" />
                                <line id="line-2" stroke="currentColor" strokeWidth="3" className="text-[#F59E0B]/40 transition-all duration-300" strokeDasharray="8" />
                                <line id="line-3" stroke="currentColor" strokeWidth="3" className="text-[#EF4444]/40 transition-all duration-300" strokeDasharray="8" />
                                <line id="line-4" stroke="currentColor" strokeWidth="3" className="text-[#3B82F6]/40 transition-all duration-300" strokeDasharray="8" />
                                <line id="line-5" stroke="currentColor" strokeWidth="3" className="text-[#F59E0B]/40 transition-all duration-300" strokeDasharray="8" />
                            </svg>

                            <div className="mindmap-node absolute z-10 flex flex-col items-center justify-center cursor-grab active:cursor-grabbing group/node" id="node-center" data-x="50" data-y="50">
                                <div className="w-24 h-24 rounded-2xl bg-[#3B82F6] text-white flex items-center justify-center shadow-xl shadow-[#3B82F6]/30 group-hover/node:scale-110 group-hover/node:rotate-3 transition-transform duration-300">
                                    <Brain className="animate-pulse" size={40} />
                                </div>
                                <span className="mt-3 font-bold text-[#0F172A] bg-[#F8FAFC]/90 backdrop-blur px-4 py-1.5 rounded-full text-sm shadow-md border border-[#E2E8F0]">CodeFrame AI</span>
                            </div>

                            <div className="mindmap-node absolute z-10 flex flex-col items-center justify-center cursor-grab active:cursor-grabbing group/node" id="node-1" data-x="20" data-y="25">
                                <div className="w-16 h-16 rounded-2xl bg-[#FFFFFF] border-2 border-[#3B82F6] text-[#3B82F6] flex items-center justify-center shadow-lg group-hover/node:bg-[#3B82F6] group-hover/node:text-white group-hover/node:scale-110 group-hover/node:-rotate-6 transition-all duration-300">
                                    <BookOpen size={24} />
                                </div>
                                <span className="mt-2 font-medium text-[#0F172A] bg-[#F8FAFC]/90 backdrop-blur px-3 py-1 rounded-full text-xs shadow-md border border-[#E2E8F0] whitespace-nowrap">Lesson Plans</span>
                            </div>

                            <div className="mindmap-node absolute z-10 flex flex-col items-center justify-center cursor-grab active:cursor-grabbing group/node" id="node-2" data-x="80" data-y="25">
                                <div className="w-16 h-16 rounded-2xl bg-[#FFFFFF] border-2 border-[#F59E0B] text-[#F59E0B] flex items-center justify-center shadow-lg group-hover/node:bg-[#F59E0B] group-hover/node:text-white group-hover/node:scale-110 group-hover/node:rotate-6 transition-all duration-300">
                                    <CheckSquare size={24} />
                                </div>
                                <span className="mt-2 font-medium text-[#0F172A] bg-[#F8FAFC]/90 backdrop-blur px-3 py-1 rounded-full text-xs shadow-md border border-[#E2E8F0] whitespace-nowrap">Assessments</span>
                            </div>

                            <div className="mindmap-node absolute z-10 flex flex-col items-center justify-center cursor-grab active:cursor-grabbing group/node" id="node-3" data-x="15" data-y="75">
                                <div className="w-16 h-16 rounded-2xl bg-[#FFFFFF] border-2 border-[#EF4444] text-[#EF4444] flex items-center justify-center shadow-lg group-hover/node:bg-[#EF4444] group-hover/node:text-white group-hover/node:scale-110 group-hover/node:-rotate-3 transition-all duration-300">
                                    <Video size={24} />
                                </div>
                                <span className="mt-2 font-medium text-[#0F172A] bg-[#F8FAFC]/90 backdrop-blur px-3 py-1 rounded-full text-xs shadow-md border border-[#E2E8F0] whitespace-nowrap">Learning Videos</span>
                            </div>

                            <div className="mindmap-node absolute z-10 flex flex-col items-center justify-center cursor-grab active:cursor-grabbing group/node" id="node-4" data-x="85" data-y="75">
                                <div className="w-16 h-16 rounded-2xl bg-[#FFFFFF] border-2 border-[#3B82F6] text-[#3B82F6] flex items-center justify-center shadow-lg group-hover/node:bg-[#3B82F6] group-hover/node:text-white group-hover/node:scale-110 group-hover/node:rotate-3 transition-all duration-300">
                                    <Layers size={24} />
                                </div>
                                <span className="mt-2 font-medium text-[#0F172A] bg-[#F8FAFC]/90 backdrop-blur px-3 py-1 rounded-full text-xs shadow-md border border-[#E2E8F0] whitespace-nowrap">Study Materials</span>
                            </div>

                            <div className="mindmap-node absolute z-10 flex flex-col items-center justify-center cursor-grab active:cursor-grabbing group/node" id="node-5" data-x="50" data-y="85">
                                <div className="w-16 h-16 rounded-2xl bg-[#FFFFFF] border-2 border-[#F59E0B] text-[#F59E0B] flex items-center justify-center shadow-lg group-hover/node:bg-[#F59E0B] group-hover/node:text-white group-hover/node:scale-110 group-hover/node:rotate-12 transition-all duration-300">
                                    <TrendingUp size={24} />
                                </div>
                                <span className="mt-2 font-medium text-[#0F172A] bg-[#F8FAFC]/90 backdrop-blur px-3 py-1 rounded-full text-xs shadow-md border border-[#E2E8F0] whitespace-nowrap">Progress</span>
                            </div>
                        </div>
                        <img src="https://uxmagic.blob.core.windows.net/public/agent-images/hero-flow-1781867118714-8jd24yndcac.png" alt="CodeFrame AI Data Flow" className="w-full h-auto object-cover rounded-3xl border border-[#E2E8F0] shadow-2xl relative z-0" />
                    </div>
                </div>
            </section>

            {/* Problem Section */}
            <section className="py-24 bg-[#FFFFFF] relative overflow-hidden">
                {/* Decorative background wave */}
                <div className="absolute top-0 left-0 w-full overflow-hidden leading-[0] rotate-180">
                    <svg className="relative block w-[calc(100%+1.3px)] h-[50px]" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" className="fill-[#F8FAFC]"></path>
                    </svg>
                </div>

                <div className="max-w-7xl mx-auto px-6 text-center relative z-10 pt-10">
                    <h2 className="text-3xl  font-sans font-bold text-[#0F172A] mb-4">Teachers Spend Too Much Time Preparing.<br /><span className="text-[#EF4444] inline-block animate-pulse">Too Little Time Teaching.</span></h2>
                    <p className="text-[#64748b] text-lg max-w-2xl mx-auto mb-16">The manual workload is overwhelming. CodeFrame AI automates the heavy lifting so teachers can focus on students.</p>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <div className="bg-[#F8FAFC] p-8 rounded-3xl border border-[#E2E8F0] text-left hover:-translate-y-2 hover:rotate-1 hover:shadow-xl hover:border-[#EF4444] transition-all duration-300 cursor-pointer group">
                            <div className="w-14 h-14 rounded-2xl bg-[#EF4444]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:-rotate-12 transition-transform">
                                <FileText className="text-[#EF4444]" size={32} />
                            </div>
                            <h3 className="text-xl font-bold text-[#0F172A] mb-3">Manual Lesson Planning</h3>
                            <p className="text-[#64748b]">Hours spent writing objectives and aligning with curriculum standards manually.</p>
                        </div>
                        <div className="bg-[#F8FAFC] p-8 rounded-3xl border border-[#E2E8F0] text-left hover:-translate-y-2 hover:-rotate-1 hover:shadow-xl hover:border-[#F59E0B] transition-all duration-300 cursor-pointer group">
                            <div className="w-14 h-14 rounded-2xl bg-[#F59E0B]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-12 transition-transform">
                                <Copy className="text-[#F59E0B]" size={32} />
                            </div>
                            <h3 className="text-xl font-bold text-[#0F172A] mb-3">Creating Worksheets</h3>
                            <p className="text-[#64748b]">Endless formatting and searching for the right questions to assess students.</p>
                        </div>
                        <div className="bg-[#F8FAFC] p-8 rounded-3xl border border-[#E2E8F0] text-left hover:-translate-y-2 hover:rotate-1 hover:shadow-xl hover:border-[#3B82F6] transition-all duration-300 cursor-pointer group">
                            <div className="w-14 h-14 rounded-2xl bg-[#3B82F6]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:-rotate-12 transition-transform">
                                <Presentation className="text-[#3B82F6]" size={32} />
                            </div>
                            <h3 className="text-xl font-bold text-[#0F172A] mb-3">Preparing Presentations</h3>
                            <p className="text-[#64748b]">Building slides from scratch takes away valuable time from actual teaching.</p>
                        </div>
                        <div className="bg-[#F8FAFC] p-8 rounded-3xl border border-[#E2E8F0] text-left hover:-translate-y-2 hover:-rotate-1 hover:shadow-xl hover:border-[#3B82F6] transition-all duration-300 cursor-pointer group">
                            <div className="w-14 h-14 rounded-2xl bg-[#3B82F6]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-12 transition-transform">
                                <Folder className="text-[#3B82F6]" size={32} />
                            </div>
                            <h3 className="text-xl font-bold text-[#0F172A] mb-3">Managing Resources</h3>
                            <p className="text-[#64748b]">Scattered files, links, and documents across multiple unorganized platforms.</p>
                        </div>
                        <div className="bg-[#F8FAFC] p-8 rounded-3xl border border-[#E2E8F0] text-left hover:-translate-y-2 hover:rotate-1 hover:shadow-xl hover:border-[#EF4444] transition-all duration-300 cursor-pointer group">
                            <div className="w-14 h-14 rounded-2xl bg-[#EF4444]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:-rotate-12 transition-transform">
                                <BarChart2 className="text-[#EF4444]" size={32} />
                            </div>
                            <h3 className="text-xl font-bold text-[#0F172A] mb-3">Tracking Progress</h3>
                            <p className="text-[#64748b]">Manual grading and data entry makes it impossible to identify learning gaps quickly.</p>
                        </div>
                        <div className="bg-[#F8FAFC] p-8 rounded-3xl border border-[#E2E8F0] text-left hover:-translate-y-2 hover:-rotate-1 hover:shadow-xl hover:border-[#F59E0B] transition-all duration-300 cursor-pointer group">
                            <div className="w-14 h-14 rounded-2xl bg-[#F59E0B]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-12 transition-transform">
                                <ShieldAlert className="text-[#F59E0B]" size={32} />
                            </div>
                            <h3 className="text-xl font-bold text-[#0F172A] mb-3">NEP Compliance</h3>
                            <p className="text-[#64748b]">Struggling to ensure every lesson and assessment meets modern educational mandates.</p>
                        </div>
                    </div>
                </div>
            </section>

            {/* Interactive School Workflow */}
            <section id="workflow" className="py-32 relative">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="text-center mb-20">
                        <h2 className="text-3xl font-sans font-bold text-[#0F172A] mb-4">How Schools Use CodeFrame AI</h2>
                        <p className="text-[#64748b] text-lg max-w-2xl mx-auto">A seamless, interactive workflow from planning to progress tracking.</p>
                    </div>

                    <div className="relative">
                        {/* Animated dashed line connecting steps */}
                        <div className="hidden lg:block absolute top-[40%] left-0 w-full h-1 border-t-2 border-dashed border-[#E2E8F0] -translate-y-1/2 z-0">
                            <div className="w-full h-full bg-gradient-to-r from-[#3B82F6] via-[#F59E0B] to-[#EF4444] opacity-50 animate-pulse"></div>
                        </div>

                        <div className="grid grid-cols-1 lg:grid-cols-6 gap-6 relative z-10">
                            <div className="group bg-[#FFFFFF] border-2 border-[#E2E8F0] p-6 rounded-3xl hover:border-[#3B82F6] hover:-translate-y-4 hover:shadow-2xl transition-all duration-300 cursor-pointer flex flex-col items-center text-center bg-white">
                                <div className="w-16 h-16 rounded-2xl bg-[#F8FAFC] border-2 border-[#E2E8F0] flex items-center justify-center mb-4 group-hover:bg-[#3B82F6] group-hover:border-[#3B82F6] group-hover:text-white group-hover:scale-110 group-hover:rotate-6 transition-all duration-300 shadow-sm text-[#0F172A]">
                                    <PencilRuler className="group-hover:animate-bounce" size={24} />
                                </div>
                                <h4 className="font-bold text-[#0F172A] mb-2">Create Lesson Plans</h4>
                                <div className="h-0 overflow-hidden group-hover:h-20 transition-all duration-300 opacity-0 group-hover:opacity-100">
                                    <p className="text-sm text-[#64748b] mt-2">AI generates objectives, activities, and structure.</p>
                                </div>
                            </div>

                            <div className="group bg-[#FFFFFF] border-2 border-[#E2E8F0] p-6 rounded-3xl hover:border-[#F59E0B] hover:-translate-y-4 hover:shadow-2xl transition-all duration-300 cursor-pointer flex flex-col items-center text-center bg-white">
                                <div className="w-16 h-16 rounded-2xl bg-[#F8FAFC] border-2 border-[#E2E8F0] flex items-center justify-center mb-4 group-hover:bg-[#F59E0B] group-hover:border-[#F59E0B] group-hover:text-white group-hover:scale-110 group-hover:-rotate-6 transition-all duration-300 shadow-sm text-[#0F172A]">
                                    <BookOpen className="group-hover:animate-bounce" size={24} />
                                </div>
                                <h4 className="font-bold text-[#0F172A] mb-2">Generate Materials</h4>
                                <div className="h-0 overflow-hidden group-hover:h-20 transition-all duration-300 opacity-0 group-hover:opacity-100">
                                    <p className="text-sm text-[#64748b] mt-2">Instantly create notes, summaries, and worksheets.</p>
                                </div>
                            </div>

                            <div className="group bg-[#FFFFFF] border-2 border-[#E2E8F0] p-6 rounded-3xl hover:border-[#EF4444] hover:-translate-y-4 hover:shadow-2xl transition-all duration-300 cursor-pointer flex flex-col items-center text-center bg-white">
                                <div className="w-16 h-16 rounded-2xl bg-[#F8FAFC] border-2 border-[#E2E8F0] flex items-center justify-center mb-4 group-hover:bg-[#EF4444] group-hover:border-[#EF4444] group-hover:text-white group-hover:scale-110 group-hover:rotate-6 transition-all duration-300 shadow-sm text-[#0F172A]">
                                    <Video className="group-hover:animate-bounce" size={24} />
                                </div>
                                <h4 className="font-bold text-[#0F172A] mb-2">Create Videos</h4>
                                <div className="h-0 overflow-hidden group-hover:h-20 transition-all duration-300 opacity-0 group-hover:opacity-100">
                                    <p className="text-sm text-[#64748b] mt-2">Turn topics into interactive visual learning.</p>
                                </div>
                            </div>

                            <div className="group bg-[#FFFFFF] border-2 border-[#E2E8F0] p-6 rounded-3xl hover:border-[#3B82F6] hover:-translate-y-4 hover:shadow-2xl transition-all duration-300 cursor-pointer flex flex-col items-center text-center bg-white">
                                <div className="w-16 h-16 rounded-2xl bg-[#F8FAFC] border-2 border-[#E2E8F0] flex items-center justify-center mb-4 group-hover:bg-[#3B82F6] group-hover:border-[#3B82F6] group-hover:text-white group-hover:scale-110 group-hover:-rotate-6 transition-all duration-300 shadow-sm text-[#0F172A]">
                                    <ClipboardCheck className="group-hover:animate-bounce" size={24} />
                                </div>
                                <h4 className="font-bold text-[#0F172A] mb-2">Generate Assessments</h4>
                                <div className="h-0 overflow-hidden group-hover:h-20 transition-all duration-300 opacity-0 group-hover:opacity-100">
                                    <p className="text-sm text-[#64748b] mt-2">Create quizzes, MCQs, and competency questions.</p>
                                </div>
                            </div>

                            <div className="group bg-[#FFFFFF] border-2 border-[#E2E8F0] p-6 rounded-3xl hover:border-[#F59E0B] hover:-translate-y-4 hover:shadow-2xl transition-all duration-300 cursor-pointer flex flex-col items-center text-center bg-white">
                                <div className="w-16 h-16 rounded-2xl bg-[#F8FAFC] border-2 border-[#E2E8F0] flex items-center justify-center mb-4 group-hover:bg-[#F59E0B] group-hover:border-[#F59E0B] group-hover:text-white group-hover:scale-110 group-hover:rotate-6 transition-all duration-300 shadow-sm text-[#0F172A]">
                                    <Share2 className="group-hover:animate-bounce" size={24} />
                                </div>
                                <h4 className="font-bold text-[#0F172A] mb-2">Share With Students</h4>
                                <div className="h-0 overflow-hidden group-hover:h-20 transition-all duration-300 opacity-0 group-hover:opacity-100">
                                    <p className="text-sm text-[#64748b] mt-2">Distribute resources effortlessly in one click.</p>
                                </div>
                            </div>

                            <div className="group bg-[#FFFFFF] border-2 border-[#E2E8F0] p-6 rounded-3xl hover:border-[#EF4444] hover:-translate-y-4 hover:shadow-2xl transition-all duration-300 cursor-pointer flex flex-col items-center text-center bg-white">
                                <div className="w-16 h-16 rounded-2xl bg-[#F8FAFC] border-2 border-[#E2E8F0] flex items-center justify-center mb-4 group-hover:bg-[#EF4444] group-hover:border-[#EF4444] group-hover:text-white group-hover:scale-110 group-hover:-rotate-6 transition-all duration-300 shadow-sm text-[#0F172A]">
                                    <TrendingUp className="group-hover:animate-bounce" size={24} />
                                </div>
                                <h4 className="font-bold text-[#0F172A] mb-2">Track Progress</h4>
                                <div className="h-0 overflow-hidden group-hover:h-20 transition-all duration-300 opacity-0 group-hover:opacity-100">
                                    <p className="text-sm text-[#64748b] mt-2">Monitor performance and identify learning gaps.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Benefits Section */}
            <section id="benefits" className="py-24 bg-[#FFFFFF] relative overflow-hidden">
                <div className="absolute inset-0 z-0 pointer-events-none opacity-20">
                    <div className="absolute top-10 left-10 w-40 h-40 bg-[#3B82F6] rounded-full blur-3xl"></div>
                    <div className="absolute bottom-10 right-10 w-60 h-60 bg-[#F59E0B] rounded-full blur-3xl"></div>
                </div>

                <div className="max-w-7xl mx-auto px-6 relative z-10">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl font-sans font-bold text-[#0F172A] mb-4">Built For Teachers. Designed For Schools.</h2>
                        <p className="text-[#64748b] text-lg max-w-2xl mx-auto">Everything you need to deliver world-class education with a touch of fun.</p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <div className="p-8 bg-[#F8FAFC] border-2 border-[#E2E8F0] rounded-3xl hover:-translate-y-2 hover:rotate-1 hover:shadow-xl hover:border-[#3B82F6] transition-all duration-300 group cursor-pointer">
                            <div className="w-16 h-16 rounded-2xl bg-[#3B82F6]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:-rotate-12 transition-transform">
                                <BookOpen className="text-[#3B82F6]" size={36} />
                            </div>
                            <h3 className="text-2xl font-bold text-[#0F172A] mb-3">AI Lesson Planning</h3>
                            <p className="text-[#64748b]">Generate structured, NEP-aligned lesson plans with learning objectives and activities in minutes.</p>
                        </div>
                        <div className="p-8 bg-[#F8FAFC] border-2 border-[#E2E8F0] rounded-3xl hover:-translate-y-2 hover:-rotate-1 hover:shadow-xl hover:border-[#F59E0B] transition-all duration-300 group cursor-pointer">
                            <div className="w-16 h-16 rounded-2xl bg-[#F59E0B]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-12 transition-transform">
                                <Layers className="text-[#F59E0B]" size={36} />
                            </div>
                            <h3 className="text-2xl font-bold text-[#0F172A] mb-3">Study Material Generator</h3>
                            <p className="text-[#64748b]">Instantly generate notes, summaries, worksheets, mind maps, and revision material.</p>
                        </div>
                        <div className="p-8 bg-[#F8FAFC] border-2 border-[#E2E8F0] rounded-3xl hover:-translate-y-2 hover:rotate-1 hover:shadow-xl hover:border-[#EF4444] transition-all duration-300 group cursor-pointer">
                            <div className="w-16 h-16 rounded-2xl bg-[#EF4444]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:-rotate-12 transition-transform">
                                <CheckSquare className="text-[#EF4444]" size={36} />
                            </div>
                            <h3 className="text-2xl font-bold text-[#0F172A] mb-3">Assessment Creation</h3>
                            <p className="text-[#64748b]">Create quizzes, competency-based questions, HOTS questions, and full question papers.</p>
                        </div>
                        <div className="p-8 bg-[#F8FAFC] border-2 border-[#E2E8F0] rounded-3xl hover:-translate-y-2 hover:-rotate-1 hover:shadow-xl hover:border-[#3B82F6] transition-all duration-300 group cursor-pointer">
                            <div className="w-16 h-16 rounded-2xl bg-[#3B82F6]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-12 transition-transform">
                                <Video className="text-[#3B82F6]" size={36} />
                            </div>
                            <h3 className="text-2xl font-bold text-[#0F172A] mb-3">Learning Videos</h3>
                            <p className="text-[#64748b]">Turn any topic into interactive videos and highly engaging visual learning experiences.</p>
                        </div>
                        <div className="p-8 bg-[#F8FAFC] border-2 border-[#E2E8F0] rounded-3xl hover:-translate-y-2 hover:rotate-1 hover:shadow-xl hover:border-[#F59E0B] transition-all duration-300 group cursor-pointer">
                            <div className="w-16 h-16 rounded-2xl bg-[#F59E0B]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:-rotate-12 transition-transform">
                                <Users className="text-[#F59E0B]" size={36} />
                            </div>
                            <h3 className="text-2xl font-bold text-[#0F172A] mb-3">Teacher-Student Collab</h3>
                            <p className="text-[#64748b]">Share notes, announcements, assignments, and learning resources effortlessly with the class.</p>
                        </div>
                        <div className="p-8 bg-[#F8FAFC] border-2 border-[#E2E8F0] rounded-3xl hover:-translate-y-2 hover:-rotate-1 hover:shadow-xl hover:border-[#EF4444] transition-all duration-300 group cursor-pointer">
                            <div className="w-16 h-16 rounded-2xl bg-[#EF4444]/10 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-12 transition-transform">
                                <TrendingUp className="text-[#EF4444]" size={36} />
                            </div>
                            <h3 className="text-2xl font-bold text-[#0F172A] mb-3">Progress Tracking</h3>
                            <p className="text-[#64748b]">Monitor student performance in real-time and identify strengths and learning gaps immediately.</p>
                        </div>
                    </div>
                </div>
            </section>

            {/* Product Preview */}
            <section className="py-32 bg-[#F8FAFC]">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="flex flex-col lg:flex-row items-center gap-16">
                        <div className="w-full lg:w-1/2">
                            <h2 className="text-3xl  font-sans font-bold text-[#0F172A] mb-6">One Platform For The Entire School</h2>
                            <p className="text-lg text-[#64748b] mb-8">Manage teachers, students, classrooms, assessments, and learning resources from a single, unified dashboard designed for modern interactive academic workflows.</p>

                            <ul className="space-y-4">
                                <li className="flex items-center gap-4 group cursor-pointer hover:translate-x-2 transition-transform">
                                    <div className="w-10 h-10 rounded-full bg-[#3B82F6]/10 flex items-center justify-center text-[#3B82F6] group-hover:bg-[#3B82F6] group-hover:text-white transition-colors">
                                        <Check className="group-hover:scale-125 transition-transform" size={20} />
                                    </div>
                                    <span className="text-[#0F172A] font-medium text-lg">Teacher Dashboard</span>
                                </li>
                                <li className="flex items-center gap-4 group cursor-pointer hover:translate-x-2 transition-transform">
                                    <div className="w-10 h-10 rounded-full bg-[#F59E0B]/10 flex items-center justify-center text-[#F59E0B] group-hover:bg-[#F59E0B] group-hover:text-white transition-colors">
                                        <Check className="group-hover:scale-125 transition-transform" size={20} />
                                    </div>
                                    <span className="text-[#0F172A] font-medium text-lg">Interactive Lesson Planner</span>
                                </li>
                                <li className="flex items-center gap-4 group cursor-pointer hover:translate-x-2 transition-transform">
                                    <div className="w-10 h-10 rounded-full bg-[#EF4444]/10 flex items-center justify-center text-[#EF4444] group-hover:bg-[#EF4444] group-hover:text-white transition-colors">
                                        <Check className="group-hover:scale-125 transition-transform" size={20} />
                                    </div>
                                    <span className="text-[#0F172A] font-medium text-lg">Smart Assessment Generator</span>
                                </li>
                                <li className="flex items-center gap-4 group cursor-pointer hover:translate-x-2 transition-transform">
                                    <div className="w-10 h-10 rounded-full bg-[#3B82F6]/10 flex items-center justify-center text-[#3B82F6] group-hover:bg-[#3B82F6] group-hover:text-white transition-colors">
                                        <Check className="group-hover:scale-125 transition-transform" size={20} />
                                    </div>
                                    <span className="text-[#0F172A] font-medium text-lg">Centralized Resource Library</span>
                                </li>
                                <li className="flex items-center gap-4 group cursor-pointer hover:translate-x-2 transition-transform">
                                    <div className="w-10 h-10 rounded-full bg-[#F59E0B]/10 flex items-center justify-center text-[#F59E0B] group-hover:bg-[#F59E0B] group-hover:text-white transition-colors">
                                        <Check className="group-hover:scale-125 transition-transform" size={20} />
                                    </div>
                                    <span className="text-[#0F172A] font-medium text-lg">Student Progress Dashboard</span>
                                </li>
                            </ul>
                        </div>
                        <div className="w-full lg:w-1/2 relative group">
                            <div className="absolute -inset-4 bg-gradient-to-tr from-[#3B82F6]/30 to-[#F59E0B]/30 rounded-[3rem] blur-xl opacity-50 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <div className="bg-[#FFFFFF] p-4 rounded-[2.5rem] border-2 border-[#E2E8F0] shadow-2xl relative z-10 transform group-hover:-translate-y-2 group-hover:rotate-1 transition-all duration-500">
                                <img src="/lesson-plan/lesson_plan_dashboard.png" alt="Product Dashboard" className="w-full h-auto rounded-3xl border border-[#E2E8F0]" />
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* NEP Section */}
            <section id="nep" className="py-24 bg-[#3B82F6] text-white relative overflow-hidden">
                {/* Floating atoms and books */}
                <div className="absolute top-10 right-10 text-white/20 animate-spin" style={{ animationDuration: '10s' }}>
                    <Atom size={60} />
                </div>
                <div className="absolute bottom-10 left-10 text-white/20 animate-bounce" style={{ animationDuration: '3s' }}>
                    <BookOpen size={60} />
                </div>

                <div className="max-w-7xl mx-auto px-6 relative z-10">
                    <div className="flex flex-col md:flex-row items-center justify-between gap-12">
                        <div className="w-full md:w-1/2">
                            <h2 className="text-3xl font-sans font-bold mb-6 text-white">Built For NEP-Aligned Education</h2>
                            <p className="text-white/90 text-lg mb-8">Move beyond rote learning. Develop competencies, critical thinking, problem-solving, and real-life application skills through interactive AI-powered learning experiences.</p>
                            <button className="px-8 py-4 bg-[#F59E0B] text-white font-bold rounded-full shadow-xl hover:bg-[#F59E0B]/90 hover:scale-105 active:scale-95 hover:-translate-y-1 transition-all duration-300">
                                Explore NEP Features
                            </button>
                        </div>
                        <div className="w-full md:w-1/2 grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div className="bg-white/10 backdrop-blur-md p-6 rounded-3xl border border-white/20 hover:-translate-y-2 hover:bg-white/20 transition-all duration-300 cursor-pointer group">
                                <div className="w-12 h-12 rounded-2xl bg-white/20 flex items-center justify-center mb-4 group-hover:scale-110 group-hover:rotate-12 transition-transform">
                                    <Target className="text-white" size={24} />
                                </div>
                                <h4 className="font-bold text-xl mb-2 text-white">Competency-Based</h4>
                                <p className="text-white/80 text-sm">Focus on practical skills and real-world application.</p>
                            </div>
                            <div className="bg-white/10 backdrop-blur-md p-6 rounded-3xl border border-white/20 hover:-translate-y-2 hover:bg-white/20 transition-all duration-300 cursor-pointer group">
                                <div className="w-12 h-12 rounded-2xl bg-white/20 flex items-center justify-center mb-4 group-hover:scale-110 group-hover:-rotate-12 transition-transform">
                                    <Brain className="text-white" size={24} />
                                </div>
                                <h4 className="font-bold text-xl mb-2 text-white">Critical Thinking</h4>
                                <p className="text-white/80 text-sm">Assessments designed to challenge and grow minds.</p>
                            </div>
                            <div className="bg-white/10 backdrop-blur-md p-6 rounded-3xl border border-white/20 hover:-translate-y-2 hover:bg-white/20 transition-all duration-300 cursor-pointer group">
                                <div className="w-12 h-12 rounded-2xl bg-white/20 flex items-center justify-center mb-4 group-hover:scale-110 group-hover:rotate-12 transition-transform">
                                    <LineChart className="text-white" size={24} />
                                </div>
                                <h4 className="font-bold text-xl mb-2 text-white">Learning Outcomes</h4>
                                <p className="text-white/80 text-sm">Trackable metrics aligned with educational standards.</p>
                            </div>
                            <div className="bg-white/10 backdrop-blur-md p-6 rounded-3xl border border-white/20 hover:-translate-y-2 hover:bg-white/20 transition-all duration-300 cursor-pointer group">
                                <div className="w-12 h-12 rounded-2xl bg-white/20 flex items-center justify-center mb-4 group-hover:scale-110 group-hover:-rotate-12 transition-transform">
                                    <UserCheck className="text-white" size={24} />
                                </div>
                                <h4 className="font-bold text-xl mb-2 text-white">Personalized</h4>
                                <p className="text-white/80 text-sm">Adaptive learning paths for every student's pace.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Administrator Benefits */}
            <section id="admin" className="py-32 bg-[#FFFFFF]">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl font-sans font-bold text-[#0F172A] mb-4">What School Leaders Gain</h2>
                        <p className="text-[#64748b] text-lg max-w-2xl mx-auto">Transform your institution with data-driven insights and interactive centralized control.</p>
                    </div>

                    <div className="flex flex-col lg:flex-row gap-12 items-center mb-16">
                        <div className="w-full lg:w-1/2 relative group">
                            <div className="absolute -inset-4 bg-gradient-to-bl from-[#F59E0B]/30 to-[#EF4444]/30 rounded-[3rem] blur-xl opacity-50 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <img src="https://uxmagic.blob.core.windows.net/public/agent-images/admin-dashboard-1781867131343-vg9gg8l766o.png" alt="Admin Dashboard" className="relative z-10 w-full h-auto rounded-3xl border-2 border-[#E2E8F0] shadow-2xl transform group-hover:scale-[1.02] transition-transform duration-500" />
                        </div>
                        <div className="w-full lg:w-1/2 grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div className="p-6 bg-[#F8FAFC] rounded-3xl border-2 border-[#E2E8F0] hover:-translate-y-1 hover:shadow-lg hover:border-[#3B82F6] transition-all duration-300 cursor-pointer group">
                                <Clock className="text-[#3B82F6] mb-3 group-hover:scale-110 transition-transform" size={32} />
                                <h4 className="font-bold text-[#0F172A] mb-2">Reduce Workload</h4>
                                <p className="text-sm text-[#64748b]">Free up teachers' time so they can focus on mentoring.</p>
                            </div>
                            <div className="p-6 bg-[#F8FAFC] rounded-3xl border-2 border-[#E2E8F0] hover:-translate-y-1 hover:shadow-lg hover:border-[#F59E0B] transition-all duration-300 cursor-pointer group">
                                <Award className="text-[#F59E0B] mb-3 group-hover:scale-110 transition-transform" size={32} />
                                <h4 className="font-bold text-[#0F172A] mb-2">Standardize Quality</h4>
                                <p className="text-sm text-[#64748b]">Ensure consistent, high-quality content across all classes.</p>
                            </div>
                            <div className="p-6 bg-[#F8FAFC] rounded-3xl border-2 border-[#E2E8F0] hover:-translate-y-1 hover:shadow-lg hover:border-[#EF4444] transition-all duration-300 cursor-pointer group">
                                <TrendingUp className="text-[#EF4444] mb-3 group-hover:scale-110 transition-transform" size={32} />
                                <h4 className="font-bold text-[#0F172A] mb-2">Improve Outcomes</h4>
                                <p className="text-sm text-[#64748b]">Drive better academic results through personalized learning.</p>
                            </div>
                            <div className="p-6 bg-[#F8FAFC] rounded-3xl border-2 border-[#E2E8F0] hover:-translate-y-1 hover:shadow-lg hover:border-[#3B82F6] transition-all duration-300 cursor-pointer group">
                                <Monitor className="text-[#3B82F6] mb-3 group-hover:scale-110 transition-transform" size={32} />
                                <h4 className="font-bold text-[#0F172A] mb-2">Digital Transformation</h4>
                                <p className="text-sm text-[#64748b]">Modernize your school's entire academic infrastructure.</p>
                            </div>
                            <div className="p-6 bg-[#F8FAFC] rounded-3xl border-2 border-[#E2E8F0] hover:-translate-y-1 hover:shadow-lg hover:border-[#F59E0B] transition-all duration-300 cursor-pointer group">
                                <Database className="text-[#F59E0B] mb-3 group-hover:scale-110 transition-transform" size={32} />
                                <h4 className="font-bold text-[#0F172A] mb-2">Centralized Resources</h4>
                                <p className="text-sm text-[#64748b]">One secure hub for all educational materials and data.</p>
                            </div>
                            <div className="p-6 bg-[#F8FAFC] rounded-3xl border-2 border-[#E2E8F0] hover:-translate-y-1 hover:shadow-lg hover:border-[#EF4444] transition-all duration-300 cursor-pointer group">
                                <PieChart className="text-[#EF4444] mb-3 group-hover:scale-110 transition-transform" size={32} />
                                <h4 className="font-bold text-[#0F172A] mb-2">Data-Driven Decisions</h4>
                                <p className="text-sm text-[#64748b]">Actionable insights into school-wide performance metrics.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Results Section */}
            <section className="py-24 bg-[#F8FAFC] border-t border-b border-[#E2E8F0] relative overflow-hidden">
                <div className="absolute inset-0 bg-[#3B82F6]/5 z-0"></div>
                <div className="max-w-7xl mx-auto px-6 text-center relative z-10">
                    <h2 className="text-3xl font-sans font-bold text-[#0F172A] mb-16">Impact Across The School</h2>

                    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
                        <div className="group cursor-pointer">
                            <div className="text-5xl md:text-6xl font-bold text-[#3B82F6] mb-2 group-hover:scale-110 transition-transform duration-300">15<span className="text-3xl animate-pulse">+</span></div>
                            <p className="text-[#0F172A] font-medium">Hours Saved Per Teacher Every Week</p>
                        </div>
                        <div className="group cursor-pointer">
                            <div className="text-5xl md:text-6xl font-bold text-[#F59E0B] mb-2 group-hover:scale-110 transition-transform duration-300">10x</div>
                            <p className="text-[#0F172A] font-medium">Faster Content Creation</p>
                        </div>
                        <div className="group cursor-pointer">
                            <div className="text-5xl md:text-6xl font-bold text-[#EF4444] mb-2 group-hover:scale-110 transition-transform duration-300">40<span className="text-3xl">%</span></div>
                            <p className="text-[#0F172A] font-medium">Better Classroom Engagement</p>
                        </div>
                        <div className="group cursor-pointer">
                            <div className="text-5xl md:text-6xl font-bold text-[#3B82F6] mb-2 group-hover:scale-110 transition-transform duration-300">100<span className="text-3xl">%</span></div>
                            <p className="text-[#0F172A] font-medium">Improved Academic Consistency</p>
                        </div>
                    </div>
                </div>
            </section>

            {/* Final CTA */}
            <section className="py-32 relative overflow-hidden">
                <div className="absolute inset-0 bg-[#F59E0B] z-0"></div>
                <div className="absolute inset-0 bg-[#3B82F6]/20 z-0 mix-blend-multiply"></div>

                {/* Animated Confetti / Floating Elements */}
                <div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
                    <div className="absolute top-10 left-[10%] text-white/40 animate-bounce" style={{ animationDelay: '0.1s' }}><Star size={40} /></div>
                    <div className="absolute top-20 right-[20%] text-white/40 animate-bounce" style={{ animationDelay: '0.5s' }}><Sparkles size={48} /></div>
                    <div className="absolute bottom-20 left-[30%] text-white/40 animate-bounce" style={{ animationDelay: '0.3s' }}><Rocket size={60} /></div>
                    <div className="absolute top-30 right-[10%] text-white/40 animate-pulse"><Zap size={40} /></div>
                </div>

                <div className="max-w-4xl mx-auto px-6 relative z-10 text-center text-white">
                    <h2 className="text-4xl font-sans font-bold mb-6 text-white drop-shadow-lg">Transform Teaching Across Your Entire School</h2>
                    <p className="text-xl text-white/90 mb-10 max-w-2xl mx-auto font-medium">Give every teacher the power of AI and every student a better interactive learning experience.</p>
                    <button onClick={() => window.open('/contact', '_blank')} className="px-10 py-5 text-lg font-bold bg-white text-[#F59E0B] rounded-full shadow-2xl hover:shadow-white/20 hover:-translate-y-2 hover:scale-105 active:scale-95 transition-all duration-300 flex items-center justify-center gap-3 mx-auto group">
                        <span>Book A Free Demo</span>
                        <ArrowRight className="group-hover:translate-x-2 transition-transform" />
                    </button>
                </div>
            </section>
        </div>
    );
}