"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SplitAbout from '@/components/sections/about/SplitAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, UserPlus, Search, Calendar, TrendingUp, Star } from "lucide-react";

export default function AboutPage() {
  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: "Home", id: "/" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Sign In", href: "/signin" }}
          className="z-50"
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <SplitAbout
          title="How Tutorly Works"
          description="Four simple steps to transform your learning journey."
          tag="Process"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          imagePosition="right"
          imageSrc="https://img.b2bpic.net/free-photo/front-view-woman-helping-kid-with-homework_23-2149610752.jpg"
          imageAlt="Tutoring process visualization"
          bulletPoints={[
            {
              title: "Sign Up",
              description: "Create your profile as a student or tutor in minutes with basic information.",
              icon: UserPlus
            },
            {
              title: "Browse & Match",
              description: "Students find tutors by subject and expertise. Tutors showcase their qualifications.",
              icon: Search
            },
            {
              title: "Book Sessions",
              description: "Schedule flexible one-on-one sessions or recurring lessons that fit your timeline.",
              icon: Calendar
            },
            {
              title: "Learn & Grow",
              description: "Connect via video, use collaborative tools, track progress, and achieve your goals.",
              icon: TrendingUp
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Tutorly by the Numbers"
          description="Join a thriving community of learners and educators"
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",
              value: "50K+",
              description: "Active Learners"
            },
            {
              id: "2",
              value: "8K+",
              description: "Expert Tutors"
            },
            {
              id: "3",
              value: "500K+",
              description: "Sessions Completed"
            },
            {
              id: "4",
              value: "4.9/5",
              description: "Average Rating"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Join thousands of students and tutors transforming education on Tutorly"
          cardTag="Trusted by learners everywhere"
          cardTagIcon={Star}
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Alex Johnson",
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",
              imageAlt: "Alex Johnson"
            },
            {
              id: "2",
              name: "Maya Patel",
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-face-portrait-wearing-suit_53876-148135.jpg",
              imageAlt: "Maya Patel"
            },
            {
              id: "3",
              name: "James Chen",
              imageSrc: "https://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5367.jpg",
              imageAlt: "James Chen"
            },
            {
              id: "4",
              name: "Sofia Rodriguez",
              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",
              imageAlt: "Sofia Rodriguez"
            },
            {
              id: "5",
              name: "Michael Adams",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",
              imageAlt: "Michael Adams"
            },
            {
              id: "6",
              name: "Emma Wilson",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-caucasian-unshaved-man-eyeglasses-looking-camera-with-sincere-smile-isolated-gray_171337-630.jpg",
              imageAlt: "Emma Wilson"
            }
          ]}
        />
      </div>

      <FooterMedia
        imageSrc="https://img.b2bpic.net/free-photo/cheerful-teenager-tries-explain-material-younger-brother-who-sits-back-camera_273609-28612.jpg"
        imageAlt="Tutoring community"
        logoText="Tutorly"
        copyrightText="© 2025 Tutorly. All rights reserved."
        columns={[
          {
            title: "Product",
            items: [
              { label: "For Students", href: "/students" },
              { label: "For Tutors", href: "/tutors" },
              { label: "Pricing", href: "/pricing" },
              { label: "How It Works", href: "/about" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Blog", href: "/blog" },
              { label: "Careers", href: "/careers" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Terms of Service", href: "/terms" },
              { label: "Privacy Policy", href: "/privacy" },
              { label: "Cookie Policy", href: "/cookies" },
              { label: "Security", href: "/security" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}