"use client"

import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Phone, Zap, FileText, Calculator, CreditCard, MessageSquare, TrendingUp, Users, Shield } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="medium"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: 'Електроенергія', id: 'services' },
            { name: 'Природний газ', id: 'services' },
            { name: 'Новини', id: 'news' },
            { name: 'Особистий кабінет', id: 'cabinet' },
            { name: 'Контакти', id: 'contact' }
          ]}
          brandName="ЗЕУП"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          background={{ variant: 'sparkles-gradient' }}
          title="ТОВ Запоріжжяелектропостачання"
          description="Ваш надійний партнер з постачання електричної енергії та природного газу в Запорізькій області"
          tag="Енергетичні послуги"
          tagIcon={Zap}
          imageSrc="https://zpep.com.ua/wp-content/uploads/2025/01/мости-4.jpg"
          imageAlt="Енергетична інфраструктура Запоріжжя"
          buttons={[
            { text: 'Особистий кабінет', href: 'cabinet' },
            { text: 'Передати покази', href: 'services' }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardOne
          title="Наші послуги"
          description="Повний спектр енергетичних послуг для приватних і корпоративних клієнтів"
          tag="Зручно та надійно"
          tagIcon={Shield}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          features={[
            {
              title: 'Особистий кабінет',
              description: 'Зручне управління вашим рахунком онлайн',
              imageSrc: 'https://zpep.com.ua/wp-content/uploads/2024/09/user.png',
              imageAlt: 'Особистий кабінет користувача',
              button: { text: 'Увійти', href: '#cabinet' }
            },
            {
              title: 'Передача показів',
              description: 'Швидка передача показань лічильників',
              imageSrc: 'https://zpep.com.ua/wp-content/uploads/2024/09/pokazy.png',
              imageAlt: 'Передача показань лічильника',
              button: { text: 'Передати', href: '#pokazy' }
            },
            {
              title: 'Розрахунок тарифів',
              description: 'Актуальні тарифи регулятора',
              imageSrc: 'https://zpep.com.ua/wp-content/uploads/2024/09/calc.png',
              imageAlt: 'Калькулятор тарифів',
              button: { text: 'Розрахувати', href: '#tariffs' }
            },
            {
              title: 'Онлайн оплата',
              description: 'Сплачуйте рахунки зручним способом',
              imageSrc: 'https://zpep.com.ua/wp-content/uploads/2024/09/card.png',
              imageAlt: 'Онлайн оплата послуг',
              button: { text: 'Сплатити', href: '#payment' }
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Наші показники"
          description="Ключові досягнення у сфері енергопостачання"
          tag="Статистика"
          tagIcon={TrendingUp}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: '1',
              value: '382,5К',
              description: 'Сімей обслуговуємо'
            },
            {
              id: '2',
              value: '24/7',
              description: 'Цілодобова підтримка'
            },
            {
              id: '3',
              value: '99.8%',
              description: 'Надійність постачання'
            }
          ]}
        />
      </div>

      <div id="news" data-section="news">
        <BlogCardOne
          title="Останні новини"
          description="Будьте в курсі найважливіших подій енергетичної галузі"
          tag="Актуальні події"
          tagIcon={FileText}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          blogs={[
            {
              id: '1',
              category: 'Новини',
              title: 'Вчасна оплата за електроенергію',
              excerpt: 'ТОВ «Запоріжжяелектропостачання» нагадує про важливість вжиття вичерпних заходів з оплати електричної енергії',
              imageSrc: 'https://zpep.com.ua/wp-content/uploads/2026/01/Користувацькі-розміри-1340x680-px-4-670x300.png',
              imageAlt: 'Оплата за електроенергію',
              authorName: 'ЗЕУП',
              authorAvatar: 'https://zpep.com.ua/wp-content/uploads/2020/04/logo_zpep_m.png',
              date: '22.01.2026'
            },
            {
              id: '2',
              category: 'Зі святом',
              title: 'З Днем Соборності України!',
              excerpt: 'ТОВ «Запоріжжяелектропостачання» щиро вітає вас з Днем Соборності України — символом національної єдності',
              imageSrc: 'https://zpep.com.ua/wp-content/uploads/2026/01/Користувацькі-розміри-1340x680-px-1-670x300.png',
              imageAlt: 'День Соборності України',
              authorName: 'ЗЕУП',
              authorAvatar: 'https://zpep.com.ua/wp-content/uploads/2020/04/logo_zpep_m.png',
              date: '22.01.2026'
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Зв'язок з нами"
          tagIcon={Phone}
          title="Маєте питання? Ми готові допомогти"
          description="Зв'яжіться з нами за телефоном або залиште заявку, і наші фахівці оперативно вирішать ваші питання"
          useInvertedBackground="noInvert"
          inputPlaceholder="Ваш email для зв'язку"
          buttonText="Надіслати заявку"
          termsText="Натискаючи кнопку, ви погоджуєтеся з умовами обробки персональних даних"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="ЗЕУП"
          copyrightText="©2026 ТОВ 'Запоріжжяелектропостачання'"
          columns={[
            {
              title: 'Послуги',
              items: [
                { label: 'Електроенергія', href: 'services' },
                { label: 'Природний газ', href: 'services' },
                { label: 'Особистий кабінет', href: 'cabinet' },
                { label: 'Передати покази', href: 'services' }
              ]
            },
            {
              title: 'Інформація',
              items: [
                { label: 'Тарифи', href: 'tariffs' },
                { label: 'Новини', href: 'news' },
                { label: 'Документи', href: 'documents' },
                { label: 'Поширені запитання', href: 'faq' }
              ]
            },
            {
              title: 'Контакти',
              items: [
                { label: 'Кол-центр', href: 'contact' },
                { label: 'Онлайн оплата', href: 'payment' },
                { label: 'Центр розгляду скарг', href: 'complaints' },
                { label: 'Мапа сайту', href: 'sitemap' }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}