"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeLargeTitles"
        background="none"
        cardStyle="solid"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Hem",
          id: "hero",
        },
        {
          name: "Tjänster",
          id: "services",
        },
        {
          name: "Team",
          id: "team",
        },
        {
          name: "Boka",
          id: "contact",
        },
      ]}
      brandName="Atelier Lux"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "radial-gradient",
      }}
      title="Atelier för tidlös elegans"
      description="Upplev framtidens frisörkonst i hjärtat av staden. Vi kombinerar skandinavisk minimalism med parisisk lyx för en oförglömlig upplevelse."
      buttons={[
        {
          text: "Boka din tid",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500998.jpg?_wi=1"
      mediaAnimation="blur-reveal"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67053.jpg",
          alt: "Karin",
        },
        {
          src: "http://img.b2bpic.net/free-photo/gorgeous-smiling-blonde-fashion-model-sits-white-suit-soft-armchair_8353-5476.jpg",
          alt: "Lars",
        },
        {
          src: "http://img.b2bpic.net/free-photo/happy-charming-girl-dressed-black-shine-dress-smiling-living-room_291650-589.jpg",
          alt: "Eva",
        },
        {
          src: "http://img.b2bpic.net/free-photo/front-view-woman-suit-smiling-camera_23-2148317358.jpg",
          alt: "Sofia",
        },
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-different-brushes_23-2149050549.jpg",
          alt: "Erik",
        },
      ]}
      avatarText="Över 500+ nöjda kunder i år"
      marqueeItems={[
        {
          type: "text",
          text: "Premium Vård",
        },
        {
          type: "text",
          text: "Parisisk Stil",
        },
        {
          type: "text",
          text: "Expertkunnande",
        },
        {
          type: "text",
          text: "Skräddarsytt",
        },
        {
          type: "text",
          text: "Tidlös Design",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",
          content: "Våra ",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/golden-palm-leaves-background_53876-98350.jpg",
          alt: "Lyxig interiör",
        },
        {
          type: "text",
          content: " Pelare",
        },
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySix
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Klippning",
          description: "Precision och stil anpassad efter dig.",
          imageSrc: "http://img.b2bpic.net/free-photo/gold-aesthetic-wallpaper-with-hand-holding-cone_23-2149872238.jpg?_wi=1",
          buttonIcon: "Scissors",
        },
        {
          title: "Färgning",
          description: "Skräddarsydda färgnyanser av högsta kvalitet.",
          imageSrc: "http://img.b2bpic.net/free-photo/comb-skincare-supplies_23-2147710689.jpg?_wi=1",
          buttonIcon: "Palette",
        },
        {
          title: "Skägg",
          description: "Klassisk barbering för det perfekta skägget.",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313026.jpg",
          buttonIcon: "Zap",
        },
        {
          title: "Hårvård",
          description: "Djupverkande behandlingar för maximal lyster.",
          imageSrc: "http://img.b2bpic.net/free-photo/spray-bottle-hair-tools_23-2148352897.jpg",
          buttonIcon: "Sparkles",
        },
        {
          title: "Brud",
          description: "Håruppsättningar för din stora dag.",
          imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-making-hairstyle-brunette-woman-beauty-salon_176420-4471.jpg?_wi=1",
          buttonIcon: "Award",
        },
        {
          title: "Herr",
          description: "Moderna snitt för den kräsne herren.",
          imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg",
          buttonIcon: "Shield",
        },
      ]}
      title="Våra Tjänster"
      description="Expertis inom hår och välmående för den moderna individen."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",
          title: "Essential",
          price: "890 kr",
          period: "från",
          features: [
            "Klippning",
            "Tvätt",
            "Styling",
          ],
          button: {
            text: "Boka",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500998.jpg?_wi=2",
          imageAlt: "luxury dark salon interior",
        },
        {
          id: "pro",
          title: "Populärast",
          price: "1 490 kr",
          period: "från",
          features: [
            "Klippning",
            "Färgning",
            "Behandling",
            "Extra glans",
          ],
          button: {
            text: "Välj denna",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/golden-palm-leaves-background_53876-98350.jpg",
          imageAlt: "luxury boutique interior salon",
        },
        {
          id: "luxury",
          title: "Brud & Fest",
          price: "2 200 kr",
          period: "från",
          features: [
            "Konsultation",
            "Uppsättning",
            "Make-up bas",
          ],
          button: {
            text: "Boka",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/gold-aesthetic-wallpaper-with-hand-holding-cone_23-2149872238.jpg?_wi=2",
          imageAlt: "hair styling tools luxury",
        },
      ]}
      title="Prislista"
      description="Lyx behöver inte kosta en förmögenhet."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardEleven
      textboxLayout="default"
      useInvertedBackground={true}
      groups={[
        {
          id: "stylists",
          groupTitle: "Artister",
          members: [
            {
              id: "m1",
              title: "Sofia",
              subtitle: "Senior Stylist",
              detail: "15 års erfarenhet inom parisisk stil.",
              imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-suit-smiling-camera_23-2148317358.jpg",
            },
            {
              id: "m2",
              title: "Erik",
              subtitle: "Colorist Expert",
              detail: "Specialist på avancerade färgnyanser.",
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-different-brushes_23-2149050549.jpg",
            },
            {
              id: "m3",
              title: "Marcus",
              subtitle: "Master Barber",
              detail: "Ett öga för precision och detaljer.",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/comb-skincare-supplies_23-2147710689.jpg?_wi=2",
          imageAlt: "hair coloring professional tool",
        },
      ]}
      title="Möt Våra Stylister"
      description="Våra experter med fokus på din unika stil."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="Den absolut bästa upplevelsen jag haft hos en frisör. Lyx ut i fingerspetsarna!"
      rating={5}
      author="Karin Andersson"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67053.jpg",
          alt: "Karin",
        },
        {
          src: "http://img.b2bpic.net/free-photo/gorgeous-smiling-blonde-fashion-model-sits-white-suit-soft-armchair_8353-5476.jpg",
          alt: "Lars",
        },
        {
          src: "http://img.b2bpic.net/free-photo/happy-charming-girl-dressed-black-shine-dress-smiling-living-room_291650-589.jpg",
          alt: "Eva",
        },
        {
          src: "http://img.b2bpic.net/free-photo/front-view-woman-suit-smiling-camera_23-2148317358.jpg",
          alt: "Sofia",
        },
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-different-brushes_23-2149050549.jpg",
          alt: "Erik",
        },
      ]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Boka din tid"
      description="Fyll i formuläret så hör vi av oss för att bekräfta din bokning."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Namn",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "E-post",
          required: true,
        },
        {
          name: "phone",
          type: "tel",
          placeholder: "Telefonnummer",
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Vad vill du boka?",
        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/female-hairdresser-making-hairstyle-brunette-woman-beauty-salon_176420-4471.jpg?_wi=2"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Atelier Lux"
      columns={[
        {
          title: "Adress",
          items: [
            {
              label: "Storgatan 1, Stockholm",
              href: "#",
            },
          ],
        },
        {
          title: "Öppettider",
          items: [
            {
              label: "Mån-Fre: 09-19",
              href: "#",
            },
            {
              label: "Lör: 10-16",
              href: "#",
            },
          ],
        },
        {
          title: "Socialt",
          items: [
            {
              label: "Instagram",
              href: "#",
            },
            {
              label: "Facebook",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}