"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Zap, CheckCircle } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="noise"
      cardStyle="outline-light"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="minimal"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Webild"
          button={{
            text: "Get Started",            href: "#contact"
          }}
          className="py-6 px-6 md:px-12"
          buttonClassName="px-5 py-2.5 rounded-md font-medium transition-all"
          buttonTextClassName="text-sm font-medium"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Webild Studio"
          description="Craft extraordinary digital experiences through thoughtful design and innovation. We transform ideas into impactful brands."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716217392-4dqnh9k1.jpg"
          imageAlt="Product showcase and digital experience"
          frameStyle="card"
          logoLineHeight={1.15}
          ariaLabel="Webild Studio hero section"
          className="relative overflow-hidden"
          containerClassName="max-w-7xl mx-auto"
          logoClassName="text-6xl md:text-8xl font-bold tracking-tight"
          descriptionClassName="text-lg md:text-2xl text-balance max-w-2xl"
          mediaWrapperClassName="mt-12 md:mt-16"
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="Elevating Digital Presence"
          description="We believe in the power of thoughtful design to drive real business results. Our approach combines strategic thinking with creative excellence to deliver solutions that resonate."
          tag="About Us"
          tagIcon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716218932-tqob791u.jpg"
          imageAlt="Brand background illustrating digital innovation"
          buttons={[
            {
              text: "Explore Our Work",              href: "#features"
            },
            {
              text: "Learn More",              href: "#contact"
            }
          ]}
          ariaLabel="About section with parallax effect"
          className="h-svh relative overflow-hidden"
          titleClassName="text-5xl md:text-7xl font-bold"
          descriptionClassName="text-lg md:text-xl max-w-xl text-balance"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree
          title="Powerful Features"
          description="Everything you need to build and scale your digital presence with confidence"
          tag="Capabilities"
          tagIcon={Zap}
          textboxLayout="default"
          features={[
            {
              id: "01",              title: "Advanced Analytics",              description: "Gain comprehensive insights into user behavior and performance metrics in real time",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716220597-qka4nhwr.jpg",              imageAlt: "Analytics dashboard interface"
            },
            {
              id: "02",              title: "Workflow Automation",              description: "Streamline your processes and eliminate manual tasks with intelligent automation",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716221995-6xvu8dn6.jpg",              imageAlt: "Workflow automation system"
            },
            {
              id: "03",              title: "Seamless Integration",              description: "Connect effortlessly with your existing tools and systems for unified operations",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716223317-qfnojv2p.jpg",              imageAlt: "Integration and connectivity interface"
            },
            {
              id: "04",              title: "Enterprise Security",              description: "Bank-level security protocols protect your data and ensure complete peace of mind",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716224458-tcrjt99o.jpg",              imageAlt: "Security and protection features"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          ariaLabel="Features section"
          containerClassName="py-16 md:py-24"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767693843008-khseyvza.jpg",              imageAlt: "Sarah Chen portrait"
            },
            {
              id: "2",              name: "Marcus Johnson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716226569-pdqzj2sg.jpg",              imageAlt: "Marcus Johnson portrait"
            },
            {
              id: "3",              name: "Elena Rodriguez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716228781-rd3iz6q3.jpg",              imageAlt: "Elena Rodriguez portrait"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716230271-a34a67wz.jpg",              imageAlt: "David Kim portrait"
            }
          ]}
          cardTitle="10,000+ customers worldwide trust our platform to deliver exceptional results"
          cardTag="Customer Trust"
          cardTagIcon={CheckCircle}
          useInvertedBackground="invertCard"
          ariaLabel="Social proof and customer testimonials"
          containerClassName="py-16 md:py-24"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay Connected"
          description="Get the latest insights and updates delivered directly to your inbox. Subscribe today to join our growing community of innovators."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716231647-cxs5rr38.jpg"
          imageAlt="Newsletter subscription visual"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time."
          ariaLabel="Newsletter subscription section"
          containerClassName="py-16 md:py-24"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Webild"
          logoLineHeight={1.1}
          ariaLabel="Site footer with logo reveal"
          className="relative"
          containerClassName="flex items-center justify-center"
        />
      </div>
    </ThemeProvider>
  );
}