"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Award, CheckCircle, Phone, Shield, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="JM Detailing"
          navItems={[
            { name: "Palvelut", id: "services" },
            { name: "Miksi valita meidät", id: "about" },
            { name: "Hinnasto", id: "pricing" },
            { name: "Yhteystiedot", id: "contact" },
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="JM Detailing"
          description="Laadukkaat autonhoitopalvelut Hämeenlinnassa – kiillotukset, pinnoitukset ja premium käsinpesut."
          buttons={[
            { text: "Varaa aika", href: "https://jmdetailingoy.gmail.com" },
            { text: "Katso palvelut", href: "#services" },
          ]}
          background={{ variant: "radial-gradient" }}
          imageSrc="http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193557.jpg"
          imageAlt="Kiiltävä musta auto detailingin jälkeen"
          mediaAnimation="slide-up"
          frameStyle="card"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Ammattitasoista autonhoitoa"
          metrics={[
            { icon: Sparkles, label: "Premium tuotteet", value: "Koch-Chemie" },
            { icon: Shield, label: "Keraamiset pinnoitteet", value: "1–5 vuotta" },
            { icon: Award, label: "Asiakastyytyväisyys", value: "#1 prioriteetti" },
            { icon: CheckCircle, label: "Räätälöidyt palvelut", value: "Jokaiselle autolle" },
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardThree
          title="Palvelumme"
          description="Kattava valikoima premium autonhoitopalveluita jokaiseen tarpeeseen"
          tag="Palvelut"
          features={[
            {
              id: "01",              title: "Kiillotukset & myllytykset",              description: "Pinnan epätäydellisyyksien poistaminen ja loisto",              imageSrc: "http://img.b2bpic.net/free-photo/man-polish-car-garage_1157-26060.jpg",              imageAlt: "Kiillotuspalvelu"},
            {
              id: "02",              title: "Keraamiset pinnoitteet",              description: "Pitkäkestoinen suojaus ja loisto",              imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30596.jpg",              imageAlt: "Keraminen pinnoite"},
            {
              id: "03",              title: "Premium käsinpesut",              description: "Varovainen ja ammattitaitoinen pesu",              imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2002.jpg",              imageAlt: "Premium pesu"},
            {
              id: "04",              title: "Sisätilojen pesut & suojaukset",              description: "Upholstery ja sisätilan puhdistus",              imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22315.jpg",              imageAlt: "Sisätilojen pesu"},
            {
              id: "05",              title: "Ajovalojen ehostus",              description: "Selkeyden ja turvallisuuden parantaminen",              imageSrc: "http://img.b2bpic.net/free-photo/man-gray-sweater-wipes-car-car-wash_1157-35957.jpg",              imageAlt: "Ajovalojen ehostus"},
            {
              id: "06",              title: "Otsonointi",              description: "Tehokasta hajunpoistopalvelua",              imageSrc: "http://img.b2bpic.net/free-photo/car-dashboard-radio-closeup-woman-sets-up-radio-while-driving-car_231208-7684.jpg",              imageAlt: "Otsonointi"},
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="bento-grid"
          useInvertedBackground={false}
          buttons={[{ text: "Katso hinnasto", href: "#pricing" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="beforeafter" data-section="beforeafter">
        <ProductCardTwo
          title="Näe ero"
          description="Detailing ei ole vain pesu, se on viimeistelyä – katsele ennen ja jälkeen -kuvaparia"
          tag="Tulokset"
          products={[
            {
              id: "1",              brand: "JM Detailing",              name: "Kiillotettu pintavire",              price: "Uusi loisto",              rating: 5,
              reviewCount: "Täydelliset tulokset",              imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342625.jpg",              imageAlt: "Ennen ja jälkeen"},
            {
              id: "2",              brand: "JM Detailing",              name: "Pinnoitettu suojaus",              price: "Pitkäkestoinen",              rating: 5,
              reviewCount: "Ammattilainen työ",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193556.jpg",              imageAlt: "Ennen ja jälkeen"},
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="two-columns-alternating-heights"
          useInvertedBackground={false}
          buttons={[{ text: "Varaa aika", href: "https://jmdetailingoy.gmail.com" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Läpinäkyvä hinnoittelu"
          description="Esimerkkejä palveluistamme – tarkempi hinnoittelu sopimuksen mukaan"
          tag="Palvelut"
          plans={[
            {
              id: "1",              badge: "Suosittu",              badgeIcon: Sparkles,
              price: "45€+",              subtitle: "Premium käsinpesu",              features: ["Koko auton pesu", "Kuivaus ja suojaus", "Sisätilojen imurointi"],
            },
            {
              id: "2",              badge: "Paras arvo",              badgeIcon: Award,
              price: "50€+",              subtitle: "Talvipesu",              features: ["Lika- ja suola-aineiden poistaminen", "Suojaava pesu", "Pohjan puhdistus"],
            },
            {
              id: "3",              badge: "Premium",              badgeIcon: Star,
              price: "85€/h",              subtitle: "Sisätilojen puhdistus",              features: ["Upholstery-pesu", "Nahkahuolto", "Lasi ja pinnat"],
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          buttons={[{ text: "Katso koko hinnasto", href: "https://jmdetailingoy.gmail.com" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="brands" data-section="brands">
        <SocialProofOne
          title="Käytämme vain ammattilaistason tuotteita"
          description="Brändien ja tuotteiden luottamus takaavat kestävän ja näyttävän lopputuloksen"
          tag="Laatu"
          names={["Koch-Chemie", "Colourlock", "Nordic Pro"]}
          logos={[
            "http://img.b2bpic.net/free-vector/gradient-car-rental-labels-collection_23-2149240450.jpg",            "http://img.b2bpic.net/free-vector/gradient-car-rental-labels-collection_23-2149240450.jpg",            "http://img.b2bpic.net/free-photo/man-with-tattoos-producing-craft-beer_23-2148110878.jpg"]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
          tagAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ota yhteyttä"
          tagIcon={Phone}
          title="Haluatko autollesi parasta?"
          description="Ota yhteyttä nyt ja varaa aika premium autonhoitopalavelustamme."
          buttons={[
            { text: "Varaa aika nyt", href: "https://jmdetailingoy.gmail.com" },
            { text: "050 527 0344", href: "tel:+358505270344" },
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttonAnimation="slide-up"
          tagAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="JM Detailing"
          columns={[
            {
              items: [
                { label: "Palvelut", href: "#services" },
                { label: "Hinnasto", href: "#pricing" },
                { label: "Miksi valita meidät", href: "#about" },
              ],
            },
            {
              items: [
                { label: "Osoite", href: "#" },
                { label: "Silmuntie 16, Hämeenlinna", href: "#" },
                { label: "050 527 0344", href: "tel:+358505270344" },
              ],
            },
            {
              items: [
                { label: "Sähköposti", href: "#" },
                { label: "jmdetailingoy@gmail.com", href: "mailto:jmdetailingoy@gmail.com" },
                { label: "Ma–Pe 9:00–17:00", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
