"use client";

import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { CreditCard, Apple, Google, Paypal, Banknote, MousePointerClick, Wallet, Receipt, History, Repeat, PiggyBank, Bookmark } from "lucide-react";

export default function PaymentSystemPage() {
    const navItems = [
        { name: "Features", id: "features" },
        { name: "Pricing", id: "pricing" },
        { name: "Payments", href: "/payment" },
        { name: "Docs", id: "docs" },
        { 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: "#" },
            ],
        },
    ];

    const paymentFeatures = [
        {
            id: "stripe",            title: "Stripe Integration",            descriptions: ["Seamlessly process payments using the industry-leading Stripe platform, ensuring reliability and security."],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/payment/stripe-logo.png?_wi=1"
        },
        {
            id: "apple-pay",            title: "Apple Pay Support",            descriptions: ["Offer customers a fast and secure checkout experience with Apple Pay, reducing friction and increasing conversions."],
            icon: Apple
        },
        {
            id: "google-pay",            title: "Google Pay Support",            descriptions: ["Integrate Google Pay for Android users, providing another convenient and widely adopted payment method."],
            icon: Google
        },
        {
            id: "paypal",            title: "PayPal Payments",            descriptions: ["Accept payments via PayPal, a trusted choice for millions of users worldwide."],
            icon: Paypal
        },
        {
            id: "bank-cards",            title: "Bank Card Processing",            descriptions: ["Support all major credit and debit cards, including Visa, Mastercard, American Express, and Discover."],
            icon: CreditCard
        },
        {
            id: "one-click",            title: "One-Click Payments",            descriptions: ["Enable lightning-fast checkouts for returning customers with secure one-click payment options."],
            icon: MousePointerClick
        },
        {
            id: "saved-cards",            title: "Saved Card Management",            descriptions: ["Allow users to securely save multiple payment methods for future purchases, enhancing convenience."],
            icon: Bookmark
        },
        {
            id: "deposits",            title: "Customer Deposits",            descriptions: ["Manage customer deposits for bookings, pre-orders, or services, with clear tracking and reconciliation."],
            icon: Wallet
        },
        {
            id: "tips",            title: "Tipping Functionality",            descriptions: ["Integrate an optional tipping system, allowing customers to show appreciation for exceptional service."],
            icon: PiggyBank
        },
        {
            id: "invoices",            title: "Automated Invoicing",            descriptions: ["Generate professional invoices automatically for every transaction, streamlining your billing process."],
            icon: Receipt
        },
        {
            id: "refunds",            title: "Easy Refunds",            descriptions: ["Process full or partial refunds directly from your dashboard with just a few clicks."],
            icon: Repeat
        },
        {
            id: "history",            title: "Payment History",            descriptions: ["Access a comprehensive transaction history, including status, details, and customer information."],
            icon: History
        }
    ];

    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"
            />

            <FeatureCardTwentySeven
                animationType="slide-up"
                tag="Payments"
                tagIcon={CreditCard}
                title="Comprehensive Payment System"
                description="Manage all your transactions with a robust payment solution supporting multiple methods, secure storage, and advanced features."
                textboxLayout="default"
                useInvertedBackground={false}
                features={paymentFeatures}
            />

            <FooterBaseCard
                logoText="AgentFlow"
                columns={footerColumns}
                copyrightText="© 2025 AgentFlow. All rights reserved."
            />
        </ThemeProvider>
    );
}