"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { CalendarCheck, Coffee, Sparkles } from "lucide-react";

const assetMap = [
  {"id":"navbar-logo","url":"http://img.b2bpic.net/free-vector/business-card-template_52683-48265.jpg","alt":"g8 car studio logo design"},
  {"id":"hero-background","url":"http://img.b2bpic.net/free-photo/night-bokeh_1361-164.jpg","alt":"cinematic photo clean shiny car night"},
  {"id":"hero-marquee-icon-1","url":"http://img.b2bpic.net/free-photo/hands-businesswoman-using-laptop-office_1262-3214.jpg","alt":"calendar time schedule icon blue"},
  {"id":"hero-marquee-icon-2","url":"http://img.b2bpic.net/free-photo/hotel-flat-icon-set_1284-4898.jpg","alt":"comfortable waiting area icon lounge"},
  {"id":"hero-marquee-icon-3","url":"http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138935.jpg","alt":"car wax coating icon blue"},
  {"id":"about-image","url":"http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22303.jpg","alt":"luxurious waiting area car studio"},
  {"id":"service-1","url":"http://img.b2bpic.net/free-photo/close-up-bubbles-splashing-water_23-2147798199.jpg","alt":"basic car wash process foam"},
  {"id":"service-2","url":"http://img.b2bpic.net/free-photo/still-life-cleaning-tools_23-2150552221.jpg","alt":"full car wash interior exterior"},
  {"id":"service-3","url":"http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-exterior_23-2148194145.jpg","alt":"car wax application professional"},
  {"id":"service-4","url":"http://img.b2bpic.net/free-photo/woman-with-gloves-cleaning-gym-equipment_23-2148766022.jpg","alt":"car interior deep cleaning"},
  {"id":"service-5","url":"http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193561.jpg","alt":"car polishing machine buffing"},
  {"id":"service-6","url":"http://img.b2bpic.net/free-photo/brave-strong-woman-her-little-helper-are-posing-photographer-auto-workshop_613910-1826.jpg","alt":"premium car detailing services"},
  {"id":"testimonial-1","url":"http://img.b2bpic.net/free-photo/man-checking-out-new-car_23-2148130139.jpg","alt":"smiling man car owner happy"},
  {"id":"testimonial-2","url":"http://img.b2bpic.net/free-photo/woman-having-conversation-with-someone-using-sign-language_23-2148681070.jpg","alt":"businesswoman happy car wash"},
  {"id":"testimonial-3","url":"http://img.b2bpic.net/free-photo/man-looking-car-car-showroom_1303-14562.jpg","alt":"young man happy car service"},
  {"id":"testimonial-4","url":"http://img.b2bpic.net/free-photo/mechanic-standing-repair-shop-showing-thumbs-up_1170-1375.jpg","alt":"older gentleman happy car wash"},
  {"id":"testimonial-5","url":"http://img.b2bpic.net/free-photo/portrait-beautiful-blonde-sexy-fashion-woman-model-cap-all-black-with-bright-makeup-near-red-city-car-with-open-hood_627829-1141.jpg","alt":"young female client smiling"},
  {"id":"footer-logo","url":"http://img.b2bpic.net/free-vector/car-wash-business-card-template_742173-2947.jpg","alt":"g8 car studio logo dark minimal"}
];

const getAssetUrl = (id) => {
  const asset = assetMap.find((a) => a.id === id);
  return asset ? asset.url : '';
};

const getAssetAlt = (id) => {
  const asset = assetMap.find((a) => a.id === id);
  return asset ? asset.alt : '';
};

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLarge"
      background="noiseDiagonalGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="G8 Car Studio"
          navItems={[
            { name: "Послуги", id: "#services" },
            { name: "Як це працює", id: "#how-it-works" },
            { name: "Відгуки", id: "#testimonials" },
            { name: "Контакти", id: "#contact" }
          ]}
          button={{
            text: "Записатись",            href: "#contact"
          }}
          logoSrc={getAssetUrl("navbar-logo")}
          logoAlt={getAssetAlt("navbar-logo")}
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroBillboardTestimonial
          title="Твоє авто заслуговує на досконалість."
          description="Преміальний догляд за автомобілем. Запис онлайн. Починаємо вчасно."
          background={{ variant: "animated-grid" }}
          buttons={[
            { text: "Записатись зараз", href: "#contact" },
            { text: "Переглянути послуги", href: "#services" }
          ]}
          testimonials={[
            { name: "Ігор П.", handle: "@igor.p", testimonial: "Хлопці дуже добре миють, є комфортна зона очікування, завжди можна зателефонувати і дізнатися, чи є місце. Всі види воскового покриття. Загалом чудове миття.", rating: 5, imageSrc: getAssetUrl("testimonial-1"), imageAlt: getAssetAlt("testimonial-1") },
            { name: "Владімір Л.", handle: "@vladimir.l", testimonial: "Записався на конкретний час — приїхав, почали вчасно. Кузов та салон на відмінно.", rating: 5, imageSrc: getAssetUrl("testimonial-2"), imageAlt: getAssetAlt("testimonial-2") },
            { name: "Ліка С.", handle: "@lika.s", testimonial: "Дуже здорово! Головне — уточнюйте ціну заздалегідь, щоб все було прозоро :)", rating: 5, imageSrc: getAssetUrl("testimonial-3"), imageAlt: getAssetAlt("testimonial-3") },
            { name: "Сергій К.", handle: "@sergiy.k", testimonial: "Вже кілька років довіряю своє авто тільки G8 Car Studio. Завжди бездоганний результат та приємний сервіс.", rating: 5, imageSrc: getAssetUrl("testimonial-4"), imageAlt: getAssetAlt("testimonial-4") },
            { name: "Олена В.", handle: "@olena.v", testimonial: "Зручний запис, ніколи не чекаю. Авто завжди сяє, а зона очікування дуже комфортна. Рекомендую!", rating: 5, imageSrc: getAssetUrl("testimonial-5"), imageAlt: getAssetAlt("testimonial-5") }
          ]}
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          imageSrc={getAssetUrl("hero-background")}
          imageAlt={getAssetAlt("hero-background")}
          marqueeItems={[
            { type: "text-icon", text: "Запис за часом", icon: CalendarCheck },
            { type: "text-icon", text: "Зона очікування", icon: Coffee },
            { type: "text-icon", text: "Воскове покриття", icon: Sparkles }
          ]}
        />
      </div>
      <div id="about" data-section="about">
        <SplitAbout
          title="Турбота про твоє авто, яка відчувається."
          description="G8 Car Studio — це не просто автомийний комплекс. Це простір, де кожна деталь твого автомобіля отримує преміальний догляд. Ми гарантуємо пунктуальність, комфортну зону очікування та бездоганний результат, щоб ти завжди почувався впевнено за кермом."
          bulletPoints={[
            { title: "Зручний Запис", description: "Онлайн або телефоном на конкретний час, без очікування." },
            { title: "Комфортна Зона Очікування", description: "Розслабся, поки твоє авто отримує найкращий догляд." },
            { title: "Широкий Спектр Послуг", description: "Від базового миття до преміального детейлінгу." }
          ]}
          mediaAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          imageSrc={getAssetUrl("about-image")}
          imageAlt={getAssetAlt("about-image")}
        />
      </div>
      <div id="services" data-section="services">
        <FeatureCardTwentyThree
          title="Що ми робимо"
          description="Обирай досконалий догляд для свого авто з нашим широким спектром преміальних послуг, створених для задоволення найвимогливіших потреб."
          features={[
            { id: "service-1", title: "Базове миття", tags: ["Кузов", "Скло", "Диски"], imageSrc: getAssetUrl("service-1"), imageAlt: getAssetAlt("service-1") },
            { id: "service-2", title: "Комплексне миття", tags: ["Кузов", "Салон", "Популярне"], imageSrc: getAssetUrl("service-2"), imageAlt: getAssetAlt("service-2") },
            { id: "service-3", title: "Воскове покриття", tags: ["Захист", "Блиск", "Кілька видів"], imageSrc: getAssetUrl("service-3"), imageAlt: getAssetAlt("service-3") },
            { id: "service-4", title: "Хімчистка салону", tags: ["Глибоке очищення", "Сидіння", "Килимки"], imageSrc: getAssetUrl("service-4"), imageAlt: getAssetAlt("service-4") },
            { id: "service-5", title: "Полірування", tags: ["Усунення подряпин", "Відновлення блиску"], imageSrc: getAssetUrl("service-5"), imageAlt: getAssetAlt("service-5") },
            { id: "service-6", title: "Детейлінг", tags: ["Преміум догляд", "Під ключ", "Максимальний"], imageSrc: getAssetUrl("service-6"), imageAlt: getAssetAlt("service-6") }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="how-it-works" data-section="how-it-works">
        <MetricCardTwo
          title="Просто. Швидко. Якісно."
          description="Твій ідеальний догляд за автомобілем всього у три кроки, розроблені для максимальної зручності та ефективності."
          metrics={[
            { id: "step-1", value: "1", description: "Обери час. Подзвони або запишись онлайн на зручний час." },
            { id: "step-2", value: "2", description: "Привези авто. Ми починаємо точно за розкладом, без черг." },
            { id: "step-3", value: "3", description: "Забери блискуче. Твій автомобіль виглядатиме як новий, готовий вражати." }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Що кажуть наші клієнти"
          description="Ми пишаємось нашою репутацією та довірою, яку нам надають клієнти. 4.7 ★ · 180+ відгуків на Google."
          testimonials={[
            { id: "1", name: "Ігор П.", role: "Власник Tesla Model S", company: "Kyiv Tech Solutions", rating: 5, imageSrc: getAssetUrl("testimonial-1"), imageAlt: getAssetAlt("testimonial-1") },
            { id: "2", name: "Владімір Л.", role: "Підприємець", company: "L'Cars Group", rating: 5, imageSrc: getAssetUrl("testimonial-2"), imageAlt: getAssetAlt("testimonial-2") },
            { id: "3", name: "Ліка С.", role: "Блогерка", company: "GlamDrive", rating: 5, imageSrc: getAssetUrl("testimonial-3"), imageAlt: getAssetAlt("testimonial-3") },
            { id: "4", name: "Сергій К.", role: "Експерт з авто", company: "AutoPro Ukraine", rating: 5, imageSrc: getAssetUrl("testimonial-4"), imageAlt: getAssetAlt("testimonial-4") },
            { id: "5", name: "Олена В.", role: "Фінансист", company: "InvestUA", rating: 5, imageSrc: getAssetUrl("testimonial-5"), imageAlt: getAssetAlt("testimonial-5") }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Маєш питання?"
          sideDescription="Знайди відповіді на найпоширеніші запитання про G8 Car Studio, щоб бути повністю впевненим у своєму виборі."
          faqs={[
            { id: "faq-1", title: "Чи можу я записатись онлайн?", content: "Так, ми пропонуємо зручний онлайн-запис через наш сайт, або ти завжди можеш зателефонувати нам, щоб забронювати час." },
            { id: "faq-2", title: "Які види воскового покриття ви пропонуєте?", content: "Ми пропонуємо кілька видів воскового покриття, від базового до преміального, які забезпечують довготривалий блиск та захист. Детальніше про це можна дізнатись у наших консультантів." },
            { id: "faq-3", title: "Чи є у вас зона очікування для клієнтів?", content: "Так, ми подбали про твій комфорт. У нас є затишна та сучасна зона очікування, де ти можеш відпочити, поки ми піклуємось про твоє авто." },
            { id: "faq-4", title: "Які способи оплати ви приймаєте?", content: "Ми приймаємо оплату готівкою, банківськими картками та безготівковим розрахунком." }
          ]}
          faqsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactText
          text="Готові повернути авто до ідеального стану? Запишись зараз — і ми почнемо вчасно."
          buttons={[
            { text: "Записатись онлайн", href: "#contact" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          animationType="entrance-slide"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          logoText="G8 Car Studio"
          columns={[
            { title: "Навігація", items: [{ label: "Послуги", href: "#services" }, { label: "Як це працює", href: "#how-it-works" }, { label: "Відгуки", href: "#testimonials" }, { label: "Контакти", href: "#contact" }] },
            { title: "Контакти", items: [{ label: "Адреса: Одеса, вул. Прикладна, 8", href: "https://maps.app.goo.gl/example" }, { label: "Телефон: +38 (0XX) XXX-XX-XX", href: "tel:+380XXXXXXXXX" }, { label: "Години роботи: Пн-Нд: 9:00 - 20:00", href: "#" }] },
            { title: "Ми у соцмережах", items: [{ label: "Instagram", href: "https://instagram.com/g8carstudio" }, { label: "TikTok", href: "https://tiktok.com/@g8carstudio" }] }
          ]}
          copyrightText="© 2025 G8 Car Studio. Всі права захищено."
          logoSrc={getAssetUrl("footer-logo")}
          logoAlt={getAssetAlt("footer-logo")}
        />
      </div>
    </ThemeProvider>
  );
}
