"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import TextBox from "@/components/Textbox";
import ButtonBounceEffect from "@/components/button/ButtonBounceEffect/ButtonBounceEffect";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Sparkles } from "lucide-react";

export default function AIStyleRecommendationPage() {
    const navItems = [
        { name: "Features", id: "features" },
        { name: "Pricing", id: "pricing" },
        { name: "Docs", id: "docs" },
        { name: "AI Style Recommendation", id: "/ai-style-recommendation" },
        { name: "Contact", id: "contact" }
    ];

    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="ai-style-recommendation">
                <TextBox
                    title="Unlock Your Perfect Style with AI"
                    description="Our advanced AI analyzes your photo, detects face shape, and suggests personalized hairstyles and style recommendations. See your transformation with a before & after preview!"
                    tag="AI Style Recommender"
                    tagIcon={Sparkles}
                    textboxLayout="default"
                    center={true}
                    buttons={[
                        { text: "Upload Your Photo", onClick: () => console.log("Upload photo clicked") }
                    ]}
                />
                <div className="container mx-auto px-4 py-16 text-center">
                    <h2 className="text-3xl font-bold mb-8">How it Works</h2>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <TextBox
                            title="1. Upload Your Photo"
                            description="Securely upload a clear photo of yourself. Our AI needs a good view of your face for accurate analysis."
                            textboxLayout="default"
                            center={true}
                            buttonContainerClassName="hidden"
                        />
                        <TextBox
                            title="2. AI Analysis"
                            description="Our intelligent algorithms detect your face shape and analyze your features to understand your unique style potential."
                            textboxLayout="default"
                            center={true}
                            buttonContainerClassName="hidden"
                        />
                        <TextBox
                            title="3. Personalized Recommendations"
                            description="Receive AI-generated hairstyle suggestions, clothing style tips, and a 'before & after' preview to visualize your new look."
                            textboxLayout="default"
                            center={true}
                            buttonContainerClassName="hidden"
                        />
                    </div>
                </div>
            </div>
            <FooterBaseCard
                logoText="AgentFlow"
                columns={footerColumns}
                copyrightText="© 2025 AgentFlow. All rights reserved."
            />
        </ThemeProvider>
    );
}