import SubHero from "../../components/SubHero";
import useFadeIn from "../../hooks/useFadeIn";
import { motion } from "framer-motion";
import { useState } from "react";
import { Link } from "react-router-dom";
import { useLanguage } from "../../context/LanguageContext";

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 INFO_KO = [
  {
    label: "주소",
    value: "인천광역시 서해구 로봇랜드로 155-11\n로봇랜드 14층 1401~2호",
  },
  { label: "전화", value: "032-727-5909", href: "tel:032-727-5909" },
  { label: "팩스", value: "032-727-5908" },
  {
    label: "이메일",
    value: "help@palnet.co.kr",
    href: "mailto:help@palnet.co.kr",
  },
];

const INFO_EN = [
  {
    label: "Address",
    value: "14F, 1401-2, Robot Land\n155-11 Robot Land-ro, Seo-gu, Incheon",
  },
  { label: "Phone", value: "032-727-5909", href: "tel:032-727-5909" },
  { label: "Fax", value: "032-727-5908" },
  {
    label: "Email",
    value: "help@palnet.co.kr",
    href: "mailto:help@palnet.co.kr",
  },
];

const INFO_MAGOK_KO = [
  {
    label: "주소",
    value: "서울특별시 강서구 공항대로 219\n서울마곡지구센테니아빌딩",
  },
  { label: "전화", value: "032-727-5909", href: "tel:032-727-5909" },
  {
    label: "이메일",
    value: "help@palnet.co.kr",
    href: "mailto:help@palnet.co.kr",
  },
];

const INFO_MAGOK_EN = [
  {
    label: "Address",
    value:
      "Seoul Magok District Centennia Building\n219 Gonghangdae-ro, Gangseo-gu, Seoul",
  },
  { label: "Phone", value: "032-727-5909", href: "tel:032-727-5909" },
  {
    label: "Email",
    value: "help@palnet.co.kr",
    href: "mailto:help@palnet.co.kr",
  },
];

const TRANSPORT_INCHEON_KO = [
  {
    badge: "대중교통",
    icon: "/images/subway.png",
    items: [
      {
        title: "공항철도 청라국제도시역",
        desc: "청라국제도시역 → 간선 2-1번 버스 승차 → 청라백세요양병원 정류장 하차 → 도보 10분 이동 → 로봇타워",
      },
      {
        title: "공항철도/인천2호선 검암역",
        desc: "검암역 → 간선 70번 버스 승차 → 청라로봇랜드 정류장 하차 → 로봇타워",
      },
    ],
  },
  {
    badge: "셔틀버스",
    icon: "/images/bus.png",
    items: [
      {
        title: "청라국제도시역 출발",
        desc: "청라역 1번출구 앞 → 로봇타워 앞 → 가정역 4번출구\n출발: 7:40 / 8:10 / 8:40 / 9:10 / 9:40",
      },
      {
        title: "가정역A 출발 (4번출구)",
        desc: "출발: 7:00 / 7:40 / 8:30 / 9:30",
      },
      {
        title: "가정역B 출발 (청라단지 경유)",
        desc: "출발: 7:20 / 8:20 / 9:20 / 9:30",
      },
    ],
  },
  {
    badge: "자가용",
    icon: "/images/car.png",
    items: [
      {
        title: "서울 출발",
        desc: "서울외곽순환고속도로(43.5㎞) → 인천국제공항고속도로(9.4㎞) → 청중로(4.3㎞) → 로봇랜드로 639m → 인천로봇랜드 로봇타워",
      },
      {
        title: "인천 출발",
        desc: "경인고속도로(10.3㎞) → 서곶로(0.7㎞) → 봉오대로(2.4㎞) → 서해교차로에서 경인항 방면 우회전 → 로봇랜드로 346m → 인천로봇랜드 로봇타워",
      },
    ],
  },
];

const TRANSPORT_INCHEON_EN = [
  {
    badge: "Public Transit",
    icon: "/images/subway.png",
    items: [
      {
        title: "Cheongna Int'l City Station (Airport Railroad)",
        desc: "Cheongna Int'l City Stn \u2192 Take Trunk Bus 2-1 \u2192 Get off at Cheongna Baekse Nursing Hospital stop \u2192 10-min walk \u2192 Robot Tower",
      },
      {
        title: "Geomam Station (Airport Railroad / Incheon Line 2)",
        desc: "Geomam Stn \u2192 Take Trunk Bus 70 \u2192 Get off at Cheongna Robot Land stop \u2192 Robot Tower",
      },
    ],
  },
  {
    badge: "Shuttle Bus",
    icon: "/images/bus.png",
    items: [
      {
        title: "Departs from Cheongna Int'l City Station",
        desc: "Cheongna Stn Exit 1 \u2192 Robot Tower \u2192 Gajeong Stn Exit 4\nDeparture: 7:40 / 8:10 / 8:40 / 9:10 / 9:40",
      },
      {
        title: "Departs from Gajeong Station A (Exit 4)",
        desc: "Departure: 7:00 / 7:40 / 8:30 / 9:30",
      },
      {
        title: "Departs from Gajeong Station B (via Cheongna Complex)",
        desc: "Departure: 7:20 / 8:20 / 9:20 / 9:30",
      },
    ],
  },
  {
    badge: "By Car",
    icon: "/images/car.png",
    items: [
      {
        title: "From Seoul",
        desc: "Seoul Ring Expressway (43.5km) \u2192 Incheon Int'l Airport Expwy (9.4km) \u2192 Cheongjung-ro (4.3km) \u2192 Robot Land-ro 639m \u2192 Incheon Robot Land Robot Tower",
      },
      {
        title: "From Incheon",
        desc: "Gyeongin Expwy (10.3km) \u2192 Seogot-ro (0.7km) \u2192 Bongodae-ro (2.4km) \u2192 Turn right toward Gyeongin Port at Seohae Intersection \u2192 Robot Land-ro 346m \u2192 Incheon Robot Land Robot Tower",
      },
    ],
  },
];

const TRANSPORT_MAGOK_KO = [
  {
    badge: "지하철",
    icon: "/images/subway.png",
    items: [
      {
        title: "5호선 마곡역",
        desc: "9번 출구 → 도보 약 5분 (공항대로 방향 직진, 서울마곡지구센테니아빌딩 도착)",
      },
    ],
  },
  {
    badge: "버스",
    icon: "/images/bus.png",
    items: [
      {
        title: "마곡역 정류장 하차",
        desc: "간선버스 601, 605, 654 이용 → 도보 약 5분 이동",
      },
    ],
  },
  {
    badge: "자가용",
    icon: "/images/car.png",
    items: [
      {
        title: "강남 출발",
        desc: "올림픽대로 → 방화대교 → 공항대로 진입 → 마곡역 사거리에서 좌회전 → 공항대로 219 도착 (약 40분 소요)",
      },
      {
        title: "인천 출발",
        desc: "경인고속도로 → 가양대교 → 공항대로 진입 → 마곡역 사거리에서 우회전 → 공항대로 219 도착 (약 50분 소요)",
      },
    ],
  },
];

const TRANSPORT_MAGOK_EN = [
  {
    badge: "Subway",
    icon: "/images/subway.png",
    items: [
      {
        title: "Magok Station (Line 5)",
        desc: "Exit 9 \u2192 About 5-min walk (straight toward Gonghangdae-ro, arrive at Seoul Magok District Centennia Building)",
      },
    ],
  },
  {
    badge: "Bus",
    icon: "/images/bus.png",
    items: [
      {
        title: "Get off at Magok Station stop",
        desc: "Take Trunk Bus 601, 605, or 654 \u2192 About 5-min walk",
      },
    ],
  },
  {
    badge: "By Car",
    icon: "/images/car.png",
    items: [
      {
        title: "From Gangnam",
        desc: "Olympic-daero \u2192 Banghwa Bridge \u2192 Enter Gonghangdae-ro \u2192 Turn left at Magok Stn intersection \u2192 Arrive at 219 Gonghangdae-ro (approx. 40 min)",
      },
      {
        title: "From Incheon",
        desc: "Gyeongin Expwy \u2192 Gayang Bridge \u2192 Enter Gonghangdae-ro \u2192 Turn right at Magok Stn intersection \u2192 Arrive at 219 Gonghangdae-ro (approx. 50 min)",
      },
    ],
  },
];

const MAP_INCHEON =
  "https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3164.5077769134846!2d126.60837056230932!3d37.51952592193411!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z7J247LKcIOuhnOu0h-uenOuTnA!5e0!3m2!1sko!2skr!4v1779870074094!5m2!1sko!2skr";
const MAP_MAGOK =
  "https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3162.80690228454!2d126.82939801231092!3d37.559612971923826!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z7IS87YWM64uI7JWE!5e0!3m2!1sko!2skr!4v1779871233362!5m2!1sko!2skr";

const PAGE_TEXT = {
  ko: {
    heroSub:
      "고객 여러분의 방문을 위해 팔네트웍스의 위치 정보를 안내해드립니다.",
    tabIncheon: "인천 본사",
    tabMagok: "마곡 지점",
    companyInfoLabel: "회사 정보",
    hoursLabel: "운영 시간",
    hoursText: (
      <>
        평일 09:00 – 18:00
        <br />
        <span className="location-hours-text">토·일·공휴일 휴무</span>
      </>
    ),
    inquiryBtn: "문의하기",
    transportTitle: "교통편 안내",
    mapTitle: "팔네트웍스 위치",
  },
  en: {
    heroSub: "For your visit, here is PAL Networks' location information.",
    tabIncheon: "Incheon HQ",
    tabMagok: "Magok Branch",
    companyInfoLabel: "Company Information",
    hoursLabel: "Business Hours",
    hoursText: (
      <>
        Weekdays 09:00 – 18:00
        <br />
        <span className="location-hours-text">
          Closed on weekends & holidays
        </span>
      </>
    ),
    inquiryBtn: "Inquiry",
    transportTitle: "Directions",
    mapTitle: "PAL Networks Location",
  },
};

export default function LocationPage() {
  const { lang, withLang } = useLanguage();
  const COMPANY_NAV = lang === "en" ? COMPANY_NAV_EN : COMPANY_NAV_KO;
  const INFO = lang === "en" ? INFO_EN : INFO_KO;
  const INFO_MAGOK = lang === "en" ? INFO_MAGOK_EN : INFO_MAGOK_KO;
  const TRANSPORT_INCHEON =
    lang === "en" ? TRANSPORT_INCHEON_EN : TRANSPORT_INCHEON_KO;
  const TRANSPORT_MAGOK =
    lang === "en" ? TRANSPORT_MAGOK_EN : TRANSPORT_MAGOK_KO;
  const t = PAGE_TEXT[lang];

  const ref = useFadeIn();
  const [tab, setTab] = useState("incheon");

  const isIncheon = tab === "incheon";
  const currentInfo = isIncheon ? INFO : INFO_MAGOK;
  const currentTransport = isIncheon ? TRANSPORT_INCHEON : TRANSPORT_MAGOK;
  const currentMap = isIncheon ? MAP_INCHEON : MAP_MAGOK;

  return (
    <article ref={ref}>
      <SubHero
        label="Company"
        title={
          <>
            <em>Location</em>
          </>
        }
        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">
              Find Us,
              <br />
              <em>
                <span>Here</span> <b>We Are</b>
              </em>
            </p>
            <em className="ht-header-sub">{t.heroSub}</em>
          </motion.div>

          <div className="location-tabs">
            <button
              className={`location-tab ${isIncheon ? "active" : ""}`}
              onClick={() => setTab("incheon")}
            >
              {t.tabIncheon}
            </button>
            <button
              className={`location-tab ${!isIncheon ? "active" : ""}`}
              onClick={() => setTab("magok")}
            >
              {t.tabMagok}
            </button>
          </div>

          <section className="sub-section">
            <div className="location-wrap">
              {/* 지도 */}
              <motion.div
                className="location-map-wrap"
                key={tab + "-map"}
                initial={{ opacity: 0, y: 24 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
              >
                <div className="location-map">
                  <iframe
                    src={currentMap}
                    allowFullScreen
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                    title={t.mapTitle}
                  />
                </div>
              </motion.div>

              {/* 회사 정보 */}
              <motion.div
                className="location-info-wrapper"
                initial={{ opacity: 0, y: 40 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-60px" }}
                transition={{
                  duration: 0.6,
                  ease: [0.4, 0, 0.2, 1],
                  delay: 0.15,
                }}
              >
                <p className="location-info-section-title">
                  {t.companyInfoLabel}
                </p>
                <motion.div
                  key={tab + "-info"}
                  className="location-info-card"
                  initial={{ opacity: 0, y: 24 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{
                    duration: 0.4,
                    ease: [0.4, 0, 0.2, 1],
                    delay: 0.1,
                  }}
                >
                  <h3>{isIncheon ? t.tabIncheon : t.tabMagok}</h3>
                  <ul className="location-info-list">
                    {currentInfo.map((item) => (
                      <li key={item.label} className="location-info-item">
                        <span className="location-info-label">
                          {item.label}
                        </span>
                        {item.href ? (
                          <a className="location-info-value" href={item.href}>
                            {item.value}
                          </a>
                        ) : (
                          <p
                            className="location-info-value"
                            style={{ margin: 0, whiteSpace: "pre-line" }}
                          >
                            {item.value}
                          </p>
                        )}
                      </li>
                    ))}
                  </ul>
                  <div className="location-hours">
                    <p className="location-hours-eyebrow">{t.hoursLabel}</p>
                    <p className="location-hours-label">{t.hoursText}</p>
                  </div>
                  <Link
                    to={withLang("/contact/inquiry")}
                    className="location-inquiry-btn"
                    onMouseEnter={(e) =>
                      (e.currentTarget.style.opacity = ".85")
                    }
                    onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
                  >
                    {t.inquiryBtn}
                  </Link>
                </motion.div>
              </motion.div>

              {/* 교통편 */}
              <motion.div
                className="location-transport-wrap"
                key={tab + "-transport"}
                initial={{ opacity: 0, y: 24 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
              >
                <div className="location-transport">
                  <h3 className="location-transport-title">
                    {t.transportTitle}
                  </h3>
                  <div className="location-transport-list">
                    {currentTransport.map((item, i) => (
                      <motion.div
                        key={item.badge}
                        className="location-transport-item"
                        initial={{ opacity: 0, y: 24 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{
                          duration: 0.5,
                          ease: [0.4, 0, 0.2, 1],
                          delay: i * 0.1,
                        }}
                      >
                        <div className="location-transport-item-top">
                          <div className="location-transport-icon">
                            <img src={item.icon} alt={item.badge} />
                          </div>
                          <span className="location-transport-badge">
                            {item.badge}
                          </span>
                        </div>
                        <div className="location-transport-routes">
                          {item.items.map((route, j) => (
                            <div key={j} className="location-transport-route">
                              <p className="location-transport-route-title">
                                {route.title}
                              </p>
                              <p className="location-transport-route-desc">
                                {route.desc}
                              </p>
                            </div>
                          ))}
                        </div>
                      </motion.div>
                    ))}
                  </div>
                </div>
              </motion.div>
            </div>
          </section>
        </div>
      </div>
    </article>
  );
}