"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Award, Users, Wrench } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="grid"
        cardStyle="gradient-radial"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Services",          id: "services"},
        {
          name: "Pricing",          id: "pricing"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Kiyo's Service"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "gradient-bars"}}
      title="Precision Japanese Automotive Care"
      description="Expert diagnostics, maintenance, and repairs for your Japanese vehicle. Trust Kiyo's for authentic parts and unmatched craftsmanship."
      tag="Trusted Auto Specialists"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-servicing-car-engine_1170-1253.jpg",          imageAlt: "japanese car in modern garage"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171287.jpg",          imageAlt: "automotive maintenance tools clean"}
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="5/5 Star Service Rating"
      tagIcon={Wrench}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",          icon: Wrench,
          title: "Vehicles Serviced",          value: "15,000+"},
        {
          id: "m2",          icon: Award,
          title: "Years Experience",          value: "20+"},
        {
          id: "m3",          icon: Users,
          title: "Happy Clients",          value: "99%"},
      ]}
      title="Our Track Record"
      description="Excellence in every turn."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",          title: "Advanced Diagnostics",          author: "Kiyo's",          description: "Cutting-edge software to identify issues accurately.",          tags: [
            "Precision"],
          imageSrc: "http://img.b2bpic.net/free-photo/hands-mechanic-using-diagnostic-tool_1170-1188.jpg"},
        {
          id: "f2",          title: "Preventive Maintenance",          author: "Kiyo's",          description: "Oil changes, filters, and scheduled tune-ups.",          tags: [
            "Reliability"],
          imageSrc: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881298.jpg"},
        {
          id: "f3",          title: "Performance Tuning",          author: "Kiyo's",          description: "Customized performance enhancements and adjustments.",          tags: [
            "Engine"],
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-checking-car_23-2150171237.jpg"},
        {
          id: "f4",          title: "Brake System Repair",          author: "Kiyo's",          description: "Professional inspection and replacement for safety.",          tags: [
            "Safety"],
          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-using-laptop-while-servicing-car-engine_1170-1295.jpg"},
        {
          id: "f5",          title: "Tire Alignment",          author: "Kiyo's",          description: "Precision alignment for smooth handling.",          tags: [
            "Maintenance"],
          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-using-laptop-while-servicing-car-engine_1170-1304.jpg"},
      ]}
      title="Comprehensive Services"
      description="Full-spectrum maintenance packages tailored specifically for Japanese models."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      plans={[
        {
          id: "p1",          price: "$89",          name: "Basic Inspection",          buttons: [
            {
              text: "Book Now",              href: "#contact"},
          ],
          features: [
            "Full diagnostic",            "Brake check",            "Fluid check"],
        },
        {
          id: "p2",          price: "$189",          name: "Full Tune-Up",          buttons: [
            {
              text: "Book Now",              href: "#contact"},
          ],
          features: [
            "Oil filter change",            "Air filter",            "Engine clean"],
        },
        {
          id: "p3",          price: "$350",          name: "Comprehensive Care",          buttons: [
            {
              text: "Book Now",              href: "#contact"},
          ],
          features: [
            "Full service",            "Electrical check",            "Road test"],
        },
      ]}
      title="Simple Pricing"
      description="Transparent costs for professional service."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "John Doe",          handle: "@johndoe",          testimonial: "Best service in town for my Honda.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-9486.jpg"},
        {
          id: "t2",          name: "Jane Smith",          handle: "@janesmith",          testimonial: "Kiyo's team is honest and fast.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-holding-keys-against-white-wall_23-2148182950.jpg"},
        {
          id: "t3",          name: "Mike Ross",          handle: "@mikeross",          testimonial: "Authentic parts and great care.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg"},
        {
          id: "t4",          name: "Sara Lee",          handle: "@saralee",          testimonial: "Reliable experts I trust fully.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-phone-car-showroom_1303-21397.jpg"},
        {
          id: "t5",          name: "Chris Wu",          handle: "@chriswu",          testimonial: "Excellent diagnostics on my Lexus.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/career-success-office-concert-senior_1262-2793.jpg"},
      ]}
      showRating={true}
      title="Client Stories"
      description="Why owners choose Kiyo's."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "Do you use OEM parts?",          content: "Yes, we prioritize authentic manufacturer parts."},
        {
          id: "q2",          title: "How long does a service take?",          content: "Most routine services are done same-day."},
        {
          id: "q3",          title: "Do you offer a warranty?",          content: "All repairs are backed by a 1-year warranty."},
      ]}
      title="Common Questions"
      description="Everything you need to know about our service."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "gradient-bars"}}
      tag="Contact Us"
      title="Get a Free Quote"
      description="Let's keep your vehicle running like new."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Kiyo's Japanese Car Service"
      columns={[
        {
          title: "Services",          items: [
            {
              label: "Diagnostics",              href: "#services"},
            {
              label: "Tune-ups",              href: "#services"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
      ]}
      copyrightText="© 2024 Kiyo's Service"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
