"use client";

import { useEffect, useState, type CSSProperties } from "react";
import "./rolling-headline.css";

const phrases = [
  { first: "Complexity", second: "Clarity" },
  { first: "Clarity", second: "Insights" },
  { first: "Insights", second: "Decisions" },
];

const CYCLE_MS = 3200;
const FADE_MS = 300;

export function RollingHeadline() {
  const [index, setIndex] = useState(0);
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const interval = setInterval(() => {
      setVisible(false);
      const timeout = setTimeout(() => {
        setIndex((prev) => (prev + 1) % phrases.length);
        setVisible(true);
      }, FADE_MS);
      return () => clearTimeout(timeout);
    }, CYCLE_MS);
    return () => clearInterval(interval);
  }, []);

  const { first, second } = phrases[index];
  const baseWordStyle: CSSProperties = {
    opacity: visible ? 1 : 0,
    transition: `opacity ${FADE_MS}ms ease`,
    display: "inline-block",
  };
  // Pinned, not var(--brand-bright): this headline sits on the Hero's fixed
  // 3D scene, which stays dark regardless of site theme, while --brand-bright
  // itself now adapts to light mode elsewhere on the page.
  const firstWordStyle: CSSProperties = {
    ...baseWordStyle,
    color: "#5fb56c",
  };
  const secondWordStyle: CSSProperties = {
    ...baseWordStyle,
    color: "#5fb56c",
  };

  return (
    <h1 className="pw-user-text-style-6ae56f11-b178-4dd1-8bf0-1f16cb6f2a2e" id="ispyh-2-2">
      <span className="rolling-headline-label rolling-headline-label-turn">Turn</span>
      <span style={firstWordStyle}>{first}</span>
      <span className="rolling-headline-label rolling-headline-label-into">&nbsp;Into</span>
      <span style={secondWordStyle}>{second}</span>
    </h1>
  );
}