"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Building2, Crown, CreditCard, Database, DollarSign, Map, MessageCircle, MessageSquare, Rocket, Send, Settings, ShoppingBag, Smartphone, Sparkles, Star, Target, TrendingUp, User, UtensilsCrossed, Zap, Mail, Instagram } from 'lucide-react';
import CardStack from '@/components/cardStack/CardStack';

export default function Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="ABOU"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Integrations", id: "integrations" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="AI Agents Built for Bali's Leading Businesses"
          description="Transform your business operations with intelligent AI agents. Trusted by Bali's top hotels, restaurants, tour operators, and enterprises to automate customer service, boost sales, and streamline operations."
          background={{ variant: "downward-rays-static" }}
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", alt: "Business leader in Bali" },
            { src: "https://img.b2bpic.net/free-photo/front-view-businessman-park_23-2148242744.jpg", alt: "ABOU team member" },
            { src: "https://img.b2bpic.net/free-photo/successful-latin-businesswoman-standing-with-folded-hands-portrait-confident-young-pretty-female-office-employer-black-blouse-posing-work-business-company-management-concept_74855-7824.jpg", alt: "Client partner" }
          ]}
          avatarText="Trusted by 50+ Bali businesses"
          buttons={[
            { text: "Schedule Demo", href: "contact" },
            { text: "Explore Solutions", href: "features" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Intelligent AI Solutions"
          description="Powered by cutting-edge artificial intelligence, our agents handle complex business challenges with human-like understanding and 24/7 availability."
          tag="Capabilities"
          tagIcon={Sparkles}
          features={[
            {
              title: "Customer Service Automation",              description: "AI agents that understand context, handle complaints, and resolve issues in Indonesian and English with natural conversation flow.",              bentoComponent: "chat",              aiIcon: MessageCircle,
              userIcon: User,
              exchanges: [
                {
                  userMessage: "Saya ingin membatalkan reservasi saya",                  aiResponse: "Saya mengerti. Mari kita tinjau opsi pembatalan Anda dan apa yang tersedia."
                },
                {
                  userMessage: "Apakah ada biaya pembatalan?",                  aiResponse: "Tergantung pada waktu pembatalan relatif terhadap tanggal check-in Anda. Saya dapat membantu menjelaskan rinciannya."
                }
              ],
              placeholder: "Tanya agen AI..."
            },
            {
              title: "Business Analytics",              description: "Real-time insights into customer behavior, sales trends, and operational metrics to drive data-informed decisions.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Global Integration",              description: "Seamlessly connect with your existing tools: booking systems, CRM, payment gateways, and communication platforms.",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
              items: [
                { icon: Smartphone, ring: 1, duration: 8 },
                { icon: CreditCard, ring: 1, duration: 10 },
                { icon: MessageSquare, ring: 2, duration: 12 },
                { icon: Database, ring: 2, duration: 14 },
                { icon: Settings, ring: 3, duration: 16 }
              ]
            },
            {
              title: "Multi-Channel Support",              description: "Deploy AI agents across WhatsApp, Instagram, Facebook, email, and web chat with consistent intelligent responses.",              bentoComponent: "icon-info-cards",              items: [
                { icon: MessageCircle, label: "WhatsApp", value: "24/7 Support" },
                { icon: Instagram, label: "Instagram", value: "Instant Replies" },
                { icon: Mail, label: "Email", value: "Smart Responses" }
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="integrations" data-section="integrations">
        <FeatureBorderGlow
          title="Purpose-Built for Your Industry"
          description="Whether you run a hotel, restaurant, tour company, retail store, or service business, we have AI solutions tailored to your needs."
          tag="Specialized Solutions"
          tagIcon={Target}
          features={[
            {
              icon: Building2,
              title: "Hospitality & Hotels",              description: "Room reservations, guest inquiries, check-in assistance, and personalized recommendations powered by AI intelligence."
            },
            {
              icon: UtensilsCrossed,
              title: "Food & Beverage",              description: "Restaurant table management, food ordering, menu recommendations, and delivery coordination with smart AI agents."
            },
            {
              icon: Map,
              title: "Tourism & Travel",              description: "Tour booking, itinerary planning, local recommendations, and customer support for adventure seekers exploring Bali."
            },
            {
              icon: ShoppingBag,
              title: "Retail & E-Commerce",              description: "Product discovery, inventory management, order tracking, and personalized shopping experiences driven by AI."
            },
            {
              icon: TrendingUp,
              title: "Wellness & Spa",              description: "Appointment scheduling, service recommendations, membership management, and guest wellness guidance."
            },
            {
              icon: TrendingUp,
              title: "Enterprise Solutions",              description: "Custom AI agent deployment for large organizations with complex operational requirements and high-volume transactions."
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="ABOU's AI agents have transformed how we manage guest inquiries. We've reduced response time from hours to seconds, and guest satisfaction has increased dramatically. The integration was seamless and their team was incredibly supportive throughout."
          rating={5}
          author="Made Kusuma, General Manager - Five-Star Resort Bali"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/cheerful-handsome-businessman_1262-21003.jpg", alt: "General Manager testimonial" },
            { src: "https://img.b2bpic.net/free-photo/thoughtful-senior-businessman-cafe-table_1262-1637.jpg", alt: "Hotel director endorsement" },
            { src: "https://img.b2bpic.net/free-photo/happy-successful-businessman-posing-outside_74855-2003.jpg", alt: "Business owner feedback" },
            { src: "https://img.b2bpic.net/free-photo/middle-aged-asian-businessman-restaurant_1262-1549.jpg", alt: "Enterprise leader support" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Flexible Pricing for Every Scale"
          description="From startups to large enterprises, we have a plan that fits your needs. Scale up anytime without long-term contracts."
          tag="Transparent Pricing"
          tagIcon={DollarSign}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          plans={[
            {
              id: "starter",              badge: "For Small Businesses",              badgeIcon: Rocket,
              price: "$299/month",              subtitle: "Perfect for growing businesses starting with AI",              buttons: [
                { text: "Get Started", href: "contact" }
              ],
              features: [
                "1 AI Agent deployment",                "Single channel integration (WhatsApp or Web)",                "Up to 1,000 conversations/month",                "Basic analytics dashboard",                "Email support",                "Chat templates included"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Star,
              price: "$799/month",              subtitle: "Ideal for established local businesses",              buttons: [
                { text: "Start Free Trial", href: "contact" }
              ],
              features: [
                "3 AI Agent deployments",                "Multi-channel support (WhatsApp, Web, Instagram)",                "Up to 10,000 conversations/month",                "Advanced analytics with insights",                "Priority support (24/7)",                "Custom training for your domain",                "API access",                "Monthly strategy consultation"
              ]
            },
            {
              id: "enterprise",              badge: "For Large Enterprises",              badgeIcon: Crown,
              price: "Custom",              subtitle: "Unlimited scale with dedicated support",              buttons: [
                { text: "Schedule Consultation", href: "contact" }
              ],
              features: [
                "Unlimited AI Agent deployments",                "All channels + custom integrations",                "Unlimited conversations",                "White-label solutions available",                "Dedicated account manager",                "Custom development & training",                "SLA guarantees",                "Advanced security & compliance",                "Real-time monitoring & optimization"
              ]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          tagIcon={Send}
          title="Ready to Transform Your Business?"
          description="Join Bali's leading businesses using AI to serve customers better. Schedule a demo today and see how ABOU can help you scale."
          background={{ variant: "downward-rays-static" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="your@email.com"
          buttonText="Get Demo Access"
          termsText="We respect your privacy. You'll receive a personalized demo scheduling link and product updates."
        />
      </div>

      <div id="layout" data-section="layout">
        <CardStack />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "features" },
                { label: "Integrations", href: "integrations" },
                { label: "Pricing", href: "pricing" },
                { label: "Roadmap", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About ABOU", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "#" },
                { label: "Contact Us", href: "contact" },
                { label: "Status Page", href: "#" },
                { label: "Documentation", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 ABOU. All rights reserved. Building AI for Bali's future."
        />
      </div>
    </ThemeProvider>
  );
}