"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Droplets, Palette, Scissors, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeLargeTitles"
        background="none"
        cardStyle="soft-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "Über uns",
          id: "#about",
        },
        {
          name: "Leistungen",
          id: "#leistungen",
        },
        {
          name: "Kontakt",
          id: "#contact",
        },
      ]}
      brandName="ease natural haircutting"
      button={{
        text: "Termin buchen",
        href: "#contact",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-static",
      }}
      title="Natürlich schön. Stilvoll geschnitten."
      description="Ihr nachhaltiger Friseur im Herzen von Penzberg."
      buttons={[
        {
          text: "Termin buchen",
          href: "#contact",
        },
      ]}
      carouselItems={[
        {
          id: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg",
        },
        {
          id: "2",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-holding-flower_23-2149513257.jpg",
        },
        {
          id: "3",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-trimming-beard-client_23-2147778906.jpg",
        },
        {
          id: "4",
          imageSrc: "http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg",
        },
        {
          id: "5",
          imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg",
        },
        {
          id: "6",
          imageSrc: "http://img.b2bpic.net/free-photo/basin-black-faucet-green-bathroom-with-lighting-cozy-spa-nook_169016-69326.jpg",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Natürlichkeit trifft auf Design"
      description="Bei ease natural haircutting verbinden wir ökologische Nachhaltigkeit mit erstklassigem Handwerk. Unsere Philosophie ist simpel: Hochwertige Haarschnitte, die Ihre natürliche Schönheit betonen und dabei unsere Umwelt schonen. Wir beraten Sie individuell."
      metrics={[
        {
          value: "100%",
          title: "Nachhaltig",
        },
        {
          value: "Individuell",
          title: "Beratung",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/composition-spa-treatment-cream-hair-brushes_23-2148645562.jpg"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="leistungen" data-section="leistungen">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          icon: Scissors,
          title: "Damenhaarschnitt",
          description: "Moderner Schnitt inklusive Beratung und Styling.",
        },
        {
          icon: Scissors,
          title: "Herrenhaarschnitt",
          description: "Präzisionsschnitt für einen stilvollen Look.",
        },
        {
          icon: Droplets,
          title: "Styling",
          description: "Perfektes Finish für jeden Anlass.",
        },
        {
          icon: Palette,
          title: "Coloration",
          description: "Hochwertige, schonende Farbbehandlungen.",
        },
        {
          icon: Scissors,
          title: "Bartpflege",
          description: "Professionelles Bartstyling und Konturenschnitt.",
        },
        {
          icon: Sparkles,
          title: "Pflegebehandlungen",
          description: "Tiefenwirksame Pflege für gesundes Haar.",
        },
      ]}
      title="Unsere Services"
      description="Maßgeschneiderte Haarschnitte und Pflege für Damen und Herren."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        {
          id: "p1",
          badge: "Salon",
          price: "Öffnungszeiten",
          subtitle: "Di-Fr: 09:00 - 18:00 Uhr | Sa: 09:00 - 14:00 Uhr",
          buttons: [
            {
              text: "Termin buchen",
              href: "#contact",
            },
          ],
          features: [
            "Individuelle Termine nach Vereinbarung",
            "Direkt am Stadtplatz gelegen",
          ],
        },
      ]}
      title="Preise & Öffnungszeiten"
      description="Besuchen Sie uns im Zentrum von Penzberg."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Unser Engagement"
      tag="Nachhaltigkeit"
      metrics={[
        {
          id: "m1",
          value: "100%",
          description: "Nachhaltige Produkte",
        },
        {
          id: "m2",
          value: "∞",
          description: "Leidenschaft für Haare",
        },
        {
          id: "m3",
          value: "Clean",
          description: "Luxus Salon-Erlebnis",
        },
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="Ein wunderbares Erlebnis! Der Salon ist ein Ort der Ruhe, und ich liebe meinen neuen Schnitt. Absolut professionell und nachhaltig."
      rating={5}
      author="Sarah M."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg",
          alt: "Sarah",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-annoyed-blonde-male-barber-uniform-puts-combs-temples-isolated-white-space-with-copy-space_141793-60109.jpg",
          alt: "Michael",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-two-young-nice-ladies-standing-discussing-work-while-holding-tablet-cup-coffee-hands-office_574295-4572.jpg",
          alt: "Julia",
        },
        {
          src: "http://img.b2bpic.net/free-photo/angry-young-female-barber-wearing-uniform-glasses-headband-holding-straight-razor-shaving-razor-looking-camera-shouting-out-loudly-isolated-red-background_141793-137010.jpg",
          alt: "David",
        },
        {
          src: "http://img.b2bpic.net/free-photo/woman-styling-her-hair-saloon_107420-12141.jpg",
          alt: "Anna",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Kontakt"
      title="Ihr Termin bei uns"
      description="Vereinbaren Sie Ihren persönlichen Wohlfühltermin. Wir freuen uns darauf, Sie in Penzberg zu begrüßen."
      imageSrc="http://img.b2bpic.net/free-photo/two-female-friends-enjoying-ice-creams_23-2148721102.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="ease natural haircutting"
      copyrightText="© 2024 ease natural haircutting. Penzberg, Germany."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
