"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users } from "lucide-react";

export default function WebAgency2Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <NavbarLayoutFloatingOverlay
          brandName="Ads2Gether"
          navItems={[
            { name: "Work", id: "work" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Get Started", href: "#contact" }}
        />
        <div id="hero">
            <HeroSplitDoubleCarousel
              title="We Build Digital Experiences"
              description="Transform your brand with cutting-edge web design and development. We craft stunning websites that convert visitors into customers."
              tag="Ads2Gether - Strategic Design"
              tagIcon={Sparkles}
              tagAnimation="slide-up"
              background={{ variant: "canvas-reveal" }}
              buttons={[
                { text: "Start Project", href: "#contact" },
                { text: "View Work", href: "#work" },
              ]}
              buttonAnimation="slide-up"
              carouselPosition="right"
              leftCarouselItems={[
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "UI UX Design" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "UI UX Design" },
              ]}
              rightCarouselItems={[
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "UI UX Design" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "UI UX Design" },
              ]}
            />
        </div>
        <div id="services">
            <FeatureBento
              title="Our Services"
              description="Data-driven digital solutions built for growth."
              textboxLayout="default"
              animationType="slide-up"
              features={[
                { title: "SEO", description: "Rank higher and grow faster.", bentoComponent: "marquee", centerIcon: Search, variant: "text", texts: ["SEO", "Backlinks", "Analytics"] },
                { title: "Web Dev", description: "High-performance, custom builds.", bentoComponent: "media-stack", items: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp" }] },
                { title: "Branding", description: "Memorable brand identities.", bentoComponent: "media-stack", items: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp" }] },
              ]}
            />
        </div>
        <div id="work">
            <FeatureCardTwentySix
              title="Performance Metrics"
              description="Results-focused project delivery."
              features={[
                { title: "Scale-Up", description: "Result oriented", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp", buttonIcon: ArrowUpRight },
                { title: "Brand Lift", description: "Market engagement", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp", buttonIcon: ArrowUpRight }
              ]}
            />
        </div>
        <div id="metrics">
            <MetricCardFourteen
                title="Results by Numbers"
                tag="Efficiency"
                metrics={[
                    { id: "m1", value: "150+", description: "Projects delivered" },
                    { id: "m2", value: "98%", description: "Client retention" },
                    { id: "m3", value: "10X", description: "Traffic growth" }
                ]}
            />
        </div>
        <div id="testimonials">
            <TestimonialCardThirteen
                title="Client Success Stories"
                testimonials={[
                    { id: "t1", name: "John Doe", handle: "@client", testimonial: "Ads2Gether delivered beyond our expectations!", rating: 5 }
                ]}
                showRating={true}
                animationType="slide-up"
            />
        </div>
        <div id="about">
            <TeamCardTwo
                title="The Team"
                description="Expert digital architects."
                gridVariant="bento-grid"
                animationType="slide-up"
                members={[
                    { id: "p1", name: "Alex P.", role: "Founder", description: "Strategic lead." }
                ]}
            />
        </div>
        <div id="faq">
            <FaqSplitMedia
                title="Common Questions"
                faqs={[
                    { id: "f1", title: "How do we start?", content: "Contact us through the form below." }
                ]}
                faqsAnimation="slide-up"
                textboxLayout="split"
            />
        </div>
        <div id="contact">
            <ContactSplit
                title="Get in touch"
                description="Discuss your next growth move."
                mediaPosition="right"
            />
        </div>
        <FooterSimple 
            columns={[
                { title: "Agency", items: [{ label: "Home" }, { label: "About" }] },
                { title: "Services", items: [{ label: "SEO" }, { label: "Web Design" }] }
            ]}
            bottomLeftText="Ads2Gether 2026"
            bottomRightText="All rights reserved"
        />
      </ReactLenis>
    </ThemeProvider>
  );
}