"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { CalendarCheck, Car, Crown, Feather, Heart, Scissors, Sparkles, Star, Sun, Tv, User } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="small"
        sizing="mediumLargeSizeMediumTitles"
        background="none"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Hem",
          id: "#home",
        },
        {
          name: "Om Firas",
          id: "#about-firas",
        },
        {
          name: "Tjänster",
          id: "#services",
        },
        {
          name: "Upplevelsen",
          id: "#experience",
        },
        {
          name: "Omdömen",
          id: "#reviews",
        },
        {
          name: "Boka tid",
          id: "#book-appointment",
        },
      ]}
      button={{
        text: "Boka tid",
        href: "#book-appointment",
      }}
      logoSrc="http://img.b2bpic.net/free-vector/luxury-hair-salon-logo-collection_23-2148856025.jpg"
      logoAlt="Gyllen Saxen golden scissors logo"
      brandName="Gyllen Saxen"
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitKpi
      background={{
        variant: "plain",
      }}
      title="Malmös bästa frisör. Varje gång."
      description="Världsklassad hantverk möter genuint bemötande. Upptäck varför hundratals familjer väljer Gyllen Saxen för precision, omsorg och oförglömliga resultat i Malmö."
      kpis={[
        {
          value: "✂️",
          label: "Precision klippningar anpassade för DIG",
        },
        {
          value: "👦",
          label: "Barnspecialist — vi gör det roligt, inte läskigt",
        },
        {
          value: "🌟",
          label: "527+ femstjärniga recensioner och räknar",
        },
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Boka tid",
          href: "#book-appointment",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/ornate-chair-art-nouveau-style-with-stained-glass_23-2150975569.jpg?_wi=1"
      imageAlt="Luxurious hair salon interior with golden accents"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/cheerful-woman-enjoying-leisure-time_1098-3791.jpg",
          alt: "Smiling young beautiful girl",
        },
        {
          src: "http://img.b2bpic.net/free-photo/happy-energetic-woman-with-curly-bushy-hair-keeps-hands-raised-reacts-amazing-news-feels-very-glad-wears-transparent-eyeglasses-winter-white-coat-isolated-pink-studio-background_273609-60050.jpg",
          alt: "Amused enthusiastic woman",
        },
        {
          src: "http://img.b2bpic.net/free-photo/attractive-black-african-american-woman-stylish-outfit-white-background_285396-10827.jpg",
          alt: "Beautiful African-American woman",
        },
        {
          src: "http://img.b2bpic.net/free-photo/handsome-man-talking-phone-outdoors-with-leather-jacket-sunglasses-guy-with-beard-instagram-effect_1212-805.jpg",
          alt: "Handsome hispanic man",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiling-stylish-businessman-standing-against-brick-wall-modern-office_273443-3547.jpg",
          alt: "Young handsome man",
        },
      ]}
      avatarText="Över 500 nöjda kunder"
      marqueeItems={[
        {
          type: "text-icon",
          text: "Herrklippning",
          icon: Scissors,
        },
        {
          type: "text",
          text: "Familjevänlig",
        },
        {
          type: "text-icon",
          text: "Damklippning",
          icon: Feather,
        },
        {
          type: "text",
          text: "Bröllopsstyling",
        },
        {
          type: "text-icon",
          text: "Kvalitetsgaranti",
          icon: Star,
        },
      ]}
    />
  </div>

  <div id="about-firas" data-section="about-firas">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="Mästaren bakom saxen"
      title="Möt Firas"
      description="Firas, din masterstylist, har en unik förmåga att verkligen lyssna. Han förstår dina önskemål och levererar med precision och omtanke, vilket skapar resultat du älskar."
      subdescription="Hundratals familjer i Malmö litar på hans skicklighet. Med en varm och inbjudande stil förvandlar Firas varje besök till en personlig upplevelse. Han är inte bara en frisör – han är en del av grannskapet, känd för sin professionalism och sitt stora hjärta."
      icon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/female-shop-seller-helping-woman-try-new-dress-tying-waistband-customer-choosing-clothes-fashion-store-buying-clothes-boutique-concept_74855-11698.jpg?_wi=1"
      imageAlt="Portrait of Firas, master stylist at Gyllen Saxen"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Herrklippning",
          description: "Moderna och klassiska klippningar med precision och stil, anpassade för att framhäva din personlighet.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg?_wi=1",
            imageAlt: "Man getting a modern haircut",
          },
          items: [
            {
              icon: Scissors,
              text: "Personlig konsultation",
            },
            {
              icon: HairDryer,
              text: "Tvätt & styling",
            },
            {
              icon: User,
              text: "Skäggtrimning (tillval)",
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-vector/luxury-hair-salon-logo-collection_23-2148856025.jpg?_wi=1",
          imageAlt: "mens haircut modern stylish salon",
        },
        {
          title: "Barnklippning",
          description: "Vi gör klippningen till en rolig upplevelse! Med en specialdesignad bilbarnstol och underhållning blir besöket en lek.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/front-view-boy-winning-playing-video-games-with-his-sister_23-2148425225.jpg?_wi=1",
            imageAlt: "Child happily getting a haircut in a fun car seat",
          },
          items: [
            {
              icon: Car,
              text: "Bekväm bilbarnstol",
            },
            {
              icon: Tv,
              text: "Skärmunderhållning",
            },
            {
              icon: Laugh,
              text: "Tålmodig frisör",
            },
          ],
          reverse: true,
          imageSrc: "http://img.b2bpic.net/free-photo/ornate-chair-art-nouveau-style-with-stained-glass_23-2150975569.jpg?_wi=2",
          imageAlt: "mens haircut modern stylish salon",
        },
        {
          title: "Damklippning",
          description: "Skräddarsydda klippningar som matchar din stil och hårtyp. Alltid med de senaste trenderna och teknikerna.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/blonde-smiling-woman-getting-hair-washed_23-2148332480.jpg",
            imageAlt: "Woman getting her hair styled",
          },
          items: [
            {
              icon: Brush,
              text: "Klippning & Föning",
            },
            {
              icon: Sun,
              text: "Färgning (tillval)",
            },
            {
              icon: Sparkles,
              text: "Stylingrådgivning",
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/female-shop-seller-helping-woman-try-new-dress-tying-waistband-customer-choosing-clothes-fashion-store-buying-clothes-boutique-concept_74855-11698.jpg?_wi=2",
          imageAlt: "mens haircut modern stylish salon",
        },
        {
          title: "Bröllop & Event",
          description: "Gläns på din stora dag med en oförglömlig håruppsättning. Vi skapar den perfekta looken för bröllop, bal eller speciella tillfällen.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/back-view-unrecognizable-gorgeous-brunette-with-beautiful-hairdo-flowers-it-posing-luxurious-white-dress-with-bunch-pink-air-balloons_132075-13223.jpg",
            imageAlt: "Elegant bridal hair styling",
          },
          items: [
            {
              icon: Heart,
              text: "Bröllopsfrisyr",
            },
            {
              icon: Crown,
              text: "Eventstyling",
            },
            {
              icon: CalendarCheck,
              text: "Konsultation",
            },
          ],
          reverse: true,
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-smiling-hipster-man-posing-studio_158538-25512.jpg",
          imageAlt: "mens haircut modern stylish salon",
        },
      ]}
      title="Våra tjänster"
      description="Från klassiska klippningar till specialstyling – vi erbjuder en rad tjänster utformade för att du ska känna dig som ditt bästa jag. Upplev skillnaden hos Gyllen Saxen."
    />
  </div>

  <div id="experience" data-section="experience">
      <MetricCardFourteen
      useInvertedBackground={true}
      title="Gyllen Saxen-upplevelsen"
      tag="Vårt löfte till dig"
      metrics={[
        {
          id: "metric-1",
          value: "💎",
          description: "Utsökt hantverk & personlig service",
        },
        {
          id: "metric-2",
          value: "✨",
          description: "Resultat som får dig att stråla",
        },
        {
          id: "metric-3",
          value: "🌟",
          description: "En oöverträffad salongsatmosfär",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="reviews" data-section="reviews">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Erik Svensson",
          date: "2023-11-01",
          title: "Världens bästa frisör!",
          quote: "Han satt och log under klippningen och berättat för alla vi träffat att han varit hos världens bästa frisör!",
          tag: "Barnklippning",
          avatarSrc: "http://img.b2bpic.net/free-photo/handsome-smiling-hipster-man-posing-studio_158538-25512.jpg",
          avatarAlt: "Erik Svensson avatar",
          imageSrc: "http://img.b2bpic.net/free-vector/luxury-hair-salon-logo-collection_23-2148856025.jpg?_wi=2",
          imageAlt: "customer avatar profile smiling woman",
        },
        {
          id: "2",
          name: "Maria Karlsson",
          date: "2023-10-25",
          title: "Snabb och supertrevlig!",
          quote: "Snabb och supertrevlig! Klippte mig inför ett bröllop och fortsatt att komma tillbaka efteråt.",
          tag: "Damklippning",
          avatarSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-beige-turtleneck-smiling-cheerfully-showing-teeth_141793-54841.jpg",
          avatarAlt: "Maria Karlsson avatar",
          imageSrc: "http://img.b2bpic.net/free-photo/ornate-chair-art-nouveau-style-with-stained-glass_23-2150975569.jpg?_wi=3",
          imageAlt: "customer avatar profile smiling woman",
        },
        {
          id: "3",
          name: "Ahmed Hassan",
          date: "2023-09-15",
          title: "Fantastiskt resultat",
          quote: "Fantastiskt resultat — stor förståelse för hur man ville ha håret. 5/5",
          tag: "Herrklippning",
          avatarSrc: "http://img.b2bpic.net/free-photo/smiling-female-staff-airport-terminal_107420-85049.jpg",
          avatarAlt: "Ahmed Hassan avatar",
          imageSrc: "http://img.b2bpic.net/free-photo/female-shop-seller-helping-woman-try-new-dress-tying-waistband-customer-choosing-clothes-fashion-store-buying-clothes-boutique-concept_74855-11698.jpg?_wi=3",
          imageAlt: "customer avatar profile smiling woman",
        },
        {
          id: "4",
          name: "Sara Lindgren",
          date: "2023-08-01",
          title: "Bästa och trevligaste frisören!",
          quote: "Bästa och trevligaste frisören! 5/5 varje gång.",
          tag: "Stammis",
          avatarSrc: "http://img.b2bpic.net/free-photo/smart-looking-teacher_53876-23045.jpg",
          avatarAlt: "Sara Lindgren avatar",
          imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg?_wi=2",
          imageAlt: "customer avatar profile smiling woman",
        },
        {
          id: "5",
          name: "Fredrik Jansson",
          date: "2023-07-10",
          title: "Erfaren att klippa barn.",
          quote: "Erfaren att klippa barn. Rekommenderar starkt.",
          tag: "Barnspecialist",
          avatarSrc: "http://img.b2bpic.net/free-photo/side-view-beautiful-senior-woman-portrait_23-2148891712.jpg",
          avatarAlt: "Fredrik Jansson avatar",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-boy-winning-playing-video-games-with-his-sister_23-2148425225.jpg?_wi=2",
          imageAlt: "customer avatar profile smiling woman",
        },
      ]}
      title="Vad våra kunder säger"
      description="Våra kunders nöjdhet talar för sig själv. Läs deras upplevelser och förstå varför de fortsätter att komma tillbaka till Gyllen Saxen."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",
          title: "Hur bokar jag en tid?",
          content: "Du kan enkelt boka tid direkt här på vår hemsida genom att klicka på 'Boka tid'-knappen, eller ringa oss under våra öppettider.",
        },
        {
          id: "faq-2",
          title: "Vilka betalningsmetoder accepterar ni?",
          content: "Vi accepterar de flesta större kreditkort, Swish och kontanter. Betalning sker efter avslutad behandling.",
        },
        {
          id: "faq-3",
          title: "Kan jag avboka eller omboka min tid?",
          content: "Ja, du kan avboka eller omboka din tid upp till 24 timmar före den bokade tiden. Kontakta oss via telefon eller e-post för detta.",
        },
        {
          id: "faq-4",
          title: "Har ni presentkort?",
          content: "Ja, vi erbjuder presentkort som är den perfekta presenten till någon du bryr dig om. Fråga oss i salongen för mer information.",
        },
      ]}
      sideTitle="Vanliga frågor"
      sideDescription="Har du funderingar om bokning, tjänster eller något annat? Här hittar du svar på de vanligaste frågorna."
      faqsAnimation="slide-up"
      textPosition="left"
      showCard={true}
    />
  </div>

  <div id="book-appointment" data-section="book-appointment">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      text="Redo för din bästa klippning? Boka din tid idag."
      buttons={[
        {
          text: "Boka tid",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoSrc="http://img.b2bpic.net/free-vector/luxury-hair-salon-logo-collection_23-2148856025.jpg"
      logoAlt="Gyllen Saxen golden scissors logo"
      logoText="Gyllen Saxen"
      leftLink={{
        text: "Malmö, Sverige",
        href: "https://www.google.com/maps/search/Gyllen+Saxen+Malmö",
      }}
      rightLink={{
        text: "Följ oss på Instagram",
        href: "https://www.instagram.com/gyllensaxenmalmo",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
