import { useEffect, useRef, useState } from "react";

const philosophyStatements = [
  "Simplicity beats complexity.",
  "Discipline over timing.",
  "Growth compounds quietly.",
  "Patience is the strategy.",
];

export default function PhilosophySection() {
  const sectionRef = useRef<HTMLDivElement>(null);
  const [visibleLines, setVisibleLines] = useState<number[]>([]);
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          const index = parseInt(entry.target.getAttribute("data-index") || "0");
          if (entry.isIntersecting) {
            setVisibleLines((prev) => {
              if (!prev.includes(index)) {
                return [...prev, index];
              }
              return prev;
            });
            setActiveIndex(index);
          }
        });
      },
      { threshold: 0.5, rootMargin: "-10% 0px" }
    );

    const lines = sectionRef.current?.querySelectorAll("[data-index]");
    lines?.forEach((line) => observer.observe(line));

    return () => observer.disconnect();
  }, []);

  return (
    <section
      ref={sectionRef}
      id="philosophy"
      className="py-32 px-6 relative overflow-hidden"
      data-testid="section-philosophy"
    >
      <div className="absolute inset-0 pointer-events-none">
        <div 
          className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-32 bg-gradient-to-b from-transparent via-primary/50 to-transparent transition-all duration-700"
          style={{
            top: `${25 + activeIndex * 15}%`,
          }}
        />
      </div>

      <div className="max-w-4xl mx-auto">
        <p className="text-sm uppercase tracking-widest text-muted-foreground mb-12 text-center">
          Our Philosophy
        </p>
        <div className="space-y-12">
          {philosophyStatements.map((statement, index) => (
            <div
              key={index}
              data-index={index}
              className={`transition-all duration-1000 ease-out relative ${
                visibleLines.includes(index)
                  ? "opacity-100 translate-y-0"
                  : "opacity-0 translate-y-12"
              }`}
              style={{ transitionDelay: `${index * 150}ms` }}
            >
              <div 
                className={`absolute -left-8 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full transition-all duration-500 ${
                  activeIndex === index ? "bg-primary scale-100" : "bg-muted-foreground/30 scale-75"
                }`}
              />
              <p
                className={`text-3xl md:text-5xl font-semibold text-center leading-tight transition-all duration-500 ${
                  activeIndex === index ? "text-foreground" : "text-muted-foreground/60"
                }`}
                data-testid={`text-philosophy-${index}`}
              >
                {statement.split("").map((char, charIndex) => (
                  <span
                    key={charIndex}
                    className={`inline-block transition-all duration-300 ${
                      visibleLines.includes(index) ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"
                    }`}
                    style={{ 
                      transitionDelay: `${index * 150 + charIndex * 15}ms`,
                    }}
                  >
                    {char === " " ? "\u00A0" : char}
                  </span>
                ))}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
