import type { ReactNode } from "react"
import { motion } from "framer-motion"
import { ArrowDown, Calendar, Hash, Users, Euro } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { scrollToSection } from "@/lib/scroll"
import { project } from "@/data/project"

const fade = {
  hidden: { opacity: 0, y: 18 },
  show: { opacity: 1, y: 0 },
}

export function Hero() {
  return (
    <section
      id="home"
      className="relative scroll-mt-20 overflow-hidden bg-primary text-primary-foreground"
    >
      {/* Background decoration */}
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -right-24 -top-24 h-96 w-96 rounded-full bg-brand/25 blur-3xl" />
        <div className="absolute -bottom-32 -left-24 h-96 w-96 rounded-full bg-energy/15 blur-3xl" />
        <div
          className="absolute inset-0 opacity-[0.07]"
          style={{
            backgroundImage:
              "linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px)",
            backgroundSize: "48px 48px",
          }}
        />
      </div>

      <div className="relative mx-auto w-full max-w-6xl px-5 pb-24 pt-36 md:px-8 md:pb-32 md:pt-44">
        <motion.div
          initial="hidden"
          animate="show"
          transition={{ staggerChildren: 0.08 }}
        >
          <motion.div variants={fade} transition={{ duration: 0.5 }}>
            <Badge className="bg-white/10 text-primary-foreground backdrop-blur">
              INESC Coimbra · Research Project
            </Badge>
          </motion.div>

          <motion.h1
            variants={fade}
            transition={{ duration: 0.5 }}
            className="mt-6 text-5xl font-bold leading-[1.05] tracking-tight md:text-7xl"
          >
            {project.acronym}
          </motion.h1>

          <motion.p
            variants={fade}
            transition={{ duration: 0.5 }}
            className="mt-5 max-w-3xl text-lg font-medium text-primary-foreground/85 md:text-2xl"
          >
            {project.title}
          </motion.p>

          <motion.p
            variants={fade}
            transition={{ duration: 0.5 }}
            className="mt-4 max-w-2xl text-base leading-relaxed text-primary-foreground/70"
          >
            {project.tagline}
          </motion.p>

          <motion.div
            variants={fade}
            transition={{ duration: 0.5 }}
            className="mt-8 flex flex-wrap gap-3"
          >
            <Button variant="brand" onClick={() => scrollToSection("work-plan")}>
              View work plan
              <ArrowDown className="h-4 w-4" />
            </Button>
            <Button
              variant="outline"
              onClick={() => scrollToSection("goal")}
              className="border-white/25 bg-transparent text-primary-foreground hover:bg-white/10 hover:text-primary-foreground"
            >
              About the project
            </Button>
          </motion.div>

          {/* Meta grid */}
          <motion.div
            variants={fade}
            transition={{ duration: 0.5 }}
            className="mt-14 grid gap-px overflow-hidden rounded-xl border border-white/15 bg-white/10 sm:grid-cols-2 lg:grid-cols-4"
          >
            <MetaCell icon={<Calendar className="h-4 w-4" />} label="Duration">
              {project.dates.start} → {project.dates.end}
            </MetaCell>
            <MetaCell icon={<Hash className="h-4 w-4" />} label="Project code">
              2023.17768.ICDT
            </MetaCell>
            <MetaCell icon={<Euro className="h-4 w-4" />} label="EU support">
              {project.funding.euSupport}
            </MetaCell>
            <MetaCell icon={<Users className="h-4 w-4" />} label="Team">
              {project.team.length} researchers
            </MetaCell>
          </motion.div>

          {/* Team list */}
          <motion.div
            variants={fade}
            transition={{ duration: 0.5 }}
            className="mt-8"
          >
            <div className="mb-3 text-xs font-semibold uppercase tracking-widest text-primary-foreground/55">
              Project team
            </div>
            <div className="flex flex-wrap gap-2">
              {project.team.map((member) => (
                <span
                  key={member}
                  className="rounded-full border border-white/15 bg-white/5 px-3 py-1 text-sm text-primary-foreground/85"
                >
                  {member}
                </span>
              ))}
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}

function MetaCell({
  icon,
  label,
  children,
}: {
  icon: ReactNode
  label: string
  children: ReactNode
}) {
  return (
    <div className="bg-primary/40 p-5">
      <div className="flex items-center gap-2 text-primary-foreground/60">
        {icon}
        <span className="text-xs font-semibold uppercase tracking-wider">
          {label}
        </span>
      </div>
      <div className="mt-2 text-base font-semibold text-primary-foreground">
        {children}
      </div>
    </div>
  )
}
