"use client";

import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Settings, Users, Calendar, User, Boxes, CreditCard, Gift, BarChart3, Activity, FileText, Bot } from "lucide-react";

export default function SalonAdminPanelPage() {
    const navItems = [
        { name: "Admin Panel", id: "/salon-admin" },
        { name: "Features", id: "features" },
        { name: "Pricing", id: "pricing" },
        { name: "Docs", id: "docs" },
        { name: "Contact", id: "contact" }
    ];

    const featureCards = [
        {
            title: "Staff Management",            description: "Efficiently manage your team members, roles, and schedules.",            icon: Users,
        },
        {
            title: "Appointment Management",            description: "Streamline booking, rescheduling, and cancellation of appointments.",            icon: Calendar,
        },
        {
            title: "Customer Management",            description: "Maintain detailed customer profiles, history, and preferences.",            icon: User,
        },
        {
            title: "Inventory Management",            description: "Track and manage product stock, supplies, and orders.",            icon: Boxes,
        },
        {
            title: "Payroll Management",            description: "Automate payroll processing, commission, and staff payments.",            icon: CreditCard,
        },
        {
            title: "Coupons & Promotions",            description: "Create and manage discounts, loyalty programs, and marketing campaigns.",            icon: Gift,
        },
    ].map(feature => ({
        ...feature,
        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/ai-agents/image1.webp",        imageAlt: feature.title
    })); // Add placeholder image to satisfy propsSchema

    const metrics = [
        { id: "1", value: "$12,345", title: "Revenue This Month", description: "Total earnings from services and products.", icon: BarChart3 },
        { id: "2", value: "+15%", title: "Growth Rate", description: "Month-over-month revenue increase.", icon: Activity },
        { id: "3", value: "180", title: "Appointments Booked", description: "Number of client appointments this week.", icon: Calendar },
        { id: "4", value: "32", title: "New Customers", description: "New clients acquired in the last 30 days.", icon: Users },
        { id: "5", value: "$2,500", title: "Inventory Value", description: "Current value of salon product stock.", icon: Boxes },
        { id: "6", value: "85%", title: "Staff Utilization", description: "Average booking rate for salon staff.", icon: Settings }
    ];

    const footerColumns = [
        {
            title: "Product",            items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Integrations", href: "#" },
                { label: "Changelog", href: "#" },
            ],
        },
        {
            title: "Resources",            items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Tutorials", href: "#" },
                { label: "Blog", href: "#" },
            ],
        },
        {
            title: "Company",            items: [
                { label: "About", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" },
                { label: "Press", 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="AgentFlow"
                bottomLeftText="Build Smarter"
                bottomRightText="hello@agentflow.ai"
            />
            <div id="hero">
                <HeroSplit
                    background={{ variant: "radial-gradient" }}
                    tag="Salon Administration"
                    tagIcon={Settings}
                    title="Empower Your Salon Operations with Smart Management"
                    description="A comprehensive admin panel to manage staff, appointments, customers, and finances with ease. Take control of your salon's success."
                    buttons={[
                        { text: "Get Started", href: "#" },
                        { text: "Learn More", href: "#features" },
                    ]}
                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/ai-agents/image1.webp"
                    imageAlt="Salon Admin Panel Dashboard"
                    mediaAnimation="slide-up"
                    imagePosition="right"
                />
            </div>
            <div id="features">
                <FeatureCardOne
                    features={featureCards}
                    animationType="slide-up"
                    gridVariant="three-columns-all-equal-width"
                    tag="Key Features"
                    tagIcon={Bot}
                    title="All-in-One Salon Management Solution"
                    description="From staff coordination to client relationships, our platform handles every aspect of your salon operations."
                    textboxLayout="default"
                    useInvertedBackground={false}
                />
            </div>
            <div id="analytics">
                <MetricCardOne
                    metrics={metrics}
                    animationType="slide-up"
                    gridVariant="uniform-all-items-equal"
                    tag="Performance Insights"
                    tagIcon={BarChart3}
                    title="Unlock Your Salon's Growth Potential"
                    description="Gain real-time insights into your revenue, appointments, and customer base with advanced analytics."
                    textboxLayout="default"
                    useInvertedBackground={false}
                />
            </div>
            <FooterBaseCard
                logoText="AgentFlow"
                columns={footerColumns}
                copyrightText="© 2025 AgentFlow. All rights reserved."
            />
        </ThemeProvider>
    );
}
