"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Facebook, Heart, Instagram, MapPin, MessageCircle, Scissors, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="medium"
        background="fluid"
        cardStyle="outline"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Beranda",          id: "#hero"},
        {
          name: "Layanan",          id: "#layanan"},
        {
          name: "Harga",          id: "#harga"},
        {
          name: "Tentang Kami",          id: "#tentangkami"},
        {
          name: "Tim Kami",          id: "#timkami"},
        {
          name: "Testimoni",          id: "#testimoni"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Hubungi Kami",          id: "#hubungi"},
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4sr3c9"
      logoAlt="NR Salon Logo"
      brandName="NR Salon"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitTestimonial
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient"}}
      title="NR Salon: Transformasi Kecantikan Anda Dimulai Di Sini"
      description="Temukan pelayanan salon terbaik dengan sentuhan profesional dari para ahli kami. NR Salon, destinasi utama untuk gaya rambut, perawatan kulit, dan relaksasi."
      testimonials={[
        {
          name: "Siti Rahmawati",          handle: "@sitirahma",          testimonial: "Pelayanan di NR Salon selalu memuaskan! Rambut saya jadi sehat dan tertata rapi. Sangat merekomendasikan!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-long-hair_1149-1636.jpg",          imageAlt: "Siti Rahmawati"},
        {
          name: "Budi Santoso",          handle: "@budisantoso",          testimonial: "Potongan rambut di sini selalu pas dengan gaya saya. Suasana salon juga nyaman, bikin betah.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-dark-hair-beard_1149-1833.jpg",          imageAlt: "Budi Santoso"},
        {
          name: "Dewi Anggraini",          handle: "@dewia",          testimonial: "Perawatan wajahnya luar biasa! Kulit terasa segar dan cerah. NR Salon memang the best!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-laughing-close-up-studio-shot_1149-1869.jpg",          imageAlt: "Dewi Anggraini"},
        {
          name: "Fajar Pratama",          handle: "@fajar_p",          testimonial: "Selalu puas dengan hasil styling di NR Salon. Stylistnya sangat profesional dan up-to-date.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-model-suit_1149-2041.jpg",          imageAlt: "Fajar Pratama"},
        {
          name: "Indah Permata",          handle: "@indahp",          testimonial: "NR Salon memberikan pengalaman relaksasi yang sempurna. Dari ujung rambut hingga ujung kaki, semuanya terawat dengan baik.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/charming-woman-smiling_1149-2169.jpg",          imageAlt: "Indah Permata"},
      ]}
      tag="Kecantikan & Gaya"
      tagIcon={Sparkles}
      buttons={[
        {
          text: "Lihat Layanan Kami",          href: "#layanan"},
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/young-woman-with-long-hair_1149-1636.jpg",          alt: "Siti Rahmawati"},
        {
          src: "http://img.b2bpic.net/free-photo/handsome-man-dark-hair-beard_1149-1833.jpg",          alt: "Budi Santoso"},
        {
          src: "http://img.b2bpic.net/free-photo/happy-girl-laughing-close-up-studio-shot_1149-1869.jpg",          alt: "Dewi Anggraini"},
        {
          src: "http://img.b2bpic.net/free-photo/handsome-man-model-suit_1149-2041.jpg",          alt: "Fajar Pratama"},
        {
          src: "http://img.b2bpic.net/free-photo/charming-woman-smiling_1149-2169.jpg",          alt: "Indah Permata"},
      ]}
      avatarText="Klien Kami Menyukainya"
      imageSrc="http://img.b2bpic.net/free-photo/hairdresser-applying-color-to-womans-hair_23-2150338785.jpg"
      imageAlt="Wanita sedang menata rambut di salon modern"
      mediaAnimation="slide-up"
      marqueeItems={[
        {
          type: "text",          text: "Gaya Terbaru"},
        {
          type: "text-icon",          text: "Perawatan Premium",          icon: Sparkles,
        },
        {
          type: "text",          text: "Kecantikan Terpercaya"},
        {
          type: "text-icon",          text: "Stylist Berpengalaman",          icon: Scissors,
        },
        {
          type: "text",          text: "Kulit Sehat & Berseri"},
        {
          type: "text-icon",          text: "Kuku Indah",          icon: Heart,
        },
      ]}
    />
  </div>

  <div id="tentangkami" data-section="tentangkami">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",          content: "Tentang Kami"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148506323.jpg",          alt: "Interior desain NR Salon"},
        {
          type: "text",          content: "NR Salon"},
      ]}
      buttons={[
        {
          text: "Jelajahi Kami",          href: "#"},
      ]}
    />
  </div>

  <div id="layanan" data-section="layanan">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",          title: "Potongan Rambut & Styling",          descriptions: [
            "Dapatkan potongan rambut terbaru yang sesuai dengan bentuk wajah dan gaya Anda.",            "Styling profesional untuk acara khusus atau sehari-hari."],
          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-trimming-clients-hair_23-2149590740.jpg",          imageAlt: "Wanita mendapatkan potongan rambut di salon"},
        {
          id: "f2",          title: "Pewarnaan & Perawatan Rambut",          descriptions: [
            "Pewarnaan rambut trendi dari balayage hingga highlights.",            "Perawatan rambut intensif untuk rambut sehat dan berkilau."],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-brushing-womans-hair_23-2149021832.jpg",          imageAlt: "Pewarnaan rambut di salon"},
        {
          id: "f3",          title: "Manicure & Pedicure",          descriptions: [
            "Perawatan kuku tangan dan kaki lengkap untuk keindahan maksimal.",            "Berbagai pilihan kutek gel dan nail art yang menarik."],
          imageSrc: "http://img.b2bpic.net/free-photo/hands-getting-nail-polish-done_23-2149153835.jpg",          imageAlt: "Manicure di salon"},
      ]}
      title="Layanan Premium Kami"
      description="Dari gaya rambut trendi hingga perawatan kulit mewah, kami hadir untuk memenuhi setiap kebutuhan kecantikan Anda dengan sentuhan ahli."
    />
  </div>

  <div id="galeri" data-section="galeri">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          name: "Potongan Bob Klasik",          price: "Mulai Rp 150.000",          variant: "Rambut Wanita",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-dark-hair-studio_1149-2016.jpg",          imageAlt: "Model potongan rambut bob klasik"},
        {
          id: "p2",          name: "Gaya Rambut Pesta",          price: "Mulai Rp 250.000",          variant: "Rambut Wanita",          imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-hair-style_1149-1985.jpg",          imageAlt: "Gaya rambut wanita untuk pesta"},
        {
          id: "p3",          name: "Pewarnaan Balayage",          price: "Mulai Rp 450.000",          variant: "Rambut Warna",          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-balayage-hair_23-2149021840.jpg",          imageAlt: "Rambut dengan pewarnaan balayage"},
        {
          id: "p4",          name: "Potongan Rambut Pria",          price: "Mulai Rp 100.000",          variant: "Rambut Pria",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-modern-haircut_23-2149306915.jpg",          imageAlt: "Model potongan rambut pria modern"},
        {
          id: "p5",          name: "Manicure Gel",          price: "Mulai Rp 85.000",          variant: "Kuku",          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-manicure-closeup_23-2149202111.jpg",          imageAlt: "Kuku tangan dengan manicure gel merah"},
        {
          id: "p6",          name: "Facial Glowing",          price: "Mulai Rp 300.000",          variant: "Perawatan Wajah",          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-face-mask-beauty-salon_23-2149040003.jpg",          imageAlt: "Wanita mendapatkan facial treatment"},
      ]}
      title="Galeri Karya Kami"
      description="Lihat beberapa hasil transformasi dan gaya yang telah kami ciptakan untuk klien-klien kami yang berharga."
    />
  </div>

  <div id="harga" data-section="harga">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic-hair",          title: "Paket Rambut Dasar",          price: "Rp 250.000",          period: "/ kunjungan",          features: [
            "Potongan Rambut",            "Cuci & Blow",            "Perawatan Kondisioner"],
          button: {
            text: "Pesan Sekarang",            href: "#hubungi"},
          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-trimming-clients-hair_23-2149590740.jpg",          imageAlt: "Peralatan salon"},
        {
          id: "premium-nails",          title: "Paket Kuku Premium",          price: "Rp 180.000",          period: "/ kunjungan",          features: [
            "Manicure & Pedicure",            "Pijat Tangan & Kaki",            "Kutek Gel Tahan Lama"],
          button: {
            text: "Pesan Sekarang",            href: "#hubungi"},
          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-manicure-closeup_23-2149202111.jpg",          imageAlt: "Wanita sedang manicure"},
        {
          id: "luxury-facial",          title: "Paket Facial Mewah",          price: "Rp 400.000",          period: "/ kunjungan",          features: [
            "Facial Detoksifikasi",            "Masker Kolagen",            "Pijat Wajah Relaksasi"],
          button: {
            text: "Pesan Sekarang",            href: "#hubungi"},
          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-face-mask-beauty-salon_23-2149040003.jpg",          imageAlt: "Wanita mendapatkan facial"},
      ]}
      title="Daftar Harga Layanan"
      description="Pilih paket atau layanan satuan yang sesuai dengan gaya dan anggaran Anda. Kami menawarkan berbagai pilihan untuk kebutuhan kecantikan Anda."
    />
  </div>

  <div id="timkami" data-section="timkami">
      <TeamCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      team={[
        {
          id: "t1",          name: "Melinda Wijaya",          role: "Stylist Senior & Penata Warna",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-asian-woman-smiling_1149-1616.jpg",          imageAlt: "Melinda Wijaya"},
        {
          id: "t2",          name: "Rizky Firmansyah",          role: "Stylist & Perawatan Rambut Pria",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-asian-man-smiling_1149-1818.jpg",          imageAlt: "Rizky Firmansyah"},
        {
          id: "t3",          name: "Putri Lestari",          role: "Terapis Kecantikan & Nail Artist",          imageSrc: "http://img.b2bpic.net/free-photo/young-asian-woman-portrait_1149-1905.jpg",          imageAlt: "Putri Lestari"},
      ]}
      title="Tim Profesional Kami"
      description="NR Salon diperkuat oleh para stylist dan terapis berpengalaman yang berdedikasi untuk memberikan hasil terbaik dan pengalaman tak terlupakan untuk Anda."
    />
  </div>

  <div id="testimoni" data-section="testimoni">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "Ayu Lestari",          role: "Pengusaha",          company: "Jakarta Barat",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-asian-woman-casual-clothing_1149-1662.jpg",          imageAlt: "Ayu Lestari"},
        {
          id: "t2",          name: "Doni Setiawan",          role: "Karyawan Swasta",          company: "Jakarta Pusat",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/asian-man-casual-clothing_1149-1800.jpg",          imageAlt: "Doni Setiawan"},
        {
          id: "t3",          name: "Nenek Sri",          role: "Pensiunan",          company: "Sukabumi Utara",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/elderly-asian-woman-smiling_1149-2100.jpg",          imageAlt: "Nenek Sri"},
        {
          id: "t4",          name: "Rina Kartika",          role: "Desainer Grafis",          company: "Jakarta Selatan",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/asian-woman-smiling_1149-1960.jpg",          imageAlt: "Rina Kartika"},
        {
          id: "t5",          name: "Yoga Pratama",          role: "Mahasiswa",          company: "Jakarta Barat",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-asian-man-smiling_1149-1780.jpg",          imageAlt: "Yoga Pratama"},
      ]}
      title="Apa Kata Klien Kami"
      description="Kepuasan Anda adalah prioritas utama kami. Simak testimoni jujur dari klien-klien setia NR Salon yang telah merasakan langsung kualitas layanan kami."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "Bagaimana cara membuat janji temu?",          content: "Anda dapat membuat janji temu melalui telepon, WhatsApp, atau langsung datang ke salon kami di Jl. Bumi Indah No.5, RT.8/RW.9, Sukabumi Utara, Kec. Kb. Jeruk, Kota Jakarta Barat, Daerah Khusus Ibukota Jakarta 11540, selama jam operasional."},
        {
          id: "q2",          title: "Apa saja layanan yang tersedia?",          content: "Kami menawarkan berbagai layanan mulai dari potongan rambut, pewarnaan, perawatan rambut, manicure, pedicure, hingga facial."},
        {
          id: "q3",          title: "Apakah ada diskon atau promosi khusus?",          content: "Ya, kami sering mengadakan promosi. Silakan ikuti media sosial kami atau tanyakan langsung kepada staf kami untuk informasi terbaru."},
        {
          id: "q4",          title: "Produk apa yang Anda gunakan?",          content: "Kami hanya menggunakan produk perawatan rambut dan kecantikan berkualitas tinggi dari merek-merek terkemuka untuk memastikan hasil terbaik."},
        {
          id: "q5",          title: "Bisakah saya mengubah atau membatalkan janji temu?",          content: "Anda dapat mengubah atau membatalkan janji temu dengan menghubungi kami setidaknya 24 jam sebelumnya."},
      ]}
      title="Pertanyaan Umum (FAQ)"
      description="Temukan jawaban atas pertanyaan yang sering diajukan mengenai layanan, pemesanan, dan lainnya di NR Salon."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="hubungi" data-section="hubungi">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Hubungi Kami"
      title="Kunjungi NR Salon di Jakarta Barat"
      description="Kami siap melayani Anda di Jl. Bumi Indah No.5, RT.8/RW.9, Sukabumi Utara, Kec. Kb. Jeruk, Kota Jakarta Barat, Daerah Khusus Ibukota Jakarta 11540. Jangan ragu untuk menghubungi kami untuk janji temu atau informasi lebih lanjut. Jadikan hari Anda lebih indah bersama kami."
      tagIcon={MapPin}
      tagAnimation="none"
      imageSrc="http://img.b2bpic.net/free-photo/exterior-modern-buildings_1112-1993.jpg"
      imageAlt="NR Salon building exterior"
      mediaAnimation="slide-up"
      inputPlaceholder="Masukkan email Anda"
      buttonText="Kirim Pesan"
      termsText="Dengan mengklik Kirim Pesan, Anda menyetujui Syarat dan Ketentuan kami."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="NR Salon"
      copyrightText="© 2024 NR Salon. Semua Hak Dilindungi."
      socialLinks={[
        {
          icon: Instagram,
          href: "https://www.instagram.com/nrsalon_official",          ariaLabel: "Instagram"},
        {
          icon: Facebook,
          href: "https://www.facebook.com/nrsalon",          ariaLabel: "Facebook"},
        {
          icon: MessageCircle,
          href: "https://wa.me/+628123456789",          ariaLabel: "WhatsApp"},
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
