"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Zap, Sparkles, TrendingUp, Users, Headphones, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="SaaSify"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          tag="Modern SaaS Solution"
          tagIcon={Zap}
          title="Empower Your Business with Intelligent Analytics"
          description="Transform raw data into actionable insights with our cutting-edge SaaS platform. Real-time dashboards, advanced analytics, and seamless integrations help your team make smarter decisions faster."
          background={{ variant: "radial-gradient" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "SaaS Dashboard Interface"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg",              imageAlt: "Business Growth Analytics"
            }
          ]}
          rating={5}
          ratingText="Trusted by 5,000+ companies"
          buttons={[
            { text: "Start Free Trial", href: "#contact" },
            { text: "Watch Demo" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          tag="Why Choose Us"
          tagIcon={Sparkles}
          title="Powerful Features Built for Growth"
          description="Everything you need to succeed in one unified platform"
          features={[
            {
              title: "Real-Time Analytics",              description: "Monitor your business metrics in real-time with interactive dashboards and instant alerts",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "analytics chart graph data metrics"
            },
            {
              title: "Enterprise Security",              description: "Bank-grade encryption and compliance certifications keep your data safe and protected",              imageSrc: "https://img.b2bpic.net/free-vector/social-media-analysis-design-graphs_53876-114315.jpg",              imageAlt: "security lock shield protection safe"
            },
            {
              title: "API Integrations",              description: "Connect seamlessly with 500+ tools and platforms your team already uses daily",              imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg",              imageAlt: "integration connection link api network"
            },
            {
              title: "Lightning Fast",              description: "Optimized performance that loads in milliseconds, not seconds, for maximum productivity",              imageSrc: "https://img.b2bpic.net/free-vector/colorful-dashboard-collection-chart-elements_23-2148263144.jpg",              imageAlt: "speed fast lightning performance optimize"
            }
          ]}
          textboxLayout="split"
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          tag="Our Impact"
          title="Proven Results"
          description="See the numbers behind our success"
          metrics={[
            {
              id: "1",              value: "99.9",              title: "%",              description: "Uptime Guarantee",              icon: TrendingUp
            },
            {
              id: "2",              value: "5000",              title: "+",              description: "Active Users",              icon: Users
            },
            {
              id: "3",              value: "250",              title: "ms",              description: "Average Load Time",              icon: Zap
            },
            {
              id: "4",              value: "24/7",              title: "Support",              description: "Customer Service",              icon: Headphones
            }
          ]}
          textboxLayout="split"
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          tag="Flexible Pricing"
          title="Choose Your Perfect Plan"
          description="Transparent pricing that scales with your business. No hidden fees, cancel anytime."
          plans={[
            {
              id: "starter",              badge: "Starter",              price: "$99/mo",              subtitle: "Perfect for small teams",              features: [
                "Up to 10 team members",                "Basic analytics dashboard",                "Email support",                "5 integrations",                "1GB data storage"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$299/mo",              subtitle: "Best for growing businesses",              features: [
                "Up to 50 team members",                "Advanced analytics & AI insights",                "Priority support",                "Unlimited integrations",                "100GB data storage",                "Custom workflows"
              ]
            },
            {
              id: "enterprise",              badge: "Enterprise",              price: "Custom",              subtitle: "For large-scale operations",              features: [
                "Unlimited team members",                "Dedicated account manager",                "24/7 phone & email support",                "Custom integrations",                "Unlimited storage",                "Advanced security & compliance"
              ]
            }
          ]}
          textboxLayout="split"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          tag="Customer Success"
          title="Loved by Teams Worldwide"
          description="See what our customers have to say about their experience with SaaSify"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "CEO",              testimonial: "SaaSify transformed how we analyze data. We've cut analysis time by 60% and our team loves the intuitive interface. Highly recommended!",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "professional portrait headshot business person"
            },
            {
              id: "2",              name: "Michael Rodriguez",              role: "Product Manager",              testimonial: "The integration capabilities are outstanding. Connecting all our tools was seamless, and the support team is incredibly responsive.",              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: "professional portrait headshot business person"
            },
            {
              id: "3",              name: "Emma Thompson",              role: "Operations Director",              testimonial: "We've been using SaaSify for 18 months now. The ROI has been incredible, and their continuous feature updates show they listen to customers.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "professional portrait headshot business person"
            },
            {
              id: "4",              name: "David Park",              role: "CTO",              testimonial: "Security and performance were our top concerns. SaaSify exceeded expectations on both fronts. It's our go-to analytics platform.",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "professional portrait headshot business person"
            }
          ]}
          textboxLayout="split"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Mail}
          title="Ready to Transform Your Business?"
          description="Join thousands of companies using SaaSify to drive growth. Start your free trial today—no credit card required."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your work email"
          buttonText="Start Free Trial"
          termsText="By signing up, you agree to our Terms of Service and Privacy Policy. We respect your privacy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="SaaSify"
          columns={[
            {
              items: [
                { label: "Features", href: "features" },
                { label: "Pricing", href: "pricing" },
                { label: "Security", href: "#" },
                { label: "Roadmap", href: "#" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Legal", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}