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

import { Button } from "@/components/ui/button"
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: 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]">
              구매 협상, <br />
              이제 <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"
          >
            <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>

        {/* 우: 협력사 모바일 협상 실제 화면 (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>
  )
}