"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { useAbout } from "@/lib/hooks/useAbout";

const AboutBanner = () => {
  const { data, loading, error } = useAbout();
  const [currentMetric, setCurrentMetric] = useState(0);

  useEffect(() => {
    // Auto-rotate metrics
    const interval = setInterval(() => {
      setCurrentMetric(prev => (prev + 1) % 3);
    }, 4000);

    return () => clearInterval(interval);
  }, []);

  // Show loading state
  if (loading) {
    return (
      <section className="about-banner fix-top pb-120 position-relative overflow-x-clip">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="text-center py-5">
                <div className="spinner-border text-primary" role="status">
                  <span className="visually-hidden">Loading...</span>
                </div>
                <p className="mt-3">Loading about us content...</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Show error state
  if (error) {
    return (
      <section className="about-banner fix-top pb-120 position-relative overflow-x-clip">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="text-center py-5">
                <div className="alert alert-danger" role="alert">
                  <h4 className="alert-heading">Error Loading Content</h4>
                  <p>{error}</p>
                  <hr />
                  <p className="mb-0">Please try refreshing the page or contact support if the problem persists.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Use API data or fallback to default content
  const bannerData = data?.banner;

  const metrics = [
    { value: "8", label: "Industry Verticals", icon: "fa-industry", color: "#3b82f6" },
    { value: "99.9%", label: "Uptime SLA", icon: "fa-shield-halved", color: "#10b981" },
    { value: "24/7", label: "Enterprise Support", icon: "fa-headset", color: "#f59e0b" },
    { value: "5+", label: "Years of Operation", icon: "fa-award", color: "#8b5cf6" }
  ];

  return (
    <section className="hero-banner">
      {/* Video-like Background */}
      <div className="hero-background">
        {/* Animated Code Lines */}
        <div className="code-animation">
          <div className="code-line line-1">
            <span className="code-keyword">const</span> enterprise = <span className="code-string">&apos;mission-critical&apos;</span>;
          </div>
          <div className="code-line line-2">
            <span className="code-keyword">if</span> (security.level === <span className="code-string">&apos;enterprise&apos;</span>) &#123;
          </div>
          <div className="code-line line-3">
            &nbsp;&nbsp;deploy<span className="code-function">()</span>;
          </div>
          <div className="code-line line-4">
            &#125;
          </div>
        </div>

        {/* Floating Tech Icons */}
        <div className="floating-tech">
          <div className="tech-icon icon-1">
            <i className="fa-solid fa-shield-halved"></i>
          </div>
          <div className="tech-icon icon-2">
            <i className="fa-solid fa-cloud"></i>
          </div>
          <div className="tech-icon icon-3">
            <i className="fa-solid fa-server"></i>
          </div>
          <div className="tech-icon icon-4">
            <i className="fa-solid fa-lock"></i>
          </div>
          <div className="tech-icon icon-5">
            <i className="fa-solid fa-chart-line"></i>
          </div>
          <div className="tech-icon icon-6">
            <i className="fa-solid fa-database"></i>
          </div>
        </div>

        {/* Enterprise Dashboard Elements */}
        <div className="dashboard-elements">
          <div className="dashboard-card card-1">
            <div className="card-header">
              <i className="fa-solid fa-shield-check"></i>
              <span>Security Status</span>
            </div>
            <div className="card-content">
              <div className="status-indicator resolved"></div>
              <span>Enterprise Grade</span>
            </div>
          </div>

          <div className="dashboard-card card-2">
            <div className="card-header">
              <i className="fa-solid fa-clock"></i>
              <span>SLA Response</span>
            </div>
            <div className="card-content">
              <div className="metric-value">99.9%</div>
              <span>Uptime</span>
            </div>
          </div>

          <div className="dashboard-card card-3">
            <div className="card-header">
              <i className="fa-solid fa-building"></i>
              <span>Enterprise Clients</span>
            </div>
            <div className="card-content">
              <div className="metric-value">500+</div>
              <span>Fortune 500</span>
            </div>
          </div>
        </div>

        {/* Network Connection Lines */}
        <div className="network-lines">
          <div className="connection-line line-1"></div>
          <div className="connection-line line-2"></div>
          <div className="connection-line line-3"></div>
          <div className="connection-line line-4"></div>
        </div>

        {/* Data Flow Particles */}
        <div className="data-particles">
          <div className="particle particle-1"></div>
          <div className="particle particle-2"></div>
          <div className="particle particle-3"></div>
          <div className="particle particle-4"></div>
          <div className="particle particle-5"></div>
          <div className="particle particle-6"></div>
        </div>

        {/* Background Gradient Overlay */}
        <div className="video-overlay"></div>
      </div>

      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-lg-10 col-xl-8">
            <div className="hero-content text-center">
              {/* Badge */}
              <div className="hero-badge">
                <div className="badge-icon">
                  <i className="fa-solid fa-shield-check"></i>
                </div>
                <span>Enterprise Security Certified</span>
              </div>

              {/* Main Title */}
              <h1 className="hero-title">
                {bannerData?.title || "Mission-Critical Software Solutions for Global Enterprises"}
              </h1>

              {/* Description */}
              <p className="hero-description">
                {bannerData?.description || "GNX Soft Ltd delivers enterprise-grade software solutions for mission-critical industries with 99.9% uptime SLA and 24/7 dedicated support. Our platforms power digital transformation across Defense & Aerospace, Healthcare, Banking, Telecommunication, and other highly regulated sectors."}
              </p>

              {/* Key Metrics */}
              <div className="hero-metrics">
                {metrics.map((metric, index) => (
                  <div 
                    key={index} 
                    className={`metric-item ${currentMetric === index ? 'active' : ''}`}
                    onClick={() => setCurrentMetric(index)}
                  >
                    <div className="metric-icon" style={{ backgroundColor: metric.color }}>
                      <i className={`fa-solid ${metric.icon}`}></i>
                    </div>
                    <div className="metric-content">
                      <div className="metric-value">{metric.value}</div>
                      <div className="metric-label">{metric.label}</div>
                    </div>
                  </div>
                ))}
              </div>

              {/* CTA Buttons */}
              <div className="hero-actions">
                <Link href={bannerData?.cta_link || "services"} className="btn-primary">
                  <span>View Enterprise Solutions</span>
                  <i className="fa-solid fa-arrow-right"></i>
                </Link>
                <Link href="contact-us" className="btn-secondary">
                  <span>Schedule Consultation</span>
                  <i className="fa-solid fa-calendar-check"></i>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Social Links */}
      <div className="social-links">
        <Link href="https://www.linkedin.com" target="_blank" className="social-link">
          <i className="fa-brands fa-linkedin-in"></i>
        </Link>
        <Link href="https://github.com" target="_blank" className="social-link">
          <i className="fa-brands fa-github"></i>
        </Link>
      </div>
    </section>
  );
};

export default AboutBanner;