"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 FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="large"
        background="blurBottom"
        cardStyle="gradient-bordered"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Services",
          id: "services",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Mex Music Man"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      background={{
        variant: "radial-gradient",
      }}
      logoText="Bring Mexico to Your Event"
      description="Authentic, unforgettable live music for weddings, corporate events, and parties in Melbourne. Led by Alejandro."
      buttons={[
        {
          text: "Book Now",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/young-man-playing-guitar-music-local-event_23-2149188071.jpg?_wi=1"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "The Lone Mariachi",
          description: "Solo guitar and vocals; classical, flamenco, Latino, and rock classics; perfect for any event.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-making-music_23-2151169690.jpg",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/man-red-t-shirt-playing-guitar-looking-happy_176474-61230.jpg",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-playing-guitar-music-local-event_23-2149188071.jpg?_wi=2",
          imageAlt: "solo mariachi musician performance",
        },
        {
          title: "Mexican Music Man",
          description: "Kids' parties, roving and stage entertainment; interactive instruments; all ages.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/colorful-piano-kids-orange-background_23-2148201801.jpg",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/festa-junina-cute-young-guy-straw-hat-with-retro-radio-colorful-flags-typing-phone_140725-165231.jpg",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/guy-with-acoustic-guitar-sings-friends-have-fun-rooftop-party-with-decorative-colored-light-bulbs_146671-14569.jpg",
          imageAlt: "solo mariachi musician performance",
        },
        {
          title: "The Lone Mariachi & The Silver Masked Men",
          description: "A full mariachi troupe; corporate events, weddings, festivals, launches.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/side-view-family-listening-music_23-2149734974.jpg",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/musicians-stage-concert_1321-452.jpg",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/young-traveler-man-black-t-shirt-summer-hat-holding-inflatable-ring-happy-positive-smiling-cheerfully-standing-white-wall_141793-50323.jpg?_wi=1",
          imageAlt: "solo mariachi musician performance",
        },
        {
          title: "Sin Frontera Band",
          description: "Authentic Mexican trio; vibrant indoor/outdoor performances; corporate, festivals, weddings, parties.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mexican-party-decoration-with-food_23-2149317340.jpg?_wi=1",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/wedding-couple-dancing-their-first-dance_1303-10481.jpg",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/expressive-middle-aged-woman-posing_344912-2834.jpg?_wi=1",
          imageAlt: "solo mariachi musician performance",
        },
      ]}
      showStepNumbers={false}
      title="Our Fiesta Services"
      description="Professional live music entertainment tailored for your special occasion."
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="About Alejandro"
      description="Born in Tijuana, Alejandro brings over 15 years of professional experience, delivering music that tells a story and connects cultures through every note."
      imageSrc="http://img.b2bpic.net/free-photo/young-traveler-man-black-t-shirt-summer-hat-holding-inflatable-ring-happy-positive-smiling-cheerfully-standing-white-wall_141793-50323.jpg?_wi=2"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          title: "Incredible!",
          quote: "The most professional musician we have ever hired.",
          name: "Sarah Miller",
          role: "Event Coordinator",
          imageSrc: "http://img.b2bpic.net/free-photo/expressive-middle-aged-woman-posing_344912-2834.jpg?_wi=2",
        },
        {
          id: "t2",
          title: "So Fun!",
          quote: "Alejandro made our wedding unforgettable.",
          name: "James & Emma",
          role: "Newlyweds",
          imageSrc: "http://img.b2bpic.net/free-photo/long-distance-relationship-partners-meeting_23-2149338627.jpg",
        },
        {
          id: "t3",
          title: "Kids Loved It",
          quote: "The interactive music session was perfect.",
          name: "Tanya V.",
          role: "Parent",
          imageSrc: "http://img.b2bpic.net/free-photo/big-family-with-three-children-celebrating-christmas-home-festive-dinner-fireplace-xmas-tree-parent-kids-eating-fire-place-decorated-room-child-lighting-advent-wreath-candle_493343-30100.jpg",
        },
        {
          id: "t4",
          title: "Professional Band",
          quote: "The full troupe was absolutely mesmerizing.",
          name: "Mark D.",
          role: "Corporate Lead",
          imageSrc: "http://img.b2bpic.net/free-photo/couple-with-beer-having-fun-roof_23-2147784721.jpg",
        },
        {
          id: "t5",
          title: "Authentic Vibe",
          quote: "Truly captured the spirit of Mexico.",
          name: "Jessica R.",
          role: "Festival Organiser",
          imageSrc: "http://img.b2bpic.net/free-photo/toast-you-dear-colleague_637285-9641.jpg",
        },
      ]}
      title="Fiesta Feedback"
      description="Hear what our happy clients have to say about the music."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Music in Numbers"
      tag="Expertise"
      metrics={[
        {
          id: "m1",
          value: "15+",
          description: "Years of Professional Music",
        },
        {
          id: "m2",
          value: "500+",
          description: "Successful Events",
        },
        {
          id: "m3",
          value: "100%",
          description: "Customer Satisfaction",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "Do you travel?",
          content: "Yes, we cover all of Melbourne and surrounding regions.",
        },
        {
          id: "f2",
          title: "Can you handle big weddings?",
          content: "Absolutely, our troupe is built for large events.",
        },
        {
          id: "f3",
          title: "What equipment is needed?",
          content: "We bring our own sound equipment suitable for your event size.",
        },
      ]}
      title="Common Questions"
      description="Have questions? We have answers for your fiesta planning."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Book Your Event"
      description="Ready to bring the fiesta to your event? Send us a message today."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
        },
        {
          name: "email",
          type: "email",
          placeholder: "Email Address",
        },
        {
          name: "phone",
          type: "tel",
          placeholder: "Phone Number",
        },
      ]}
      textarea={{
        name: "details",
        placeholder: "Tell us about your event...",
      }}
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-mexican-party-decoration-with-food_23-2149317340.jpg?_wi=2"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Mex Music Man"
      leftLink={{
        text: "Terms of Service",
        href: "#",
      }}
      rightLink={{
        text: "Privacy Policy",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
