"use client"

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { Users, CheckCircle, TrendingUp, Headphones, Rocket, Star, Zap } from 'lucide-react';

export default function SaaSifyPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="medium"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="SaaSify"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="SaaSify"
          description="Transform your workflow with intelligent automation, real-time analytics, and seamless integrations. Build faster, scale smarter."
          buttons={[
            { text: "Start Free Trial", href: "#contact" },
            { text: "Watch Demo", href: "#" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg"
          imageAlt="SaaSify Dashboard Interface"
          frameStyle="browser"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardMedia
          title="Powerful Features Built for Growth"
          description="Everything you need to streamline operations and accelerate your business success"
          tag="Core Features"
          features={[
            {
              id: "1",              title: "Intelligent Automation",              description: "Automate repetitive tasks and eliminate manual work. Save hours every week with smart workflows.",              tag: "Automation",              imageSrc: "https://img.b2bpic.net/free-photo/information-technology-connection-graphics-concept_53876-121040.jpg",              imageAlt: "Automation workflow interface"
            },
            {
              id: "2",              title: "Real-Time Analytics",              description: "Track performance metrics and gain actionable insights with comprehensive dashboards and reporting.",              tag: "Analytics",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "Analytics dashboard with charts"
            },
            {
              id: "3",              title: "Seamless Integration",              description: "Connect with your favorite tools and platforms. Our API supports 500+ integrations out of the box.",              tag: "Integration",              imageSrc: "https://img.b2bpic.net/free-photo/application-programming-interface-hologram_23-2149092253.jpg",              imageAlt: "API integration connections"
            },
            {
              id: "4",              title: "Enterprise Security",              description: "Bank-level encryption, SSO, and compliance certifications. Your data is protected with military-grade security.",              tag: "Security",              imageSrc: "https://img.b2bpic.net/free-photo/padlock-computer-circuit-board_93675-129557.jpg",              imageAlt: "Security protection shield"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Trusted by Industry Leaders"
          description="See the impact we're making for thousands of companies worldwide"
          metrics={[
            {
              id: "1",              value: "50K",              title: "Active Users",              description: "Growing community of satisfied customers",              icon: Users
            },
            {
              id: "2",              value: "99.9%",              title: "Uptime",              description: "Reliable service you can depend on",              icon: CheckCircle
            },
            {
              id: "3",              value: "10B",              title: "Operations",              description: "Transactions processed monthly",              icon: TrendingUp
            },
            {
              id: "4",              value: "24/7",              title: "Support",              description: "Expert team ready to help anytime",              icon: Headphones
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your needs. Scale up anytime."
          tag="Pricing Plans"
          plans={[
            {
              id: "starter",              badge: "Perfect for Startups",              badgeIcon: Rocket,
              price: "$29",              subtitle: "/month, billed annually",              buttons: [{ text: "Get Started", href: "#contact" }],
              features: [
                "Up to 5 team members",                "5,000 monthly operations",                "Basic analytics",                "Email support",                "Standard integrations"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Star,
              price: "$79",              subtitle: "/month, billed annually",              buttons: [{ text: "Start Free Trial", href: "#contact" }],
              features: [
                "Unlimited team members",                "100,000 monthly operations",                "Advanced analytics",                "Priority email & chat support",                "500+ integrations",                "Custom workflows"
              ]
            },
            {
              id: "enterprise",              badge: "For Large Teams",              badgeIcon: Zap,
              price: "Custom",              subtitle: "Contact us for pricing",              buttons: [{ text: "Request Demo", href: "#contact" }],
              features: [
                "Unlimited operations",                "Dedicated account manager",                "Custom analytics & reports",                "24/7 phone & priority support",                "Custom integrations",                "SLA guarantee",                "On-premise deployment"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Loved by Our Customers"
          description="See what industry leaders are saying about SaaSify"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell, CEO of TechFlow",              date: "Date: 15 December 2024",              title: "Transformed our entire workflow",              quote: "SaaSify has been a game-changer for our organization. We've reduced manual work by 70% and our team is now focusing on strategic initiatives. The ROI was immediate and impressive.",              tag: "Enterprise",              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
            },
            {
              id: "2",              name: "James Chen, Director of Operations",              date: "Date: 10 December 2024",              title: "Best investment we've made",              quote: "The implementation was seamless and the support team was incredible. Within weeks, we saw measurable improvements in productivity and our costs went down significantly.",              tag: "Professional",              avatarSrc: "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",              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"
            },
            {
              id: "3",              name: "Emily Rodriguez, Head of Analytics",              date: "Date: 5 December 2024",              title: "Exceptional analytics capabilities",              quote: "The insights we get from SaaSify's analytics dashboard are incredibly detailed and actionable. We can now make data-driven decisions faster than ever before.",              tag: "Professional",              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg"
            },
            {
              id: "4",              name: "Michael Torres, Founder at StartupXYZ",              date: "Date: 28 November 2024",              title: "Perfect for scaling startups",              quote: "As a startup, we needed something affordable yet powerful. SaaSify delivers on both fronts. It grows with us and the support has been outstanding.",              tag: "Starter",              avatarSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg"
            },
            {
              id: "5",              name: "Lisa Anderson, VP of Product",              date: "Date: 20 November 2024",              title: "Integrations that actually work",              quote: "We connected all our existing tools in hours, not weeks. The integration was plug-and-play and everything works flawlessly together.",              tag: "Enterprise",              avatarSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg"
            },
            {
              id: "6",              name: "David Kim, CTO at InnovateLabs",              date: "Date: 12 November 2024",              title: "Enterprise-grade security we can trust",              quote: "Security was our biggest concern, but SaaSify exceeded our expectations with comprehensive compliance certifications and proactive security measures.",              tag: "Enterprise",              avatarSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about SaaSify and how we can help your business"
          faqs={[
            {
              id: "1",              title: "What is SaaSify and how does it help my business?",              content: "SaaSify is a comprehensive business automation and analytics platform designed to streamline operations, reduce manual work, and provide actionable insights. We help companies automate workflows, integrate with existing tools, and scale efficiently."
            },
            {
              id: "2",              title: "Is there a free trial available?",              content: "Yes! We offer a 14-day free trial of our Professional plan. No credit card required. You'll get full access to all features and our support team is available to help you get started."
            },
            {
              id: "3",              title: "How long does implementation typically take?",              content: "Most customers are up and running within 1-2 weeks. Our onboarding team guides you through setup, data migration, and integration with your existing tools. Enterprise customers often benefit from dedicated implementation support."
            },
            {
              id: "4",              title: "What integrations does SaaSify support?",              content: "We support 500+ integrations out of the box including Salesforce, HubSpot, Slack, Jira, Google Workspace, Microsoft 365, and many more. Custom integrations can also be built through our robust API."
            },
            {
              id: "5",              title: "How secure is my data with SaaSify?",              content: "We employ bank-level encryption, regular security audits, SOC 2 Type II compliance, and GDPR/CCPA compliance. Your data is encrypted in transit and at rest, with automatic backups and disaster recovery protocols."
            },
            {
              id: "6",              title: "Can I cancel my subscription anytime?",              content: "Absolutely. You can cancel your subscription anytime with no penalties or long-term contracts. We want to earn your business, and our goal is to provide such value that you wouldn't want to leave."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          title="Ready to transform your workflow?"
          description="Join thousands of companies using SaaSify to automate their operations and boost productivity. Start your free 14-day trial today with no credit card required."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/standard-quality-control-collage-concept_23-2149595844.jpg"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Start Free Trial"
          termsText="By clicking Start Free Trial, you agree to our Terms of Service and Privacy Policy. We respect your privacy and you can unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="SaaSify"
          copyrightText="© 2025 SaaSify Inc. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "features" },
                { label: "Pricing", href: "pricing" },
                { label: "Security", href: "#" },
                { label: "Integrations", 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: "Help Center", href: "#" },
                { label: "Community", href: "#" },
                { label: "API Reference", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}