pal-hom-2026/src/pages/company/AboutPage.jsx

import { useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import SubHero from "../../components/SubHero";

gsap.registerPlugin(ScrollTrigger);

const HERO_STATS = [
  { num: "2010", label: "설립연도" },
  { num: "50+", label: "완료 프로젝트" },
  { num: "15+", label: "주요 고객사" },
  { num: "10+", label: "R&D 전문인력" },
];

const heroRight = (
  <div className="ab-hero-stats">
    {HERO_STATS.map((s) => (
      <div className="ab-hero-stat" key={s.label}>
        <strong className="ab-hero-stat-num">{s.num}</strong>
        <span className="ab-hero-stat-lbl">{s.label}</span>
      </div>
    ))}
  </div>
);

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

const STATS = [
  { num: 2010, suffix: "", label: "설립연도", note: "FOUNDED" },
  { num: 50, suffix: "+", label: "완료 프로젝트", note: "PROJECTS" },
  { num: 15, suffix: "+", label: "주요 고객사", note: "CLIENTS" },
  { num: 10, suffix: "+", label: "R&D 전문인력", note: "EXPERTS" },
];

const VALUES = [
  { idx: "01", title: "기술 혁신", en: "Innovation", desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며 미래 모빌리티 시대를 선도합니다.", img: "/images/img1.jpg" },
  { idx: "02", title: "신뢰와 책임", en: "Trust", desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼 모든 서비스에 안전과 신뢰를 최우선으로 합니다.", img: "/images/img2.jpg" },
  { idx: "03", title: "파트너십", en: "Partnership", desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다.", img: "/images/img3.jpg" },
  { idx: "04", title: "전문성", en: "Expertise", desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다.", img: "/images/img4.jpg" },
];

const AWARDS = [
  { year: "2022", title: "인천 항공산업 선도기업 유망기업 선정", org: "인천시 · 인천테크노파크" },
  { year: "2021", title: "소프트웨어 품질인증 GS 인증 획득", org: "한국정보통신기술협회(TTA)" },
  { year: "2021", title: "기업부설연구소 인정", org: "한국산업기술진흥협회" },
  { year: "2020", title: "조달청 우수제품 지정", org: "비행상황관제 시스템" },
];

function animateCount(el, target, suffix, duration = 1800) {
  const from = target > 100 ? target - 4 : 0;
  let start = null;
  const step = (ts) => {
    if (!start) start = ts;
    const p = Math.min((ts - start) / duration, 1);
    const ease = 1 - Math.pow(1 - p, 4);
    el.textContent = Math.floor(from + (target - from) * ease) + suffix;
    if (p < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}

export default function AboutPage() {
  const statRefs = useRef([]);
  const statDone = useRef(false);

  useEffect(() => {
    const ctx = gsap.context(() => {
      /* ── 숫자 섹션 카운터 ── */
      ScrollTrigger.create({
        trigger: ".ab3-stats",
        start: "top 75%",
        onEnter: () => {
          if (statDone.current) return;
          statDone.current = true;
          statRefs.current.forEach((el, i) => {
            if (!el) return;
            setTimeout(() => animateCount(el, STATS[i].num, STATS[i].suffix), i * 100);
          });
        },
      });

      /* ── 숫자 카드 스태거 ── */
      gsap.fromTo(
        ".ab3-si",
        { opacity: 0, y: 50 },
        {
          opacity: 1,
          y: 0,
          stagger: 0.12,
          duration: 0.9,
          ease: "power3.out",
          scrollTrigger: { trigger: ".ab3-stats", start: "top 78%" },
        },
      );

      /* ── 철학 섹션 핀 + 텍스트 순차 reveal ── */
      gsap.fromTo(
        ".ab3-phil-line",
        { opacity: 0, y: 80 },
        {
          opacity: 1,
          y: 0,
          stagger: 0.15,
          duration: 1.1,
          ease: "power4.out",
          scrollTrigger: { trigger: ".ab3-phil", start: "top 65%" },
        },
      );
      gsap.fromTo(
        ".ab3-phil-sub",
        { opacity: 0, x: 40 },
        {
          opacity: 1,
          x: 0,
          duration: 1,
          ease: "power3.out",
          scrollTrigger: { trigger: ".ab3-phil", start: "top 55%" },
        },
      );

      /* ── 가치 섹션 라인 애니 ── */
      gsap.fromTo(
        ".ab3-val-row",
        { opacity: 0, x: -40 },
        {
          opacity: 1,
          x: 0,
          stagger: 0.1,
          duration: 0.8,
          ease: "power3.out",
          scrollTrigger: { trigger: ".ab3-vals", start: "top 72%" },
        },
      );

      /* ── 수상 ── */
      gsap.fromTo(
        ".ab3-awd-item",
        { opacity: 0, y: 30 },
        {
          opacity: 1,
          y: 0,
          stagger: 0.1,
          duration: 0.7,
          ease: "power2.out",
          scrollTrigger: { trigger: ".ab3-awds", start: "top 75%" },
        },
      );

      /* ── CTA ── */
      gsap.fromTo(
        ".ab3-cta-inner > *",
        { opacity: 0, y: 40 },
        {
          opacity: 1,
          y: 0,
          stagger: 0.12,
          duration: 0.9,
          ease: "power2.out",
          scrollTrigger: { trigger: ".ab3-cta", start: "top 75%" },
        },
      );
    });
    return () => ctx.revert();
  }, []);

  return (
    <article className="ab3">
      <SubHero title={"가치를 실천하는\n항공 IT 전문기업"} desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다." navItems={COMPANY_NAV} rightSlot={heroRight} />

      {/* ── STATS ── */}
      <section className="ab3-stats">
        <div className="ab3-stats-bg" />
        <div className="ab3-stats-inner">
          <p className="ab3-label">PAL Networks in Numbers</p>
          <div className="ab3-stats-grid">
            {STATS.map((s, i) => (
              <div className="ab3-si" key={s.note}>
                <span className="ab3-si-note">{s.note}</span>
                <strong className="ab3-si-num" ref={(el) => (statRefs.current[i] = el)}>
                  {s.num}
                  {s.suffix}
                </strong>
                <span className="ab3-si-lbl">{s.label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PHILOSOPHY (영상 배경 + 텍스트) ── */}
      <section className="ab3-phil">
        <video className="ab3-phil-vid" src="/images/uam.mp4" autoPlay muted loop playsInline />
        <div className="ab3-phil-overlay" />
        <div className="ab3-phil-inner">
          <div className="ab3-phil-left">
            <p className="ab3-label ab3-label--light">Our Philosophy</p>
            <div className="ab3-phil-words">
              <span className="ab3-phil-line">항공산업의</span>
              <span className="ab3-phil-line">기술혁신을</span>
              <span className="ab3-phil-line ab3-phil-line--accent">선도합니다.</span>
            </div>
          </div>
          <div className="ab3-phil-sub">
            <div className="ab3-phil-badge">
              <span>2010년 설립 이후</span>
              <strong>항공 IT 한 길</strong>
            </div>
            <p className="ab3-phil-body">팔네트웍스는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM 솔루션까지 항공 IT 분야의 핵심 기술을 꾸준히 개발해왔습니다. 인천광역시 로봇랜드에서 UAM/UATM 미래 기술을 선행 연구하고 있습니다.</p>
          </div>
        </div>
      </section>

      {/* ── CORE VALUES ── */}
      <section className="ab3-vals">
        <div className="ab3-vals-inner">
          <div className="ab3-vals-head">
            <p className="ab3-label">Core Values</p>
            <h2 className="ab3-vals-title">
              우리가
              <br />
              지키는 가치
            </h2>
          </div>
          <div className="ab3-vals-list">
            {VALUES.map((v) => (
              <div className="ab3-val-row" key={v.idx} style={{ "--val-img": `url(${v.img})` }}>
                <div className="ab3-val-img" />
                <div className="ab3-val-meta">
                  <span className="ab3-val-idx">{v.idx}</span>
                  <span className="ab3-val-en">{v.en}</span>
                </div>
                <h3 className="ab3-val-name">{v.title}</h3>
                <p className="ab3-val-desc">{v.desc}</p>
                <span className="ab3-val-arr">→</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── AWARDS ── */}
      <section className="ab3-awds">
        <div className="ab3-awds-bg" />
        <div className="ab3-awds-inner">
          <div className="ab3-awds-head">
            <p className="ab3-label ab3-label--light">Certifications & Awards</p>
            <h2 className="ab3-awds-title">인증 및 수상</h2>
          </div>
          <ul className="ab3-awds-list">
            {AWARDS.map((a, i) => (
              <li className="ab3-awd-item" key={i}>
                <span className="ab3-awd-yr">{a.year}</span>
                <div className="ab3-awd-line" />
                <div className="ab3-awd-body">
                  <strong className="ab3-awd-name">{a.title}</strong>
                  <span className="ab3-awd-org">{a.org}</span>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="ab3-cta">
        <div className="ab3-cta-bg" />
        <div className="ab3-cta-inner">
          <span className="ab3-cta-chip">Contact Us</span>
          <h2 className="ab3-cta-title">
            팔네트웍스와
            <br />
            함께하세요
          </h2>
          <p className="ab3-cta-desc">파트너십 문의, 채용, 사업 협력 등 무엇이든 편하게 연락주세요.</p>
          <div className="ab3-cta-btns">
            <Link to="/contact/inquiry" className="ab3-cta-btn ab3-cta-btn--fill">
              문의하기
            </Link>
            <Link to="/contact/recruit" className="ab3-cta-btn ab3-cta-btn--line">
              채용 안내
            </Link>
          </div>
        </div>
      </section>
    </article>
  );
}