"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, Sparkles, TrendingUp, Users, Shield, MessageCircle, CreditCard, Rocket, Star, Crown, Send } from "lucide-react";
import Link from 'next/link';

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmall"
      background="aurora"
      cardStyle="inset"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="SaaS Pro"
          navItems={[
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get Started",
            href: "https://app.example.com/signup"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Streamline Your Workflow with Powerful SaaS Solutions"
          description="Transform how your team works with our intelligent, easy-to-use platform designed for modern businesses"
          tag="SaaS Platform"
          tagIcon={Zap}
          background={{ variant: "sparkles-gradient" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169860.jpg",
              imageAlt: "SaaS dashboard interface"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/infographic-dashboard-user-panel_52683-30026.jpg",
              imageAlt: "Workflow automation"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg",
              imageAlt: "Security and protection"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241197.jpg",
              imageAlt: "System integration"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg",
              imageAlt: "Analytics dashboard"
            }
          ]}
          buttons={[
            { text: "Start Free Trial", href: "https://app.example.com/trial" },
            { text: "Watch Demo", href: "/contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Empower Your Team"
          description={[
            "Our platform is built for teams that demand efficiency, reliability, and ease of use. We've simplified complex workflows into intuitive interfaces that your team will love.",
            "With powerful features designed around real user needs, we help businesses save time, reduce errors, and scale faster than ever before. Join thousands of companies transforming their operations."
          ]}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Learn More", href: "/features" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix
          title="Powerful Features Built for Scale"
          description="Everything you need to manage your business efficiently"
          tag="Features"
          tagIcon={Sparkles}
          features={[
            {
              id: 1,
              title: "Intelligent Automation",
              description: "Automate repetitive tasks and focus on what matters. Save hours every week with smart workflow automation.",
              imageSrc: "https://img.b2bpic.net/free-vector/infographic-dashboard-user-panel_52683-30026.jpg"
            },
            {
              id: 2,
              title: "Enterprise Security",
              description: "Bank-level security with end-to-end encryption. Your data is protected with industry-leading compliance standards.",
              imageSrc: "https://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg"
            },
            {
              id: 3,
              title: "Seamless Integration",
              description: "Connect with 100+ popular tools. Integrate with your existing stack in minutes, not days.",
              imageSrc: "https://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241197.jpg"
            },
            {
              id: 4,
              title: "Advanced Analytics",
              description: "Get actionable insights with real-time dashboards. Make data-driven decisions with confidence.",
              imageSrc: "https://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Explore All Features", href: "/pricing" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="By The Numbers"
          description="See why thousands of companies trust us with their operations"
          tag="Our Impact"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",
              value: "10K+",
              title: "Active Users",
              description: "Teams worldwide trusting our platform",
              icon: Users
            },
            {
              id: "2",
              value: "99.9%",
              title: "Uptime",
              description: "Reliable service you can depend on",
              icon: Shield
            },
            {
              id: "3",
              value: "50M+",
              title: "Tasks Processed",
              description: "Monthly through our platform",
              icon: Zap
            },
            {
              id: "4",
              value: "24/7",
              title: "Support",
              description: "Expert help whenever you need it",
              icon: MessageCircle
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your needs. All plans include a 14-day free trial."
          tag="Pricing"
          tagIcon={CreditCard}
          plans={[
            {
              id: "starter",
              badge: "Popular for Startups",
              badgeIcon: Rocket,
              price: "$49/month",
              subtitle: "Perfect for small teams getting started",
              features: [
                "Up to 5 team members",
                "10 GB storage",
                "Basic automation",
                "Email support",
                "Standard analytics"
              ]
            },
            {
              id: "professional",
              badge: "Most Popular",
              badgeIcon: Star,
              price: "$149/month",
              subtitle: "Best for growing teams",
              features: [
                "Up to 25 team members",
                "100 GB storage",
                "Advanced automation",
                "Priority support",
                "Advanced analytics",
                "Custom integrations"
              ]
            },
            {
              id: "enterprise",
              badge: "For Large Teams",
              badgeIcon: Crown,
              price: "Custom",
              subtitle: "Unlimited for enterprise",
              features: [
                "Unlimited team members",
                "Unlimited storage",
                "Custom automation",
                "24/7 dedicated support",
                "Enterprise analytics",
                "Custom integrations",
                "SLA guarantee"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Get Started", href: "https://app.example.com/signup" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Transform Your Workflow?"
          description="Join thousands of teams already using our platform. Start your free 14-day trial today—no credit card required."
          tagIcon={Send}
          useInvertedBackground="invertDefault"
          inputPlaceholder="your@company.com"
          buttonText="Start Trial"
          termsText="By signing up, you agree to our Terms of Service and Privacy Policy. You'll receive product updates and offers."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/man-wheelchair-having-office-job_23-2149571066.jpg"
          imageAlt="Team collaboration workspace"
          logoText="SaaS Pro"
          copyrightText="© 2025 SaaS Pro. All rights reserved."
          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: "/about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "/contact" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "GDPR", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}