"use client";

import Image from "next/image";
import { useEffect, useRef, useState } from "react";

const journey = [
  { n: "01", t: "Roots", d: "Homes, festivals and family in Uttar Pradesh, the culture we carry within, preserving traditions and strengthening bonds.", img: "/img/home_10_.jpg" },
  { n: "02", t: "Migration", d: "New jobs, new cities, new beginnings — arriving in North Texas with hope, ambition, and opportunity.", img: "/img/home_14_.jpg" },
  { n: "03", t: "Community", d: "A WhatsApp message becomes friendship. Friendship becomes parivaar, creating lifelong bonds, trust, memories and community together.", img: "/img/home_9_.jpg" },
  { n: "04", t: "Growth", d: "Thousands of families, dozens of events, and a trusted network fostering connections, support, and belonging.", img: "/img/home_6_.jpg" },
  { n: "05", t: "Digital Future", d: "A private digital home with AI memory, preserving stories, connections, milestones, and cherished family moments.", img: "/img/home_5_.jpg" },
  { n: "06", t: "Global Impact", d: "A borderless network fostering innovation, connection, cultural pride, collaboration, and meaningful relationships worldwide.", img: "/img/home_7_.jpg" },
];

export default function HomeJourney() {
  const [active, setActive] = useState(0);
  const stepRefs = useRef<(HTMLDivElement | null)[]>([]);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const idx = Number((entry.target as HTMLElement).dataset.index);
            if (!Number.isNaN(idx)) setActive(idx);
          }
        });
      },
      // A step becomes active once it crosses the vertical centre of the viewport.
      { rootMargin: "-45% 0px -45% 0px", threshold: 0 }
    );
    stepRefs.current.forEach((el) => el && observer.observe(el));
    return () => observer.disconnect();
  }, []);

  return (
    <section className="section-white">
      <div className="container home-journey">
        <div className="home-journey__media">
          <span className="eyebrow">UP Parivaar</span>
          <h2 className="display-title ts-34-42 home-journey__title">
            From the banks of the Ganga to the heart of Texas
          </h2>
          <p className="home-journey__lead">
            Every family carries a journey. Ours began thousands of miles away — and
            it continues here, together, as one parivaar.
          </p>
          <div className="home-journey__photo">
            <Image src="/img/home-journey__photo.png" alt="Diwali at home" fill className="img-cover" sizes="320px" />
          </div>
        </div>

        <div className="home-journey__timeline">
          <span className="home-journey__line" />
          {journey.map((j, i) => (
            <div
              key={j.n}
              data-index={i}
              ref={(el) => {
                stepRefs.current[i] = el;
              }}
              className={`home-journey__item ${i === active ? "home-journey__item--active" : ""}`}
            >
              <div className="home-journey__step-media">
                <Image
                  src={j.img}
                  alt={j.t}
                  fill
                  className="img-cover"
                  sizes="(max-width:1024px) 100vw, 600px"
                />
              </div>
              <div className="home-journey__step">
                <span className="home-journey__num">{j.n}</span>
                <h3 className="home-journey__step-title">{j.t}</h3>
                <p className="home-journey__step-desc">{j.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}