"use client"

import { ArrowDownRight, Linkedin, Mail, FileText, Globe } from "lucide-react"

export function Hero() {
  const scrollToExperience = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    const element = document.querySelector("#experience")
    if (element) {
      element.scrollIntoView({ behavior: "smooth" })
    }
  }

  return (
    <section className="relative overflow-hidden bg-background py-20 lg:py-32 transition-colors duration-300">
      {/* Background Gradients */}
      <div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.15),rgba(255,255,255,0))]" />
      <div className="absolute left-1/2 top-0 -z-10 h-[400px] w-[800px] -translate-x-1/2 rounded-full bg-cyan-500/10 blur-[120px] dark:bg-cyan-500/5" />
      <div className="absolute right-10 bottom-10 -z-10 h-[300px] w-[600px] rounded-full bg-indigo-500/10 blur-[100px] dark:bg-indigo-500/5" />

      <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col items-center text-center">
          {/* Subtle badge */}
          <div className="inline-flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-semibold text-primary mb-6 transition-colors duration-300">
            <span className="flex h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
            Available for Consulting & Contract Projects
          </div>

          {/* Name & Title */}
          <h1 className="text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl md:text-6xl max-w-3xl leading-none">
            Brian McCullough
          </h1>
          <p className="mt-3 text-xl font-bold tracking-tight text-cyan-600 dark:text-cyan-400 sm:text-2xl">
            Senior Software Engineer, Consultant & Systems Administrator
          </p>

          {/* Intro Text */}
          <p className="mx-auto mt-6 max-w-2xl text-base sm:text-lg text-muted-foreground leading-relaxed">
            With <strong>over 20 years</strong> of experience building and scaling robust web applications, 
            I help businesses turn complex technical challenges into secure, revenue-driving products. 
            Specializing in the PHP/Laravel ecosystem, full-stack JavaScript, and secure Linux server administration.
          </p>

          {/* Call to action buttons */}
          <div className="mt-10 flex flex-wrap justify-center gap-4">
            <button
              onClick={scrollToExperience}
              className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-sm hover:bg-primary/95 transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary cursor-pointer"
            >
              View My Experience
              <ArrowDownRight className="ml-2 h-4 w-4" />
            </button>
            <a
              href="mailto:bdmc@buadh-brath.com"
              className="inline-flex items-center justify-center rounded-lg border border-input bg-background px-6 py-3 text-sm font-semibold text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground transition-all"
            >
              Get in Touch
              <Mail className="ml-2 h-4 w-4" />
            </a>
            <a
              href="/BRIAN MCCULLOUGH_Resume-20260617.pdf"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center rounded-lg border border-cyan-500/30 dark:border-cyan-500/20 bg-cyan-500/5 px-6 py-3 text-sm font-semibold text-cyan-600 dark:text-cyan-400 shadow-xs hover:bg-cyan-500/10 transition-all"
            >
              Download PDF Resume
              <FileText className="ml-2 h-4 w-4" />
            </a>
          </div>

          {/* Professional links */}
          <div className="mt-12 flex items-center justify-center gap-6">
            <a
              href="https://www.linkedin.com/in/briandmccullough/"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors group"
            >
              <Linkedin className="h-5 w-5 text-muted-foreground group-hover:text-[#0077B5] transition-colors" />
              <span>LinkedIn</span>
            </a>
            <span className="text-border/40">•</span>
            <a
              href="mailto:bdmc@buadh-brath.com"
              className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors group"
            >
              <Mail className="h-5 w-5 text-muted-foreground group-hover:text-amber-500 transition-colors" />
              <span>bdmc@buadh-brath.com</span>
            </a>
            <span className="text-border/40">•</span>
            <a
              href="http://buadh-brath.com"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors group"
            >
              <Globe className="h-5 w-5 text-muted-foreground group-hover:text-cyan-500 transition-colors" />
              <span>buadh-brath.com</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}