"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
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 TeamCardSix from "@/components/sections/team/TeamCardSix";
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, Lightbulb, Compass, MonitorPlay, Rocket, Star, Palette, Bot, Globe } 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="Client Flow Studio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Results", id: "results" },
            { name: "Process", id: "process" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Book Consultation", href: "#contact" }}
        />
        <HeroLogoBillboard
          logoText="Client Flow Studio"
          description="Client Flow Studio helps businesses get found, get more leads & grow online. We build websites, optimize Google visibility, and implement AI-powered solutions that help businesses attract more customers and increase revenue."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DbxJR6IxC1XHwzUSsYvpr3NNCx/uploaded-1781075861909-xe4oe3p2.jpg"
          imageAlt="Client Flow Studio Logo"
          background={{ variant: "canvas-reveal" }}
          buttons={[
            { text: "Book Free Consultation", href: "#contact" },
            { text: "Get a Free Audit", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
        />
        <FeatureBento
          title="Who We Are"
          description="Flow Studio Agency is a results-driven digital growth agency dedicated to helping businesses strengthen their online presence and generate more qualified leads. We combine website design, local SEO, Google Business Profile optimization, AI solutions, and digital marketing strategies to create measurable business growth."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              title: "Results-Driven",              description: "Focused on delivering measurable outcomes that impact your bottom line.",              bentoComponent: "reveal-icon",              icon: TrendingUp,
            },
            {
              title: "Online Presence",              description: "Crafting strong digital foundations to enhance your visibility.",              bentoComponent: "phone",              statusIcon: Lock,
              alertIcon: Monitor,
              alertTitle: "Visibility Check",              alertMessage: "Online Presence Optimized",              apps: [
                { name: "Website", icon: Monitor },
                { name: "SEO", icon: Search },
                { name: "Social", icon: MessageCircle },
                { name: "Google Maps", icon: Globe },
                { name: "Analytics", icon: Award },
                { name: "AI Tools", icon: Bot },
                { name: "Branding", icon: Palette },
                { name: "Marketing", icon: Zap }
              ],
            },
            {
              title: "Lead Generation",              description: "Strategies and tools to attract and convert qualified leads.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Search, label: "SEO", value: "+30%" },
                { icon: Monitor, label: "Web Design", value: "+20%" },
                { icon: Bot, label: "AI Chat", value: "+15%" },
              ]
            },
            {
              title: "AI Solutions",              description: "Leveraging artificial intelligence to streamline operations and drive efficiency.",              bentoComponent: "chat",              aiIcon: Bot,
              userIcon: Users,
              placeholder: "How can I help you today?",              exchanges: [
                { userMessage: "Generate a marketing plan for new product.", aiResponse: "Certainly! Let's outline a data-driven strategy focusing on target audience, channels, and KPIs." },
                { userMessage: "Automate customer service responses.", aiResponse: "We can implement AI chatbots for instant, personalized support 24/7, reducing workload." }
              ]
            },
          ]}
        />
        <FeatureBento
          title="Our Services"
          description="Discover our comprehensive suite of digital services designed to elevate your brand, attract more customers, and drive sustainable growth."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          buttons={[{ text: "Book a Consultation", href: "#contact" }]}
          buttonAnimation="slide-up"
          features={[
            {
              title: "Web Design & Development",              description: "Beautiful, responsive websites designed to convert visitors into customers.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "http://img.b2bpic.net/free-photo/mockup-object-imitate-model-replica-design-reproduce-concept_53876-134069.jpg", imageAlt: "Mobile responsive website design" },
                { imageSrc: "http://img.b2bpic.net/free-photo/programming-background-collage_23-2149901790.jpg", imageAlt: "SEO-ready website development" },
                { imageSrc: "http://img.b2bpic.net/free-photo/leisure-calm-peace-relaxation-resting-serenity_53876-13860.jpg", imageAlt: "Fast loading lead generation website" },
              ],
            },
            {
              title: "Google Business Profile Optimization",              description: "Get found by more local customers and stand out in local search results.",              bentoComponent: "globe"},
            {
              title: "SEO",              description: "Improve search rankings and attract qualified leads through targeted local and organic strategies.",              bentoComponent: "marquee",              centerIcon: Search,
              variant: "text",              texts: ["Keyword Research", "On-page SEO", "Local Citations", "Technical SEO", "Ranking Strategy", "Maps Rankings", "Local Reviews", "Directory Listings"],
            },
            {
              title: "AI Automation",              description: "Save time and streamline operations with intelligent, AI-powered solutions.",              bentoComponent: "3d-task-list",              items: [
                { icon: Bot, label: "AI Chatbots", time: "Instant" },
                { icon: Users, label: "Lead Qualification", time: "Automated" },
                { icon: MonitorPlay, label: "Appointment Scheduling", time: "Seamless" }
              ]
            },
            {
              title: "Branding & Content Creation",              description: "Create a memorable online presence with a consistent and compelling brand identity.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "http://img.b2bpic.net/free-photo/asian-businessmen-businesswomen-meeting-brainstorming-ideas-about-creative-web-design-planning-application-developing-template-layout-mobile-phone-project-working-together-small-office_7861-2744.jpg", imageAlt: "Brand strategy and visual identity" },
                { imageSrc: "http://img.b2bpic.net/free-photo/happy-easter-colorful-eggs-festival-celebration-greeting-social-media-post_53876-153527.jpg", imageAlt: "Social media content creation" },
                { imageSrc: "http://img.b2bpic.net/free-photo/minimalist-business-card-high-view_23-2148500476.jpg", imageAlt: "Marketing materials design" },
              ]
            },
            {
              title: "Digital Marketing Strategies",              description: "Reach your target audience effectively with tailored digital campaigns that drive engagement and conversions.",              bentoComponent: "marquee",              centerIcon: Zap,
              variant: "text",              texts: ["Social Media", "Email Campaigns", "Content Marketing", "Paid Ads", "Analytics", "Lead Funnels"]
            }
          ]}
        />
        <FeatureCardTwentySix
          title="Our Work"
          description="A selection of projects we've crafted for clients across industries, driving measurable online growth."
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "See Our Success Stories", href: "#contact" }]}
          buttonAnimation="slide-up"
          cardClassName="!h-auto aspect-video"
          features={[
            {
              title: "Local Business Website",              description: "Custom website for a local service provider.",              imageSrc: "http://img.b2bpic.net/free-photo/online-ticket-booking_53876-65475.jpg",              imageAlt: "Local business website design",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "E-commerce Growth Strategy",              description: "Enhanced online store with SEO and marketing integration.",              imageSrc: "http://img.b2bpic.net/free-photo/still-life-supply-chain-representation_23-2149827235.jpg",              imageAlt: "E-commerce website with growth analytics",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "Google Profile Optimization",              description: "Improved local visibility and customer engagement.",              imageSrc: "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040189.jpg",              imageAlt: "Google Business Profile optimization dashboard",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "AI-Powered Lead System",              description: "Implemented AI for automated lead qualification.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-working-digital-monitors_23-2148910247.jpg",              imageAlt: "AI-powered lead generation system interface",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "Brand Identity Refresh",              description: "Modernized brand for increased market appeal.",              imageSrc: "http://img.b2bpic.net/free-photo/stationery-concept_23-2147800633.jpg",              imageAlt: "Brand identity design and style guide",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
          ]}
        />
        <FeatureCardSixteen
          title="Why Choose Us"
          description="See the Client Flow Studio difference and what sets us apart."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          negativeCard={{
            items: [
              "Generic, one-size-fits-all solutions",              "Outdated designs & slow websites",              "Lack of clear communication & transparency",              "No focus on measurable business growth",              "Limited post-launch support & optimization"],
          }}
          positiveCard={{
            items: [
              "Customized growth strategies built for your business",              "AI-powered business solutions for efficiency",              "Modern, high-converting websites that impress",              "Transparent communication & clear reporting",              "Focused on measurable results and ROI",              "Affordable pricing with exceptional value"],
          }}
        />
        <TestimonialCardFifteen
          testimonial="Client Flow Studio completely transformed our online presence. Our website traffic and lead generation have seen incredible growth since working with them!"
          rating={5}
          author="— Sarah Chen, Owner of 'The Urban Bloom'"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/portrait-young-confident-asian-businesswoman-cross-arms-chest-looking-confident-standing-near_1258-198997.jpg", alt: "Sarah Chen" },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
        <TestimonialCardFifteen
          testimonial="The team at Client Flow Studio is exceptional. Their SEO expertise significantly boosted our Google rankings, bringing in more local customers than ever before."
          rating={5}
          author="— David Ramirez, Founder of 'Ramirez Auto Repair'"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/portrait-happy-black-auto-mechanic-workshop_637285-9406.jpg", alt: "David Ramirez" },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
        <TestimonialCardFifteen
          testimonial="Implementing AI automation with Client Flow Studio was a game-changer. Our internal workflows are smoother, and customer support is more efficient. Highly recommend!"
          rating={5}
          author="— Emily White, CEO of 'Evergreen Solutions'"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/portrait-busy-cheerful-man_329181-14520.jpg", alt: "Emily White" },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
        <MetricCardOne
          title="What Clients Experience"
          description="We deliver tangible results that help small businesses thrive online."
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            { id: "projects", value: "100+", title: "Projects Completed", description: "Successfully helping businesses grow online", icon: Award },
            { id: "businesses", value: "50+", title: "Businesses Supported", description: "Empowering small businesses with digital solutions", icon: Users },
            { id: "views", value: "Thousands", title: "Monthly Views Generated", description: "Increasing online visibility and traffic", icon: TrendingUp },
          ]}
        />
        <TeamCardSix
          title="Our Simple 4-Step Process"
          description="Our streamlined approach ensures clarity, efficiency, and exceptional results for your business."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          members={[
            { id: "1", name: "1. Discovery", role: "We learn about your business goals and objectives.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-making-business-plan-meeting_176420-5101.jpg", imageAlt: "Discovery phase for project" },
            { id: "2", name: "2. Strategy", role: "We create a custom growth plan tailored to your needs.", imageSrc: "http://img.b2bpic.net/free-photo/architectural-blueprints_1359-495.jpg", imageAlt: "Strategy and planning phase" },
            { id: "3", name: "3. Implementation", role: "We build and optimize your digital assets for performance.", imageSrc: "http://img.b2bpic.net/free-photo/operation-process-performance-development-icon_53876-16541.jpg", imageAlt: "Implementation and building phase" },
            { id: "4", name: "4. Growth", role: "We monitor performance and scale results for ongoing success.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-finger-pressing-percentage-tablet_1134-278.jpg", imageAlt: "Growth and scaling phase" },
          ]}
        />
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about partnering with Client Flow Studio."
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            { id: "1", title: "How long does a website take?", content: "Most projects are completed within 1–3 weeks, depending on the complexity and scope of the website. We'll provide a clear timeline upfront." },
            { id: "2", title: "Do you offer monthly services?", content: "Yes. We provide ongoing SEO, Google Business Profile optimization, and digital marketing support to ensure sustained growth." },
            { id: "3", title: "Can you improve my Google visibility?", content: "Absolutely. We specialize in local search optimization and Google Business Profile growth to help you get found by more customers." },
            { id: "4", title: "Do you work with small businesses?", content: "Yes. Small businesses are our primary focus, and we tailor our solutions to meet their unique needs and budgets." },
          ]}
        />
        <ContactCTA
          tag="Grow Your Business"
          title="Ready to Grow Your Business Online?"
          description="Book a free consultation and discover how Client Flow Studio can help your business attract more customers and increase revenue."
          background={{ variant: "rotated-rays-animated" }}
          buttons={[
            { text: "Schedule Consultation", href: "#contact" },
            { text: "Get Free Audit", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
        <FooterBase
          logoText="Client Flow Studio"
          copyrightText="© 2026 Client Flow Studio. All Rights Reserved."
          columns={[
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Services", href: "#services" },
                { label: "Results", href: "#results" },
                { label: "Process", href: "#process" },
                { label: "Contact", href: "#contact" },
              ],
            },
            {
              title: "Services",              items: [
                { label: "Web Design", href: "#services" },
                { label: "Google Optimization", href: "#services" },
                { label: "SEO", href: "#services" },
                { label: "AI Automation", href: "#services" },
                { label: "Branding", href: "#services" },
                { label: "Digital Marketing", href: "#services" }
              ],
            },
            {
              title: "Connect",              items: [
                { label: "Email", href: "mailto:info@flowstudio.com" },
                { label: "Phone", href: "tel:+1234567890" },
                { label: "LinkedIn", href: "#" },
                { label: "Facebook", href: "#" },
              ],
            },
          ]}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}
