"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import {
  Zap,
  AlertCircle,
  TrendingDown,
  Briefcase,
  Award,
  Mail,
  Rocket,
  Shield,
  Home,
  Settings,
  AlertTriangle,
  CheckCircle2,
  Clock,
  MessageCircle,
  Shuffle,
  MapPin,
} from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Sola Systems"
          navItems={[
            { name: "Services", id: "services" },
            { name: "How It Works", id: "how-it-works" },
            { name: "Get a Quote", id: "contact" },
          ]}
          button={{
            text: "Get a Quote",            href: "#contact"}}
          animateOnLoad={true}
          className="bg-black/50 backdrop-blur-md border border-white/10"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Your IT Department. Without the Overhead."
          description="Enterprise-level IT support on a monthly retainer. No hiring headaches. No long contracts. No tech problems slowing down your business."
          tag="IT Solutions"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Get Your Free Quote",              href: "#contact"},
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "circleGradient" }}
          dashboard={{
            title: "IT Operations Center",            logoIcon: Shield,
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/a-modern-it-support-dashboard-showing-ne-1772546356654-98946914.png",            searchPlaceholder: "Search systems...",            buttons: [
              { text: "View Dashboard", href: "#" },
              { text: "Export Report", href: "#" },
            ],
            sidebarItems: [
              { icon: Home, active: true },
              { icon: Settings },
              { icon: AlertCircle },
            ],
            stats: [
              {
                title: "Systems Online",                values: ["98%", "99%", "97%"],
                description: "Network uptime"},
              {
                title: "Tickets Resolved",                values: ["847", "923", "856"],
                description: "This month"},
              {
                title: "Users Supported",                values: ["2400", "2650", "2520"],
                description: "Active accounts"},
            ],
            chartTitle: "Support Activity",            chartData: [
              { value: 75 },
              { value: 85 },
              { value: 70 },
              { value: 90 },
              { value: 80 },
            ],
            listTitle: "Recent Alerts",            listItems: [
              {
                icon: AlertTriangle,
                title: "Database backup",                status: "Completed"},
              {
                icon: CheckCircle2,
                title: "Security patch applied",                status: "Success"},
              {
                icon: Clock,
                title: "Maintenance window",                status: "Scheduled"},
            ],
          }}
        />
      </div>

      <div id="pain-points" data-section="pain-points">
        <FeatureCardSix
          title="Sound familiar?"
          description="These are the exact problems we solve every day for Maryland businesses just like yours."
          tag="Common Problems"
          tagIcon={AlertCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            {
              id: 1,
              title: "Tech Issues Kill Productivity",              description: "When your systems go down, so does your business. You need a clear point of contact who understands your needs and fixes problems fast.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/abstract-illustration-of-business-frustr-1772546356118-6c172f34.png",              imageAlt: "Business frustration from IT problems"},
            {
              id: 2,
              title: "Paying for Software Nobody Uses",              description: "Subscriptions pile up. Licenses go unused. Your team doesn't know what tools you're actually paying for. Money wasted every month.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/illustration-of-software-license-confusi-1772546357606-358c242c.png",              imageAlt: "Software licensing confusion"},
            {
              id: 3,
              title: "Full-Time IT Staff Costs $60K+ Annually",              description: "Salary, benefits, training, turnover risk. One full-time IT person costs way more than you'd think. Plus what happens when they leave?",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/icon-based-illustration-showing-expensiv-1772546357449-60feb7b9.png",              imageAlt: "Expensive IT hiring costs"},
          ]}
        />
      </div>

      <div id="cost-comparison" data-section="cost-comparison">
        <ProductCardTwo
          title="The Smartest Businesses Don't Hire IT. They Outsource It."
          description="Stop paying enterprise costs for in-house IT when you can get better support for a fraction of the price. Here's why outsourcing wins."
          tag="Cost Comparison"
          tagIcon={TrendingDown}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "inhouse",              brand: "In-House IT",              name: "Full-Time Employee",              price: "$55K-75K",              rating: 2,
              reviewCount: "Limited",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/visual-representation-of-in-house-it-cos-1772546355900-55baace4.png",              imageAlt: "In-house IT costs breakdown"},
            {
              id: "sola",              brand: "Sola Systems",              name: "Managed IT Support",              price: "$500-2000",              rating: 5,
              reviewCount: "/month",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/visual-representation-of-outsourced-it-s-1772546355559-9e4339cd.png",              imageAlt: "Outsourced IT savings"},
          ]}
          animationType="slide-up"
          gridVariant="two-columns-alternating-heights"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSix
          title="Everything Your Business Needs. Nothing You Don't."
          description="Comprehensive IT services designed for growing Maryland businesses. From day one to scale."
          tag="Our Services"
          tagIcon={Briefcase}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            {
              id: 1,
              title: "IT Support & Troubleshooting",              description: "24/7 responsive support for all your technology issues. Real people. Real solutions. No runaround.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/modern-icon-representing-it-support-and--1772546354985-da1fb4fd.png",              imageAlt: "IT support services"},
            {
              id: 2,
              title: "Network & WiFi Setup",              description: "Fast, reliable networks that keep your team connected. Optimization, security, and ongoing monitoring included.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/modern-icon-for-network-and-wifi-setup-s-1772546355381-d6d06705.png",              imageAlt: "Network setup services"},
            {
              id: 3,
              title: "Software & Device Management",              description: "We manage licenses, updates, security patches, and device deployments so your team stays productive and protected.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/modern-icon-representing-software-and-de-1772546357306-f9cdd351.png",              imageAlt: "Software and device management"},
            {
              id: 4,
              title: "Website & Domain Management",              description: "Your online presence handled. Domain registration, hosting, updates, and performance optimization.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/modern-icon-for-website-and-domain-manag-1772546354187-15210cc2.png",              imageAlt: "Website management"},
            {
              id: 5,
              title: "AI Tools Setup & Training",              description: "Get ahead of the curve. We implement AI solutions and train your team so you capture competitive advantage.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/modern-icon-for-ai-tools-setup-and-train-1772546355109-510dae91.png",              imageAlt: "AI tools implementation"},
            {
              id: 6,
              title: "Compliance Documentation",              description: "HIPAA, GDPR, industry standards. We handle the documentation so you stay compliant and audit-ready.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/modern-icon-representing-compliance-docu-1772546356603-080e7d3b.png",              imageAlt: "Compliance services"},
            {
              id: 7,
              title: "24/7 AI Support Chatbot",              description: "Instant answers for your team. Our AI-powered chatbot handles common questions anytime, reducing support tickets.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/modern-icon-for-24-7-ai-support-chatbot--1772546357467-f191cdda.png",              imageAlt: "24/7 support chatbot"},
            {
              id: 8,
              title: "Cloud Services Management",              description: "Secure cloud infrastructure, migrations, backups, and disaster recovery. Enterprise-grade reliability.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/modern-icon-for-cloud-services-managemen-1772546354792-83186e31.png",              imageAlt: "Cloud services"},
          ]}
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <FeatureCardSix
          title="Up and Running in 3 Steps"
          description="Simple process. Fast onboarding. You're not waiting around."
          tag="Our Process"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Fill Out Questionnaire",              description: "Tell us about your business, your current setup, and your biggest IT headaches. 10 minutes. Simple questions.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/step-1-illustration-person-filling-out-q-1772546356089-f637ad76.png",              imageAlt: "Step 1: Questionnaire"},
            {
              id: 2,
              title: "Get Custom Quote",              description: "Our team analyzes your needs and creates a personalized quote. No generic pricing. You get exactly what you need.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/step-2-illustration-professional-review--1772546355236-595921f7.png",              imageAlt: "Step 2: Custom quote"},
            {
              id: 3,
              title: "Sign & Get Onboarded",              description: "Simple agreement. Fast implementation. You'll be onboarded the same week. Your IT problems? Solved.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/step-3-illustration-fast-onboarding-and--1772546355044-be8b8767.png",              imageAlt: "Step 3: Onboarding"},
          ]}
        />
      </div>

      <div id="why-choose-sola" data-section="why-choose-sola">
        <MetricCardOne
          title="Why Businesses Choose Sola Systems"
          description="We're not just another IT vendor. We're your partner."
          tag="Why Choose Us"
          tagIcon={Award}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "Fast",              title: "Response Times",              description: "No waiting around. We answer quickly and fix faster.",              icon: Zap,
            },
            {
              id: "2",              value: "Clear",              title: "Communication",              description: "Plain English. No tech jargon. You understand everything.",              icon: MessageCircle,
            },
            {
              id: "3",              value: "Flexible",              title: "Month-to-Month",              description: "No long contracts. Cancel anytime. True partnership.",              icon: Shuffle,
            },
            {
              id: "4",              value: "Local",              title: "Personal Service",              description: "Maryland-based. You talk to real people who know your business.",              icon: MapPin,
            },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Let's Figure Out What You Need"
          tagIcon={Mail}
          title="Get Your Custom IT Quote"
          description="Tell us about your business and your biggest IT challenges. We'll respond within 24 hours with a personalized quote and solution."
          buttons={[
            {
              text: "Send My Info — I Want a Quote",              href: "#"},
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "circleGradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="final-cta" data-section="final-cta">
        <ContactCTA
          tag="Ready to Transform Your IT?"
          tagIcon={Rocket}
          title="Stop Letting Tech Slow Your Business Down"
          description="Maryland businesses are already saving thousands and eliminating IT headaches with Sola Systems. Your competitors aren't waiting. Why should you?"
          buttons={[
            {
              text: "Get Your Free Quote Today",              href: "#contact"},
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7GotXow3aIaaV3d9c5mUmI8g/professional-tech-company-footer-backgro-1772546355312-d899f66c.png"
          imageAlt="Sola Systems IT support footer"
          logoText="Sola Systems"
          copyrightText="© 2025 Sola Systems. IT support built for real businesses."
          columns={[
            {
              title: "Services",              items: [
                { label: "IT Support", href: "#services" },
                { label: "Network Setup", href: "#services" },
                { label: "Cloud Services", href: "#services" },
                { label: "Security & Compliance", href: "#services" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "How It Works", href: "#how-it-works" },
                { label: "Contact Us", href: "#contact" },
                { label: "Blog", href: "#" },
              ],
            },
            {
              title: "Contact",              items: [
                { label: "team@solaconsulting.io", href: "mailto:team@solaconsulting.io" },
                { label: "Maryland, USA", href: "#" },
                { label: "Get a Quote", href: "#contact" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
