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

const HomeBanner = () => {
  const [currentTextIndex, setCurrentTextIndex] = useState(0);
  const [isTransitioning, setIsTransitioning] = useState(false);
  
  // Static banner slides data
  const carouselTexts = [
    {
      id: 1,
      badge: "Enterprise Solutions",
      icon: "fa-solid fa-shield-halved",
      heading: "Secure Enterprise Software",
      highlight: "Development",
      subheading: "for Modern Businesses",
      description: "We build enterprise-grade software solutions with advanced security, scalability, and 24/7 support. Transform your business with our custom development services.",
      button_text: "Explore Solutions",
      button_url: "/services",
      is_active: true,
      display_order: 1,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    },
    {
      id: 2,
      badge: "API Integration",
      icon: "fa-solid fa-plug",
      heading: "Seamless API",
      highlight: "Integration",
      subheading: "& System Connectivity",
      description: "Connect all your systems with our robust API development and integration services. Enable smooth data flow and unified workflows across your organization.",
      button_text: "Learn More",
      button_url: "/services/api-development",
      is_active: true,
      display_order: 2,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    },
    {
      id: 3,
      badge: "Cloud Migration",
      icon: "fa-solid fa-cloud",
      heading: "Cloud-First",
      highlight: "Solutions",
      subheading: "for Enterprise Scale",
      description: "Migrate to the cloud with confidence. Our cloud solutions provide improved scalability, security, and cost-effectiveness for your enterprise operations.",
      button_text: "Start Migration",
      button_url: "/services/cloud-solutions",
      is_active: true,
      display_order: 3,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    }
  ];

  // Carousel rotation effect
  useEffect(() => {
    if (carouselTexts.length <= 1) return;

    const interval = setInterval(() => {
      setIsTransitioning(true);
      
      setTimeout(() => {
        setCurrentTextIndex((prevIndex) => 
          prevIndex === carouselTexts.length - 1 ? 0 : prevIndex + 1
        );
        setIsTransitioning(false);
      }, 1000); // Slightly longer for smoother transition
    }, 6000); // Increased interval for slower changes

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

  const currentText = carouselTexts[currentTextIndex];

  if (!currentText) {
    return null;
  }

  return (
    <>
      <section className="modern-banner">
        <div className="banner-background">
          <div className="gradient-orb orb-1"></div>
          <div className="gradient-orb orb-2"></div>
          <div className="gradient-orb orb-3"></div>
          
          {/* Industrial Enterprise Background Elements */}
          <div className="enterprise-bg-elements">
            {/* Flying Code Elements */}
            <div className="flying-code">
              <div className="code-snippet code-1">
                <span className="code-line">const enterprise = {'{'}</span>
                <span className="code-line">  security: &apos;enterprise-grade&apos;,</span>
                <span className="code-line">  scalability: &apos;unlimited&apos;</span>
                <span className="code-line">{'}'};</span>
              </div>
              <div className="code-snippet code-2">
                <span className="code-line">if (security === &apos;max&apos;) {'{'}</span>
                <span className="code-line">  deploy.enterprise();</span>
                <span className="code-line">{'}'}</span>
              </div>
              <div className="code-snippet code-3">
                <span className="code-line">class EnterpriseSoftware {'{'}</span>
                <span className="code-line">  constructor() {'{'}</span>
                <span className="code-line">    this.secure = true;</span>
                <span className="code-line">  {'}'}</span>
                <span className="code-line">{'}'}</span>
              </div>
              <div className="code-snippet code-4">
                <span className="code-line">API.authenticate({'{'}</span>
                <span className="code-line">  level: &apos;enterprise&apos;,</span>
                <span className="code-line">  encryption: &apos;AES-256&apos;</span>
                <span className="code-line">{'}'});</span>
              </div>
            </div>
            
            {/* Industrial Grid */}
            <div className="industrial-grid">
              <div className="grid-line horizontal h-1"></div>
              <div className="grid-line horizontal h-2"></div>
              <div className="grid-line horizontal h-3"></div>
              <div className="grid-line horizontal h-4"></div>
              <div className="grid-line vertical v-1"></div>
              <div className="grid-line vertical v-2"></div>
              <div className="grid-line vertical v-3"></div>
              <div className="grid-line vertical v-4"></div>
            </div>
            
            {/* Security Elements */}
            <div className="security-elements">
              <div className="shield shield-1">
                <i className="fa-solid fa-shield-halved"></i>
              </div>
              <div className="shield shield-2">
                <i className="fa-solid fa-lock"></i>
              </div>
              <div className="shield shield-3">
                <i className="fa-solid fa-key"></i>
              </div>
              <div className="shield shield-4">
                <i className="fa-solid fa-fingerprint"></i>
              </div>
            </div>
            
            {/* Circuit Patterns */}
            <div className="circuit-patterns">
              <div className="circuit circuit-1">
                <div className="circuit-node"></div>
                <div className="circuit-line"></div>
                <div className="circuit-node"></div>
              </div>
              <div className="circuit circuit-2">
                <div className="circuit-node"></div>
                <div className="circuit-line"></div>
                <div className="circuit-node"></div>
                <div className="circuit-line"></div>
                <div className="circuit-node"></div>
              </div>
              <div className="circuit circuit-3">
                <div className="circuit-node"></div>
                <div className="circuit-line"></div>
                <div className="circuit-node"></div>
              </div>
            </div>
            
            {/* Data Streams */}
            <div className="data-streams">
              <div className="stream stream-1">
                <div className="data-bit"></div>
                <div className="data-bit"></div>
                <div className="data-bit"></div>
                <div className="data-bit"></div>
              </div>
              <div className="stream stream-2">
                <div className="data-bit"></div>
                <div className="data-bit"></div>
                <div className="data-bit"></div>
                <div className="data-bit"></div>
                <div className="data-bit"></div>
              </div>
              <div className="stream stream-3">
                <div className="data-bit"></div>
                <div className="data-bit"></div>
                <div className="data-bit"></div>
              </div>
            </div>
            
            {/* Request/Response Data */}
            <div className="request-response-data">
              <div className="api-request req-1">
                <div className="request-label">POST /api/enterprise</div>
                <div className="request-data">
                  <div className="data-packet"></div>
                  <div className="data-packet"></div>
                  <div className="data-packet"></div>
                </div>
              </div>
              <div className="api-response resp-1">
                <div className="response-label">200 OK</div>
                <div className="response-data">
                  <div className="data-packet"></div>
                  <div className="data-packet"></div>
                  <div className="data-packet"></div>
                  <div className="data-packet"></div>
                </div>
              </div>
              <div className="api-request req-2">
                <div className="request-label">GET /api/analytics</div>
                <div className="request-data">
                  <div className="data-packet"></div>
                  <div className="data-packet"></div>
                </div>
              </div>
              <div className="api-response resp-2">
                <div className="response-label">201 Created</div>
                <div className="response-data">
                  <div className="data-packet"></div>
                  <div className="data-packet"></div>
                  <div className="data-packet"></div>
                </div>
              </div>
            </div>
            
            {/* Space Data Generation */}
            <div className="space-data-generation">
              <div className="data-cluster cluster-1">
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
              </div>
              <div className="data-cluster cluster-2">
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
              </div>
              <div className="data-cluster cluster-3">
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
              </div>
              <div className="data-cluster cluster-4">
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
                <div className="data-point"></div>
              </div>
            </div>
            
            {/* Database Connections */}
            <div className="database-connections">
              <div className="db-connection conn-1">
                <div className="connection-line"></div>
                <div className="db-node">
                  <i className="fa-solid fa-database"></i>
                </div>
                <div className="connection-pulse"></div>
              </div>
              <div className="db-connection conn-2">
                <div className="connection-line"></div>
                <div className="db-node">
                  <i className="fa-solid fa-server"></i>
                </div>
                <div className="connection-pulse"></div>
              </div>
              <div className="db-connection conn-3">
                <div className="connection-line"></div>
                <div className="db-node">
                  <i className="fa-solid fa-cloud"></i>
                </div>
                <div className="connection-pulse"></div>
              </div>
            </div>
            
            {/* Real-time Metrics */}
            <div className="real-time-metrics">
              <div className="metric metric-1">
                <div className="metric-label">API Calls/sec</div>
                <div className="metric-value">2,847</div>
                <div className="metric-bar">
                  <div className="bar-fill"></div>
                </div>
              </div>
              <div className="metric metric-2">
                <div className="metric-label">Data Processed</div>
                <div className="metric-value">15.2TB</div>
                <div className="metric-bar">
                  <div className="bar-fill"></div>
                </div>
              </div>
              <div className="metric metric-3">
                <div className="metric-label">Active Users</div>
                <div className="metric-value">45,892</div>
                <div className="metric-bar">
                  <div className="bar-fill"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div className="container">
          <div className="banner-content">
            <div className="content-center">
              <div className="badge-container">
                <span className="badge">
                  <i className={currentText.icon}></i>
                  {currentText.badge}
                </span>
              </div>
              
              <h1 className={`main-heading carousel-text ${isTransitioning ? 'fade-out' : 'fade-in'}`}>
                {currentText.heading}
                <span className="gradient-text"> {currentText.highlight}</span>
                <br />
                {currentText.subheading}
              </h1>
              
              <p className={`description carousel-text ${isTransitioning ? 'fade-out' : 'fade-in'}`}>
                {currentText.description}
              </p>
              
              {/* Carousel Indicators */}
              <div className="carousel-indicators">
                {carouselTexts.map((_, index) => (
                  <button
                    key={index}
                    className={`indicator ${index === currentTextIndex ? 'active' : ''}`}
                    onClick={() => {
                      if (index !== currentTextIndex) {
                        setIsTransitioning(true);
                        setTimeout(() => {
                          setCurrentTextIndex(index);
                          setIsTransitioning(false);
                        }, 1000);
                      }
                    }}
                  />
                ))}
              </div>
              
              <div className="cta-section">
                <Link href={currentText.button_url || "#"} className="cta-primary">
                  <span>{currentText.button_text || "Learn More"}</span>
                  <i className="fa-solid fa-arrow-right"></i>
                </Link>
                <Link href="contact-us" className="cta-secondary">
                  <i className="fa-solid fa-phone"></i>
                  <span>Contact Sales</span>
                </Link>
              </div>
              
              <div className="trust-indicators">
                <div className="trust-item">
                  <div className="trust-number">30+</div>
                  <div className="trust-label">Enterprise Clients</div>
                </div>
                <div className="trust-item">
                  <div className="trust-number">99.9%</div>
                  <div className="trust-label">Uptime SLA</div>
                </div>
                <div className="trust-item">
                  <div className="trust-number">24/7</div>
                  <div className="trust-label">Enterprise Support</div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
        
        
        <div className="scroll-indicator" onClick={() => window.scrollTo({ top: window.innerHeight, behavior: 'smooth' })}>
          <div className="scroll-text">Scroll to explore</div>
          <div className="scroll-arrow">
            <i className="fa-solid fa-chevron-down"></i>
          </div>
        </div>
      </section>
    </>
  );
};

export default HomeBanner;