'use client'

import Image from 'next/image'
import GlitchText from './GlitchText'
import Link from 'next/link'

export default function Hero() {
  return (
    <section className="flex flex-col items-center justify-center min-h-[100vh] relative z-10 px-4">
      {/* Logo or Wordmark */}
      <div className="mb-8 scroll-reveal">
        <div className="relative w-48 h-16 md:w-64 md:h-20 flex items-center justify-center">
          {/* Try to load logo, fallback to text if not found */}
          <Image
            src="/assets/images/Geekbrain-io.png"
            alt="GeekBrain.io"
            width={200}
            height={60}
            priority
            className="object-contain brightness-0 invert filter"
            onError={(e) => {
              // Hide broken image and show text fallback
              e.currentTarget.style.display = 'none'
              const fallback = e.currentTarget.parentElement?.querySelector('.logo-fallback')
              if (fallback) fallback.classList.remove('hidden')
            }}
          />
          <div className="logo-fallback hidden text-2xl md:text-3xl font-bold tracking-wider text-white">
            GEEKBRAIN
          </div>
        </div>
      </div>

      {/* Glitch Heading */}
      <div className="scroll-reveal stagger-1">
        <GlitchText
          text="GEEKBRAIN.IO"
          as="h1"
          intensity="normal"
          className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold text-center tracking-tight"
        />
      </div>

      {/* Tagline */}
      <p className="mt-6 text-lg md:text-xl lg:text-2xl text-muted font-light text-center max-w-2xl leading-relaxed scroll-reveal stagger-2">
        Backing the builders of tomorrow
      </p>

      {/* CTA Indicator */}
      <div className="mt-16 animate-bonce-slow scroll-reveal stagger-3">
        <div className="flex flex-col items-center gap-2 text-white">
          <span className="text-xs uppercase tracking-widest opacity-90">Scroll</span>
          <svg
            className="w-6 h-6 md:w-8 md:h-8 opacity-90"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            aria-hidden="true"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M19 14l-7 7m0 0l-7-7m7 7V3"
            />
          </svg>
        </div>
      </div>
    </section>
  )
}