/* global React, Placeholder, Chevron, Nav, Footer */

/* ─── Subpage shell ─── */
function PageShell({ children }) {
  return (
    <div>
      <Nav />
      <main>{children}</main>
      <Footer />
    </div>
  );
}

/* ─── Page hero (reusable) ─── */
function PageHero({ title, subtitle }) {
  return (
    <section className="jw-sec jw-sec-dark" style={{ padding: "60px 0 48px" }}>
      <div className="jw-container">
        <h1
          style={{
            fontSize: "clamp(29px,4vw,45px)",
            fontWeight: 700,
            color: "#fff",
            margin: "0 0 12px",
          }}
        >
          {title}
        </h1>
        {subtitle && (
          <p
            style={{
              fontSize: "17px",
              color: "rgba(255,255,255,0.75)",
              margin: 0,
              maxWidth: 560,
            }}
          >
            {subtitle}
          </p>
        )}
      </div>
    </section>
  );
}

/* ─── Card list (reusable) ─── */
function CardGrid({ items }) {
  return (
    <section className="jw-sec jw-sec-light">
      <div className="jw-container">
        <div className="jw-feat-grid">
          {items.map((item, i) => (
            <a
              key={i}
              className="jw-feat-card"
              href={item.href || "#"}
              style={{ textDecoration: "none" }}
            >
              <Placeholder
                ratio="16 / 10"
                tone={item.tone || "blue"}
                label={item.title}
              />
              {item.kind && <p className="jw-feat-kind">{item.kind}</p>}
              <h3 className="jw-feat-title">{item.title}</h3>
              {item.body && (
                <p
                  style={{
                    fontSize: "0.9rem",
                    color: "var(--yj-mid-gray)",
                    margin: "4px 0 0",
                  }}
                >
                  {item.body}
                </p>
              )}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Detail page (single item) ─── */
function DetailPage({ title, subtitle, tone, sections }) {
  return (
    <PageShell>
      <PageHero title={title} subtitle={subtitle} tone={tone} />
      <section className="jw-sec jw-sec-light">
        <div className="jw-container">
          <div
            style={{
              display: "flex",
              gap: "40px",
              flexWrap: "wrap",
              alignItems: "flex-start",
            }}
          >
            <div style={{ flex: "1 1 320px" }}>
              <Placeholder ratio="4 / 3" tone={tone || "blue"} label={title} />
            </div>
            <div style={{ flex: "2 1 320px" }}>
              {sections &&
                sections.map((s, i) => (
                  <div key={i} style={{ marginBottom: "28px" }}>
                    {s.heading && (
                      <h2
                        style={{
                          fontSize: "1.2rem",
                          fontWeight: 700,
                          marginBottom: "8px",
                        }}
                      >
                        {s.heading}
                      </h2>
                    )}
                    <p
                      style={{
                        fontSize: "0.97rem",
                        lineHeight: 1.75,
                        color: "var(--yj-mid-gray)",
                      }}
                    >
                      {s.body}
                    </p>
                  </div>
                ))}
            </div>
          </div>
        </div>
      </section>
    </PageShell>
  );
}

/* ══════════════════════════════════════════
   구역알기 (District) pages
══════════════════════════════════════════ */
function DistrictOverviewPage() {
  const districts = [
    {
      title: "전포동 빌라",
      href: "#/구역알기/전포동-빌라",
      tone: "blue",
      kind: "구역",
      body: "전포동 일대 빌라 구역 안내",
    },
    {
      title: "양정 스윗첸",
      href: "#/구역알기/양정-스윗첸",
      tone: "indigo",
      kind: "구역",
      body: "양정동 스윗첸 아파트 구역 안내",
    },
    {
      title: "부전동 2번출구",
      href: "#/구역알기/부전동-2번출구",
      tone: "teal",
      kind: "구역",
      body: "부전역 2번 출구 주변 구역 안내",
    },
    {
      title: "기타 구역",
      href: "#/구역알기/기타",
      tone: "slate",
      kind: "구역",
      body: "그 외 기타 구역 안내",
    },
  ];
  return (
    <PageShell>
      <PageHero
        title="구역알기"
        subtitle="양정 회중 구역 정보를 확인하세요."
        tone="blue"
      />
      <CardGrid items={districts} />
    </PageShell>
  );
}

function JeonpoDongPage() {
  return (
    <DetailPage
      title="전포동 빌라"
      subtitle="전포동 일대 빌라 구역 안내입니다."
      tone="blue"
      sections={[
        {
          heading: "구역 위치",
          body: "부산광역시 부산진구 전포동 일대의 빌라 구역입니다. 주요 랜드마크를 기준으로 구역이 나뉘어져 있습니다.",
        },
        {
          heading: "봉사 포인트",
          body: "해당 구역을 봉사할 때 참고할 주요 포인트와 유의사항을 확인하세요. 골목 진입 시 주차 공간이 좁으니 유의하시기 바랍니다.",
        },
        {
          heading: "연락처",
          body: "구역 담당 형제자매에게 문의하시면 더 자세한 안내를 받으실 수 있습니다.",
        },
      ]}
    />
  );
}

function YangjeongSuichenPage() {
  return (
    <DetailPage
      title="양정 스윗첸"
      subtitle="양정동 스윗첸 아파트 구역 안내입니다."
      tone="indigo"
      sections={[
        {
          heading: "구역 위치",
          body: "부산광역시 부산진구 양정동 스윗첸 아파트 단지 구역입니다. 아파트 동별로 구역이 배정되어 있습니다.",
        },
        {
          heading: "봉사 포인트",
          body: "인터폰을 통한 방문 봉사가 주를 이룹니다. 관리사무소 안내에 따라 봉사를 진행해 주세요.",
        },
        {
          heading: "연락처",
          body: "구역 담당 형제자매에게 문의하시면 더 자세한 안내를 받으실 수 있습니다.",
        },
      ]}
    />
  );
}

function BujeonDongPage() {
  return (
    <DetailPage
      title="부전동 2번출구"
      subtitle="부전역 2번 출구 주변 구역 안내입니다."
      tone="teal"
      sections={[
        {
          heading: "구역 위치",
          body: "부전역 2번 출구를 기준으로 하는 상업 지역 및 주거 구역입니다. 유동인구가 많아 비공식 증거 활동에 적합합니다.",
        },
        {
          heading: "봉사 포인트",
          body: "지하철역 출구 주변은 대화를 시작하기 좋은 환경입니다. 시간대별 유동 인구를 고려하여 봉사 시간을 조율하세요.",
        },
        {
          heading: "연락처",
          body: "구역 담당 형제자매에게 문의하시면 더 자세한 안내를 받으실 수 있습니다.",
        },
      ]}
    />
  );
}

function OtherDistrictPage() {
  return (
    <DetailPage
      title="기타 구역"
      subtitle="그 외 기타 구역에 대한 안내입니다."
      tone="slate"
      sections={[
        {
          heading: "안내",
          body: "기타 구역에 대한 정보는 순차적으로 업데이트될 예정입니다. 담당 형제자매에게 직접 문의해 주세요.",
        },
      ]}
    />
  );
}

/* ══════════════════════════════════════════
   맛집 pages
══════════════════════════════════════════ */
function RestaurantOverviewPage() {
  const categories = [
    { title: "맛집", href: "#/맛집/우정", tone: "warm", kind: "식당 · 밥집" },
    { title: "카페", href: "#/맛집/카페", tone: "sand", kind: "카페 · 디저트" },
    {
      title: "추천관광",
      href: "#/맛집/추천관광",
      tone: "teal",
      kind: "관광 · 나들이",
    },
    {
      title: "장보기",
      href: "#/맛집/장보기",
      tone: "blue",
      kind: "마트 · 시장",
    },
  ];
  return (
    <PageShell>
      <PageHero title="맛집-핫플" subtitle="카테고리를 선택하세요." />
      <section className="jw-sec jw-sec-dark">
        <div className="jw-container">
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
              gap: 20,
              padding: "8px 0",
            }}
          >
            {categories.map((cat) => (
              <a
                key={cat.title}
                href={cat.href}
                style={{
                  textDecoration: "none",
                  borderRadius: 14,
                  overflow: "hidden",
                  boxShadow: "0 4px 20px rgba(0,0,0,0.4)",
                  background: "#1a1a1a",
                  border: "1px solid #333",
                  display: "flex",
                  flexDirection: "column",
                }}
              >
                <Placeholder
                  ratio="4 / 3"
                  tone={cat.tone}
                  label={cat.title}
                  radius="0"
                />
                <div style={{ padding: "14px 16px" }}>
                  <p
                    style={{
                      fontSize: "0.78rem",
                      color: "rgba(255,255,255,0.5)",
                      margin: "0 0 4px",
                    }}
                  >
                    {cat.kind}
                  </p>
                  <h3
                    style={{
                      fontSize: "1.1rem",
                      fontWeight: 700,
                      margin: 0,
                      color: "#fff",
                    }}
                  >
                    {cat.title}
                  </h3>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </PageShell>
  );
}

function RestaurantDetailPage({ title, kind, tone, address, menu, tip }) {
  return (
    <DetailPage
      title={title}
      subtitle={kind}
      tone={tone}
      sections={[
        { heading: "위치", body: address || "부산광역시 부산진구 양정동 일대" },
        {
          heading: "추천 메뉴",
          body: menu || "대표 메뉴 정보가 준비 중입니다.",
        },
        { heading: "방문 팁", body: tip || "방문 전 영업 시간을 확인하세요." },
      ]}
    />
  );
}

function TaeJinGalbiPage() {
  return (
    <RestaurantDetailPage
      title="태진갈비"
      kind="한식 · 갈비 전문점"
      tone="warm"
      address="부산광역시 부산진구 양정동 일대. 양정역 근처에 위치해 접근성이 좋습니다."
      menu="돼지갈비, 소갈비, 갈비탕. 점심 특선 메뉴도 있습니다."
      tip="주말 저녁은 대기가 길 수 있으니 예약 후 방문을 권장합니다."
    />
  );
}

function SamoNimPage() {
  return (
    <RestaurantDetailPage
      title="사모님돈가스"
      kind="일식 · 수제 돈가스"
      tone="sand"
      address="부산광역시 부산진구 양정동. 조용한 골목 안쪽에 위치합니다."
      menu="치즈돈가스, 로스돈가스, 함박스테이크. 세트 메뉴 구성이 다양합니다."
      tip="양이 넉넉하여 배부르게 드실 수 있습니다. 점심 시간에 특히 인기가 많습니다."
    />
  );
}

function DeopbapPage() {
  return (
    <RestaurantDetailPage
      title="덮밥 본점"
      kind="한식 · 덮밥 전문"
      tone="warm"
      address="부산광역시 부산진구 양정동 본점. 합리적인 가격으로 즐길 수 있습니다."
      menu="제육덮밥, 닭갈비덮밥, 참치마요덮밥, 김치볶음밥."
      tip="빠른 서비스로 바쁜 점심 시간에 이용하기 좋습니다."
    />
  );
}

/* ─── 우정 맛집 리스트 ─── */
const WOOJUNG_RESTAURANTS = [
  {
    name: "소문난장터돼지국밥",
    address: "부산 부산진구 동천로132번길 24",
    category: "국밥",
    tone: "warm",
    image: "images/restaurants/1.jpeg",
  },
  {
    name: "두번째 늘해랑",
    address: "부산 부산진구 양지로5번길 24 1층",
    category: "국밥",
    tone: "warm",
    image: "images/restaurants/2.jpeg",
    note: "부산시가 꼽은 돼지국밥 맛집",
  },
  {
    name: "신촌돌솥설렁탕",
    address: "부산 연제구 연수로 69",
    category: "국밥",
    tone: "warm",
    image: "images/restaurants/3.jpeg",
    note: "증인 1,000원 할인해주심",
  },
  {
    name: "고집센그집갈비탕",
    address: "부산 부산진구 동평로406번길 39",
    category: "국밥",
    tone: "warm",
    image: "images/restaurants/res-04.jpg",
  },
  {
    name: "풍미추어탕",
    address: "부산 부산진구 양연로 4",
    category: "국밥",
    tone: "warm",
    image: "images/restaurants/res-05.jpg",
  },
  {
    name: "송원정",
    address: "부산 부산진구 서전로9번길 57",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-06.jpg",
  },
  {
    name: "태백관",
    address: "부산 부산진구 서전로9번길 52",
    category: "중식-대만식",
    tone: "indigo",
    image: "images/restaurants/res-07.jpg",
  },
  {
    name: "개미집 서면2호본점",
    address: "부산 부산진구 중앙대로680번가길 33-7",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-07.jpg",
  },
  {
    name: "서울깍두기",
    address: "부산 부산진구 서전로9번길 32",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-08.jpg",
  },
  {
    name: "삼오정 서면점",
    address: "부산 부산진구 서면로68번길 11",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-09.jpg",
  },
  {
    name: "양산도 본점",
    address: "부산 부산진구 동천로 58",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-10.jpg",
  },
  {
    name: "장모족발 서면점",
    address: "부산 부산진구 동천로132번길 6",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-11.jpg",
  },
  {
    name: "금빛코다리 양정점",
    address: "부산 부산진구 연수로 15-1 동경빌딩 1층 금빛코다리",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-12.jpg",
    note: "요즘 뜨는 곳",
  },
  {
    name: "제일류식당",
    address: "부산 부산진구 동성로 140 청아리치타운 1층 102호",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-01.jpg",
    note: "연구생이 하는 냉삼집. 점심 불백 맛남",
  },
  {
    name: "해피해피크닉 샐러드&샌드위치",
    address: "부산 부산진구 동성로 118",
    category: "한식",
    tone: "teal",
    image: "images/restaurants/res-13.jpg",
  },
  {
    name: "우정돌솥비빔밥 서면점",
    address: "부산 부산진구 동천로85번길 3",
    category: "한식",
    tone: "warm",
    image: "images/restaurants/res-19.jpg",
  },
  {
    name: "동해물회",
    address: "부산 부산진구 서전로 15",
    category: "해산물",
    tone: "teal",
    image: "images/restaurants/res-21.jpg",
  },
  {
    name: "팔딱팔딱횟집",
    address: "부산 부산진구 전포대로210번길 40",
    category: "해산물",
    tone: "teal",
    image: "images/restaurants/res-20.jpg",
  },
  {
    name: "경찰서옆초밥집",
    address: "부산 부산진구 부전로 92",
    category: "일식",
    tone: "indigo",
    image: "images/restaurants/res-22.jpg",
  },
  {
    name: "칸다소바 부전동점",
    address: "부산 부산진구 동천로 105",
    category: "일식",
    tone: "indigo",
    image: "images/restaurants/res-23.jpg",
    note: "줄 서서 먹는 곳",
  },
  {
    name: "전포오지상 마제&카레",
    address: "부산 부산진구 전포대로223번길 10 1층",
    category: "일식",
    tone: "indigo",
    image: "images/restaurants/res-24.jpg",
    note: "라멘 1만원. 보통 줄 안 서고 먹을 수 있음. 주차 안됨",
  },
  {
    name: "사모님돈가스 쥬니어",
    address: "부산 부산진구 서전로58번길 79",
    category: "돈가스·피자",
    tone: "sand",
    image: "images/restaurants/res-25.jpg",
  },
  {
    name: "포면당",
    address: "부산 부산진구 전포대로275번길 53",
    category: "베트남",
    tone: "slate",
    image: "images/restaurants/res-26.jpg",
  },
  {
    name: "포포포 서면전포점",
    address: "부산 부산진구 전포대로209번길 39-9",
    category: "베트남",
    tone: "slate",
    image: "images/restaurants/res-27.jpg",
    note: "베트남 국수가 땡길 때",
  },
  {
    name: "메밀고밀면",
    address: "부산 부산진구 새싹로28번길 15",
    category: "면류",
    tone: "slate",
    image: "images/restaurants/res-28.jpg",
    note: "시원한 밀면",
  },
  {
    name: "영자면옥",
    address: "부산 부산진구 중앙대로 763",
    category: "면류",
    tone: "slate",
    image: "images/restaurants/res-29.jpg",
  },
  {
    name: "춘하추동밀면 서면본점",
    address: "부산 부산진구 서면문화로 48-1",
    category: "면류",
    tone: "slate",
    image: "images/restaurants/res-30.jpg",
    note: "시원한 밀면",
  },
  {
    name: "전포밀면",
    address: "부산 부산진구 전포대로200번길 21-1",
    category: "면류",
    tone: "slate",
    image: "images/restaurants/res-31.jpg",
  },
  {
    name: "함흥면옥",
    address: "부산 부산진구 새싹로 30",
    category: "면류",
    tone: "night",
    image: "images/restaurants/res-32.jpg",
  },
  {
    name: "이바돔감자탕 전포점",
    address: "부산 부산진구 중앙대로 808",
    category: "고기",
    tone: "warm",
    image: "images/restaurants/res-33.jpg",
  },
  {
    name: "맛나감자탕 연제구청점",
    address: "부산 연제구 양연로 3",
    category: "고기",
    tone: "warm",
    image: "images/restaurants/res-34.jpg",
  },
  {
    name: "조선화로집 전포점",
    address: "부산 부산진구 중앙대로 792",
    category: "고기",
    tone: "warm",
    image: "images/restaurants/res-35.jpg",
  },
  {
    name: "태진숯불갈비",
    address: "부산 부산진구 동성로 133 동연아미가",
    category: "고기",
    tone: "warm",
    image: "images/restaurants/res-36.jpg",
    note: "점심특선 운영. 갈비보다 탕류 추천",
  },
  {
    name: "고래실찌개밥상 부전점",
    address: "부산 부산진구 서전로9번길 58",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-37.jpg",
  },
  {
    name: "명동찌개마을 양정점",
    address: "부산 부산진구 양지로5번길 23",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-38.jpg",
    note: "가성비 갑! 김치찌개",
  },
  {
    name: "남해장어",
    address: "부산 부산진구 부전로 125",
    category: "장어",
    tone: "teal",
    image: "images/restaurants/res-39.jpg",
    note: "부산식 추어탕 맛집",
  },
  {
    name: "통영맛집장어탕장어구이",
    address: "부산 부산진구 연수로54번길 14",
    category: "장어",
    tone: "teal",
    image: "images/restaurants/res-40.jpg",
    note: "부산식 추어탕 맛집",
  },
  {
    name: "주차장산꼼장어 본점",
    address: "부산 부산진구 부전로 176",
    category: "장어",
    tone: "teal",
    image: "images/restaurants/res-41.jpg",
  },
  {
    name: "꼬막짬뽕",
    address: "부산 부산진구 동천로 109",
    category: "중식-대만식",
    tone: "indigo",
    image: "images/restaurants/res-15.jpg",
  },
  {
    name: "굿모닝홍콩 전포",
    address: "부산 부산진구 서전로47번길 19",
    category: "중식-대만식",
    tone: "indigo",
    image: "images/restaurants/res-16.jpg",
    note: "홍콩음식·밀크티 맛집",
  },
  {
    name: "흥화반점",
    address: "부산 부산진구 서전로47번길 52-1",
    category: "중식-대만식",
    tone: "indigo",
    image: "images/restaurants/res-17.jpg",
  },
  {
    name: "송화강",
    address: "부산 부산진구 거제대로60번길 25",
    category: "중식-대만식",
    tone: "indigo",
    image: "images/restaurants/res-18.jpg",
  },
  {
    name: "비엣소셜클럽",
    address: "부산 부산진구 전포대로256번길 20-4 1층",
    category: "베트남",
    tone: "teal",
    image: "images/restaurants/res-42.jpg",
    note: "쌀국수 약 1만원. 신화주차장 1천원 지원",
  },
  {
    name: "반핀 서면전포점",
    address: "부산 부산진구 동천로108번길 9 1층",
    category: "중식-대만식",
    tone: "teal",
    image: "images/restaurants/res-43.jpg",
  },
  {
    name: "먹담뷔페 & 도시락",
    address: "부산 부산진구 중앙대로680번길 39 2층",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-44.jpg",
  },
  {
    name: "반들한식뷔페",
    address: "부산 부산진구 중앙대로 679-8",
    category: "한식",
    tone: "blue",
    image: "images/restaurants/res-45.jpg",
    note: "한식 뷔페, 자주 방문",
  },
  {
    name: "나폴리화덕 남포동점",
    address: "부산 중구 광복로85번길 5-3",
    category: "돈가스·피자",
    tone: "warm",
    image: "images/restaurants/res-46.jpg",
    note: "우리 구역은 아님, 남포동쪽",
  },
  {
    name: "다리원단팥죽",
    address: "부산 부산진구 중앙대로783번길 23 B동 1층 339호",
    category: "간식",
    tone: "sand",
    image: "images/restaurants/res-47.jpg",
    note: "대왕붕어빵도 판매",
  },
  {
    name: "돌고래할매복국",
    address: "부산 부산진구 서면",
    category: "국밥",
    tone: "warm",
    image: "images/restaurants/res-48.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EB%8F%8C%EA%B3%A0%EB%9E%98%ED%95%A0%EB%A7%A4%EB%B3%B5%EA%B5%AD/place/11842186?isCorrectAnswer=true&c=15.00,0,0,0,dh",
  },
  {
    name: "문화양곱창",
    address: "부산 부산진구 서면",
    category: "고기",
    tone: "warm",
    image: "images/restaurants/res-49.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EB%AC%B8%ED%99%94%EC%96%91%EA%B3%B1%EC%B0%BD/place/1644501282?c=15.00,0,0,0,dh",
  },
  {
    name: "청진동 아구찜",
    address: "부산 부산진구 서면",
    category: "해산물",
    tone: "warm",
    image: "images/restaurants/res-50.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EC%B2%AD%EC%A7%84%EB%8F%99%20%EC%95%84%EA%B5%AC%EC%B0%9C/place/16432607?c=12.00,0,0,0,dh",
  },
  {
    name: "거인통닭 서면점",
    address: "부산 부산진구 서면",
    category: "치킨",
    tone: "blue",
    image: "images/restaurants/res-51.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EA%B1%B0%EC%9D%B8%ED%86%B5%EB%8B%AD%20%EC%84%9C%EB%A9%B4%EC%A0%90/place/1233371138?c=15.00,0,0,0,dh",
  },
  {
    name: "길촌숯불갈비 서면본점",
    address: "부산 부산진구 서면",
    category: "고기",
    tone: "warm",
    image: "images/restaurants/res-52.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EA%B8%B8%EC%B4%8C%EC%88%AF%EB%B6%88%EA%B0%88%EB%B9%84%20%EC%84%9C%EB%A9%B4%EB%B3%B8%EC%A0%90/place/1554022736?c=15.00,0,0,0,dh",
  },
  {
    name: "바오하우스",
    address: "부산 부산진구 서면",
    category: "중식-대만식",
    tone: "teal",
    image: "images/restaurants/res-53.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EB%B0%94%EC%98%A4%ED%95%98%EC%9A%B0%EC%8A%A4/place/1774734875?c=15.00,0,0,0,dh",
  },
  {
    name: "룽위엔",
    address: "부산 부산진구 서면",
    category: "중식-대만식",
    tone: "indigo",
    image: "images/restaurants/res-54.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EB%A3%BD%EC%9C%84%EC%97%94/place/16455359?c=15.00,0,0,0,dh",
  },
  {
    name: "이재모 피자",
    address: "부산 부산진구 서면",
    category: "돈가스·피자",
    tone: "warm",
    image: "images/restaurants/res-55.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EC%9D%B4%EC%9E%AC%EB%AA%A8%20%ED%94%BC%EC%9E%90/place/1103167364?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EC%9D%B4%EC%9E%AC%EB%AA%A8%20%ED%94%BC%EC%9E%90&entry=pll&from=map&fromPanelNum=2&timestamp=202604271550&locale=ko&svcName=map_pcv5&searchText=%EC%9D%B4%EC%9E%AC%EB%AA%A8%20%ED%94%BC%EC%9E%90",
  },
  {
    name: "돼지나무사랑걸렸네",
    address: "부산 부산진구 서면",
    category: "고기",
    tone: "warm",
    image: "images/restaurants/res-56.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EC%84%9C%EB%A9%B4+%EB%8F%BC%EC%A7%80%EB%82%98%EB%AC%B4+%EC%82%AC%EB%9E%91%EA%B1%B8%EB%A0%B8%EB%84%A4/place/1369796189?isCorrectAnswer=true",
  },
];

function MapPinIcon() {
  return (
    <svg
      width="14"
      height="14"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      style={{ flexShrink: 0, marginTop: 1 }}
    >
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  );
}

function ExternalLinkIcon() {
  return (
    <svg
      width="11"
      height="11"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2.2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
      <polyline points="15 3 21 3 21 9" />
      <line x1="10" y1="14" x2="21" y2="3" />
    </svg>
  );
}

function RestaurantCard({
  name,
  address,
  category,
  tone,
  image,
  note,
  mapUrl: mapUrlProp,
}) {
  const [imgFailed, setImgFailed] = React.useState(false);
  const mapUrl =
    mapUrlProp ||
    "https://map.naver.com/v5/search/" +
      encodeURIComponent(name + " " + address);
  const categoryColors = {
    국밥: "#c0392b",
    한식: "#2980b9",
    해산물: "#16a085",
    면류: "#8e44ad",
    감자탕: "#d35400",
    "중식-대만식": "#8e44ad",
    냉면: "#2c3e50",
    고기: "#e74c3c",
    찌개: "#2471a3",
    장어: "#27ae60",
    비빔밥: "#e67e22",
    일식: "#5d6d7e",
    "돈가스·피자": "#a04000",
    베트남: "#148f77",
    뷔페: "#1a5276",
    간식: "#b7950b",
  };
  const catColor = categoryColors[category] || "#2980b9";
  const showImg = image && !imgFailed;

  return (
    <div
      style={{
        display: "flex",
        gap: 0,
        borderRadius: 12,
        overflow: "hidden",
        boxShadow: "0 2px 12px rgba(0,0,0,0.08)",
        background: "#fff",
        border: "1px solid #eef0f3",
        transition: "box-shadow 0.2s",
      }}
    >
      {/* Thumbnail */}
      <div style={{ width: 120, flexShrink: 0, position: "relative" }}>
        {showImg ? (
          <img
            src={image}
            alt={name}
            onError={() => setImgFailed(true)}
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
              display: "block",
            }}
          />
        ) : (
          <Placeholder ratio="1 / 1" tone={tone} label={name} radius="0" />
        )}
      </div>
      {/* Info */}
      <div
        style={{
          flex: 1,
          padding: "14px 16px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          minWidth: 0,
        }}
      >
        <div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              marginBottom: 6,
            }}
          >
            <span
              style={{
                fontSize: "0.7rem",
                fontWeight: 700,
                color: "#fff",
                background: catColor,
                borderRadius: 4,
                padding: "2px 7px",
                flexShrink: 0,
              }}
            >
              {category}
            </span>
          </div>
          <h3
            style={{
              margin: "0 0 6px",
              fontSize: "0.97rem",
              fontWeight: 700,
              lineHeight: 1.35,
            }}
          >
            {name}
          </h3>
          <div
            style={{
              display: "flex",
              alignItems: "flex-start",
              gap: 5,
              color: "var(--yj-mid-gray)",
              fontSize: "0.8rem",
            }}
          >
            <MapPinIcon />
            <span style={{ lineHeight: 1.5 }}>{address}</span>
          </div>
          {note && (
            <p
              style={{
                margin: "6px 0 0",
                fontSize: "0.78rem",
                color: "#e67e22",
                lineHeight: 1.4,
              }}
            >
              💬 {note}
            </p>
          )}
        </div>
        <a
          href={mapUrl}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            marginTop: 10,
            display: "inline-flex",
            alignItems: "center",
            gap: 5,
            fontSize: "0.78rem",
            fontWeight: 600,
            color: "#03c75a",
            textDecoration: "none",
            padding: "5px 10px",
            border: "1px solid #03c75a",
            borderRadius: 6,
            width: "fit-content",
          }}
        >
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
            <path
              d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
              fill="#03c75a"
              fillOpacity=".3"
              stroke="#03c75a"
              strokeWidth="2"
            />
            <circle cx="12" cy="10" r="3" fill="#03c75a" />
          </svg>
          네이버 지도
          <ExternalLinkIcon />
        </a>
      </div>
    </div>
  );
}

function Breadcrumb({ items }) {
  return (
    <nav
      style={{
        padding: "12px 0",
        borderBottom: "1px solid var(--yj-rule)",
        background: "#fff",
      }}
    >
      <div
        className="jw-container"
        style={{
          display: "flex",
          alignItems: "center",
          gap: 6,
          fontSize: "0.82rem",
          color: "var(--yj-mid-gray)",
        }}
      >
        {items.map((item, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span style={{ opacity: 0.4 }}>›</span>}
            {item.href ? (
              <a
                href={item.href}
                style={{
                  color: "var(--yj-apple-blue)",
                  textDecoration: "none",
                }}
              >
                {item.label}
              </a>
            ) : (
              <span style={{ color: "var(--yj-near-black)", fontWeight: 500 }}>
                {item.label}
              </span>
            )}
          </React.Fragment>
        ))}
      </div>
    </nav>
  );
}

function WoojungPage() {
  const categories = [...new Set(WOOJUNG_RESTAURANTS.map((r) => r.category))];
  const grouped = categories.map((cat) => ({
    cat,
    items: WOOJUNG_RESTAURANTS.filter((r) => r.category === cat),
  }));

  const scrollTo = (cat) => {
    const el = document.getElementById("cat-" + cat);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div>
      <Nav />
      <Breadcrumb
        items={[
          { label: "홈", href: "#/" },
          { label: "맛집-핫플", href: "#/맛집" },
          { label: "맛집" },
        ]}
      />

      {/* 카테고리 빠른 이동 바 */}
      <div
        style={{
          position: "sticky",
          top: 52,
          zIndex: 50,
          background: "#f0f0f0",
          borderBottom: "1px solid #ddd",
          padding: "12px 0",
        }}
      >
        <div
          className="jw-container"
          style={{ display: "flex", gap: 8, flexWrap: "wrap" }}
        >
          {grouped.map(({ cat, items }) => (
            <button
              key={cat}
              onClick={() => scrollTo(cat)}
              style={{
                padding: "5px 14px",
                borderRadius: 0,
                border: "1px solid var(--yj-rule)",
                background: "#fff",
                color: "var(--yj-mid-gray)",
                fontSize: "0.82rem",
                fontWeight: 500,
                cursor: "pointer",
                fontFamily: "inherit",
                whiteSpace: "nowrap",
              }}
            >
              {cat}{" "}
              <span style={{ color: "var(--yj-mid-gray)", fontWeight: 400 }}>
                {items.length}
              </span>
            </button>
          ))}
        </div>
      </div>

      <main>
        <div className="jw-container" style={{ padding: "32px 22px" }}>
          <p
            style={{
              fontSize: "0.95rem",
              color: "var(--yj-mid-gray)",
              margin: "0 0 32px",
            }}
          >
            총 {WOOJUNG_RESTAURANTS.length}곳 · 부산진구 서면·전포동 일대
          </p>

          {grouped.map(({ cat, items }) => (
            <div
              key={cat}
              id={"cat-" + cat}
              style={{ marginBottom: 48, scrollMarginTop: 110 }}
            >
              <h2
                style={{
                  fontSize: "1.1rem",
                  fontWeight: 700,
                  margin: "0 0 16px",
                  paddingBottom: 10,
                  borderBottom: "2px solid var(--yj-rule)",
                  display: "flex",
                  alignItems: "center",
                  gap: 8,
                }}
              >
                {cat}
                <span
                  style={{
                    fontSize: "0.8rem",
                    fontWeight: 400,
                    color: "var(--yj-mid-gray)",
                  }}
                >
                  {items.length}곳
                </span>
              </h2>
              <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
                  gap: 16,
                }}
              >
                {items.map((r) => (
                  <RestaurantCard key={r.name} {...r} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </main>

      <Footer />
    </div>
  );
}

function FishRestaurantPage() {
  return (
    <RestaurantDetailPage
      title="팔딱팔딱 횟집"
      kind="해산물 · 활어 회"
      tone="teal"
      address="부산광역시 부산진구 양정동 인근. 신선한 해산물을 합리적인 가격에 즐길 수 있습니다."
      menu="모둠회, 광어회, 우럭회, 해물탕, 매운탕."
      tip="당일 들어오는 신선한 활어로 요리합니다. 저녁 시간대 이용을 추천합니다."
    />
  );
}

/* ── 명소 카드 이미지 (공용) ── */
function SpotImage({ spot }) {
  const [imgFailed, setImgFailed] = React.useState(false);
  const showImg = spot.image && !imgFailed;
  return (
    <div style={{ position: "relative" }}>
      {showImg ? (
        <div>
          <img
            src={spot.image}
            alt={spot.title}
            onError={() => setImgFailed(true)}
            style={{
              width: "100%",
              aspectRatio: "16/9",
              objectFit: "cover",
              display: "block",
            }}
          />
          {spot.credit && (
            <div
              style={{
                fontSize: "0.7rem",
                color: "#999",
                textAlign: "right",
                padding: "3px 8px",
                background: "#f7f7f7",
              }}
            >
              출처: {spot.credit}
            </div>
          )}
        </div>
      ) : (
        <Placeholder
          ratio="16 / 9"
          tone={spot.tone}
          label={spot.title}
          radius="0"
        />
      )}
      <div
        style={{
          position: "absolute",
          bottom: spot.credit ? 28 : 10,
          left: 12,
          display: "flex",
          gap: 6,
          flexWrap: "wrap",
        }}
      >
        {spot.tags.map((tag) => (
          <span
            key={tag}
            style={{
              background: "rgba(0,0,0,0.55)",
              color: "#fff",
              fontSize: "0.72rem",
              fontWeight: 600,
              padding: "3px 9px",
              borderRadius: 20,
              backdropFilter: "blur(4px)",
            }}
          >
            {tag}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ── 명소 카드 그리드 (공용) ── */
function SpotGrid({ spots, breadcrumb, title, subtitle }) {
  return (
    <div>
      <Nav />
      <Breadcrumb items={breadcrumb} />
      <PageHero title={title} subtitle={subtitle} />
      <main>
        <div className="jw-container" style={{ padding: "40px 22px" }}>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
              gap: 28,
            }}
          >
            {spots.map((spot) => (
              <div
                key={spot.title}
                style={{
                  borderRadius: 0,
                  overflow: "hidden",
                  boxShadow: "0 4px 20px rgba(0,0,0,0.10)",
                  background: "#fff",
                  border: "1px solid #eef0f3",
                  display: "flex",
                  flexDirection: "column",
                }}
              >
                <SpotImage spot={spot} />
                <div
                  style={{
                    padding: "18px 20px 20px",
                    flex: 1,
                    display: "flex",
                    flexDirection: "column",
                  }}
                >
                  <h2
                    style={{
                      fontSize: "1.1rem",
                      fontWeight: 800,
                      margin: "0 0 10px",
                      lineHeight: 1.3,
                    }}
                  >
                    {spot.title}
                  </h2>
                  <p
                    style={{
                      fontSize: "0.88rem",
                      color: "var(--yj-mid-gray)",
                      lineHeight: 1.75,
                      margin: "0 0 14px",
                      flex: 1,
                    }}
                  >
                    {spot.desc}
                  </p>
                  {spot.note && (
                    <div
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
                        gap: 7,
                        background:
                          "linear-gradient(90deg, #1a1a2e 0%, #16213e 100%)",
                        color: "#ffe066",
                        fontSize: "0.82rem",
                        fontWeight: 700,
                        padding: "7px 13px",
                        borderRadius: 8,
                        marginBottom: 14,
                        letterSpacing: "0.02em",
                      }}
                    >
                      {spot.note}
                    </div>
                  )}
                  <a
                    href={spot.mapUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{
                      display: "inline-flex",
                      alignItems: "center",
                      gap: 6,
                      fontSize: "0.8rem",
                      fontWeight: 700,
                      color: "#03c75a",
                      textDecoration: "none",
                      padding: "7px 14px",
                      border: "1.5px solid #03c75a",
                      borderRadius: 8,
                      width: "fit-content",
                    }}
                  >
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                        fill="#03c75a"
                        fillOpacity=".25"
                        stroke="#03c75a"
                        strokeWidth="2"
                      />
                      <circle cx="12" cy="10" r="3" fill="#03c75a" />
                    </svg>
                    네이버 지도보기
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

/* ══════════════════════════════════════════
   구역내 명소 page
══════════════════════════════════════════ */
function LocalAttractionsPage() {
  return (
    <SpotGrid
      spots={LOCAL_SPOTS}
      breadcrumb={[
        { label: "홈", href: "#/" },
        { label: "맛집-핫플", href: "#/맛집" },
        { label: "구역근처 명소" },
      ]}
      title="구역근처 명소"
      subtitle="양정 구역 주변 추천 명소"
    />
  );
}

/* ══════════════════════════════════════════
   추천관광 page
══════════════════════════════════════════ */
const TOURIST_SPOTS = [
  {
    title: "더베이 101",
    tags: ["야경", "해운대", "데이트"],
    tone: "night",
    image: "images/tour/out-1.jpeg",
    credit: null,
    desc: "해운대 동백섬 앞 수상 레스토랑 & 요트 복합 문화공간. 부산 야경 명소 중 손꼽히는 곳으로 해 질 무렵 방문을 추천합니다.",
    mapUrl:
      "https://map.naver.com/p/search/%ED%95%B4%EC%9A%B4%EB%8C%80%20%EB%8D%94%EB%B2%A0%EC%9D%B4/place/35058096?c=15.00,0,0,0,dh&placePath=/home?bk_query=%ED%95%B4%EC%9A%B4%EB%8C%80%20%EB%8D%94%EB%B2%A0%EC%9D%B4&entry=bmp&from=map&fromPanelNum=2&timestamp=202604201444&locale=ko&svcName=map_pcv5&searchText=%ED%95%B4%EC%9A%B4%EB%8C%80%20%EB%8D%94%EB%B2%A0%EC%9D%B4",
  },
  {
    title: "시티투어버스",
    tags: ["가성비", "코스 선택 가능", "추천"],
    tone: "blue",
    image: "images/tour/out-2.jpeg",
    credit: "visitbusan",
    desc: "부산 주요 명소를 순환하는 2층 오픈 버스. 원하는 코스를 골라 탑승할 수 있어 가성비가 뛰어납니다. 해운대·태종대·감천문화마을 등 다양한 노선 운영.",
    mapUrl:
      "https://map.naver.com/p/search/%EB%B6%80%EC%82%B0%EC%8B%9C%ED%8B%B0%ED%88%AC%EC%96%B4%EB%B2%84%EC%8A%A4/place/11887809?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EB%B6%80%EC%82%B0%EC%8B%9C%ED%8B%B0%ED%88%AC%EC%96%B4%EB%B2%84%EC%8A%A4&entry=bmp&from=map&fromPanelNum=2&timestamp=202604201444&locale=ko&svcName=map_pcv5&searchText=%EB%B6%80%EC%82%B0%EC%8B%9C%ED%8B%B0%ED%88%AC%EC%96%B4%EB%B2%84%EC%8A%A4",
  },
  {
    title: "송도 해상 케이블카",
    tags: ["케이블카", "바다 뷰", "송도"],
    tone: "teal",
    image: "images/tour/out-3.jpeg",
    credit: "visitbusan",
    desc: "송도해수욕장에서 암남공원까지 이어지는 해상 케이블카. 바닥이 투명한 크리스탈 캐빈 탑승 시 바다 위를 나는 듯한 체험이 가능합니다.",
    mapUrl:
      "https://map.naver.com/p/search/%EC%86%A1%EB%8F%84%ED%95%B4%EC%83%81%EC%BC%80%EC%9D%B4%EB%B8%94%EC%B9%B4/place/594242077?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EC%86%A1%EB%8F%84%ED%95%B4%EC%83%81%EC%BC%80%EC%9D%B4%EB%B8%94%EC%B9%B4&entry=bmp&from=map&fromPanelNum=2&timestamp=202604201443&locale=ko&svcName=map_pcv5&searchText=%EC%86%A1%EB%8F%84%ED%95%B4%EC%83%81%EC%BC%80%EC%9D%B4%EB%B8%94%EC%B9%B4",
  },
  {
    title: "초량 168계단 & 모노레일",
    tags: ["모노레일", "전망대", "부산역 근처"],
    tone: "indigo",
    image: "images/tour/out-4.jpeg",
    credit: "visitbusan",
    desc: "부산역 인근 초량동의 168계단을 오르내리는 모노레일 체험. 꼭대기 전망대에서 송도 바다까지 탁 트인 뷰가 펼쳐집니다. 부담 없이 즐길 수 있는 무료 모노레일.",
    mapUrl:
      "https://map.naver.com/p/search/%EC%B4%88%EB%9F%89%20168%EA%B3%84%EB%8B%A8/place/33306604?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EC%B4%88%EB%9F%89%20168%EA%B3%84%EB%8B%A8&entry=bmp&from=map&fromPanelNum=2&timestamp=202604201442&locale=ko&svcName=map_pcv5&searchText=%EC%B4%88%EB%9F%89%20168%EA%B3%84%EB%8B%A8",
  },
  {
    title: "남포동 옷 골목",
    tags: ["쇼핑", "길거리 음식", "남포동"],
    tone: "warm",
    image: "images/tour/out-5.jpeg",
    credit: null,
    desc: "남포동 패션 거리에서 쇼핑 후 골목 먹거리 즐기기. 오징어무침과 부침개가 특히 유명하며 저렴하고 맛있습니다. BIFF 광장과 함께 돌아보기 좋습니다.",
    mapUrl:
      "https://map.naver.com/p/entry/place/1865139621?c=15.00,0,0,0,dh&placePath=/home?from=map&fromPanelNum=1&additionalHeight=76&timestamp=202604201442&locale=ko&svcName=map_pcv5",
  },
  {
    title: "민주공원 겹벚꽃 & 닥밭골 벚꽃",
    tags: ["봄", "벚꽃", "모노레일"],
    tone: "sand",
    image: "images/tour/out-6.jpeg",
    credit: "visitbusan",
    desc: "봄철 부산 최고의 벚꽃 명소. 민주공원의 겹벚꽃과 닥밭골 마을의 벚꽃 터널이 장관을 이룹니다. 모노레일을 타고 올라가며 벚꽃 뷰를 감상할 수 있습니다.",
    mapUrl:
      "https://map.naver.com/p/search/%EB%AF%BC%EC%A3%BC%EA%B3%B5%EC%9B%90/place/12104874?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EB%AF%BC%EC%A3%BC%EA%B3%B5%EC%9B%90&entry=bmp&from=map&fromPanelNum=2&timestamp=202604201440&locale=ko&svcName=map_pcv5&searchText=%EB%AF%BC%EC%A3%BC%EA%B3%B5%EC%9B%90",
  },
  {
    title: "광안리 & 광안대교",
    tags: ["야경", "해변", "지하철 이동"],
    tone: "night",
    image: "images/tour/out-7.jpeg",
    credit: null,
    desc: "지하철 2호선 광안역에서 도보로 광안리 해수욕장과 광안대교 야경을 즐길 수 있습니다. 해변 카페에서 여유롭게 감상하기 좋습니다.",
    note: "🚁 매주 토요일 드론쇼 20시, 22시",
    mapUrl: "https://map.naver.com/v5/search/광안리해수욕장",
  },
  {
    title: "이기대 공원",
    tags: ["바다", "산책", "주차 가능"],
    tone: "teal",
    image: "images/tour/out-9.jpeg",
    credit: "visitbusan",
    desc: "도심 가까이에서 즐기는 바다숲 공원. 해안 산책로를 따라 걸으며 탁 트인 바다를 감상할 수 있습니다. 주차장 이용 가능.",
    mapUrl:
      "https://map.naver.com/p/search/%EC%9D%B4%EA%B8%B0%EB%8C%80%EA%B3%B5%EC%9B%90/place/13338933?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EC%9D%B4%EA%B8%B0%EB%8C%80%EA%B3%B5%EC%9B%90&entry=bmp&from=map&fromPanelNum=2&timestamp=202604201439&locale=ko&svcName=map_pcv5&searchText=%EC%9D%B4%EA%B8%B0%EB%8C%80%EA%B3%B5%EC%9B%90",
  },
  {
    title: "흰여울마을",
    tags: ["바다뷰", "골목", "사진 명소"],
    tone: "blue",
    image: "images/tour/out-11.jpeg",
    credit: null,
    desc: "바다가 보이는 감천문화마을 느낌의 벽화 마을. 좁은 골목길과 탁 트인 바다뷰가 인상적입니다.",
    mapUrl:
      "https://map.naver.com/p/search/%ED%9D%B0%EC%97%AC%EC%9A%B8%EB%A7%88%EC%9D%84/place/37418047?c=15.00,0,0,0,dh&placePath=/home?bk_query=%ED%9D%B0%EC%97%AC%EC%9A%B8%EB%A7%88%EC%9D%84&entry=bmp&from=map&fromPanelNum=2&timestamp=202604201438&locale=ko&svcName=map_pcv5&searchText=%ED%9D%B0%EC%97%AC%EC%9A%B8%EB%A7%88%EC%9D%84",
  },
  {
    title: "감천문화마을",
    tags: ["벽화마을", "관광", "외국인 많음"],
    tone: "warm",
    image: "images/tour/out-12.jpeg",
    credit: null,
    desc: "알록달록한 집들이 계단식으로 펼쳐진 부산의 대표 관광지. 외국인 방문객이 많으며, 곳곳의 조형물과 골목이 볼거리입니다.",
    mapUrl:
      "https://map.naver.com/p/entry/place/35842267?c=17.65,0,0,0,dh&placePath=/home?from=map&fromPanelNum=1&additionalHeight=76&timestamp=202604201437&locale=ko&svcName=map_pcv5",
  },
  {
    title: "오륙도 해맞이 공원",
    tags: ["섬", "바다", "자연"],
    tone: "indigo",
    image: "images/tour/out-13.jpeg",
    credit: null,
    desc: "부산의 상징적인 바위섬. 스카이워크와 함께 탁 트인 남해 바다를 감상할 수 있습니다.",
    mapUrl:
      "https://map.naver.com/p/search/%EC%98%A4%EB%A5%99%EB%8F%84/place/16855395?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EC%98%A4%EB%A5%99%EB%8F%84&entry=bmp&from=map&fromPanelNum=2&timestamp=202604201435&locale=ko&svcName=map_pcv5&searchText=%EC%98%A4%EB%A5%99%EB%8F%84",
  },
  {
    title: "해운대",
    tags: ["해수욕장", "사진 명소", "야경"],
    tone: "sand",
    image: "images/tour/out-14.jpeg",
    credit: null,
    desc: "부산의 대표 해수욕장. 잘아시는 곳이지만 '해운대' 글자 조형물 앞에서 사진을 찍으면 잘 나옵니다.",
    mapUrl: "https://map.naver.com/v5/search/해운대해수욕장",
  },
  {
    title: "해상 캡슐 & 해변열차",
    tags: ["캡슐열차", "바다뷰", "예약 필수"],
    tone: "night",
    image: "images/tour/out-15.jpeg",
    credit: "visitbusan",
    desc: "해변을 따라 달리는 열차와 바다 위 캡슐 체험. 단체 관광객이 많아 캡슐은 한 달 전 예약을 추천합니다.",
    mapUrl:
      "https://map.naver.com/p/search/%EC%BA%A1%EC%8A%90%EC%97%B4%EC%B0%A8/place/1287134328?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EC%BA%A1%EC%8A%90%EC%97%B4%EC%B0%A8&entry=bmp&from=map&fromPanelNum=2&timestamp=202604201434&locale=ko&svcName=map_pcv5&searchText=%EC%BA%A1%EC%8A%90%EC%97%B4%EC%B0%A8",
  },
  {
    title: "용두산공원 부산타워",
    tags: ["전망대", "중구", "랜드마크"],
    tone: "indigo",
    image: "images/tour/out-16.jpeg",
    credit: null,
    desc: "부산 중구 중심에 위치한 용두산공원의 부산타워. 전망대에서 부산항, 영도, 시내 전경을 한눈에 볼 수 있는 랜드마크입니다.",
    mapUrl:
      "https://map.naver.com/p/search/%EC%9A%A9%EB%91%90%EC%82%B0%EA%B3%B5%EC%9B%90+%EB%B6%80%EC%82%B0%ED%83%80%EC%9B%8C/place/20058995?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EC%9A%A9%EB%91%90%EC%82%B0%EA%B3%B5%EC%9B%90%20%EB%B6%80%EC%82%B0%ED%83%80%EC%9B%8C&entry=bmp&from=map&fromPanelNum=2&timestamp=202604241056&locale=ko&svcName=map_pcv5&searchText=%EC%9A%A9%EB%91%90%EC%82%B0%EA%B3%B5%EC%9B%90+%EB%B6%80%EC%82%B0%ED%83%80%EC%9B%8C",
  },
];

const LOCAL_SPOTS = [
  {
    title: "송상현 광장",
    tags: ["광장", "산책", "도심"],
    tone: "teal",
    image: "images/tour/in-1.jpeg",
    credit: null,
    desc: "서면 중심부에 위치한 대형 광장. 분수와 조형물이 어우러진 쾌적한 도심 휴식 공간입니다.",
    mapUrl: "https://map.naver.com/v5/search/송상현광장",
  },
  {
    title: "전포 카페거리",
    tags: ["카페", "산책", "전포동"],
    tone: "warm",
    image: "images/tour/in-2.jpeg",
    credit: null,
    desc: "전포동 일대의 개성 넘치는 카페와 소품숍이 밀집된 거리. 부산에서 가장 트렌디한 골목 중 하나. 작은 주택, 빌라를 개조한 카페와 식당이 많아요",
    mapUrl: "https://map.naver.com/v5/search/전포 카페거리",
  },
  {
    title: "부전시장",
    tags: ["재래시장", "먹거리", "쇼핑"],
    tone: "sand",
    image: "images/tour/in-3.jpeg",
    credit: null,
    desc: "부전역 인근의 전통 재래시장. 신선한 식재료와 다양한 먹거리를 저렴하게 즐길 수 있습니다.",
    mapUrl: "https://map.naver.com/v5/search/부전시장",
  },
  {
    title: "양정 꽃시장",
    tags: ["꽃", "쇼핑", "양정동"],
    tone: "warm",
    image: "images/tour/in-4.jpeg",
    credit: null,
    desc: "양정시장 건물 4층에 위치한 꽃시장. 부산진구 동평로420번길 18 4층(양정동). 다양한 꽃과 화분을 만날 수 있습니다.",
    mapUrl: "https://map.naver.com/v5/search/양정시장 양정동",
  },
  {
    title: "지하철 1호선 양정역",
    tags: ["쉼터", "카페", "지하"],
    tone: "blue",
    image: "images/tour/in-5.jpeg",
    credit: null,
    desc: "지하 대합실과 크리스피크림 카페가 있습니다. 더운 날이나 비가 올 때 시원하게 쉬어가기 좋은 공간입니다.",
    mapUrl: "https://map.naver.com/v5/search/양정역 1호선",
  },
  {
    title: "부산여대 가는 길 식당가",
    tags: ["식당", "산책", "골목"],
    tone: "teal",
    image: "images/tour/in-6.jpeg",
    credit: null,
    desc: "써브웨이 부산양정점을 기점으로 위쪽 언덕길 양쪽에 다양한 식당들이 자리잡고 있습니다. 가볍게 산책하며 식사하기 좋습니다.",
    mapUrl: "https://map.naver.com/v5/search/써브웨이 부산양정점",
  },
  {
    title: "양정라이온스 공원",
    tags: ["공원", "산책", "휴식"],
    tone: "teal",
    image: "images/tour/in-7.jpeg",
    credit: null,
    desc: "양정동 인근 주민들이 즐겨 찾는 근린공원. 가볍게 산책하며 쉬어가기 좋습니다.",
    mapUrl: "https://map.naver.com/v5/search/양정근린공원",
  },
  {
    title: "황령산 봉수대 야경",
    tags: ["야경", "전망대", "드라이브"],
    tone: "indigo",
    image: "images/tour/out-8.jpeg",
    credit: null,
    desc: "차량으로 정상 근처까지 이동 후 약 10분 도보. 한쪽은 광안대교, 반대쪽은 부산 시내 야경이 펼쳐집니다. 주차 가능.",
    mapUrl:
      "https://map.naver.com/p/search/%ED%99%A9%EB%A0%B9%EC%82%B0%20%EB%B4%89%EC%88%98%EB%8C%80/place/36247128?c=15.00,0,0,0,dh&placePath=/home?bk_query=%ED%99%A9%EB%A0%B9%EC%82%B0%20%EB%B4%89%EC%88%98%EB%8C%80&entry=bmp&from=map&fromPanelNum=2&timestamp=202604201439&locale=ko&svcName=map_pcv5&searchText=%ED%99%A9%EB%A0%B9%EC%82%B0%20%EB%B4%89%EC%88%98%EB%8C%80",
  },
  {
    title: "부산시민공원",
    tags: ["공원", "산책", "넓은 잔디"],
    tone: "teal",
    image: "images/tour/out-10.jpeg",
    credit: null,
    desc: "우리 구역은 아니지만 가깝고 규모가 큰 공원. 넓은 잔디밭과 분수, 문화시설이 잘 갖춰져 있어 가족 단위 방문객에게 인기입니다.",
    mapUrl:
      "https://map.naver.com/p/search/%EB%B6%80%EC%82%B0%EC%8B%9C%EB%AF%BC%EA%B3%B5%EC%9B%90/place/12228256?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EB%B6%80%EC%82%B0%EC%8B%9C%EB%AF%BC%EA%B3%B5%EC%9B%90&entry=bmp&from=map&fromPanelNum=2&timestamp=202604201438&locale=ko&svcName=map_pcv5&searchText=%EB%B6%80%EC%82%B0%EC%8B%9C%EB%AF%BC%EA%B3%B5%EC%9B%90",
  },
  {
    title: "브라켓테이블",
    tags: ["소품샵", "카페", "전포"],
    tone: "warm",
    image: "images/tour/cafe-7.jpeg",
    credit: null,
    desc: "소품샵과 카페가 함께 있는 공간. 전포 카페거리에서 들려볼만한 곳입니다.",
    mapUrl:
      "https://map.naver.com/v5/search/" +
      encodeURIComponent("브라켓테이블 부산 부산진구 서전로68번길 109"),
  },
];

/* ── 카페 페이지 ── */
const CAFES = [
  {
    name: "리짙커피로스터스",
    address: "부산 부산진구 중앙대로980번길 5",
    note: "직접 로스팅한 신선한 커피를 맛볼 수 있는 곳으로, 커피 매니아들 사이에서 꾸준히 언급되는 양정의 대표 감성 카페입니다. 연산회중 부부가 운영하는 카페 🙌",
    mapUrl:
      "https://map.naver.com/p/entry/place/1252103658?lng=129.0746860&lat=35.1765842&placePath=/home?from=map&fromPanelNum=1&additionalHeight=76&timestamp=202604211443&locale=ko&svcName=map_pcv5&entry=pll&searchType=place&c=15.00,0,0,0,dh",
    image: "images/restaurants/cafe-rizit.jpeg",
  },
  {
    name: "카페까미노",
    address: "부산 부산진구",
    note: null,
    mapUrl:
      "https://m.place.naver.com/restaurant/1282942930/location?filter=location&selected_place_id=1282942930",
    image: "images/restaurants/cafe-camino.jpeg",
  },
  {
    name: "희와제과",
    address: "부산 부산진구 전포대로246번길 6 1층 상가",
    note: null,
    image: "images/restaurants/cafe-1.jpeg",
  },
  {
    name: "사회적기업왔다상사",
    address: "부산 부산진구 중앙대로824번길 5",
    note: "장애인들이 만드는 베이커리·음료 카페. 송상현광장 근처. 찾기 쉽고 가격도 저렴.",
    image: "images/restaurants/cafe-3.jpeg",
  },
  {
    name: "팟오브부산",
    address: "부산 부산진구 동성로39번길 30-7",
    note: null,
    image: "images/restaurants/cafe-4.jpeg",
  },
  {
    name: "샬롯디저트",
    address: "부산 부산진구 전포대로210번길 28",
    note: null,
    image: "images/restaurants/cafe-5.jpeg",
  },
  {
    name: "스트럿커피",
    address: "부산 부산진구 동성로39번길 28",
    note: null,
    image: "images/restaurants/cafe-6.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EC%8A%A4%ED%8A%B8%EB%9F%BF%EC%BB%A4%ED%94%BC/place/38544642?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EC%8A%A4%ED%8A%B8%EB%9F%BF%EC%BB%A4%ED%94%BC&entry=bmp&from=map&fromPanelNum=2&timestamp=202604241127&locale=ko&svcName=map_pcv5&searchText=%EC%8A%A4%ED%8A%B8%EB%9F%BF%EC%BB%A4%ED%94%BC",
  },
  {
    name: "리투커피바 인 전포숲",
    address: "부산 부산진구 진남로328번길 34",
    note: null,
    image: "images/restaurants/cafe-8.jpeg",
  },
  {
    name: "카페준",
    address: "부산 부산진구 부전로 89-1",
    note: null,
    image: "images/restaurants/cafe-9.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EC%B9%B4%ED%8E%98%EC%A4%80/place/1662681537?c=15.00,0,0,0,dh&placePath=/home?bk_query=%EC%B9%B4%ED%8E%98%EC%A4%80&entry=bmp&from=map&fromPanelNum=2&timestamp=202604241129&locale=ko&svcName=map_pcv5&searchText=%EC%B9%B4%ED%8E%98%EC%A4%80",
  },
  {
    name: "커피스가모 인 서면",
    address: "부산 부산진구 가야대로755번길 23",
    note: "사이폰 커피가 독특함",
    image: "images/restaurants/cafe-10.jpeg",
  },
  {
    name: "스페이스 별일",
    address: "부산 부산진구 전포대로224번길 17",
    note: "카페. 팝업 전시장",
    image: "images/restaurants/cafe-11.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EC%8A%A4%ED%8E%98%EC%9D%B4%EC%8A%A4%20%EB%B3%84%EC%9D%BC/place/1786775260?c=15.00,0,0,0,dh&isCorrectAnswer=true",
  },
  {
    name: "모모스커피 도모헌점",
    address: "부산 수영구 황령산로7번길 60",
    note: "구역밖 수영구",
    image: "images/restaurants/cafe-12.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EB%AA%A8%EB%AA%A8%EC%8A%A4%EC%BB%A4%ED%94%BC+%EB%8F%84%EB%AA%A8%ED%97%8C%EC%A0%90/place/1262480043?isCorrectAnswer=true&placePath=/home?from=map&fromPanelNum=1&additionalHeight=76&timestamp=202604241155&locale=ko&svcName=map_pcv5&searchText=%EB%AA%A8%EB%AA%A8%EC%8A%A4%EC%BB%A4%ED%94%BC+%EB%8F%84%EB%AA%A8%ED%97%8C%EC%A0%90",
  },
  {
    name: "브런치소보 달맞이점",
    address: "부산 해운대구 달맞이길 93",
    note: "구역밖 해운대",
    image: "images/restaurants/cafe-13.jpeg",
    mapUrl:
      "https://map.naver.com/p/search/%EB%B8%8C%EB%9F%B0%EC%B9%98%EC%86%8C%EB%B3%B4+%EB%8B%AC%EB%A7%9E%EC%9D%B4%EC%A0%90/place/2059397046?isCorrectAnswer=true&c=15.00,0,0,0,dh",
  },
  {
    name: "광복동12시",
    address: "부산 중구 광복로67번길 20-14",
    note: "우리 구역은 아님, 남포동 쪽",
    image: "images/restaurants/cafe-2.jpeg",
  },
];

function CafeCard({ cafe }) {
  const [imgFailed, setImgFailed] = React.useState(false);
  const showImg = cafe.image && !imgFailed;
  return (
    <div
      style={{
        background: "#fff",
        borderRadius: 12,
        boxShadow: "0 2px 12px rgba(0,0,0,0.08)",
        marginBottom: 20,
        display: "flex",
        overflow: "hidden",
        minHeight: 120,
      }}
    >
      {/* 텍스트 */}
      <div
        style={{
          flex: 1,
          padding: "20px 22px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
        }}
      >
        <div style={{ fontWeight: 700, fontSize: "1.08rem", marginBottom: 6 }}>
          {cafe.name}
        </div>
        <div
          style={{
            color: "#555",
            fontSize: "0.9rem",
            marginBottom: cafe.note ? 10 : 0,
          }}
        >
          📍 {cafe.address}
        </div>
        {cafe.note && (
          <div
            style={{
              color: "#d97706",
              fontSize: "0.85rem",
              background: "#fffbeb",
              borderRadius: 6,
              padding: "7px 10px",
              marginBottom: 10,
            }}
          >
            {cafe.note}
          </div>
        )}
        <a
          href={
            cafe.mapUrl ||
            `https://map.naver.com/v5/search/${encodeURIComponent(cafe.name)}`
          }
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: "inline-block",
            marginTop: 8,
            fontSize: "0.83rem",
            color: "#1a5ba8",
            textDecoration: "none",
            fontWeight: 600,
          }}
        >
          네이버 지도에서 보기 →
        </a>
      </div>
      {/* 이미지 */}
      {showImg ? (
        <img
          src={cafe.image}
          alt={cafe.name}
          onError={() => setImgFailed(true)}
          style={{
            width: 130,
            height: "auto",
            objectFit: "cover",
            flexShrink: 0,
          }}
        />
      ) : (
        <div
          style={{
            width: 130,
            flexShrink: 0,
            background: "#e8edf2",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <span
            style={{
              fontSize: "0.72rem",
              color: "#aaa",
              textAlign: "center",
              padding: "0 8px",
            }}
          >
            사진 없음
          </span>
        </div>
      )}
    </div>
  );
}

function CafePage() {
  return (
    <div>
      <Nav />
      <Breadcrumb
        items={[
          { label: "홈", href: "#/" },
          { label: "맛집-핫플", href: "#/맛집" },
          { label: "카페" },
        ]}
      />
      <PageHero title="카페" subtitle="양정회중구역 근처 및 구역외 카페 추천" />
      <div
        style={{ maxWidth: 700, margin: "0 auto", padding: "32px 16px 64px" }}
      >
        {CAFES.map((cafe) => (
          <CafeCard key={cafe.name} cafe={cafe} />
        ))}
      </div>
      <Footer />
    </div>
  );
}

function TouristAttractionsPage() {
  return (
    <SpotGrid
      spots={TOURIST_SPOTS}
      breadcrumb={[
        { label: "홈", href: "#/" },
        { label: "맛집-핫플", href: "#/맛집" },
        { label: "구역외 명소" },
      ]}
      title="구역외 명소"
      subtitle="부산 인근 형제자매 추천 관광지 모음"
    />
  );
}

/* ══════════════════════════════════════════
   안내 page
══════════════════════════════════════════ */
function NoticePage() {
  return (
    <div>
      <Nav />
      <Breadcrumb items={[{ label: "홈", href: "#/" }, { label: "안내" }]} />
      <PageHero title="안내" subtitle="양정회중 공지 및 안내 정보" />
      <section
        className="jw-sec jw-sec-light"
        style={{ minHeight: "40vh", display: "flex", alignItems: "center" }}
      >
        <div className="jw-container" style={{ textAlign: "center" }}>
          <p style={{ fontSize: "2rem", marginBottom: 16 }}>🚧</p>
          <h2
            style={{ fontSize: "1.3rem", fontWeight: 700, margin: "0 0 10px" }}
          >
            준비중입니다
          </h2>
          <p style={{ fontSize: "0.95rem", color: "var(--yj-mid-gray)" }}>
            곧 업데이트될 예정입니다.
          </p>
        </div>
      </section>
      <Footer />
    </div>
  );
}

/* ══════════════════════════════════════════
   안내 > 정보2 page
══════════════════════════════════════════ */
function Info2Page() {
  return (
    <div>
      <Nav />
      <Breadcrumb
        items={[
          { label: "홈", href: "#/" },
          { label: "안내", href: "#/안내" },
          { label: "정보 2" },
        ]}
      />
      <PageHero title="의료 정보" subtitle="캠페인 중 도움이 되는 정보 모음" />

      <div style={{ background: "#f5f5f7", padding: "52px 0 80px" }}>
        <div className="jw-container" style={{ maxWidth: 760 }}>
          {/* 안내 박스 */}
          <div
            style={{
              background: "#fff",
              border: "1px solid #d8e4f0",
              borderLeft: "4px solid #095bac",
              borderRadius: 12,
              padding: "20px 24px",
              marginBottom: 48,
            }}
          >
            <p
              style={{
                margin: 0,
                fontSize: "18px",
                color: "#333",
                lineHeight: 1.8,
              }}
            >
              서면에 큰 메디컬스트릿이 있어서 쉽게 가까운 병원을 찾으실 수
              있습니다. <br></br> 혹시 늦은 시간이나 주말에 가셔야한다면 아래
              정보를 참고하실 수 있습니다.
            </p>
          </div>

          {/* 소제목: 병원 */}
          <h2
            style={{
              fontSize: "clamp(18px, 3vw, 22px)",
              fontWeight: 700,
              color: "#1d1d1f",
              margin: "0 0 24px",
              letterSpacing: "-0.01em",
            }}
          >
            오후 8시까지 진료하는 병원 &raquo;
          </h2>

          {/* 병원 카드 */}
          <div
            style={{
              background: "#fff",
              borderRadius: 18,
              overflow: "hidden",
              boxShadow: "0 2px 20px rgba(0,0,0,0.08)",
            }}
          >
            {/* 사진 영역 */}
            <div
              style={{
                position: "relative",
                width: "100%",
                aspectRatio: "1 / 1",
                background: "#e0e0e5",
                overflow: "hidden",
              }}
            >
              <img
                src="images/info/hospital-1.jpeg"
                alt="류내과"
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  display: "block",
                }}
                onError={(e) => {
                  e.currentTarget.style.display = "none";
                }}
              />
              <div
                style={{
                  position: "absolute",
                  bottom: 0,
                  left: 0,
                  right: 0,
                  background:
                    "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%)",
                  padding: "32px 24px 16px",
                }}
              >
                <span
                  style={{
                    background: "#095bac",
                    color: "#fff",
                    fontSize: "11px",
                    fontWeight: 700,
                    padding: "3px 10px",
                    borderRadius: 20,
                    letterSpacing: "0.05em",
                  }}
                >
                  내과
                </span>
              </div>
            </div>

            {/* 내용 */}
            <div style={{ padding: "28px 28px 32px" }}>
              <h3
                style={{
                  fontSize: "22px",
                  fontWeight: 700,
                  color: "#1d1d1f",
                  margin: "0 0 6px",
                  letterSpacing: "-0.01em",
                }}
              >
                류내과
              </h3>
              <p
                style={{
                  fontSize: "14px",
                  color: "#6e6e73",
                  margin: "0 0 24px",
                }}
              >
                부산진구 · 내과 전문
              </p>

              {/* 진료 시간 */}
              <div
                style={{
                  borderTop: "1px solid #f2f2f7",
                  paddingTop: 20,
                  marginBottom: 20,
                }}
              >
                <p
                  style={{
                    fontSize: "12px",
                    fontWeight: 600,
                    color: "#6e6e73",
                    letterSpacing: "0.06em",
                    textTransform: "uppercase",
                    margin: "0 0 14px",
                  }}
                >
                  진료 시간
                </p>
                <div
                  style={{ display: "flex", flexDirection: "column", gap: 10 }}
                >
                  {[
                    { day: "평일", time: "오후 8시까지", icon: "🗓" },
                    { day: "일요일", time: "오후 1시까지", icon: "☀️" },
                  ].map((row) => (
                    <div
                      key={row.day}
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        background: "#f5f5f7",
                        borderRadius: 10,
                        padding: "12px 16px",
                      }}
                    >
                      <span
                        style={{
                          fontSize: "15px",
                          color: "#1d1d1f",
                          fontWeight: 500,
                        }}
                      >
                        {row.icon} {row.day}
                      </span>
                      <span
                        style={{
                          fontSize: "15px",
                          fontWeight: 600,
                          color: "#095bac",
                        }}
                      >
                        {row.time}
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              {/* 노트 */}
              <div
                style={{
                  background: "#fff9e6",
                  border: "1px solid #ffe066",
                  borderRadius: 12,
                  padding: "14px 16px",
                  marginBottom: 24,
                }}
              >
                <p
                  style={{
                    margin: 0,
                    fontSize: "14px",
                    color: "#7a5c00",
                    lineHeight: 1.6,
                  }}
                >
                  💡 <strong>참고</strong> — 아프시면 늦은 시간에도 방문하셔도
                  됩니다.
                </p>
              </div>

              {/* 네이버 지도 버튼 */}
              <a
                href="https://map.naver.com/p/search/%EB%A5%98%EB%82%B4%EA%B3%BC%20%EB%B6%80%EC%82%B0/place/1693882273?placePath=?abtExp=N-PLC-PER-26%3A3&bk_query=%EB%A5%98%EB%82%B4%EA%B3%BC%20%EB%B6%80%EC%82%B0&entry=pll&from=nx&fromNxList=true&searchType=place"
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                  background: "#03c75a",
                  color: "#fff",
                  fontSize: "15px",
                  fontWeight: 700,
                  padding: "13px 24px",
                  borderRadius: 12,
                  textDecoration: "none",
                  letterSpacing: "0.01em",
                }}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path
                    d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                    fill="rgba(255,255,255,0.3)"
                    stroke="#fff"
                    strokeWidth="2"
                  />
                  <circle cx="12" cy="10" r="3" fill="#fff" />
                </svg>
                네이버 지도로 보기
              </a>
            </div>
          </div>
          {/* 소제목: 약국 */}
          <h2
            style={{
              fontSize: "clamp(18px, 3vw, 22px)",
              fontWeight: 700,
              color: "#1d1d1f",
              margin: "48px 0 24px",
              letterSpacing: "-0.01em",
            }}
          >
            밤 11시까지 하는 약국 &raquo;
          </h2>

          {/* 서면365약국 카드 */}
          <div
            style={{
              background: "#fff",
              borderRadius: 18,
              overflow: "hidden",
              boxShadow: "0 2px 20px rgba(0,0,0,0.08)",
            }}
          >
            {/* 사진 영역 */}
            <div
              style={{
                position: "relative",
                width: "100%",
                aspectRatio: "16/9",
                background: "#e0e0e5",
                overflow: "hidden",
              }}
            >
              <img
                src="images/info/pharmacy-1.jpeg"
                alt="서면365약국"
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  display: "block",
                }}
                onError={(e) => {
                  e.currentTarget.style.display = "none";
                }}
              />
              <div
                style={{
                  position: "absolute",
                  bottom: 0,
                  left: 0,
                  right: 0,
                  background:
                    "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%)",
                  padding: "32px 24px 16px",
                }}
              >
                <span
                  style={{
                    background: "#2d8a4e",
                    color: "#fff",
                    fontSize: "11px",
                    fontWeight: 700,
                    padding: "3px 10px",
                    borderRadius: 20,
                    letterSpacing: "0.05em",
                  }}
                >
                  약국
                </span>
              </div>
            </div>

            {/* 내용 */}
            <div style={{ padding: "28px 28px 32px" }}>
              <h3
                style={{
                  fontSize: "22px",
                  fontWeight: 700,
                  color: "#1d1d1f",
                  margin: "0 0 6px",
                }}
              >
                서면365약국
              </h3>
              <p
                style={{
                  fontSize: "14px",
                  color: "#6e6e73",
                  margin: "0 0 24px",
                }}
              >
                부산진구 · 심야 운영 약국
              </p>
              <div
                style={{
                  borderTop: "1px solid #f2f2f7",
                  paddingTop: 20,
                  marginBottom: 24,
                }}
              >
                <div
                  style={{ display: "flex", flexDirection: "column", gap: 10 }}
                >
                  {[{ day: "매일", time: "밤 11시까지", icon: "🌙" }].map(
                    (row) => (
                      <div
                        key={row.day}
                        style={{
                          display: "flex",
                          justifyContent: "space-between",
                          alignItems: "center",
                          background: "#f5f5f7",
                          borderRadius: 10,
                          padding: "12px 16px",
                        }}
                      >
                        <span
                          style={{
                            fontSize: "15px",
                            color: "#1d1d1f",
                            fontWeight: 500,
                          }}
                        >
                          {row.icon} {row.day}
                        </span>
                        <span
                          style={{
                            fontSize: "15px",
                            fontWeight: 600,
                            color: "#2d8a4e",
                          }}
                        >
                          {row.time}
                        </span>
                      </div>
                    ),
                  )}
                </div>
              </div>
              <a
                href="https://map.naver.com/p/entry/place/1727984688?placePath=%2Fhome"
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                  background: "#03c75a",
                  color: "#fff",
                  fontSize: "15px",
                  fontWeight: 700,
                  padding: "13px 24px",
                  borderRadius: 12,
                  textDecoration: "none",
                }}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path
                    d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                    fill="rgba(255,255,255,0.3)"
                    stroke="#fff"
                    strokeWidth="2"
                  />
                  <circle cx="12" cy="10" r="3" fill="#fff" />
                </svg>
                네이버 지도로 보기
              </a>
            </div>
          </div>

          {/* 부전시장약국 카드 */}
          <div
            style={{
              background: "#fff",
              borderRadius: 18,
              overflow: "hidden",
              boxShadow: "0 2px 20px rgba(0,0,0,0.08)",
              marginTop: 24,
            }}
          >
            {/* 사진 영역 */}
            <div
              style={{
                position: "relative",
                width: "100%",
                aspectRatio: "16/9",
                background: "#e0e0e5",
                overflow: "hidden",
              }}
            >
              <img
                src="images/info/pharmacy-2.jpeg"
                alt="부전시장약국"
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  display: "block",
                }}
                onError={(e) => {
                  e.currentTarget.style.display = "none";
                }}
              />
              <div
                style={{
                  position: "absolute",
                  bottom: 0,
                  left: 0,
                  right: 0,
                  background:
                    "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%)",
                  padding: "32px 24px 16px",
                }}
              >
                <span
                  style={{
                    background: "#2d8a4e",
                    color: "#fff",
                    fontSize: "11px",
                    fontWeight: 700,
                    padding: "3px 10px",
                    borderRadius: 20,
                    letterSpacing: "0.05em",
                  }}
                >
                  약국
                </span>
              </div>
            </div>

            {/* 내용 */}
            <div style={{ padding: "28px 28px 32px" }}>
              <h3
                style={{
                  fontSize: "22px",
                  fontWeight: 700,
                  color: "#1d1d1f",
                  margin: "0 0 6px",
                }}
              >
                부전시장약국
              </h3>
              <p
                style={{
                  fontSize: "14px",
                  color: "#6e6e73",
                  margin: "0 0 16px",
                }}
              >
                부산진구 · 약이 싸서 많이들 와서 대량구매해가는 곳 ^^
              </p>
              <div
                style={{
                  borderTop: "1px solid #f2f2f7",
                  paddingTop: 20,
                  marginBottom: 24,
                }}
              >
                <div
                  style={{
                    display: "flex",
                    alignItems: "flex-start",
                    gap: 8,
                    color: "#6e6e73",
                    fontSize: "14px",
                    marginBottom: 16,
                  }}
                >
                  <svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    style={{ flexShrink: 0, marginTop: 2 }}
                  >
                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                    <circle cx="12" cy="10" r="3" />
                  </svg>
                  부산 부산진구 중앙대로 757-1 1층
                </div>
                <div
                  style={{ display: "flex", flexDirection: "column", gap: 10 }}
                >
                  {[
                    {
                      day: "매일 (365일 연중무휴)",
                      time: "08:00 ~ 21:00",
                      icon: "🕗",
                    },
                  ].map((row) => (
                    <div
                      key={row.day}
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        background: "#f5f5f7",
                        borderRadius: 10,
                        padding: "12px 16px",
                      }}
                    >
                      <span
                        style={{
                          fontSize: "15px",
                          color: "#1d1d1f",
                          fontWeight: 500,
                        }}
                      >
                        {row.icon} {row.day}
                      </span>
                      <span
                        style={{
                          fontSize: "15px",
                          fontWeight: 600,
                          color: "#2d8a4e",
                        }}
                      >
                        {row.time}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
              <a
                href="https://map.naver.com/p/search/%EB%B6%80%EC%A0%84%EC%8B%9C%EC%9E%A5%EC%95%BD%EA%B5%AD"
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                  background: "#03c75a",
                  color: "#fff",
                  fontSize: "15px",
                  fontWeight: 700,
                  padding: "13px 24px",
                  borderRadius: 12,
                  textDecoration: "none",
                }}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path
                    d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                    fill="rgba(255,255,255,0.3)"
                    stroke="#fff"
                    strokeWidth="2"
                  />
                  <circle cx="12" cy="10" r="3" fill="#fff" />
                </svg>
                네이버 지도로 보기
              </a>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}

/* ══════════════════════════════════════════
   관광 pages
══════════════════════════════════════════ */
function TourismOverviewPage() {
  const spots = [
    {
      title: "양정 꽃시장",
      href: "#/관광/양정-꽃시장",
      tone: "teal",
      kind: "시장 · 꽃",
      body: "다양한 꽃과 식물을 판매하는 전통 시장",
    },
    {
      title: "광안대교",
      href: "#/관광/광안대교",
      tone: "night",
      kind: "관광 명소",
      body: "부산의 상징적인 야경 명소",
    },
    {
      title: "기타 관광지",
      href: "#/관광/기타",
      tone: "indigo",
      kind: "관광",
      body: "그 외 추천 관광지 안내",
    },
  ];
  return (
    <PageShell>
      <PageHero
        title="관광"
        subtitle="양정 인근의 추천 관광지를 소개합니다."
        tone="teal"
      />
      <CardGrid items={spots} />
    </PageShell>
  );
}

function FlowerMarketPage() {
  return (
    <DetailPage
      title="양정 꽃시장"
      subtitle="다양한 꽃과 식물을 만날 수 있는 전통 시장입니다."
      tone="teal"
      sections={[
        {
          heading: "소개",
          body: "양정 꽃시장은 부산에서 가장 오래된 꽃시장 중 하나로, 다양한 종류의 생화, 화분, 조화 등을 저렴하게 구입할 수 있습니다.",
        },
        {
          heading: "위치 및 영업 시간",
          body: "부산광역시 부산진구 양정동 일대. 매일 오전 6시부터 오후 6시까지 운영합니다. 주말에는 더욱 다양한 상품이 준비됩니다.",
        },
        {
          heading: "추천 포인트",
          body: "계절별로 특색 있는 꽃들이 진열되어 구경하는 것만으로도 즐거운 장소입니다. 화분 선물을 준비하기에도 적합합니다.",
        },
      ]}
    />
  );
}

function GwangAnBridgePage() {
  return (
    <DetailPage
      title="광안대교"
      subtitle="부산의 상징적인 야경 명소입니다."
      tone="night"
      sections={[
        {
          heading: "소개",
          body: "광안대교는 부산광역시 수영구 남천동과 해운대구 우동을 잇는 현수교입니다. 총 길이 7.42km로 국내 최대 규모의 현수교이며, 특히 야간 조명이 아름답습니다.",
        },
        {
          heading: "위치 및 접근 방법",
          body: "지하철 2호선 광안역 또는 수영역에서 도보 이동 가능. 광안리 해수욕장 방면으로 이동하면 다리를 감상할 수 있습니다.",
        },
        {
          heading: "추천 포인트",
          body: "해질 무렵부터 자정까지 화려한 조명이 켜집니다. 특별 행사 시 다양한 컬러 조명 쇼가 펼쳐집니다. 근처 카페에서 여유롭게 감상하는 것을 추천합니다.",
        },
      ]}
    />
  );
}

function OtherTourismPage() {
  return (
    <DetailPage
      title="기타 관광지"
      subtitle="그 외 추천 관광지 안내입니다."
      tone="indigo"
      sections={[
        {
          heading: "안내",
          body: "기타 관광지 정보는 순차적으로 업데이트될 예정입니다. 추천하고 싶은 장소가 있으시면 담당 형제자매에게 알려주세요.",
        },
      ]}
    />
  );
}

/* ══════════════════════════════════════════
   404 Not Found
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   양정회중에 어서오이소 page
══════════════════════════════════════════ */
function WelcomeVideo() {
  const videoRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [volume, setVolume] = React.useState(0.8);
  const [showControls, setShowControls] = React.useState(false);
  const hideTimer = React.useRef(null);

  function startHideTimer() {
    clearTimeout(hideTimer.current);
    hideTimer.current = setTimeout(() => setShowControls(false), 2500);
  }

  function handleMouseMove() {
    if (!playing) return;
    setShowControls(true);
    startHideTimer();
  }

  function handlePlay() {
    const v = videoRef.current;
    if (!v) return;
    v.muted = false;
    v.volume = volume;
    v.play();
    setPlaying(true);
    setShowControls(true);
    startHideTimer();
  }

  function handleVideoClick() {
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) {
      v.play();
      setPlaying(true);
      setShowControls(true);
      startHideTimer();
    } else {
      v.pause();
      setPlaying(false);
      setShowControls(true);
    }
  }

  function handleVolume(e) {
    e.stopPropagation();
    const val = parseFloat(e.target.value);
    setVolume(val);
    if (videoRef.current) {
      videoRef.current.volume = val;
      videoRef.current.muted = val === 0;
    }
    startHideTimer();
  }

  function VolumeIcon({ vol }) {
    if (vol === 0)
      return (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
          <path d="M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-3-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06A8.99 8.99 0 0 0 17.03 18l2.08 2.08L20.44 18.8 4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
        </svg>
      );
    if (vol < 0.5)
      return (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
          <path d="M18.5 12A4.5 4.5 0 0 0 16 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z" />
        </svg>
      );
    return (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
      </svg>
    );
  }

  return (
    <div
      style={{
        position: "relative",
        aspectRatio: "16 / 9",
        background: "#1a1a1a",
        overflow: "hidden",
        cursor: "pointer",
      }}
      onClick={playing ? handleVideoClick : handlePlay}
      onMouseMove={handleMouseMove}
      onMouseLeave={() => playing && setShowControls(false)}
    >
      <video
        ref={videoRef}
        playsInline
        style={{
          width: "100%",
          height: "100%",
          objectFit: "cover",
          display: "block",
        }}
        onEnded={() => setPlaying(false)}
      >
        <source src="videos/family.mp4" type="video/mp4" />
      </video>

      {/* 중앙 플레이 버튼 (정지 상태) */}
      {!playing && (
        <div
          style={{
            position: "absolute",
            inset: 0,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            background: "rgba(0,0,0,0.3)",
          }}
        >
          <div
            style={{
              width: 88,
              height: 88,
              borderRadius: "50%",
              background: "rgba(255,255,255,0.92)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              boxShadow: "0 4px 24px rgba(0,0,0,0.3)",
            }}
          >
            <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
              <polygon points="13,9 30,18 13,27" fill="#1a1a1a" />
            </svg>
          </div>
        </div>
      )}

      {/* 하단 컨트롤바 */}
      {playing && (
        <div
          onClick={(e) => e.stopPropagation()}
          style={{
            position: "absolute",
            bottom: 0,
            left: 0,
            right: 0,
            padding: "12px 20px",
            background: "linear-gradient(transparent, rgba(0,0,0,0.6))",
            display: "flex",
            alignItems: "center",
            gap: 12,
            opacity: showControls ? 1 : 0,
            transition: "opacity 0.3s",
          }}
        >
          {/* 볼륨 아이콘 */}
          <div style={{ flexShrink: 0 }}>
            <VolumeIcon vol={volume} />
          </div>
          {/* 볼륨 슬라이더 */}
          <input
            type="range"
            min="0"
            max="1"
            step="0.02"
            value={volume}
            onChange={handleVolume}
            style={{
              width: 100,
              height: 4,
              cursor: "pointer",
              accentColor: "#fff",
            }}
          />
        </div>
      )}
    </div>
  );
}

function WelcomePage() {
  return (
    <div>
      <Nav />
      <Breadcrumb
        items={[
          { label: "홈", href: "#/" },
          { label: "회중정보", href: "#/회중정보" },
          { label: "양정회중에 어서오이소" },
        ]}
      />
      <PageHero
        title="양정회중에 어서오이소"
        subtitle="부산양정회중에 오신 것을 환영합니다"
      />

      <div style={{ background: "#f7f8fa", paddingBottom: 80 }}>
        {/* 동영상 */}
        <div className="welcome-video-wrap" style={{ marginBottom: 52 }}>
          <WelcomeVideo />
        </div>
        <div className="jw-container" style={{ maxWidth: 760 }}>
          {/* 손글씨 편지 */}
          <div
            style={{
              textAlign: "center",
              fontFamily: "'Nanum Pen Script', cursive",
              color: "#222",
              lineHeight: 2.2,
            }}
          >
            <p
              className="welcome-greeting"
              style={{
                fontSize: "clamp(26px, 4vw, 2.2rem)",
                color: "#b8956a",
                margin: "0 0 8px",
                fontFamily: "'Noto Sans KR', sans-serif",
                fontWeight: 700,
              }}
            >
              Welcome!
            </p>
            <p
              style={{
                fontSize: "clamp(28px, 3vw, 1.75rem)",
                margin: "0 0 48px",
                color: "#444",
              }}
            >
              저희 부산양정회중에 오신
              <br />
              여러분을 따뜻하게 환영합니다!
              <br />
              5월 한 달 동안 한국의 마케도니아인 이곳에서
              <br /> 여러분과 행복하게 봉사하기를 기대합니다!
            </p>

            <div
              style={{
                borderTop: "1px solid #ddd",
                paddingTop: 48,
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
              }}
            >
              {/* 원형 엠블럼 */}
              <div
                style={{
                  width: "clamp(240px, 55vw, 340px)",
                  height: "clamp(240px, 55vw, 340px)",
                  borderRadius: "50%",
                  border: "2px solid #b8956a",
                  outline: "6px solid #b8956a",
                  outlineOffset: "6px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  padding: "32px 24px",
                  gap: 6,
                }}
              >
                <p
                  style={{
                    fontSize: "clamp(0.75rem, 1.8vw, 0.95rem)",
                    color: "#888",
                    margin: 0,
                    letterSpacing: "0.12em",
                    textTransform: "uppercase",
                    fontFamily: "sans-serif",
                    fontWeight: 500,
                  }}
                >
                  부산대도시캠페인
                </p>
                <div
                  style={{
                    width: 40,
                    height: 1,
                    background: "#ccc",
                    margin: "4px 0",
                  }}
                />
                <p
                  style={{
                    fontSize: "clamp(0.95rem, 2.2vw, 1.15rem)",
                    color: "#333",
                    margin: 0,
                    lineHeight: 1.6,
                    textAlign: "center",
                    fontFamily: "sans-serif",
                    fontWeight: 400,
                  }}
                >
                  "마케도니아로 건너와서
                  <br />
                  우리를 도와주십시오"
                </p>
                <p
                  style={{
                    fontSize: "clamp(0.75rem, 1.6vw, 0.85rem)",
                    color: "#999",
                    margin: "2px 0 8px",
                    fontFamily: "sans-serif",
                    fontWeight: 400,
                  }}
                >
                  사도행전 16:9
                </p>
                <div
                  style={{
                    width: 40,
                    height: 1,
                    background: "#ccc",
                    margin: "4px 0",
                  }}
                />
                <p
                  style={{
                    fontSize: "clamp(1rem, 2.5vw, 1.25rem)",
                    color: "#1a5ba8",
                    margin: 0,
                    fontFamily: "sans-serif",
                    fontWeight: 600,
                    letterSpacing: "0.05em",
                  }}
                >
                  부산양정회중
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}

/* ══════════════════════════════════════════
   오시는 길 page
══════════════════════════════════════════ */
const HALLS = [
  {
    id: "yangjeong",
    name: "양정회관",
    badge: "BUSAN YANGJEONG",
    badge2: "집회장소",
    image: "images/info/yangjeong.jpeg",
    address:
      "부산 부산진구 연수로 62 아세만 화니-뜨 B동 상가 301호 (양정동 7-9)",
    mapUrl:
      "https://map.naver.com/p/directions/-/3AHL7S,2z9HWI,%EC%95%84%EC%84%B8%EB%A7%8C%ED%99%94%EB%8B%88%EB%9C%A8,16757463,PLACE_POI/-/walk?c=15.00,0,0,0,dh",
    schedule: [
      { day: "수요일", time: "PM 7:30", label: "평일 집회" },
      { day: "일요일", time: "AM 10:00", label: "주말 집회" },
    ],
    note: null,
  },
  {
    id: "jeonpo",
    name: "전포회관",
    badge: null,
    image: "images/info/jeonpo.jpeg",
    address: "부산 부산진구 전포대로255번길 37 2층 (서면전포상가 C동) ",
    mapUrl: "https://map.naver.com/v5/search/부산 부산진구 전포대로255번길 37",
    schedule: [{ day: "봉사모임", time: "", label: "봉사모임" }],
    badge2: "주로 봉사 모임",
    note: "2층으로 올라오셔서 오른쪽으로 쭉 길따라 오시면 제일끝에 위치해 있습니다. ✅ 참고 : 남자 화장실 1층 · 여자 화장실 2층 · 비밀번호 5678*",
  },
];

function DirectionsPage() {
  return (
    <div>
      <Nav />
      <Breadcrumb
        items={[
          { label: "홈", href: "#/" },
          { label: "회중정보", href: "#/회중정보" },
          { label: "오시는 길" },
        ]}
      />
      <PageHero title="오시는 길" subtitle="양정회중 집회 장소 안내" />
      <div
        style={{
          background: "#f7f8fa",
          minHeight: "60vh",
          padding: "48px 0 80px",
        }}
      >
        <div className="jw-container" style={{ maxWidth: 860 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
            {HALLS.map((hall) => (
              <HallCard key={hall.id} hall={hall} />
            ))}
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}

function HallCard({ hall }) {
  const [imgFailed, setImgFailed] = React.useState(false);
  return (
    <div
      style={{
        background: "#fff",
        borderRadius: 20,
        overflow: "hidden",
        boxShadow: "0 4px 24px rgba(0,0,0,0.09)",
        border: "1px solid #eef0f3",
      }}
    >
      {/* 이미지 */}
      <div style={{ position: "relative", background: "#e8edf2" }}>
        {hall.image && !imgFailed ? (
          <img
            src={hall.image}
            alt={hall.name}
            onError={() => setImgFailed(true)}
            style={{
              width: "100%",
              height: 320,
              objectFit: "cover",
              display: "block",
            }}
          />
        ) : (
          <Placeholder
            ratio="16 / 5"
            tone="blue"
            label={hall.name}
            radius="0"
          />
        )}
        <div
          style={{
            position: "absolute",
            inset: 0,
            background:
              "linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%)",
          }}
        />
        <div style={{ position: "absolute", bottom: 20, left: 24 }}>
          <h2
            style={{
              color: "#fff",
              fontSize: "1.5rem",
              fontWeight: 800,
              margin: 0,
              lineHeight: 1.2,
            }}
          >
            {hall.name}
          </h2>
          {hall.badge && (
            <p
              style={{
                color: "rgba(255,255,255,0.75)",
                fontSize: "0.8rem",
                fontWeight: 600,
                margin: "4px 0 0",
                letterSpacing: "0.1em",
              }}
            >
              {hall.badge}
            </p>
          )}
          {hall.badge2 && (
            <span
              className="hall-badge2"
              style={{
                display: "inline-block",
                marginTop: 8,
                background: "#ea7317",
                color: "#fff",
                fontSize: "0.78rem",
                fontWeight: 700,
                padding: "4px 12px",
                borderRadius: 20,
                letterSpacing: "0.03em",
              }}
            >
              {hall.badge2}
            </span>
          )}
        </div>
      </div>

      {/* 내용 */}
      <div
        style={{
          padding: "28px 28px 32px",
          display: "flex",
          flexWrap: "wrap",
          gap: 28,
        }}
      >
        {/* 집회 일정 */}
        {hall.schedule.length > 0 && hall.schedule[0].day !== "봉사모임" && (
          <div style={{ flex: "1 1 200px" }}>
            <p
              style={{
                fontSize: "0.72rem",
                fontWeight: 700,
                color: "#1a5ba8",
                letterSpacing: "0.08em",
                margin: "0 0 12px",
                textTransform: "uppercase",
              }}
            >
              집회 일정
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {hall.schedule.map((s) => (
                <div
                  key={s.label}
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    background: "#f0f4fb",
                    borderRadius: 10,
                    padding: "10px 14px",
                  }}
                >
                  <span
                    className="hall-sch-label"
                    style={{
                      fontSize: "0.85rem",
                      color: "#444",
                      fontWeight: 500,
                    }}
                  >
                    {s.label}
                  </span>
                  <span
                    className="hall-sch-time"
                    style={{
                      fontSize: "0.85rem",
                      fontWeight: 700,
                      color: "#1a5ba8",
                    }}
                  >
                    {s.day} {s.time}
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* 주소 */}
        <div style={{ flex: "2 1 260px" }}>
          <p
            style={{
              fontSize: "0.72rem",
              fontWeight: 700,
              color: "#1a5ba8",
              letterSpacing: "0.08em",
              margin: "0 0 12px",
              textTransform: "uppercase",
            }}
          >
            주소
          </p>
          <p
            style={{
              fontSize: "0.92rem",
              color: "#333",
              lineHeight: 1.7,
              margin: "0 0 14px",
            }}
          >
            📍 {hall.address}
          </p>
          {hall.note && (
            <p
              style={{
                fontSize: "0.82rem",
                color: "#d97706",
                background: "#fffbeb",
                borderRadius: 8,
                padding: "8px 12px",
                margin: "0 0 14px",
              }}
            >
              ℹ️ {hall.note}
            </p>
          )}
          <a
            href={hall.mapUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="hall-map-btn"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 6,
              fontSize: "0.83rem",
              fontWeight: 700,
              color: "#03c75a",
              textDecoration: "none",
              border: "1.5px solid #03c75a",
              borderRadius: 8,
              padding: "8px 16px",
            }}
          >
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
              <path
                d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                fill="#03c75a"
                fillOpacity=".25"
                stroke="#03c75a"
                strokeWidth="2"
              />
              <circle cx="12" cy="10" r="3" fill="#03c75a" />
            </svg>
            네이버맵 길찾기
          </a>
        </div>
      </div>
    </div>
  );
}

function NotFoundPage() {
  return (
    <div>
      <Nav />
      <Breadcrumb items={[{ label: "홈", href: "#/" }, { label: "준비중" }]} />
      <PageHero title="준비중입니다" subtitle="곧 업데이트될 예정입니다." />
      <section
        className="jw-sec jw-sec-light"
        style={{ minHeight: "40vh", display: "flex", alignItems: "center" }}
      >
        <div className="jw-container" style={{ textAlign: "center" }}>
          <p style={{ fontSize: "2rem", marginBottom: 20 }}>🚧</p>
          <a href="#/" className="jw-cta">
            홈으로 돌아가기 <Chevron />
          </a>
        </div>
      </section>
      <Footer />
    </div>
  );
}

/* ══════════════════════════════════════════
   전시대 구역 지도 page
══════════════════════════════════════════ */
const DISPLAY_SPOTS = [
  {
    name: "서면몰 10번 출구",
    lat: 35.1558956,
    lng: 129.0595621,
    info: "스타벅스 부산서면중앙로점 횡단보도 맞은편\n서면역 2번출구에서 도보 3분\n서면상권의 중심지",
    mapUrl:
      "https://map.naver.com/p/search/%EC%84%9C%EB%A9%B4%EB%AA%B0%2010%EB%B2%88%EC%B6%9C%EA%B5%AC/place/1625437244?placePath=/home?bk_query=%EC%84%9C%EB%A9%B4%EB%AA%B0%2010%EB%B2%88%EC%B6%9C%EA%B5%AC&entry=pll&from=nx&fromNxList=true&fromPanelNum=2&timestamp=202605010916&locale=ko&svcName=map_pcv5&searchText=%EC%84%9C%EB%A9%B4%EB%AA%B0%2010%EB%B2%88%EC%B6%9C%EA%B5%AC&searchType=place&c=18.91,0,0,0,adh&isMini=true&p=_0bXe8l8LZ7eZqX5wP5qcQ,125,10,80,Float",
    images: [
      "images/territory/samjeong-1.jpg",
      "images/territory/samjeong-2.jpg",
      "images/territory/samjeong-3.jpg",
    ],
    features: [
      "스타벅스 부산서면중앙로점 횡단보도 맞은편",
      "서면역 2번출구에서 도보 3분",
      "서면상권의 중심지",
    ],
  },
  {
    name: "부전도서관",
    lat: 35.1558956,
    lng: 129.0619415,
    info: "부산광역시 부산진구 동천로 79",
    mapUrl:
      "https://map.naver.com/p/search/%EB%B6%80%EC%A0%84%EB%8F%84%EC%84%9C%EA%B4%80/place/11592531",
    images: [
      "images/territory/bujeon-lib-1.jpeg",
      "images/territory/bujeon-lib-2.jpeg",
      "images/territory/bujeon-lib-3.jpeg",
      "images/territory/bujeon-lib-4.jpeg",
    ],
    features: [
      "서면중심과 전포카페거리와 연결되는 곳에 위치",
      "카페거리 도보 5분. 전포역 7번출구와 가까움",
      "놀이마루 맞은 편에 위치 (국가에서 운영. 체험과 전시 등을 진행)",
      "현재 부전도서관은 공사 중",
    ],
  },
  {
    name: "서면역 9번 출구\n(영광도서)",
    lat: 35.158133,
    lng: 129.0578783,
    info: "부산광역시 부산진구 부전동",
    mapUrl: "https://map.naver.com/p/entry/place/21404150",
    images: [
      "images/territory/seomyeon-9-1.jpeg",
      "images/territory/seomyeon-9-2.jpeg",
      "images/territory/seomyeon-9-3.jpeg",
    ],
    features: [
      "서면역이 1,2호선 환승구간으로 유동인구 많음",
      "영광도서 근처로 불림",
      "건너편에 롯데백화점 위치",
      "노인분들이 근처에 상주하는 경우 많음",
    ],
  },
  {
    name: "서면역 13번 출구\n(국민은행)",
    lat: 35.1583443,
    lng: 129.0591335,
    info: "부산광역시 부산진구 부전동",
    mapUrl:
      "https://map.naver.com/p/search/%EC%84%9C%EB%A9%B4%EC%97%AD%2013%EB%B2%88%20%EC%B6%9C%EA%B5%AC/place/21404075",
    images: [
      "images/territory/seomyeon-13-1.jpeg",
      "images/territory/seomyeon-13-2.jpeg",
    ],
    features: [
      "서면역이 1,2호선 환승구간으로 유동인구 많음",
      "부전시장과 가까운 출구 중 하나",
      "출구 근처에 노점상이 많은 편",
      "노인분들이 근처에 상주하는 경우 많음",
    ],
  },
  {
    name: "부전역 2번 출구",
    lat: 35.1617263,
    lng: 129.0626281,
    info: "부산광역시 부산진구 전포동",
    mapUrl: "https://map.naver.com/p/entry/place/21404046",
    images: [
      "images/territory/bujeon-2-1.jpeg",
      "images/territory/bujeon-2-2.jpeg",
    ],
    features: [
      "지하철 1호선 라인. 서면역과 1코스 차이",
      "부전기차역과 도보 3분 (울산까지 연결된 동해선 / 서울까지 연결된 경부선)",
      "부전시장 도보 3분",
      "2번 출구에서 나오는 인구는 거주지로 이동하는 경우가 대부분 (인근 주거지역)",
      "상권이 형성된 중심가이지만, 비교적 조용한 편이라 전시대 봉사하기 좋음",
    ],
  },
  {
    name: "전포 현대 아이파크 정문",
    lat: 35.1548158,
    lng: 129.0699162,
    info: "부산광역시 부산진구 전포동",
    mapUrl:
      "https://map.naver.com/p/search/%EC%84%9C%EB%A9%B4%20%EC%95%84%EC%9D%B4%ED%8C%8C%ED%81%AC%20%EC%A0%95%EB%AC%B8/place/1491580183",
    images: [],
    features: [
      "전포동 주거 밀집 아파트 단지 정문",
      "단지 입출입 주민 유동인구 집중",
      "다양한 연령대가 고루 거주하는 대단지",
    ],
  },
  {
    name: "e편한세상\n시민공원1단지 정문",
    lat: 35.1662524,
    lng: 129.0678779,
    info: "부산광역시 부산진구 중앙대로848번길 30",
    mapUrl:
      "https://map.naver.com/p/search/e%ED%8E%B8%ED%95%9C%EC%84%B8%EC%83%81+%EC%8B%9C%EB%AF%BC%EA%B3%B5%EC%9B%90+1%EB%8B%A8%EC%A7%80/place/1609516055",
    images: [],
    features: [
      "부산시민공원 인근 대단지 아파트",
      "단지 입출입 주민 유동인구 집중",
      "다양한 연령대가 고루 거주하는 대단지",
    ],
  },
  {
    name: "양정 스위첸\n아파트 정문",
    lat: 35.1727345,
    lng: 129.0800684,
    info: "부산광역시 부산진구 양정동 531-3",
    mapUrl:
      "https://map.naver.com/p/search/%EC%96%91%EC%A0%95%EC%8A%A4%EC%9C%84%EC%B2%B8%EC%A0%95%EB%AC%B8/place/1437312018",
    images: [],
    features: [
      "양정동 주거 밀집 아파트 단지 정문",
      "단지 입출입 주민 유동인구 집중",
      "다양한 연령대가 고루 거주하는 대단지",
    ],
  },
];

function SpotSlider({ images }) {
  const [idx, setIdx] = React.useState(0);
  const [failed, setFailed] = React.useState({});
  const valid = images.filter((_, i) => !failed[i]);
  if (valid.length === 0) return null;
  const cur = images[idx] || images[0];
  return (
    <div style={{ position: "relative", width: "100%", background: "#111" }}>
      <img
        src={cur}
        alt=""
        onError={() => setFailed((p) => ({ ...p, [idx]: true }))}
        style={{
          width: "100%",
          height: 320,
          objectFit: "cover",
          display: "block",
        }}
      />
      {images.length > 1 && (
        <>
          <button
            onClick={() =>
              setIdx((p) => (p - 1 + images.length) % images.length)
            }
            style={{
              position: "absolute",
              left: 10,
              top: "50%",
              transform: "translateY(-50%)",
              background: "rgba(0,0,0,0.5)",
              color: "#fff",
              border: "none",
              borderRadius: 6,
              padding: "6px 10px",
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              gap: 4,
              fontSize: "0.8rem",
              fontWeight: 600,
            }}
          >
            <svg
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <polyline points="15 18 9 12 15 6" />
            </svg>
            이전
          </button>
          <button
            onClick={() => setIdx((p) => (p + 1) % images.length)}
            style={{
              position: "absolute",
              right: 10,
              top: "50%",
              transform: "translateY(-50%)",
              background: "rgba(0,0,0,0.5)",
              color: "#fff",
              border: "none",
              borderRadius: 6,
              padding: "6px 10px",
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              gap: 4,
              fontSize: "0.8rem",
              fontWeight: 600,
            }}
          >
            다음
            <svg
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <polyline points="9 18 15 12 9 6" />
            </svg>
          </button>
          <div
            style={{
              position: "absolute",
              bottom: 8,
              left: "50%",
              transform: "translateX(-50%)",
              display: "flex",
              gap: 5,
            }}
          >
            {images.map((_, i) => (
              <span
                key={i}
                onClick={() => setIdx(i)}
                style={{
                  width: 7,
                  height: 7,
                  borderRadius: "50%",
                  background: i === idx ? "#fff" : "rgba(255,255,255,0.4)",
                  cursor: "pointer",
                  display: "inline-block",
                }}
              />
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function TerritoryDisplayPage() {
  const mapRef = React.useRef(null);
  const mapInstance = React.useRef(null);
  const [selectedSpot, setSelectedSpot] = React.useState(null);

  React.useEffect(() => {
    if (mapInstance.current || !window.L) return;

    const map = window.L.map(mapRef.current, {
      zoomControl: true,
      tap: false,
      scrollWheelZoom: false,
    }).setView([35.157, 129.06], 15);

    window.L.tileLayer(
      "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
      { attribution: "© OpenStreetMap contributors © CARTO", maxZoom: 19 },
    ).addTo(map);

    DISPLAY_SPOTS.forEach((spot) => {
      const labelHtml = spot.name.replace("\n", "<br>");
      const icon = window.L.divIcon({
        className: "",
        html: `<div class="map-pin-wrap" style="cursor:pointer"><div class="map-pin-dot"></div><div class="map-pin-label">${labelHtml}</div></div>`,
        iconSize: [120, 54],
        iconAnchor: [60, 7],
        popupAnchor: [0, -10],
      });

      window.L.marker([spot.lat, spot.lng], { icon })
        .addTo(map)
        .bindPopup(
          `<div style="min-width:175px;padding:4px 2px;font-family:sans-serif">
            <b style="font-size:14px">${spot.name.replace("\n", " ")}</b>
            <p style="margin:6px 0 10px;font-size:12px;color:#555;white-space:pre-line">${spot.info}</p>
            <a href="${spot.mapUrl}" target="_blank" rel="noopener noreferrer"
              style="display:inline-block;background:#03c75a;color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:4px;text-decoration:none;">
              네이버지도 열기
            </a>
          </div>`,
          { maxWidth: 240 },
        );
    });

    mapInstance.current = map;
  }, []);

  React.useEffect(() => {
    return () => {
      if (mapInstance.current) {
        mapInstance.current.remove();
        mapInstance.current = null;
      }
    };
  }, []);

  return (
    <div>
      <Nav />
      <Breadcrumb
        items={[
          { label: "홈", href: "#/" },
          { label: "양정봉사구역", href: "#/양정구역" },
          { label: "전시대 구역" },
        ]}
      />
      <PageHero title="전시대 구역" subtitle="양정회중 전시대 봉사 구역" />
      <div style={{ background: "#f7f8fa", padding: "32px 0 60px" }}>
        <div className="jw-container">
          <div
            ref={mapRef}
            className="territory-map"
            style={{
              width: "100%",
              height: 520,
              overflow: "hidden",
              boxShadow: "0 2px 16px rgba(0,0,0,0.12)",
            }}
          />
          <div style={{ marginTop: 24 }}>
            <span
              style={{
                display: "inline-block",
                background: "#ea7317",
                color: "#fff",
                fontSize: "0.78rem",
                fontWeight: 600,
                padding: "5px 16px",
                borderRadius: 20,
                marginBottom: 10,
                letterSpacing: "0.02em",
              }}
            >
              👆 클릭하시면 구역정보를 보실수 있습니다
            </span>
          </div>
          <div
            style={{
              marginTop: 0,
              display: "flex",
              flexWrap: "wrap",
              gap: 12,
            }}
          >
            {DISPLAY_SPOTS.map((s) => {
              const isActive = selectedSpot && selectedSpot.name === s.name;
              return (
                <button
                  key={s.name}
                  onClick={() => setSelectedSpot(isActive ? null : s)}
                  className="spot-btn"
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 8,
                    background: isActive ? "#095bac" : "#fff",
                    border: "1px solid #e8e8e8",
                    borderLeft: `4px solid #095bac`,
                    padding: "10px 16px",
                    borderRadius: 0,
                    fontSize: "0.9rem",
                    fontWeight: 600,
                    color: isActive ? "#fff" : "#222",
                    cursor: "pointer",
                  }}
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 26 26"
                    width="16"
                    height="16"
                    aria-hidden="true"
                    style={{ flexShrink: 0, opacity: 0.7 }}
                  >
                    <path
                      fillRule="evenodd"
                      d="M13 13.142a1.618 1.618 0 0 1-1.615-1.62c0-.895.723-1.62 1.615-1.62s1.615.725 1.615 1.62c0 .894-.723 1.62-1.615 1.62zm5.905 1.504A6.299 6.299 0 0 0 20 11.108c0-3.642-3.14-6.606-6.999-6.608C9.143 4.502 6.002 7.466 6 11.108c0 1.252.378 2.475 1.116 3.567l5.5 6.643a.5.5 0 0 0 .77 0z"
                      clipRule="evenodd"
                      fill="currentColor"
                    />
                  </svg>
                  {s.name.replace("\n", " ")}
                </button>
              );
            })}
          </div>

          {selectedSpot && (
            <div
              style={{
                marginTop: 16,
                background: "#fff",
                border: "1px solid #e8e8e8",
                borderTop: "3px solid #095bac",
              }}
            >
              <SpotSlider images={selectedSpot.images} />
              <div style={{ padding: "20px 24px" }}>
                <h3 style={{ margin: "0 0 16px", fontSize: "1.1rem" }}>
                  {selectedSpot.name.replace("\n", " ")}
                </h3>
                <ul
                  style={{
                    margin: 0,
                    padding: 0,
                    listStyle: "none",
                    display: "flex",
                    flexDirection: "column",
                    gap: 8,
                  }}
                >
                  {selectedSpot.features.map((f) => (
                    <li
                      key={f}
                      style={{
                        display: "flex",
                        alignItems: "flex-start",
                        gap: 8,
                        fontSize: "0.9rem",
                        color: "#333",
                      }}
                    >
                      <span
                        style={{
                          color: "#095bac",
                          fontWeight: 700,
                          flexShrink: 0,
                        }}
                      >
                        •
                      </span>
                      {f}
                    </li>
                  ))}
                </ul>
                <a
                  href={selectedSpot.mapUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    display: "inline-block",
                    marginTop: 18,
                    background: "#03c75a",
                    color: "#fff",
                    fontSize: "0.85rem",
                    fontWeight: 700,
                    padding: "7px 16px",
                    borderRadius: 4,
                    textDecoration: "none",
                  }}
                >
                  네이버지도 열기
                </a>
              </div>
            </div>
          )}
        </div>
      </div>
      <Footer />
    </div>
  );
}

/* ══════════════════════════════════════════
   호별구역 page  (Apple-style cinematic)
══════════════════════════════════════════ */
const hi = (text) => (
  <span style={{ color: "#0071e3", fontSize: "1.25em", fontWeight: 400 }}>
    {text}
  </span>
);

const HOBYUL_SECTIONS = [
  {
    key: "commercial",
    badge: "상가구역 밀집지역",
    title: "부산 최대 상권의 중심",
    images: [],
    tone: "night",
    dark: true,
    bullets: [
      <>
        {hi("서면역")} ~ {hi("부전시장")} ~ {hi("전포카페거리")} ~{" "}
        {hi("롯데백화점")}
        <br />
        일대를 도보로 이동 가능한 부산 최대 상권
      </>,
      <>
        하루 평균 유동인구 약{" "}
        <span style={{ color: "#1d1d1f", fontWeight: 600 }}>47만 명</span> (서울
        종각·명동과 비슷한 수준)
      </>,
    ],
    subSections: [
      {
        text: (
          <>
            {hi("부전시장")}
            <br />
            전통시장 + 생활형 소비 / 새벽~오후 6시경 운영
          </>
        ),
        images: [
          "images/territory/com-1.jpeg",
          "images/territory/com-2.jpeg",
          "images/territory/com-3.jpeg",
          "images/territory/com-4.jpeg",
        ],
      },
      {
        text: (
          <>
            {hi("서면 번화가, 롯데백화점 일대")}
            <br />
            음식·술집·프랜차이즈 / 점심~심야까지 운영
          </>
        ),
        images: [
          "images/territory/com-5.jpeg",
          "images/territory/com-6.jpeg",
          "images/territory/com-7.jpeg",
          "images/territory/com-8.jpeg",
          "images/territory/com-8-3.jpeg",
          "images/territory/com-8-4.jpeg",
        ],
      },
      {
        text: (
          <>
            {hi("전포 카페거리")}
            <br />— 카페 특화 개별 점포 / 주말 유동인구 집중
          </>
        ),
        images: [
          "images/territory/com-9.jpeg",
          "images/territory/com-10.jpeg",
          "images/territory/com-11.jpeg",
          "images/territory/com-12.jpeg",
        ],
      },
    ],
  },
  {
    key: "apartment",
    badge: "아파트 주거지역",
    title: "주상복합·오피스텔 밀집",
    images: [
      "images/territory/apt-1.jpeg",
      "images/territory/apt-2.jpeg",
      "images/territory/apt-3.jpeg",
      "images/territory/apt-4.jpeg",
      "images/territory/apt-5.jpeg",
      "images/territory/apt-6.jpeg",
    ],
    tone: "indigo",
    dark: true,
    bullets: [
      <>
        대단지 아파트는 일반 주거지역과 유사하나
        <br />
        {hi("주상복합")} 구조가 특히 많음
      </>,
      <>{hi("오피스텔형 원룸")} 비율이 높은 편</>,
      <>
        상권 중심 지역에는
        <br />
        {hi("에어비앤비")} 숙소와 거주지가 혼합된 건물도 다수
      </>,
    ],
  },
  {
    key: "hillside",
    badge: "가파른 오르막의 주택·빌라지역",
    title: "골목 미로, 높은 지대",
    images: [
      "images/territory/door-1.jpeg",
      "images/territory/door-2.jpeg",
      "images/territory/door-3.jpeg",
      "images/territory/door-4.jpeg",
      "images/territory/door-5.jpeg",
      "images/territory/door-6.jpeg",
      "images/territory/door-7.jpeg",
      "images/territory/door-8.jpeg",
      "images/territory/door-9.jpeg",
      "images/territory/door-10.jpeg",
      "images/territory/door-11.jpeg",
    ],
    tone: "slate",
    dark: false,
    bullets: [
      <>
        {hi("전포동")}은 노후 {hi("저층 주택")}과 {hi("빌라")}가 많은 지역
      </>,
      <>
        {hi("골목")}이 좁고 {hi("미로")}처럼 연결된 {hi("높은 지대")}가 많음
      </>,
    ],
  },
];

function Tilt3D({ children }) {
  const ref = React.useRef(null);
  const frameRef = React.useRef(null);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0, active: false });

  const onMove = (e) => {
    if (frameRef.current) cancelAnimationFrame(frameRef.current);
    frameRef.current = requestAnimationFrame(() => {
      const el = ref.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const nx = (e.clientX - rect.left) / rect.width - 0.5;
      const ny = (e.clientY - rect.top) / rect.height - 0.5;
      setTilt({ x: ny * -14, y: nx * 14, active: true });
    });
  };

  const onLeave = () => {
    if (frameRef.current) cancelAnimationFrame(frameRef.current);
    setTilt({ x: 0, y: 0, active: false });
  };

  const glareX = (tilt.y / 14) * 100 + 50;
  const glareY = (-tilt.x / 14) * 100 + 50;

  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      style={{
        position: "relative",
        overflow: "hidden",
        borderRadius: 12,
        transform: tilt.active
          ? `perspective(1200px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg) scale3d(1.04,1.04,1)`
          : "perspective(1200px) rotateX(0deg) rotateY(0deg)",
        boxShadow: tilt.active
          ? `${-tilt.y * 2}px ${tilt.x * 2 + 28}px 70px rgba(0,0,0,0.7)`
          : "0 8px 32px rgba(0,0,0,0.45)",
        transition: tilt.active
          ? "transform 0.07s linear, box-shadow 0.07s linear"
          : "transform 0.5s cubic-bezier(0.23,1,0.32,1), box-shadow 0.5s ease",
      }}
    >
      {children}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: `radial-gradient(ellipse at ${glareX}% ${glareY}%, rgba(255,255,255,${tilt.active ? 0.11 : 0}) 0%, transparent 60%)`,
          pointerEvents: "none",
          mixBlendMode: "screen",
          zIndex: 1,
          transition: tilt.active ? "none" : "background 0.4s ease",
        }}
      />
    </div>
  );
}

function HobyulImgCard({ src, alt }) {
  const [failed, setFailed] = React.useState(false);
  if (failed) return null;
  return (
    <img
      src={src}
      alt={alt}
      onError={() => setFailed(true)}
      style={{
        width: "100%",
        aspectRatio: "4/3",
        objectFit: "cover",
        display: "block",
        borderRadius: 12,
      }}
    />
  );
}

/* ══════════════════════════════════════════
   사업구역 page
══════════════════════════════════════════ */
const BUSINESS_IMAGES = [
  "images/territory/business-map.jpeg",
  "images/territory/business-map2.jpeg",
];

function BusinessPage() {
  const [lightbox, setLightbox] = React.useState(null);
  return (
    <div>
      <Nav />
      <Breadcrumb
        items={[
          { label: "홈", href: "#/" },
          { label: "양정봉사구역", href: "#/양정구역/전시대" },
          { label: "사업구역" },
        ]}
      />
      <PageHero title="사업구역" subtitle="양정회중 사업구역 안내" />

      <div style={{ background: "#fff", paddingBottom: 80 }}>
        <div className="jw-container" style={{ maxWidth: 900, paddingTop: 48 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {BUSINESS_IMAGES.map((src, i) => (
              <img
                key={i}
                src={src}
                alt={`사업구역 지도 ${i + 1}`}
                onClick={() => setLightbox(src)}
                style={{
                  width: "100%",
                  display: "block",
                  borderRadius: 4,
                  cursor: "zoom-in",
                }}
              />
            ))}
          </div>
        </div>
      </div>

      {lightbox && (
        <div
          onClick={() => setLightbox(null)}
          style={{
            position: "fixed",
            inset: 0,
            zIndex: 9999,
            background: "rgba(0,0,0,0.85)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            cursor: "zoom-out",
          }}
        >
          <img
            src={lightbox}
            alt="사업구역 지도"
            style={{
              maxWidth: "95vw",
              maxHeight: "95vh",
              borderRadius: 4,
              display: "block",
            }}
          />
        </div>
      )}

      <Footer />
    </div>
  );
}

function HobyulPage() {
  return (
    <div style={{ background: "#fff" }}>
      <Nav />
      <Breadcrumb
        items={[
          { label: "홈", href: "#/" },
          { label: "양정봉사구역", href: "#/양정구역/전시대" },
          { label: "호별구역" },
        ]}
      />
      <PageHero
        title="호별구역"
        subtitle="서면·전포동 일대 양정회중 호별 봉사 구역"
      />

      {HOBYUL_SECTIONS.map((sec, i) => {
        const bg = i % 2 === 0 ? "#fff" : "#f7f8fa";
        const midIdx = Math.ceil(sec.images.length / 2);
        const topImgs = sec.embedText
          ? sec.images.slice(0, midIdx)
          : sec.images;
        const botImgs = sec.embedText ? sec.images.slice(midIdx) : [];
        const allImgs = sec.images;

        const TextBlock = () => (
          <div
            style={{
              textAlign: "center",
              padding: "80px clamp(20px,5vw,60px)",
              maxWidth: 760,
              margin: "0 auto",
            }}
          >
            <p
              style={{
                fontSize: "0.75rem",
                fontWeight: 600,
                letterSpacing: "0.14em",
                color: "#4a6da7",
                textTransform: "uppercase",
                margin: "0 0 18px",
              }}
            >
              ◈ {sec.badge} ◈
            </p>
            <h2
              style={{
                fontSize: "clamp(1.875rem,4.5vw,3.375rem)",
                fontWeight: 700,
                color: "#1d1d1f",
                margin: "0 0 28px",
                lineHeight: 1.1,
                letterSpacing: "-0.02em",
              }}
            >
              {sec.title}
            </h2>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 10,
                alignItems: "center",
              }}
            >
              {sec.bullets.map((b, j) => (
                <p
                  key={j}
                  style={{
                    fontSize: "clamp(0.9375rem,1.6vw,1.125rem)",
                    color: "#444",
                    lineHeight: 1.7,
                    margin: 0,
                    maxWidth: 600,
                  }}
                >
                  {b}
                </p>
              ))}
            </div>
          </div>
        );

        const ImgGrid = ({ imgs, offset = 0 }) =>
          imgs.length > 0 ? (
            <div
              style={{
                maxWidth: 1200,
                margin: "0 auto",
                padding: "0 clamp(20px,4vw,60px)",
                display: "grid",
                gridTemplateColumns: "repeat(2, 1fr)",
                gap: "clamp(12px,2vw,20px)",
              }}
            >
              {imgs.map((img, j) => (
                <Tilt3D key={offset + j}>
                  <HobyulImgCard
                    src={img}
                    alt={`${sec.badge} ${offset + j + 1}`}
                  />
                </Tilt3D>
              ))}
            </div>
          ) : null;

        return (
          <section
            key={sec.key}
            style={{
              background: bg,
              borderBottom: "1px solid #e8e8ed",
              paddingBottom: 80,
            }}
          >
            {sec.subSections ? (
              <>
                <TextBlock />
                {sec.subSections.map((sub, si) => (
                  <div key={si} style={{ marginBottom: 60 }}>
                    <p
                      style={{
                        fontSize: "clamp(0.9375rem,1.6vw,1.125rem)",
                        color: "#444",
                        lineHeight: 1.7,
                        textAlign: "center",
                        margin: "0 auto 28px",
                        maxWidth: 600,
                        padding: "0 20px",
                      }}
                    >
                      {sub.text}
                    </p>
                    <ImgGrid imgs={sub.images} offset={si * 4} />
                  </div>
                ))}
              </>
            ) : sec.textAfter ? (
              <>
                <ImgGrid imgs={allImgs} offset={0} />
                <TextBlock />
              </>
            ) : sec.embedText ? (
              <>
                <ImgGrid imgs={topImgs} offset={0} />
                <TextBlock />
                <ImgGrid imgs={botImgs} offset={midIdx} />
              </>
            ) : (
              <>
                <TextBlock />
                <ImgGrid imgs={topImgs} offset={0} />
              </>
            )}
          </section>
        );
      })}

      {/* Bottom CTA */}
      <div
        style={{
          background: "#f7f8fa",
          borderTop: "1px solid #e8e8ed",
          textAlign: "center",
          padding: "64px 24px",
        }}
      >
        <p
          style={{
            fontSize: "clamp(0.875rem,1.5vw,1.0625rem)",
            color: "#666",
            margin: "0 0 24px",
          }}
        >
          전시대 구역도 함께 확인해보세요
        </p>
        <a
          href="#/양정구역/전시대"
          style={{
            display: "inline-block",
            background: "#0071e3",
            color: "#fff",
            fontSize: "clamp(0.9375rem,1.5vw,1.0625rem)",
            fontWeight: 600,
            padding: "14px 32px",
            borderRadius: 980,
            textDecoration: "none",
          }}
        >
          전시대 구역 보기
        </a>
      </div>

      <Footer />
    </div>
  );
}

/* ══════════════════════════════════════════
   TouristBridgePage — 부산 가볼만한 곳 브릿지
══════════════════════════════════════════ */
function usePetals(canvasRef) {
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const resize = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    };
    resize();
    window.addEventListener("resize", resize);

    const COLORS = [
      "#ffb7c5",
      "#ff91a8",
      "#ffc0cb",
      "#ffccd5",
      "#ff6fa3",
      "#fff0f3",
      "#f9a8d4",
      "#fda4af",
    ];
    const petals = [];
    let spawning = true;
    let spawnCount = 0;
    const MAX_PETALS = 55;

    function spawnPetal() {
      const w = canvas.width;
      petals.push({
        x: Math.random() * (w + 100) - 50,
        y: -20,
        size: 5 + Math.random() * 9,
        speedY: 1.2 + Math.random() * 2.2,
        speedX: (Math.random() - 0.5) * 1.2,
        rot: Math.random() * Math.PI * 2,
        rotSpeed: (Math.random() - 0.5) * 0.06,
        sway: Math.random() * Math.PI * 2,
        swayAmp: 0.6 + Math.random() * 1.2,
        swayFreq: 0.018 + Math.random() * 0.018,
        alpha: 0,
        color: COLORS[Math.floor(Math.random() * COLORS.length)],
      });
    }

    function drawPetal(p) {
      const s = p.size;
      ctx.save();
      ctx.translate(p.x, p.y);
      ctx.rotate(p.rot);

      ctx.globalAlpha = p.alpha * 0.68;
      ctx.fillStyle = p.color;
      ctx.beginPath();
      ctx.moveTo(0, s);
      ctx.bezierCurveTo(
        -s * 0.85,
        s * 0.35,
        -s * 1.05,
        -s * 0.25,
        -s * 0.42,
        -s * 0.62,
      );
      ctx.bezierCurveTo(
        -s * 0.22,
        -s * 0.95,
        -s * 0.08,
        -s * 0.82,
        0,
        -s * 0.58,
      );
      ctx.bezierCurveTo(
        s * 0.08,
        -s * 0.82,
        s * 0.22,
        -s * 0.95,
        s * 0.42,
        -s * 0.62,
      );
      ctx.bezierCurveTo(s * 1.05, -s * 0.25, s * 0.85, s * 0.35, 0, s);
      ctx.closePath();
      ctx.fill();

      ctx.globalAlpha = p.alpha * 0.18;
      ctx.fillStyle = "#fff";
      ctx.beginPath();
      ctx.moveTo(0, s * 0.6);
      ctx.bezierCurveTo(-s * 0.3, s * 0.1, -s * 0.35, -s * 0.2, 0, -s * 0.45);
      ctx.bezierCurveTo(s * 0.35, -s * 0.2, s * 0.3, s * 0.1, 0, s * 0.6);
      ctx.fill();

      ctx.globalAlpha = p.alpha * 0.2;
      ctx.strokeStyle = "#fff";
      ctx.lineWidth = 0.7;
      ctx.beginPath();
      ctx.moveTo(0, s * 0.85);
      ctx.lineTo(0, -s * 0.45);
      ctx.stroke();

      ctx.restore();
    }

    let lastSpawn = 0;
    let raf;

    function tick(ts) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      if (spawning && ts - lastSpawn > 140 && spawnCount < MAX_PETALS) {
        spawnPetal();
        if (Math.random() < 0.2) spawnPetal();
        lastSpawn = ts;
        spawnCount++;
        if (spawnCount >= MAX_PETALS) spawning = false;
      }

      let alive = false;
      for (const p of petals) {
        p.sway += p.swayFreq;
        p.x += p.speedX + Math.sin(p.sway) * p.swayAmp;
        p.y += p.speedY;
        p.rot += p.rotSpeed;
        p.alpha = Math.min(1, p.alpha + 0.04);

        const fadeStart = canvas.height - 80;
        if (p.y > fadeStart) p.alpha = Math.max(0, p.alpha - 0.035);

        if (p.y < canvas.height + 40 && p.alpha > 0) alive = true;
        if (p.alpha > 0) drawPetal(p);
      }

      if (alive || spawning) raf = requestAnimationFrame(tick);
      else canvas.style.display = "none";
    }

    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("resize", resize);
    };
  }, []);
}

const BRIDGE_CARDS = [
  {
    label: "구역근처 명소",
    desc: "구역 주변에서 걸어갈 수 있는 핫플레이스",
    href: "#/맛집/구역내명소",
    image: "images/tour/in-1.jpeg",
    accent: "#0071e3",
  },
  {
    label: "구역외 명소",
    desc: "부산 전역의 추천하는 유명 관광·야경 명소",
    href: "#/맛집/추천관광",
    image: "images/tour/out-1.jpeg",
    accent: "#f97316",
  },
];

function BridgeCard({ card }) {
  const [imgFailed, setImgFailed] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={card.href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "block",
        textDecoration: "none",
        color: "inherit",
        borderRadius: 20,
        overflow: "hidden",
        background: "#111",
        boxShadow: hover
          ? `0 24px 60px rgba(0,0,0,0.55), 0 0 0 2px ${card.accent}`
          : "0 8px 32px rgba(0,0,0,0.35)",
        transform: hover ? "translateY(-6px) scale(1.015)" : "none",
        transition: "transform 260ms ease, box-shadow 260ms ease",
        flex: "1 1 300px",
        maxWidth: 500,
      }}
    >
      {/* 이미지 */}
      <div
        style={{
          position: "relative",
          aspectRatio: "16/9",
          overflow: "hidden",
        }}
      >
        {card.image && !imgFailed ? (
          <img
            src={card.image}
            alt={card.label}
            onError={() => setImgFailed(true)}
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
              display: "block",
              transform: hover ? "scale(1.06)" : "scale(1)",
              transition: "transform 400ms ease",
            }}
          />
        ) : (
          <div
            style={{
              width: "100%",
              height: "100%",
              background: "linear-gradient(135deg,#1d2a44,#3d5280)",
            }}
          />
        )}
        <div
          style={{
            position: "absolute",
            inset: 0,
            background:
              "linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%)",
          }}
        />
        <span
          style={{
            position: "absolute",
            top: 16,
            left: 16,
            background: card.accent,
            color: "#fff",
            fontSize: "0.72rem",
            fontWeight: 700,
            padding: "4px 12px",
            borderRadius: 999,
            letterSpacing: "0.06em",
            textTransform: "uppercase",
          }}
        >
          {card.label}
        </span>
      </div>
      {/* 텍스트 */}
      <div style={{ padding: "22px 24px 26px" }}>
        <h2
          style={{
            margin: "0 0 10px",
            fontSize: "clamp(1.2rem,2.2vw,1.5rem)",
            fontWeight: 700,
            color: "#fff",
            letterSpacing: "-0.02em",
          }}
        >
          {card.label}
        </h2>
        <p
          style={{
            margin: "0 0 20px",
            fontSize: "0.9rem",
            color: "rgba(255,255,255,0.65)",
            lineHeight: 1.6,
          }}
        >
          {card.desc}
        </p>
        <span
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 6,
            background: card.accent,
            color: "#fff",
            fontSize: "0.88rem",
            fontWeight: 600,
            padding: "10px 22px",
            borderRadius: 999,
            letterSpacing: "0.01em",
          }}
        >
          보러 가기
          <svg
            width="14"
            height="14"
            viewBox="0 0 12 12"
            fill="none"
            aria-hidden="true"
          >
            <path
              d="M4 2l4 4-4 4"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </span>
      </div>
    </a>
  );
}

function TouristBridgePage() {
  const canvasRef = React.useRef(null);
  usePetals(canvasRef);

  return (
    <div style={{ background: "#0a0a0f", minHeight: "100vh" }}>
      {/* 불꽃 캔버스 — 최상단에 고정, 클릭 무시 */}
      <canvas
        ref={canvasRef}
        style={{
          position: "fixed",
          inset: 0,
          zIndex: 9999,
          pointerEvents: "none",
          width: "100%",
          height: "100%",
        }}
      />

      <Nav />

      <Breadcrumb
        items={[
          { label: "홈", href: "#/" },
          { label: "맛집-핫플", href: "#/맛집" },
          { label: "부산 가볼만한 곳" },
        ]}
      />

      {/* 히어로 */}
      <div style={{ textAlign: "center", padding: "80px 24px 56px" }}>
        <p
          style={{
            fontSize: "0.78rem",
            fontWeight: 700,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: "#f97316",
            marginBottom: 18,
          }}
        >
          부산 가볼만한 곳
        </p>
        <h1
          style={{
            fontSize: "clamp(2rem,5vw,3.2rem)",
            fontWeight: 800,
            color: "#fff",
            margin: "0 0 18px",
            lineHeight: 1.12,
            letterSpacing: "-0.03em",
          }}
        >
          어디를 둘러볼까요?
        </h1>
        <p
          style={{
            fontSize: "clamp(0.95rem,1.6vw,1.1rem)",
            color: "rgba(255,255,255,0.55)",
            maxWidth: 480,
            margin: "0 auto",
            lineHeight: 1.7,
          }}
        >
          구역 가까운 명소부터 부산 전역 랜드마크까지
        </p>
      </div>

      {/* 카드 2개 */}
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          gap: 28,
          maxWidth: 1060,
          margin: "0 auto",
          padding: "0 24px 100px",
          justifyContent: "center",
        }}
      >
        {BRIDGE_CARDS.map((c) => (
          <BridgeCard key={c.label} card={c} />
        ))}
      </div>

      <Footer />
    </div>
  );
}

/* ══════════════════════════════════════════
   Router
══════════════════════════════════════════ */
const { useState: useRouterState, useEffect: useRouterEffect } = React;

function getRoute() {
  const hash = window.location.hash.slice(1);
  try {
    return decodeURIComponent(hash) || "/";
  } catch (_) {
    return hash || "/";
  }
}

function Router({ homePage }) {
  const [route, setRoute] = useRouterState(getRoute);

  useRouterEffect(() => {
    const handler = () => {
      setRoute(getRoute());
      window.scrollTo(0, 0);
    };
    window.addEventListener("hashchange", handler);
    return () => window.removeEventListener("hashchange", handler);
  }, []);

  // Home
  if (route === "/" || route === "") return homePage;

  // 구역알기
  if (route === "/구역알기") return <DistrictOverviewPage />;
  if (route === "/구역알기/전포동-빌라") return <JeonpoDongPage />;
  if (route === "/구역알기/양정-스윗첸") return <YangjeongSuichenPage />;
  if (route === "/구역알기/부전동-2번출구") return <BujeonDongPage />;
  if (route === "/구역알기/기타") return <OtherDistrictPage />;

  // 양정봉사구역
  if (route === "/양정구역/전시대") return <TerritoryDisplayPage />;
  if (route === "/양정구역/호별") return <HobyulPage />;
  if (route === "/양정구역/사업") return <BusinessPage />;

  // 회중정보
  if (route === "/회중정보/어서오이소") return <WelcomePage />;
  if (route === "/회중정보/오시는길") return <DirectionsPage />;

  // 맛집
  if (route === "/맛집") return <RestaurantOverviewPage />;
  if (route === "/맛집/태진갈비") return <TaeJinGalbiPage />;
  if (route === "/맛집/사모님돈가스") return <SamoNimPage />;
  if (route === "/맛집/덮밥-본점") return <DeopbapPage />;
  if (route === "/맛집/우정") return <WoojungPage />;
  if (route === "/맛집/팔딱팔딱-횟집") return <FishRestaurantPage />;
  if (route === "/맛집/카페") return <CafePage />;
  if (route === "/맛집/구역내명소") return <LocalAttractionsPage />;
  if (route === "/맛집/부산관광") return <TouristBridgePage />;
  if (route === "/맛집/추천관광") return <TouristAttractionsPage />;

  // 안내
  if (route === "/안내") return <NoticePage />;
  if (route === "/안내/정보2") return <Info2Page />;

  // 관광
  if (route === "/관광") return <TourismOverviewPage />;
  if (route === "/관광/양정-꽃시장") return <FlowerMarketPage />;
  if (route === "/관광/광안대교") return <GwangAnBridgePage />;
  if (route === "/관광/기타") return <OtherTourismPage />;

  return <NotFoundPage />;
}

Object.assign(window, { Router });