"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import {
  AlertCircle,
  BarChart3,
  Bot,
  CheckCircle,
  Cpu,
  DollarSign,
  Globe,
  Link,
  Mail,
  Settings,
  Sparkles,
  Target,
  TrendingDown,
  TrendingUp,
  User,
  Zap,
} from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="subtle-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Ascend"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Process", id: "process" },
            { name: "Results", id: "results" },
            { name: "Why Us", id: "why-us" },
            { name: "Contact", id: "contact" },
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="ASCEND"
          description="Smarter Growth. Powered by AI. We combine performance marketing and AI automation to build scalable growth systems for modern businesses."
          buttons={[
            { text: "Book a Strategy Call", href: "contact" },
            { text: "See How We Work", href: "process" },
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXYs8p19SwZgPCy0dYpDGi8Hd/a-sleek-minimalist-ai-dashboard-interfac-1772500397714-1d73d012.png"
          imageAlt="AI-powered marketing dashboard interface"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="problem" data-section="problem">
        <AboutMetric
          title="The Problem With Traditional Marketing. Most businesses rely on manual processes, disconnected tools, and reactive growth. This creates inefficiency, missed opportunities, and wasted budget."
          metrics={[
            { icon: AlertCircle, label: "Manual Processes", value: "60% Time Waste" },
            { icon: Zap, label: "Disconnected Tools", value: "Lost Data" },
            { icon: TrendingDown, label: "Reactive Strategy", value: "Limited Scale" },
            { icon: Target, label: "Generic Campaigns", value: "Poor Results" },
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="solution" data-section="solution">
        <FeatureBento
          title="Our Solution: Growth Infrastructure"
          description="We build intelligent systems that integrate AI across your entire marketing, sales, and operations stack. This is what systems-based growth looks like."
          tag="Our Approach"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          features={[
            {
              title: "High-Converting Websites",              description: "Modern builds optimized for lead capture and conversion with strategic CTAs.",              bentoComponent: "animated-bar-chart"},
            {
              title: "Paid Advertising Systems",              description: "Meta, Google, TikTok campaigns managed with precision and data-driven optimization.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Zap, label: "Meta Ads", value: "Performance" },
                { icon: Target, label: "Google Ads", value: "Precision" },
                { icon: TrendingUp, label: "TikTok Ads", value: "Growth" },
              ],
            },
            {
              title: "AI-Driven Email & SMS",              description: "Automated sequences that nurture leads with personalized, intelligent messaging.",              bentoComponent: "marquee",              centerIcon: Mail,
              variant: "text",              texts: [
                "Intelligent Automation",                "Personalized Sequences",                "Real-Time Optimization"],
            },
            {
              title: "Intelligent Chatbots",              description: "AI-powered conversation systems that qualify leads 24/7 with zero manual effort.",              bentoComponent: "chat",              aiIcon: Bot,
              userIcon: User,
              exchanges: [
                {
                  userMessage: "What services do you offer?",                  aiResponse: "We specialize in AI automation and growth systems. Let me qualify your needs to recommend the best solution."},
                {
                  userMessage: "How long does implementation take?",                  aiResponse: "Implementation typically takes 4-8 weeks depending on complexity. Our team will provide a custom timeline after our audit."},
              ],
              placeholder: "Ask about our services..."},
            {
              title: "Sales Pipeline Automation",              description: "Seamless integration with your CRM to automate follow-up and customer journey management.",              bentoComponent: "3d-task-list",              items: [
                { icon: Settings, label: "Lead Capture", time: "Real-time" },
                { icon: Zap, label: "Qualification", time: "Instant" },
                { icon: CheckCircle, label: "Follow-up", time: "Automated" },
              ],
            },
            {
              title: "Performance Dashboards",              description: "Real-time visibility into every metric that matters: cost per lead, conversion rates, ROI, and more.",              bentoComponent: "line-chart"},
          ]}
          carouselMode="buttons"
        />
      </div>

      <div id="services" data-section="services">
        <MetricCardThree
          title="Our Core Services"
          description="Four integrated pillars of growth. We don't do one thing—we build complete systems."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            { id: "1", icon: TrendingUp, title: "Performance Marketing", value: "Paid Ads" },
            { id: "2", icon: Zap, title: "Content & Creative", value: "Strategy" },
            { id: "3", icon: Globe, title: "Website & Conversion", value: "Optimization" },
            { id: "4", icon: Cpu, title: "AI Automation", value: "Systems" },
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <TeamCardFive
          title="How We Work: 4-Step System"
          description="Strategic, systematic, and scalable. This is our proven process for building growth infrastructure."
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          team={[
            {
              id: "1",              name: "Audit & Analyze",              role: "Deep dive into your current systems, data, and gaps",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXYs8p19SwZgPCy0dYpDGi8Hd/data-audit-and-analysis-visual-a-profess-1772500398091-b67a0b6f.png",              imageAlt: "Audit and analysis phase"},
            {
              id: "2",              name: "Architect Your Stack",              role: "Design the growth infrastructure custom to your needs",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXYs8p19SwZgPCy0dYpDGi8Hd/architecture-and-planning-visualization--1772500398279-f715503e.png",              imageAlt: "Architecture planning phase"},
            {
              id: "3",              name: "Build & Integrate",              role: "Implementation of systems, automation, and platforms",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXYs8p19SwZgPCy0dYpDGi8Hd/implementation-and-integration-visual-de-1772500398297-82e57193.png",              imageAlt: "Build and integration phase"},
            {
              id: "4",              name: "Optimize & Scale",              role: "Continuous refinement and growth expansion",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXYs8p19SwZgPCy0dYpDGi8Hd/optimization-and-scaling-visual-performa-1772500398235-9c3a9c50.png",              imageAlt: "Optimization and scaling phase"},
          ]}
        />
      </div>

      <div id="results" data-section="results">
        <MetricCardThree
          title="Results That Matter"
          description="Measurable outcomes. Real impact. These are the metrics that drive business growth."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            { id: "1", icon: TrendingUp, title: "Conversion Lift", value: "+43%" },
            { id: "2", icon: DollarSign, title: "Acquisition Cost", value: "-28%" },
            { id: "3", icon: Zap, title: "Follow-up Speed", value: "3x Faster" },
            { id: "4", icon: Target, title: "Close Rates", value: "+67%" },
          ]}
        />
      </div>

      <div id="why-us" data-section="why-us">
        <TestimonialCardTwo
          title="Why Ascend Digital"
          description="What makes us different. Strategic expertise meets technical execution."
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "AI-First Methodology",              role: "Intelligence built into every system",              testimonial: "We don't just add AI to marketing—we architect entire systems around intelligent automation. This is fundamentally different from traditional agencies.",              icon: Cpu,
            },
            {
              id: "2",              name: "Systems-Based Approach",              role: "Integration over isolation",              testimonial: "Every component we build connects to your broader growth infrastructure. No silos. No disconnected tools. Just seamless, orchestrated systems.",              icon: Link,
            },
            {
              id: "3",              name: "Strategic Execution",              role: "Strategy meets technical precision",              testimonial: "We combine high-level strategic thinking with meticulous technical implementation. This balance is what separates results from excuses.",              icon: Target,
            },
            {
              id: "4",              name: "End-to-End Ownership",              role: "True partnership accountability",              testimonial: "We own the entire process from strategy through optimization. You get clarity, accountability, and measurable outcomes.",              icon: CheckCircle,
            },
            {
              id: "5",              name: "Long-Term Partnership",              role: "Growth that compounds",              testimonial: "We're not a vendor for a project—we're partners building your sustainable competitive advantage. Your growth is our growth.",              icon: TrendingUp,
            },
            {
              id: "6",              name: "Data-Driven Precision",              role: "Every decision backed by data",              testimonial: "We measure everything, optimize relentlessly, and make decisions based on data—not guesses. This discipline compounds over time.",              icon: BarChart3,
            },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <PricingCardTwo
          title="Build Smarter. Scale Faster."
          description="Stop relying on manual growth. Install intelligent systems that work while you scale."
          tag="Next Steps"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "1",              badge: "Start Here",              price: "Strategic Audit",              subtitle: "Understand your growth gaps and opportunities",              buttons: [{ text: "Schedule Audit", href: "#contact" }],
              features: [
                "Current system analysis",                "Competitive benchmarking",                "Growth opportunity identification",                "Custom recommendations",                "Strategic roadmap"],
              badgeIcon: Sparkles,
            },
            {
              id: "2",              badge: "Most Effective",              price: "Full Implementation",              subtitle: "Complete growth infrastructure build-out",              buttons: [{ text: "Schedule Consultation", href: "#contact" }],
              features: [
                "Website optimization or build",                "Paid ad system setup",                "AI automation suite",                "CRM integration",                "Ongoing optimization",                "Quarterly strategy reviews"],
              badgeIcon: Zap,
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="ASCEND"
          columns={[
            {
              items: [
                { label: "Services", href: "#services" },
                { label: "Process", href: "#process" },
                { label: "Why Us", href: "#why-us" },
              ],
            },
            {
              items: [
                { label: "Book a Call", href: "#contact" },
                { label: "Growth Audit", href: "#contact" },
                { label: "Consultation", href: "#contact" },
              ],
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "mailto:hello@ascenddigital.com" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}