"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { CalendarCheck, Clock, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="large"
        background="fluid"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Hem",          id: "#hero"},
        {
          name: "Om Appen",          id: "#about"},
        {
          name: "Funktioner",          id: "#features"},
        {
          name: "Omdömen",          id: "#testimonials"},
        {
          name: "Statistik",          id: "#metrics"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Kontakt",          id: "#contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/young-professional-hairdresser-woman-apron-holding-trimmer-presenting-it-with-arm-her-hand-smiling-standing-white-wall_141793-96975.jpg"
      logoAlt="Klipptider logo"
      brandName="Klipptider"
      bottomLeftText="Kungsbacka"
      bottomRightText="info@klipptider.se"
      button={{
        text: "Boka tid",        href: "#",        onClick: () => console.log('Boka tid clicked'),
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "sparkles-gradient"}}
      imagePosition="right"
      title="Hitta lediga frisörtider i Kungsbacka – enkelt & snabbt."
      description="Klipptider skrapar Bokadirekt åt dig och visar lediga tider från de bästa salongerna i Kungsbacka. Filtrera på datum och salong, klicka och boka direkt!"
      buttons={[
        {
          text: "Hitta din tid nu",          href: "#features"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/filling-beer-glass_23-2148111236.jpg"
      imageAlt="A screenshot of the Klipptider web app dashboard showing available hair salon appointments filtered by date and salon."
      mediaAnimation="slide-up"
      fixedMediaHeight={true}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-smiling-black-man-wool-suit_613910-16049.jpg",          alt: "Smiling young professional"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-brunette-woman-spends-time-drinks-delicious-home-brewed-coffee_1258-202528.jpg",          alt: "Happy client profile"},
        {
          src: "http://img.b2bpic.net/free-photo/young-man-say-yes-showing-thumbs-up-approval-praise-good-job-smiling-approvingly-standing-white-background_231208-14077.jpg",          alt: "Satisfied user portrait"},
        {
          src: "http://img.b2bpic.net/free-photo/happy-man-using-mobile-phone-chatting_171337-7685.jpg",          alt: "Friendly person headshot"},
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-woman-thinking_23-2147611625.jpg",          alt: "Customer review image"},
      ]}
      avatarText="500+ nöjda användare"
      marqueeItems={[
        {
          type: "text",          text: "Snabb bokning"},
        {
          type: "text-icon",          text: "Toppsalonger",          icon: Star,
        },
        {
          type: "text",          text: "Enkelt att använda"},
        {
          type: "text-icon",          text: "Sparar tid",          icon: Clock,
        },
        {
          type: "text",          text: "Alltid uppdaterat"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="Om Klipptider"
      title="Din genväg till lediga frisörtider."
      description="Vi vet hur svårt det kan vara att hitta en ledig tid hos din favoritsalong. Klipptider förenklar processen genom att samla alla Bokadirekt-tider på ett ställe."
      subdescription="Vår smarta webbapp skrapar automatiskt lediga tider, presenterar dem överskådligt och ger dig direktlänkar till bokning."
      icon={Clock}
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-woman-using-digital-tablet_1170-370.jpg"
      imageAlt="Person looking at a mobile phone screen displaying a calendar with available time slots for appointments."
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyOne
      useInvertedBackground={false}
      title="Smartare tidsbokning, enklare vardag."
      description="Klipptider är designat för att göra din sökning efter frisörtider så smidig som möjligt."
      tag="Funktioner"
      accordionItems={[
        {
          id: "f1",          title: "Automatisk Tidsskrapning",          content: "Vår Python-backend med Playwright söker igenom Bokadirekt var 30:e minut för att hitta de senaste lediga tiderna."},
        {
          id: "f2",          title: "Enkel Filtrering",          content: "Filtrera enkelt tider efter datum och specifik salong för att snabbt hitta det som passar dig."},
        {
          id: "f3",          title: "Direkt Bokning",          content: "Varje tid är en klickbar länk som tar dig direkt till Bokadirekt, redo att slutföra din bokning på ett ögonblick."},
        {
          id: "f4",          title: "Cache & Uppdateringar",          content: "Tiderna cachelagras lokalt och uppdateras regelbundet, vilket säkerställer att du alltid ser aktuell information."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/world-mental-health-day-awareness-illustration_23-2151859110.jpg"
      imageAlt="Illustration of a user interface with filter options for date and salon dropdown."
      mediaAnimation="slide-up"
      mediaPosition="right"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          name: "Anna Söderberg",          handle: "@annas_klipp",          testimonial: "Klipptider är en livräddare! Jag hittar alltid en tid som passar, utan att behöva söka runt på olika sidor. Rekommenderas starkt!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg"},
        {
          id: "t2",          name: "Johan Karlsson",          handle: "@johank_style",          testimonial: "Fantastiskt smidigt! Jag gillar att jag kan se alla lediga tider direkt och boka med ett klick. Min favoritapp för hårvård!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-goodlooking-man-showing-thumbs-up-praising-good-job-recommending-company-standing_1258-159836.jpg"},
        {
          id: "t3",          name: "Sofia Lindgren",          handle: "@sofia.hair",          testimonial: "Som småbarnsförälder är tiden knapp. Med Klipptider sparar jag massor av tid och slipper stressen med att hitta en tid.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-mother-daughter-lying-bed_1170-2770.jpg"},
        {
          id: "t4",          name: "Erik Nilsson",          handle: "@eriks_fade",          testimonial: "Jag trodde inte det var möjligt att göra tidsbokning så här enkelt. Bra jobbat Klipptider!",          rating: 4,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-with-book-his-hand_641386-167.jpg"},
        {
          id: "t5",          name: "Lena Magnusson",          handle: "@lenam_beauty",          testimonial: "Älskar den här appen! Den har verkligen underlättat mitt liv. Den guldiga ramen runt 'Se tider'-korten är en snygg detalj också.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-thumbs-up_1149-1163.jpg"},
      ]}
      showRating={true}
      title="“Äntligen en enklare väg till ny frisyr!”"
      description="Hör vad Klipptiders användare säger om hur de hittar sina nästa frisörtider."
      tag="Nöjda Kunder"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      textboxLayout="default"
      useInvertedBackground={false}
      animationType="slide-up"
      metrics={[
        {
          id: "m1",          icon: Clock,
          title: "Tid Besparad",          value: "1000+ timmar"},
        {
          id: "m2",          icon: CalendarCheck,
          title: "Bokade Tider",          value: "500+ unika"},
        {
          id: "m3",          icon: Star,
          title: "Salonger Anslutna",          value: "7+"},
      ]}
      title="Klipptider i siffror."
      description="Vi är stolta över att hjälpa Kungsbackaborna att hitta sina frisörtider effektivt."
      tag="Våra Framgångar"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "Hur ofta uppdateras tiderna?",          content: "Vår tjänst skrapar Bokadirekt var 30:e minut, så du ser alltid de senaste tillgängliga tiderna."},
        {
          id: "q2",          title: "Vilka salonger ingår i sökningen?",          content: "Vi inkluderar verifierade salonger i Kungsbacka som använder Bokadirekt. Specifika salonger som Klipphuset, Klippa Kungsbacka, Studio Siss, Det Händer och BY U.S. finns med. För Hair By Angels och Hårkompaniet länkar vi direkt till deras bokningssidor."},
        {
          id: "q3",          title: "Är bokningen säker?",          content: "Ja, när du klickar på en tid länkas du direkt till Bokadirekt för att slutföra din bokning. Alla transaktioner hanteras av Bokadirekt."},
        {
          id: "q4",          title: "Kan jag filtrera på frisör eller behandlingstyp?",          content: "För närvarande kan du filtrera på datum och salong. Vi arbetar på att implementera mer avancerade filteralternativ i framtiden."},
      ]}
      title="Vanliga frågor om Klipptider."
      description="Har du funderingar? Här är några av de vanligaste frågorna vi får."
      tag="Frågor & Svar"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Kontakta oss."
      description="Har du frågor, förslag eller vill rapportera ett problem? Fyll i formuläret så hör vi av oss!"
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Ditt namn",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Din e-post",          required: true,
        },
        {
          name: "subject",          type: "text",          placeholder: "Ämne",          required: true,
        },
      ]}
      textarea={{
        name: "message",        placeholder: "Ditt meddelande",        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/it-s-very-comfortable-have-free-internet_329181-2934.jpg"
      imageAlt="Person typing on a laptop, surrounded by chat bubbles and contact icons."
      mediaAnimation="blur-reveal"
      mediaPosition="left"
      buttonText="Skicka meddelande"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Klipptider"
      columns={[
        {
          title: "Navigering",          items: [
            {
              label: "Hem",              href: "#hero"},
            {
              label: "Om Appen",              href: "#about"},
            {
              label: "Funktioner",              href: "#features"},
          ],
        },
        {
          title: "Hjälp",          items: [
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Kontakt",              href: "#contact"},
          ],
        },
        {
          title: "Salonger",          items: [
            {
              label: "Klipphuset",              href: "https://www.bokadirekt.se/places/klipphuset-41113"},
            {
              label: "Hair By Angels",              href: "https://www.hairbyangels.se/bokafrisör"},
            {
              label: "Hårkompaniet",              href: "https://www.harkompanietkungsbacka.se"},
          ],
        },
      ]}
      copyrightText="© 2024 Klipptider. Alla rättigheter förbehållna."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
