"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 { getValidImageUrl, FALLBACK_IMAGES } from "@/lib/imageUtils";
import thumb from "@/public/images/start-thumb.png";

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

  if (loading) {
    return (
      <section className="about-journey-section">
        <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>
    );
  }

  if (error) {
    return (
      <section className="about-journey-section">
        <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>
    );
  }

  const journeyData = data?.journey as AboutJourney | undefined;

  return (
    <section className="about-journey-section" suppressHydrationWarning>
      <div className="container">
        <div className="row g-3 align-items-start">
          {/* Image Column */}
          <div className="col-12 col-lg-6 order-1 order-lg-2">
            <div className="about-image-wrapper">
              <div className="about-image-container">
                {journeyData?.image_url ? (
                  <img
                    src={getValidImageUrl(journeyData.image_url, FALLBACK_IMAGES.DEFAULT)}
                    className="about-image"
                    alt="Enterprise Journey"
                    width={600}
                    height={700}
                  />
                ) : (
                  <Image
                    src={thumb}
                    className="about-image"
                    alt="Enterprise Journey"
                    width={600}
                    height={700}
                  />
                )}
                <div className="image-overlay"></div>
              </div>
            </div>
          </div>

          {/* Content Column */}
          <div className="col-12 col-lg-6 order-2 order-lg-1">
            <div className="about-content-wrapper">
              <div className="luxury-badge">
                <i className={journeyData?.badge_icon || "fa-solid fa-rocket"}></i>
                <span>{journeyData?.badge_text || "Our Journey"}</span>
              </div>
              
              <h2 className="luxury-title">
                {journeyData?.title || "Building Enterprise Excellence Since 2020"}
              </h2>
              
              <p className="luxury-description">
                {journeyData?.description || "Founded in 2020 in Burgas, Bulgaria, GNX Soft Ltd was established with a clear mission: to deliver world-class enterprise software solutions for mission-critical industries."}
              </p>

              <div className="luxury-milestones">
                {journeyData?.milestones && journeyData.milestones.length > 0 ? (
                  journeyData.milestones.map((milestone, index) => (
                    <div key={index} className="luxury-milestone-card">
                      <div className="milestone-year-badge">
                        <span>{milestone.year}</span>
                      </div>
                      <div className="milestone-content-wrapper">
                        <h6 className="milestone-title">{milestone.title}</h6>
                        <p className="milestone-description">{milestone.description}</p>
                      </div>
                    </div>
                  ))
                ) : (
                  <>
                    <div className="luxury-milestone-card">
                      <div className="milestone-year-badge">
                        <span>2020</span>
                      </div>
                      <div className="milestone-content-wrapper">
                        <h6 className="milestone-title">Company Founded</h6>
                        <p className="milestone-description">GNX Soft Ltd established in Burgas, Bulgaria</p>
                      </div>
                    </div>
                    <div className="luxury-milestone-card">
                      <div className="milestone-year-badge">
                        <span>2021</span>
                      </div>
                      <div className="milestone-content-wrapper">
                        <h6 className="milestone-title">Industry Specialization</h6>
                        <p className="milestone-description">Specialized in 8 mission-critical industries</p>
                      </div>
                    </div>
                  </>
                )}
              </div>

              <div className="luxury-cta">
                <Link href={journeyData?.cta_link || "services"} className="luxury-btn">
                  <span>{journeyData?.cta_text || "Explore Solutions"}</span>
                  <i className="fa-solid fa-arrow-right"></i>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutStarter;