"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 FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
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="metallic"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <NavbarLayoutFloatingOverlay
          brandName="Creative Edge"
          navItems={[
            { name: "Work", id: "work" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Get a Quote", href: "#contact" }}
        />
        <HeroSplitDoubleCarousel
          title="Unlock Your Brand's Digital Potential"
          description="We are Creative Edge Agency, where innovative design meets strategic development to build extraordinary digital experiences that captivate and convert."
          tag="Innovation Driven"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "canvas-reveal" }}
          buttons={[
            { text: "Start Your Project", href: "#contact" },
            { text: "Explore Our Work", href: "#work" },
          ]}
          buttonAnimation="slide-up"
          carouselPosition="right"
          leftCarouselItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m5a4lv", imageAlt: "Modern web design interface with clean typography and vibrant graphics, illustrating a digital portfolio." },
            { imageSrc: "http://img.b2bpic.net/free-photo/young-millennial-african-boy-walking-city-happy-black-man-with-marijuana-backpack-generation-z-concept_627829-7255.jpg", imageAlt: "SaaS product dashboard UI showing data visualization and user experience elements." },
            { imageSrc: "http://img.b2bpic.net/free-photo/man-smiling-with-letter-h_1187-3239.jpg", imageAlt: "E-commerce website design on a desktop, showcasing fashion products with elegant layout." },
            { imageSrc: "http://img.b2bpic.net/free-photo/realistic-f-letter-with-color-splash_23-2150458472.jpg", imageAlt: "Mobile app interface for a creative platform, emphasizing intuitive navigation." },
            { imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-letter-n_53876-63672.jpg", imageAlt: "Digital marketing campaign overview on a tablet, with analytics and content strategy." }
          ]}
          rightCarouselItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/letter-d-made-real-natural-flowers-leaves-white-background-isolated_169016-53970.jpg", imageAlt: "Responsive website design shown across desktop, tablet, and mobile, highlighting multi-device compatibility." },
            { imageSrc: "http://img.b2bpic.net/free-photo/3d-view-letters-alphabet_23-2150499126.jpg", imageAlt: "Branding mock-up with a unique logo on stationary, demonstrating corporate identity." },
            { imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-letter_53876-63812.jpg", imageAlt: "Creative content creation studio with a designer working on a graphic, dynamic and modern." },
            { imageSrc: "http://img.b2bpic.net/free-photo/letter-l-blue-color_1232-686.jpg", imageAlt: "SEO analytics dashboard with keyword research and performance metrics, vibrant and professional." }
          ]}
          carouselItemClassName="!aspect-[4/5]"
        />
        <FeatureBento
          title="Our Comprehensive Digital Solutions"
          description="From captivating design to powerful development, we offer a full spectrum of services to propel your brand forward."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          buttons={[{ text: "View All Services", href: "#services" }]}
          buttonAnimation="slide-up"
          features={[
            {
              title: "SEO",              description: "Enhance your visibility and climb search rankings with our data-driven SEO strategies, attracting valuable organic traffic.",              bentoComponent: "marquee",              centerIcon: Search,
              variant: "text",              texts: ["Strategy", "Keywords", "Analytics", "Ranking", "Traffic", "On-page", "Off-page", "Audit"],
            },
            {
              title: "Web Development",              description: "Crafting custom, high-performance websites that are not only visually stunning but also technically robust and user-centric.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-letter-n_53876-63826.jpg", imageAlt: "Clean, modern website showcasing responsive design for a tech company." },
                { imageSrc: "http://img.b2bpic.net/free-photo/red-letter-s_1232-690.jpg", imageAlt: "E-commerce platform interface with detailed product pages and smooth user flow." },
                { imageSrc: "http://img.b2bpic.net/free-photo/letter-r-made-green-grass-with-flowers-isolated-white_169016-58670.jpg", imageAlt: "Professional landing page design with clear call-to-action for a service-based business." },
              ],
            },
            {
              title: "Branding",              description: "Forge a distinct identity that resonates deeply with your audience, creating lasting impressions and brand loyalty.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-letter-t_53876-63671.jpg", imageAlt: "Brand style guide elements: logo, typography, color palette." },
                { imageSrc: "http://img.b2bpic.net/free-photo/woman-retro-vintage-50-s-cafe-pink-color-sitting-table-drinking-milk-shake-cocktail-hipster-outfit-having-fun_285396-10336.jpg", imageAlt: "Corporate identity mock-up with business cards and brand patterns." },
                { imageSrc: "http://img.b2bpic.net/free-photo/portrait-mother-daughter-embracing-each-other-living-r_1170-2680.jpg", imageAlt: "Digital branding elements on social media posts and banners." },
              ],
            },
          ]}
        />
        <FeatureCardTwentySix
          title="Our Recent Success Stories"
          description="Explore a curated collection of our most impactful projects, demonstrating our commitment to excellence and client success."
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Discover All Projects", href: "#work" }]}
          buttonAnimation="slide-up"
          cardClassName="!h-auto aspect-video"
          features={[
            {
              title: "Aura Innovations",              description: "Cutting-edge SaaS platform development.",              imageSrc: "http://img.b2bpic.net/free-photo/glowing-warning-triangle-with-digital-distortion-black-background_84443-91300.jpg",              imageAlt: "SaaS application interface with advanced features and modern design.",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "Veridian Eco-Resorts",              description: "Immersive luxury travel website.",              imageSrc: "http://img.b2bpic.net/free-photo/dollar-money-bubble-speech-sign-symbol-icon-3d-rendering_56104-1923.jpg",              imageAlt: "Luxury travel website homepage with stunning photography and user-friendly booking.",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "Peak Fitness Hub",              description: "Engaging fitness and wellness portal.",              imageSrc: "http://img.b2bpic.net/free-photo/enthusiastic-woman-showing-money-cash-smiling-got-loan-micro-credit-standing-delighted-against-w_1258-88159.jpg",              imageAlt: "Fitness app UI on a smartphone, displaying workout plans and progress tracking.",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "Artisan Brew Co.",              description: "Distinctive e-commerce for craft beverages.",              imageSrc: "http://img.b2bpic.net/free-photo/letter-e-made-green-grass-isolated-white_169016-56958.jpg",              imageAlt: "Craft beer e-commerce website with unique product photography and brand storytelling.",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "Quantum Analytics",              description: "Sophisticated data analytics dashboard.",              imageSrc: "http://img.b2bpic.net/free-photo/grass-letter-t-alphabet-3d-design-isolated-transparent-background_169016-57304.jpg",              imageAlt: "Data analytics dashboard interface, visualizing complex data sets with charts and graphs.",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
          ]}
        />
        <FeatureBento
          title="Our Commitment to Your Growth"
          description="We stand by our promise to deliver exceptional results, unwavering support, and innovative solutions for your business."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              title: "All Devices Optimization",              description: "Flawless user experiences across all devices, ensuring your brand is accessible and visually stunning everywhere.",              bentoComponent: "phone",              statusIcon: Lock,
              alertIcon: Monitor,
              alertTitle: "Device Compatibility",              alertMessage: "Optimized for all screens",              apps: [
                { name: "Phone", icon: Phone },
                { name: "SMS", icon: MessageCircle },
                { name: "Books", icon: BookOpen },
                { name: "TV", icon: Tv },
                { name: "Camera", icon: Camera },
                { name: "Music", icon: Music },
                { name: "Settings", icon: Settings },
                { name: "Chat", icon: MessageCircle },
              ],
            },
            {
              title: "Secure Hosting",              description: "Robust, secure, and reliable hosting infrastructure, safeguarding your digital assets with 24/7 monitoring.",              bentoComponent: "reveal-icon",              icon: Shield,
            },
            {
              title: "Fast Turnaround",              description: "Efficient project management and agile development ensure timely delivery without compromising on quality.",              bentoComponent: "timeline",              heading: "Project Timeline",              subheading: "Agile Workflow",              items: [
                { label: "Discovery & Strategy", detail: "Week 1" },
                { label: "Design & Development", detail: "Weeks 2-4" },
                { label: "Launch & Optimization", detail: "Week 5" },
              ],
              completedLabel: "Live"},
            {
              title: "Seamless Integrations",              description: "Effortlessly integrate with your existing business tools for a connected and streamlined operational workflow.",              bentoComponent: "orbiting-icons",              centerIcon: Puzzle,
              items: [
                { icon: Shield },
                { icon: Monitor },
                { icon: Zap },
                { icon: TrendingUp },
              ],
            },
            {
              title: "Growth Trends",              description: "Leveraging cutting-edge analytics and market insights to drive continuous improvement and sustainable growth.",              bentoComponent: "line-chart"},
          ]}
        />
        <TestimonialCardFifteen
          testimonial="Creative Edge Agency exceeded our expectations. Their innovative approach to design and development truly brought our vision to life, resulting in a significant boost in engagement and conversions."
          rating={5}
          author="— Elena Rodriguez, Founder of Aura Innovations"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/letter-n-made-real-natural-flowers-leaves-transparent-background_169016-54260.jpg", alt: "Elena Rodriguez" },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
        <MetricCardOne
          title="Impactful Results, Proven Track Record"
          description="Our success is measured by the growth and achievements of our clients across various industries."
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            { id: "projects", value: "150+", title: "Successful Projects", description: "Delivered with precision and creative excellence.", icon: Award },
            { id: "satisfaction", value: "97%", title: "Client Satisfaction", description: "Our commitment to client success is paramount.", icon: Users },
            { id: "years", value: "10+", title: "Years of Expertise", description: "A decade of mastering digital solutions.", icon: TrendingUp },
          ]}
        />
        <FeatureCardSixteen
          title="The Creative Edge Advantage"
          description="Partner with us and experience the difference that dedicated expertise and innovative solutions can make."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          negativeCard={{
            items: [
              "Cookie-cutter designs lacking originality",              "Slow, clunky websites with poor user experience",              "Inconsistent branding and fragmented digital presence",              "Lack of strategic direction for online growth",              "Limited post-launch support and unresponsive communication"],
          }}
          positiveCard={{
            items: [
              "Bespoke, impactful designs tailored to your vision",              "Blazing-fast, SEO-optimized, and responsive websites",              "Cohesive branding that captivates and connects",              "Data-driven strategies for sustainable online growth",              "Ongoing partnership, support, and expert guidance"],
          }}
        />
        <TeamCardFive
          title="Meet Our Visionary Team"
          description="A collective of passionate designers, developers, and strategists, united by a love for digital innovation."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          mediaClassName="object-[65%_center]"
          team={[
            { id: "1", name: "Sarah Miller", role: "Lead UI/UX Designer", imageSrc: "http://img.b2bpic.net/free-photo/lgbtq-pride-flag-with-woman-rsquo-s-hand-raising_53876-129559.jpg", imageAlt: "Professional portrait of a female UI/UX designer, creative and focused." },
            { id: "2", name: "Valentina Reyes", role: "Head of Development", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3khvwf", imageAlt: "Professional portrait of a female head developer, confident and modern." },
            { id: "3", name: "Carlos Mendoza", role: "Digital Strategist", imageSrc: "http://img.b2bpic.net/free-photo/letter-m-made-real-natural-flowers-leaves-white-background-isolated_169016-54172.jpg", imageAlt: "Professional portrait of a male digital strategist, thoughtful and insightful." },
          ]}
        />
        <FaqBase
          title="Your Questions, Answered"
          description="Find quick answers to common inquiries about our process, services, and how we can best support your digital journey."
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            { id: "1", title: "What is your typical project workflow?", content: "Our process involves discovery, strategy, design, development, rigorous testing, and launch, followed by optional ongoing support to ensure long-term success." },
            { id: "2", title: "How do you ensure project success and client satisfaction?", content: "We prioritize clear communication, transparent reporting, and iterative feedback loops. Our dedicated project managers ensure your vision is realized and goals are met." },
            { id: "3", title: "Can you help with digital marketing beyond website development?", content: "Absolutely! We offer comprehensive digital marketing services including SEO, content strategy, social media management, and paid advertising to maximize your online reach." },
            { id: "4", title: "What happens after my website launches?", content: "Post-launch, we provide thorough training on managing your new site, offer optimization recommendations, and can provide ongoing maintenance and support packages." },
            { id: "5", title: "Do you work with businesses of all sizes?", content: "Yes, we tailor our services to meet the unique needs and budgets of startups, small businesses, and large enterprises, ensuring scalable solutions for everyone." },
          ]}
        />
        <ContactCTA
          tag="Connect with Us"
          title="Ready to Build Your Digital Legacy?"
          description="Let's collaborate on your next groundbreaking project. Reach out today for a consultation and transform your online presence."
          background={{ variant: "rotated-rays-animated" }}
          buttons={[
            { text: "Schedule a Consultation", href: "#contact" },
            { text: "View Case Studies", href: "#work" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
        <FooterBase
          logoText="Creative Edge"
          copyrightText="© 2026 | Creative Edge Agency. All rights reserved."
          columns={[
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Services", href: "#services" },
                { label: "Our Work", href: "#work" },
                { label: "Contact", href: "#contact" },
              ],
            },
            {
              title: "Services",              items: [
                { label: "Web Design", href: "#" },
                { label: "SEO & Marketing", href: "#" },
                { label: "Branding", href: "#" },
                { label: "UI/UX Strategy", href: "#" },
              ],
            },
            {
              title: "Connect",              items: [
                { label: "LinkedIn", href: "#" },
                { label: "Instagram", href: "#" },
                { label: "Behance", href: "#" },
                { label: "Dribbble", href: "#" },
              ],
            },
          ]}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}
