"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import { Check, Feather, Globe, Mic, Smartphone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeLargeTitles"
        background="fluid"
        cardStyle="outline"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "/"},
        {
          name: "Stories",          id: "/stories"},
        {
          name: "Services",          id: "/services"},
        {
          name: "About",          id: "/about"},
        {
          name: "Contact",          id: "/contact"},
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m7mhs2"
      logoAlt="DYSRVPT Logo"
      brandName="DYSRVPT"
    />
  </div>

  <div id="our-services" data-section="our-services">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "service-1",          tag: "Featured",          tagIcon: Check,
          price: "Bespoke",          period: "/ project",          description: "Comprehensive documentation of events, artists, and cultural moments with a premium touch.",          button: {
            text: "Inquire Now",            href: "/contact"},
          featuresTitle: "Includes:",          features: [
            "On-Ground Photo/Video Teams",            "Exclusive Interviews",            "High-Quality Event Recaps",            "Pre- and Post-Event Coverage"],
        },
        {
          id: "service-2",          tag: "Standard",          tagIcon: Check,
          price: "Custom",          period: "/ campaign",          description: "Engaging and dynamic content tailored for social media, designed for viral impact.",          button: {
            text: "Inquire Now",            href: "/contact"},
          featuresTitle: "Includes:",          features: [
            "Short-Form Video Production",            "Social-First Visuals",            "Platform Optimization",            "Rapid Content Turnaround"],
        },
        {
          id: "service-3",          tag: "Premium",          tagIcon: Check,
          price: "Tailored",          period: "/ project",          description: "In-depth editorial pieces, from artist profiles to cultural analyses, delivered with journalistic integrity.",          button: {
            text: "Inquire Now",            href: "/contact"},
          featuresTitle: "Includes:",          features: [
            "Long-Form Articles & Essays",            "Artist & Industry Interviews",            "Culture Reports & Trends",            "Research-Backed Narratives"],
        },
      ]}
      title="OUR SERVICES"
      description="We offer a range of bespoke services to amplify your brand and cultural initiatives."
    />
  </div>

  <div id="service-details" data-section="service-details">
      <FeatureCardTwentyFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Media Coverage",          description: "Capturing the raw energy of events and personalities, ensuring every moment that matters is documented.",          icon: Globe,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-camera-crew-filming-interview_23-2149037848.jpg",              imageAlt: "Professional videographer at an African event"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-singing-outdoors_23-2149223611.jpg",              imageAlt: "Camera crew filming a documentary"},
          ]
        },
        {
          title: "Mobile Content Creation",          description: "Crafting engaging, shareable content optimized for today's fast-paced digital platforms.",          icon: Smartphone,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-plus-sized-woman-influencer_23-2151414177.jpg",              imageAlt: "Mobile content creator filming with a phone"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/law-enforcement-agents-sitting-flooor-investigating-crime-together-african-american-man-woman-detective-partners-analyzing-case-files-drinking-coffee-night-time_482257-59774.jpg",              imageAlt: "African creative creating social media content"},
          ]
        },
        {
          title: "Editorial Storytelling",          description: "Developing compelling narratives that explore the depth and nuances of African creativity.",          icon: Feather,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-woman-typing-laptop_24972-2961.jpg",              imageAlt: "Writer typing on a laptop for an editorial"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-reading-coffee-shop_23-2150183723.jpg",              imageAlt: "African woman reading a magazine"},
          ]
        },
        {
          title: "Talent Amplification",          description: "Elevating artists, DJs, and cultural disruptors through strategic media positioning and exposure.",          icon: Mic,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/fun-party-with-dj_23-2151108167.jpg",              imageAlt: "African DJ performing on stage"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/man-with-dreads-representing-rastafari-movement_23-2151532088.jpg",              imageAlt: "Artist spotlight promotion in Africa"},
          ]
        },
      ]}
      title="DELIVERING IMPACT THROUGH CULTURAL EXPERTISE"
      description="Our integrated approach ensures your message resonates deeply within the target audience."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Company",          items: [
            {
              label: "Home",              href: "/"},
            {
              label: "Stories",              href: "/stories"},
            {
              label: "Services",              href: "/services"},
            {
              label: "About",              href: "/about"},
            {
              label: "Contact",              href: "/contact"},
          ],
        },
        {
          title: "Connect",          items: [
            {
              label: "Instagram",              href: "https://instagram.com/dysrvpt"},
            {
              label: "TikTok",              href: "https://tiktok.com/@dysrvpt"},
            {
              label: "X",              href: "https://x.com/dysrvpt"},
            {
              label: "YouTube",              href: "https://youtube.com/@dysrvpt"},
          ],
        },
      ]}
      bottomLeftText="DYSRVPT. Documenting African Culture In Motion."
      bottomRightText="DO IT LIKE YOU. STAY DYSRVPTIVE."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
