"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: "sparkles-gradient"
      }}
      title="Upplev Guldkanten: Din Premium Frisör i Malmö."
      description="På Gyllen Saxen förvandlar vi varje klippning till en exklusiv upplevelse. Låt oss skräddarsy din perfekta look med precision och passion i en miljö av ren lyx."
      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: "Perfektion i Varje Slinga",          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 Förstår Din Vision",          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: "Tidlösa Relationer, Framstående Stilar",          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 – Konsten att Skapa Skönhet"
      description="Firas är mer än en frisör; han är en visionär konstnär. Med en oöverträffad precision och ett genuint engagemang för varje kunds unika stil, har Firas etablerat Gyllen Saxen som Malmös främsta destination för exklusiv hårvård. Han förvandlar dina visioner till verklighet, varje gång med en touch av elegans."
    />
  </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: Klassisk & Modern",          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: "Juniorklippning: För Våra Yngsta Stjärnor",          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: Elegans & Trend",          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 Styling: Din Stora Dag",          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="Exklusiva Tjänster – Skräddarsydd Lyx för Ditt Hår"
      description="Utforska vårt noggrant utvalda utbud av premiumtjänster, från innovativa klippningar till förtrollande färgbehandlingar och eleganta stylingar. Varje behandling är en resa mot perfektion, anpassad för att framhäva din naturliga skönhet och ge dig en känsla av ren förfining."
    />
  </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: "Excellence Betyg"},
        {
          value: "5/5",          label: "Genomsnittligt 5/5 Stjärnbetyg"},
        {
          value: "Tiotusentals",          label: "Leenden Skapade"},
      ]}
      title="Röster från Våra Nöjda Kunder"
      description="Äkta upplevelser från dem som valt Gyllen Saxen. Upptäck varför vi är Malmös mest omtyckta salong, där varje besök är en bekräftelse på vår exceptionella service och hantverksskicklighet."
    />
  </div>

  <div id="experience" data-section="experience">
      <AboutMetric
      useInvertedBackground={false}
      title="Gyllen Saxen-upplevelsen: Där Lyx Möter Hantverk"
      metrics={[
        {
          icon: Scissors,
          label: "Precision cuts tailored to YOU",          value: "Skräddarsydd perfektion"},
        {
          icon: Heart,
          label: "Förstklassig Vård för Alla Åldrar",          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: "Boka din exklusiva tid enkelt via vår hemsida genom att klicka på 'Boka tid'-knappen, eller kontakta oss per telefon för personlig assistans."},
        {
          id: "faq2",          title: "Vad kostar en klippning?",          content: "Våra priser reflekterar kvaliteten och expertisen i varje tjänst, detaljerat presenterat i vårt bokningssystem samt under 'Tjänster'. Transparens är en grundpelare i vår service."},
        {
          id: "faq3",          title: "Erbjuder ni presentkort?",          content: "Ja, vi erbjuder utsökta presentkort – den ultimata gåvan för en lyxig upplevelse. Vänligen kontakta oss för att skräddarsy ditt presentkort."},
        {
          id: "faq4",          title: "Var ligger Gyllen Saxen?",          content: "Vår salong är belägen på den prestigefyllda Storgatan 12, 211 35 Malmö. En detaljerad karta finns tillgänglig i sidfoten för din bekvämlighet."},
      ]}
      title="Svar på Dina Frågor"
      description="Hitta snabbt information om våra exklusiva tjänster, bokningsprocesser och hur vi på Gyllen Saxen kan försköna din dag."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="book" data-section="book">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "glowing-orb"
      }}
      tag="Din Lyxresa Börjar Här"
      title="Klar för en Förvandling?"
      description="Upptäck den oöverträffade expertisen hos Gyllen Saxen. Säkra din tid redan idag och låt våra mästare skapa en look som speglar din unika stil med exceptionell precision och konstnärlig 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: "https://www.google.com/maps/search/?api=1&query=Storgatan+12,+211+35+Malmö,+Sverige"},
            {
              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>
  );
}