"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroCentered from "@/components/sections/hero/HeroCentered";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Award, CheckCircle, DollarSign, MapPin, Phone, Shield, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Autobliss"
          navItems={[
            { name: "Rreth Nesh", id: "about" },
            { name: "Makinat", id: "vehicles" },
            { name: "Përse Ne", id: "why-us" },
            { name: "Kontakt", id: "contact" },
          ]}
          button={{
            text: "Telefononi Tani",            href: "tel:+355688190000"}}
          animateOnLoad={true}
          className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-11/12 max-w-5xl rounded-2xl bg-card shadow-lg border border-accent/20"
          navItemClassName="text-foreground hover:text-accent transition-colors duration-200 font-medium"
          buttonClassName="px-6 py-2 rounded-lg bg-primary-cta text-primary-cta-text font-semibold hover:shadow-md transition-all duration-200"
          buttonTextClassName="text-sm font-bold"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Autobliss – Makinën e ëndrrave e gjen këtu"
          description="Zgjidhja juaj e besueshme për blerjen e makinave të reja dhe të përdorura në Tiranë. Ne ofrojmë zgjedhje të gjerë, çmime transparente dhe shërbim klienti pa të metë."
          background={{ variant: "plain" }}
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/happy-black-car-repairman-young-businessman-handshaking-auto-repair-shop_637285-4249.jpg",              alt: "Autobliss team members"},
          ]}
          avatarText="Të besuarit e qindra klientëve në Tiranë"
          buttons={[
            { text: "Telefononi Tani", href: "tel:+355688190000" },
            { text: "Kërkoni Ofertë", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Autobliss - Find Your Dream Car"
          className="min-h-screen flex items-center justify-center"
          containerClassName="w-full"
          textBoxClassName="max-w-3xl mx-auto text-center"
          titleClassName="text-5xl md:text-6xl font-bold text-foreground mb-6"
          descriptionClassName="text-lg md:text-xl text-foreground/80 mb-8"
          avatarGroupClassName="mb-8 flex justify-center"
          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Rreth Nesh"
          title="Autobliss - 25 Vjet Përvojë në Shitjen e Makinave"
          description="Autobliss është ndërmarrje lokale me seli në Ramazan Gaxherri, Tiranë. Për më shumë se dy dekada, ne kemi ndërtuar reputacionin tonë mbi besueshmërinë, transparencën dhe shërbimin e shkëlqyer. Çdo makinë që shitim kalon inspektimin e rreptë të cilësisë. Ne ofrojmë konsultim personal, dokumentim të plotë dhe suport pas shitjes."
          metrics={[
            { value: "+500", title: "Klientë të Kënaqur" },
            { value: "3.7★", title: "Vlerësim Mesatar" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/happy-black-car-repairman-young-businessman-handshaking-auto-repair-shop_637285-4249.jpg"
          imageAlt="Autobliss showroom and team"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          tagAnimation="slide-up"
          ariaLabel="About Autobliss"
          className="py-20"
          containerClassName="max-w-6xl mx-auto px-4"
          titleClassName="text-4xl font-bold text-foreground mb-6"
          descriptionClassName="text-base text-foreground/80 leading-relaxed mb-8"
          metricCardClassName="bg-card p-6 rounded-xl shadow-soft border border-accent/10"
        />
      </div>

      <div id="vehicles" data-section="vehicles">
        <ProductCardFour
          title="Makinat Tona"
          description="Zgjedhja më e gjerë e makinave të sigurta, të inspektuara dhe gati për përvojën tuaj në makinë."
          tag="Në Shitje Tani"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          carouselMode="buttons"
          products={[
            {
              id: "1",              name: "BMW 320i",              price: "18,500€",              variant: "Gri  Automata",              imageSrc: "http://img.b2bpic.net/free-photo/black-sedan-wet-highway-rain-rainy-drive_169016-69903.jpg",              imageAlt: "BMW 320i luxury sedan"},
            {
              id: "2",              name: "Mercedes-Benz GLE",              price: "35,000€",              variant: "E Zezë  7 Vende",              imageSrc: "http://img.b2bpic.net/free-photo/happy-tourist-couple-long-shot_23-2148637299.jpg",              imageAlt: "Mercedes-Benz GLE premium SUV"},
            {
              id: "3",              name: "Hyundai i20",              price: "9,500€",              variant: "E Bardhe  Ekonomike",              imageSrc: "http://img.b2bpic.net/free-photo/blue-crossover-driving-autumn-road-side-view-car-motion_169016-69911.jpg",              imageAlt: "Hyundai i20 compact car"},
          ]}
          buttons={[{ text: "Shiko të Gjithë Makinat", href: "#contact" }]}
          containerClassName="max-w-7xl mx-auto px-4 py-20"
          cardClassName="bg-card rounded-xl overflow-hidden shadow-soft hover:shadow-md transition-all"
          imageClassName="w-full h-64 object-cover"
          cardNameClassName="text-lg font-semibold text-foreground mt-4"
          cardPriceClassName="text-2xl font-bold text-accent mt-2"
        />
      </div>

      <div id="why-us" data-section="why-us">
        <FeatureBento
          title="Përse të Zgjedhësh Autobliss"
          description="Ne ofrojmë zgjedhje të pashembullt, transparency të plotë dhe shërbim personal që e bën përvojën e blerjes së makinës të lehtë dhe të sigurt."
          tag="Avantazhet Tona"
          tagIcon={CheckCircle}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              title: "Inspektim Cilësie",              description: "Çdo makinë kontrollohet plotësisht nga mekanikë të sertifikuar.",              bentoComponent: "reveal-icon",              icon: Shield,              cardTitleClassName: "",              cardDescriptionClassName: "",              gridClassName: ""},
            {
              title: "Dokumentacion i Plotë",              description: "Të gjithë kërkuesimet ligjore dhe siguria e plotë e dokumentit.",              bentoComponent: "reveal-icon",              icon: CheckCircle,              cardTitleClassName: "",              cardDescriptionClassName: "",              gridClassName: ""},
            {
              title: "Çmime Transparente",              description: "Asnjë kostim fshirë. Çmimi që sheh është çmimi që paguan.",              bentoComponent: "reveal-icon",              icon: DollarSign,              cardTitleClassName: "",              cardDescriptionClassName: "",              gridClassName: ""},
            {
              title: "Suport i Shpejtë",              description: "Përgjigje në çdo pyetje brenda disa minutash. Telepononi në +355 68 819 0000.",              bentoComponent: "reveal-icon",              icon: Phone,              cardTitleClassName: "",              cardDescriptionClassName: "",              gridClassName: ""},
            {
              title: "Garanzie Opsionale",              description: "Opsione garantie të gjerë deri në 24 muaj për paqen e mendjes tuaj.",              bentoComponent: "reveal-icon",              icon: Award,              cardTitleClassName: "",              cardDescriptionClassName: "",              gridClassName: ""},
            {
              title: "Lokacion Ideal",              description: "Vendosur në Ramazan Gaxherri, Tiranë – lehtë për t'u arritur.",              bentoComponent: "reveal-icon",              icon: MapPin,              cardTitleClassName: "",              cardDescriptionClassName: "",              gridClassName: ""},
          ]}
          containerClassName="max-w-7xl mx-auto px-4 py-20"
          textBoxClassName="text-center mb-12"
          titleClassName="text-4xl font-bold text-foreground mb-4"
          descriptionClassName="text-lg text-foreground/70"
          gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Ç'Thonë Klientët Tanë"
          description="Lexoni këto komente të vërteta nga njerëzit që kanë blerë makinën e tyre në Autobliss."
          tag="Kohimet e Klientëve"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Ariana Hoxha, Drejtoreshë Biznesi",              date: "Date: 15 Tetor 2024",              title: "Përvoja më e mirë e blerjes!",              quote: "Kam përjetuar përvojën më të mirë të blerjes në Autobliss. Stafi ishte shumë i durueshëm dhe transparent. Makina që bleva funksionon perfekt dhe e bëra shumë mirë.",              tag: "5 Yje",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/black-sedan-wet-highway-rain-rainy-drive_169016-69903.jpg",              avatarAlt: "Ariana Hoxha"},
            {
              id: "2",              name: "Fatmir Dervishi, Inxhinier",              date: "Date: 22 Shtator 2024",              title: "Rekomandoj Autobliss pa dyshim!",              quote: "Autobliss solli profesionalizëm në përvojën time të blerjes. Nuk më nxituan, u përgjigjen të gjitha pyetjeve të mia dhe nuk pati asnjë surprizë. Makina ime është në gjendje të përsosur.",              tag: "5 Yje",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/happy-tourist-couple-long-shot_23-2148637299.jpg",              avatarAlt: "Fatmir Dervishi"},
            {
              id: "3",              name: "Luiza Manaj, Mjeke",              date: "Date: 8 Gusht 2024",              title: "Shërbim i shkëlqyer dhe i kujdesshëm",              quote: "Si grua me kërkesa të larta, më ndeeshin shumë shërbimi i personalizuar dhe konsultimi i pqetë në Autobliss. Makina ime ishte saktësisht ajo që doja. Shumë mirë!",              tag: "5 Yje",              avatarSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/blue-crossover-driving-autumn-road-side-view-car-motion_169016-69911.jpg",              avatarAlt: "Luiza Manaj"},
            {
              id: "4",              name: "Xhoan Kaza, Avokat",              date: "Date: 10 Korrik 2024",              title: "Besim dhe transparencë e plotë",              quote: "Në profesionin tim kemi parë shumë mashtrime. Autobliss ishte përjashtim i mirë – përfundimisht, të vërtetë dhe i drejt. Rekomandoj këtë kompani me zemrë të plotë.",              tag: "5 Yje",              avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/black-sedan-wet-highway-rain-rainy-drive_169016-69903.jpg",              avatarAlt: "Xhoan Kaza"},
            {
              id: "5",              name: "Ema Gega, Arkitektureshë",              date: "Date: 25 Maj 2024",              title: "Estetike dhe funksionalitet në rregull",              quote: "Pasi kam sy për detajet, bllokimi i makines në Autobliss më veçoi. E gjetën përfundimisht makinen e duhur dhe sigurisht përpilon të gjithë dokumentacionin. Përvojë e këndshme.",              tag: "5 Yje",              avatarSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/happy-tourist-couple-long-shot_23-2148637299.jpg",              avatarAlt: "Ema Gega"},
            {
              id: "6",              name: "Petrit Osmani, Ndërmarrës",              date: "Date: 3 Prill 2024",              title: "Çmime të drejtë, shërbim e sigurt",              quote: "Bleva një makinë për veprimtarinë time. Autobliss ishte i vetmi vend ku ndihja realisht se mund të besonte. Çmimet janë të përmbajtshme dhe makinat janë në gjendje të mirë. Do të kthej këtu për të ardhmen.",              tag: "5 Yje",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/blue-crossover-driving-autumn-road-side-view-car-motion_169016-69911.jpg",              avatarAlt: "Petrit Osmani"},
          ]}
          containerClassName="max-w-7xl mx-auto px-4 py-20"
          textBoxClassName="text-center mb-12"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Gati për të gjetur makinën e ëndrrave tuaj? Kontaktojeni Autobliss sot dhe le që ekipi ynë i dedikuar të ju ndihmojë."
          animationType="entrance-slide"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Telefononi: +355 68 819 0000", href: "tel:+355688190000" },
            { text: "Vizitoni Tani", href: "#footer" },
          ]}
          ariaLabel="Contact section"
          containerClassName="py-16 px-4"
          contentClassName="max-w-3xl mx-auto text-center"
          textClassName="text-3xl md:text-4xl font-bold text-foreground mb-8"
          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Autobliss"
          columns={[
            {
              items: [
                { label: "Rreth Nesh", href: "#about" },
                { label: "Makinat", href: "#vehicles" },
                { label: "Përse Ne", href: "#why-us" },
                { label: "Kohimet", href: "#testimonials" },
              ],
            },
            {
              items: [
                { label: "Telefononi", href: "tel:+355688190000" },
                { label: "Adresa: Ramazan Gaxherri, Tiranë 1001", href: "#" },
                { label: "Orari: Çdoditë deri 21:00", href: "#" },
                { label: "Email: info@autobliss.al", href: "mailto:info@autobliss.al" },
              ],
            },
            {
              items: [
                { label: "Facebook", href: "https://facebook.com/autobliss" },
                { label: "Instagram", href: "https://instagram.com/autobliss" },
                { label: "Privacy", href: "#" },
                { label: "Kushte Përdorimi", href: "#" },
              ],
            },
          ]}
          ariaLabel="Site footer"
          containerClassName="bg-card border-t border-accent/20 py-12 px-4"
          columnsClassName="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"
          columnClassName="space-y-4"
          itemClassName="text-foreground hover:text-accent transition-colors duration-200 flex items-center gap-2"
          iconClassName="w-4 h-4 text-accent"
        />
      </div>
    </ThemeProvider>
  );
}
