"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();

  // 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 about-compact">
      <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 2020 by three visionary engineers, GNX 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="cta-wrap">
                <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">
              {journeyData?.image_url ? (
                <img
                  src={getValidImageUrl(journeyData.image_url, FALLBACK_IMAGES.DEFAULT)}
                  className="w-100 compact-img"
                  alt="Enterprise Journey"
                  width={500}
                  height={400}
                />
              ) : (
                <Image
                  src={thumb}
                  className="w-100 compact-img"
                  alt="Enterprise Journey"
                  width={500}
                  height={400}
                />
              )}
            </div>
          </div>
        </div>
      </div>
      <style jsx>{`
        .about-compact {
          padding: 32px 0;
        }

        /* Typography */
        .about-compact .enterprise-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 4px 10px;
          border-radius: 999px;
          font-size: 12px;
          line-height: 1;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.08);
          color: #fff;
          margin-bottom: 10px;
        }
        .about-compact .enterprise-badge i { font-size: 12px; }

        .about-compact .title-anim {
          font-size: clamp(20px, 2.2vw, 28px);
          line-height: 1.25;
          margin: 0 0 8px 0;
        }
        .about-compact p {
          font-size: 14px;
          line-height: 1.55;
          margin: 0 0 12px 0;
          color: rgba(255,255,255,0.85);
        }

        /* Milestones */
        .about-compact .journey-milestones {
          display: grid;
          grid-template-columns: 1fr;
          gap: 10px;
        }
        @media (min-width: 992px) {
          .about-compact .journey-milestones { grid-template-columns: 1fr 1fr; }
        }
        .about-compact .milestone-item {
          display: grid;
          grid-template-columns: auto 1fr;
          align-items: start;
          gap: 10px;
          padding: 10px 12px;
          border: 1px solid rgba(255,255,255,0.08);
          background: rgba(255,255,255,0.03);
          border-radius: 10px;
        }
        .about-compact .year-badge {
          display: inline-block;
          padding: 4px 8px;
          font-size: 12px;
          line-height: 1;
          border-radius: 6px;
          background: rgba(255,255,255,0.08);
          color: #fff;
          white-space: nowrap;
        }
        .about-compact .milestone-content h6 {
          margin: 0 0 4px 0;
          font-size: 14px;
          line-height: 1.3;
        }
        .about-compact .milestone-content p {
          margin: 0;
          font-size: 13px;
          color: rgba(255,255,255,0.75);
        }

        /* CTA */
        .about-compact .cta-wrap { margin-top: 12px; }
        .about-compact :global(.btn-line) {
          padding: 8px 14px;
          font-size: 13px;
          line-height: 1;
        }

        /* Image */
        .about-compact .tp-gallery__thumb { margin-top: 8px; }
        @media (min-width: 992px) {
          .about-compact .tp-gallery__thumb { margin-top: 0; }
        }
        .about-compact :global(.compact-img),
        .about-compact .compact-img {
          border-radius: 10px;
          box-shadow: 0 8px 24px rgba(0,0,0,0.25);
          max-height: 260px;
          width: 100%;
          height: auto;
          object-fit: contain;
        }
      `}</style>
    </section>
  );
};

export default AboutStarter;