"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Award, Smile, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="large"
        background="aurora"
        cardStyle="gradient-radial"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Leistungen",
          id: "features",
        },
        {
          name: "FAQ",
          id: "faq",
        },
        {
          name: "Kontakt",
          id: "contact",
        },
      ]}
      brandName="Arasinio"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "plain",
      }}
      title="Dein Style, Dein Moment: Arasinio Karlsruhe"
      description="Erlebe modernen Haarschnitt und Styling, perfekt angepasst an deinen Vibe. Arasinio steht für Qualität und Trendbewusstsein mitten im Herzen von Karlsruhe."
      buttons={[
        {
          text: "Termin vereinbaren",
          href: "#contact",
        },
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f8bqoj"
      imageAlt="hairdresser salon interior modern"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3tunws",
          alt: "young woman portrait",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pk9dsa",
          alt: "young man portrait",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8oxv0b",
          alt: "teenage student portrait",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9lvcu3",
          alt: "student portrait lifestyle",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p79lv7",
          alt: "young woman happy",
        },
      ]}
      avatarText="Von über 5000 Kunden empfohlen"
      marqueeItems={[
        {
          type: "text",
          text: "Trend-Schnitte",
        },
        {
          type: "text",
          text: "Coloring Spezialisten",
        },
        {
          type: "text",
          text: "Premium Haarpflege",
        },
        {
          type: "text",
          text: "Studentenrabatte",
        },
        {
          type: "text",
          text: "Moderne Location",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",
          content: "Über ",
        },
        {
          type: "image",
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wqd8j9",
          alt: "professional hairdresser working",
        },
        {
          type: "text",
          content: " Arasinio",
        },
      ]}
      buttons={[
        {
          text: "Mehr erfahren",
          href: "#contact",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Trend-Haarschnitte",
          descriptions: [
            "Individuelle Beratung.",
            "Modernste Schnitttechniken.",
          ],
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2v7vmc",
        },
        {
          id: "f2",
          title: "Coloring",
          descriptions: [
            "Natürliche Nuancen.",
            "Kreative Farb-Highlights.",
          ],
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p23ao9",
        },
        {
          id: "f3",
          title: "Haarpflege-Spa",
          descriptions: [
            "Tiefenwirksame Pflege.",
            "Entspannende Kopfmassage.",
          ],
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ttecdx",
        },
      ]}
      title="Unsere Leistungen"
      description="Professioneller Service für dein perfektes Haar."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          brand: "Arasinio",
          name: "Hydrate Shampoo",
          price: "19,90€",
          rating: 5,
          reviewCount: "120",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=47g5hl",
        },
        {
          id: "p2",
          brand: "Arasinio",
          name: "Style Fix Spray",
          price: "15,50€",
          rating: 4,
          reviewCount: "85",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rowv1a",
        },
        {
          id: "p3",
          brand: "Arasinio",
          name: "Repair Mask",
          price: "24,90€",
          rating: 5,
          reviewCount: "210",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=it4tdj",
        },
        {
          id: "p4",
          brand: "Arasinio",
          name: "Gloss Serum",
          price: "18,90€",
          rating: 5,
          reviewCount: "95",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tirp0r",
        },
        {
          id: "p5",
          brand: "Arasinio",
          name: "Textur Wax",
          price: "14,90€",
          rating: 4,
          reviewCount: "70",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zwbzv2",
        },
        {
          id: "p6",
          brand: "Arasinio",
          name: "Detangler",
          price: "12,90€",
          rating: 4,
          reviewCount: "55",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=foly03",
        },
      ]}
      title="Premium Produkte"
      description="Pflege dein Haar mit unseren professionellen Produkten."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          icon: Award,
          title: "Jahre Erfahrung",
          value: "10+",
        },
        {
          id: "m2",
          icon: Smile,
          title: "Glückliche Kunden",
          value: "5000+",
        },
        {
          id: "m3",
          icon: Star,
          title: "Google Bewertung",
          value: "4.9",
        },
      ]}
      title="Arasinio in Zahlen"
      description="Erfolgsgeschichten unserer zufriedenen Kunden."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="Einfach der beste Friseur in Karlsruhe! Super Beratung und genau mein Style."
      rating={5}
      author="Lukas M."
      avatars={[
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3tunws",
          alt: "young woman portrait",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pk9dsa",
          alt: "young man portrait",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8oxv0b",
          alt: "teenage student portrait",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9lvcu3",
          alt: "student portrait lifestyle",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p79lv7",
          alt: "young woman happy",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Brauche ich einen Termin?",
          content: "Ja, wir empfehlen eine vorherige Buchung.",
        },
        {
          id: "q2",
          title: "Wo findet man euch?",
          content: "Wir sind mitten in Karlsruhe, direkt am Marktplatz.",
        },
        {
          id: "q3",
          title: "Bietet ihr Studentenrabatt?",
          content: "Zeig uns deinen Ausweis und erhalte 10% Rabatt.",
        },
      ]}
      title="Fragen? Hier die Antworten"
      description="Alles Wichtige für deinen Besuch bei Arasinio."
      faqsAnimation="slide-up"
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wqd8j9"
      imageAlt="professional hairdresser working"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      title="Bereit für deinen neuen Style?"
      description="Schreib uns oder buche direkt deinen Termin."
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=edxpyd"
      mediaAnimation="slide-up"
      imageAlt="modern salon interior clean"
      tag="Kontakt"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Kontakt",
          items: [
            {
              label: "E-Mail: info@arasinio.de",
              href: "mailto:info@arasinio.de",
            },
            {
              label: "Telefon: 0721 123456",
              href: "tel:+49721123456",
            },
          ],
        },
        {
          title: "Rechtliches",
          items: [
            {
              label: "Impressum",
              href: "#",
            },
            {
              label: "Datenschutz",
              href: "#",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 Arasinio Friseur"
      bottomRightText="Karlsruhe"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
