"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import { CheckCircle, Phone, Music, MapPin, Star } from 'lucide-react';

export default function MStudioLanding() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="M - Studio"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Why Us", id: "why-us" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Call Now: 0743 444 111",            href: "tel:+255743444111"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="M - STUDIO"
          description="Professional Music Recording in Zanzibar. Create, record & produce your sound in a 5-star studio located in the peaceful, creative heart of Jambiani."
          background={{ variant: "circleGradient" }}
          buttons={[
            { text: "Call Now: 0743 444 111", href: "tel:+255743444111" },
            { text: "Book Studio Time", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          layoutOrder="default"
          imageSrc="http://img.b2bpic.net/free-photo/african-american-audio-expert-adding-sound-effects-tracks-post-production_482257-122072.jpg?_wi=1"
          imageAlt="Professional recording studio with modern equipment"
          mediaAnimation="opacity"
          frameStyle="card"
          ariaLabel="M - Studio hero section with call to action"
        />
      </div>

      <div id="trust-signals" data-section="trust-signals">
        <TestimonialAboutCard
          tag="Why Artists Choose Us"
          tagIcon={Star}
          title="5.0 Rated Recording Studio • Open 24 Hours • Located in Jambiani"
          description="⭐ 11 Five-Star Reviews"
          subdescription="Trusted by local and international artists for professional, welcoming recording sessions"
          icon={CheckCircle}
          imageSrc="http://img.b2bpic.net/free-photo/man-with-dreads-representing-rastafari-movement_23-2151532076.jpg?_wi=1"
          imageAlt="M - Studio peaceful location in Jambiani, Zanzibar"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="Trust signals and studio credentials section"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardNineteen
          tag="Services"
          title="Professional Recording Services"
          description="From individual vocal sessions to full album production, M - Studio offers comprehensive recording and production services designed for artists of all levels."
          features={[
            {
              id: 1,
              tag: "Core Service",              title: "Music Recording",              subtitle: "Professional vocal and instrument recording",              description: "High-quality recording sessions in our acoustically treated studio. Whether you're a solo artist or full band, we capture pristine audio with professional-grade equipment and experienced engineers.",              imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-headphones-sings-into-microphone-dark-room_169016-17273.jpg?_wi=1",              imageAlt: "Professional vocal recording session"
            },
            {
              id: 2,
              tag: "Production",              title: "Album Production",              subtitle: "Full production from concept to master",              description: "Complete album production services including arrangement, tracking, overdubs, and final mastering. Work with our talented producers to bring your artistic vision to life.",              imageSrc: "http://img.b2bpic.net/free-photo/mixer-producer-develops-audio-by-editing-recordings-integrating-sounds_482257-121986.jpg?_wi=1",              imageAlt: "Music production and arrangement session"
            },
            {
              id: 3,
              tag: "Post-Production",              title: "Mixing & Mastering",              subtitle: "Professional final mix and master",              description: "Transform your raw recordings into polished, radio-ready tracks. Our mixing and mastering engineers ensure your music sounds its best across all platforms.",              imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-processing-mixing-sounds-audio-console_482257-122250.jpg?_wi=1",              imageAlt: "Audio mixing and mastering workstation"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          mediaAnimation="blur-reveal"
          ariaLabel="Services section with recording, production, and mixing offerings"
        />
      </div>

      <div id="why-us" data-section="why-us">
        <ProductCardTwo
          title="Why Choose M - Studio Company"
          description="We combine technical excellence with genuine warmth to create an environment where creativity flourishes."
          tag="Studio Advantages"
          products={[
            {
              id: "1",              brand: "M - Studio",              name: "5-Star Rated Excellence",              price: "Proven Quality",              rating: 5,
              reviewCount: "11 Reviews",              imageSrc: "http://img.b2bpic.net/free-photo/man-with-dreads-representing-rastafari-movement_23-2151532076.jpg?_wi=2",              imageAlt: "5-star rated studio"
            },
            {
              id: "2",              brand: "M - Studio",              name: "Welcoming Environment",              price: "Warm Creative Space",              rating: 5,
              reviewCount: "Verified",              imageSrc: "http://img.b2bpic.net/free-photo/african-american-audio-expert-adding-sound-effects-tracks-post-production_482257-122072.jpg?_wi=2",              imageAlt: "Welcoming recording studio environment"
            },
            {
              id: "3",              brand: "M - Studio",              name: "Talented Producers",              price: "Expert Collaboration",              rating: 5,
              reviewCount: "Experienced",              imageSrc: "http://img.b2bpic.net/free-photo/mixer-producer-develops-audio-by-editing-recordings-integrating-sounds_482257-121986.jpg?_wi=2",              imageAlt: "Professional music producer at work"
            },
            {
              id: "4",              brand: "M - Studio",              name: "Peaceful Location",              price: "Jambiani, Zanzibar",              rating: 5,
              reviewCount: "24/7 Open",              imageSrc: "http://img.b2bpic.net/free-photo/man-with-dreads-representing-rastafari-movement_23-2151532076.jpg?_wi=3",              imageAlt: "Peaceful studio location"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Why choose M - Studio benefits section"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Clients Say"
          description="Hear from artists who've recorded at M - Studio"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",              name: "Sarah Mwamba, Singer",              date: "Date: January 2025",              title: "Amazing talent, welcoming energy",              quote: "I felt at home from the moment I walked in. The team's professionalism combined with genuine warmth made my recording session unforgettable. My vocals have never sounded better!",              tag: "Vocal Recording",              avatarSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-bearded-hipster-jacket-red-sweater-dark-background_613910-1834.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-headphones-sings-into-microphone-dark-room_169016-17273.jpg?_wi=2",              imageAlt: "Sarah's recording session"
            },
            {
              id: "2",              name: "James Kidosho, Rapper",              date: "Date: December 2024",              title: "Great vibe, professional results",              quote: "The producers here really understand the creative process. They didn't just record me—they collaborated with me to make my vision even better. Highly recommend!",              tag: "Hip-Hop Production",              avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-musician-wearing-headphones_23-2150206741.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/mixer-producer-develops-audio-by-editing-recordings-integrating-sounds_482257-121986.jpg?_wi=3",              imageAlt: "James's production session"
            },
            {
              id: "3",              name: "Amina Hassan, Vocalist",              date: "Date: November 2024",              title: "Professional, warm, creative",              quote: "Hakunana matata sio tu maneno—it's how they make you feel. My album sounds incredible, and I can't wait to record my next project here!",              tag: "Album Production",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-young-woman-holding-guitar_23-2148229333.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/african-american-audio-expert-adding-sound-effects-tracks-post-production_482257-122072.jpg?_wi=3",              imageAlt: "Amina's album session"
            },
            {
              id: "4",              name: "David Chen, International Artist",              date: "Date: October 2024",              title: "World-class studio in Zanzibar",              quote: "I traveled from overseas specifically to record here. The combination of top-tier equipment, skilled engineers, and the peaceful Zanzibar location was perfect for my project.",              tag: "International Artist",              avatarSrc: "http://img.b2bpic.net/free-photo/young-concentrated-hacker-work-man-headphones-looking-laptop-screen-reading-hacking-computer-concept_74855-24717.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/man-with-dreads-representing-rastafari-movement_23-2151532076.jpg?_wi=4",              imageAlt: "David's international session"
            },
            {
              id: "5",              name: "Zuri Okonkwo, Producer",              date: "Date: September 2024",              title: "Collaborative excellence",              quote: "Working with M - Studio's production team elevated my entire project. They bring technical expertise, creative insight, and genuine care for the music.",              tag: "Music Producer",              avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-musicians-working-studio_23-2150265056.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-processing-mixing-sounds-audio-console_482257-122250.jpg?_wi=2",              imageAlt: "Zuri's production collaboration"
            },
            {
              id: "6",              name: "Lisa Patel, Podcaster",              date: "Date: August 2024",              title: "Perfect for voice work",              quote: "I came to record podcast episodes and vocals. The acoustic treatment is impeccable, and the team's attention to detail ensured crystal-clear audio. Five stars!",              tag: "Podcast Recording",              avatarSrc: "http://img.b2bpic.net/free-photo/expressive-man-using-smartphone-selfie-stick-shoot-video_482257-124670.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/african-american-audio-expert-adding-sound-effects-tracks-post-production_482257-122072.jpg?_wi=4",              imageAlt: "Lisa's podcast recording"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          ariaLabel="Client testimonials carousel section"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Record?"
          tagIcon={Phone}
          title="Start Your Project Today"
          description="Book your studio session now or call us directly. We're open 24 hours and ready to bring your musical vision to life."
          buttons={[
            { text: "Call: 0743 444 111", href: "tel:+255743444111" },
            { text: "WhatsApp: +255 743 444 111", href: "https://wa.me/255743444111" }
          ]}
          background={{ variant: "circleGradient" }}
          useInvertedBackground={false}
          ariaLabel="Contact and booking call-to-action section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="M - Studio"
          copyrightText="© 2025 M - Studio Company. Professional Recording in Zanzibar."
          socialLinks={[
            { icon: Music, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Phone, href: "tel:+255743444111", ariaLabel: "Call us" },
            { icon: MapPin, href: "https://maps.google.com/?q=Jambiani+Zanzibar", ariaLabel: "Location" }
          ]}
          ariaLabel="Site footer with contact information"
        />
      </div>
    </ThemeProvider>
  );
}
