"use client";

import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureBento, { type FeatureCard } 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 { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Bot, User, Code, Database, Workflow, Settings, Search, FileText, Send, CheckCircle, Sparkles, Zap, MessageSquare, CreditCard, Star, HelpCircle, Mail, Activity, Shield, Clock, BarChart3, Layers, GitBranch, Lock, Eye } from "lucide-react";

export default function AIAgentsTemplatePage() {
    const navItems = [
        { name: "Capabilities", id: "features" },
        { name: "Plans", id: "pricing" },
        { name: "Knowledge", id: "faq" },
        { name: "Contact", id: "contact" },
    ];

    const features: FeatureCard[] = [
        {
            bentoComponent: "3d-task-list",            title: "Orchestration",            items: [
                { icon: Search, label: "Resource discovery", time: "1m ago" },
                { icon: FileText, label: "Pattern recognition", time: "4m ago" },
                { icon: CheckCircle, label: "Strategy synthesis", time: "7m ago" },
                { icon: Send, label: "Action execution", time: "9m ago" },
            ],
            description: "Cognitive engines that decompose massive enterprise goals into atomic, executable tasks."},
        {
            bentoComponent: "chat",            aiIcon: Bot,
            userIcon: User,
            exchanges: [
                { userMessage: "Draft Q2 roadmap", aiResponse: "I've synthesized the input from 4 departments into a high-level strategic roadmap." },
                { userMessage: "Optimize resource spend", aiResponse: "Cross-referencing budget logs; suggesting reallocation of $45k to high-growth sectors." },
            ],
            placeholder: "Instruct your cognitive engine...",            title: "Natural Command",            description: "Sophisticated conversational interface that translates business intent into technical action."},
        {
            bentoComponent: "3d-card-grid",            items: [
                { name: "APIs", icon: Code },
                { name: "SQL", icon: Database },
                { name: "Graphs", icon: Workflow },
                { name: "Policy", icon: Settings },
            ],
            centerIcon: Sparkles,
            title: "System Mesh",            description: "Seamlessly interoperate with your legacy infrastructure through secure, high-bandwidth bridges."},
    ];

    const testimonials = [
        {
            id: "1",            name: "Elena Vance",            handle: "CIO at Nexus Global",            testimonial: "The orchestration capabilities have completely offloaded our core infrastructure management. It’s like having an army of specialists.",            imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg",            imageAlt: "Elena Vance"
        },
        {
            id: "2",            name: "Julian Thorne",            handle: "Head of Tech, Vector",            testimonial: "We replaced three manual integration layers with a single cognitive node. The ROI was visible within the first month.",            imageSrc: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136872.jpg",            imageAlt: "Julian Thorne"
        },
        {
            id: "3",            name: "Amara Okafor",            handle: "CTO, Zenith Systems",            testimonial: "Finally, a platform that doesn't just promise intelligence but delivers actionable results in our production stack.",            imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-with-glasses_23-2148415937.jpg",            imageAlt: "Amara Okafor"
        },
        {
            id: "4",            name: "Victor Rossi",            handle: "VP Ops, FinLogic",            testimonial: "Agent-driven compliance monitoring has reduced our audit prep time from weeks to hours.",            imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",            imageAlt: "Victor Rossi"
        },
        {
            id: "5",            name: "Li Wei",            handle: "Lead Architect, CloudScale",            testimonial: "The security posture is incredible. Knowing our agents work inside a hardened environment is critical for us.",            imageSrc: "http://img.b2bpic.net/free-photo/executive-manager-reviewing-statistics-online-reports-development_482257-116608.jpg",            imageAlt: "Li Wei"
        },
        {
            id: "6",            name: "Sarah Jenkins",            handle: "Chief Product, Iterative",            testimonial: "The natural language processing accuracy has changed how our non-technical staff interacts with deep data.",            imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-painting-watercolors_23-2150170390.jpg",            imageAlt: "Sarah Jenkins"
        }
    ];

    const pricingPlans = [
        {
            id: "foundations",            price: "$49/mo",            name: "Foundations",            buttons: [{ text: "Deploy Engine", href: "#" }],
            features: ["5 active nodes", "20k cycle allowance", "Standard API access", "Developer community support"],
        },
        {
            id: "advanced",            price: "$149/mo",            name: "Advanced",            buttons: [{ text: "Deploy Engine", href: "#" }],
            features: ["25 active nodes", "150k cycle allowance", "Full SDK access", "Priority email support"],
        },
        {
            id: "corporate",            badge: "Recommended",            badgeIcon: Star,
            price: "$499/mo",            name: "Corporate",            buttons: [{ text: "Deploy Engine", href: "#" }],
            features: ["100 active nodes", "1M cycle allowance", "Custom infrastructure", "Dedicated success partner"],
        }
    ];

    const faqs = [
        {
            id: "1",            title: "How do these cognitive engines differ from simple scripts?",            content: "Unlike static scripts, our engines are autonomous and capable of reasoning, planning, and adjusting their strategy based on real-time feedback."
        },
        {
            id: "2",            title: "Is there a steep learning curve for integration?",            content: "With our pre-built connection library, most infrastructure integrations are completed within an hour via our intuitive visual dashboard."
        },
        {
            id: "3",            title: "Can agents access our private cloud environments?",            content: "Absolutely. We support secure VPC peering, ensuring your agents operate within your existing security perimeters without exposing data."
        },
        {
            id: "4",            title: "What happens if an agent goes off-script?",            content: "Our guardrail layer provides constant monitoring. Any activity exceeding defined confidence thresholds triggers an immediate human-in-the-loop review."
        }
    ];

    const footerColumns = [
        {
            title: "Platform",            items: [{ label: "Logic Nodes", href: "#" }, { label: "Security", href: "#" }, { label: "Integrations", href: "#" }],
        },
        {
            title: "Infrastructure",            items: [{ label: "Documentation", href: "#" }, { label: "Status", href: "#" }, { label: "API Keys", href: "#" }],
        },
        {
            title: "Company",            items: [{ label: "About Us", href: "#" }, { label: "Privacy Policy", href: "#" }, { label: "Contact", href: "#" }],
        }
    ];

    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"
        >
            <NavbarStyleFullscreen
                navItems={navItems}
                brandName="NexusCore"
                bottomLeftText="Autonomous Future"
                bottomRightText="contact@nexuscore.ai"
            />
            <HeroBillboardDashboard
                background={{ variant: "canvas-reveal" }}
                tag="Enterprise Cognition Layer"
                tagIcon={Bot}
                title="Orchestrate Your Enterprise With Intelligent Agents"
                description="Deploy self-healing, autonomous agents capable of navigating complex workflows and driving systemic efficiency across your global stack."
                buttons={[{ text: "Get Access", href: "#" }, { text: "View Docs", href: "#" }]}
                dashboard={{
                    title: "Global Control Hub",                    logoIcon: Bot,
                    imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-167093.jpg",                    imageAlt: "Control Dashboard",                    buttons: [{ text: "Provision", href: "#" }, { text: "Diagnostics", href: "#" }],
                    sidebarItems: [{ icon: Activity, active: true }, { icon: Brain }, { icon: Database }, { icon: Workflow }, { icon: Settings }],
                    stats: [
                        { title: "Active Nodes", values: [88, 92, 95], description: "Autonomous agents performing live operations." },
                        { title: "Cognitive Cycles", values: [450, 480, 510], description: "Success-weighted reasoning cycles per minute." },
                        { title: "System Latency", values: [12, 11, 10], valueSuffix: "ms", description: "Average propagation delay in neural bridges." },
                    ],
                    chartTitle: "Compute Efficiency",                    chartData: [{ value: 90 }, { value: 95 }, { value: 85 }, { value: 98 }, { value: 92 }],
                    listTitle: "Real-time Operations",                    listItems: [
                        { icon: CheckCircle, title: "Database migration complete", status: "Finished" },
                        { icon: Shield, title: "Threat detection scan", status: "Running" },
                        { icon: Zap, title: "Load balancing optimized", status: "Optimizing" },
                    ],
                }}
            />
            <div id="features">
                <FeatureBento
                    features={features}
                    animationType="slide-up"
                    tag="Capabilities"
                    tagIcon={Sparkles}
                    title="Modular Architecture for High-Complexity Tasks"
                    description="Deploy agents that integrate deeply into your stack, learn from your data, and act with precision."
                    textboxLayout="default"
                    useInvertedBackground={false}
                />
            </div>
            <FeatureHoverPattern
                animationType="slide-up"
                tag="Deployment Standard"
                tagIcon={Layers}
                title="Production-Grade Agent Infrastructure"
                description="Engineered for the demands of high-scale enterprise environments where accuracy is non-negotiable."
                textboxLayout="default"
                useInvertedBackground={false}
                features={[
                    { icon: GitBranch, title: "State Versioning", description: "Immutable audit trails for every decision point in your agent lifecycle." },
                    { icon: Shield, title: "Zero Trust Security", description: "Policy-based access enforcement built directly into the agent reasoning loop." },
                    { icon: Eye, title: "Observability Suite", description: "Real-time visualization of agent pathways and tool-call rationales." },
                    { icon: Lock, title: "Human-in-the-Loop", description: "Hard-gated approval triggers for all critical system modifications." },
                ]}
            />
            <MetricSplitMediaAbout
                tag="Why Nexus"
                tagIcon={Zap}
                title="Infrastructure Designed for Global Scale"
                description="Our platform provides the stable foundation your autonomous agents need to thrive. From ultra-low-latency neural bridges to strict compliance engines, NexusCore ensures your automation strategy is future-proof and enterprise-ready."
                metrics={[{ value: "99.99%", title: "Availability" }, { value: "<20ms", title: "Bridge Latency" }]}
                imageSrc="http://img.b2bpic.net/free-photo/fantasy-style-half-fox-half-robot_23-2151601040.jpg"
                imageAlt="Enterprise Infrastructure"
                mediaAnimation="slide-up"
                metricsAnimation="slide-up"
                useInvertedBackground={false}
            />
            <TestimonialCardSix
                testimonials={testimonials}
                animationType="slide-up"
                tag="Testimonials"
                tagIcon={MessageSquare}
                title="Engineering Excellence Proven Globally"
                description="The industry standard for large-scale agent orchestration and autonomous workflow automation."
                textboxLayout="default"
                useInvertedBackground={false}
            />
            <div id="pricing">
                <PricingCardThree
                    plans={pricingPlans}
                    animationType="slide-up"
                    tag="Pricing"
                    tagIcon={CreditCard}
                    title="Predictable Scalability"
                    description="Flexible plans designed to grow with your infrastructure demands without hidden overheads."
                    textboxLayout="default"
                    useInvertedBackground={false}
                />
            </div>
            <div id="faq">
                <FaqDouble
                    faqs={faqs}
                    tag="FAQ"
                    tagIcon={HelpCircle}
                    title="Technical Knowledge"
                    description="Quick answers to our most frequent architectural questions."
                    textboxLayout="default"
                    faqsAnimation="slide-up"
                    useInvertedBackground={false}
                />
            </div>
            <div id="contact">
                <ContactCTA
                    tag="Get Started"
                    tagIcon={Mail}
                    title="Deploy Your First Cognitive Engine Today"
                    description="Our integration team is standing by to help map your current stack to NexusCore. Let's modernize your operations."
                    buttons={[{ text: "Request Demo", href: "#" }, { text: "Contact Sales", href: "#" }]}
                    background={{ variant: "canvas-reveal" }}
                    useInvertedBackground={false}
                />
            </div>
            <FooterBaseCard
                logoText="NexusCore"
                columns={footerColumns}
                copyrightText="© 2025 NexusCore Systems. All rights reserved."
            />
        </ThemeProvider>
    );
}