"use client";
import Link from "next/link";

type ModalType = 'create' | 'knowledge' | 'status' | null;

interface SupportCenterHeroProps {
  onFeatureClick: (type: ModalType) => void;
}

const SupportCenterHero = ({ onFeatureClick }: SupportCenterHeroProps) => {
  return (
    <section className="support-hero">
      {/* Animated Background */}
      <div className="hero-background">
        {/* Floating Support Icons */}
        <div className="floating-tech tech-1">
          <i className="fa-solid fa-headset"></i>
        </div>
        <div className="floating-tech tech-2">
          <i className="fa-solid fa-ticket"></i>
        </div>
        <div className="floating-tech tech-3">
          <i className="fa-solid fa-book"></i>
        </div>
        <div className="floating-tech tech-4">
          <i className="fa-solid fa-comments"></i>
        </div>
        <div className="floating-tech tech-5">
          <i className="fa-solid fa-life-ring"></i>
        </div>
        <div className="floating-tech tech-6">
          <i className="fa-solid fa-user-shield"></i>
        </div>

        {/* Grid Pattern */}
        <div className="grid-overlay"></div>

        {/* Animated Gradient Orbs */}
        <div className="gradient-orb orb-1"></div>
        <div className="gradient-orb orb-2"></div>
        <div className="gradient-orb orb-3"></div>

        {/* Video 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="support-hero__content text-center">
              <h1 className="support-hero__title">
                Support Center
              </h1>
              <p className="support-hero__subtitle">
                Get expert assistance whenever you need it. Our dedicated support team is here to help you succeed.
              </p>
              
              <div className="support-hero__features">
                <div className="row g-3 g-md-4 g-lg-5 justify-content-center">
                  <div className="col-12 col-sm-6 col-md-6 col-lg-4">
                    <div 
                      className="feature-item clickable" 
                      onClick={() => onFeatureClick('create')}
                      role="button"
                      tabIndex={0}
                      onKeyDown={(e) => e.key === 'Enter' && onFeatureClick('create')}
                    >
                      <div className="feature-icon">
                        <i className="fa-solid fa-ticket"></i>
                      </div>
                      <h3>Submit Tickets</h3>
                      <p>Create and track support requests</p>
                    </div>
                  </div>
                  <div className="col-12 col-sm-6 col-md-6 col-lg-4">
                    <div 
                      className="feature-item clickable" 
                      onClick={() => onFeatureClick('knowledge')}
                      role="button"
                      tabIndex={0}
                      onKeyDown={(e) => e.key === 'Enter' && onFeatureClick('knowledge')}
                    >
                      <div className="feature-icon">
                        <i className="fa-solid fa-book"></i>
                      </div>
                      <h3>Knowledge Base</h3>
                      <p>Find answers to common questions</p>
                    </div>
                  </div>
                  <div className="col-12 col-sm-6 col-md-6 col-lg-4">
                    <div 
                      className="feature-item clickable" 
                      onClick={() => onFeatureClick('status')}
                      role="button"
                      tabIndex={0}
                      onKeyDown={(e) => e.key === 'Enter' && onFeatureClick('status')}
                    >
                      <div className="feature-icon">
                        <i className="fa-solid fa-search"></i>
                      </div>
                      <h3>Track Status</h3>
                      <p>Monitor your ticket progress</p>
                    </div>
                  </div>
                  <div className="col-12 col-sm-6 col-md-6 col-lg-4">
                    <Link 
                      href="/policy?type=privacy" 
                      className="feature-item clickable link-item"
                    >
                      <div className="feature-icon">
                        <i className="fa-solid fa-shield-halved"></i>
                      </div>
                      <h3>Privacy Policy</h3>
                      <p>Learn about data protection</p>
                    </Link>
                  </div>
                  <div className="col-12 col-sm-6 col-md-6 col-lg-4">
                    <Link 
                      href="/policy?type=terms" 
                      className="feature-item clickable link-item"
                    >
                      <div className="feature-icon">
                        <i className="fa-solid fa-file-contract"></i>
                      </div>
                      <h3>Terms of Use</h3>
                      <p>Review our service terms</p>
                    </Link>
                  </div>
                  <div className="col-12 col-sm-6 col-md-6 col-lg-4">
                    <Link 
                      href="/policy?type=support" 
                      className="feature-item clickable link-item"
                    >
                      <div className="feature-icon">
                        <i className="fa-solid fa-headset"></i>
                      </div>
                      <h3>Support Policy</h3>
                      <p>Understand our support coverage</p>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SupportCenterHero;