import { motion as Motion, useInView } from "framer-motion";
import { useRef } from "react";
import SubHero from "../../components/SubHero";

const UTM_NAV = [
  { label: "UTM/UATM 소개", to: "/utm/intro" },
  { label: "도입사례", to: "/utm/case" },
];

const CASES = [
  {
    id: "01",
    eyebrow: "한국공항공사",
    title: "KAC 드론교통관리 UTM 시스템 구축",
    desc: "공공용 UTM 시스템 정보공유체계 개발 및 드론교통관리 시스템 구축 사업을 수행했습니다. 실시간 비행 승인, 충돌 회피, 관제 데이터 통합 관리 기능을 제공합니다.",
    tags: ["UTM", "드론관제", "한국공항공사"],
    img: "./images/case01.png",
    year: "2024",
  },
  {
    id: "02",
    eyebrow: "국토교통부",
    title: "UAM 팀코리아 워킹그룹 참여",
    desc: "국토교통부 주관 UAM 팀코리아(UTK) 워킹그룹에 참여하여 도심항공교통 운항 공역 비행체 감시 기술 개발 및 UAM 비행상황관리 시스템 구축에 기여했습니다.",
    tags: ["UAM", "UATM", "국토교통부"],
    img: "./images/case02.png",
    year: "2024",
  },
  {
    id: "03",
    eyebrow: "남원시 · 항공안전기술원",
    title: "드론 실증도시 구축 및 관제시스템",
    desc: "남원시 드론 실증도시 구축사업 협약 체결 및 드론 규제 샌드박스 사업을 통해 드론 관리 체계에 따른 식별장치 및 비행 관제시스템을 구축했습니다.",
    tags: ["드론", "실증도시", "관제시스템"],
    img: "./images/rnd_img1.png",
    year: "2023",
  },
];

function CaseItem({ item, index }) {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-10%" });
  const isEven = index % 2 === 0;

  return (
    <div ref={ref} className={`cs-item${isEven ? "" : " cs-item--flip"}`}>
      {/* 큰 번호 배경 */}
      <div className="cs-bg-num">{item.id}</div>

      {/* 이미지 */}
      <Motion.div className="cs-img-wrap" initial={{ clipPath: isEven ? "inset(0 100% 0 0)" : "inset(0 0 0 100%)" }} animate={inView ? { clipPath: "inset(0 0% 0 0)" } : {}} transition={{ duration: 1, ease: [0.76, 0, 0.24, 1] }}>
        <img
          src={item.img}
          alt={item.title}
          className="cs-img"
          onError={(e) => {
            e.target.style.display = "none";
          }}
        />
        <div className="cs-img-fallback" />
      </Motion.div>

      {/* 텍스트 */}
      <Motion.div className="cs-body" initial={{ opacity: 0, y: 32 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.7, delay: 0.5, ease: [0.4, 0, 0.2, 1] }}>
        <div className="cs-meta">
          <span className="cs-year">{item.year}</span>
          <span className="cs-eyebrow">{item.eyebrow}</span>
        </div>
        <h3 className="cs-item-title">{item.title}</h3>
        <p className="cs-item-desc">{item.desc}</p>
        <div className="cs-tags">
          {item.tags.map((tag) => (
            <span key={tag} className="cs-tag">
              {tag}
            </span>
          ))}
        </div>
      </Motion.div>
    </div>
  );
}

export default function CasePage() {
  return (
    <article>
      <SubHero
        label="UTM/UATM"
        title={
          <>
            <em>Case Studies</em>
          </>
        }
        navItems={UTM_NAV}
      />

      <div className="sub-content">
        <div className="inner-wrap">
          {/* <Motion.div className="cs-head" initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-60px" }} transition={{ duration: 0.5, ease: [0.4, 0, 0.2, 1] }}>
            <h2 className="cs-title">
              실제 현장에서 증명된
              <br />
              <em>팔네트웍스의 기술력</em>
            </h2>
            <p className="cs-desc">항공 IT부터 UAM·드론·UTM까지, 다양한 기관과 함께한 구축 사례를 소개합니다.</p>
          </Motion.div> */}

          <div className="cs-list">
            {CASES.map((item, i) => (
              <CaseItem key={item.id} item={item} index={i} />
            ))}
          </div>
        </div>
      </div>
    </article>
  );
}