"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Award, BarChart3, CreditCard, Headphones, Lock, Rocket, Shield, Sparkles, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="SaaSPro"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Blog", id: "blog" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="SaaSPro"
          description="Accelerate your workflow with intelligent automation, powerful analytics, and seamless integrations. Transform how your team works together."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Start Free Trial", href: "#pricing" },
            { text: "View Demo", href: "#contact" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg"
          imageAlt="SaaS platform dashboard showcasing modern interface"
          frameStyle="browser"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBorderGlow
          title="Powerful Features Built for Your Success"
          description="Everything you need to streamline operations, boost productivity, and scale with confidence."
          tag="Core Features"
          tagIcon={Zap}
          features={[
            {
              icon: BarChart3,
              title: "Advanced Analytics",              description: "Real-time insights and comprehensive reporting to drive data-driven decisions."
            },
            {
              icon: Lock,
              title: "Enterprise Security",              description: "Bank-grade encryption and compliance certifications for complete peace of mind."
            },
            {
              icon: Zap,
              title: "Seamless Integrations",              description: "Connect with 500+ tools and platforms to unify your entire tech stack."
            },
            {
              icon: Headphones,
              title: "24/7 Support",              description: "Dedicated customer success team available round-the-clock via chat, email, and phone."
            },
            {
              icon: Zap,
              title: "Lightning Fast",              description: "Sub-millisecond response times and 99.99% uptime SLA guarantee."
            },
            {
              icon: TrendingUp,
              title: "Infinite Scalability",              description: "Grow from startup to enterprise without worrying about infrastructure limits."
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Explore All Features", href: "#pricing" }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Transparent Pricing for Every Stage"
          description="Choose the perfect plan to match your business needs. All plans include a 14-day free trial with full access to all features."
          tag="Pricing Plans"
          tagIcon={CreditCard}
          plans={[
            {
              id: "starter",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$49/mo",              subtitle: "Perfect for growing teams",              features: [
                "Up to 10 team members",                "50GB storage",                "Basic analytics",                "Community support",                "5 integrations"
              ]
            },
            {
              id: "professional",              badge: "Best Value",              badgeIcon: Award,
              price: "$149/mo",              subtitle: "For scaling businesses",              features: [
                "Up to 50 team members",                "500GB storage",                "Advanced analytics",                "Priority email support",                "50 integrations",                "Custom branding",                "SSO & SAML"
              ]
            },
            {
              id: "enterprise",              badge: "Enterprise",              badgeIcon: Shield,
              price: "Custom",              subtitle: "For large organizations",              features: [
                "Unlimited team members",                "Unlimited storage",                "Custom analytics",                "24/7 phone support",                "Unlimited integrations",                "Custom workflows",                "Dedicated account manager",                "SLA guarantee"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View All Plans", href: "#contact" }
          ]}
        />
      </div>

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

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="SaaSPro"
          leftLink={{
            text: "Privacy Policy",            href: "#"
          }}
          rightLink={{
            text: "Terms of Service",            href: "#"
          }}
        />
      </div>
    </ThemeProvider>
  );
}