"use client";
import Image from "next/image";
import Link from "next/link";
import { useAbout } from "@/lib/hooks/useAbout";
import { AboutService as AboutServiceType, AboutProcess } from "@/lib/api/aboutService";
import thumb from "@/public/images/service/two.png";
import thumbTwo from "@/public/images/service/three.png";

const AboutServiceComponent = () => {
  const { data, loading, error } = useAbout();

  // Show loading state
  if (loading) {
    return (
      <section className="tp-service pt-120 pb-120">
        <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 service content...</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Show error state
  if (error) {
    return (
      <section className="tp-service pt-120 pb-120">
        <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>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Use API data or fallback to default content
  const serviceData = data?.service as AboutServiceType | undefined;
  const processData = data?.process as AboutProcess | undefined;

  return (
    <section className="tp-service">
      <div className="container">
        <div className="row align-items-center">
          <div className="col-12 col-lg-5">
            <div className="tp-service__thumb">
              <Link href="service-single" className="w-100">
                <div className="parallax-image-wrap">
                  <div className="parallax-image-inner">
                    <Image
                      src={serviceData?.image_url || thumb}
                      className="w-100 parallax-image"
                      alt="Enterprise Technology Solutions"
                      width={400}
                      height={300}
                    />
                  </div>
                </div>
              </Link>
            </div>
          </div>
          <div className="col-12 col-lg-7 col-xl-6 offset-xl-1">
            <div className="tp-service__content">
              <div className="enterprise-badge">
                <i className={serviceData?.badge_icon || "fa-solid fa-users"}></i>
                {serviceData?.badge_text || "About Our Company"}
              </div>
              <h2 className="title-anim">
                {serviceData?.title || "GNX Soft Ltd. - Software Excellence"}
              </h2>
              <p>
                {serviceData?.description || "Founded in 2020, GNX Soft Ltd. has emerged as a premier enterprise software company, delivering mission-critical software solutions across various industries. Our team of expert engineers, architects, and consultants specializes in custom software development, data replication, incident management, and comprehensive system integrations that drive digital transformation and business growth."}
              </p>
              <div className="enterprise-features">
                <div className="row">
                  {serviceData?.features && serviceData.features.length > 0 ? (
                    serviceData.features.map((feature, index) => (
                      <div key={index} className="col-12 col-md-6">
                        <div className="feature-item">
                          <div className="feature-icon">
                            <i className={feature.icon}></i>
                          </div>
                          <div className="feature-content">
                            <h6>{feature.title}</h6>
                            <p>{feature.description}</p>
                          </div>
                        </div>
                      </div>
                    ))
                  ) : (
                    <>
                      <div className="col-12 col-md-6">
                        <div className="feature-item">
                          <div className="feature-icon">
                            <i className="fa-solid fa-shield-halved"></i>
                          </div>
                          <div className="feature-content">
                            <h6>Enterprise Security</h6>
                            <p>Defense-Grade Protection</p>
                          </div>
                        </div>
                      </div>
                      <div className="col-12 col-md-6">
                        <div className="feature-item">
                          <div className="feature-icon">
                            <i className="fa-solid fa-cloud"></i>
                          </div>
                          <div className="feature-content">
                            <h6>Cloud Native</h6>
                            <p>AWS, Azure, GCP Partners</p>
                          </div>
                        </div>
                      </div>
                      <div className="col-12 col-md-6">
                        <div className="feature-item">
                          <div className="feature-icon">
                            <i className="fa-solid fa-certificate"></i>
                          </div>
                          <div className="feature-content">
                            <h6>Certified Experts</h6>
                            <p>Microsoft, AWS, Google Certified</p>
                          </div>
                        </div>
                      </div>
                      <div className="col-12 col-md-6">
                        <div className="feature-item">
                          <div className="feature-icon">
                            <i className="fa-solid fa-globe"></i>
                          </div>
                          <div className="feature-content">
                            <h6>Global Reach</h6>
                            <p>Based in Bulgaria, Serving Worldwide</p>
                          </div>
                        </div>
                      </div>
                    </>
                  )}
                </div>
              </div>
              <div className="mt-4">
                <Link href={serviceData?.cta_link || "service-single"} className="btn-line">
                  {serviceData?.cta_text || "Explore Our Solutions"}
                </Link>
              </div>
            </div>
          </div>
        </div>
        <div className="row align-items-center">
          <div className="col-12 col-lg-6">
            <div className="tp-service__content">
              <div className="enterprise-badge">
                <i className={processData?.badge_icon || "fa-solid fa-cogs"}></i>
                {processData?.badge_text || "Our Methodology"}
              </div>
              <h2 className="title-anim">
                {processData?.title || "Enterprise Development Process"}
              </h2>
              <p>
                {processData?.description || "Our proven enterprise development methodology combines agile practices with enterprise-grade security, scalability, and compliance requirements. We follow industry best practices including DevOps, CI/CD, and microservices architecture to deliver robust, scalable solutions."}
              </p>
              <div className="process-steps">
                <div className="row">
                  {processData?.steps && processData.steps.length > 0 ? (
                    processData.steps.map((step, index) => (
                      <div key={index} className="col-12 col-md-6">
                        <div className="process-step">
                          <div className="step-number">{step.step_number}</div>
                          <div className="step-content">
                            <h6>{step.title}</h6>
                            <p>{step.description}</p>
                          </div>
                        </div>
                      </div>
                    ))
                  ) : (
                    <>
                      <div className="col-12 col-md-6">
                        <div className="process-step">
                          <div className="step-number">01</div>
                          <div className="step-content">
                            <h6>Discovery & Planning</h6>
                            <p>Comprehensive analysis and architecture design</p>
                          </div>
                        </div>
                      </div>
                      <div className="col-12 col-md-6">
                        <div className="process-step">
                          <div className="step-number">02</div>
                          <div className="step-content">
                            <h6>Development & Testing</h6>
                            <p>Agile development with continuous testing</p>
                          </div>
                        </div>
                      </div>
                      <div className="col-12 col-md-6">
                        <div className="process-step">
                          <div className="step-number">03</div>
                          <div className="step-content">
                            <h6>Deployment & Integration</h6>
                            <p>Seamless deployment and system integration</p>
                          </div>
                        </div>
                      </div>
                      <div className="col-12 col-md-6">
                        <div className="process-step">
                          <div className="step-number">04</div>
                          <div className="step-content">
                            <h6>Support & Maintenance</h6>
                            <p>24/7 enterprise support and maintenance</p>
                          </div>
                        </div>
                      </div>
                    </>
                  )}
                </div>
              </div>
              <div className="mt-4">
                <Link href={processData?.cta_link || "service-single"} className="btn-line">
                  {processData?.cta_text || "View Our Services"}
                </Link>
              </div>
            </div>
          </div>
          <div className="col-12 col-lg-6">
            <div className="tp-service__thumb">
              <Link href="service-single" className="w-100">
                <div className="parallax-image-wrap">
                  <div className="parallax-image-inner">
                    <Image
                      src={processData?.image_url || thumbTwo}
                      className="w-100 parallax-image"
                      alt="Enterprise Development Process"
                      width={400}
                      height={300}
                    />
                  </div>
                </div>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutServiceComponent;