"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, Sparkles, Zap, TrendingUp, MessageSquare, Layers, Calendar, Users, Star, Lightbulb, Heart, Target, BookOpen, Network, Wifi, Archive, Share2, BarChart3, Globe, Linkedin, Instagram, Twitter } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="ExperientiaL"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Work", id: "testimonials" },
            { name: "About", id: "about" },
            { name: "Impact", id: "metrics" }
          ]}
          button={{
            text: "Get In Touch",            href: "#contact"
          }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Create Unforgettable Brand Experiences"
          description="Transform your corporate vision into immersive, data-driven events that captivate audiences and drive measurable business outcomes. We orchestrate every moment of your brand's story."
          background={{ variant: "aurora" }}
          kpis={[
            { value: "500+", label: "Events Delivered" },
            { value: "10M+", label: "Attendees Engaged" },
            { value: "94%", label: "Client Satisfaction" }
          ]}
          enableKpiAnimation={true}
          tag="Experiential Excellence"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Start Your Journey", href: "#contact" },
            { text: "View Our Work", href: "#testimonials" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/happy-people-partying-together-music_482257-78144.jpg?_wi=1"
          imageAlt="Experiential event showcase"
          mediaAnimation="blur-reveal"
          imagePosition="right"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Why Choose Us"
          tagIcon={Award}
          tagAnimation="slide-up"
          title="We don't just create events—we engineer transformative brand experiences that connect, engage, and inspire action"
          buttons={[
            { text: "Explore Our Approach", href: "#services" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardNineteen
          features={[
            {
              id: 1,
              tag: "Discovery",              title: "Strategy & Vision",              subtitle: "Deep understanding of your brand",              description: "We immerse ourselves in your brand DNA, market position, and objectives. Through collaborative workshops and strategic analysis, we develop a comprehensive event strategy that aligns with your business goals and resonates with your target audience.",              imageSrc: "http://img.b2bpic.net/free-photo/team-diverse-startup-company-colleague-entrepreneur-meeting-professional-workplace-broadroom_482257-5082.jpg?_wi=1",              imageAlt: "Strategy consultation session"
            },
            {
              id: 2,
              tag: "Production",              title: "Seamless Execution",              subtitle: "Flawless event delivery",              description: "Our experienced production team orchestrates every detail—from technical requirements to venue logistics to on-ground coordination. We manage all aspects with precision, ensuring your vision comes to life exactly as planned.",              imageSrc: "http://img.b2bpic.net/free-photo/man-tv-reporter-standing-shopping-mall-entrance-presenting-news-about-black-friday-clothing-store-security-guard-opening-door-eager-people-shoppers-waiting-discounts-seasonal-sales_482257-69889.jpg?_wi=1",              imageAlt: "Event production in action"
            },
            {
              id: 3,
              tag: "Results",              title: "Measurement & Impact",              subtitle: "Data-driven success metrics",              description: "We capture comprehensive analytics and feedback to measure engagement, ROI, and brand impact. Our detailed post-event analysis provides actionable insights for continuous improvement and future campaign optimization.",              imageSrc: "http://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg?_wi=1",              imageAlt: "Analytics and reporting dashboard"
            }
          ]}
          title="Our Creative Process"
          description="From initial concept to post-event analysis, we follow a structured methodology that ensures every event exceeds expectations."
          tag="Strategic Execution"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "1",              value: "500",              title: "Events",              description: "Successfully executed across 15+ countries",              icon: Calendar
            },
            {
              id: "2",              value: "10",              title: "Million+",              description: "Total attendees engaged and inspired",              icon: Users
            },
            {
              id: "3",              value: "94",              title: "Percent",              description: "Client satisfaction and repeat business rate",              icon: Star
            },
            {
              id: "4",              value: "4.8",              title: "Rating",              description: "Average score across all industry sectors",              icon: Award
            }
          ]}
          title="Our Impact By The Numbers"
          description="Proven results across diverse industries and event types"
          tag="Performance Metrics"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          gridVariant="bento-grid"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell, CMO of TechVenture",              date: "Date: 15 November 2024",              title: "Transformed Our Product Launch",              quote: "Their experiential approach to our product launch resulted in 300% media coverage increase and immediate market traction. The immersive experience they created became the talk of the industry.",              tag: "Product Launch",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Sarah Mitchell",              imageSrc: "http://img.b2bpic.net/free-photo/happy-people-partying-together-music_482257-78144.jpg?_wi=2",              imageAlt: "Product launch event success"
            },
            {
              id: "2",              name: "Marcus Chen, VP Marketing at GlobalCorp",              date: "Date: 08 October 2024",              title: "Exceeded All Engagement Targets",              quote: "We've worked with many agencies, but their strategic expertise and flawless execution set them apart. Our employee engagement scores increased by 87% after their corporate event.",              tag: "Corporate Event",              avatarSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",              avatarAlt: "Marcus Chen",              imageSrc: "http://img.b2bpic.net/free-photo/man-tv-reporter-standing-shopping-mall-entrance-presenting-news-about-black-friday-clothing-store-security-guard-opening-door-eager-people-shoppers-waiting-discounts-seasonal-sales_482257-69889.jpg?_wi=2",              imageAlt: "Corporate event execution"
            },
            {
              id: "3",              name: "Jennifer Rodriguez, Brand Director at LuxuryBrand",              date: "Date: 22 September 2024",              title: "Premium Brand Activation Delivered",              quote: "They captured the essence of our luxury brand and created an unforgettable experience for our VIP clients. The attention to detail and creative vision were exceptional.",              tag: "Brand Activation",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Jennifer Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/team-diverse-startup-company-colleague-entrepreneur-meeting-professional-workplace-broadroom_482257-5082.jpg?_wi=2",              imageAlt: "Brand strategy session"
            },
            {
              id: "4",              name: "David Thompson, CEO of InnovateLabs",              date: "Date: 30 August 2024",              title: "ROI That Speaks for Itself",              quote: "Their analytical approach to experiential marketing provided clear metrics and proven ROI. We've already booked them for three additional events this year.",              tag: "Measurement Focus",              avatarSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              avatarAlt: "David Thompson",              imageSrc: "http://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg?_wi=2",              imageAlt: "Event analytics dashboard"
            }
          ]}
          title="What Industry Leaders Say"
          description="Real stories from brands that transformed their engagement through our experiential events"
          tag="Client Success Stories"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="expertise" data-section="expertise">
        <FeatureCardTen
          features={[
            {
              id: "1",              title: "Trade Shows & Expos",              description: "Custom booth design, interactive installations, lead generation systems, and real-time analytics to maximize your exhibition ROI and brand visibility.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/blurred-shops_1203-779.jpg" },
              items: [
                { icon: Zap, text: "High-impact booth design" },
                { icon: Users, text: "Lead capture optimization" },
                { icon: BarChart3, text: "Real-time performance tracking" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Product Launches",              description: "Strategic positioning, memorable unveilings, influencer integration, and media coordination that create lasting market impact and industry buzz.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/man-tv-reporter-standing-shopping-mall-entrance-presenting-news-about-black-friday-clothing-store-security-guard-opening-door-eager-people-shoppers-waiting-discounts-seasonal-sales_482257-69889.jpg?_wi=3" },
              items: [
                { icon: Sparkles, text: "Narrative storytelling" },
                { icon: Globe, text: "Multi-channel amplification" },
                { icon: Award, text: "Industry recognition" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Corporate Retreats",              description: "Team building programs, leadership development experiences, and engagement activities that strengthen company culture and drive employee retention.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/people-working-tech-brand-together_23-2150966116.jpg" },
              items: [
                { icon: Heart, text: "Culture alignment activities" },
                { icon: Target, text: "Strategic goal setting" },
                { icon: Users, text: "Inclusive team engagement" }
              ],
              reverse: false
            },
            {
              id: "4",              title: "Experiential Activations",              description: "Immersive brand experiences, interactive installations, and pop-up environments that generate social media buzz and create emotional brand connections.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/man-tv-reporter-standing-shopping-mall-entrance-presenting-news-about-black-friday-clothing-store-security-guard-opening-door-eager-people-shoppers-waiting-discounts-seasonal-sales_482257-69889.jpg?_wi=4" },
              items: [
                { icon: Zap, text: "Interactive technology integration" },
                { icon: Share2, text: "Social-first design" },
                { icon: Layers, text: "Multi-sensory experiences" }
              ],
              reverse: true
            },
            {
              id: "5",              title: "Virtual & Hybrid Events",              description: "Cutting-edge platform integration, seamless audience experience, and global reach capabilities that extend your event's impact beyond physical boundaries.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/diverse-team-workers-reviewing-project-updates-together-with-shareholders_482257-112986.jpg" },
              items: [
                { icon: Wifi, text: "Advanced streaming technology" },
                { icon: Globe, text: "Global audience connectivity" },
                { icon: Archive, text: "Post-event content library" }
              ],
              reverse: false
            },
            {
              id: "6",              title: "Innovation Showcases",              description: "Thought leadership platforms, industry conferences, and knowledge exchange forums that position your brand as a market innovator and industry leader.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/male-cool-it-expert-hosting-live-convention-with-hands-free-microphone_482257-127134.jpg" },
              items: [
                { icon: Lightbulb, text: "Cutting-edge technology demos" },
                { icon: BookOpen, text: "Expert panel discussions" },
                { icon: Network, text: "Networking opportunities" }
              ],
              reverse: true
            }
          ]}
          title="Specialized Event Excellence"
          description="Mastery across every event category, from intimate executive gatherings to large-scale brand activations"
          tag="Event Categories"
          tagIcon={Layers}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to create an experience that transforms your brand? Let's discuss how we can bring your vision to life with strategic expertise and creative excellence."
          animationType="entrance-slide"
          buttons={[
            { text: "Schedule Consultation", href: "#contact-form" },
            { text: "Download Portfolio", href: "#portfolio" }
          ]}
          background={{ variant: "glowing-orb" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="ExperientiaL"
          copyrightText="© 2025 ExperientiaL | Transforming Brands Through Experience"
          socialLinks={[
            { icon: Linkedin, href: "https://linkedin.com/company/experiential-marketing", ariaLabel: "LinkedIn" },
            { icon: Instagram, href: "https://instagram.com/experiential_marketing", ariaLabel: "Instagram" },
            { icon: Twitter, href: "https://twitter.com/experiential_co", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
