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

const HomeBanner = () => {
  const [currentTextIndex, setCurrentTextIndex] = useState(0);
  const [isTransitioning, setIsTransitioning] = useState(false);
  
  // Fix viewport height for mobile browsers (especially iOS Safari)
  useEffect(() => {
    const setVH = () => {
      const vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    };
    
    setVH();
    window.addEventListener('resize', setVH);
    window.addEventListener('orientationchange', setVH);
    
    return () => {
      window.removeEventListener('resize', setVH);
      window.removeEventListener('orientationchange', setVH);
    };
  }, []);
  
  // Static banner slides data based on actual services
  const carouselTexts = [
    {
      id: 1,
      badge: "Custom Development",
      icon: "fa-solid fa-code",
      heading: "Tailored Enterprise Software ",
      highlight: "Development",
      subheading: "Aligned with Your Business Goals",
      description: "We design and build custom digital solutions that deliver reliable, scalable, and future-ready applications, driving measurable value and competitive advantage for your enterprise.",
      button_text: "Explore Solutions",
      button_url: "/services/custom-software-development",
      is_active: true,
      display_order: 1,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    },
    {
      id: 2,
      badge: "Business Intelligence",
      icon: "fa-solid fa-brain",
      heading: "AI-Powered ",
      highlight: "Analytics",
      subheading: "Transform Data into Insights",
      description: "Turn enterprise data into actionable intelligence with advanced AI and machine learning, enabling smarter decisions, performance optimization, and data-driven innovation.",
      button_text: "Discover AI Solutions",
      button_url: "/services/ai-powered-business-intelligence",
      is_active: true,
      display_order: 2,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    },
    {
      id: 3,
      badge: "System Integration",
      icon: "fa-solid fa-plug",
      heading: "Enterprise Systems ",
      highlight: "Integration",
      subheading: "Seamless Connectivity",
      description: "Connect everything — from payment systems and ERP platforms to cloud services, enabling your enterprise to operate seamlessly across physical and digital environments.",
      button_text: "View Integrations",
      button_url: "/services/external-systems-integrations",
      is_active: true,
      display_order: 3,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    },
    {
      id: 4,
      badge: "Incident Management",
      icon: "fa-solid fa-bell",
      heading: "Intelligent Incident ",
      highlight: "Management",
      subheading: "Minimize Downtime & Protect Trust",
      description: "Cloud-based incident management that empowers teams to detect, respond, and resolve issues faster, reducing downtime and maintaining customer confidence.",
      button_text: "Learn More",
      button_url: "/services/incident-management-saas",
      is_active: true,
      display_order: 4,
      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;