"use client";

import ReactLenis from "lenis/react";
import HeroCentered from "@/components/sections/hero/HeroCentered";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FeatureBento, { type FeatureCard } from "@/components/sections/feature/FeatureBento";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code } from "lucide-react";

export default function SaasTemplatePage() {
    const navItems = [
        { name: "Features", id: "features" },
        { name: "Pricing", id: "pricing" },
        { name: "About", id: "about" },
        { name: "Contact", id: "contact" },
    ];

    const avatars = [
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial1.webp", alt: "User 1" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif", alt: "User 1" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif", alt: "User 1" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image8.avif", alt: "User 1" },
    ];

    const features: FeatureCard[] = [
        {
            bentoComponent: "globe",
            title: "Global Reach",
            description: "Connect with users worldwide through our distributed infrastructure",
        },
        {
            bentoComponent: "marquee",
            variant: "text",
            centerIcon: Zap,
            texts: ["Fast", "Reliable", "Secure", "Scalable", "Modern"],
            title: "Built for Speed",
            description: "Lightning fast performance with optimized delivery",
        },
        {
            bentoComponent: "3d-stack-cards",
            items: [
                { icon: Shield, title: "Security", subtitle: "Enterprise-grade", detail: "Bank-level encryption" },
                { icon: Rocket, title: "Performance", subtitle: "99.9% uptime", detail: "Always available" },
                { icon: Target, title: "Accuracy", subtitle: "100% reliable", detail: "Data you can trust" },
            ],
            title: "Built for Scale",
            description: "Deploy to any region with automatic failover support",
        }
    ];

    return (
        <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
            <ReactLenis root>
                <NavbarLayoutFloatingInline
                    navItems={navItems}
                    brandName="SaasApp"
                    button={{ text: "Get Started", href: "#" }}
                />
                <HeroCentered
                    background={{ variant: "rotated-rays-animated-grid" }}
                    avatars={avatars}
                    avatarText="Trusted by 1000+ users"
                    title="Build Modern Web Experiences-Out of the world california apple"
                    description="Create stunning, responsive websites with our comprehensive component library designed"
                    buttons={[
                        {
                            text: "Get Started",
                            onClick: () => console.log("Get Started clicked"),
                        },
                        {
                            text: "Learn More",
                            onClick: () => console.log("Learn More clicked"),
                        },
                    ]}
                    marqueeItems={[
                        { type: "text-icon", text: "Lightning Fast", icon: Zap },
                        { type: "text-icon", text: "Enterprise Security", icon: Shield },
                        { type: "text-icon", text: "99.9% Uptime", icon: Rocket },
                        { type: "text-icon", text: "Precision Targeting", icon: Target },
                        { type: "text-icon", text: "AI Powered", icon: Sparkles },
                    ]}
                />
                <FeatureBento
                    features={features}
                    animationType="none"
                    tag="Features"
                    title="Powerful Features"
                    description="Everything you need to build and scale your product"
                    textboxLayout="default"
                    useInvertedBackground={false}
                />
                <FeatureBorderGlow
                    tag="Why Choose Us"
                    tagIcon={Users}
                    title="Built by developers, for developers"
                    description="We understand the challenges of modern software development because we face them every day."
                    animationType="slide-up"
                    textboxLayout="default"
                    useInvertedBackground={false}
                    features={[
                        {
                            icon: Layers,
                            title: "Modular Architecture",
                            description: "Build with composable components that scale with your needs",
                        },
                        {
                            icon: Code,
                            title: "Developer Experience",
                            description: "Clean APIs and comprehensive documentation for faster development",
                        },
                        {
                            icon: Shield,
                            title: "Enterprise Security",
                            description: "Bank-level encryption and compliance with industry standards",
                        },
                        {
                            icon: Rocket,
                            title: "Lightning Fast",
                            description: "Optimized for performance with sub-second response times",
                        },
                    ]}
                />
                <TestimonialCardFifteen
                    testimonial="This platform has completely transformed how we build products. The developer experience is unmatched."
                    rating={5}
                    author="Sarah Chen, CTO at TechFlow"
                    avatars={avatars}
                    ratingAnimation="slide-up"
                    avatarsAnimation="slide-up"
                    useInvertedBackground={false}
                />
                <PricingCardEight
                    tag="Pricing"
                    tagIcon={Sparkles}
                    title="Simple, transparent pricing"
                    description="Choose the plan that works best for you. All plans include a 14-day free trial."
                    animationType="opacity"
                    textboxLayout="default"
                    useInvertedBackground={false}
                    plans={[
                        {
                            id: "starter",
                            badge: "Starter",
                            badgeIcon: Zap,
                            price: "$19/mo",
                            subtitle: "Perfect for individuals",
                            buttons: [
                                { text: "Get Started", onClick: () => console.log("Starter clicked") },
                            ],
                            features: [
                                "Up to 5 projects",
                                "Basic analytics",
                                "24/7 email support",
                                "API access",
                            ],
                        },
                        {
                            id: "pro",
                            badge: "Pro",
                            badgeIcon: Rocket,
                            price: "$49/mo",
                            subtitle: "For growing teams",
                            buttons: [
                                { text: "Get Started", onClick: () => console.log("Pro clicked") },
                            ],
                            features: [
                                "Unlimited projects",
                                "Advanced analytics",
                                "Priority support",
                                "Custom integrations",
                                "Team collaboration",
                            ],
                        },
                        {
                            id: "enterprise",
                            badge: "Enterprise",
                            badgeIcon: Crown,
                            price: "$99/mo",
                            subtitle: "For large organizations",
                            buttons: [
                                { text: "Contact Sales", onClick: () => console.log("Enterprise clicked") },
                            ],
                            features: [
                                "Everything in Pro",
                                "Dedicated account manager",
                                "Custom SLA",
                                "On-premise deployment",
                                "Advanced security",
                            ],
                        },
                    ]}
                />
                <ContactCenter
                    tag="Contact"
                    tagIcon={Mail}
                    title="Ready to get started?"
                    description="Join thousands of developers building better products with our platform."
                    background={{ variant: "animated-grid" }}
                    useInvertedBackground={false}
                    inputPlaceholder="Enter your email"
                    buttonText="Get Early Access"
                    onSubmit={(email) => console.log("Email submitted:", email)}
                />
                <FooterBaseReveal
                    logoText="SaaSify"
                    columns={[
                        {
                            title: "Product",
                            items: [
                                { label: "Features", href: "#features" },
                                { label: "Pricing", href: "#pricing" },
                                { label: "Integrations", href: "#" },
                                { label: "Changelog", href: "#" },
                            ],
                        },
                        {
                            title: "Company",
                            items: [
                                { label: "About", href: "#about" },
                                { label: "Blog", href: "#" },
                                { label: "Careers", href: "#" },
                                { label: "Contact", href: "#contact" },
                            ],
                        },
                        {
                            title: "Resources",
                            items: [
                                { label: "Documentation", href: "#" },
                                { label: "Help Center", href: "#" },
                                { label: "Community", href: "#" },
                                { label: "Status", href: "#" },
                            ],
                        },
                        {
                            title: "Legal",
                            items: [
                                { label: "Privacy", href: "#" },
                                { label: "Terms", href: "#" },
                                { label: "Security", href: "#" },
                            ],
                        },
                    ]}
                    copyrightText="2024 SaasApp. All rights reserved."
                />
            </ReactLenis>
        </ThemeProvider>
    );
}
