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

import { Button } from "@/components/ui/button"
import { Typography } from "@/components/ui/typography"
import { EASE_OUT_EXPO } from "@/lib/motion"

/** 기본 히어로 — 파스텔 블롭 + 그리드 + 떠다니는 와이어프레임 도형. */
export function HeroGlassmorphic() {
  return (
    <section className="relative min-h-screen bg-surface text-ink flex flex-col justify-center pt-32 overflow-hidden">
      {/* 흐릿한 파스텔 블롭 배경 */}
      <div className="absolute top-[10%] right-[15%] w-[480px] h-[480px] bg-primary/10 rounded-full filter blur-[120px] pointer-events-none" />
      <div className="absolute bottom-[10%] left-[10%] w-[450px] h-[450px] bg-[#8F52FF]/10 rounded-full filter blur-[120px] pointer-events-none" />
      <div className="absolute top-[30%] left-[30%] w-[380px] h-[380px] bg-sky-300/10 rounded-full filter blur-[100px] pointer-events-none" />

      {/* 저채도 그리드 패턴 오버레이 */}
      <div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.01)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.01)_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none" />

      {/* 떠다니는 와이어프레임 도형 — max-w-7xl 안에 가둠 */}
      <div className="absolute inset-0 max-w-7xl mx-auto pointer-events-none z-0">
        <motion.div
          animate={{ y: [0, -18, 0], rotate: [12, 42, 12] }}
          transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
          className="absolute top-[15%] left-[8vw] lg:left-[10%] w-16 h-16 sm:w-28 sm:h-28 border-2 border-primary/40 bg-white/40 shadow-[0_8px_32px_rgba(49,130,246,0.05)] rounded-[28px] pointer-events-none z-0"
        />
        <motion.div
          animate={{ rotate: -360 }}
          transition={{ duration: 80, repeat: Infinity, ease: "linear" }}
          className="absolute bottom-[18%] left-[6vw] lg:left-[12%] w-28 h-28 sm:w-48 sm:h-48 border-2 border-dashed border-[#8F52FF]/30 rounded-full pointer-events-none z-0"
        />
        <motion.div
          animate={{ x: [0, 10, 0], y: [0, 10, 0] }}
          transition={{ duration: 10, repeat: Infinity, ease: "easeInOut" }}
          className="absolute top-[30%] right-[8vw] lg:right-[12%] w-20 h-20 sm:w-36 sm:h-36 border-2 border-primary/20 rounded-[40px] pointer-events-none z-0"
        >
          <div className="w-full h-full bg-gradient-to-tr from-primary/5 to-transparent rounded-[38px]" />
        </motion.div>
      </div>

      <div className="max-w-4xl mx-auto px-6 w-full py-24 relative z-10 flex flex-col items-center text-center">
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.9, delay: 0.1, ease: EASE_OUT_EXPO }}
        >
          <Typography variant="display" className="mb-8">
            구매 협상, 이제 <span className="text-primary">봇이 알아서</span> <br />
            흥정부터 낙찰까지 자동으로
          </Typography>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.9, delay: 0.2, ease: EASE_OUT_EXPO }}
        >
          <Typography variant="lead" className="md:text-[20px] max-w-2xl mb-12">
            협상할수록 강화학습으로 흥정 전략을 알아서 다듬어갑니다. <br className="hidden sm:inline" />
            파트너사 이탈(결렬) 없이, 최선의 계약 조건만 완벽하게 성사시키세요.
          </Typography>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.9, delay: 0.3, ease: EASE_OUT_EXPO }}
          className="flex flex-col sm:flex-row gap-4 items-center justify-center w-full max-w-md z-20"
        >
          <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>
  )
}