"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Globe, TrendingUp, Users, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          navItems={[{name:"Home",id:"/"},{name:"Blog",id:"/blog"},{name:"Shop",id:"/shop"}]}
          brandName="DigitalEdge"
          bottomLeftText="Innovation in Digital"
          bottomRightText="info@digitaledge.com"
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroLogo 
          logoText="DigitalEdge"
          description="Empowering your brand's digital presence with innovative strategies and measurable results."
          buttons={[{text:"Our Services",href:"features"},{text:"Get a Quote",href:"contact"}]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/abstract-digital-marketing-background-wi-1771795017022-4fd2f272.png"
          imageAlt="Abstract digital marketing background"
          showDimOverlay={true}
        />
      </div>
      <div id="about" data-section="about">
        <AboutMetric 
          title="DigitalEdge: Where Innovation Meets Impact in Digital Marketing."
          metrics={[
            {icon: Zap, label: "Years of Experience", value: "10+"},
            {icon: Users, label: "Satisfied Clients", value: "500+"},
            {icon: TrendingUp, label: "Average ROI", value: "300%"},
            {icon: Globe, label: "Campaigns Launched", value: "1000+"}
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
          className="py-16 md:py-24"
        />
      </div>
      <div id="features" data-section="features">
        <FeatureCardTwentyOne 
          title="Our Core Services"
          description="We craft data-driven strategies to elevate your brand's online visibility and engagement."
          tag="Services"
          accordionItems={[
            {id: "1", title: "Search Engine Optimization (SEO)", content: "Elevate your search rankings and drive organic traffic with our cutting-edge SEO strategies, including keyword research, technical SEO, and content optimization."},
            {id: "2", title: "Social Media Marketing", content: "Build a thriving online community and amplify your brand message across all major social platforms with engaging content and targeted campaigns."},
            {id: "3", title: "Content Marketing & Strategy", content: "From compelling blog posts to viral video content, we create narratives that resonate with your audience and establish your brand as an industry leader."},
            {id: "4", title: "Paid Advertising (PPC)", content: "Maximize your ad spend with precision-targeted PPC campaigns on Google, social media, and other platforms, ensuring optimal ROI and lead generation."}
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/abstract-representation-of-seo-optimizat-1771795017647-012ac8e0.png"
          imageAlt="Abstract illustration of SEO optimization"
          mediaAnimation='slide-up'
          useInvertedBackground={false}
          mediaPosition="right"
        />
      </div>
      <div id="social-proof" data-section="social-proof">
        <SocialProofOne 
          title="Trusted By Industry Leaders"
          description="Our expertise has empowered renowned brands to achieve their digital marketing goals."
          tag="Partners"
          names={["Microsoft", "Google", "Adobe", "Shopify", "HubSpot", "Salesforce", "Mailchimp"]}
          logos={[
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/stylized-microsoft-logo-modern-and-sleek-1771795017708-1e57c145.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/stylized-google-logo-modern-and-sleek-in-1771795017449-0bc9f408.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/stylized-adobe-logo-modern-and-sleek-in--1771795017263-d4b2553a.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/stylized-shopify-logo-modern-and-sleek-i-1771795017251-663a2beb.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/stylized-hubspot-logo-modern-and-sleek-i-1771795017857-d94ea3e9.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/stylized-salesforce-logo-modern-and-slee-1771795027411-233cea21.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/stylized-mailchimp-logo-modern-and-sleek-1771795017179-dc519fe0.png"
          ]}
          speed={40}
          textboxLayout='default'
          showCard={true}
          useInvertedBackground={false}
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo 
          title="What Our Clients Say"
          description="Hear directly from the businesses we've helped succeed."
          tag="Testimonials"
          testimonials={[
            {id: "1", name: "Sarah Johnson", role: "CEO, InnovateTech", testimonial: "DigitalEdge transformed our online presence. Their strategic approach and execution led to a significant increase in our lead generation and brand visibility. Highly recommended!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/professional-headshot-of-a-female-ceo-la-1771795017434-85c03f9e.png", imageAlt: "Portrait of Sarah Johnson"},
            {id: "2", name: "Michael Chen", role: "Marketing Director, GrowthFlow", testimonial: "The team at DigitalEdge is exceptional. Their data-driven insights and creative campaigns delivered outstanding results that exceeded our expectations.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/professional-headshot-of-a-male-cto-earl-1771795017696-f58390de.png", imageAlt: "Portrait of Michael Chen"},
            {id: "3", name: "Emily Rodriguez", role: "Founder, AuraBloom", testimonial: "Choosing DigitalEdge was the best decision for our startup. They helped us cut through the noise and establish a strong digital footprint from day one.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/professional-headshot-of-a-female-market-1771795017523-002817d3.png", imageAlt: "Portrait of Emily Rodriguez"},
            {id: "4", name: "David Kim", role: "Product Lead, Nexus Innovations", testimonial: "Their expertise in SEO and content marketing is unparalleled. We've seen remarkable growth in organic traffic and conversions since partnering with DigitalEdge.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/professional-headshot-of-a-male-entrepre-1771795017800-ee05a235.png", imageAlt: "Portrait of David Kim"}
          ]}
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactCTA 
          tag="Get in Touch"
          title="Ready to Elevate Your Digital Marketing?"
          description="Let's discuss your goals and how our tailored strategies can drive your business forward. Schedule a free consultation today."
          buttons={[{text: "Schedule a Call", href: "#"},{text: "Send an Email", href: "mailto:info@digitaledge.com"}]}
          background={{variant: 'canvas-reveal'}}
          useInvertedBackground={false}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis 
          columns={[
            {items: [{label: "Home", href: "hero"}, {label: "Services", href: "features"}, {label: "About Us", href: "about"}]},
            {items: [{label: "Clients", href: "social-proof"}, {label: "Testimonials", href: "testimonials"}, {label: "Contact", href: "contact"}]}
          ]}
          logoText="DigitalEdge"
        />
      </div>
    </ThemeProvider>
  );
}