"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="medium"
        background="blurBottom"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Hem",          id: "hero"},
        {
          name: "Tjänster",          id: "services"},
        {
          name: "Om oss",          id: "about"},
        {
          name: "Kontakt",          id: "contact"},
      ]}
      brandName="Hammarby Bilreparationer"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "gradient-bars"}}
      title="Din pålitliga bilverkstad i Hammarby"
      description="Hög kvalitet, snabb service och 4,8 stjärnor i kundnöjdhet. Vi tar hand om din bil med expertis och ärlighet."
      buttons={[
        {
          text: "Ring oss nu",          href: "tel:08814297"},
        {
          text: "Boka tid",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/advanced-diagnostic-lab-with-metallic-equipment-sterile-testing-environment_482257-124278.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881860.jpg",          alt: "Modern automobile mechanic composition"},
        {
          src: "http://img.b2bpic.net/free-photo/two-cars-lifting-maintenance-garage-service-station_627829-3878.jpg",          alt: "Two cars lifting in maintenance at garage service station"},
        {
          src: "http://img.b2bpic.net/free-photo/toolbox-car_1170-1608.jpg",          alt: "Toolbox under a car"},
        {
          src: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881624.jpg",          alt: "Modern automobile mechanic composition"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-happy-car-service-owner-with-arms-crossed-his-workshop_637285-9434.jpg",          alt: "Portrait of happy car service owner with arms crossed at his workshop"},
      ]}
      avatarText="Över 500 nöjda kunder"
      marqueeItems={[
        {
          type: "text",          text: "Däckbyte"},
        {
          type: "text",          text: "Motoroptimering"},
        {
          type: "text",          text: "Bromsservice"},
        {
          type: "text",          text: "AC-kontroll"},
        {
          type: "text",          text: "Felsökning"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="Om Hammarby Bilreparationer"
      buttons={[
        {
          text: "Boka tid",          href: "#contact"},
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      features={[
        {
          title: "Bilservice",          description: "Fullständig service enligt tillverkarens rekommendationer.",          imageSrc: "http://img.b2bpic.net/free-photo/two-coworkers-using-laptop-while-working-auto-repair-shop_637285-11597.jpg"},
        {
          title: "Reparationer",          description: "Expertis inom motor, växellåda och chassi.",          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-inspecting-wheel-system_23-2147897943.jpg"},
        {
          title: "AC-service",          description: "Vi ser till att din klimatanläggning fungerar perfekt.",          imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-using-diagnostic-tool-while-repairing-air-conditioning-system-car-auto-repair-shop_637285-4279.jpg"},
      ]}
      title="Våra tjänster"
      description="Vi erbjuder omfattande tjänster för att hålla din bil i toppskick."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "4.8",          title: "Kundbetyg",          items: [
            "Baserat på hundratals omdömen"],
        },
        {
          id: "m2",          value: "100%",          title: "Erfarenhet",          items: [
            "Certifierad personal"],
        },
        {
          id: "m3",          value: "Samma dag",          title: "Service",          items: [
            "Korta väntetider"],
        },
      ]}
      title="Varför välja oss"
      description="Kvalitet och förtroende är kärnan i vår verksamhet."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          title: "Mycket nöjd!",          quote: "Snabb och bra service!",          name: "Erik S.",          role: "Kund",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg"},
        {
          id: "t2",          title: "Proffsigt",          quote: "Ärliga och professionella.",          name: "Maria L.",          role: "Kund",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-modern-woman-home_23-2148115589.jpg"},
        {
          id: "t3",          title: "Toppen",          quote: "Rekommenderas starkt!",          name: "Johan P.",          role: "Kund",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-looking-car_23-2150171223.jpg"},
        {
          id: "t4",          title: "Bra pris",          quote: "Snabba tider och trevlig personal.",          name: "Sofia K.",          role: "Kund",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-mechanic-showing-thumbs-up_1170-1235.jpg"},
        {
          id: "t5",          title: "Bästa verkstaden",          quote: "Hittar fel som andra missar.",          name: "Anders M.",          role: "Kund",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-jolly-car-dealership-agent-hired-respond-client-inquiries_482257-118268.jpg"},
      ]}
      title="Kundomdömen"
      description="Vad våra kunder säger om oss."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Bosch",        "Mobil 1",        "Michelin",        "Continental",        "Castrol",        "Hella",        "NGK"]}
      title="Vi samarbetar med ledande leverantörer"
      description="Vi använder endast delar och vätskor av högsta kvalitet för din säkerhet."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "Hur bokar jag service?",          content: "Du kan boka tid genom att ringa oss eller fylla i kontaktformuläret."},
        {
          id: "q2",          title: "Har ni garanti på arbetet?",          content: "Ja, vi lämnar garanti på alla våra reparationer."},
        {
          id: "q3",          title: "Vilka märken jobbar ni med?",          content: "Vi servar alla bilmärken och modeller."},
      ]}
      sideTitle="Vanliga frågor"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Kontakt"
      title="Boka tid hos oss"
      description="Besök oss på Bolidenvägen 12 eller kontakta oss för frågor."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Hammarby Bilreparationer",          items: [
            {
              label: "Bolidenvägen 12, Johanneshov",              href: "#"},
            {
              label: "08-81 42 97",              href: "tel:08814297"},
          ],
        },
        {
          title: "Tjänster",          items: [
            {
              label: "Service",              href: "#services"},
            {
              label: "Reparationer",              href: "#services"},
            {
              label: "Däckbyte",              href: "#services"},
          ],
        },
      ]}
      bottomLeftText="© 2024 Hammarby Bilreparationer"
      bottomRightText="Alla rättigheter reserverade"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}