"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Award, Car, Clock, ShieldCheck, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="large"
        background="circleGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Ana Sayfa",
          id: "#hero",
        },
        {
          name: "Hizmetler",
          id: "#hizmetler",
        },
        {
          name: "Bölgeler",
          id: "#bolgeler",
        },
        {
          name: "İletişim",
          id: "#contact",
        },
      ]}
      brandName="Mert Oto Anahtar"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "gradient-bars",
      }}
      title="Mert Oto Anahtar ve Çilingir Hizmetleri"
      description="Karşıyaka ve İzmir genelinde 7/24 acil çilingir ve oto anahtar kopyalama hizmeti. 15 dakikada kapınızdayız."
      tag="İzmir'in En Güvenilir Çilingiri"
      buttons={[
        {
          text: "Hemen Ara: 0549 353 53 45",
          href: "tel:05493535345",
        },
      ]}
      mediaItems={[
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1e8wap",
          imageAlt: "Profesyonel Çilingir",
        },
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f1m7k1",
          imageAlt: "Oto Anahtar Hizmeti",
        },
        {
          imageSrc: "asset://new-hero-3",
          imageAlt: "Modern Çilingir Ekipmanları",
        },
        {
          imageSrc: "asset://new-hero-4",
          imageAlt: "7/24 Acil Hizmet Aracı",
        },
        {
          imageSrc: "asset://new-hero-5",
          imageAlt: "Garantili Anahtar Kopyalama",
        },
      ]}
      mediaAnimation="blur-reveal"
      rating={5}
      ratingText="655+ Mutlu Müşteri"
    />
  </div>

  <div id="hizmetler" data-section="hizmetler">
      <FeatureHoverPattern
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Oto Çilingir",
          description: "İzmir oto anahtar kopyalama ve immobilizer anahtar yapımı.",
          icon: Car,
        },
        {
          title: "Çelik Kapı Açma",
          description: "Kapılarınıza zarar vermeden profesyonel açma hizmeti.",
          icon: ShieldCheck,
        },
        {
          title: "7/24 Acil Servis",
          description: "Karşıyaka ve çevresine hızlı ulaşım garantisi.",
          icon: Clock,
        },
      ]}
      title="Uzmanlık Alanlarımız"
      description="Her türlü kapı ve anahtar sorununuzda profesyonel çözüm ortağınız."
    />
  </div>

  <div id="bolgeler" data-section="bolgeler">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Karşıyaka",
        "Mavişehir",
        "Şemikler",
        "Atakent",
        "Çiğli",
        "Bostanlı",
        "İzmir Genel",
      ]}
      title="Hizmet Verdiğimiz Bölgeler"
      description="İzmir'in dört bir yanında 7/24 hızlı çilingir hizmeti."
    />
  </div>

  <div id="why-us" data-section="why-us">
      <AboutMetric
      useInvertedBackground={false}
      title="Neden Bizi Seçmelisiniz?"
      metrics={[
        {
          value: "24/7",
          label: "Kesintisiz Destek",
          icon: Clock,
        },
        {
          value: "15 dk",
          label: "Hızlı Erişim",
          icon: Zap,
        },
        {
          value: "100%",
          label: "Garantili İşçilik",
          icon: Award,
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="stats" data-section="stats">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "655+",
          description: "Mutlu Müşteri",
        },
        {
          id: "m2",
          value: "1500+",
          description: "Başarılı Operasyon",
        },
        {
          id: "m3",
          value: "10",
          description: "Yıllık Deneyim",
        },
      ]}
      title="Başarı Rakamlarımız"
      description="Güveniniz bizim için en önemli referansımızdır."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Ahmet Y.",
          handle: "Karşıyaka",
          testimonial: "15 dakikada geldi, kapıyı saniyeler içinde açtı. Çok teşekkürler.",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mro2xm",
        },
        {
          id: "t2",
          name: "Ayşe K.",
          handle: "Mavişehir",
          testimonial: "Oto anahtarımı kaybetmiştim, hızlıca hallettiler.",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=iur3tz",
        },
        {
          id: "t3",
          name: "Mehmet S.",
          handle: "Bostanlı",
          testimonial: "Güler yüzlü ve profesyonel ekip. Tavsiye ederim.",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zhme02",
        },
        {
          id: "t4",
          name: "Elif D.",
          handle: "Çiğli",
          testimonial: "7/24 hizmet almaları harika, gece yarısı yardıma yetiştiler.",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3lq18y",
        },
        {
          id: "t5",
          name: "Caner B.",
          handle: "Atakent",
          testimonial: "İzmir'de bulabileceğosit en iyi çilingir ekibi.",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pa1vr0",
        },
      ]}
      showRating={true}
      title="Müşterilerimiz Ne Diyor?"
      description="Hizmetimizden memnun kalan değerli müşterilerimizin yorumları."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "7/24 hizmet veriyor musunuz?",
          content: "Evet, İzmir'in her bölgesine 7/24 acil servisimiz mevcuttur.",
        },
        {
          id: "f2",
          title: "Kapımı hasar vererek mi açarsınız?",
          content: "Hayır, profesyonel ekipmanlarımızla hasarsız açım yapıyoruz.",
        },
        {
          id: "f3",
          title: "Oto anahtar kopyalıyor musunuz?",
          content: "Evet, tüm marka model araçlar için oto anahtar kopyalama yapıyoruz.",
        },
      ]}
      title="Sıkça Sorulan Sorular"
      description="Çilingir hizmetleri hakkında merak ettiğiniz her şey."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      title="İletişime Geçin"
      description="Yalı Mahallesi, 6440/3 Sokak 18/A, Karşıyaka / İzmir. Bize her an ulaşabilirsiniz."
      tag="İletişim"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Mert Oto Anahtar"
      leftLink={{
        text: "Gizlilik Politikası",
        href: "#",
      }}
      rightLink={{
        text: "© 2024 Mert Oto Anahtar Hizmetleri",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
