import { SITE } from '@/lib/config';

export default function Hero() {
  return (
    <section className="relative min-h-[100dvh] flex items-center noise overflow-hidden" aria-labelledby="hero-name">
      {/* Dot grid */}
      <div className="absolute inset-0 dot-grid opacity-[0.35] pointer-events-none" aria-hidden="true" />
      {/* Radial vignette */}
      <div className="absolute inset-0 pointer-events-none"
        style={{ background: 'radial-gradient(ellipse 80% 70% at 50% 60%, transparent 30%, #070707 100%)' }}
        aria-hidden="true" />

      <div className="relative z-10 w-full max-w-5xl mx-auto px-6 pt-28 pb-24">
        <div className="flex flex-col gap-8 max-w-3xl">
          {/* Status pill */}
          <div className="flex items-center gap-2 self-start">
            <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium text-white/50
              bg-white/[0.04] border border-white/[0.07]">
              <span className="w-1.5 h-1.5 rounded-full bg-white/50 animate-pulse" aria-hidden="true" />
              Software Engineer
            </span>
          </div>

          {/* Name */}
          <h1 id="hero-name"
            className="text-[clamp(3.5rem,10vw,8rem)] font-black leading-[0.9] tracking-[-0.05em] text-white">
            William<br />
            <span className="text-white/25">March</span>
          </h1>

          {/* Tagline */}
          <p className="text-[clamp(1rem,2vw,1.25rem)] text-white/40 max-w-[44ch] leading-relaxed font-light">
            {SITE.tagline}
          </p>

          {/* CTAs */}
          <div className="flex flex-wrap gap-3">
            <a href="#projects" className="btn btn-primary">
              View work
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </a>
            <a href="#contact" className="btn btn-ghost">Get in touch</a>
          </div>
        </div>

        {/* Scroll hint */}
        <div className="absolute bottom-10 left-6 flex items-center gap-2 text-white/20 text-xs font-mono" aria-hidden="true">
          <span className="w-[1px] h-8 bg-gradient-to-b from-transparent to-white/20" />
          scroll
        </div>
      </div>
    </section>
  );
}