"use client"

import { useState } from "react"
import Link from "next/link"
import { ArrowRight, 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 plain-text discipline row that replaces the tailark logo cloud.
const craftLabels = [
  "Design systems",
  "Front of the frontend",
  "Motion",
  "Accessibility",
  "Performance",
]

const fadeBlur = {
  hidden: { opacity: 0, filter: "blur(12px)", y: 12 },
  visible: {
    opacity: 1,
    filter: "blur(0px)",
    y: 0,
    transition: { type: "spring" as const, bounce: 0.3, duration: 1.2 },
  },
}

function BrandMark() {
  return (
    <Link
      href="/"
      aria-label="Syed Moinuddin, home"
      className="flex items-center gap-2.5"
    >
      <span className="flex size-8 items-center justify-center rounded-lg border bg-foreground text-sm font-semibold tracking-tight text-background">
        SM
      </span>
      <span className="text-sm font-semibold tracking-tight text-foreground">
        Syed Moinuddin
      </span>
    </Link>
  )
}

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

  return (
    <header>
      <nav
        data-state={menuOpen ? "active" : undefined}
        className="fixed top-0 z-20 w-full border-b bg-background/70 backdrop-blur-xl"
      >
        <div className="mx-auto max-w-5xl px-6">
          <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 items-center justify-between gap-12 lg:w-auto">
              <BrandMark />

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

              <div className="hidden 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>

            <div
              className={cn(
                "mb-6 w-full flex-wrap items-center justify-end space-y-8 rounded-3xl 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}
                        onClick={() => setMenuOpen(false)}
                        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="outline" 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>
        </div>
      </nav>
    </header>
  )
}

export function HeroSection2() {
  return (
    <>
      <HeroHeader />
      <main className="overflow-hidden">
        {/* Soft ambient glows, pure CSS, no assets. */}
        <div
          aria-hidden
          className="absolute inset-0 isolate hidden contain-strict lg:block"
        >
          <div className="absolute top-0 left-0 h-[80rem] w-[35rem] -translate-y-[21.875rem] -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
          <div className="absolute top-0 left-0 h-[80rem] w-[15rem] [translate:5%_-50%] -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
        </div>

        <section>
          <div className="relative pt-32 lg:pt-40">
            <div className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--background)_75%)]" />

            <div className="mx-auto max-w-5xl px-6">
              <div className="sm:mx-auto lg:mt-0 lg:mr-auto">
                <motion.span
                  initial={{ opacity: 0, filter: "blur(8px)", y: 8 }}
                  animate={{ opacity: 1, filter: "blur(0px)", y: 0 }}
                  transition={{ duration: 0.8 }}
                  className="inline-flex items-center gap-2 rounded-full border bg-muted/40 px-3 py-1 text-xs font-medium text-muted-foreground"
                >
                  <Sparkles className="size-3.5" />
                  Design engineer, end to end
                </motion.span>

                <motion.h1
                  initial={{ opacity: 0, filter: "blur(12px)", y: 12 }}
                  animate={{ opacity: 1, filter: "blur(0px)", y: 0 }}
                  transition={{ duration: 1, delay: 0.05 }}
                  className="mt-8 max-w-3xl text-5xl font-medium tracking-tight text-balance text-foreground md:text-6xl"
                >
                  I design and build digital products where the small details
                  matter.
                </motion.h1>

                <motion.p
                  initial={{ opacity: 0, filter: "blur(12px)", y: 12 }}
                  animate={{ opacity: 1, filter: "blur(0px)", y: 0 }}
                  transition={{ duration: 1, delay: 0.25 }}
                  className="mt-8 max-w-2xl text-lg text-pretty text-muted-foreground"
                >
                  Creating with code. I take ideas from a rough sketch to a
                  polished, shipped product, blending thoughtful design with
                  engineering that holds up in production.
                </motion.p>

                <motion.div
                  initial="hidden"
                  animate="visible"
                  variants={{
                    visible: {
                      transition: { staggerChildren: 0.08, delayChildren: 0.5 },
                    },
                  }}
                  className="mt-12 flex flex-col items-start gap-3 sm:flex-row sm:items-center"
                >
                  <motion.div variants={fadeBlur}>
                    <Button asChild size="lg" className="px-5 text-base">
                      <Link href="/contact">
                        Get in touch
                        <ArrowRight className="size-4" />
                      </Link>
                    </Button>
                  </motion.div>
                  <motion.div variants={fadeBlur}>
                    <Button
                      asChild
                      size="lg"
                      variant="ghost"
                      className="px-5 text-base"
                    >
                      <Link href="/about-me">View work</Link>
                    </Button>
                  </motion.div>
                </motion.div>
              </div>
            </div>

            {/* Clean bordered placeholder card with a subtle gradient, replaces the app screenshot. */}
            <motion.div
              initial={{ opacity: 0, filter: "blur(12px)", y: 24 }}
              animate={{ opacity: 1, filter: "blur(0px)", y: 0 }}
              transition={{ duration: 1.2, delay: 0.6 }}
              className="relative mt-12 px-6 sm:mt-16 md:mt-20"
            >
              <div className="mx-auto max-w-5xl overflow-hidden rounded-2xl border bg-background p-2 shadow-lg shadow-black/5">
                <div className="relative flex aspect-[15/8] items-center justify-center overflow-hidden rounded-xl border bg-gradient-to-br from-muted/60 via-background to-muted/40">
                  <div className="absolute inset-0 [background:radial-gradient(60%_60%_at_50%_0%,hsla(0,0%,50%,.08)_0,transparent_70%)]" />
                  <div className="relative text-center">
                    <p className="text-sm font-medium text-muted-foreground">
                      Selected work, case studies, and experiments
                    </p>
                    <p className="mt-1 text-2xl font-semibold tracking-tight text-foreground">
                      Creating with code.
                    </p>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </section>

        {/* Plain-text craft row, replaces the brand logo cloud. */}
        <section className="bg-background pt-16 pb-16 md:pb-24">
          <div className="mx-auto max-w-5xl px-6">
            <p className="text-center text-sm text-muted-foreground">
              How I think about the craft
            </p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
              {craftLabels.map((label) => (
                <span
                  key={label}
                  className="text-sm font-medium text-muted-foreground/80"
                >
                  {label}
                </span>
              ))}
            </div>
          </div>
        </section>
      </main>
    </>
  )
}