"use client";

import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Calendar, User, Clock, BarChart3, Activity, MessageSquare, Layers, Lock, Sparkles, Zap, Star, Mail } from 'lucide-react';

export default function BarberDashboardPage() {
    const navItems = [
        { name: "Dashboard", id: "/barber-dashboard" },
        { name: "Features", id: "#features" },
        { name: "Analytics", id: "#analytics" },
        { name: "Reviews", id: "#reviews" },
        { name: "Contact", id: "#contact" }
    ];

    const features = [
        {
            title: "Appointment Management",            description: "Seamlessly book, reschedule, and manage client appointments with an intuitive calendar view.",            icon: Calendar,
        },
        {
            title: "Client Management",            description: "Maintain detailed client profiles, service history, and preferences for a personalized experience.",            icon: User,
        },
        {
            title: "Schedule Management",            description: "Efficiently organize your daily, weekly, and monthly schedule, block out time, and manage staff availability.",            icon: Clock,
        },
        {
            title: "Revenue Tracking",            description: "Monitor sales, track payments, and generate financial reports to keep an eye on your barbershop's earnings.",            icon: BarChart3,
        },
        {
            title: "Performance Analytics",            description: "Gain insights into booking trends, client retention, and service popularity with comprehensive analytics.",            icon: Activity,
        },
        {
            title: "Reviews Management",            description: "Collect, display, and respond to client reviews to build trust and improve your online reputation.",            icon: MessageSquare,
        },
        {
            title: "Portfolio Management",            description: "Showcase your best work with an integrated digital portfolio to attract new clients.",            icon: Layers,
        },
        {
            title: "Availability Control",            description: "Set specific working hours, break times, and days off to manage your availability with ease.",            icon: Lock,
        },
    ];

    const metrics = [
        { id: "1", value: "$25K", title: "Total Revenue", description: "Generated in the last 30 days." },
        { id: "2", value: "500+", title: "Appointments Booked", description: "This month across all barbers." },
        { id: "3", value: "90%", title: "Client Retention", description: "Rate for repeat customers." },
    ];

    const testimonials = [
        {
            id: "1",            name: "John D. Barber",            role: "Owner, The Gents Place",            quote: "This dashboard changed everything! Appointments are a breeze, and I finally have a clear view of my revenue.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif",            imageAlt: "John D. Barber",            title: "Revolutionary Business Tool"
        },
        {
            id: "2",            name: "Maria C. Styles",            role: "Master Barber",            quote: "Client management is so much easier. I can see their history and preferences instantly, making every cut perfect.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif",            imageAlt: "Maria C. Styles",            title: "A Must-Have for Barbers"
        },
        {
            id: "3",            name: "David L. Cutts",            role: "Freelance Barber",            quote: "The availability control and schedule management features are a lifesaver. I can finally balance work and life.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif",            imageAlt: "David L. Cutts",            title: "Improved Work-Life Balance"
        }
    ];

    const footerColumns = [
        {
            title: "Product",            items: [
                { label: "Dashboard", href: "/barber-dashboard" },
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#" },
            ],
        },
        {
            title: "Resources",            items: [
                { label: "Support", href: "#" },
                { label: "Blog", href: "#" },
                { label: "FAQ", href: "#" },
            ],
        },
        {
            title: "Company",            items: [
                { label: "About Us", href: "#" },
                { label: "Contact", href: "#contact" },
                { label: "Careers", 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="BarberFlow"
                bottomLeftText="Transform Your Barbershop"
                bottomRightText="support@barberflow.com"
            />
            <HeroLogo
                logoText="Barber Dashboard"
                description="Streamline your barbershop operations with all-in-one appointment, client, and schedule management. Focus on your craft, we'll handle the rest."
                buttons={[
                    { text: "Get Started", href: "#contact" },
                    { text: "Learn More", href: "#features" },
                ]}
                imageSrc="https://images.unsplash.com/photo-1616394584738-6be71e193913?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                imageAlt="Barber dashboard screenshot"
                showDimOverlay={false}
            />
            <div id="features" data-section="features">
                <FeatureCardSix
                    features={features}
                    title="All-in-One Barber Management"
                    description="Take control of your business with our powerful and intuitive dashboard, designed specifically for barbers."
                    tag="Capabilities"
                    tagIcon={Sparkles}
                    textboxLayout="default"
                    useInvertedBackground={false}
                />
            </div>
            <div id="analytics" data-section="analytics">
                <MetricCardEleven
                    metrics={metrics}
                    title="Key Business Insights"
                    description="Track your performance and make informed decisions with real-time analytics tailored for barbershops."
                    tag="Performance"
                    tagIcon={Zap}
                    animationType="slide-up"
                    textboxLayout="default"
                    useInvertedBackground={false}
                    imageSrc="https://images.unsplash.com/photo-1542744095-291d6f6e4455?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                    imageAlt="Dashboard with charts"
                />
            </div>
            <div id="reviews" data-section="reviews">
                <TestimonialCardTen
                    testimonials={testimonials}
                    title="What Barbers Are Saying"
                    description="Hear from barbers who transformed their business and client experience with BarberFlow."
                    tag="Feedback"
                    tagIcon={Star}
                    textboxLayout="default"
                    animationType="slide-up"
                    useInvertedBackground={false}
                />
            </div>
            <div id="contact" data-section="contact">
                <ContactCTA
                    tag="Get Started"
                    tagIcon={Mail}
                    title="Ready to Supercharge Your Barbershop?"
                    description="Join hundreds of barbers streamlining their operations. Get started with BarberFlow today!"
                    buttons={[
                        { text: "Start Free Trial", href: "#" },
                        { text: "Book a Demo", href: "#" },
                    ]}
                    background={{ variant: "canvas-reveal" }}
                    useInvertedBackground={false}
                />
            </div>
            <FooterSimple
                columns={footerColumns}
                bottomLeftText="© 2025 BarberFlow. All rights reserved."
                bottomRightText="Made with care for barbers."
            />
        </ThemeProvider>
    );
}
