"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { BookOpen, Clock, Smile } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSmallSizeLargeTitles"
        background="aurora"
        cardStyle="subtle-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Features",
          id: "features",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "Testimonials",
          id: "testimonials",
        },
      ]}
      brandName="Vela"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "plain",
      }}
      title="Finally, the college process feels like a plan."
      description="Overwhelmed by deadlines, applications, and the sheer noise of college prep? Get a personalized roadmap, tracked progress, and clarity—all in one place."
      buttons={[
        {
          text: "Get Your Roadmap",
          href: "#pricing",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/students-doing-homework-park_53876-42624.jpg"
      imageAlt="Vela college prep dashboard"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/young-blonde-charming-female-isolated_176474-79558.jpg",
          alt: "Student",
        },
        {
          src: "http://img.b2bpic.net/free-photo/troubled-teen-receiving-therapy-emotional-management-mental-health_482257-107632.jpg",
          alt: "Student",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-handsome-traveler-wearing-backpack-city_1262-3629.jpg",
          alt: "Student",
        },
        {
          src: "http://img.b2bpic.net/free-photo/cheerful-schoolboy-portrait_23-2147666930.jpg",
          alt: "Student",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-beautiful-cheerful-african-woman-student-smiling-laughing-sitting-cafe-books-magazines-lying-table-learning-education_176420-12412.jpg",
          alt: "Student",
        },
      ]}
      marqueeItems={[
        {
          type: "text",
          text: "AI-Driven Roadmap",
        },
        {
          type: "text",
          text: "Deadline Tracking",
        },
        {
          type: "text",
          text: "Scholarship Insights",
        },
        {
          type: "text",
          text: "Stress Reduction",
        },
        {
          type: "text",
          text: "Expert Guidance",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="You aren't behind. You just need a better path."
      description={[
        "Every junior feels like they're falling behind because everyone else acts like they have it figured out. They don't. The college process is intentionally chaotic.",
        "Vela takes the noise and turns it into a clear, step-by-step roadmap tailored specifically to your profile, goals, and budget. It’s not just a tracker; it’s your relief from the noise.",
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Personalized Roadmap",
          tags: [
            "AI-Driven",
            "Tailored",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-paper-sheet-with-graph_23-2148210412.jpg",
        },
        {
          id: "f2",
          title: "Deadlines Tracker",
          tags: [
            "Organized",
            "Timely",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-paper-sheet-with-graph_23-2148210412.jpg",
        },
        {
          id: "f3",
          title: "Scholarship Finder",
          tags: [
            "Financial",
            "Aid",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-paper-sheet-with-graph_23-2148210412.jpg",
        },
      ]}
      title="Everything you need, nothing you don't."
      description="Vela organizes your college life so you can focus on being a student, not an administrative assistant."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "10h+",
          title: "Saved weekly",
          description: "Less manual tracking, more focus.",
          icon: Clock,
        },
        {
          id: "m2",
          value: "85%",
          title: "Less stress",
          description: "Reported anxiety reduction.",
          icon: Smile,
        },
        {
          id: "m3",
          value: "50+",
          title: "Schools tracked",
          description: "Unified dashboard view.",
          icon: BookOpen,
        },
      ]}
      title="Confidence starts here."
      description="Students using Vela save 10+ hours a week on college prep and feel significantly less stressed during the application season."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        {
          id: "p1",
          tag: "Monthly",
          price: "$15",
          period: "/mo",
          description: "For high school students ready to take control.",
          button: {
            text: "Start Free Trial",
          },
          featuresTitle: "Everything included:",
          features: [
            "Full AI Roadmap",
            "Unlimited Deadlines",
            "Scholarship Search",
            "Email Support",
          ],
        },
      ]}
      title="Start your roadmap today."
      description="Get immediate access to your personalized AI roadmap."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="Vela was the deep breath I needed. I stopped panicking about every deadline because Vela just told me what to do next."
      rating={5}
      author="Jordan M., High School Junior"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/young-blonde-charming-female-isolated_176474-79558.jpg",
          alt: "Student",
        },
        {
          src: "http://img.b2bpic.net/free-photo/troubled-teen-receiving-therapy-emotional-management-mental-health_482257-107632.jpg",
          alt: "Student",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-handsome-traveler-wearing-backpack-city_1262-3629.jpg",
          alt: "Student",
        },
        {
          src: "http://img.b2bpic.net/free-photo/cheerful-schoolboy-portrait_23-2147666930.jpg",
          alt: "Student",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-beautiful-cheerful-african-woman-student-smiling-laughing-sitting-cafe-books-magazines-lying-table-learning-education_176420-12412.jpg",
          alt: "Student",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      title="Ready to clear the fog?"
      description="Join thousands of students who traded panic for a plan. Sign up for early access to your roadmap."
      tag="Get Early Access"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Platform",
          items: [
            {
              label: "Features",
              href: "#features",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy",
              href: "#",
            },
            {
              label: "Terms",
              href: "#",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 Vela Prep"
      bottomRightText="College prep made human."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
