"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 SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users, User, Briefcase, Globe, BarChart3, Clock, Scale } 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="Amy"
          navItems={[
            { name: "Work", id: "work" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Book a Call", href: "#contact" }}
        />
        <HeroSplitDoubleCarousel
          title="Amy | Where Premium Web Design Meets High-Performance Growth."
          description="Hi, I’m Amy. I help brands scale by delivering bespoke web development, data-driven advertising, and cohesive brand strategies tailored to dominate your market."
          tag="Elite Strategic Partner"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "canvas-reveal" }}
          buttons={[
            { text: "View My Portfolio", href: "#work" },
            { text: "Book a Strategy Call", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          carouselPosition="right"
          leftCarouselItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994346.jpg", imageAlt: "Premium E-commerce Website Design" },
            { imageSrc: "http://img.b2bpic.net/free-photo/business-owner-analyzing-blank-mockup-display-smartphone_482257-87225.jpg", imageAlt: "Elegant SaaS Platform UI" },
            { imageSrc: "http://img.b2bpic.net/free-photo/design-style-graphic-creativity-ideas-illustration-concept_53876-121068.jpg", imageAlt: "Modern Branding & Digital Strategy" }
          ]}
          rightCarouselItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-colorful-arrows_1134-381.jpg", imageAlt: "Data-Driven Marketing Analytics" },
            { imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-planning-business-charts-digital-laptop-working-with-e-commerce-e-shopping-management-company-office-manager-using-statistics-develop-creative-project_482257-39076.jpg", imageAlt: "High-Converting Landing Page Design" },
            { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-landing-page-template_23-2149200404.jpg", imageAlt: "Sleek Corporate Web Design" }
          ]}
          carouselItemClassName="!aspect-[4/5]"
        />
        <div id="social-proof" data-section="social-proof">
          <SocialProofOne
            names={[
              "Google", "Microsoft", "Amazon", "Apple", "Netflix", "Spotify", "Meta", "Tesla", "IBM", "Intel", "Cisco", "Oracle"
            ]}
            title="Trusted by Industry Leaders"
            description="Amy's expertise is backed by the confidence of renowned global brands."
            textboxLayout="default"
            useInvertedBackground={false}
            showCard={false}
            ariaLabel="Companies that trust Amy"
          />
        </div>
        <FeatureBento
          title="Strategic Services for Unmatched Growth"
          description="Bridging client vision with exceptional web design, data-driven marketing, and cohesive brand strategy."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          buttons={[{ text: "Let's Discuss Your Project", href: "#contact" }]}
          buttonAnimation="slide-up"
          features={[
            {
              title: "Professional Website Design",              description: "Crafting bespoke, lightning-fast, and visually stunning digital experiences. Focused on intuitive UI/UX, seamless responsiveness, and high conversion rates.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "http://img.b2bpic.net/free-photo/date-night-ideas-valantine-romance-heart-love-passion-concept_53876-133732.jpg", imageAlt: "Bespoke Website Development Showcase" },
                { imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-live-abstract-wallpaper-coming-out-screen_23-2151033623.jpg", imageAlt: "Responsive UI/UX Design Example" },
                { imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749912.jpg", imageAlt: "High Conversion Website Layout" },
              ],
            },
            {
              title: "Performance Ads & Growth Marketing",              description: "Data-driven paid advertising campaigns (Google Ads, Meta Ads) designed to maximize ROI, generate high-quality leads, and scale revenue predictably.",              bentoComponent: "line-chart"},
            {
              title: "Strategic Branding & Visual Identity",              description: "Building powerful, cohesive brand identities from the ground up, including logo systems, visual guidelines, and market positioning that resonates with target audiences.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "http://img.b2bpic.net/free-photo/golden-lightning-bolt-icon-glowing-textured-brown-background_84443-91489.jpg", imageAlt: "Modern Brand Logo Design" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ixxv6y", imageAlt: "Visual Brand Guidelines Mockup" },
                { imageSrc: "http://img.b2bpic.net/free-photo/strategy-new-business-launch-plan-concept_53876-148021.jpg", imageAlt: "Strategic Market Positioning Visual" },
              ],
            },
          ]}
        />
        <FeatureCardTwentySix
          title="Featured Projects"
          description="A selection of successful collaborations, showcasing impactful digital transformations."
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "View All Portfolio", href: "#work" }]}
          buttonAnimation="slide-up"
          cardClassName="!h-auto aspect-video"
          features={[
            {
              title: "Quoc Lien Phuong",              description: "Corporate & Industrial Showcase",              imageSrc: "http://img.b2bpic.net/free-photo/engineer-solar-panels-plant-uses-cad-software-mockup-pc-optimize-layout_482257-119952.jpg",              imageAlt: "Quoc Lien Phuong Website Mockup",              buttonIcon: ArrowUpRight,
              buttonHref: "https://quoclienphuong.vn/"},
            {
              title: "Asia Eyes Travel",              description: "Premium Inbound Tourism & Booking Platform",              imageSrc: "http://img.b2bpic.net/free-photo/air-ticket-flight-booking-concept_53876-133923.jpg",              imageAlt: "Asia Eyes Travel Website Mockup",              buttonIcon: ArrowUpRight,
              buttonHref: "https://asiaeyestravel.com/"},
            {
              title: "SP Travel",              description: "Dynamic Travel & Tourism Experience",              imageSrc: "http://img.b2bpic.net/free-photo/map-gps-direction-navigation-route-travel_53876-124881.jpg",              imageAlt: "SP Travel Website Mockup",              buttonIcon: ArrowUpRight,
              buttonHref: "https://sptravel.vn/"},
            {
              title: "Ha Long Phoenix Cruises",              description: "Luxury Hospitality & Cruise Booking",              imageSrc: "http://img.b2bpic.net/free-photo/traditional-french-food-world-tourism-day_23-2149114061.jpg",              imageAlt: "Ha Long Phoenix Cruises Website Mockup",              buttonIcon: ArrowUpRight,
              buttonHref: "https://halongphoenixcruises.com/"},
            {
              title: "In Truong Phu",              description: "B2B Manufacturing & Printing Solution",              imageSrc: "http://img.b2bpic.net/free-photo/solar-panels-plant-expert-building-environmentally-safe-solar-cells-mockup-pc_482257-118093.jpg",              imageAlt: "In Truong Phu Website Mockup",              buttonIcon: ArrowUpRight,
              buttonHref: "https://intruongphu.vn/"},
          ]}
        />
        <FeatureBento
          title="The Amy Advantage: Your Elite Strategic Partner"
          description="Why choose a direct partnership over traditional bloated agencies or rigid developers."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              title: "Single Point of Contact",              description: "Direct, seamless communication with zero friction, ensuring your vision is perfectly understood and executed.",              bentoComponent: "chat",              aiIcon: User,
              userIcon: MessageCircle,
              exchanges: [
                { userMessage: "Need an update on the branding phase?", aiResponse: "Just finalized the logo system, review is ready in your portal!" },
                { userMessage: "Can we pivot on the ad campaign?", aiResponse: "Absolutely, let's discuss strategy for the new target audience on our call today." },
                { userMessage: "What's the timeline for launch?", aiResponse: "Project is on track for next Friday. All QA checks passed." }
              ],
              placeholder: "Type your message..."
            },
            {
              title: "Business-First Approach",              description: "A deep understanding of client psychology, overarching business objectives, and current market trends to ensure design aligns with growth.",              bentoComponent: "globe"},
            {
              title: "End-to-End Execution",              description: "Flawless project management from initial brief to final deployment and ongoing optimization, delivering comprehensive digital solutions.",              bentoComponent: "timeline",              heading: "Project Lifecycle",              subheading: "Strategic Partnership",              items: [
                { label: "Strategy & Discovery", detail: "Defining Vision" },
                { label: "Design & Development", detail: "Crafting Solutions" },
                { label: "Launch & Optimization", detail: "Driving Growth" },
              ],
              completedLabel: "Continuous Impact"},
          ]}
        />
        <TestimonialCardFifteen
          testimonial="Working with Amy was a game-changer for our business. Her strategic insights and exceptional web design skills transformed our online presence, leading to a significant increase in client engagement and conversions. A truly invaluable partner!"
          rating={5}
          author="— Emily R., Founder of 'Veridian Wellness'"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/portrait-happy-young-businesswoman-talking-mobile-phone_1262-16443.jpg", alt: "Emily R., Founder of 'Veridian Wellness'" },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
        <MetricCardOne
          title="Impact & Results"
          description="Quantifiable success delivering tangible growth for ambitious brands and enterprises."
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            { id: "projects", value: "50+", title: "Successful Projects", description: "Delivered with precision and strategic impact", icon: Briefcase },
            { id: "satisfaction", value: "100%", title: "Client Satisfaction", description: "Building lasting partnerships and trust", icon: Users },
            { id: "growth", value: "3X+", title: "Average Client Growth", description: "Achieving measurable business objectives", icon: TrendingUp },
          ]}
        />
        <FeatureCardSixteen
          title="Amy vs. The Traditional Route"
          description="Experience the strategic difference of working with a dedicated, business-focused expert."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          negativeCard={{
            items: [
              "Bloated teams, slow communication channels",              "Generic solutions, high overhead costs",              "Lack of deep business or market insight",              "Rigid processes, missed deadlines and opportunities",              "'Hand-off' mentality post-launch, limited optimization"],
          }}
          positiveCard={{
            items: [
              "Single point of contact, direct, seamless communication",              "Tailored, cost-effective strategies for maximum ROI",              "Business-first approach, market-driven insights",              "Agile execution, timely delivery, and measurable impact",              "End-to-end partnership, continuous growth and support"],
          }}
        />
        <TeamCardFive
          title="Meet Amy"
          description="Your dedicated partner for digital excellence and strategic growth."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          mediaClassName="object-[65%_center]"
          team={[
            { id: "amy", name: "Amy", role: "Premium Freelance Account Executive & Web Design Strategist", imageSrc: "http://img.b2bpic.net/free-photo/senior-with-necklace-holding-tablet_23-2148346175.jpg", imageAlt: "Amy - Freelance Account Executive" },
          ]}
        />
        <FaqBase
          title="Frequently Asked Questions"
          description="Clear answers about working with a strategic digital partner like Amy."
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            { id: "1", title: "What makes working with you different from an agency?", content: "As a freelance Account Executive and Strategist, you get a single point of contact with direct access to an expert. This means streamlined communication, a deep understanding of your business, and agile execution without the overhead of a large agency." },
            { id: "2", title: "What is your typical project timeline?", content: "Project timelines vary based on scope and complexity. After our initial strategy call and discovery, I provide a clear, tailored timeline. Most web design and strategy projects range from 4-8 weeks." },
            { id: "3", title: "How do you ensure projects align with business goals?", content: "My approach is inherently business-first. We start by defining your key objectives, target audience, and market position. Every design and marketing decision is then made with a direct link to achieving those measurable goals." },
            { id: "4", title: "Do you offer ongoing support and optimization?", content: "Yes, I offer various post-launch support and optimization packages tailored to your needs. My goal is long-term partnership, ensuring your digital assets continue to perform and evolve with your business." },
            { id: "5", title: "What kind of clients do you typically work with?", content: "I partner with ambitious brands and businesses across various industries, from luxury e-commerce and hospitality to B2B services and innovative startups, all seeking premium digital experiences and strategic growth." },
          ]}
        />
        <ContactCTA
          tag="Let's Connect"
          title="Ready to Elevate Your Digital Strategy?"
          description="Schedule a personalized strategy session to discuss your vision, address your challenges, and outline your path to high-performance growth."
          background={{ variant: "rotated-rays-animated" }}
          buttons={[
            { text: "Book a Strategy Call", href: "https://calendly.com/amy-strategy-call" },
            { text: "View My Portfolio", href: "#work" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
        <FooterBase
          logoText="Amy"
          copyrightText="© 2024 Amy | All Rights Reserved."
          columns={[
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Services", href: "#services" },
                { label: "Work", href: "#work" },
                { label: "Contact", href: "#contact" },
              ],
            },
            {
              title: "Services",              items: [
                { label: "Web Design", href: "#services" },
                { label: "Performance Ads", href: "#services" },
                { label: "Branding", href: "#services" },
              ],
            },
            {
              title: "Connect",              items: [
                { label: "LinkedIn", href: "https://www.linkedin.com/in/amyfreelancer" },
              ],
            },
          ]}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}