"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import AboutMetric from '@/components/sections/about/AboutMetric';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Scissors, Sparkles, User, MapPin, Phone, Star } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="noise"
        cardStyle="glass-depth"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarStyleCentered
                navItems={[
                    { name: "Home", id: "#hero" },
                    { name: "Über uns", id: "#about" },
                    { name: "Leistungen", id: "#features" },
                    { name: "Bewertungen", id: "#testimonials" },
                    { name: "Kontakt", id: "#contact" },
                ]}
                brandName="Haarzeit"
                button={{ text: "07144 8165700", href: "tel:071448165700" }}
            />
        </div>

        <div id="hero" data-section="hero">
            <HeroBillboard
                title="Haarzeit, der Friseur"
                description="Exzellente Frisierkunst im Herzen von Murr. Wir verwandeln Ihren Besuch in einen Wohlfühlmoment."
                background={{ variant: "sparkles-gradient" }}
                buttons={[{ text: "Jetzt Termin anfragen", href: "#contact" }]}
                imageSrc="http://img.b2bpic.net/free-photo/hairdresser-customer-talking-hair-salon_329181-1940.jpg"
            />
        </div>

        <div id="about" data-section="about">
            <AboutMetric
                title="Besuchen Sie uns in Murr"
                metrics={[
                    { icon: MapPin, label: "Adresse", value: "Hindenburgstr. 70" },
                    { icon: Phone, label: "Telefon", value: "07144 8165700" },
                    { icon: User, label: "Service", value: "Meisterhaft & Individuell" }
                ]}
                metricsAnimation="slide-up"
                useInvertedBackground={true}
            />
        </div>

        <div id="features" data-section="features">
            <FeatureBorderGlow
                features={[
                    { icon: Scissors, title: "Präzisionsschnitt", description: "Maßgeschneiderte Haarschnitte für jeden Haartyp und Stil." },
                    { icon: Sparkles, title: "Coloration", description: "Moderne Färbetechniken, Highlights und sanfte Balayage-Farben." },
                    { icon: User, title: "Styling", description: "Vom natürlichen Alltags-Look bis hin zu eleganten Event-Stylings." }
                ]}
                animationType="slide-up"
                title="Unsere Expertise"
                description="Bei Haarzeit steht Ihre Zufriedenheit an erster Stelle. Wir nehmen uns die Zeit für eine individuelle Beratung in entspannter Atmosphäre."
                textboxLayout="split"
                useInvertedBackground={false}
            />
        </div>

        <div id="testimonials" data-section="testimonials">
            <TestimonialCardTen
                title="Was unsere Kunden sagen"
                tag="Bewertungen"
                textboxLayout="default"
                useInvertedBackground={false}
                description="Kundenstimmen über unseren Salon"
                testimonials={[
                    {
                        id: "1",                        title: "Toller Service!",                        quote: "Super nettes Team und ich bin jedes Mal begeistert von meinem Haarschnitt.",                        name: "Claudia S.",                        role: "Stammkundin"
                    },
                    {
                        id: "2",                        title: "Fachlich Top",                        quote: "Hier wird sich für die Beratung wirklich Zeit genommen. Sehr zu empfehlen!",                        name: "Michael B.",                        role: "Kunde"
                    }
                ]}
            />
        </div>

        <div id="contact" data-section="contact">
            <ContactSplit
                tag="Termin vereinbaren"
                title="Haarzeit in Murr"
                description="Wir freuen uns auf Ihren Anruf oder Besuch in der Hindenburgstraße 70. Kontaktieren Sie uns direkt für eine Terminvereinbarung."
                buttonText="Jetzt anrufen"
                onSubmit={() => window.location.href = 'tel:071448165700'}
                mediaPosition="right"
                background={{ variant: "sparkles-gradient" }}
                mediaAnimation="slide-up"
                useInvertedBackground={true}
            />
        </div>

        <div id="footer" data-section="footer">
            <FooterSimple
                columns={[
                    { 
                        title: "Kontakt", 
                        items: [ 
                            { label: "Hindenburgstraße 70" },
                            { label: "71711 Murr" },
                            { label: "Tel: 07144 8165700" }
                        ] 
                    },
                    { 
                        title: "Öffnungszeiten", 
                        items: [{ label: "Nach Vereinbarung" }] 
                    }
                ]}
                bottomLeftText="© 2025 Haarzeit, der Friseur"
                bottomRightText="Ihr Salon in Murr"
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}