"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Camera, CheckCircle, Film, Layers, Lightbulb, Pencil, PlayCircle, Rocket, Scissors, TrendingUp, Users, Eye, Heart, Zap, Instagram, Youtube, Linkedin, Mail, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmall"
      background="noiseDiagonalGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="LFT Prod"
          navItems={[
            { name: "Услуги", id: "services" },
            { name: "Портфолио", id: "portfolio" },
            { name: "Процесс", id: "process" },
            { name: "Отзывы", id: "testimonials" },
            { name: "Контакт", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Видео, которое продаёт и цепляет внимание"
          description="Создаём контент под ключ: идея, съёмка, монтаж, рост"
          background={{ variant: "radial-gradient" }}
          tag="Профессиональный видео-продакшн"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: "Обсудить проект", href: "#contact" },
            { text: "Смотреть портфолио", href: "#portfolio" }
          ]}
          buttonAnimation="slide-up"
          videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/cinematic-dark-video-production-setup-wi-1773992654746-ed4505c2.png?_wi=1"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/cinematic-dark-video-production-setup-wi-1773992654746-ed4505c2.png?_wi=2"
          mediaAnimation="blur-reveal"
          ariaLabel="LFT Prod - видео продакшн герой"
        />
      </div>

      <div id="why-us" data-section="why-us">
        <MediaAbout
          title="Почему именно мы?"
          description="Мы не просто создаём видео — мы создаём результат. Каждый проект нацелен на рост вашей аудитории, привлечение клиентов и увеличение продаж. От идеи до готового контента — всё под ключ и без суеты."
          tag="Гарантированный результат"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          buttons={[{ text: "Узнать больше", href: "#process" }]}
          buttonAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/professional-video-production-team-worki-1773992654689-68e02dfd.png?_wi=1"
          imageAlt="Профессиональная видео-съёмка"
          useInvertedBackground={true}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSix
          title="Наши услуги"
          description="Полный спектр видеопроизводства для блогеров и бизнеса"
          tag="Профессиональные услуги"
          tagIcon={Film}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Полный продакшн",              description: "От идеи и сценария до финального монтажа. Мы закрываем весь процесс и отвечаем за результат.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/professional-video-production-team-worki-1773992654689-68e02dfd.png?_wi=2",              imageAlt: "Полный видео продакшн"
            },
            {
              id: 2,
              title: "Съемка Reels / TikTok / Shorts",              description: "Создаём вирусный контент для социальных сетей. Понимаем тренды и алгоритмы платформ.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/social-media-content-creation-studio-wit-1773992656045-12839cc7.png",              imageAlt: "Съёмка контента для соцсетей"
            },
            {
              id: 3,
              title: "Монтаж видео",              description: "Профессиональный постпродакшн с цветокоррекцией, графикой и звуком. Высокий уровень качества.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/professional-video-editing-workstation-w-1773992654562-5cd6c56e.png",              imageAlt: "Профессиональный видео-монтаж"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardTwo
          title="Портфолио"
          description="Смотрите результаты нашей работы — от концепции до готового видео"
          tag="Наши работы"
          tagIcon={PlayCircle}
          tagAnimation="slide-up"
          products={[
            {
              id: "1",              brand: "Luxury",              name: "Коммерческое видео для премиум бренда",              price: "Видеовизитка",              rating: 5,
              reviewCount: "Просмотры: 125K",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/cinematic-luxury-brand-commercial-video--1773992654957-ff2dfa9c.png",              imageAlt: "Премиум коммерческое видео"
            },
            {
              id: "2",              brand: "Energy",              name: "Динамичный контент для соцсетей",              price: "Вирусный контент",              rating: 5,
              reviewCount: "Просмотры: 450K",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/dynamic-fast-paced-action-video-montage--1773992654795-5f09d5e5.png",              imageAlt: "Энергичный видео контент"
            },
            {
              id: "3",              brand: "Lifestyle",              name: "Lifestyle vlog для influencer'а",              price: "Серия из 10 видео",              rating: 5,
              reviewCount: "Просмотры: 890K",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/influencer-lifestyle-vlog-cinematic-fram-1773992657058-19fa86bf.png",              imageAlt: "Lifestyle vlog контент"
            },
            {
              id: "4",              brand: "Story",              name: "Документальный стиль видео",              price: "Историяброды",              rating: 5,
              reviewCount: "Просмотры: 215K",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/behind-the-scenes-documentary-style-vide-1773992655194-2b33c745.png",              imageAlt: "Документальное видео"
            },
            {
              id: "5",              brand: "Business",              name: "Корпоративное видео обучение",              price: "Обучающий курс",              rating: 5,
              reviewCount: "Просмотры: 78K",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/corporate-training-video-professional-se-1773992654514-1dda78cc.png",              imageAlt: "Корпоративное видео"
            },
            {
              id: "6",              brand: "Music",              name: "Музыкальное видео (MV)",              price: "Полнометражный клип",              rating: 5,
              reviewCount: "Просмотры: 2.3M",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/music-video-production-cinematic-scene-w-1773992654296-524147ef.png",              imageAlt: "Музыкальное видео"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="process" data-section="process">
        <MetricCardThree
          title="Наш процесс работы"
          description="5 шагов от идеи к готовому видео, которое продаёт"
          tag="Структурированный подход"
          tagIcon={Layers}
          tagAnimation="slide-up"
          metrics={[
            { id: "1", icon: Lightbulb, title: "Бриф и идея", value: "Шаг 1" },
            { id: "2", icon: Pencil, title: "Подготовка и сценарий", value: "Шаг 2" },
            { id: "3", icon: Camera, title: "Съёмка", value: "Шаг 3" },
            { id: "4", icon: Scissors, title: "Монтаж и цветокоррекция", value: "Шаг 4" },
            { id: "5", icon: Rocket, title: "Результат и запуск", value: "Шаг 5" }
          ]}
          carouselMode="buttons"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="LFT Prod полностью изменил нашу стратегию контента. За 3 месяца наши просмотры выросли на 300%, а целевая аудитория увеличилась в 4 раза. Команда профессиональна, быстра и всегда понимает видение проекта."
          rating={5}
          author="Максим Сергеев"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/professional-headshot-portrait-of-succes-1773992653737-e2410f64.png", alt: "Максим Сергеев" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/professional-female-entrepreneur-headsho-1773992653604-0712a8e3.png", alt: "Сергей Иванов" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/professional-male-content-creator-headsh-1773992654221-558a3219.png", alt: "Алекс Петров" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/professional-female-influencer-headshot--1773992653812-3c5a86cf.png", alt: "Наталья Волкова" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Наши достижения"
          description="Цифры, которые говорят сами за себя"
          tag="Доказанный результат"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            { id: "1", icon: Users, title: "Проектов завершено", value: "+120" },
            { id: "2", icon: Eye, title: "Просмотров создано", value: "50M+" },
            { id: "3", icon: Heart, title: "Довольных клиентов", value: "98%" },
            { id: "4", icon: Zap, title: "Среднее увеличение просмотров", value: "350%" }
          ]}
          carouselMode="buttons"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="cta" data-section="cta">
        <MediaAbout
          title="Готов вывести контент на новый уровень?"
          description="Давайте обсудим ваш проект и найдём идеальное решение. Ответим на все вопросы и разработаем стратегию вместе с вами."
          tag="Начните сейчас"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Написать в Telegram", href: "https://t.me/lftprod" },
            { text: "WhatsApp консультация", href: "https://wa.me/79999999999" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCUH9NSEep7VTInMxzgwzshzpa/cinematic-dark-video-production-setup-wi-1773992654746-ed4505c2.png?_wi=3"
          imageAlt="Контакт с LFT Prod"
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="LFT Prod"
          copyrightText="© 2025 LFT Production. Все права защищены."
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com/lftprod", ariaLabel: "Instagram" },
            { icon: Youtube, href: "https://youtube.com/@lftprod", ariaLabel: "YouTube" },
            { icon: Linkedin, href: "https://linkedin.com/company/lftprod", ariaLabel: "LinkedIn" },
            { icon: Mail, href: "mailto:hello@lftprod.ru", ariaLabel: "Email" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}