"use client";

import { scrollToTarget } from "@/lib/lenisInstance";

type Props = {
  targetId: string;
  label: string;
};

// Springt sanft zum nächsten Abschnitt. href bleibt als Sprungziel erhalten
// (funktioniert auch ohne JS/für Crawler), onClick übernimmt die Animation.
// Redesign 08.09.2026 (Mockup-1:1): kein zentrierter, hüpfender Pfeil mehr,
// sondern "SCROLL"-Label + kurzer Strich mit einem hellen Kupfer-Segment
// darin, unten links im Hero — exakt wie im Mockup (.scrolldown/.line).
export function ScrollDownCue({ targetId, label }: Props) {
  return (
    <a
      href={`#${targetId}`}
      aria-label={label}
      onClick={(e) => {
        e.preventDefault();
        scrollToTarget(`#${targetId}`);
      }}
      // ab lg trägt die Textspalte im Hero zusätzlich noch lg:pl-10 (40px)
      // on top vom section-eigenen Rand — das fehlte hier, dadurch stand
      // "Mehr entdecken" sichtbar weiter links als der Textblock (vom
      // Nutzer gemeldet, 08.09.2026). lg/xl-Werte = Section-Rand + diese
      // 40px, damit beide bündig sind.
      className="absolute bottom-20 left-6 sm:left-10 lg:left-[104px] xl:left-[136px] flex items-center gap-4 text-xs uppercase tracking-[0.2em] text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] transition-colors"
    >
      <span>{label}</span>
      {/* Etwas größer als der erste Versuch (10px/32px -> 12px/44px) und
          das Kupfer-Segment wandert jetzt endlos im Strich hin und her
          (rk-scan, siehe globals.css) statt still zu stehen — fällt so
          eher auf, ohne wie im ersten Anlauf ein hüpfender Pfeil zu sein
          (Wunsch des Nutzers, 08.09.2026). */}
      <span className="relative w-11 h-px bg-[var(--rk-line)] overflow-hidden">
        <span className="rk-scan absolute inset-y-0 left-0 w-2/5 bg-[var(--rk-accent)]" />
      </span>
    </a>
  );
}