"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import { TrendingUp, Clock, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="noise"
      cardStyle="gradient-mesh"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: "Dashboard", id: "dashboard" },
            { name: "My Plan", id: "plan" },
            { name: "Progress", id: "progress" },
            { name: "FAQ", id: "faq" },
          ]}
          brandName="ExamFlow"
          button={{
            text: "Start Free",            href: "#onboarding"}}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="ExamFlow"
          description="Stop panicking. Start planning. ExamFlow helps you create a personalized study schedule, track daily progress, and ace your exams with confidence."
          buttons={[
            { text: "Create Your Plan", href: "#onboarding" },
            { text: "See How It Works", href: "#features" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          imageSrc="http://img.b2bpic.net/free-photo/close-up-tablet-papers-with-data-charts-desk-used-by-workmates-business-development-corporate-colleagues-working-project-presentation-management-marketing-strategy_482257-32053.jpg"
          imageAlt="dashboard interface study analytics clean"
          frameStyle="browser"
          mediaAnimation="blur-reveal"
        />
      </div>

      <div id="onboarding" data-section="onboarding">
        <MediaAbout
          tag="Step 1: Setup"
          title="Four Simple Questions"
          description="Tell us your exam date, how many courses you're taking, how hard each one is, and how much time you have each day. That's all we need."
          tagIcon={Zap}
          buttons={[{ text: "Get Started", href: "#" }]}
          imageSrc="http://img.b2bpic.net/free-vector/task-management-app-template_23-2148663598.jpg"
          imageAlt="form setup onboarding interface modern"
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySeven
          tag="How It Works"
          title="Three Core Features"
          description="From exam details to daily accountability."
          features={[
            {
              id: "1",              title: "Smart Plan Generator",              description: "We auto-distribute your courses across the days until your exam. Harder courses get more study time. Each day shows exactly what to study and for how long.",              imageSrc: "http://img.b2bpic.net/free-photo/schedule-activity-calendar-appointment-concept_53876-122362.jpg",              imageAlt: "schedule planning calendar study organization"},
            {
              id: "2",              title: "Daily 25-Min Focus Timer",              description: "Start focused study sessions with our built-in 25-minute timer. No distractions. Just deep work. Mark sessions complete and watch your progress grow.",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-alarm-clock_53876-31264.jpg",              imageAlt: "timer focus productivity clock study"},
            {
              id: "3",              title: "Real Progress Dashboard",              description: "See exactly where you stand. % syllabus covered. Hours studied this week. Days left to exam. No guessing. Pure accountability.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "progress metrics statistics chart analytics"},
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metric" data-section="metric">
        <MetricCardThree
          tag="Why Students Love ExamFlow"
          title="Proven Results"
          description="Real students. Real outcomes."
          metrics={[
            { id: "1", icon: TrendingUp, title: "Avg Score Boost", value: "+18%" },
            { id: "2", icon: Clock, title: "Study Hours Logged", value: "2,400+" },
            { id: "3", icon: Users, title: "Active Students", value: "1,200+" },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          uniformGridCustomHeightClasses="min-h-80 2xl:min-h-90"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          tag="Student Stories"
          title="Hear From Real Users"
          description="Students who went from panic to prepared."
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "Engineering Student",              company: "UC Berkeley",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-girl-student-looking-camera-sitting-cafe-table_1163-5164.jpg",              imageAlt: "student woman university portrait professional"},
            {
              id: "2",              name: "Marcus Johnson",              role: "Med School Candidate",              company: "Harvard Med",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-man-holding-folder-outdoor_74855-2121.jpg",              imageAlt: "student man medical professional portrait"},
            {
              id: "3",              name: "Priya Patel",              role: "Law Student",              company: "Yale Law",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-lady_1163-3171.jpg",              imageAlt: "student woman professional law portrait"},
          ]}
          kpiItems={[
            { value: "96%", label: "Say ExamFlow saved them time" },
            { value: "89%", label: "Would recommend to friends" },
            { value: "2.5 hrs", label: "Average daily study consistency" },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          uniformGridCustomHeightClasses="min-h-80 2xl:min-h-90"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          tag="Questions?"
          title="Frequently Asked"
          description="Everything you need to know about ExamFlow."
          faqs={[
            {
              id: "1",              title: "How long does it take to set up my plan?",              content: "Less than 2 minutes. Answer four quick questions about your exam, courses, and available study time, and we'll generate a complete study plan instantly."},
            {
              id: "2",              title: "Can I adjust my plan after I start?",              content: "Yes. Life happens. You can update your study hours, exam date, or course difficulty anytime. Your plan recalculates automatically."},
            {
              id: "3",              title: "What if I miss a study session?",              content: "No penalty. Just log back in and continue. Your progress dashboard shows your weekly consistency, so you can see the big picture, not just one missed session."},
            {
              id: "4",              title: "Is there a premium version?",              content: "Not yet. This MVP is completely free. We're proving the core value first. Future versions may include custom timetables and past exam questions."},
          ]}
          imageSrc="http://img.b2bpic.net/free-vector/flat-composition-with-telephone-operators-lending-online-support-client_1284-58936.jpg"
          imageAlt="faq help support questions illustration"
          mediaAnimation="slide-up"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          mediaPosition="right"
          animationType="smooth"
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactSplit
          tag="Ready?"
          title="Stop Procrastinating. Start Studying."
          description="Create your personalized study plan in under 2 minutes. No credit card. No commitment. Just clarity."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
          imageSrc="http://img.b2bpic.net/free-photo/smart-pretty-young-woman-working-with-laptop-table-library-studying-university-learning-freelancer-working-searching-internet-clever-student-hard-working_197531-1856.jpg"
          imageAlt="student studying laptop learning focused"
          mediaAnimation="blur-reveal"
          inputPlaceholder="your@email.com"
          buttonText="Create Plan Free"
          termsText="Join 1,000+ students already preparing smarter."
          mediaPosition="left"
        />
      </div>
    </ThemeProvider>
  );
}
