"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Zap, Sparkles, DollarSign, Crown, Heart, MessageCircle, Slack, Mail, Settings, Cloud, Database, Lock, Users, FileText, CheckCircle } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="none"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="SaaSHub"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
            { name: "Docs", id: "docs" }
          ]}
          bottomLeftText="Global SaaS Community"
          bottomRightText="hello@saashub.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Powerful SaaS Platform for Modern Teams"
          description="Build, deploy, and scale your business with our comprehensive SaaS solution. Trusted by thousands of teams worldwide."
          tag="Next Generation Platform"
          tagIcon={Zap}
          background={{ variant: "glowing-orb" }}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg"
          imageAlt="SaaS Platform Dashboard"
          imagePosition="right"
          buttons={[
            { text: "Start Free Trial", href: "#contact" },
            { text: "View Demo", href: "#features" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Powerful Features Built for Scale"
          description="Everything you need to succeed in one intuitive platform"
          tag="Features"
          tagIcon={Sparkles}
          features={[
            {
              title: "Real-Time Analytics",              description: "Track every metric that matters with comprehensive dashboards and visualizations",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Global Integrations",              description: "Connect with 500+ tools and services seamlessly",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
              items: [
                { icon: Slack, ring: 1 },
                { icon: Mail, ring: 1 },
                { icon: Settings, ring: 2 },
                { icon: Cloud, ring: 2 },
                { icon: Database, ring: 3 },
                { icon: Lock, ring: 3 }
              ]
            },
            {
              title: "Enterprise Security",              description: "Bank-level encryption and compliance with SOC 2, GDPR, and more",              bentoComponent: "globe"
            },
            {
              title: "Collaboration Tools",              description: "Real-time collaboration features for distributed teams",              bentoComponent: "3d-stack-cards",              items: [
                {
                  icon: Users,
                  title: "Team Chat",                  subtitle: "Real-time messaging",                  detail: "Instant communication"
                },
                {
                  icon: FileText,
                  title: "Document Sharing",                  subtitle: "Secure file transfer",                  detail: "Version control included"
                },
                {
                  icon: CheckCircle,
                  title: "Task Management",                  subtitle: "Project tracking",                  detail: "Automated workflows"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Explore All Features", href: "#" }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your team. All plans include a 14-day free trial."
          tag="Pricing"
          tagIcon={DollarSign}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          plans={[
            {
              id: "starter",              tag: "Starter Plan",              tagIcon: Sparkles,
              price: "$99",              period: "/month",              description: "Perfect for small teams and startups",              button: {
                text: "Get Started",                href: "#contact"
              },
              featuresTitle: "What's Included:",              features: [
                "Up to 5 team members",                "500 API calls per day",                "Core analytics dashboard",                "Email support",                "Basic integrations",                "Mobile app access"
              ]
            },
            {
              id: "professional",              tag: "Professional Plan",              tagIcon: Crown,
              price: "$299",              period: "/month",              description: "For growing businesses and teams",              button: {
                text: "Start Trial",                href: "#contact"
              },
              featuresTitle: "What's Included:",              features: [
                "Up to 20 team members",                "Unlimited API calls",                "Advanced analytics & reports",                "Priority email & chat support",                "500+ integrations",                "Custom workflows",                "SSO & advanced security",                "Dedicated account manager"
              ]
            },
            {
              id: "enterprise",              tag: "Enterprise Plan",              tagIcon: Zap,
              price: "Custom",              period: "pricing",              description: "For large organizations with advanced needs",              button: {
                text: "Contact Sales",                href: "#contact"
              },
              featuresTitle: "What's Included:",              features: [
                "Unlimited team members",                "Unlimited API calls & usage",                "Custom analytics & dashboards",                "24/7 phone & dedicated support",                "All integrations",                "Advanced automation",                "SOC 2 & HIPAA compliance",                "Custom deployment options",                "SLA guarantee",                "Quarterly business reviews"
              ]
            }
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Johnson - CEO"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "Michael Chen - CTO"
            },
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emily Rodriguez - Product Lead"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              imageAlt: "David Kim - Founder"
            }
          ]}
          cardTitle="Over 50,000 teams worldwide trust SaaSHub to power their business growth and operations"
          cardTag="Trusted by Industry Leaders"
          cardTagIcon={Heart}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get Started Today"
          tagIcon={MessageCircle}
          title="Ready to Transform Your Business?"
          description="Join thousands of teams using SaaSHub to streamline their operations, boost productivity, and drive growth. Start your free 14-day trial today—no credit card required."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Start Free Trial", href: "#" },
            { text: "Schedule Demo", href: "#" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="SaaSHub"
          copyrightText="© 2025 SaaSHub. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "features" },
                { label: "Pricing", href: "pricing" },
                { label: "Security", href: "#" },
                { label: "Roadmap", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Community", href: "#" },
                { label: "Status Page", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}