import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";

import SubHero from "../../components/SubHero";
import useFadeIn from "../../hooks/useFadeIn";

gsap.registerPlugin(ScrollTrigger);

const COMPANY_NAV = [
  { label: "회사소개", to: "/company/about" },
  { label: "인증 및 특허현황", to: "/company/cert" },
  { label: "연혁", to: "/company/history" },
  { label: "고객 및 협력사", to: "/company/partners" },
  { label: "찾아오시는 길", to: "/company/location" },
];

const CLIENTS = [
  { id: "airport", logo: "01" },
  { id: "kac", logo: "09" },
  { id: "mod", logo: "15" },
  { id: "incheon", logo: "16" },
  { id: "jeju", logo: "20" },
  { id: "kiast", logo: "21" },
  { id: "kari", logo: "23" },
  { id: "molit", logo: "24" },
];

const PARTNERS = [
  "02",
  "03",
  "04",
  "05",
  "06",
  "07",
  "08",
  "10",
  "11",
  "12",
  "13",
  "14",
  "18",
  "19",
  "22",
];

function LogoCard({ logo, basePath }) {
  return (
    <div className="partners-logo-cell">
      <img
        src={`${basePath}images/partner/banner${logo}.png`}
        alt=""
        loading="lazy"
      />
    </div>
  );
}

export default function PartnersPage() {
  const ref = useFadeIn();
  const wrapRef = useRef(null);
  const basePath = import.meta.env.BASE_URL;

  useEffect(() => {
    const ctx = gsap.context(() => {
      // 모든 섹션 요소 — 아래에서 위로
      gsap.utils
        .toArray([
          ".partners-section-row",
          ".partners-sidebar",
          ".partners-grid",
          ".sub-fade-in",
        ])
        .forEach((el) => {
          gsap.fromTo(
            el,
            { opacity: 0, y: 48 },
            {
              opacity: 1,
              y: 0,
              duration: 0.7,
              ease: "power3.out",
              scrollTrigger: {
                trigger: el,
                start: "top 88%",
              },
            },
          );
        });

      // 로고 셀 stagger (기존 유지)
      gsap.fromTo(
        ".partners-logo-cell",
        { opacity: 0, y: 16 },
        {
          opacity: 1,
          y: 0,
          duration: 0.5,
          stagger: { each: 0.03, from: "start" },
          ease: "power3.out",
          scrollTrigger: {
            trigger: ".partners-wrap",
            start: "top 80%",
          },
        },
      );
    }, wrapRef);

    return () => ctx.revert();
  }, []);
  return (
    <article ref={ref}>
      <SubHero
        label="Company"
        title={
          <>
            {/* <span style={{ color: "#111" }}>함께하는</span>
            <br /> */}
            <em>Partners</em>
          </>
        }
        // desc="공공·항공·국방 분야 주요 기관과의 신뢰를 바탕으로 성장해왔습니다."
        navItems={COMPANY_NAV}
      />

      <div className="sub-content">
        <div className="inner-wrap">
          {/* 상단 타이틀 */}
          <motion.div
            className="ht-header"
            initial={{ opacity: 0, y: 32 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-80px" }}
            transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
          >
            <p className="ht-header-title">
              Trusted by Many,
              <br />
              <em>
                <span>Built</span> <b>for the Future</b>
              </em>
            </p>
            <em className="ht-header-sub">
              오랜 신뢰, 깊은 협력 함께하는 기관과 파트너
            </em>
          </motion.div>
          {/* <motion.div
            initial={{ scaleY: 0, opacity: 0 }}
            whileInView={{ scaleY: 1, opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1], delay: 0.3 }}
            style={{
              width: "1px",
              height: "48px",
              background: "#ddd",
              margin: "1rem auto 1rem",
              transformOrigin: "top",
            }}
          /> */}

          <div className="partners-wrap" ref={wrapRef}>
            {/* 주요 고객사 */}
            <div className="partners-section-row">
              <div className="partners-sidebar">
                <p className="partners-eyebrow">Clients</p>
                <div className="partners-heading-row">
                  <h2 className="partners-heading">
                    주요 <br /> 고객사
                  </h2>
                  <p className="partners-count">{CLIENTS.length}개사</p>
                </div>
              </div>
              <div className="partners-grid partners-grid--4">
                {CLIENTS.map((c) => (
                  <LogoCard key={c.id} logo={c.logo} basePath={basePath} />
                ))}
              </div>
            </div>

            {/* 기술 협력사 */}
            <div className="partners-section-row">
              <div className="partners-sidebar">
                <p className="partners-eyebrow">Partners</p>
                <div className="partners-heading-row">
                  <h2 className="partners-heading">
                    기술 <br /> 협력사
                  </h2>
                  <p className="partners-count">{PARTNERS.length}개사</p>
                </div>
              </div>
              <div className="partners-grid partners-grid--5">
                {PARTNERS.map((num) => (
                  <LogoCard key={num} logo={num} basePath={basePath} />
                ))}
              </div>
            </div>

            {/* CTA */}
            <section className="sub-section sub-fade-in">
              <div className="cta-box">
                <div
                  className="cta-bg"
                  style={{
                    backgroundImage: `url(${basePath}images/ctabackground.png)`,
                  }}
                />
                <div className="cta-content">
                  <p className="cta-eyebrow">Become a Partner</p>
                  <h3 className="cta-title">
                    팔네트웍스와 함께 성장할
                    <br />
                    파트너를 찾습니다
                  </h3>
                </div>
                <Link to="/contact/inquiry" className="cta-btn">
                  협력 문의하기
                </Link>
              </div>
            </section>
          </div>
        </div>
      </div>
    </article>
  );
}