"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Rocket, Sparkles } from "lucide-react";

export default function SaaSLandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="elevated"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="SaaSFlow"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Start Free Trial",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Powerful SaaS Platform for Modern Teams"
          description="Streamline your workflow, automate repetitive tasks, and collaborate seamlessly with advanced analytics and real-time insights."
          tag="Launch Your Success"
          tagIcon={Rocket}
          imageSrc="https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg"
          imageAlt="Modern SaaS dashboard interface"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Start Free Trial", href: "#contact" },
            { text: "View Demo", href: "https://example.com/demo" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEight
          title="Powerful Features for Every Team"
          description="Everything you need to succeed"
          tag="Core Features"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Smart Automation",              description: "Automate your most repetitive tasks and save hours every week with intelligent workflow automation",              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"
            },
            {
              id: 2,
              title: "Advanced Analytics",              description: "Get actionable insights with comprehensive dashboards, custom reports, and real-time data visualization",              imageSrc: "https://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg"
            },
            {
              id: 3,
              title: "Seamless Integration",              description: "Connect with 500+ apps and services to build the perfect workflow for your team's unique needs",              imageSrc: "https://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg"
            },
            {
              id: 4,
              title: "Enterprise Security",              description: "Bank-level encryption, SSO, and compliance with GDPR, SOC2, and other industry standards",              imageSrc: "https://img.b2bpic.net/free-photo/executive-workspace-features-digital-dashboard-with-financial-charts_482257-123845.jpg"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Trusted by Industry Leaders"
          description="Join thousands of teams already transforming their business"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "50K+",              title: "Active Users",              description: "Growing community of satisfied customers",              imageSrc: "https://img.b2bpic.net/free-photo/three-cheerful-businesspeople-giving-five-smiling-confident-happy-colleagues-celebrating-successful-deal-together-standing-outdoors-rising-hand-up-teamwork-partnership-concept_74855-7845.jpg"
            },
            {
              id: "2",              value: "10M+",              title: "Tasks Automated",              description: "Total automations run successfully",              imageSrc: "https://img.b2bpic.net/free-photo/three-cheerful-businesspeople-giving-five-smiling-confident-happy-colleagues-celebrating-successful-deal-together-standing-outdoors-rising-hand-up-teamwork-partnership-concept_74855-7845.jpg"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Customers Say"
          description="Real feedback from teams using SaaSFlow every day"
          tag="Success Stories"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "CEO",              company: "TechVentures",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Product Manager",              company: "DataFlow Inc",              rating: 5,
              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"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Operations Director",              company: "GrowthLabs",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "David Park",              role: "Founder",              company: "StartupXYZ",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "David Park"
            }
          ]}
          kpiItems={[
            { value: "98%", label: "Satisfaction Rate" },
            { value: "4.9/5", label: "Average Rating" },
            { value: "24/7", label: "Support Available" }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your team"
          tag="Pricing Plans"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          plans={[
            {
              id: "free",
              title: "Free",
              price: "$0",
              period: "/month",
              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
              imageAlt: "Free plan",
              button: {
                label: "Get Started",
                href: "#contact",
                dataWebildId: "cta_btn_1"
              },
              features: [
                "Up to 5 users",
                "Basic features",
                "Email support",
                "1GB storage"
              ]
            },
            {
              id: "pro",
              title: "Pro",
              price: "$29",
              period: "/month",
              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
              imageAlt: "Pro plan",
              button: {
                label: "Start Free Trial",
                href: "#contact",
                dataWebildId: "cta_btn_2"
              },
              features: [
                "Up to 20 users",
                "Advanced features",
                "Priority email support",
                "10GB storage"
              ]
            },
            {
              id: "enterprise",
              title: "Enterprise",
              price: "Custom",
              period: "pricing",
              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
              imageAlt: "Enterprise plan",
              button: {
                label: "Contact Sales",
                href: "#contact",
                dataWebildId: "cta_btn_3"
              },
              features: [
                "Unlimited users",
                "All features",
                "Dedicated support",
                "Unlimited storage"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about SaaSFlow"
          tag="Help & Support"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/online-help-center_53876-95304.jpg"
          imageAlt="FAQ support illustration"
          mediaPosition="left"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I get started?",              content: "Getting started is easy! Sign up for a free account, choose your plan, and invite your team. We provide onboarding tutorials and 24/7 support to help you succeed."
            },
            {
              id: "2",              title: "Can I try SaaSFlow for free?",              content: "Yes! All new users get a 14-day free trial with full access to all features. No credit card required. You can upgrade or cancel anytime."
            },
            {
              id: "3",              title: "What payment methods do you accept?",              content: "We accept all major credit cards (Visa, MasterCard, American Express), bank transfers, and digital payment methods. Enterprise customers can arrange custom payment terms."
            },
            {
              id: "4",              title: "Is my data secure?",              content: "Security is our top priority. We use bank-level 256-bit encryption, regular security audits, and comply with GDPR, SOC2, and ISO 27001 standards."
            },
            {
              id: "5",              title: "Do you offer API access?",              content: "Yes! Our REST API allows you to build custom integrations. Professional and Enterprise plans include full API access with comprehensive documentation."
            },
            {
              id: "6",              title: "Can I cancel anytime?",              content: "Absolutely. You can cancel your subscription anytime with no penalties or long-term contracts. Your data is always yours to export."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Transform?"
          tagIcon={Sparkles}
          title="Join Thousands of Teams Using SaaSFlow"
          description="Start your free 14-day trial today. No credit card required. Experience the power of intelligent automation and advanced analytics."
          buttons={[
            { text: "Start Free Trial", href: "https://example.com/signup" },
            { text: "Schedule Demo", href: "https://example.com/demo" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          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: "Support", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 SaaSFlow. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}