"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Zap, Bot, User, BarChart3, Settings, CheckCircle, MessageSquare, FileCheck, Receipt, Send, MessageCircle, Mail, Globe, Calendar, CreditCard, TrendingUp, Users, Shield, Building2, UtensilsCrossed, Plane, ShoppingCart, Spa, Building, Award } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="ABOU"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Solutions", id: "solutions" },
            { name: "Clients", id: "testimonials" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Bali AI Solutions"
          bottomRightText="hello@abou.ai"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          tag="AI-Powered Business Automation"
          tagIcon={Sparkles}
          title="Transform Your Bali Business with Intelligent AI Agents"
          description="ABOU delivers custom AI agent solutions that automate critical business processes for Bali's leading hospitality, tourism, retail, and service companies. Increase efficiency, reduce costs, and scale operations without the overhead."
          buttons={[
            { text: "Explore Solutions", href: "#solutions" },
            { text: "Schedule Demo", href: "#contact" }
          ]}
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Performance Metrics Dashboard",            logoIcon: Zap,
            imageSrc: "https://img.b2bpic.net/free-photo/young-woman-analysing-charts-laptop-start-up-business-meeting-room_482257-5026.jpg",            imageAlt: "AI Agent Analytics Dashboard",            searchPlaceholder: "Search metrics...",            buttons: [
              { text: "View Analytics", href: "#" },
              { text: "Export Report", href: "#" }
            ],
            sidebarItems: [
              { icon: BarChart3 },
              { icon: Bot, active: true },
              { icon: Settings }
            ],
            stats: [
              {
                title: "Automation Rate",                values: ["45%", "72%", "89%"],
                description: "Process efficiency gain"
              },
              {
                title: "Response Time",                values: ["4.2s", "2.8s", "1.1s"],
                valueSuffix: "avg",                description: "Customer interaction speed"
              },
              {
                title: "Active AI Agents",                values: ["12", "24", "38"],
                description: "Deployed across clients"
              }
            ],
            chartTitle: "Client Success Rate",            chartData: [
              { value: 85 },
              { value: 92 },
              { value: 88 },
              { value: 95 },
              { value: 89 }
            ],
            listTitle: "Recent Deployments",            listItems: [
              { icon: CheckCircle, title: "Hotel Booking AI", status: "Live" },
              { icon: Zap, title: "Customer Support Bot", status: "Active" },
              { icon: MessageSquare, title: "Lead Qualification Agent", status: "Deployed" }
            ]
          }}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Powerful AI Agent Capabilities"
          description="Our intelligent agents handle complex business tasks with precision and learning. Built for Bali's unique business ecosystem."
          tag="Features"
          tagIcon={Zap}
          features={[
            {
              title: "24/7 Customer Support",              description: "AI agents provide instant responses to customer inquiries across multiple languages and channels.",              bentoComponent: "chat",              aiIcon: Bot,
              userIcon: User,
              exchanges: [
                {
                  userMessage: "What are your room rates?",                  aiResponse: "Our deluxe rooms start at $150/night with complimentary breakfast and airport transfer."
                },
                {
                  userMessage: "Do you have availability next week?",                  aiResponse: "Yes, we have availability from June 15-22. Would you like me to check your preferred dates?"
                }
              ],
              placeholder: "Ask anything..."
            },
            {
              title: "Automation Workflow",              description: "Automate repetitive tasks like booking confirmations, invoicing, and data entry.",              bentoComponent: "3d-task-list",              title: "Workflow Tasks",              items: [
                { icon: FileCheck, label: "Process Orders", time: "2min" },
                { icon: Receipt, label: "Generate Invoices", time: "1min" },
                { icon: Send, label: "Send Confirmations", time: "<1min" }
              ]
            },
            {
              title: "Real-Time Analytics",              description: "Monitor business metrics and customer interactions with detailed, actionable insights.",              bentoComponent: "line-chart"
            },
            {
              title: "Multi-Channel Integration",              description: "Seamlessly connect to WhatsApp, email, website chat, and booking platforms.",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
              items: [
                { icon: MessageCircle, ring: 1 },
                { icon: Mail, ring: 1 },
                { icon: Globe, ring: 2 },
                { icon: Calendar, ring: 2 },
                { icon: CreditCard, ring: 3 }
              ]
            },
            {
              title: "Smart Recommendations",              description: "AI learns customer preferences and suggests upgrades, packages, and services.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Sparkles, label: "Upsell Rate", value: "+34%" },
                { icon: TrendingUp, label: "Avg Order Value", value: "+52%" },
                { icon: Users, label: "Repeat Customers", value: "+28%" }
              ]
            },
            {
              title: "Compliance & Security",              description: "Enterprise-grade security with data privacy and local compliance built-in.",              bentoComponent: "reveal-icon",              icon: Shield
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="solutions" data-section="solutions">
        <FeatureHoverPattern
          title="Solutions Built for Bali Business"
          description="Whether you run a hotel, restaurant, travel agency, or retail shop, we have AI solutions tailored to your industry."
          tag="Industries"
          features={[
            {
              icon: Building2,
              title: "Hospitality & Hotels",              description: "Automate bookings, handle guest inquiries, manage reservations, and upsell experiences with AI concierge agents."
            },
            {
              icon: UtensilsCrossed,
              title: "Restaurants & Cafes",              description: "Take online orders, manage reservations, handle dietary inquiries, and improve table management with AI."
            },
            {
              icon: Plane,
              title: "Travel & Tourism",              description: "Personalized itinerary planning, booking assistance, destination recommendations powered by intelligent agents."
            },
            {
              icon: ShoppingCart,
              title: "Retail & E-Commerce",              description: "Product recommendations, inventory queries, order tracking, and customer support automation for online stores."
            },
            {
              icon: Spa,
              title: "Wellness & Spas",              description: "Appointment scheduling, service recommendations, pricing inquiries, and member engagement through AI."
            },
            {
              icon: Building,
              title: "Real Estate & Villas",              description: "Property inquiries, virtual tours, availability checking, lease management powered by AI agents."
            }
          ]}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Impact"
          tagIcon={Award}
          title="Delivering Real Results for Bali's Top Businesses"
          description="ABOU has partnered with leading hospitality, tourism, and retail companies across Bali to implement AI agents that dramatically improve efficiency and customer satisfaction. Our solutions have processed millions of interactions and generated significant ROI for our clients."
          metrics={[
            { value: "250+", title: "Businesses Transformed" },
            { value: "5.2M", title: "Customer Interactions Handled" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/successful-business-people-city_53876-15204.jpg"
          imageAlt="ABOU Team Success"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Bali's Business Leaders Say"
          description="Hear from the owners and managers who have transformed their operations with ABOU's AI solutions."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              name: "Made Sukarsana",              handle: "Owner, Bali Luxury Hotels",              testimonial: "ABOU's AI agents reduced our customer service team workload by 60% while improving guest satisfaction scores. The ROI was achieved within 3 months.",              imageSrc: "https://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg",              imageAlt: "Made Sukarsana"
            },
            {
              id: "2",              name: "Lisa Chen",              handle: "Manager, Chen's Restaurant Group",              testimonial: "The reservation and ordering automation has been transformative. We handle 3x more orders with the same staff. Highly recommend ABOU.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Lisa Chen"
            },
            {
              id: "3",              name: "Ketut Bima",              handle: "CEO, Bali Travel Adventures",              testimonial: "Our booking conversions increased by 45% after implementing ABOU's AI travel agent. The personalization is incredible.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",              imageAlt: "Ketut Bima"
            },
            {
              id: "4",              name: "Windy Santoso",              handle: "Director, Santoso Retail Group",              testimonial: "Customer support inquiries that used to take hours now get instant AI responses. Our customers love the speed and accuracy.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",              imageAlt: "Windy Santoso"
            },
            {
              id: "5",              name: "Putra Wijaya",              handle: "Founder, Wellness Bali Spa",              testimonial: "The AI agent handles 70% of our appointment scheduling and customer inquiries. Worth every rupiah. Fantastic support team too.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",              imageAlt: "Putra Wijaya"
            },
            {
              id: "6",              name: "Sarah Mitchell",              handle: "GM, Beachfront Villa Properties",              testimonial: "Inquiries, property details, availability checks—all automated. Our guest experience and staff productivity have both improved significantly.",              imageSrc: "https://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84733.jpg",              imageAlt: "Sarah Mitchell"
            }
          ]}
          speed={40}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Transparent, Scalable Pricing"
          description="Choose the plan that fits your business. Upgrade anytime as you grow."
          tag="Pricing"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "starter",              price: "$2,500/mo",              name: "Starter",              buttons: [
                { text: "Get Started" },
                { text: "Chat to Sales" }
              ],
              features: [
                "1 AI Agent",                "Single Channel Integration",                "Up to 5,000 interactions/month",                "Basic Analytics",                "Email Support",                "Monthly Updates"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$5,500/mo",              name: "Professional",              buttons: [
                { text: "Get Started" },
                { text: "Chat to Sales" }
              ],
              features: [
                "3 AI Agents",                "Multi-Channel Integration",                "Up to 50,000 interactions/month",                "Advanced Analytics",                "Priority Support",                "Weekly Optimization",                "Custom Training"
              ]
            },
            {
              id: "enterprise",              price: "Custom",              name: "Enterprise",              buttons: [
                { text: "Contact Sales" },
                { text: "Schedule Demo" }
              ],
              features: [
                "Unlimited AI Agents",                "Full Integration Suite",                "Unlimited Interactions",                "Custom Analytics & Reporting",                "Dedicated Account Manager",                "Real-Time Support",                "Custom Development",                "SLA Guarantee"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about ABOU's AI agent solutions."
          tag="Help"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          faqs={[
            {
              id: "1",              title: "How long does implementation take?",              content: "Most deployments are completed within 2-4 weeks. We handle all technical setup, integration, training, and launch. For simple single-agent setups, we can often go live in 1-2 weeks."
            },
            {
              id: "2",              title: "What languages do your AI agents support?",              content: "Our agents support Indonesian, English, Balinese, and Mandarin Chinese—perfect for Bali's diverse business and tourist base. Multi-language support is standard on all plans."
            },
            {
              id: "3",              title: "Can the AI integrate with our existing systems?",              content: "Yes. We integrate with most common platforms: PMS systems, booking platforms, CRM tools, payment gateways, and messaging apps. Custom integrations are available on Enterprise plans."
            },
            {
              id: "4",              title: "Is our customer data secure and private?",              content: "Absolutely. We maintain enterprise-grade security with data encryption, regular audits, and full compliance with Indonesian data protection regulations. Data is stored locally where required."
            },
            {
              id: "5",              title: "How does ABOU handle customer refunds?",              content: "Our AI agents seamlessly process refund requests based on your policies. They can validate eligibility, initiate transactions, and update customer records automatically while maintaining your compliance requirements."
            },
            {
              id: "6",              title: "What happens if the AI gives incorrect information?",              content: "Our agents are trained on your specific business data and workflows. If discrepancies occur, our team quickly retrains the model. We also include human escalation for complex queries to ensure accuracy."
            },
            {
              id: "7",              title: "Do you offer training for our team?",              content: "Yes, we provide comprehensive onboarding training for your staff on managing, monitoring, and optimizing the AI agents. Ongoing training and optimization are included with all plans."
            },
            {
              id: "8",              title: "Can we customize the AI agent's personality and responses?",              content: "Completely. We customize your agents' tone, style, and knowledge base to match your brand. From formal to friendly, professional to quirky—your agents reflect your business identity."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Let's Transform Your Business"
          tagIcon={Zap}
          title="Ready to Deploy AI Agents?"
          description="Connect with our team to discuss your business needs, see a live demo, and start your transformation journey. We're excited to help Bali's leading businesses succeed with AI."
          buttons={[
            { text: "Schedule Demo" },
            { text: "Contact Us" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="ABOU"
          copyrightText="© 2025 ABOU AI. All rights reserved. | Bali, Indonesia"
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Solutions", href: "#solutions" },
                { label: "Pricing", href: "#pricing" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Clients", href: "#testimonials" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Support", href: "#contact" },
                { label: "Status", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Security", href: "#" },
                { label: "Compliance", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}