"use client";

import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSignup from '@/components/sections/hero/HeroSignup';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { FileText, HelpCircle, Bot, Code, Database } from "lucide-react";

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

    const docsFeatures = [
        {
            title: "Agent Creation Guide",            description: "Step-by-step instructions on how to build and configure your first AI agent.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature1.webp",            imageAlt: "Agent Creation Guide"
        },
        {
            title: "API Reference",            description: "Detailed documentation for integrating AgentFlow with your existing systems.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature2.webp",            imageAlt: "API Reference"
        },
        {
            title: "Integrations Setup",            description: "Guides for connecting AgentFlow with popular third-party tools and services.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature3.webp",            imageAlt: "Integrations Setup"
        },
        {
            title: "Troubleshooting & FAQs",            description: "Common issues and solutions to help you resolve problems quickly.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature4.webp",            imageAlt: "Troubleshooting & FAQs"
        }
    ];

    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"
            />
            <HeroSignup
                background={{ variant: "canvas-reveal" }}
                tag="Resources"
                tagIcon={FileText}
                title="Documentation Center"
                description="Find comprehensive guides, API references, and tutorials to help you master AgentFlow."
                buttons={[
                    { text: "Browse Docs", href: "#" }
                ]}
            />
            <FeatureCardSix
                tag="Getting Started"
                tagIcon={HelpCircle}
                title="Popular Topics"
                description="Explore our most frequently accessed documentation and tutorials."
                textboxLayout="default"
                useInvertedBackground={false}
                features={docsFeatures.map(f => ({
                    title: f.title,
                    description: f.description,
                    imageSrc: f.imageSrc,
                    imageAlt: f.imageAlt,
                    buttons: [{ text: "Read More", href: "#" }]
                }))}
            />
        </ThemeProvider>
    );
}
