"use client";

import { motion } from "framer-motion";
import { Mouse } from "lucide-react";
import BgAnimation from "./BgAnimation";
import PillButton from "./ui/PillButton";

const container = {
  hidden: {},
  show: { transition: { staggerChildren: 0.12, delayChildren: 0.1 } },
};

const item = {
  hidden: { opacity: 0, y: 30 },
  show: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.8, ease: [0.21, 0.47, 0.32, 0.98] as const },
  },
};

export default function Hero({ slogan }: { slogan: string }) {
  return (
    <section className="fluid-bg relative flex min-h-screen items-center justify-center overflow-hidden pt-24 pb-28">
      {/* background animasi shader — seperti Portfolite */}
      <BgAnimation />
      {/* glow lembut tambahan di atas shader */}
      <div className="pointer-events-none absolute -top-32 left-1/2 size-[34rem] -translate-x-1/2 rounded-full bg-panel blur-[120px]" />

      <motion.div
        variants={container}
        initial="hidden"
        animate="show"
        className="relative z-10 mx-auto max-w-4xl px-5 text-center"
      >
        {/* Badge */}
        <motion.div variants={item}>
          <span className="glow-border inline-flex items-center gap-2 rounded-full bg-panel px-4 py-2 font-accent text-xs text-fog">
            <span className="relative flex size-1.5">
              <span className="absolute inline-flex size-full animate-ping rounded-full bg-fg opacity-60" />
              <span className="relative inline-flex size-1.5 rounded-full bg-fg" />
            </span>
            {slogan}
          </span>
        </motion.div>

        {/* Headline */}
        <motion.h1
          variants={item}
          className="mt-7 text-[2.6rem] leading-[1.06] font-semibold tracking-tight text-fg sm:text-6xl md:text-7xl lg:text-[5.4rem]"
        >
          Solusi Digital yang
          <br />
          Bisnis Anda Butuhkan
        </motion.h1>

        {/* Subheadline */}
        <motion.p
          variants={item}
          className="mx-auto mt-6 max-w-xl text-sm leading-relaxed text-fog md:text-base"
        >
          Perusahaan layanan IT yang tumbuh cepat — melayani siklus penuh
          pengembangan untuk sektor privat maupun pemerintah, mewujudkan
          peluang baru dalam transformasi bisnis Anda.
        </motion.p>

        {/* CTA */}
        <motion.div
          variants={item}
          className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row"
        >
          <PillButton href="#kontak">Mulai Proyek</PillButton>
          <PillButton href="#proyek" variant="ghost">
            Lihat Proyek
          </PillButton>
        </motion.div>
      </motion.div>

      {/* Indikator scroll */}
      <motion.a
        href="#proyek"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.2, duration: 0.8 }}
        className="group absolute bottom-7 left-1/2 hidden -translate-x-1/2 items-center gap-4 md:flex"
      >
        <span className="h-px w-16 bg-gradient-to-l from-fg/25 to-transparent md:w-24" />
        <span className="flex flex-col items-center gap-2 text-mist transition-colors group-hover:text-fog">
          <Mouse size={16} className="animate-bounce" />
          <span className="font-accent text-[10px] tracking-[0.22em] uppercase">
            scroll untuk melihat proyek
          </span>
        </span>
        <span className="h-px w-16 bg-gradient-to-r from-fg/25 to-transparent md:w-24" />
      </motion.a>
    </section>
  );
}