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

import { PhoneFrame } from "@/components/ui/device-mockups"
import { Typography } from "@/components/ui/typography"

/** 대안 히어로 — 뉴모피즘 배경 + 실제 모바일 협상 화면(GIF) 폰 목업. */
export function HeroNeumorphic() {
  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-[-300px] right-[-100px] opacity-40 pointer-events-none" />

      <div className="max-w-5xl mx-auto px-6 w-full relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
        {/* 좌: 카피 + CTA */}
        <div className="lg:col-span-7 space-y-8 text-left">
          <motion.div
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7 }}
            className="inline-flex items-center gap-2 px-3.5 py-1.5 bg-surface-neu rounded-full text-xs font-bold text-primary shadow-[3px_3px_6px_#dbdee3,-3px_-3px_6px_#ffffff]"
          >
            <Sparkles className="w-3.5 h-3.5" />
            <span>LIVE NEGOTIATION DEMO</span>
          </motion.div>

          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.1 }}>
            <Typography variant="display" className="text-4xl sm:text-5xl lg:text-[54px] leading-[1.15]">
              구매 협상, 이제 <span className="text-primary">봇이 알아서</span> <br />
              흥정부터 낙찰까지 자동으로
            </Typography>
          </motion.div>

          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.2 }}>
            <Typography variant="lead" className="max-w-xl">
              불필요한 실랑이와 감정 소모 없이, 예산 상한선 내에서 최적의 원가 절감을 달성하세요. 데이터 기반의 자율 흥정 봇이
              24시간 실시간 대리 협상을 완료합니다.
            </Typography>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="flex flex-col sm:flex-row gap-5 pt-4"
          >
            <a
              href="#contact-section"
              className="px-8 py-4.5 bg-primary hover:bg-primary-deep text-white text-base font-bold rounded-[20px] cursor-pointer flex items-center justify-center gap-2 group transition-all shadow-[6px_6px_12px_rgba(49,130,246,0.25),-6px_-6px_12px_#ffffff] hover:shadow-[4px_4px_8px_rgba(49,130,246,0.25),-4px_-4px_8px_#ffffff] active:shadow-none translate-y-0 active:translate-y-0.5"
            >
              <span>도입 문의 상담 받기</span>
              <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
            </a>
            <a
              href="#how-it-works"
              className="px-8 py-4.5 bg-surface-neu text-ink-soft hover:text-ink text-base font-bold rounded-[20px] transition-all flex items-center justify-center gap-1.5 shadow-[6px_6px_12px_#dbdee3,-6px_-6px_12px_#ffffff] hover:shadow-[4px_4px_8px_#dbdee3,-4px_-4px_8px_#ffffff] active:shadow-[inset_3px_3px_6px_#dbdee3,inset_-3px_-3px_6px_#ffffff] translate-y-0 active:translate-y-0.5"
            >
              <span>작동 방식 보기</span>
              <ArrowDown className="w-4 h-4 text-ink-soft" />
            </a>
          </motion.div>
        </div>

        {/* 우: 협력사 모바일 협상 실제 화면 (GIF) */}
        <div className="lg:col-span-5 flex justify-center">
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="w-full flex justify-center"
          >
            <PhoneFrame>
              <img
                src="/gifs/negotiation.gif"
                alt="협력사 모바일 협상 포털 실제 화면"
                className="w-full h-full object-cover"
              />
            </PhoneFrame>
          </motion.div>
        </div>
      </div>
    </section>
  )
}