import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import SubHero from "../../components/SubHero";
import FloatingKeywords from "../../components/FloatingKeywords";
import { useEffect, useRef } from "react";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import { useLanguage } from "../../context/LanguageContext";
gsap.registerPlugin(ScrollTrigger);

const heroRight = <FloatingKeywords />;

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

const COMPANY_NAV_EN = [
  { label: "About Us", to: "/company/about" },
  { label: "Certifications & Patents", to: "/company/cert" },
  { label: "History", to: "/company/history" },
  { label: "Clients & Partners", to: "/company/partners" },
  { label: "Location", to: "/company/location" },
];

const STATS = [
  { num: 160000, suffix: "대+", label: "국내 등록 드론 현황" },
  { num: 1500, suffix: "억$+", label: "UAM 시장 규모 (2040)" },
  { num: 300, suffix: "%+", label: "UAS·UAV 수요 증가율" },
];

const TECH_CARDS = [
  {
    icon: "ti-layers-intersect",
    title: "장애물 제한 표면 검토",
    desc: "비행 경로 상의 장애물 제한 표면을 정밀하게 분석하고 검토합니다.",
  },
  {
    icon: "ti-mountain",
    title: "지형 및 장애물 정보",
    desc: "실시간 지형 데이터와 장애물 정보를 통합하여 안전한 비행을 지원합니다.",
  },
  {
    icon: "ti-arrows-up",
    title: "비행가능 고도 표출",
    desc: "공역별 비행 가능한 고도 정보를 직관적으로 시각화합니다.",
  },
  {
    icon: "ti-map-pin",
    title: "NOTAM 및 지오펜스",
    desc: "항공 고시보와 지오펜스 정보를 실시간으로 반영하여 안전 공역을 관리합니다.",
  },
];

const MISSION_ITEMS_KO = [
  {
    num: "01",
    keyword: "INNOVATION",
    title: "혁신",
    desc: "효율적이고 혁신적인 기술로 항공산업 발전에 기여합니다.",
  },
  {
    num: "02",
    keyword: "TRUST",
    title: "신뢰",
    desc: "안전하고 신뢰할 수 있는 시스템을 구축합니다.",
  },
  {
    num: "03",
    keyword: "COOPERATION",
    title: "협력",
    desc: "파트너와 함께 성장하는 협력 생태계를 만들어갑니다",
  },
];

const MISSION_ITEMS_EN = [
  {
    num: "01",
    keyword: "INNOVATION",
    title: "Innovation",
    desc: "We contribute to the advancement of the aviation industry through efficient, innovative technology.",
  },
  {
    num: "02",
    keyword: "TRUST",
    title: "Trust",
    desc: "We build safe and reliable systems.",
  },
  {
    num: "03",
    keyword: "COOPERATION",
    title: "Cooperation",
    desc: "We build a collaborative ecosystem that grows together with our partners.",
  },
];

const PAGE_TEXT = {
  ko: {
    heroSub: "가치를 존중하며 신뢰를 바탕으로, 고객과 함께 지속 가능한 미래를 만들어갑니다.",
    companyLabel: "About PAL Networks",
    companyHeadingBlue: "항공·전문 IT산업분야의",
    companyHeadingPlain: "소프트웨어 개발 전문 기업",
    companyBody1: "항공·전문 IT산업분야의 소프트웨어 개발 전문 기업으로써 개발, 연구 & 컨설팅 등 기술력 기반으로 전문인력 중심으로 수행하고 있습니다.",
    companyBody2: "PAL은 모두 가깝게 오래 사귄 사람을 뜻하는 '친구'라는 의미와 좋은 친구 Good friend, 짝꿍 Mate란 의미입니다.",
    companyBody3: "PAL네트웍스는 사람에 따뜻한 가치를 존중하며, 신뢰를 바탕으로 실천하는 기업입니다.",
    companyImgAlt: "PAL Networks 소개",
    meaningLabel: "Brand Identity",
    meaningTitle: "PALNETWORKS의 의미",
    meaningCard1Title: "PAL — 친구 · Good friend · Mate",
    meaningCard1Desc: "오래 사귄 친구처럼 고객과 함께 성장하는 파트너십을 추구합니다",
    meaningCard2Title: "신뢰 · Trust",
    meaningCard2Desc: "신뢰를 바탕으로 사람에게 따뜻한 가치를 존중하며 실천하는 기업입니다",
    missionLabel: "Mission",
    missionTitle: (
      <>
        항공산업의 기술혁신 선도를 통한
        <br />
        파트너 고객만족 지원
      </>
    ),
    missionDesc: "미션은 효율적이고 혁신적인 기술로 항공산업에 이바지 하는 시스템과 관련기술을 구축 개발하여 대한민국의 현재와 미래 발전에 기여하는 것입니다.",
    ctaTitle: (
      <>
        PAL Networks와
        <br />
        함께 시작해보세요
      </>
    ),
    ctaDesc: (
      <>
        항공 IT 솔루션에 대한 문의, 협력 제안 무엇이든 환영합니다.
        <br />
        전문 인력이 빠르게 답변드리겠습니다.
      </>
    ),
    ctaLocation: "찾아오시는 길",
    ctaInquiry: "문의하기",
  },
  en: {
    heroSub: "Respecting values and building on trust, we create a sustainable future together with our customers.",
    companyLabel: "About PAL Networks",
    companyHeadingBlue: "In the Aviation & IT Industry,",
    companyHeadingPlain: "A Software Development Specialist",
    companyBody1: "As a software development specialist in the aviation and specialized IT industry, we carry out development, research, and consulting driven by technical expertise and skilled professionals.",
    companyBody2: "PAL means \u2018friend\u2019 \u2014 someone close who has stayed by your side for a long time \u2014 as well as Good Friend and Mate.",
    companyBody3: "PAL Networks is a company that respects the warm value of people and acts on a foundation of trust.",
    companyImgAlt: "About PAL Networks",
    meaningLabel: "Brand Identity",
    meaningTitle: "The Meaning of PALNETWORKS",
    meaningCard1Title: "PAL — Friend · Good Friend · Mate",
    meaningCard1Desc: "We pursue a partnership that grows together with our customers, like a long-time friend.",
    meaningCard2Title: "Trust",
    meaningCard2Desc: "We are a company built on trust, respecting and practicing warm values toward people.",
    missionLabel: "Mission",
    missionTitle: (
      <>
        Leading Technology Innovation
        <br />
        for Partner Satisfaction
      </>
    ),
    missionDesc: "Our mission is to build and develop systems and related technologies that contribute to the aviation industry through efficient, innovative technology, helping advance Korea's present and future.",
    ctaTitle: (
      <>
        Get Started
        <br />
        with PAL Networks
      </>
    ),
    ctaDesc: (
      <>
        Inquiries about aviation IT solutions or partnership proposals are always welcome.
        <br />
        Our specialists will respond quickly.
      </>
    ),
    ctaLocation: "Location",
    ctaInquiry: "Inquiry",
  },
};

export default function AboutPage() {
  const { lang, withLang } = useLanguage();
  const COMPANY_NAV = lang === "en" ? COMPANY_NAV_EN : COMPANY_NAV_KO;
  const MISSION_ITEMS = lang === "en" ? MISSION_ITEMS_EN : MISSION_ITEMS_KO;
  const t = PAGE_TEXT[lang];

  const basePath = import.meta.env.BASE_URL;

  const ref = useRef(null);
  const meaningCardsRef = useRef([]);
  const missionItemsRef = useRef([]);
  const certCardsRef = useRef([]);
  const imgMainRef = useRef(null);
  const imgSideRef = useRef(null);
  const companyTextRef = useRef(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      // 메인 이미지: 원 → 사각형
      gsap.fromTo(
        imgMainRef.current,
        { borderRadius: "50%", scale: 0.65, opacity: 0 },
        {
          scrollTrigger: {
            trigger: imgMainRef.current,
            start: "top 80%",
            toggleActions: "play none none none",
          },
          borderRadius: "20px",
          scale: 1,
          opacity: 1,
          duration: 1.2,
          ease: "power2.out",
        },
      );

      // 사이드 이미지: 원 → 사각형
      gsap.fromTo(
        imgSideRef.current,
        { borderRadius: "50%", scale: 0.5, opacity: 0 },
        {
          scrollTrigger: {
            trigger: imgSideRef.current,
            start: "top 85%",
            toggleActions: "play none none none",
          },
          borderRadius: "20px",
          scale: 1,
          opacity: 1,
          duration: 1.5,
          ease: "power2.out",
        },
      );

      // 텍스트 페이드인
      gsap.from(companyTextRef.current, {
        scrollTrigger: {
          trigger: companyTextRef.current,
          start: "top 80%",
          toggleActions: "play none none none",
        },
        x: -40,
        opacity: 0,
        duration: 0.9,
        ease: "power3.out",
      });

      // 의미 카드: 왼쪽/오른쪽에서 슬라이드인
      meaningCardsRef.current.forEach((card, i) => {
        gsap.from(card, {
          scrollTrigger: {
            trigger: card,
            start: "top 85%",
            toggleActions: "play none none none",
          },
          x: i === 0 ? -50 : 50,
          opacity: 0,
          duration: 0.8,
          ease: "power3.out",
        });
      });

      // 미션 아이템: stagger 페이드인
      gsap.from(missionItemsRef.current, {
        scrollTrigger: {
          trigger: missionItemsRef.current[0],
          start: "top 85%",
          toggleActions: "play none none none",
        },
        y: 30,
        opacity: 0,
        duration: 0.7,
        stagger: 0.15,
        ease: "power3.out",
      });

      // 특허 텍스트 박스
      gsap.from(".about-cert-patents", {
        scrollTrigger: {
          trigger: ".about-cert-patents",
          start: "top 85%",
          toggleActions: "play none none none",
        },
        y: 24,
        opacity: 0,
        duration: 0.7,
        ease: "power3.out",
      });

      // 인증 카드: 아래서 위로 stagger
      gsap.from(certCardsRef.current, {
        scrollTrigger: {
          trigger: ".about-cert-section",
          start: "top 60%",
          toggleActions: "play none none none",
        },
        y: 30,
        opacity: 0,
        duration: 0.8,
        stagger: {
          amount: 0.6,
          ease: "power1.out",
        },
        ease: "power2.out",
        clearProps: "all",
      });

      gsap.from(".about-cta-inner", {
        scrollTrigger: {
          trigger: ".about-cta-section",
          start: "top 80%",
          toggleActions: "play none none none",
        },
        y: 40,
        opacity: 0,
        duration: 0.9,
        ease: "power3.out",
      });
    }, ref);

    return () => ctx.revert();
  }, []);

  return (
    <article ref={ref}>
      <SubHero
        label="Company"
        title={
          <>
            <em>About Us</em>
          </>
        }
        navItems={COMPANY_NAV}
        rightSlot={heroRight}
      />

      <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">
              Values First,
              <br />
              <em>
                <span>Trust</span> <b>in Every Stepe</b>
              </em>
            </p>
            <em className="ht-header-sub">{t.heroSub}</em>
          </motion.div>

          {/* 회사 소개 */}
          <section className="about-company-section">
            <div className="about-company-inner">
              <div className="about-company-text" ref={companyTextRef}>
                <p className="about-section-label">{t.companyLabel}</p>
                <h3 className="about-company-heading">
                  <span className="blue">{t.companyHeadingBlue}</span>
                  <br />
                  {t.companyHeadingPlain}
                </h3>
                <p className="about-company-body">{t.companyBody1}</p>
                <p className="about-company-body">{t.companyBody2}</p>
                <p className="about-company-body">{t.companyBody3}</p>
              </div>

              <div className="about-img-group">
                <div className="about-img-main-wrap" ref={imgMainRef}>
                  <img src={`${basePath}images/aboutImg1.png`} alt={t.companyImgAlt} />{" "}
                </div>
                <div className="about-img-side-wrap" ref={imgSideRef}>
                  <img src={`${basePath}images/aboutImg1.png`} alt={t.companyImgAlt} />
                </div>
              </div>
            </div>
          </section>

          {/* PALNETWORKS 의미 */}
          <section className="about-meaning-section">
            <p className="about-section-label">{t.meaningLabel}</p>
            <h3 className="about-meaning-title">{t.meaningTitle}</h3>
            <div className="about-meaning-cards">
              <div className="about-meaning-card" ref={(el) => (meaningCardsRef.current[0] = el)}>
                <div className="about-meaning-card-keyword">FRIENDSHIP</div>
                <h4 className="about-meaning-card-title">{t.meaningCard1Title}</h4>
                <p className="about-meaning-card-desc">{t.meaningCard1Desc}</p>
              </div>
              <div className="about-meaning-card" ref={(el) => (meaningCardsRef.current[1] = el)}>
                <div className="about-meaning-card-keyword">RELIABILITY</div>
                <h4 className="about-meaning-card-title">{t.meaningCard2Title}</h4>
                <p className="about-meaning-card-desc">{t.meaningCard2Desc}</p>
              </div>
            </div>
          </section>

          {/* 미션 */}
          <section className="about-mission-section">
            <div className="about-mission-inner">
              <div className="about-mission-left">
                <p className="about-section-label">{t.missionLabel}</p>
                <h3 className="about-mission-title">{t.missionTitle}</h3>
                <p className="about-mission-desc">{t.missionDesc}</p>
              </div>

              <div className="about-mission-right">
                {MISSION_ITEMS.map((item, i) => (
                  <div key={i} className="about-mission-item" ref={(el) => (missionItemsRef.current[i] = el)}>
                    <span className="about-mission-item-num">{item.num}</span>
                    <div className="about-mission-item-body">
                      <div className="about-mission-item-top">
                        <h4 className="about-mission-item-title">{item.title}</h4>
                        <span className="about-mission-item-keyword">{item.keyword}</span>
                      </div>
                      <p className="about-mission-item-desc">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* 인증 및 특허 */}
          {/* <section className="about-cert-section">
            <p className="about-section-label">Certification</p>
            <h3 className="about-cert-title">인증 및 특허 현황</h3>

            <div className="about-cert-patents">
              <p className="about-cert-patents-desc">
                벤처기업등록 · 기업부설연구소 · 소프트웨어등록증 ·
                직접생산증명원 ADS-978(KC 인증) ·
                비행정보통합관리시스템(특허출원) · 항공기의 지상 이동 소요시간
                예측 시스템 및 방법(특허출원)
              </p>
            </div>

            <div className="about-cert-cards">
              {[
                {
                  year: "2018. 04",
                  title: "관광 사업 등록증",
                  desc: "관광 사업 등록",
                },
                {
                  year: "2018. 07",
                  title: "벤처기업 확인서",
                  desc: "벤처기업 인증",
                },
                {
                  year: "2018. 12",
                  title: "인천시 항공 유망 기업 인증",
                  desc: "인천시 항공 유망기업으로 선정",
                },
                {
                  year: "2020. 06",
                  title: "인천 관광벤처 인증",
                  desc: "인천 관광벤처 인증",
                },

                {
                  year: "2021. 03",
                  title: "KT 클라우드 총판",
                  desc: "KT 클라우드 인천 총판 등록",
                },
              ].map((item, i) => (
                <div
                  key={i}
                  className="about-cert-card"
                  ref={(el) => (certCardsRef.current[i] = el)}
                >
                  <div className="about-cert-card-icon">
                    <img
                      src={`${basePath}images/aboutIcon${i + 1}.png`}
                      alt=""
                    />
                  </div>
                  <span className="about-cert-card-year">{item.year}</span>
                  <h4 className="about-cert-card-title">{item.title}</h4>
                  <p className="about-cert-card-desc">{item.desc}</p>
                </div>
              ))}
            </div>
          </section> */}
        </div>
      </div>
      {/* CTA */}
      <section className="about-cta-section">
        <div className="about-cta-bg" />
        <div className="about-cta-img" style={{ backgroundImage: `url(${basePath}images/about_banner.png)` }} />
        <div className="about-cta-inner">
          <h3 className="about-cta-title">{t.ctaTitle}</h3>
          <p className="about-cta-desc">{t.ctaDesc}</p>
          <div className="about-cta-buttons">
            <Link to={withLang("/company/location")} className="about-cta-btn about-cta-btn--primary">
              {t.ctaLocation}
            </Link>
            <Link to={withLang("/contact")} className="about-cta-btn about-cta-btn--outline">
              {t.ctaInquiry}
            </Link>
          </div>
        </div>
      </section>
    </article>
  );
}