'use client'

import { useEffect, useRef } from 'react'
import Image from 'next/image'
import { ArrowDown, Github, Linkedin, Mail } from 'lucide-react'

export function Hero() {
  const cursorRef = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    const el = cursorRef.current
    if (!el) return
    let visible = true
    const interval = setInterval(() => {
      visible = !visible
      el.style.opacity = visible ? '1' : '0'
    }, 530)
    return () => clearInterval(interval)
  }, [])

  const scrollToAbout = () => {
    document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' })
  }

  return (
    <section
      id="hero"
      className="min-h-screen flex flex-col justify-center px-6 pt-16 max-w-5xl mx-auto"
      aria-label="Introduction"
    >
      <div className="grid md:grid-cols-[1fr_auto] gap-12 md:gap-16 items-center">
      <div className="max-w-2xl">
        {/* Greeting */}
        <p className="text-sm font-medium text-primary tracking-widest uppercase mb-6 animate-fade-in">
          Hi, I am
        </p>

        {/* Name */}
        <h1 className="font-serif text-5xl md:text-7xl font-bold text-foreground leading-tight tracking-tight mb-4 text-balance animate-fade-in [animation-delay:100ms]">
          Nitish Raj
          <br />
          <span className="text-primary">Uprety</span>
          <span ref={cursorRef} className="text-primary ml-1 transition-opacity">
            .
          </span>
        </h1>

        {/* Tagline */}
        <p className="text-xl md:text-2xl text-muted-foreground font-light leading-relaxed mb-8 animate-fade-in [animation-delay:200ms]">
          Full-Stack Developer &amp; Technical Trainer
        </p>

        {/* Bio */}
        <p className="text-base text-muted-foreground leading-relaxed max-w-xl mb-10 animate-fade-in [animation-delay:300ms]">
          10+ years building scalable web apps, APIs, and cross-platform mobile solutions.
          I specialize in <span className="text-foreground font-medium">Laravel, React, Next.js</span> and{' '}
          <span className="text-foreground font-medium">Flutter</span> — and have mentored{' '}
          <span className="text-foreground font-medium">500+ developers</span> along the way.
        </p>

        {/* CTA row */}
        <div className="flex flex-wrap items-center gap-4 mb-12 animate-fade-in [animation-delay:400ms]">
          <button
            onClick={() => document.getElementById('projects')?.scrollIntoView({ behavior: 'smooth' })}
            className="inline-flex items-center gap-2 px-6 py-3 rounded-md bg-primary text-primary-foreground font-medium text-sm hover:opacity-90 transition-opacity"
          >
            View Projects
          </button>
          <button
            onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}
            className="inline-flex items-center gap-2 px-6 py-3 rounded-md border border-border text-foreground font-medium text-sm hover:bg-secondary transition-colors"
          >
            Get in Touch
          </button>
        </div>

        {/* Social links */}
        <div className="flex items-center gap-5 animate-fade-in [animation-delay:500ms]">
          <a
            href="https://github.com/nitishneputer"
            target="_blank"
            rel="noopener noreferrer"
            className="text-muted-foreground hover:text-foreground transition-colors"
            aria-label="GitHub"
          >
            <Github size={20} />
          </a>
          <a
            href="https://linkedin.com/in/nitishrajuprety"
            target="_blank"
            rel="noopener noreferrer"
            className="text-muted-foreground hover:text-foreground transition-colors"
            aria-label="LinkedIn"
          >
            <Linkedin size={20} />
          </a>
          <a
            href="mailto:uprety.nitish@gmail.com"
            className="text-muted-foreground hover:text-foreground transition-colors"
            aria-label="Email"
          >
            <Mail size={20} />
          </a>

          <span className="w-px h-5 bg-border mx-1" aria-hidden="true" />

          <span className="text-xs text-muted-foreground">Open to remote &amp; freelance</span>
          <span className="inline-flex items-center gap-1.5 text-xs font-medium text-primary">
            <span className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
              <span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
            </span>
            Available
          </span>
        </div>
      </div>

      {/* Profile Photo */}
      <div className="hidden md:block animate-fade-in [animation-delay:300ms]">
        <div className="relative w-72 h-96 rounded-2xl overflow-hidden border-2 border-border shadow-lg">
          <Image
            src="/images/nitish-profile.jpg"
            alt="Nitish Raj Uprety"
            fill
            className="object-cover object-top"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-t from-background/20 to-transparent" />
        </div>
      </div>
      </div>

      {/* Scroll cue */}
      <button
        onClick={scrollToAbout}
        className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors animate-bounce"
        aria-label="Scroll down"
      >
        <span className="text-xs tracking-widest uppercase">Scroll</span>
        <ArrowDown size={14} />
      </button>
    </section>
  )
}
