"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { AlertCircle, BarChart3, CheckCircle, Clock, Cloud, Crown, Database, DollarSign, Eye, GitBranch, Lock, Mail, Shield, Sparkles, Webhook, Zap } from "lucide-react";

export default function LandingPage() {
  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"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="SaasFlow"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" }
          ]}
          button={{ text: "Get Started", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="The SaaS Platform Built for Modern Teams"
          description="Streamline your workflow with powerful automation, real-time collaboration, and advanced analytics. Scale your business without complexity."
          background={{ variant: "sparkles-gradient" }}
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "User 1" },
            { src: "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", alt: "User 2" },
            { src: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", alt: "User 3" },
            { src: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", alt: "User 4" },
            { src: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", alt: "User 5" }
          ]}
          avatarText="Trusted by 2,500+ teams worldwide"
          buttons={[
            { text: "Start Free Trial", href: "pricing" },
            { text: "Watch Demo", href: "https://example.com/demo" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Powerful Features to Accelerate Growth"
          description="Everything you need to manage, scale, and optimize your operations in one intuitive platform."
          tag="Core Features"
          tagIcon={Sparkles}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
          features={[
            {
              title: "Real-Time Analytics",              description: "Track performance metrics and user behavior with instant dashboards",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Global Reach",              description: "Operate worldwide with servers in 6 continents",              bentoComponent: "globe"
            },
            {
              title: "Smart Integrations",              description: "Connect with 500+ popular tools and services",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
              items: [
                { icon: Database, ring: 1 },
                { icon: Lock, ring: 1 },
                { icon: BarChart3, ring: 2 },
                { icon: Cloud, ring: 2 },
                { icon: Webhook, ring: 3 },
                { icon: GitBranch, ring: 3 }
              ]
            },
            {
              title: "Automation Pipeline",              description: "Build powerful automations with no-code builder",              bentoComponent: "3d-task-list",              items: [
                { icon: Clock, label: "Scheduled Tasks", time: "Every hour" },
                { icon: Zap, label: "Event Triggers", time: "Real-time" },
                { icon: CheckCircle, label: "Workflows Complete", time: "99.99% uptime" }
              ]
            }
          ]}
        />
      </div>

      <div id="advanced-features" data-section="advanced-features">
        <FeatureBorderGlow
          title="Enterprise-Grade Security & Reliability"
          description="Built for teams that demand the highest standards of performance and data protection."
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          features={[
            {
              icon: Shield,
              title: "Military-Grade Encryption",              description: "End-to-end encryption with AES-256 for all data at rest and in transit"
            },
            {
              icon: Lock,
              title: "Enterprise SSO",              description: "Seamless SAML 2.0 and OAuth 2.0 integration with your identity provider"
            },
            {
              icon: Eye,
              title: "Audit Logs",              description: "Complete activity tracking with detailed compliance reports and exports"
            },
            {
              icon: Zap,
              title: "99.99% Uptime SLA",              description: "Redundant infrastructure with automatic failover and 24/7 monitoring"
            },
            {
              icon: AlertCircle,
              title: "Real-Time Alerts",              description: "Instant notifications for security events and system anomalies"
            },
            {
              icon: CheckCircle,
              title: "Compliance Ready",              description: "SOC 2, GDPR, HIPAA, and ISO 27001 certified infrastructure"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="SaasFlow transformed how we manage our operations. We've cut workflow time by 60% and gained unprecedented visibility into our business metrics. The support team has been exceptional every step of the way."
          rating={5}
          author="Marcus Johnson, Chief Operations Officer at TechVenture"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg", alt: "Marcus Johnson" },
            { src: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg", alt: "Team member" },
            { src: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", alt: "Team member" },
            { src: "https://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84734.jpg", alt: "Team member" },
            { src: "https://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg", alt: "Team member" },
            { src: "https://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg", alt: "Team member" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your team size and needs. All plans include 14-day free trial with no credit card required."
          tag="Pricing"
          tagIcon={DollarSign}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
          plans={[
            {
              id: "starter",              badge: "Most Popular for Small Teams",              badgeIcon: Sparkles,
              price: "$49",              subtitle: "/month for up to 5 users",              buttons: [{ text: "Start Free Trial", href: "https://example.com/signup" }],
              features: [
                "Up to 5 team members",                "5,000 monthly automation runs",                "Basic analytics dashboard",                "Community support",                "2 GB storage",                "Email integrations"
              ]
            },
            {
              id: "professional",              badge: "Best for Growing Teams",              badgeIcon: Zap,
              price: "$149",              subtitle: "/month for up to 25 users",              buttons: [{ text: "Start Free Trial", href: "https://example.com/signup" }],
              features: [
                "Up to 25 team members",                "50,000 monthly automation runs",                "Advanced analytics & reporting",                "Priority email support",                "100 GB storage",                "500+ integrations",                "Custom workflows",                "API access"
              ]
            },
            {
              id: "enterprise",              badge: "For Large Organizations",              badgeIcon: Crown,
              price: "Custom",              subtitle: "Tailored for enterprise needs",              buttons: [{ text: "Contact Sales", href: "contact" }],
              features: [
                "Unlimited team members",                "Unlimited automation runs",                "Real-time analytics & insights",                "24/7 phone support",                "Unlimited storage",                "White-label options",                "Dedicated account manager",                "Custom integrations",                "SLA guarantee",                "SSO & advanced security"
              ]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Mail}
          title="Join 2,500+ Teams Using SaasFlow"
          description="Subscribe to get exclusive tips on productivity, automation best practices, and early access to new features."
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your work email"
          buttonText="Get Early Access"
          termsText="We respect your privacy. Unsubscribe anytime. Check out our Privacy Policy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "features" },
                { label: "Pricing", href: "pricing" },
                { label: "Security", href: "https://example.com/security" },
                { label: "Roadmap", href: "https://example.com/roadmap" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "https://example.com/about" },
                { label: "Blog", href: "https://example.com/blog" },
                { label: "Careers", href: "https://example.com/careers" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "https://example.com/privacy" },
                { label: "Terms of Service", href: "https://example.com/terms" },
                { label: "Security", href: "https://example.com/security" },
                { label: "Compliance", href: "https://example.com/compliance" }
              ]
            }
          ]}
          copyrightText="© 2025 SaasFlow. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}