"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 || "Enterprise Technology Leaders"}
              </h2>
              <p>
                {serviceData?.description || "Founded 2008, EnterpriseSoft Solutions has emerged as a premier enterprise software company, serving Fortune 500 companies and innovative startups worldwide. Our team of 200+ engineers, architects, and consultants specializes in delivering mission-critical software solutions 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>Offices in 5 Countries</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;