"use client"
import { Shield, TrendingUp, Car, Users, Star, BarChart3, Quote, DollarSign, Sparkles, Zap, Crown, HelpCircle } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="noiseGradient"
      cardStyle="spotlight"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Automobilі", id: "products" },
            { name: "Про нас", id: "about" },
            { name: "Оцінка", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Контакти", id: "contact" }
          ]}
          brandName="CarfaxUK"
          bottomLeftText="Українська автомобільна платформа"
          bottomRightText="support@carfaxuk.ua"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Найбільша платформа автомобільних оцінок в Україні"
          description="Знайдіть ідеальний автомобіль з прозорими оцінками, детальними звітами та надійними інформаціями про кожне транспортне засіб на нашій платформі."
          tag="Безопасні покупки"
          tagIcon={Shield}
          buttons={[
            { text: "Переглянути автомобілі", href: "#products" },
            { text: "Для дилерів", href: "#pricing" }
          ]}
          carouselItems={[
            { id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4rtfnv", imageAlt: "Преміальний седан" },
            { id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=a3xdvt", imageAlt: "Сучасний кросовер" },
            { id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xg102j", imageAlt: "Спортивний автомобіль" },
            { id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5ppnsq", imageAlt: "Сімейний універсал" },
            { id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j6w4yh", imageAlt: "Електричний автомобіль" },
            { id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ppay5s", imageAlt: "Компактний хетчбек" }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Надійна платформа для покупців та продавців автомобілів"
          description="CarfaxUK демократизує інформацію про автомобілі в Україні, надаючи прозорі оцінки, детальні звіти про історію та експертні поради для кожної покупки. Ми забезпечуємо дилерів та приватних продавців інструментами для успішної торгівлі."
          tag="Наша місія"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=avlxtx"
          imageAlt="Автомобільна платформа"
          buttons={[
            { text: "Дізнатися більше", href: "#contact" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Обрані автомобілі"
          description="Переглядайте наш збірний каталог преміальних та перевірених автомобілів з рейтингами та відгуками покупців."
          tag="Топові пропозиції"
          tagIcon={TrendingUp}
          buttons={[
            { text: "Переглянути всі", href: "#" }
          ]}
          products={[
            {
              id: "1",
              brand: "BMW",
              name: "BMW 5 Series Sedan 2022",
              price: "₴850,000",
              rating: 5,
              reviewCount: "328",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o3gq44",
              imageAlt: "BMW 5 Series"
            },
            {
              id: "2",
              brand: "Mercedes-Benz",
              name: "Mercedes GLE SUV 2023",
              price: "₴920,000",
              rating: 5,
              reviewCount: "412",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wbtre4",
              imageAlt: "Mercedes GLE"
            },
            {
              id: "3",
              brand: "Audi",
              name: "Audi A6 Sedan 2021",
              price: "₴750,000",
              rating: 4,
              reviewCount: "287",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4uruyf",
              imageAlt: "Audi A6"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Наш вплив на ринок України"
          description="Цифри, які доводять надійність та успіх CarfaxUK як лідера автомобільного маркетплейсу."
          tag="Статистика"
          tagIcon={BarChart3}
          metrics={[
            {
              id: "1",
              value: "45K+",
              title: "Автомобілів",
              description: "Активних оголошень на платформі",
              icon: Car
            },
            {
              id: "2",
              value: "120K+",
              title: "Користувачів",
              description: "Задоволених покупців і дилерів",
              icon: Users
            },
            {
              id: "3",
              value: "8.9★",
              title: "Рейтинг",
              description: "Середня оцінка платформи на основі відгуків",
              icon: Star
            },
            {
              id: "4",
              value: "2.3M+",
              title: "Оцінок",
              description: "Викладено детальних оцінок автомобілів",
              icon: TrendingUp
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Що говорять наші клієнти"
          description="Реальні відгуки від задоволених покупців і дилерів, які обрали CarfaxUK."
          tag="Відзиви"
          tagIcon={Quote}
          testimonials={[
            {
              id: "1",
              name: "Олег Волошин",
              role: "Приватний покупець",
              company: "Київ",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k0qa44",
              imageAlt: "Олег Волошин"
            },
            {
              id: "2",
              name: "Марія Коваленко",
              role: "Власниця дилерського центру",
              company: "Харків",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w3931x",
              imageAlt: "Марія Коваленко"
            },
            {
              id: "3",
              name: "Ігор Петренко",
              role: "Автомеханік",
              company: "Львів",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=b0no17",
              imageAlt: "Ігор Петренко"
            },
            {
              id: "4",
              name: "Наталія Мазур",
              role: "Дилер автомобілів",
              company: "Одеса",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9m136s",
              imageAlt: "Наталія Мазур"
            },
            {
              id: "5",
              name: "Сергій Бовтів",
              role: "Експерт з продажу",
              company: "Дніпро",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=axk9qk",
              imageAlt: "Сергій Бовтів"
            },
            {
              id: "6",
              name: "Юлія Синицька",
              role: "Координатор продажу",
              company: "Запоріжжя",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=i8fx1o",
              imageAlt: "Юлія Синицька"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Пакети для дилерів"
          description="Оберіть план, який найкраще відповідає вашим потребам продажу автомобілів."
          tag="Ціни"
          tagIcon={DollarSign}
          buttons={[
            { text: "Почати безплатно", href: "#contact" }
          ]}
          plans={[
            {
              id: "basic",
              badge: "Для початківців",
              badgeIcon: Sparkles,
              price: "₴2,999/мес",
              subtitle: "Ідеально для малих дилерів",
              buttons: [
                { text: "Почати", href: "#" }
              ],
              features: [
                "До 10 активних оголошень",
                "Базова оцінка автомобілів",
                "Електронна пошта підтримки",
                "Статистика переглядів",
                "Базовий CRM"
              ]
            },
            {
              id: "pro",
              badge: "Найпопулярніший",
              badgeIcon: Zap,
              price: "₴7,999/мес",
              subtitle: "Для активних дилерів",
              buttons: [
                { text: "Розпочати", href: "#" }
              ],
              features: [
                "До 50 активних оголошень",
                "Розширена оцінка і звіти",
                "Пріоритетна підтримка 24/7",
                "Аналітика продажу",
                "Розширений CRM",
                "Інтеграція API"
              ]
            },
            {
              id: "premium",
              badge: "Для експертів",
              badgeIcon: Crown,
              price: "₴14,999/мес",
              subtitle: "Для крупних дилерських мереж",
              buttons: [
                { text: "Зв'язатися", href: "#" }
              ],
              features: [
                "Необмежені оголошення",
                "Повне управління інвентарем",
                "Персональний менеджер акаунту",
                "Розширена аналітика",
                "Пользовательский брендинг",
                "API та вебхуки",
                "Лідирование автоматизації"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Часто задавані питання"
          description="Знайти відповіді на поширені питання про покупку та продаж автомобілів на CarfaxUK."
          tag="Допомога"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",
              title: "Як отримати оцінку автомобіля?",
              content: "Введіть марку, модель, рік випуску та км пробігу в нашу форму оцінки. Наш алгоритм виконає розрахунок на основі ринкових даних та історії автомобіля за лічені секунди."
            },
            {
              id: "2",
              title: "Чи безпечна платформа для покупців?",
              content: "Так, ми перевіряємо всі оголошення, надаємо детальні звіти про історію автомобіля та пропонуємо гарантію задоволення покупців. Безпека вашої інформації - наш пріоритет."
            },
            {
              id: "3",
              title: "Скільки коштує розміщення оголошення?",
              content: "Вартість залежить від обраного пакету. Базовий пакет починається з ₴2,999/місяць і включає до 10 оголошень. Преміум-план пропонує необмежені оголошення за ₴14,999/місяць."
            },
            {
              id: "4",
              title: "Як дилер я можу інтегрувати API?",
              content: "API доступна для планів Pro та Premium. Ви можете автоматизувати синхронізацію інвентарю, оновлення цін та управління оголошеннями через нашу REST API з повною документацією."
            },
            {
              id: "5",
              title: "Які методи оплати приймаються?",
              content: "Ми приймаємо кредитні карти (Visa, Mastercard), банківські переводи та системи платежів (ПриватБанк, Укрексімбанк). Рахунки виставляються щомісячно в автоматичному режимі."
            },
            {
              id: "6",
              title: "Як отримати підтримку?",
              content: "Користувачі базового плану отримують підтримку через електронну пошту з відповіддю протягом 24 годин. Клієнти Pro та Premium мають доступ до 24/7 live chat та персонального менеджера акаунту."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Готові розпочати свою дорогу з CarfaxUK? Зв'яжіться з нашою командою сьогодні, щоб отримати персоналізовані рекомендації та спеціальні пропозиції для вашого бізнесу."
          animationType="reveal-blur"
          buttons={[
            { text: "Написати нам", href: "mailto:support@carfaxuk.ua" },
            { text: "Залишити заявку", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={[
            {
              items: [
                { label: "Автомобілі", href: "products" },
                { label: "Оцінка", href: "pricing" },
                { label: "Для дилерів", href: "#" }
              ]
            },
            {
              items: [
                { label: "Про нас", href: "about" },
                { label: "Блог", href: "#" },
                { label: "Кар'єра", href: "#" }
              ]
            },
            {
              items: [
                { label: "Підтримка", href: "contact" },
                { label: "FAQ", href: "faq" },
                { label: "Контакти", href: "#" }
              ]
            },
            {
              items: [
                { label: "Політика конфіденційності", href: "#" },
                { label: "Умови користування", href: "#" },
                { label: "Карта сайту", href: "#" }
              ]
            }
          ]}
          logoText="CarfaxUK"
        />
      </div>
    </ThemeProvider>
  );
}