'use client';

import { ChevronDown } from 'lucide-react';
import { useEffect, useState } from 'react';

/**
 * Scroll cue — a fixed pill anchored to the bottom of the viewport that
 * points the visitor down to the flow video below the hero. Fades out
 * once the user has scrolled past the loadscreen so it doesn't follow
 * them around the page.
 *
 * Lives at z-30 so it sits above the hero content but below modals.
 * The frosted pill (backdrop-blur + border) reads clearly against the
 * particle background without stealing focus from the H1.
 */
export function ScrollCue({ targetId }: { targetId: string }) {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    function onScroll() {
      setVisible(window.scrollY < 80);
    }
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <a
      href={`#${targetId}`}
      aria-label="See the flow in action"
      className={`fixed inset-x-0 bottom-5 z-30 mx-auto flex w-fit items-center gap-1.5 rounded-full border border-[--color-border] px-3 py-1.5 text-[10.5px] uppercase tracking-[0.18em] text-[--color-fg-subtle] backdrop-blur transition-opacity duration-500 hover:text-[--color-fg] ${
        visible ? 'opacity-100' : 'pointer-events-none opacity-0'
      }`}
      style={{
        backgroundColor: 'color-mix(in oklab, var(--color-bg-elevated) 75%, transparent)',
      }}
    >
      <span>see it run</span>
      <ChevronDown size={12} className="animate-bounce" />
    </a>
  );
}