"use client";

import React from 'react';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, HelpCircle, Mail, MessageSquare, Sparkles, Zap } from 'lucide-react';

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function SitePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[{name:"About Us",id:"about"},{name:"Services",id:"services"},{name:"Case Studies",id:"product"},{name:"Testimonials",id:"testimonials"},{name:"FAQ",id:"faq"},{name:"Contact",id:"contact"}]}
          button={{text:"Get Started",href:"contact"}}
          brandName="Spike Media"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel 
          title="Unleash Authentic Engagement with User-Generated Content"
          description="Spike Media empowers brands to harness the power of authentic UGC, transforming customer stories into compelling marketing assets that drive real results."
          background={{variant:"radial-gradient"}}
          tag="Spike Media"
          tagIcon={Sparkles}
          tagAnimation="background-highlight"
          buttons={[{text:"See Our Work",href:"product"},{text:"Get a Quote",href:"contact"}]}
          buttonAnimation="elastic-effect"
          carouselItems={[{id:"1",imageSrc:"https://img.b2bpic.net/free-photo/media-journalism-global-daily-news-content-concept_53876-123733.jpg",imageAlt:"Diverse user-generated content on multiple screens"},{id:"2",imageSrc:"https://img.b2bpic.net/free-photo/media-journalism-global-daily-news-content-concept_53876-123733.jpg",imageAlt:"Social media content creation examples"},{id:"3",imageSrc:"https://img.b2bpic.net/free-photo/media-journalism-global-daily-news-content-concept_53876-123733.jpg",imageAlt:"Brand storytelling through customer videos"},{id:"4",imageSrc:"https://img.b2bpic.net/free-photo/media-journalism-global-daily-news-content-concept_53876-123733.jpg",imageAlt:"Authentic content driving engagement"},{id:"5",imageSrc:"https://img.b2bpic.net/free-photo/media-journalism-global-daily-news-content-concept_53876-123733.jpg",imageAlt:"Visual marketing assets"},{id:"6",imageSrc:"https://img.b2bpic.net/free-photo/media-journalism-global-daily-news-content-concept_53876-123733.jpg",imageAlt:"UGC campaign results"}]}
          autoPlay={true}
          autoPlayInterval={4000}
          ariaLabel="Hero section for Spike Media, showcasing user-generated content solutions"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout 
          title="Your Partner in Authentic Content Creation"
          description="At Spike Media, we believe in the power of real voices. We connect brands with passionate creators to produce engaging User-Generated Content that resonates with audiences and builds lasting trust. Our streamlined process makes it easy to scale your content strategy."
          tag="About Spike Media"
          tagIcon={Sparkles}
          tagAnimation="background-highlight"
          buttons={[{text:"Learn More",href:"services"}]}
          buttonAnimation="elastic-effect"
          imageSrc="https://img.b2bpic.net/free-photo/group-collaboration-around-laptop-creative-workspace_24972-2944.jpg"
          imageAlt="Spike Media team collaborating on content strategy"
          useInvertedBackground={false}
          ariaLabel="About Spike Media section"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardOne 
          features={[{title:"Strategy & Planning",description:"We craft tailored UGC strategies that align with your brand goals, identifying key audiences and content themes.",imageSrc:"https://img.b2bpic.net/free-photo/business-project-planning-office_482257-119225.jpg",imageAlt:"Team brainstorming marketing strategy"},{title:"Creator Sourcing",description:"Access our curated network of diverse and engaged creators perfectly matched to your brand's voice and vision.",imageSrc:"https://img.b2bpic.net/free-photo/female-artist-explaining-painting-techniques-used-online-tutorial_482257-124811.jpg",imageAlt:"Creator filming content with mobile phone"},{title:"Content Management",description:"Seamlessly manage content submission, review, and approval, ensuring quality and brand compliance.",imageSrc:"https://img.b2bpic.net/free-photo/creative-ideas-internet-learning-concept_53876-13766.jpg",imageAlt:"Social media content distribution channels"}]}
          carouselMode="buttons"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          title="Our UGC Services"
          description="From concept to campaign, we handle every aspect of your User-Generated Content needs."
          tag="What We Do"
          tagIcon={Zap}
          tagAnimation="background-highlight"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Our UGC Services section"
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardFour 
          products={[{id:"1",name:"Brand Awareness Campaign",price:"High Impact",variant:"2M+ Impressions",imageSrc:"https://img.b2bpic.net/free-photo/happy-friends-looking-social-media-smartphone_53876-102034.jpg",imageAlt:"Graphs showing high brand awareness"},{id:"2",name:"Product Launch Success",price:"Accelerated Sales",variant:"30% Conversion Increase",imageSrc:"https://img.b2bpic.net/free-photo/blogger_23-2148349538.jpg",imageAlt:"Rocket launching representing product success"},{id:"3",name:"Community Building",price:"Engaged Audience",variant:"50K+ New Followers",imageSrc:"https://img.b2bpic.net/free-photo/map-lying-wooden-table_53876-105723.jpg",imageAlt:"Diverse group of people connected online"}]}
          carouselMode="buttons"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          title="UGC Case Studies"
          description="See how we've helped brands achieve remarkable results with authentic User-Generated Content."
          tag="Our Impact"
          tagIcon={Award}
          tagAnimation="background-highlight"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="UGC Case Studies section"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne 
          testimonials={[{id:"1",name:"Sarah Chen",role:"Marketing Director",company:"InnovateCo",rating:5,imageSrc:"https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg"},{id:"2",name:"David Rodriguez",role:"Brand Manager",company:"Vibrant Brands",rating:5,imageSrc:"https://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg"},{id:"3",name:"Emily White",role:"CMO",company:"GrowthMark Inc.",rating:5,imageSrc:"https://img.b2bpic.net/free-photo/smiling-beautiful-caucasian-woman-office-looking-camera_23-2148187145.jpg"},{id:"4",name:"Michael Green",role:"Founder & CEO",company:"EcoSolutions",rating:5,imageSrc:"https://img.b2bpic.net/free-photo/smiling-businessmen-office_1098-240.jpg"}]}
          carouselMode="buttons"
          uniformGridCustomHeightClasses="min-h-95 2xl:min-h-105"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          title="What Our Clients Say"
          description="Hear directly from brands that have transformed their marketing with Spike Media's UGC expertise."
          tag="Testimonials"
          tagIcon={MessageSquare}
          tagAnimation="background-highlight"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Client Testimonials section"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase 
          faqs={[{id:"1",title:"What is User-Generated Content (UGC)?",content:"UGC is any form of content—text, videos, images, reviews—created by unpaid contributors, often customers, rather than the brand itself. It's authentic and highly impactful."},{id:"2",title:"Why is UGC important for my brand?",content:"UGC builds trust and credibility, increases engagement, drives conversions, and provides an endless supply of authentic content, often at a lower cost than traditional ads."},{id:"3",title:"How does Spike Media find creators?",content:"We have an extensive, vetted network of diverse creators. We match them to your brand based on audience demographics, content style, and campaign objectives to ensure perfect alignment."},{id:"4",title:"What types of UGC can you help create?",content:"We specialize in a variety of UGC, including short-form video (TikTok, Reels), unboxing videos, product reviews, testimonials, lifestyle photography, and more, tailored to your platform."}]}
          title="Frequently Asked Questions"
          description="Got questions about UGC or how we work? Find your answers here."
          tag="Q&A"
          tagIcon={HelpCircle}
          tagAnimation="background-highlight"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
          ariaLabel="Frequently Asked Questions section"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit 
          tag="Let's Connect"
          title="Ready to Amplify Your Brand with UGC?"
          description="Partner with Spike Media to unlock the full potential of authentic user-generated content. Get in touch today for a free consultation."
          tagIcon={Mail}
          tagAnimation="background-highlight"
          background={{variant:"sparkles-gradient"}}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-photo/growth-status-technology-online-website-concept_53876-21396.jpg"
          imageAlt="Graph showing growth with user generated content"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Your business email"
          buttonText="Start Now"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal 
          columns={[{title:"Services",items:[{label:"Strategy",href:"services"},{label:"Creation",href:"services"},{label:"Management",href:"services"}]},{title:"Company",items:[{label:"About Us",href:"about"},{label:"Case Studies",href:"product"},{label:"Contact",href:"contact"}]},{title:"Resources",items:[{label:"FAQ",href:"faq"},{label:"Testimonials",href:"testimonials"}]}]}
          copyrightText="© 2024 Spike Media. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
