"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import { BookOpen, UserPlus } from "lucide-react";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Tutorly"
          navItems={[
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Sign In", href: "/signin" }}
          className="z-50"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Tutorly"
          description="Connect expert tutors with passionate learners. Flexible one-on-one sessions tailored to every learning style and pace."
          imageSrc="https://img.b2bpic.net/free-photo/front-view-woman-helping-kid-with-homework_23-2149610752.jpg"
          imageAlt="Students and tutors learning together"
          frameStyle="card"
          logoLineHeight={1.15}
        />
      </div>

      <div id="roles" data-section="roles">
        <FeatureCardThree
          title="Choose Your Role"
          description="Whether you're seeking knowledge or sharing expertise, Tutorly has the perfect fit for you."
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="two-items-tall-short"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "01",
              title: "I'm a Student",
              description: "Find qualified tutors in your subject, book sessions on your schedule, and track your progress with built-in learning tools.",
              imageSrc: "https://img.b2bpic.net/free-photo/positive-female-school-teacher-helping-curly-haired-girl-her-task_74855-16429.jpg",
              imageAlt: "Student learning experience"
            },
            {
              id: "02",
              title: "I'm a Tutor",
              description: "Build your tutoring business, manage your calendar, set your rates, and connect with eager learners worldwide.",
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-man-woman-studying_23-2149204773.jpg",
              imageAlt: "Tutor empowerment tools"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}