"use client";

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function HowItWorksPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Link AI"
          navItems={[
            { name: "Home", id: "/" },
            { name: "How It Works", id: "/how-it-works" },
            { name: "Features", id: "/features" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Start Free Trial",
            href: "https://app.linkaitech.com/signup"
          }}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="How Link AI Works"
          description="Seamlessly integrate intelligent AI agents into your existing messaging channels"
          tabs={[
            {
              id: "setup",
              label: "Quick Setup",
              description: "Connect your WhatsApp Business Account or Instagram in minutes. Link AI automatically syncs with your existing contact lists and conversation history. No complex API configurations required."
            },
            {
              id: "ai-agents",
              label: "AI Agents",
              description: "Our proprietary AI understands context, sentiment, and customer intent. Agents can answer FAQs, qualify leads, schedule appointments, and escalate complex issues to your team when needed."
            },
            {
              id: "analytics",
              label: "Real-Time Analytics",
              description: "Monitor conversation metrics, response times, customer satisfaction, and AI performance. Get actionable insights to continuously improve your customer engagement strategy."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg"
          imageAlt="Link AI platform interface and team collaboration"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="process-metrics" data-section="process-metrics">
        <MetricCardFourteen
          title="Transform Your Customer Support Process with Intelligent Automation"
          tag="Process Benefits"
          metrics={[
            {
              id: "1",
              value: "< 5 min",
              description: "Setup time to get your first AI agent running. Connect WhatsApp or Instagram and start automating conversations instantly."
            },
            {
              id: "2",
              value: "24/7",
              description: "Round-the-clock availability. Your AI agents never sleep, ensuring customers always receive immediate responses."
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="implementation-guide" data-section="implementation-guide">
        <MediaSplitTabsAbout
          title="Implementation Made Simple"
          description="Get up and running with Link AI in three straightforward steps"
          tabs={[
            {
              id: "connect",
              label: "Connect Channels",
              description: "Link your WhatsApp Business Account and Instagram profiles through our secure integration. Our platform automatically imports your conversation history and contact lists for seamless continuity."
            },
            {
              id: "customize",
              label: "Customize AI",
              description: "Train your AI agents with your brand voice, FAQ responses, and escalation rules. Set up automated workflows for lead qualification, appointment booking, and customer support scenarios."
            },
            {
              id: "monitor",
              label: "Monitor & Optimize",
              description: "Track performance through real-time analytics. Monitor response accuracy, customer satisfaction, and conversation volume. Continuously refine AI responses based on data insights."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169863.jpg"
          imageAlt="Link AI implementation dashboard"
          imagePosition="left"
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterSimple
        columns={[
          {
            title: "Product",
            items: [
              { label: "Features", href: "/features" },
              { label: "How It Works", href: "/how-it-works" },
              { label: "Security", href: "#" },
              { label: "Updates", href: "#" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "How It Works", href: "/how-it-works" },
              { label: "Blog", href: "#" },
              { label: "Careers", href: "#" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Resources",
            items: [
              { label: "Documentation", href: "#" },
              { label: "API Reference", href: "#" },
              { label: "Community", href: "#" },
              { label: "Support", href: "#" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Privacy Policy", href: "#" },
              { label: "Terms of Service", href: "#" },
              { label: "Cookie Policy", href: "#" },
              { label: "Compliance", href: "#" }
            ]
          }
        ]}
        bottomLeftText="© 2025 Link AI. All rights reserved."
        bottomRightText="Automating conversations, scaling support."
      />
    </ThemeProvider>
  );
}