// Section introducer — a horizontal beam grows from the rail into each section,
// with a shu key block landing at its tip and the label fading in.

const SectionIntroducer = ({ label, number, dark = false }) => {
  const ref = React.useRef(null);
  const enter = useEnter(ref, { start: 0.85, end: 0.5 });

  const beamP = easeOut(Math.max(0, Math.min(1, enter / 0.6)));
  const keyP = easeOut(Math.max(0, Math.min(1, (enter - 0.5) / 0.35)));
  const labelP = easeOut(Math.max(0, Math.min(1, (enter - 0.65) / 0.35)));

  const beamLen = beamP * 56;
  const labelTransform = `translateY(${(1 - labelP) * 6}px)`;

  return (
    <div
      ref={ref}
      style={{
        position: "relative",
        marginLeft: "-32px",
        marginBottom: "32px",
        height: "32px",
        display: "flex",
        alignItems: "center",
        gap: "12px",
      }}
    >
      <div
        style={{
          width: `${beamLen}px`,
          height: "1px",
          background: dark ? "#C9A878" : "#1B2845",
          flexShrink: 0,
          transformOrigin: "left center",
          transition: "none",
        }}
      />
      <div
        style={{
          width: "10px",
          height: "10px",
          background: "#B04A3A",
          opacity: keyP,
          transform: `scale(${0.5 + 0.5 * keyP})`,
          flexShrink: 0,
          transition: "none",
        }}
      />
      <div
        style={{
          display: "flex",
          gap: "12px",
          alignItems: "center",
          opacity: labelP,
          transform: labelTransform,
          transformOrigin: "left center",
          transition: "none",
        }}
      >
        {number && (
          <span style={{
            fontFamily: '"IBM Plex Mono", monospace',
            fontSize: "11px",
            color: "#8B8276",
            letterSpacing: "1.5px",
          }}>
            {number}
          </span>
        )}
        <span style={{
          fontFamily: '"IBM Plex Mono", monospace',
          fontSize: "11px",
          letterSpacing: "1.5px",
          color: dark ? "#FAF7F0" : "#1A1613",
          textTransform: "uppercase",
        }}>
          {label}
        </span>
      </div>
    </div>
  );
};

Object.assign(window, { SectionIntroducer });