GNX-WEB/gnx-react/components/pages/about/AboutStarter.tsx

"use client";
import Image from "next/image";
import Link from "next/link";
import { useAbout } from "@/lib/hooks/useAbout";
import { AboutJourney } from "@/lib/api/aboutService";
import thumb from "@/public/images/start-thumb.png";

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

  // Show loading state
  if (loading) {
    return (
      <section className="tp-gallery pt-120 bg-black position-relative overflow-x-clip">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="text-center py-5">
                <div className="spinner-border text-light" role="status">
                  <span className="visually-hidden">Loading...</span>
                </div>
                <p className="mt-3 text-white">Loading journey content...</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Show error state
  if (error) {
    return (
      <section className="tp-gallery pt-120 bg-black position-relative overflow-x-clip">
        <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 journeyData = data?.journey as AboutJourney | undefined;

  return (
    <section className="tp-gallery">
      <div className="container">
        <div className="row align-items-center">
          <div className="col-12 col-lg-6">
            <div className="tp-gallery__content">
              <div className="enterprise-badge">
                <i className={journeyData?.badge_icon || "fa-solid fa-rocket"}></i>
                {journeyData?.badge_text || "Our Journey"}
              </div>
              <h2 className="title-anim">
                {journeyData?.title || "From Startup to Enterprise Leader"}
              </h2>
              <p>
                {journeyData?.description || "Founded in 2008 by three visionary engineers, Itify Technologies began as a small startup with a big dream: to revolutionize how enterprises approach software development. What started as a passion project has grown into a global enterprise software company serving Fortune 500 clients worldwide."}
              </p>
              <div className="journey-milestones">
                {journeyData?.milestones && journeyData.milestones.length > 0 ? (
                  journeyData.milestones.map((milestone, index) => (
                    <div key={index} className="milestone-item">
                      <div className="milestone-year">
                        <span className="year-badge">{milestone.year}</span>
                      </div>
                      <div className="milestone-content">
                        <h6>{milestone.title}</h6>
                        <p>{milestone.description}</p>
                      </div>
                    </div>
                  ))
                ) : (
                  <>
                    <div className="milestone-item">
                      <div className="milestone-year">
                        <span className="year-badge">2008</span>
                      </div>
                      <div className="milestone-content">
                        <h6>Company Founded</h6>
                        <p>Started with 3 engineers</p>
                      </div>
                    </div>
                    <div className="milestone-item">
                      <div className="milestone-year">
                        <span className="year-badge">2015</span>
                      </div>
                      <div className="milestone-content">
                        <h6>Enterprise Focus</h6>
                        <p>Pivoted to enterprise solutions</p>
                      </div>
                    </div>
                    <div className="milestone-item">
                      <div className="milestone-year">
                        <span className="year-badge">2020</span>
                      </div>
                      <div className="milestone-content">
                        <h6>Global Expansion</h6>
                        <p>Opened offices in 5 countries</p>
                      </div>
                    </div>
                  </>
                )}
              </div>
              <div className="mt-4">
                <Link
                  href={journeyData?.cta_link || "services"}
                  className="btn-line"
                >
                  {journeyData?.cta_text || "Explore Solutions"}
                </Link>
              </div>
            </div>
          </div>
          <div className="col-12 col-lg-6">
            <div className="tp-gallery__thumb">
              <Image
                src={journeyData?.image_url || thumb}
                className="w-100"
                alt="Enterprise Journey"
                width={500}
                height={400}
                style={{
                  objectFit: 'contain',
                  borderRadius: '12px',
                  boxShadow: '0 20px 40px rgba(0, 0, 0, 0.1)',
                  maxWidth: '100%',
                  maxHeight: '500px',
                  width: '100%',
                  height: 'auto'
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutStarter;