"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Award, Shield, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="largeSmall"
        background="floatingGradient"
        cardStyle="soft-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Domů",          id: "#hero"},
        {
          name: "O Nás",          id: "#about"},
        {
          name: "Služby",          id: "#features"},
        {
          name: "Balíčky",          id: "#products"},
        {
          name: "Recenze",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Kontakt",          id: "#contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/letter-r-d-l-icon-logo-design_474888-3525.jpg"
      logoAlt="DT Detailing Studio logo"
      brandName="DT Detailing Studio"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "radial-gradient"}}
      imagePosition="right"
      title="DT Detailing Studio: Váš Vůz Si Zaslouží To Nejlepší"
      description="Poskytujeme prvotřídní detailingové služby pro dokonalý vzhled a ochranu vašeho automobilu v Českém Těšíně."
      kpis={[
        {
          value: "10+",          label: "Let zkušeností"},
        {
          value: "500+",          label: "Spokojených klientů"},
        {
          value: "TOP",          label: "Hodnocení služeb"},
      ]}
      enableKpiAnimation={true}
      tag="Exkluzivní péče"
      buttons={[
        {
          text: "Objednat Detailing",          href: "#contact"},
        {
          text: "Naše Služby",          href: "#features"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138932.jpg"
      imageAlt="Luxusní auto po profesionálním detailingu"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/smiling-young-businessman-travelling-car_23-2147873896.jpg",          alt: "Spokojený klient 1"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-pregnant-woman-opening-car-door_23-2147837510.jpg",          alt: "Spokojený klient 2"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193564.jpg",          alt: "Spokojený klient 3"},
        {
          src: "http://img.b2bpic.net/free-photo/front-view-female-car-seller-kissing-car_23-2148332876.jpg",          alt: "Spokojený klient 4"},
        {
          src: "http://img.b2bpic.net/free-photo/handsome-man-checking-car-dealership_23-2148332943.jpg",          alt: "Spokojený klient 5"},
      ]}
      avatarText="Přes 500 spokojených zákazníků"
      marqueeItems={[
        {
          type: "text-icon",          icon: Sparkles,
          text: "Špičková Kvalita"},
        {
          type: "text-icon",          icon: Shield,
          text: "Dlouhodobá Ochrana"},
        {
          type: "text",          text: "Precizní Detailing"},
        {
          type: "text-icon",          icon: Award,
          text: "Oceněné Služby"},
        {
          type: "text",          text: "Individuální Přístup"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="O DT Detailing Studio"
      description="V DT Detailing Studio v Českém Těšíně se specializujeme na kompletní péči o automobily. S vášní pro detail a dlouholetými zkušenostmi přinášíme vašemu vozu nejen dokonalý lesk, ale i dlouhodobou ochranu a péči, kterou si zaslouží. Používáme pouze špičkové produkty a nejmodernější techniky."
      metrics={[
        {
          value: "100%",          title: "Spokojenost"},
        {
          value: "Špičkové",          title: "Produkty"},
        {
          value: "Lokální",          title: "Služby"},
      ]}
      tag="Naše filozofie"
      imageSrc="http://img.b2bpic.net/free-photo/builder-young-man-construction-uniform-holding-scissors-looking-camera-being-excited-happy-standing-blue-background_141793-140554.jpg"
      imageAlt="Interiér detailingového studia s nástroji"
      mediaAnimation="opacity"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNineteen
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          tag: "Exteriér",          title: "Korekce Laku a Leštění",          subtitle: "Odstranění škrábanců a hologramů",          description: "Profesionální vícestupňové leštění pro dokonalý zrcadlový lesk a odstranění povrchových vad laku.",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-blue-uniform-checks-car_1157-31689.jpg",          imageAlt: "Korekce laku automobilu"},
        {
          tag: "Ochrana",          title: "Keramická Ochrana Laku",          subtitle: "Dlouhodobá ochrana a hydrofobita",          description: "Aplikace špičkové keramické ochrany, která chrání lak před UV zářením, chemikáliemi a znečištěním.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-professional-wrapping-car-with-blue-cover_23-2149385688.jpg",          imageAlt: "Aplikace keramické ochrany na auto"},
        {
          tag: "Interiér",          title: "Hloubkové Čištění Interiéru",          subtitle: "Čistota a svěžest každého detailu",          description: "Kompletní hloubkové čištění interiéru, včetně kůže, čalounění, plastů a parního čištění pro hygienickou čistotu.",          imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22314.jpg",          imageAlt: "Čištění interiéru auta"},
      ]}
      title="Naše Kompletní Detailingové Služby"
      description="Od korekce laku po detailní čištění interiéru – postaráme se o každý aspekt vašeho vozidla s maximální precizností a péčí."
      tag="Služby"
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          brand: "Standard",          name: "Exteriér Basic",          price: "Od 2 500 Kč",          rating: 4,
          reviewCount: "50",          imageSrc: "http://img.b2bpic.net/free-photo/man-white-shirt-wipes-car-car-wash_1157-27235.jpg",          imageAlt: "Základní exteriérový detailing"},
        {
          id: "p2",          brand: "Premium",          name: "Exteriér Premium",          price: "Od 5 000 Kč",          rating: 5,
          reviewCount: "75",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193557.jpg",          imageAlt: "Prémiový exteriérový detailing"},
        {
          id: "p3",          brand: "Standard",          name: "Interiér Deep",          price: "Od 3 000 Kč",          rating: 4,
          reviewCount: "40",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193618.jpg",          imageAlt: "Hloubkové čištění interiéru"},
        {
          id: "p4",          brand: "Komplet",          name: "Kompletní Premium",          price: "Od 8 000 Kč",          rating: 5,
          reviewCount: "90",          imageSrc: "http://img.b2bpic.net/free-photo/car-detailing-concept-man-face-mask-with-orbital-polisher-repair-shop-polishing-orange-suv-car_627829-12610.jpg",          imageAlt: "Kompletní prémiový detailing"},
        {
          id: "p5",          brand: "Speciál",          name: "Čištění Motoru",          price: "Od 1 500 Kč",          rating: 4,
          reviewCount: "30",          imageSrc: "http://img.b2bpic.net/free-photo/man-connecting-engine-wiring_23-2148254109.jpg",          imageAlt: "Čištění motorového prostoru"},
        {
          id: "p6",          brand: "Speciál",          name: "Renovace Světlometů",          price: "Od 1 000 Kč",          rating: 4,
          reviewCount: "25",          imageSrc: "http://img.b2bpic.net/free-photo/head-lights-car_1339-5401.jpg",          imageAlt: "Renovace světlometů"},
      ]}
      title="Naše Detailingové Balíčky"
      description="Vyberte si z našich pečlivě sestavených balíčků, které nabízejí komplexní péči pro každý typ vozidla a rozpočet."
      tag="Balíčky služeb"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "100%",          title: "Kvalita",          items: [
            "Precizní provedení",            "Špičkové materiály",            "Bezchybný výsledek"],
        },
        {
          id: "m2",          value: "500+",          title: "Vozů",          items: [
            "Osobní automobily",            "Dodávky a SUV",            "Motocykly"],
        },
        {
          id: "m3",          value: "TOP",          title: "Hodnocení",          items: [
            "Google Recenze",            "Doporučení Klientů",            "Odborná Fóra"],
        },
      ]}
      title="Naše Výsledky Mluví Samy Za Sebe"
      description="Jsme hrdí na naši práci a na spokojenost našich klientů. Podívejte se na klíčové ukazatele našeho úspěchu."
      tag="Statistiky"
      animationType="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Petr Novák",          imageSrc: "http://img.b2bpic.net/free-photo/cute-girl-applying-lipstick-car_231208-6891.jpg",          imageAlt: "Petr Novák, spokojený klient"},
        {
          id: "2",          name: "Jana Svobodová",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193572.jpg",          imageAlt: "Jana Svobodová, spokojená klientka"},
        {
          id: "3",          name: "Marek Dvořák",          imageSrc: "http://img.b2bpic.net/free-photo/parents-with-their-children-car-field_1303-16377.jpg",          imageAlt: "Marek Dvořák, spokojený klient"},
        {
          id: "4",          name: "Kateřina Jelínková",          imageSrc: "http://img.b2bpic.net/free-photo/man-with-car-keys_1187-1059.jpg",          imageAlt: "Kateřina Jelínková, spokojená klientka"},
        {
          id: "5",          name: "Tomáš Kučera",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sexy-rich-business-woman-red-suit-sitting-white-car-wearing-glasses_285396-6789.jpg",          imageAlt: "Tomáš Kučera, spokojený klient"}
      ]}
      cardTitle="Co říkají naši klienti"
      cardTag="Reference"
      cardAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Audi",        "BMW",        "Mercedes",        "Volkswagen",        "Škoda",        "Hyundai",        "Kia"]}
      title="Spolupracujeme se všemi značkami"
      description="Ať už vlastníte jakoukoliv značku automobilu, jsme připraveni poskytnout jí nejlepší možnou péči a detailingové služby."
      tag="Důvěra"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "Jak dlouho trvá detailing?",          content: "Délka detailingu závisí na zvoleném balíčku a stavu vozidla. Základní exteriér trvá několik hodin, zatímco kompletní detailing s korekcí laku může trvat i několik dní."},
        {
          id: "q2",          title: "Je nutné si schůzku objednat předem?",          content: "Ano, pro zajištění nejlepšího servisu a dostupnosti termínu doporučujeme objednat se předem. Můžete tak učinit telefonicky nebo prostřednictvím našeho online formuláře."},
        {
          id: "q3",          title: "Jaké produkty používáte?",          content: "Používáme výhradně profesionální a ověřené detailingové produkty od renomovaných světových značek, které zaručují nejvyšší kvalitu a bezpečnost pro váš vůz."},
        {
          id: "q4",          title: "Provádíte i čištění motoru?",          content: "Ano, nabízíme i profesionální čištění motorového prostoru, které pomáhá udržet motor v optimálním stavu a zlepšuje celkový vzhled vozidla."},
        {
          id: "q5",          title: "Je keramická ochrana vhodná pro mé auto?",          content: "Keramická ochrana je vhodná pro všechny typy vozidel a poskytuje dlouhodobou ochranu laku, zvyšuje jeho lesk a usnadňuje údržbu. Rádi vám s výběrem poradíme."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193567.jpg"
      imageAlt="Klient konzultující detailing s technikem"
      mediaAnimation="opacity"
      mediaPosition="right"
      title="Často Kladené Otázky"
      description="Zde naleznete odpovědi na nejčastější dotazy týkající se našich detailingových služeb a procesu."
      tag="FAQ"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "downward-rays-static-grid"}}
      tag="Kontakt"
      title="Objednejte se ješte dnes!"
      description="Kontaktujte nás a domluvte si termín pro detailing vašeho vozu. Jsme zde, abychom vašemu autu vrátili původní krásu."
      inputPlaceholder="Zadejte svůj e-mail"
      buttonText="Odeslat poptávku"
      termsText="Kliknutím na 'Odeslat poptávku' potvrzujete souhlas s našimi obchodními podmínkami."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="DT Detailing Studio"
      columns={[
        {
          title: "Služby",          items: [
            {
              label: "Korekce laku",              href: "#features"},
            {
              label: "Keramická ochrana",              href: "#features"},
            {
              label: "Čištění interiéru",              href: "#features"},
            {
              label: "Čištění motoru",              href: "#products"},
          ],
        },
        {
          title: "Odkazy",          items: [
            {
              label: "O Nás",              href: "#about"},
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Kontakt",              href: "#contact"},
          ],
        },
        {
          title: "Kontakt",          items: [
            {
              label: "Český Těšín",              href: "#contact"},
            {
              label: "+420 123 456 789",              href: "tel:+420123456789"},
            {
              label: "info@dtdetailing.cz",              href: "mailto:info@dtdetailing.cz"},
          ],
        },
      ]}
      copyrightText="© 2024 DT Detailing Studio. Všechna práva vyhrazena."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}