"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Heart, Scissors, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="small"
        sizing="largeSmall"
        background="none"
        cardStyle="layered-gradient"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Hem",
          id: "#hero",
        },
        {
          name: "Om Firas",
          id: "#about",
        },
        {
          name: "Tjänster",
          id: "#services",
        },
        {
          name: "Recensioner",
          id: "#reviews",
        },
        {
          name: "Boka Tid",
          id: "#book",
        },
      ]}
      brandName="Gyllen Saxen"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "plain",
      }}
      title="Malmös bästa frisör. Varje gång."
      description="Upplev den unika kombinationen av världsklass skicklighet och genuin värme hos Gyllen Saxen. Din destination för precisa klippningar och oförglömliga stilar."
      buttons={[
        {
          text: "Boka tid",
          href: "#book",
        },
      ]}
      carouselItems={[
        {
          id: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-washbasin_107420-94763.jpg",
          imageAlt: "Luxurious salon interior",
        },
        {
          id: "2",
          imageSrc: "http://img.b2bpic.net/free-photo/unpleased-young-handsome-barber-holding-comb-hair-clippers-near-head-isolated-olive-green-background-with-copy-space_141793-84798.jpg",
          imageAlt: "Stylist working on client's hair",
        },
        {
          id: "3",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-brushed-salon_23-2148817182.jpg",
          imageAlt: "Happy client smiling after haircut",
        },
        {
          id: "4",
          imageSrc: "http://img.b2bpic.net/free-photo/set-cosmetic-paint-brush-makeup_1232-2062.jpg",
          imageAlt: "Professional hair salon tools",
        },
        {
          id: "5",
          imageSrc: "http://img.b2bpic.net/free-photo/adolescent-girl-counseling-discuss-behavioral-issues-personal-challenges_482257-107973.jpg",
          imageAlt: "Elegant salon reception area",
        },
        {
          id: "6",
          imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-posing-home-outdoor-portrait_1296-924.jpg",
          imageAlt: "Stylist hands styling hair",
        },
      ]}
      autoPlay={true}
      autoPlayInterval={4000}
    />
  </div>

  <div id="about" data-section="about">
      <FeatureCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      features={[
        {
          title: "Precision i varje klipp",
          description: "Varje klippning utförs med noggrannhet och känsla för detaljer, skräddarsydd för just dig.",
          imageSrc: "http://img.b2bpic.net/free-photo/child-getting-their-hair-blown-salon_23-2150462467.jpg",
          imageAlt: "Stylist meticulously cutting hair",
        },
        {
          title: "En mästare som lyssnar",
          description: "Firas tar sig tid att förstå din vision och ge råd som förhöjer din stil, säkerställer att du lämnar salongen nöjd.",
          imageSrc: "http://img.b2bpic.net/free-photo/best-friends-smiling-each-other_23-2148238236.jpg",
          imageAlt: "Stylist consulting with a client",
        },
        {
          title: "Bygger relationer, inte bara frisyrer",
          description: "Många familjer har litat på Firas i generationer för hans varma personlighet och pålitliga skicklighet.",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-styling-her-hair-saloon_107420-12141.jpg",
          imageAlt: "Happy client interacting with stylist",
        },
      ]}
      title="Möt Firas – Mästaren med saxen"
      description="Firas är inte bara en frisör, han är en hantverkare som förvandlar hår till konstverk. Med en oöverträffad precision och ett varmt, lyhört bemötande har han byggt upp ett rykte som Malmös mest betrodda stylist. Han lyssnar verkligen på dina önskemål och levererar resultat som överträffar förväntningarna, varje gång."
    />
  </div>

  <div id="services" data-section="services">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "mens-cut",
          name: "Herrklippning",
          price: "Från 450 SEK",
          imageSrc: "http://img.b2bpic.net/free-photo/bearded-redhead-male-dressed-blue-suit-sunglasses-dark-grey-background_613910-12043.jpg",
          imageAlt: "Stylish men's haircut",
        },
        {
          id: "kids-cut",
          name: "Barnklippning",
          price: "Från 350 SEK",
          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-child-car-while-road-trip_23-2148801685.jpg",
          imageAlt: "Happy child getting a haircut in a fun car seat",
        },
        {
          id: "womens-cut",
          name: "Damklippning",
          price: "Från 600 SEK",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-brunette-girl-background-city-sunset-woman-short-red-skirt-black-tshirt-with-stylish-makeup_132075-12119.jpg",
          imageAlt: "Elegant woman's hair styling",
        },
        {
          id: "wedding-styling",
          name: "Bröllop & Event",
          price: "Pris enl. offert",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-smiled-young-woman-with-luxury-coiffure-drinking-glass-champagne-hairdresser-salon_197531-3677.jpg",
          imageAlt: "Beautiful bridal hairstyle",
        },
      ]}
      title="Våra Tjänster – Skräddarsytt för Dig"
      description="Från klassiska klippningar till festuppsättningar, vi erbjuder en rad tjänster designade för att framhäva din unika stil och få dig att stråla."
    />
  </div>

  <div id="reviews" data-section="reviews">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Ahmed K.",
          role: "Kund",
          company: "Malmö",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-14657.jpg",
          imageAlt: "Ahmed K.",
        },
        {
          id: "t2",
          name: "Sofia L.",
          role: "Kund",
          company: "Malmö",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-intellegent-man-white-shirt-dark-photo-studio_613910-3434.jpg",
          imageAlt: "Sofia L.",
        },
        {
          id: "t3",
          name: "Erik M.",
          role: "Kund",
          company: "Malmö",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-freckles-golden-hour_23-2151993997.jpg",
          imageAlt: "Erik M.",
        },
        {
          id: "t4",
          name: "Maria N.",
          role: "Kund",
          company: "Malmö",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/elegant-man-posing-shirt_23-2148364905.jpg",
          imageAlt: "Maria N.",
        },
        {
          id: "t5",
          name: "Oscar P.",
          role: "Kund",
          company: "Malmö",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-adorable-young-girl-posing_23-2148499722.jpg",
          imageAlt: "Oscar P.",
        },
      ]}
      kpiItems={[
        {
          value: "527+",
          label: "Google Recensioner",
        },
        {
          value: "5/5",
          label: "Stjärnbetyg i snitt",
        },
        {
          value: "100-tals",
          label: "Nöjda familjer",
        },
      ]}
      title="Vad våra kunder säger"
      description="Våra kunders nöjdhet är vårt bästa bevis på den kvalitet och värme vi levererar. Läs deras upplevelser och förstå varför vi är Malmös favoritfrisör."
    />
  </div>

  <div id="experience" data-section="experience">
      <AboutMetric
      useInvertedBackground={false}
      title="Gyllen Saxen-upplevelsen – Din garanti för kvalitet"
      metrics={[
        {
          icon: Scissors,
          label: "Precision cuts tailored to YOU",
          value: "Skräddarsydd perfektion",
        },
        {
          icon: Heart,
          label: "Kids' specialist – we make it fun, not scary",
          value: "Barnvänligt & tryggt",
        },
        {
          icon: Star,
          label: "527+ five-star reviews and counting",
          value: "Beprövad excellens",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",
          title: "Hur bokar jag en tid?",
          content: "Du kan enkelt boka din tid direkt här på hemsidan genom att klicka på 'Boka tid'-knappen, eller ringa oss under våra öppettider för personlig service.",
        },
        {
          id: "faq2",
          title: "Vad kostar en klippning?",
          content: "Våra priser varierar beroende på vilken tjänst du väljer och kan ses i detalj i vårt bokningssystem eller under avsnittet 'Tjänster'. Vi strävar alltid efter transparent prissättning.",
        },
        {
          id: "faq3",
          title: "Erbjuder ni presentkort?",
          content: "Absolut! Vi erbjuder vackra presentkort som är den perfekta gåvan till någon du tycker om. Kontakta oss för att anpassa och köpa ett presentkort som passar dina behov.",
        },
        {
          id: "faq4",
          title: "Var ligger Gyllen Saxen?",
          content: "Vi finns på Storgatan 12, 211 35 Malmö, i hjärtat av Malmö. En länk till Google Maps och vår exakta adress hittar du längst ner på sidan i vår footer.",
        },
      ]}
      title="Vanliga frågor"
      description="Här hittar du svar på de vanligaste frågorna om våra tjänster, bokningar och hur vi kan hjälpa dig på Gyllen Saxen."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="book" data-section="book">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Boka din tid"
      title="Redo för din bästa klippning?"
      description="Upplev skillnaden hos Gyllen Saxen. Boka din tid idag och låt oss skapa din perfekta look med precision och passion."
      buttons={[
        {
          text: "Boka tid",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Kontakt",
          items: [
            {
              label: "Storgatan 12, 211 35 Malmö, Sverige",
              href: "#",
            },
            {
              label: "+46 70-123 45 67",
              href: "tel:+46701234567",
            },
          ],
        },
        {
          title: "Följ Oss",
          items: [
            {
              label: "Instagram",
              href: "https://instagram.com/GyllenSaxen",
            },
            {
              label: "Google Maps",
              href: "https://www.google.com/maps/search/?api=1&query=Gyllen+Saxen+Malmo",
            },
          ],
        },
      ]}
      logoText="Gyllen Saxen"
      copyrightText="© 2024 Gyllen Saxen. Alla rättigheter reserverade."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
