"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { BookOpen, Sparkles, Zap, Heart, HelpCircle, Mail } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="fluid"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="StudyFlow"
          navItems={[
            { name: "Features", id: "features" },
            { name: "How It Works", id: "product" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Start Tracking", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          title="Master Your Studies, Track Your Progress"
          description="Beautiful interactive platform to manage your studies, visualize progress across books and chapters, and celebrate every learning milestone with stunning animated graphs and insightful analytics."
          tag="Study Smart"
          tagIcon={BookOpen}
          tagAnimation="slide-up"
          background={{ variant: "fluid" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/a-modern-study-dashboard-interface-with--1773234004473-3dd0706c.png"
          imageAlt="Study Flow Dashboard"
          mediaAnimation="slide-up"
          imagePosition="right"
          testimonials={[
            {
              name: "Sarah Chen",              handle: "Graduate Student",              testimonial: "StudyFlow transformed how I track my reading. The visual progress graphs keep me motivated!",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-a-confident-university-stude-1773234003424-777fb6c6.png"
            },
            {
              name: "Marcus Johnson",              handle: "Book Enthusiast",              testimonial: "Finally a platform that celebrates every chapter completed. The animations are so satisfying!",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-a-young-professional-or-grad-1773234003212-e591fadb.png"
            }
          ]}
          testimonialRotationInterval={5000}
          buttons={[
            { text: "Start Tracking Now", href: "contact" },
            { text: "See Demo", href: "product" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="Powerful Study Management Tools"
          description="Everything you need to organize, track, and visualize your reading journey"
          tag="Features"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/close-up-of-an-interactive-study-tracker-1773234004496-c0868520.png"
          imageAlt="Study Tracking Features"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          mediaPosition="left"
          accordionItems={[
            {
              id: "1",              title: "Interactive Progress Tracking",              content: "Visualize your reading progress with beautiful animated charts and completion percentages for each book and chapter. Watch your progress grow in real-time with smooth, satisfying animations."
            },
            {
              id: "2",              title: "Smart Study Analytics",              content: "Get detailed insights into your study habits, reading speed, time spent per chapter, and completion rates. Make data-driven decisions to optimize your learning strategy."
            },
            {
              id: "3",              title: "Chapter-Level Organization",              content: "Organize your books into detailed chapters with custom notes, highlights, and completion tracking. Never lose track of where you are in your reading journey."
            },
            {
              id: "4",              title: "Achievement Badges & Milestones",              content: "Celebrate every milestone with beautiful achievement badges. Get rewarded for consistency and watch your accomplishments grow throughout your study journey."
            }
          ]}
          buttons={[
            { text: "Learn More", href: "contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardOne
          title="How StudyFlow Works"
          description="Experience the seamless workflow that makes study tracking beautiful and intuitive"
          tag="Workflow"
          tagIcon={Zap}
          tagAnimation="slide-up"
          products={[
            {
              id: "1",              name: "Add Your Books",              price: "Step 1",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/a-modern-study-dashboard-interface-with--1773234004473-3dd0706c.png",              imageAlt: "Step 1 - Add Your Books"
            },
            {
              id: "2",              name: "Track Chapters",              price: "Step 2",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/close-up-of-an-interactive-study-tracker-1773234004496-c0868520.png",              imageAlt: "Step 2 - Track Chapters"
            },
            {
              id: "3",              name: "Visualize Progress",              price: "Step 3",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/illustration-of-a-student-studying-with--1773234004357-84429c73.png",              imageAlt: "Step 3 - Visualize Progress"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Get Started", href: "contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          testimonials={[
            {
              id: "1",              name: "Emma Rodriguez",              role: "PhD Candidate",              testimonial: "StudyFlow helped me organize my dissertation research across 50+ academic papers. The progress visualization keeps me motivated.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-a-confident-university-stude-1773234003424-777fb6c6.png",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "2",              name: "David Kim",              role: "Language Learner",              testimonial: "I've been using StudyFlow to track my reading in three languages. The interface is intuitive and the animations make studying fun.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-a-young-professional-or-grad-1773234003212-e591fadb.png",              imageAlt: "David Kim"
            },
            {
              id: "3",              name: "Lisa Thompson",              role: "Book Club Organizer",              testimonial: "Our book club loves using StudyFlow to coordinate reading schedules and discuss chapters. Best platform for group study coordination.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-an-academic-professional-or--1773234003813-e29d4fcb.png",              imageAlt: "Lisa Thompson"
            },
            {
              id: "4",              name: "Alex Patel",              role: "Professional Developer",              testimonial: "As someone learning new technical skills daily, StudyFlow's analytics help me optimize my study sessions and track real progress.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/portrait-of-a-student-or-learner-warm-sm-1773234004450-e2470e64.png",              imageAlt: "Alex Patel"
            }
          ]}
          title="Loved by Students & Scholars"
          description="Join thousands of learners who use StudyFlow to master their studies"
          tag="Testimonials"
          tagIcon={Heart}
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Share Your Story", href: "contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Join Thousands of Learners Tracking Their Progress"
          tag="Impact"
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "50K+",              description: "Active users tracking their study progress every day across the platform"
            },
            {
              id: "2",              value: "2M+",              description: "Chapters tracked and completed by our community of dedicated learners"
            },
            {
              id: "3",              value: "98%",              description: "User satisfaction rate with StudyFlow's intuitive design and features"
            },
            {
              id: "4",              value: "24/7",              description: "Access to your study data with automatic syncing across all your devices"
            }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          faqs={[
            {
              id: "1",              title: "Can I track multiple books simultaneously?",              content: "Absolutely! StudyFlow is designed to handle unlimited books and chapters. Organize your entire library and track progress across all titles in real-time with our advanced analytics."
            },
            {
              id: "2",              title: "How does the progress visualization work?",              content: "Our system generates beautiful animated graphs showing your completion percentage, reading speed, and chapter-by-chapter progress. Watch your achievements grow with smooth, satisfying animations."
            },
            {
              id: "3",              title: "Is my data secure and backed up?",              content: "Yes! All your study data is encrypted and automatically backed up to our secure servers. You can access your progress from any device, anywhere, anytime."
            },
            {
              id: "4",              title: "Can I export my study statistics?",              content: "StudyFlow allows you to export your progress reports as PDF or CSV. Perfect for sharing achievements or analyzing your study patterns over time."
            },
            {
              id: "5",              title: "Do you offer collaboration features?",              content: "Yes! Create study groups, share reading lists, and track collective progress with friends and colleagues. Perfect for book clubs, study circles, and group learning."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Angoy2QVuRBJK0K90pnHPyoD0r/illustration-of-a-student-studying-with--1773234004357-84429c73.png"
          imageAlt="Study Tips and Support"
          mediaAnimation="slide-up"
          mediaPosition="left"
          title="Frequently Asked Questions"
          description="Everything you need to know about StudyFlow"
          tag="Help"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
          buttons={[
            { text: "Contact Support", href: "contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Transform Your Study Habits?"
          description="Join thousands of learners using StudyFlow to track their progress and stay motivated. Sign up today and get instant access to beautiful study tracking."
          tagIcon={Mail}
          tagAnimation="slide-up"
          background={{ variant: "fluid" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Start Free Trial"
          termsText="We respect your privacy. Unsubscribe at any time. No spam, just study updates."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="StudyFlow"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}