import { motion } from "motion/react"
import { ArrowDown, ArrowRight } from "lucide-react"

import { Button } from "@/components/ui/button"

/** 히어로 변형 — 실시간 협상 콘솔 시즐 영상을 전면에 세운 풀와이드 히어로. */
export function HeroConsole() {
  return (
    <section className="relative min-h-screen bg-surface-neu text-ink flex flex-col justify-center pt-32 pb-20 overflow-hidden">
      <div className="mesh-bg absolute top-[-260px] left-[-160px] opacity-40 pointer-events-none" />

      <div className="max-w-6xl mx-auto px-6 w-full relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 28, scale: 0.98 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          transition={{ duration: 0.8, delay: 0.1 }}
          className="rounded-[28px] overflow-hidden border border-line-strong shadow-[0_30px_80px_rgba(20,25,45,0.12)] bg-white"
        >
          <video
            src="/gifs/hero_console.mp4"
            poster="/gifs/hero_console.jpg"
            autoPlay
            muted
            loop
            playsInline
            className="w-full h-auto block"
          />
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.35 }}
          className="flex flex-col sm:flex-row justify-center gap-5 pt-10"
        >
          <Button
            href="#contact-section"
            className="w-full sm:w-auto group shadow-[0_8px_24px_rgba(49,130,246,0.15)] hover:scale-[1.02] active:scale-[0.98]"
          >
            <span>도입 문의 상담 받기</span>
            <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
          </Button>
          <Button href="#how-it-works" variant="glass" className="w-full sm:w-auto gap-1.5">
            <span>작동 방식 보기</span>
            <ArrowDown className="w-4 h-4 text-ink-soft" />
          </Button>
        </motion.div>
      </div>
    </section>
  )
}