import { heroContent } from '../data/content';
import { handleAnchorClick } from '../utils/scrollToHash';

export function Hero() {
  return (
    <header id="top" className="relative overflow-hidden pb-[88px] pt-24">
      <div className="mx-auto max-w-[1080px] px-6">
        <span className="font-mono mb-5 block text-sm uppercase tracking-wider text-accent">
          {heroContent.eyebrow}
        </span>
        <h1 className="font-display mb-6 max-w-[15ch] text-4xl font-extrabold leading-tight tracking-tight sm:text-5xl">
          {heroContent.heading}
        </h1>
        <p className="mb-9 max-w-[52ch] text-lg text-muted">{heroContent.lead}</p>
        <div
          aria-hidden="true"
          className="font-mono mb-10 inline-flex max-w-full items-center gap-2 overflow-x-auto whitespace-nowrap rounded border border-line bg-surface px-6 py-4 shadow-lg"
        >
          <span>{heroContent.codeLine}</span>
          <span className="caret" data-testid="hero-caret" />
        </div>
        <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap">
          <a
            href="#pakketten"
            onClick={(event) => handleAnchorClick(event, '#pakketten')}
            className="rounded-lg bg-accent px-6 py-3.5 text-center text-[0.98rem] font-semibold text-[var(--color-accent-contrast)] transition-transform hover:bg-[var(--color-accent-hover)] active:scale-[0.98] sm:text-left"
          >
            Bekijk pakketten
          </a>
          <a
            href="#contact"
            onClick={(event) => handleAnchorClick(event, '#contact')}
            className="rounded-lg border border-line px-6 py-3.5 text-center text-[0.98rem] font-semibold text-text transition-colors hover:border-accent-line sm:text-left"
          >
            Plan een gesprek
          </a>
        </div>
      </div>
    </header>
  );
}