"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSizeMediumTitles"
        background="fluid"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "About",          id: "about"},
        {
          name: "Services",          id: "services"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Melton Powersports"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="Melton Powersports"
      description="Expert motorcycle repair and maintenance services. We keep your machine running at its peak performance."
      buttons={[
        {
          text: "Book Service",          href: "#contact"},
        {
          text: "View Pricing",          href: "#pricing"},
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/man-fixing-motorcycle-modern-workshop_158595-8083.jpg",          imageAlt: "Mechanic working"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/custom-motorcycle-standing-repair-shop_158595-8097.jpg",          imageAlt: "Garage tools"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/man-fixing-motorcycle-modern-workshop_158595-8131.jpg",          imageAlt: "Maintenance service"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-holding-digital-tablet_107420-95942.jpg",          imageAlt: "Diagnostic scan"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-workshop_329181-11839.jpg",          imageAlt: "Tuning engine"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/male-mechanics-working-car-shop-together_23-2150377023.jpg",          imageAlt: "Tire replacement"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Decades of Professional Expertise"
      description="At Melton Powersports, we treat every bike like it's our own. Our master mechanics provide comprehensive services ranging from routine oil changes to full engine overhauls using only the highest quality parts."
      imageSrc="http://img.b2bpic.net/free-photo/side-view-man-repairing-motorcycle_23-2150868340.jpg"
      imageAlt="Our expert team"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Engine Performance",          description: "Full diagnostics and engine rebuilds to restore factory power.",          imageSrc: "http://img.b2bpic.net/free-photo/brutal-tattooed-bearded-mechanic-specialist-repairs-car-engine-which-is-raised-hydraulic-lift-garage-service-station_613910-4863.jpg"},
        {
          title: "Brake Systems",          description: "Precision braking system maintenance for maximum rider safety.",          imageSrc: "http://img.b2bpic.net/free-photo/female-biker-repairing-motorbike_273609-5498.jpg"},
        {
          title: "Electrical Systems",          description: "Troubleshooting wiring and modern electronic control unit diagnostics.",          imageSrc: "http://img.b2bpic.net/free-photo/focused-rider-trying-reanimate-broken-motorbike_1262-17366.jpg"},
      ]}
      title="Comprehensive Repair Solutions"
      description="Whatever you ride, we ensure its safety and performance."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic",          tag: "Quick Check",          price: "$89",          period: "once",          description: "Essential safety inspection and oil change.",          button: {
            text: "Book Basic Package"},
          featuresTitle: "Includes:",          features: [
            "Oil change",            "Safety inspection",            "Tire pressure check"],
        },
        {
          id: "pro",          tag: "Full Service",          price: "$249",          period: "once",          description: "Comprehensive maintenance for long rides.",          button: {
            text: "Book Full Service"},
          featuresTitle: "Includes:",          features: [
            "Basic +",            "Brake service",            "Drive chain cleaning",            "Electrical check"],
        },
        {
          id: "elite",          tag: "Performance",          price: "$499",          period: "once",          description: "Deep performance tuning and overhaul.",          button: {
            text: "Book Performance Tune"},
          featuresTitle: "Includes:",          features: [
            "Pro +",            "Engine tuning",            "Suspension adjustment",            "Valve clearance"],
        },
      ]}
      title="Service Plans"
      description="Choose a plan that fits your motorcycle maintenance schedule."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",          value: "1200+",          title: "Bikes Repaired",          description: "Years of hands-on experience.",          imageSrc: "http://img.b2bpic.net/free-photo/mechanics-examining-car-engine_1170-1357.jpg"},
        {
          id: "2",          value: "98%",          title: "Customer Satisfaction",          description: "Proven feedback from local riders.",          imageSrc: "http://img.b2bpic.net/free-photo/back-view-people-talking-about-car_23-2150171274.jpg"},
        {
          id: "3",          value: "24h",          title: "Fast Turnaround",          description: "Typical service lead time.",          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-examining-bicycles_1170-2981.jpg"},
      ]}
      title="Our Track Record"
      description="Reliability and customer satisfaction speak for themselves."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          title: "Amazing Service",          quote: "Melton Powersports turned my bike around in a day. Runs better than new!",          name: "John Doe",          role: "Sportbike Rider",          imageSrc: "http://img.b2bpic.net/free-photo/awesome-blond-female-jeans-shirt-sitting-moto-scooter-green-park_613910-15442.jpg"},
        {
          id: "t2",          title: "Trusted Expert",          quote: "They diagnosed an electrical gremlin that 3 other shops couldn't find.",          name: "Jane Smith",          role: "Daily Commuter",          imageSrc: "http://img.b2bpic.net/free-photo/orange-hat-cute-young-guy-orange-tshirt-with-hat-pointing-with-finger-smile-his-face_140725-163626.jpg"},
        {
          id: "t3",          title: "Great Staff",          quote: "Extremely knowledgeable and very professional staff. Highly recommend.",          name: "Mike Ross",          role: "Collector",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-fashionable-biker-dressed-black-leather-jacket-with-sunglasses-holds-helmet-sitting-his-custom-made-retro-motorcycle-looking-camera_613910-18811.jpg"},
        {
          id: "t4",          title: "Top Tier Maintenance",          quote: "My bike has never shifted better. Elite service.",          name: "Lisa Wang",          role: "Track Enthusiast",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-woman-with-bicycle_23-2148627057.jpg"},
        {
          id: "t5",          title: "Fair Prices",          quote: "Honest pricing and excellent quality of work. My go-to shop.",          name: "Sam K.",          role: "Cruiser Rider",          imageSrc: "http://img.b2bpic.net/free-photo/blond-pilot-angry-expression_1194-3791.jpg"},
      ]}
      title="Rider Feedback"
      description="See why our customers trust us with their machines."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",          title: "Do I need an appointment?",          content: "Yes, we recommend booking an appointment to ensure prompt service."},
        {
          id: "f2",          title: "Do you work on all motorcycle brands?",          content: "We specialize in most major Japanese and European brands."},
        {
          id: "f3",          title: "How long will my repair take?",          content: "Most routine maintenance can be completed in 1-2 business days."},
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common repair questions."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Ready to Get Started?"
      description="Send us a message and our team will get back to you shortly to schedule your maintenance."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
        },
        {
          name: "bike",          type: "text",          placeholder: "Bike Make/Model",          required: true,
        },
      ]}
      textarea={{
        name: "message",        placeholder: "Describe your issue...",        rows: 4,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/nobody-empty-waiting-room-lobby-with-desktop-reception-helping-patients-with-medical-insurance-attend-checkup-visit-appointment-waiting-area-with-counter-hospital_482257-47691.jpg"
      imageAlt="Our service desk"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Services",              href: "#services"},
            {
              label: "Pricing",              href: "#pricing"},
          ],
        },
        {
          items: [
            {
              label: "About",              href: "#about"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
      ]}
      logoText="Melton Powersports"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}