"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Shield, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeMediumTitles"
        background="aurora"
        cardStyle="gradient-radial"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "About",          id: "about"},
        {
          name: "Expertise",          id: "features"},
        {
          name: "Results",          id: "metrics"},
        {
          name: "Testimonials",          id: "testimonials"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Vantage Social"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "plain"}}
      title="Accelerating Growth for Premium Brands"
      description="We craft sophisticated digital strategies that bridge the gap between human connection and high-end brand performance."
      tag="Elite Social Agency"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-data-interface_23-2152011741.jpg",          imageAlt: "Dashboard"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/professional-editor-uses-ai-powered-software-pc-reels-creative-office_482257-126981.jpg",          imageAlt: "Workspace"}
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Trusted by 50+ Global Brands"
      tagIcon={Sparkles}
      tagAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="The Vantage Philosophy"
      title="We don't just post content. We build legacies."
      description="In an era of noise, we bring clarity. Vantage Social specializes in high-touch, data-driven creative campaigns that resonate at the intersection of influence and commerce."
      subdescription="Our mission is to elevate your brand presence through surgical strategy, cinematic creative, and uncompromising standards of excellence."
      icon={Shield}
      imageSrc="http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-new-ideas-office_176420-1714.jpg"
      mediaAnimation="blur-reveal"
      imageAlt="Professional marketer working"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyOne
      useInvertedBackground={false}
      title="Our Specialized Expertise"
      description="Premium services for brands that define their category."
      accordionItems={[
        {
          id: "f1",          title: "Social Strategy & Execution",          content: "Full-scale management across all platforms, optimizing your narrative to captivate your desired audience."},
        {
          id: "f2",          title: "Cinematic Content Production",          content: "High-quality video and photography production that demands attention and communicates brand value."},
        {
          id: "f3",          title: "Influencer & Partner Relations",          content: "Strategic partnerships with high-tier creators to amplify brand resonance and trustworthiness."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-blue-color-pastel-crayon-chalks-its-own-trace-line_171337-10441.jpg"
      mediaAnimation="slide-up"
      imageAlt="Abstract growth engagement data"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="split-description"
      useInvertedBackground={true}
      plans={[
        {
          id: "growth",          name: "Growth Acceleration",          price: "$5,000/mo",          features: [
            "3x Weekly Content",            "Community Management",            "Strategy Consult"],
          buttons: [
            {
              text: "Apply Now",              href: "#contact"},
          ],
        },
        {
          id: "premium",          name: "Market Leader",          price: "$12,000/mo",          badge: "Popular",          features: [
            "Daily Content",            "Full Campaign Strategy",            "Influencer Management"],
          buttons: [
            {
              text: "Apply Now",              href: "#contact"},
          ],
        },
      ]}
      title="Investment Tiers"
      description="Selective partnerships for elite growth."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Real Performance Data"
      tag="Measurable Results"
      metrics={[
        {
          id: "m1",          value: "12M+",          description: "Total Brand Impressions"},
        {
          id: "m2",          value: "45%",          description: "Average Engagement Lift"},
        {
          id: "m3",          value: "240%",          description: "ROI for Clients"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Sarah Jenkins",          role: "CMO",          company: "LuxGear",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/angry-serious-man-white-shirt-is-ready-fight-while-posing-photographer-dark-background_613910-12666.jpg"},
        {
          id: "2",          name: "Michael Thorne",          role: "Founder",          company: "Thorne Inc.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/senior-business-woman-smiling_1187-1564.jpg"},
        {
          id: "3",          name: "Elena Vance",          role: "Director",          company: "Moda Group",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg"},
        {
          id: "4",          name: "Jason Scott",          role: "CEO",          company: "ScottTech",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-corporate-woman-looking-outside-window-her-office-smiling-with-confidence_1258-194662.jpg"},
        {
          id: "5",          name: "Maria Lopez",          role: "Lead Brand Manager",          company: "Nova",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-business-woman_23-2148911836.jpg"},
      ]}
      title="Voices of Excellence"
      description="What our premium partners say about their growth journey."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "Do you work with startups?",          content: "We work with any brand that demonstrates the potential for market leadership and aligns with our quality standards."},
        {
          id: "q2",          title: "What is your onboarding process?",          content: "Our 4-step onboarding involves deep brand analysis, strategy alignment, campaign execution setup, and performance cadence setting."},
        {
          id: "q3",          title: "Can you handle crisis management?",          content: "Yes, we provide proactive communication strategies to maintain brand integrity and trust in challenging times."},
      ]}
      sideTitle="Questions & Clarity"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient"}}
      tag="Inquire for Partnership"
      title="Begin Your Agency Journey"
      description="Ready to redefine your digital narrative? Let's discuss your brand's future."
      buttons={[
        {
          text: "Schedule Discovery",          href: "#"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Vantage Social"
      columns={[
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Work",              href: "#"},
          ],
        },
        {
          title: "Services",          items: [
            {
              label: "Strategy",              href: "#features"},
            {
              label: "Content",              href: "#features"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 Vantage Social Agency. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
