"use client"

import { useState } from "react"
import Link from "next/link"
import { ArrowRight, Code2, Menu, Sparkles, X } from "lucide-react"
import { motion } from "motion/react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

const menuItems = [
  { name: "About", href: "/about-me" },
  { name: "Blog", href: "/blog" },
  { name: "Components", href: "/components" },
  { name: "Blocks", href: "/blocks" },
  { name: "Contact", href: "/contact" },
]

// small staggered fade/blur-in helper, replaces tailark's AnimatedGroup + TextEffect
const fadeUp = {
  hidden: { opacity: 0, y: 12, filter: "blur(8px)" },
  visible: { opacity: 1, y: 0, filter: "blur(0px)" },
}

function BrandMark() {
  return (
    <span className="flex items-center gap-2">
      <span className="flex size-8 items-center justify-center rounded-lg border bg-background text-sm font-semibold tracking-tight text-foreground shadow-sm">
        SM
      </span>
      <span className="text-base font-semibold tracking-tight text-foreground">
        Syed Moinuddin
      </span>
    </span>
  )
}

function HeroHeader() {
  const [menuOpen, setMenuOpen] = useState(false)

  return (
    <header className="fixed inset-x-0 top-0 z-30 w-full px-2">
      <nav
        data-state={menuOpen ? "active" : undefined}
        className="mx-auto mt-2 max-w-6xl rounded-2xl border border-transparent bg-background/60 px-6 backdrop-blur-lg transition-all duration-300 data-[state=active]:border-border lg:px-8"
      >
        <div className="relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
          <div className="flex w-full justify-between lg:w-auto">
            <Link href="/" aria-label="home" className="flex items-center">
              <BrandMark />
            </Link>

            <button
              type="button"
              onClick={() => setMenuOpen((open) => !open)}
              aria-label={menuOpen ? "Close menu" : "Open menu"}
              className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 text-foreground lg:hidden"
            >
              {menuOpen ? (
                <X className="size-6" />
              ) : (
                <Menu className="size-6" />
              )}
            </button>
          </div>

          <div className="absolute inset-0 m-auto hidden size-fit lg:block">
            <ul className="flex gap-8 text-sm">
              {menuItems.map((item) => (
                <li key={item.name}>
                  <Link
                    href={item.href}
                    className="block text-muted-foreground duration-150 hover:text-foreground"
                  >
                    {item.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div
            className={cn(
              "mb-6 w-full flex-wrap items-center justify-end space-y-8 rounded-2xl border bg-background p-6 shadow-2xl shadow-black/5 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none",
              menuOpen ? "flex" : "hidden lg:flex"
            )}
          >
            <div className="lg:hidden">
              <ul className="space-y-6 text-base">
                {menuItems.map((item) => (
                  <li key={item.name}>
                    <Link
                      href={item.href}
                      className="block text-muted-foreground duration-150 hover:text-foreground"
                    >
                      {item.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
            <div className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit">
              <Button asChild variant="ghost" size="sm">
                <Link href="/about-me">View work</Link>
              </Button>
              <Button asChild size="sm">
                <Link href="/contact">Get in touch</Link>
              </Button>
            </div>
          </div>
        </div>
      </nav>
    </header>
  )
}

export function HeroSection3() {
  return (
    <>
      <HeroHeader />

      <main className="overflow-hidden">
        <section>
          <div className="relative mx-auto max-w-6xl px-6 pt-32 pb-20 lg:pt-48">
            {/* subtle background grid + radial glow, no external assets */}
            <div
              aria-hidden
              className="pointer-events-none absolute inset-0 bg-[radial-gradient(var(--color-border)_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_60%,transparent_100%)] [background-size:22px_22px] opacity-40"
            />

            <div className="relative z-10 mx-auto max-w-4xl text-center">
              <motion.div
                initial={{ opacity: 0, y: 8, filter: "blur(6px)" }}
                animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
                transition={{ duration: 0.6, ease: "easeOut" }}
                className="mx-auto flex w-fit items-center gap-2 rounded-full border bg-background/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur"
              >
                <Sparkles className="size-3.5 text-foreground" />
                Design engineer, building end to end
              </motion.div>

              <motion.h1
                initial="hidden"
                animate="visible"
                variants={fadeUp}
                transition={{ duration: 0.7, ease: "easeOut", delay: 0.05 }}
                className="mt-6 text-5xl font-medium tracking-tight text-balance text-foreground md:text-6xl"
              >
                Creating with code, where small details matter.
              </motion.h1>

              <motion.p
                initial="hidden"
                animate="visible"
                variants={fadeUp}
                transition={{ duration: 0.7, ease: "easeOut", delay: 0.25 }}
                className="mx-auto mt-6 max-w-2xl text-lg text-pretty text-muted-foreground"
              >
                I design and ship polished digital products from the first
                sketch to the final deploy. Thoughtful interfaces, clean
                systems, and the kind of finish you only get when craft is the
                default.
              </motion.p>

              <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, ease: "easeOut", delay: 0.45 }}
                className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row"
              >
                <Button asChild size="lg">
                  <Link href="/contact">
                    Get in touch
                    <ArrowRight className="size-4" />
                  </Link>
                </Button>
                <Button asChild size="lg" variant="outline">
                  <Link href="/about-me">View work</Link>
                </Button>
              </motion.div>

              {/* tasteful bordered placeholder card with a subtle gradient, replaces the screenshot + logo cloud */}
              <motion.div
                initial={{ opacity: 0, y: 24, filter: "blur(10px)" }}
                animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
                transition={{ duration: 0.9, ease: "easeOut", delay: 0.6 }}
                className="relative mx-auto mt-16 max-w-3xl"
              >
                <div className="rounded-2xl border bg-gradient-to-b from-muted/60 to-background p-2 shadow-xl shadow-black/5">
                  <div className="rounded-xl border bg-background p-6 text-left">
                    <div className="flex items-center gap-2 text-muted-foreground">
                      <Code2 className="size-4 text-foreground" />
                      <span className="text-sm font-medium">
                        Selected focus areas
                      </span>
                    </div>
                    <div className="mt-5 grid grid-cols-2 gap-4 sm:grid-cols-4">
                      {[
                        "Product design",
                        "Frontend engineering",
                        "Design systems",
                        "Prototyping",
                      ].map((label) => (
                        <div
                          key={label}
                          className="rounded-lg border bg-muted/40 px-3 py-3 text-sm font-medium text-foreground"
                        >
                          {label}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </section>
      </main>
    </>
  )
}