"use client";

const SupportCenterHero = () => {
  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-4 justify-content-center">
                  <div className="col-md-4">
                    <div className="feature-item">
                      <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-md-4">
                    <div className="feature-item">
                      <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-md-4">
                    <div className="feature-item">
                      <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>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SupportCenterHero;