"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 text labels that replace the original brand logo cloud.
const focusLabels = [
  "Design Engineering",
  "Product UI",
  "Motion",
  "Design Systems",
  "Frontend",
]

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

  return (
    <header>
      <nav className="fixed inset-x-0 top-0 z-30 w-full px-2">
        <div className="mx-auto mt-2 max-w-6xl rounded-2xl border border-transparent px-6 py-3 transition-all duration-300 supports-[backdrop-filter]:border-border supports-[backdrop-filter]:bg-background/60 supports-[backdrop-filter]:backdrop-blur-lg lg:px-12">
          <div className="relative flex flex-wrap items-center justify-between gap-6 lg:gap-0">
            <div className="flex w-full justify-between lg:w-auto">
              <Link
                href="/"
                aria-label="home"
                className="flex items-center gap-2"
              >
                <span className="flex size-8 items-center justify-center rounded-lg bg-foreground text-sm font-semibold tracking-tight text-background">
                  SM
                </span>
                <span className="text-base font-semibold tracking-tight text-foreground">
                  Syed Moinuddin
                </span>
              </Link>

              <button
                type="button"
                onClick={() => setMenuOpen((open) => !open)}
                aria-label={menuOpen ? "Close menu" : "Open menu"}
                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>

            <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(
                "w-full flex-wrap items-center justify-end gap-6 rounded-3xl border bg-background p-6 shadow-2xl shadow-black/5 lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none",
                menuOpen ? "mt-6 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 gap-3 sm:flex-row sm:gap-3 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 HeroSection1() {
  return (
    <>
      <HeroNav />
      <main className="overflow-hidden">
        {/* Soft ambient glow, no external assets. */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 isolate hidden opacity-65 lg:block"
        >
          <div className="absolute top-0 left-0 h-[40rem] w-[35rem] -translate-y-1/3 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,55%,.08)_0,hsla(0,0%,45%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
          <div className="absolute top-0 left-0 h-[40rem] w-[15rem] -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,55%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
        </div>

        <section>
          <div className="relative pt-24 md:pt-36">
            <div
              aria-hidden
              className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]"
            />

            <div className="mx-auto max-w-7xl px-6">
              <div className="text-center sm:mx-auto lg:mt-0 lg:mr-auto">
                <motion.div
                  initial={{ opacity: 0, y: 12, filter: "blur(8px)" }}
                  animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
                  transition={{ duration: 0.8, ease: "easeOut" }}
                >
                  <Link
                    href="/about-me"
                    className="group mx-auto flex w-fit items-center gap-3 rounded-full border bg-muted p-1 pl-4 shadow-md shadow-black/5 transition-colors duration-300 hover:bg-background"
                  >
                    <Sparkles className="size-3.5 text-muted-foreground" />
                    <span className="text-sm text-foreground">
                      Design engineer, building end to end products
                    </span>
                    <span className="block h-4 w-px border-l bg-border" />
                    <div className="size-6 overflow-hidden rounded-full bg-background duration-500 group-hover:bg-muted">
                      <div className="flex w-12 -translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0">
                        <span className="flex size-6">
                          <ArrowRight className="m-auto size-3" />
                        </span>
                        <span className="flex size-6">
                          <ArrowRight className="m-auto size-3" />
                        </span>
                      </div>
                    </div>
                  </Link>
                </motion.div>

                <motion.h1
                  initial={{ opacity: 0, y: 16, filter: "blur(10px)" }}
                  animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
                  transition={{ duration: 0.9, delay: 0.1, ease: "easeOut" }}
                  className="mx-auto mt-8 max-w-4xl text-5xl font-semibold tracking-tight text-balance text-foreground md:text-7xl lg:mt-16 xl:text-[5.25rem]"
                >
                  Creating with code. Small details matter.
                </motion.h1>

                <motion.p
                  initial={{ opacity: 0, y: 16, filter: "blur(10px)" }}
                  animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
                  transition={{ duration: 0.9, delay: 0.3, ease: "easeOut" }}
                  className="mx-auto mt-8 max-w-2xl text-lg text-balance text-muted-foreground"
                >
                  I am Syed Moinuddin, a design engineer who builds polished,
                  end to end digital products. From the first wireframe to the
                  final pixel, I obsess over the details that make software feel
                  effortless.
                </motion.p>

                <motion.div
                  initial={{ opacity: 0, y: 16 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.8, delay: 0.5, ease: "easeOut" }}
                  className="mt-12 flex flex-col items-center justify-center gap-3 md:flex-row"
                >
                  <div className="rounded-[calc(var(--radius-xl)+0.125rem)] border bg-foreground/10 p-0.5">
                    <Button
                      asChild
                      size="lg"
                      className="rounded-xl px-5 text-base"
                    >
                      <Link href="/contact">
                        <span className="text-nowrap">Get in touch</span>
                      </Link>
                    </Button>
                  </div>
                  <Button
                    asChild
                    size="lg"
                    variant="ghost"
                    className="h-[2.625rem] rounded-xl px-5"
                  >
                    <Link href="/about-me">
                      <span className="text-nowrap">View work</span>
                    </Link>
                  </Button>
                </motion.div>
              </div>
            </div>

            {/* Clean bordered placeholder card replaces the original app screenshot. */}
            <motion.div
              initial={{ opacity: 0, y: 24, filter: "blur(12px)" }}
              animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
              transition={{ duration: 1, delay: 0.7, ease: "easeOut" }}
              className="relative mx-auto mt-8 max-w-6xl px-6 sm:mt-12 md:mt-20"
            >
              <div className="relative overflow-hidden rounded-2xl border bg-background p-2 shadow-xl ring-1 shadow-black/10 ring-border">
                <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/30">
                  <div
                    aria-hidden
                    className="absolute inset-0 [background:radial-gradient(60%_60%_at_50%_0%,hsla(0,0%,50%,.10)_0,transparent_70%)]"
                  />
                  <div className="relative z-10 px-6 text-center">
                    <p className="text-sm font-medium tracking-[0.2em] text-muted-foreground uppercase">
                      Selected work
                    </p>
                    <p className="mt-3 text-2xl font-semibold tracking-tight text-foreground md:text-3xl">
                      Polished products, end to end.
                    </p>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </section>

        {/* Plain text label 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">
              Focused on the craft of
            </p>
            <motion.div
              initial={{ opacity: 0, y: 12 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-80px" }}
              transition={{ duration: 0.7, ease: "easeOut" }}
              className="mt-6 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 sm:gap-x-12"
            >
              {focusLabels.map((label) => (
                <span
                  key={label}
                  className="text-sm font-medium text-foreground/70 transition-colors hover:text-foreground"
                >
                  {label}
                </span>
              ))}
            </motion.div>
          </div>
        </section>
      </main>
    </>
  )
}