// Page sections — Vision (4대), Achievements, Promises, News, Contact, Footer

const SECTION_SOCIAL_CHANNELS = {
  kakao: "https://invite.kakao.com/tc/PZLZYBT4h2",
  youtube: "https://youtu.be/4xmjXhsBJsM",
  facebook: "https://www.facebook.com/profile.php?id=100000023899363",
  instagram: "https://www.instagram.com/jeonnamgwangjuedu?igsh=MWFjYzJxbnJ1eWN6dg",
};

const SECTIONS_OFFICIAL_REVIEW = ((typeof window !== "undefined" && window.__KDJ_CONFIG__) || {}).officialReview === true;

// ── Quick Action Cards (under Hero) ────────────────────────────────────
function QuickActions() {
  const items = SECTIONS_OFFICIAL_REVIEW
    ? [
        { kr: "김대중입니다", en: "About", icon: <IconUser size={20} />, desc: "프로필" },
        { kr: "교육방향", en: "Vision", icon: <IconSpark size={20} />, desc: "전남교육 기본방향" },
        { kr: "공약사항", en: "Promises", icon: <IconCheck size={20} />, desc: "핵심 공약" },
        { kr: "소통하기", en: "Contact", icon: <IconChat size={20} />, desc: "정책 보기 · 응원" },
      ]
    : [
        { kr: "김대중입니다", en: "About", icon: <IconUser size={20} />, desc: "곡성에서 시작된 길" },
        { kr: "4대 비전", en: "Vision", icon: <IconSpark size={20} />, desc: "K-교육특별시" },
        { kr: "약속과 실천", en: "Promises", icon: <IconCheck size={20} />, desc: "이행률 시각화" },
        { kr: "소통하기", en: "Contact", icon: <IconChat size={20} />, desc: "정책 보기 · 응원" },
      ];
  return (
    <section className="qa-section">
      <div className="container qa-grid">
        {items.map((it, i) => (
          <a key={i} href={`#${it.en.toLowerCase()}`} className="qa-card">
            <div className="qa-num">0{i + 1}</div>
            <div className="qa-icon">{it.icon}</div>
            <div className="qa-kr">{it.kr}</div>
            <div className="qa-en">{it.en}</div>
            <div className="qa-desc">{it.desc}</div>
            <div className="qa-arrow"><IconArrow size={14} /></div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ── Section header (reused) ────────────────────────────────────────────
function SectionHeader({ eyebrow, title, sub, align = "left" }) {
  return (
    <div className={`sec-hd sec-hd-${align}`}>
      {eyebrow && (
        <div className="sec-eyebrow">
          <span className="sec-eyebrow-line" />
          <span>{eyebrow}</span>
        </div>
      )}
      <h2 className="sec-title">{title}</h2>
      {sub && <p className="sec-sub">{sub}</p>}
    </div>
  );
}

const DETAIL_MODAL_EVENT = "kdj:detail-modal-open";

function useDetailModalId(prefix) {
  const idRef = React.useRef(null);
  if (!idRef.current) {
    idRef.current = `${prefix}-${Math.random().toString(36).slice(2)}`;
  }
  return idRef.current;
}

function useExclusiveDetailModal(open, setOpen, modalId) {
  React.useEffect(() => {
    const closeOtherModal = (event) => {
      if (event.detail?.id !== modalId) setOpen(false);
    };
    window.addEventListener(DETAIL_MODAL_EVENT, closeOtherModal);
    return () => window.removeEventListener(DETAIL_MODAL_EVENT, closeOtherModal);
  }, [modalId, setOpen]);

  React.useEffect(() => {
    if (!open) return undefined;
    const onKeyDown = (event) => {
      if (event.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [open, setOpen]);
}

function openExclusiveDetailModal(modalId, setOpen) {
  window.dispatchEvent(new CustomEvent(DETAIL_MODAL_EVENT, { detail: { id: modalId } }));
  setOpen(true);
}

function usePageScrollLock(open) {
  React.useEffect(() => {
    if (!open) return undefined;
    const html = document.documentElement;
    const body = document.body;
    const scrollBarWidth = Math.max(0, window.innerWidth - html.clientWidth);
    const previous = {
      htmlOverflow: html.style.overflow,
      bodyOverflow: body.style.overflow,
      htmlOverscroll: html.style.overscrollBehavior,
      bodyOverscroll: body.style.overscrollBehavior,
      bodyPaddingRight: body.style.paddingRight,
    };

    html.style.overflow = "hidden";
    body.style.overflow = "hidden";
    html.style.overscrollBehavior = "none";
    body.style.overscrollBehavior = "none";
    if (scrollBarWidth > 0) {
      body.style.paddingRight = `${scrollBarWidth}px`;
    }

    return () => {
      html.style.overflow = previous.htmlOverflow;
      body.style.overflow = previous.bodyOverflow;
      html.style.overscrollBehavior = previous.htmlOverscroll;
      body.style.overscrollBehavior = previous.bodyOverscroll;
      body.style.paddingRight = previous.bodyPaddingRight;
    };
  }, [open]);
}

function preventBackdropScroll(event) {
  if (event.target !== event.currentTarget) return;
  event.preventDefault();
}

function renderDetailModalPortal(node) {
  if (typeof document !== "undefined" && window.ReactDOM?.createPortal) {
    return window.ReactDOM.createPortal(node, document.body);
  }
  return node;
}

function PendingDetailButton({ className, label, title, body }) {
  const [open, setOpen] = React.useState(false);
  const modalId = useDetailModalId("pending-detail");
  const titleId = `${modalId}-title`;
  const modalRef = React.useRef(null);

  useExclusiveDetailModal(open, setOpen, modalId);
  usePageScrollLock(open);

  React.useEffect(() => {
    if (!open) return undefined;
    const raf = window.requestAnimationFrame(() => {
      modalRef.current?.focus({ preventScroll: true });
    });
    return () => window.cancelAnimationFrame(raf);
  }, [open]);

  return (
    <>
      <button
        type="button"
        className={`${className} pending-detail-trigger`}
        onClick={() => openExclusiveDetailModal(modalId, setOpen)}
        aria-haspopup="dialog"
        aria-expanded={open}>
        <span>{label}</span>
        <IconArrow size={className === "prom-card-link" || className === "ach-more" ? 12 : 14} />
      </button>
      {open && renderDetailModalPortal(
        <div
          className="pending-detail-backdrop"
          role="presentation"
          onClick={() => setOpen(false)}
          onWheel={preventBackdropScroll}
          onTouchMove={preventBackdropScroll}>
          <div
            ref={modalRef}
            className="pending-detail-modal"
            tabIndex="-1"
            role="dialog"
            aria-modal="true"
            aria-labelledby={titleId}
            onClick={(event) => event.stopPropagation()}>
            <button
              type="button"
              className="pending-detail-close"
              onClick={() => setOpen(false)}
              aria-label="닫기">
              ×
            </button>
            <p className="pending-detail-kicker">준비중</p>
            <h3 id={titleId}>{title}</h3>
            <p>{body}</p>
            <button type="button" className="pending-detail-ok" onClick={() => setOpen(false)}>확인</button>
          </div>
        </div>
      )}
    </>
  );
}

function PolicyDetailButton({ className, label, policy }) {
  const [open, setOpen] = React.useState(false);
  const modalId = useDetailModalId(`policy-detail-${policy.n || "featured"}`);
  const titleId = `${modalId}-title`;
  const modalRef = React.useRef(null);
  const scrollRef = React.useRef(null);

  useExclusiveDetailModal(open, setOpen, modalId);
  usePageScrollLock(open);

  React.useEffect(() => {
    if (!open) return undefined;
    const raf = window.requestAnimationFrame(() => {
      scrollRef.current?.scrollTo({ top: 0, left: 0, behavior: "auto" });
      modalRef.current?.focus({ preventScroll: true });
    });
    return () => window.cancelAnimationFrame(raf);
  }, [open]);

  return (
    <>
      <button
        type="button"
        className={`${className} policy-detail-trigger`}
        onClick={() => openExclusiveDetailModal(modalId, setOpen)}
        aria-haspopup="dialog"
        aria-expanded={open}>
        <span>{label}</span>
        <IconArrow size={className === "prom-card-link" ? 12 : 14} />
      </button>
      {open && renderDetailModalPortal(
        <div
          className="policy-detail-backdrop"
          role="presentation"
          onClick={() => setOpen(false)}
          onWheel={preventBackdropScroll}
          onTouchMove={preventBackdropScroll}>
          <article
            ref={modalRef}
            className="policy-detail-modal"
            tabIndex="-1"
            role="dialog"
            aria-modal="true"
            aria-labelledby={titleId}
            onClick={(event) => event.stopPropagation()}>
            <button
              type="button"
              className="policy-detail-close"
              onClick={() => setOpen(false)}
              aria-label="닫기">
              ×
            </button>
            <div className="policy-detail-scroll" ref={scrollRef}>
              <div className="policy-detail-head">
                <span className="policy-detail-num">{policy.n || "PROMISE"}</span>
                <span className="policy-detail-badge">{policy.status || "공약"}</span>
              </div>
              <h3 id={titleId}>{policy.kr}</h3>
              <p className="policy-detail-summary">{policy.summary || policy.desc}</p>

              {policy.chips?.length ? (
                <div className="policy-detail-chips" aria-label="핵심 키워드">
                  {policy.chips.map((chip) => <span key={chip}>{chip}</span>)}
                </div>
              ) : null}

              <div className="policy-detail-points">
                {(policy.points || []).map((point) => (
                  <section className="policy-detail-point" key={point.title}>
                    <strong>{point.title}</strong>
                    <p>{point.body}</p>
                  </section>
                ))}
              </div>

              {policy.closing && (
                <div className="policy-detail-closing">
                  {policy.closing}
                </div>
              )}
            </div>
            <div className="policy-detail-actions">
              <button type="button" className="policy-detail-ok" onClick={() => setOpen(false)}>닫기</button>
            </div>
          </article>
        </div>
      )}
    </>
  );
}

// ── 4대 비전 ────────────────────────────────────────────────────────
function Vision() {
  const items = SECTIONS_OFFICIAL_REVIEW
    ? [
        {
          n: "01", kr: "상상·도전·창조의 미래교육", en: "FUTURE EDUCATION",
          tag: "전남교육 기본방향",
          why: "학생이 질문하고 도전하며 미래를 준비하는 학교.",
          kpi: { num: "미래", unit: "교육", label: "상상·도전·창조" },
          bullets: ["디지털 대전환에 맞춘 미래역량", "창의성과 도전 중심의 배움", "학생 삶과 연결되는 교육"],
          stats: [{ n: "상상", l: "질문" }, { n: "도전", l: "성장" }],
          ko: "未來",
        },
        {
          n: "02", kr: "참여·협력·연대의 교육공동체", en: "COMMUNITY",
          tag: "함께 만드는 전남교육",
          why: "학교와 마을, 지역이 함께 학생을 키웁니다.",
          kpi: { num: "함께", unit: "성장", label: "참여·협력·연대" },
          bullets: ["교육공동체 참여 확대", "지역과 상생하는 교육자치", "마을과 함께 사람을 키우는 교육"],
          stats: [{ n: "마을", l: "연계" }, { n: "지역", l: "상생" }],
          ko: "共同",
        },
        {
          n: "03", kr: "공정·안전·존중의 신뢰행정", en: "TRUST ADMIN",
          tag: "신뢰받는 교육행정",
          why: "공정한 인사와 투명한 행정으로 학교를 지원합니다.",
          kpi: { num: "신뢰", unit: "행정", label: "공정·안전·존중" },
          bullets: ["공정한 인사", "계약과 시설공사 투명성 강화", "학교업무 경감과 지원 확대"],
          stats: [{ n: "공정", l: "인사" }, { n: "투명", l: "행정" }],
          ko: "信賴",
        },
        {
          n: "04", kr: "질문·탄성·웃음의 공부하는 학교", en: "LEARNING SCHOOL",
          tag: "학생 중심의 배움",
          why: "교실에 질문과 탄성, 웃음이 살아나도록 합니다.",
          kpi: { num: "학생", unit: "중심", label: "질문·탄성·웃음" },
          bullets: ["성장단계별 평가와 학습이력관리", "AI튜터 기반 맞춤형 책임교육", "전남형 온라인 학습 지원"],
          stats: [{ n: "질문", l: "탐구" }, { n: "웃음", l: "교실" }],
          ko: "學校",
        },
      ]
    : [
        {
          n: "01", kr: "학생생애 책임교육 특별시", en: "LIFELONG RESPONSIBILITY",
          tag: "기초학력부터 취업·창업까지",
          why: "한 명도 놓치지 않는 책임교육.",
          kpi: { num: "100%", unit: "책임", label: "학생 1인당 성장이력" },
          bullets: ["전남광주교육과정개발평가원 (가칭)", "AI 기반 대입 분석·맞춤 상담", "학생부 연계 성장관리"],
          stats: [{ n: "1:1", l: "맞춤 상담" }, { n: "K-12", l: "전 학년" }],
          ko: "責任",
        },
        {
          n: "02", kr: "민주주의 교육 특별시", en: "DEMOCRACY",
          tag: "5·18 정신, 시민교육",
          why: "광주의 정신을 교실에서.",
          kpi: { num: "1980", unit: "→ 미래", label: "5·18 시민교육 계승" },
          bullets: ["민주시민교육 정규화", "학생자치 확대", "지역사회 연계 시민학습"],
          stats: [{ n: "5·18", l: "정신 계승" }, { n: "전학교", l: "시민교육" }],
          ko: "民主",
        },
        {
          n: "03", kr: "인재양성 교육 특별시", en: "TALENT",
          tag: "AI · 에너지 · K-컬처 인재",
          why: "지역에서 키워 세계로.",
          kpi: { num: "3대", unit: "밸리", label: "K-푸드·컬처·바이오" },
          bullets: ["AI·에너지 특화 영재학교", "K-푸드 / K-컬처 / K-바이오 밸리", "GIST · 한전 · 에너지공대 연계"],
          stats: [{ n: "AI", l: "영재학교" }, { n: "GIST+", l: "산학연계" }],
          ko: "人材",
        },
        {
          n: "04", kr: "평생문화교육 특별시", en: "LIFELONG CULTURE",
          tag: "평생학습, 지역문화",
          why: "교실 밖에서도 배움은 계속된다.",
          kpi: { num: "0→100세", unit: "트랙", label: "전 생애 학습" },
          bullets: ["지역 평생학습 플랫폼", "문화·예술 향유권 확대", "노년·장년 학습 트랙"],
          stats: [{ n: "전세대", l: "평생학습" }, { n: "지역", l: "문화향유" }],
          ko: "文化",
        },
      ];
  return (
    <section className="vision-section" id="vision">
      <div className="container">
        <SectionHeader
          eyebrow={SECTIONS_OFFICIAL_REVIEW ? "DIRECTION · 전남교육 기본방향" : "4 VISIONS"}
          title={SECTIONS_OFFICIAL_REVIEW
            ? <>함께 여는 미래, <br/><span className="title-em">탄탄한 전남교육</span></>
            : <>K-교육특별시, <br/><span className="title-em">네 가지 약속</span></>}
          sub={SECTIONS_OFFICIAL_REVIEW
            ? "상상·도전·창조의 미래교육, 참여와 협력의 교육공동체, 공정하고 안전한 교육행정을 향합니다."
            : "출마 선언에서 밝힌 김대중의 통합특별시 4대 비전 — 학생의 생애를 책임지고, 지역에서 인재를 키우는 새로운 100년 교육."}
        />

        <div className="vision-grid">
          {items.map((it) => (
            <article key={it.n} className="vision-card">
              <div className="vision-card-hd">
                <span className="vision-num">{it.n}</span>
                <span className="vision-stamp" aria-hidden="true">{it.ko}</span>
              </div>
              <div className="vision-en">{it.en}</div>
              <h3 className="vision-kr">{it.kr}</h3>
              <p className="vision-tag">{it.tag}</p>
              <p className="vision-why">{it.why}</p>
              <div className="vision-kpi">
                <div className="vision-kpi-num">
                  <span className="vision-kpi-n">{it.kpi.num}</span>
                  <em className="vision-kpi-u">{it.kpi.unit}</em>
                </div>
                <span className="vision-kpi-l">{it.kpi.label}</span>
              </div>
              <ul className="vision-bullets">
                {it.bullets.map((b, i) => (
                  <li key={i}><span className="bul-tick"><IconCheck size={12} /></span>{b}</li>
                ))}
              </ul>
              {it.stats && (
                <div className="vision-mini-stats">
                  {it.stats.map((s, i) => (
                    <div key={i} className="vision-mini-stat">
                      <span className="vision-mini-n">{s.n}</span>
                      <span className="vision-mini-l">{s.l}</span>
                    </div>
                  ))}
                </div>
              )}
              <PendingDetailButton
                className="vision-more"
                label="자세히 보기"
                title={`${it.kr} 상세 준비중`}
                body="이 항목의 자세한 설명은 문구와 자료를 확인한 뒤 공개하겠습니다." />
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 임기 성과 ───────────────────────────────────────────────────────
function Achievements() {
  const stats = SECTIONS_OFFICIAL_REVIEW
    ? [
        { kicker: "대전환 과제 01", title: "에듀테크 기반 맞춤형 학력 향상", num: "맞춤", unit: "학력", desc: "성장단계별 평가와 AI튜터 기반 맞춤형 책임교육" },
        { kicker: "대전환 과제 02", title: "지역과 상생하는 전남형 교육자치", num: "지역", unit: "상생", desc: "마을과 함께 사람을 키우는 전남형 교육자치" },
        { kicker: "대전환 과제 03", title: "공감과 배려의 학교문화 조성", num: "공감", unit: "배려", desc: "따뜻하고 안전한 교육환경과 존중의 학교문화" },
      ]
    : [
        { kicker: "전국 최초", title: "학생교육수당", num: "10만", unit: "원/월", desc: "모든 초등학생 대상 · 2025 전면 시행" },
        { kicker: "2024 개최", title: "글로컬 미래교육박람회", num: "200K+", unit: "관람", desc: "전국적 화제 · 미래교육의 표준 제시" },
        { kicker: "2026 확대", title: "2030교실 · 공존교실", num: "+110", unit: "교실", desc: "추가 조성 예정 · 전남 전역 확장" },
      ];
  return (
    <section className="ach-section" id="achievements">
      <div className="container">
        <SectionHeader
          eyebrow={SECTIONS_OFFICIAL_REVIEW ? "THREE TASKS · 전남교육 대전환" : "TRACK RECORD · 임기 성과"}
          title={SECTIONS_OFFICIAL_REVIEW
            ? <>전남교육 대전환, <br/><span className="title-em">세 가지 과제</span></>
            : <>"근자열 원자래" — <br/><span className="title-em">현장에서 만든 변화</span></>}
          sub={SECTIONS_OFFICIAL_REVIEW
            ? "맞춤형 학력, 전남형 교육자치, 공감과 배려의 학교문화로 교육의 변화를 준비합니다."
            : "제19대 전남교육감 재임 중, 가시적인 정책 성과로 검증된 실행력."}
        />

        <div className="ach-grid">
          {stats.map((s, i) => (
            <div key={i} className="ach-card">
              <div className="ach-kicker">{s.kicker}</div>
              <h3 className="ach-title">{s.title}</h3>
              <div className="ach-num"><span>{s.num}</span><em>{s.unit}</em></div>
              <p className="ach-desc">{s.desc}</p>
              <div className="ach-line" />
              <PendingDetailButton
                className="ach-more"
                label="자료실에서 보기"
                title={`${s.title} 자료 준비중`}
                body="관련 자료는 최종 확인 후 자료실에서 볼 수 있도록 준비하고 있습니다." />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 약속과 실천 (Promises) ─────────────────────────────────────────
function PromiseBadge({ status }) {
  const cfg = {
    "추진중": { bg: "rgba(16,185,129,0.12)", fg: "#047857", dot: "#10B981" },
    "완료":   { bg: "rgba(29,78,216,0.12)", fg: "#1D4ED8", dot: "#1D4ED8" },
    "지속추진": { bg: "rgba(245,158,11,0.14)", fg: "#B45309", dot: "#F59E0B" },
    "핵심공약": { bg: "rgba(14,165,233,0.12)", fg: "#1556A8", dot: "#0EA5E9" },
    "핵심축": { bg: "rgba(14,165,233,0.12)", fg: "#1556A8", dot: "#0EA5E9" },
    "연계공약": { bg: "rgba(245,158,11,0.14)", fg: "#B45309", dot: "#F59E0B" },
  }[status] || { bg: "rgba(14,165,233,0.12)", fg: "#1556A8", dot: "#0EA5E9" };
  return (
    <span className="prom-badge" style={{ background: cfg.bg, color: cfg.fg }}>
      <span className="prom-badge-dot" style={{ background: cfg.dot }} />
      {status}
    </span>
  );
}

function Promises() {
  const featured = SECTIONS_OFFICIAL_REVIEW
    ? {
        title: "학생생애 책임교육",
        sub: "기초학력부터 대입, 취업과 창업, 학생의 삶과 권리까지 이어지는 책임교육 체계",
        progress: 100,
        status: "핵심축",
      }
    : {
        title: "전국 최초 학생교육수당",
        sub: "월 10만원 / 모든 초등학생 / 2025년 전면 시행",
        progress: 82,
        status: "추진중",
      };
  const cards = SECTIONS_OFFICIAL_REVIEW
    ? [
        {
          n: "01",
          kr: "기초학력부터 대입까지",
          desc: "경계 없는 교육과정, AI 기반 맞춤학습, 미래형 평가와 진학 지원을 연결해 학생별 성장 경로를 촘촘히 살핍니다.",
          count: "학습·진학",
          status: "핵심축",
          pct: 100,
          summary: "기초학력, 교육과정, 수업·평가, 진학 지원을 하나의 흐름으로 묶어 학생별 성장 경로를 살피는 약속입니다.",
          chips: ["맞춤학습", "미래형 평가", "진학 지원"],
          points: [
            { title: "경계 없는 교육과정", body: "고교학점제, 공동교육과정, 온라인학교 기능을 활용해 학생의 과목 선택권과 배움의 폭을 넓힙니다." },
            { title: "데이터 기반 맞춤학습", body: "AI 기반 학업 분석과 성취도 진단으로 학생마다 필요한 보완 지점과 상담을 연결합니다." },
            { title: "대입·진학 지원 고도화", body: "문제은행, 학생부 성장관리, 1대1 맞춤 상담 등 진학 지원 체계를 더 촘촘히 준비합니다." },
          ],
          closing: "기초학력부터 대입까지 이어지는 전주기 책임교육입니다.",
        },
        {
          n: "02",
          kr: "취업과 창업까지",
          desc: "AI·에너지 교육밸리, K-교육밸리, 직업교육 개편과 학생창업 지원으로 배움이 지역 산업과 일자리로 이어지게 합니다.",
          count: "진로·직업·창업",
          status: "핵심축",
          pct: 100,
          summary: "학생의 가능성이 진로와 직업, 창업으로 이어지도록 지역 산업과 학교 교육을 연결하는 약속입니다.",
          chips: ["AI·에너지", "K-교육밸리", "학생창업"],
          points: [
            { title: "AI·에너지 교육밸리", body: "지역 산업 기반과 연결한 AI·에너지 특화 교육으로 미래 산업 인재의 출발점을 만듭니다." },
            { title: "전략산업 K-교육밸리", body: "K-푸드, K-컬처, 바이오·농생명, 우주항공 등 권역별 산업 특성을 교육과정과 연결합니다." },
            { title: "직업교육과 창업 지원", body: "현장실습, 인턴십, 특성화고-대학-기업 연계와 학생창업 지원으로 배움이 일자리까지 이어지게 합니다." },
          ],
          closing: "학생 한 명의 성장이 지역의 미래와 연결되도록 준비합니다.",
        },
        {
          n: "03",
          kr: "학생의 삶과 권리까지",
          desc: "학생교육수당 확대, 교육비 부담 경감, 아침 간편식·돌봄·통학·마음건강 지원까지 학생의 생활 조건을 함께 살핍니다.",
          count: "삶·권리",
          status: "핵심축",
          pct: 100,
          summary: "교육비, 돌봄, 통학, 건강처럼 학생의 배움에 직접 영향을 주는 생활 조건까지 함께 살피는 약속입니다.",
          chips: ["교육수당", "돌봄·통학", "마음건강"],
          points: [
            { title: "교육비 부담 경감", body: "학생교육수당 확대와 교복·체험학습·방과후 지원 등 가정의 교육비 부담을 줄이는 방향을 담았습니다." },
            { title: "돌봄과 통학 여건", body: "유아·초등 책임돌봄, 원거리 통학 최소화, 장애학생 통학 지원 개선 등 학교생활의 기본 조건을 살핍니다." },
            { title: "건강한 학교생활", body: "아침 간편식, 마음건강 원패스, 1인 1평생 스포츠 등 몸과 마음의 성장을 함께 지원합니다." },
          ],
          closing: "배움은 교실 안에서만 만들어지지 않는다는 관점의 책임교육입니다.",
        },
        {
          n: "04",
          kr: "AI·수학·과학 미래인재",
          desc: "수학·과학 기초를 다지고 AI·데이터 기반 탐구, 권역별 거점센터와 공유학교로 문제해결형 미래역량을 키웁니다.",
          count: "미래역량",
          status: "연계공약",
          pct: 100,
          summary: "AI와 데이터, 수학·과학 기반 탐구를 강화해 학생이 미래 문제를 스스로 풀어가는 힘을 키우는 약속입니다.",
          chips: ["AI 탐구", "수학·과학", "공유학교"],
          points: [
            { title: "기초 위의 미래역량", body: "수학·과학의 기본기를 바탕으로 AI와 데이터 기반 탐구 활동을 넓힙니다." },
            { title: "권역별 학습 거점", body: "거점센터와 공유학교를 통해 지역에 따라 배움의 기회가 달라지지 않도록 연결합니다." },
            { title: "문제해결형 수업", body: "학생이 질문하고 탐구하며 결과를 만들어보는 수업 경험을 확대하는 방향입니다." },
          ],
          closing: "미래교육은 기술보다 학생의 탐구력에서 시작합니다.",
        },
        {
          n: "05",
          kr: "특수교육과 자립",
          desc: "AI 특수교육원, 특수학교·학급 확충, 맞춤형 성장 지원과 진로·취업 연계로 장애학생의 자립까지 이어갑니다.",
          count: "맞춤성장·자립",
          status: "연계공약",
          pct: 100,
          summary: "장애학생의 배움, 성장, 진로, 자립을 한 흐름으로 연결해 개인별 지원을 강화하는 약속입니다.",
          chips: ["맞춤지원", "진로·취업", "자립"],
          points: [
            { title: "맞춤형 성장 지원", body: "학생의 장애 특성과 성장 단계에 맞춰 배움과 생활 지원을 세밀하게 설계합니다." },
            { title: "특수교육 기반 확충", body: "AI 특수교육원, 특수학교와 특수학급 확충 등 더 가까운 지원 체계를 준비합니다." },
            { title: "진로와 자립까지", body: "학교 안 지원에 머물지 않고 진로 탐색, 취업 연계, 지역사회 자립까지 이어지는 체계를 지향합니다." },
          ],
          closing: "한 명도 놓치지 않는 교육은 자립까지 이어질 때 완성됩니다.",
        },
      ]
    : [
        { n: "01", kr: "공부하는 학교", desc: "질문과 탐구가 살아나는 교실", count: "공약 7", status: "추진중", pct: 71 },
        { n: "02", kr: "모든 학생의 꿈", desc: "한 명도 놓치지 않는 책임교육", count: "공약 6", status: "추진중", pct: 67 },
        { n: "03", kr: "마을과 함께", desc: "학교와 지역이 함께 키우는 아이", count: "공약 6", status: "지속추진", pct: 50 },
        { n: "04", kr: "안전한 교육환경", desc: "0원 버스부터 무상 교복까지", count: "공약 6", status: "완료", pct: 100 },
        { n: "05", kr: "신뢰받는 행정", desc: "공정 · 안전 · 존중의 교육행정", count: "공약 5", status: "추진중", pct: 80 },
      ];
  const totals = SECTIONS_OFFICIAL_REVIEW
    ? { total: "5", done: "3", going: "2", avgPct: "책임" }
    : {
        total: cards.reduce((s, c) => s + parseInt(c.count.replace(/\D/g, ""), 10), 0),
        done: cards.filter((c) => c.status === "완료").length,
        going: cards.filter((c) => c.status !== "완료").length,
        avgPct: Math.round(cards.reduce((s, c) => s + c.pct, 0) / cards.length),
      };
  const featuredDetail = SECTIONS_OFFICIAL_REVIEW
    ? {
        n: "3+2",
        kr: "학생생애 책임교육",
        status: "대표 약속",
        summary: "기초학력부터 진학, 취업과 창업, 학생의 삶과 권리까지 책임교육의 범위를 넓히는 큰 정책 구조입니다.",
        chips: ["메인 3축", "연계 2축", "학생생애"],
        points: [
          { title: "메인 3축", body: "기초학력부터 대입까지, 취업과 창업까지, 학생의 삶과 권리까지를 중심 공약축으로 정리했습니다." },
          { title: "연계 2축", body: "AI·수학·과학 미래인재와 특수교육·자립 공약을 함께 배치해 미래역량과 포용교육을 보강합니다." },
          { title: "사이트 표시 원칙", body: "확정·완료처럼 오해될 수 있는 표현보다 준비, 확대, 연결, 지원처럼 정책 방향을 설명하는 표현을 우선합니다." },
        ],
        closing: "학생의 가능성이 학력으로, 진로로, 지역의 미래로 이어지도록 준비하는 약속입니다.",
      }
    : null;
  return (
    <section className="prom-section" id="promises">
      <div className="container">
        <div className="prom-hd-row">
          <SectionHeader
            eyebrow={SECTIONS_OFFICIAL_REVIEW ? "PROMISES · 공약사항" : "PROMISES · 약속과 실천"}
            title={SECTIONS_OFFICIAL_REVIEW
              ? <>학생생애 책임교육으로 보는 <br/><span className="title-em">다섯 가지 약속.</span></>
              : <>약속은 말이 아니라 <br/><span className="title-em">실천으로.</span></>}
            sub={SECTIONS_OFFICIAL_REVIEW
              ? "기초학력부터 대입, 취업과 창업, 학생의 삶과 권리까지. 한 명의 성장이 지역의 미래와 이어지도록 책임교육의 범위를 넓힙니다."
              : "전남교육에서 이미 만들어 온 변화, 통합특별시에서 이어갑니다."}
          />
          <div className="prom-legend">
            {SECTIONS_OFFICIAL_REVIEW ? (
              <>
                <PromiseBadge status="핵심축" />
                <PromiseBadge status="연계공약" />
              </>
            ) : (
              <>
                <PromiseBadge status="추진중" />
                <PromiseBadge status="완료" />
                <PromiseBadge status="지속추진" />
              </>
            )}
          </div>
        </div>

        {/* Featured big card */}
        <article className="prom-feat">
          <div className="prom-feat-side">
            <div className="prom-feat-eyebrow">{SECTIONS_OFFICIAL_REVIEW ? "대표 약속 · 2026" : "대표 공약 · 전국 최초"}</div>
            <h3 className="prom-feat-title">{featured.title}</h3>
            <p className="prom-feat-sub">{featured.sub}</p>
            <div className="prom-feat-bar">
              <div className="prom-feat-bar-track">
                <div className="prom-feat-bar-fill" style={{ width: `${featured.progress}%` }} />
              </div>
              <div className="prom-feat-bar-meta">
                <PromiseBadge status={featured.status} />
                <span className="prom-feat-bar-pct">{SECTIONS_OFFICIAL_REVIEW ? "약속" : <>{featured.progress}<em>%</em></>}</span>
              </div>
            </div>
            {SECTIONS_OFFICIAL_REVIEW ? (
              <PolicyDetailButton className="prom-feat-more" label="정책 자세히 보기" policy={featuredDetail} />
            ) : (
              <a href="#promises" className="prom-feat-more">정책 자세히 보기 <IconArrow size={14} /></a>
            )}
          </div>
          <div className="prom-feat-num">
            <div className="prom-feat-num-eyebrow">{SECTIONS_OFFICIAL_REVIEW ? "정책 구조" : "월 지급"}</div>
            <div className="prom-feat-num-big">{SECTIONS_OFFICIAL_REVIEW ? "3" : "10"}<span>{SECTIONS_OFFICIAL_REVIEW ? "+2" : "만원"}</span></div>
            <div className="prom-feat-num-foot">{SECTIONS_OFFICIAL_REVIEW ? "메인 3축 + 연계 2축" : "전남 초등학생 전원"}</div>
          </div>
        </article>

        <div className="prom-totals">
          <div className="prom-tot-item">
            <span className="prom-tot-num">{totals.total}</span>
            <span className="prom-tot-lbl">{SECTIONS_OFFICIAL_REVIEW ? "정리 축" : "총 공약 수"}</span>
          </div>
          <div className="prom-tot-item">
            <span className="prom-tot-num">{totals.avgPct}{SECTIONS_OFFICIAL_REVIEW ? null : <em>%</em>}</span>
            <span className="prom-tot-lbl">{SECTIONS_OFFICIAL_REVIEW ? "대표 키워드" : "평균 이행률"}</span>
          </div>
          <div className="prom-tot-item">
            <span className="prom-tot-num">{totals.done}</span>
            <span className="prom-tot-lbl">{SECTIONS_OFFICIAL_REVIEW ? "메인 공약축" : "완료 카테고리"}</span>
          </div>
          <div className="prom-tot-item">
            <span className="prom-tot-num">{totals.going}</span>
            <span className="prom-tot-lbl">{SECTIONS_OFFICIAL_REVIEW ? "연계 공약축" : "진행 카테고리"}</span>
          </div>
        </div>

        <div className="prom-grid">
          {cards.map((c) => (
            <article key={c.n} className="prom-card">
              <div className="prom-card-top">
                <span className="prom-card-num">{c.n}</span>
                <PromiseBadge status={c.status} />
              </div>
              <h4 className="prom-card-title">{c.kr}</h4>
              <p className="prom-card-desc">{c.desc}</p>
              <div className="prom-card-bar">
                <div className="prom-card-bar-track">
                  <div className="prom-card-bar-fill" style={{ width: `${c.pct}%` }} />
                </div>
                <span className="prom-card-bar-pct">{SECTIONS_OFFICIAL_REVIEW ? "약속" : <>{c.pct}<em>%</em></>}</span>
              </div>
              <div className="prom-card-foot">
                <span className="prom-card-count">{c.count}</span>
                {SECTIONS_OFFICIAL_REVIEW ? (
                  <PolicyDetailButton
                    className="prom-card-link"
                    label="자세히"
                    policy={c} />
                ) : (
                  <PendingDetailButton
                    className="prom-card-link"
                    label="자세히"
                    title={`${c.kr} 상세 준비중`}
                    body="세부 공약 설명은 추가 자료 확인 후 별도 페이지로 정리하겠습니다." />
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 청렴 원년 신뢰 섹션 (약점 정면 돌파) ────────────────────────────
function Integrity() {
  const items = SECTIONS_OFFICIAL_REVIEW
    ? [
        { n: "01", t: "공정한 인사", d: "신뢰받는 행정을 위한 공정한 인사 원칙" },
        { n: "02", t: "학교기본운영비 지원 확대", d: "학교가 교육활동에 집중하도록 지원을 강화" },
        { n: "03", t: "계약·시설공사 투명성 강화", d: "행정의 절차와 집행을 더 투명하게 관리" },
        { n: "04", t: "학교업무 경감", d: "교육활동 중심의 학교 운영을 뒷받침" },
      ]
    : [
        { n: "01", t: "공약 이행 현황 공개", d: "추진/완료/지속추진을 색상 배지로 분기별 업데이트" },
        { n: "02", t: "주요 예산 집행 시각화", d: "임기 중 핵심 사업 예산을 그래프로 투명 공개 (선거법 검토)" },
        { n: "03", t: "객관적 사실 명시", d: "외부 평가, 무혐의 처분 등 객관 근거를 자료실에 비치" },
        { n: "04", t: "이해충돌 사전 점검", d: "측근·납품 관련 사전 검증 시스템 도입 약속" },
      ];
  return (
    <section className="integ-section" id="integrity">
      <div className="container">
        <div className="integ-card">
          <div className="integ-side">
            <div className="integ-stamp">
              <div className="integ-stamp-en">CLEAN · 2026</div>
              <div className="integ-stamp-kr">청렴<br/>원년</div>
              <div className="integ-stamp-line" />
              <div className="integ-stamp-foot">JEONNAM-GWANGJU<br/>EDU 2026</div>
            </div>
          </div>
          <div className="integ-body">
            <SectionHeader
              eyebrow="INTEGRITY · 신뢰행정"
              title={SECTIONS_OFFICIAL_REVIEW
                ? <>공정하고 투명한 <span className="title-em">교육행정.</span></>
                : <>2026, <span className="title-em">청렴 원년.</span></>}
              sub={SECTIONS_OFFICIAL_REVIEW
                ? "공정한 인사와 투명한 행정으로 학교가 교육활동에 집중하도록 돕겠습니다."
                : "피하지 않습니다. 4가지 원칙으로 신뢰행정을 다시 세웁니다."}
            />
            <div className="integ-grid">
              {items.map((it) => (
                <div key={it.n} className="integ-item">
                  <span className="integ-item-num">{it.n}</span>
                  <div>
                    <div className="integ-item-t">{it.t}</div>
                    <div className="integ-item-d">{it.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── 현장에서 (News) ─────────────────────────────────────────────────
function NewsThumb({ item, index = 0, featured = false, showPhoto = true }) {
  const [failed, setFailed] = React.useState(false);
  const imageUrl = item.heroImageUrl && !failed ? item.heroImageUrl : "";
  const shellClass = featured ? "news-feat-thumb" : "news-thumb";

  return (
    <div className={`${shellClass} ${imageUrl ? "has-image" : "has-template"}`}>
      {imageUrl ? (
        <img
          className="news-thumb-img"
          src={imageUrl}
          alt=""
          loading={featured ? "eager" : "lazy"}
          referrerPolicy="no-referrer"
          onError={() => setFailed(true)}
        />
      ) : showPhoto ? (
        <PersonSilhouetteScene className="news-svg" />
      ) : (
        <div className={`news-typo ${featured ? "news-typo-feat" : ""}`}>
          <span className="news-typo-tag">{item.tag}</span>
          <span className="news-typo-no">{featured ? "FEATURED" : String(index + 1).padStart(2, "0")}</span>
        </div>
      )}
      <div className="news-thumb-template" aria-hidden="true">
        <span className="news-thumb-kicker">K-EDU FIELD</span>
        <span className="news-thumb-source">{item.sourceName}</span>
        <span className="news-thumb-line" />
      </div>
      <span className={`news-tag-pill ${featured ? "news-tag-pill-feat" : ""}`}>{item.tag}</span>
    </div>
  );
}

function News({ showPhoto }) {
  const [filter, setFilter] = React.useState("전체");
  const [items, setItems] = React.useState(() => (
    window.kdjNewsApi?.fallbackList?.(6) ||
    (window.KDJ_NEWS_SEED || []).map((n) => ({ ...n, tag: n.category, date: (n.occurredOn || "").replaceAll("-", ".") }))
  ));
  React.useEffect(() => {
    let alive = true;
    if (!window.kdjNewsApi?.listPosts) return;
    window.kdjNewsApi.listPosts({ limit: 6 }).then((list) => {
      if (alive && list.length) setItems(list);
    });
    return () => { alive = false; };
  }, []);
  const tags = ["전체", ...Array.from(new Set(items.map((i) => i.tag)))];
  const filtered = filter === "전체" ? items : items.filter((i) => i.tag === filter);
  const featured = filtered.find((i) => i.featured) || filtered[0];
  const rest = filtered.filter((i) => i.id !== featured?.id).slice(0, 5);
  const hrefFor = (item) => `/news?id=${encodeURIComponent(item.slug || item.id)}`;

  return (
    <section className="news-section" id="news">
      <div className="container">
        <div className="news-hd-row">
          <SectionHeader
            eyebrow="ON THE GROUND · 현장에서"
            title="현장이 정책의 출발점입니다."
          />
          <a href="/news" className="news-all">전체 보기 <IconArrow size={14} /></a>
        </div>

        <div className="news-filters">
          {tags.map((t) => (
            <button
              key={t}
              type="button"
              className={"news-chip" + (filter === t ? " is-active" : "")}
              onClick={() => setFilter(t)}>{t}</button>
          ))}
        </div>

        {featured && (
          <article className="news-feat">
            <NewsThumb item={featured} featured showPhoto={showPhoto} />
            <div className="news-feat-body">
              <div className="news-feat-meta">
                <span className="news-feat-date">{featured.date}</span>
                <span className="news-feat-dot" />
                <span className="news-feat-place">{featured.place}</span>
                <span className="news-feat-dot" />
                <span className="news-feat-views">출처 {featured.sourceName}</span>
              </div>
              <h3 className="news-feat-title">{featured.title}</h3>
              <p className="news-feat-excerpt">{featured.excerpt}</p>
              <a href={hrefFor(featured)} className="news-feat-link">게시글 보기 <IconArrow size={14} /></a>
            </div>
          </article>
        )}

        <div className="news-grid">
          {rest.map((n, i) => (
            <article key={i} className="news-card" data-tag={n.tag}>
              <NewsThumb item={n} index={i} showPhoto={showPhoto} />
              <div className="news-meta">
                <span>{n.date}</span>
                {n.place && <><span className="news-meta-dot" /><span>{n.place}</span></>}
              </div>
              <h4 className="news-title">{n.title}</h4>
              <div className="news-foot">
                <span className="news-views">{n.sourceName}</span>
                <a href={hrefFor(n)} className="news-link">읽어보기 <IconArrow size={12} /></a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Contact / Soft CTA ─────────────────────────────────────────────
function Contact() {
  return (
    <section className="contact-section" id="contact">
      <div className="container">
        <div className="contact-card">
          <div className="contact-mark" aria-hidden="true">
            <span>對</span><span>話</span>
          </div>
          <SectionHeader
            align="center"
            eyebrow="CONTACT · 소통하기"
            title={<>전남광주 교육에 대한 <br/><span className="title-em">생각을 들려주세요.</span></>}
            sub="정책을 살펴보고 응원 메시지를 직접 전달할 수 있습니다."
          />
          <div className="contact-ctas">
            <a className="cta cta-kakao cta-lg" href="https://invite.kakao.com/tc/PZLZYBT4h2" target="_blank" rel="noopener noreferrer" aria-label="카카오톡 오픈채팅 참여">
              <span className="cta-kakao-icon"><IconKakao size={18} /></span>
              <span>카카오톡방 참여하기</span>
              <IconArrow size={16} />
            </a>
            <a className="cta cta-primary cta-lg" href="#promises"><span>정책 보기</span><IconArrow size={16} /></a>
            <a className="cta cta-secondary cta-lg" href="/support#write"><span>응원 메시지 보내기</span><IconArrow size={16} /></a>
          </div>
          <div className="contact-channels">
            <a href={SECTION_SOCIAL_CHANNELS.kakao} target="_blank" rel="noopener noreferrer" aria-label="카카오톡 오픈채팅"><IconKakao /></a>
            <a href={SECTION_SOCIAL_CHANNELS.youtube} target="_blank" rel="noopener noreferrer" aria-label="유튜브 채널"><IconYoutube /></a>
            <a href={SECTION_SOCIAL_CHANNELS.facebook} target="_blank" rel="noopener noreferrer" aria-label="페이스북"><IconFacebook /></a>
            <a href={SECTION_SOCIAL_CHANNELS.instagram} target="_blank" rel="noopener noreferrer" aria-label="인스타그램"><IconInstagram /></a>
          </div>
          <div className="contact-foot">
            <div className="contact-foot-title">전남광주통합특별시 교육감 예비후보 김대중</div>
            <div className="contact-foot-office">함께 여는 미래, 탄탄한 전남교육</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ─────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-grid">
        <div className="footer-brand">
          <div className="footer-wm">
            <span className="footer-wm-kr">김대중</span>
            <span className="footer-wm-en">{SECTIONS_OFFICIAL_REVIEW ? "KIM DAEJUNG · EDU 2026" : "K-EDU SPECIAL CITY · 2026"}</span>
          </div>
          <p className="footer-disclaimer">
            {SECTIONS_OFFICIAL_REVIEW
              ? <>
                  <span>본 사이트는 김대중의 정책·활동 정보를 소개하는 사이트입니다.</span>
                  <span>함께 여는 미래, 탄탄한 전남교육을 준비하겠습니다.</span>
                </>
              : "본 사이트는 김대중 예비후보의 정책·활동 정보를 소개하는 사이트입니다."}
          </p>

          <div className="footer-camp">
            <div className="footer-camp-title">착착캠프</div>
            <div className="footer-camp-office">전남광주통합특별시 교육감 예비후보 김대중 선거사무소 / 후원회 사무실 주소 안내</div>
            <div className="footer-camp-row">
              <span className="footer-camp-lbl">선거사무소 :</span>
              <span className="footer-camp-address">
                김대중 컨벤션센터역 1번 출구 앞
                <span className="footer-camp-address-detail">(광주광역시 서구 상무대로708)</span>
              </span>
            </div>
            <div className="footer-camp-row">
              <span className="footer-camp-lbl">후원회 사무실 :</span>
              <span>전라남도 순천시 조례동 584, 2층</span>
            </div>
          </div>
        </div>

        <div className="footer-cols">
          <div>
            <div className="footer-col-t">탐색</div>
            <a href="#about">김대중입니다</a>
            <a href="#vision">4대 비전</a>
            <a href="#promises">약속과 실천</a>
            <a href="/news">현장소식</a>
          </div>
          <div>
            <div className="footer-col-t">참여</div>
            <a href="#promises">정책 보기</a>
            <a href="/support#write">응원 메시지</a>
            <a href="https://invite.kakao.com/tc/PZLZYBT4h2" target="_blank" rel="noopener noreferrer">자원봉사 신청</a>
            <a href="https://invite.kakao.com/tc/PZLZYBT4h2" target="_blank" rel="noopener noreferrer">후원하기</a>
          </div>
          <div>
            <div className="footer-col-t">자료</div>
            <a href="/share">공유 카드</a>
            <a href="/news">현장소식 게시판</a>
            <a href="/support">응원 메시지</a>
            <a href="/print">인쇄용 자료</a>
            <a href="/card">디지털 명함</a>
            <a href="/privacy">개인정보처리방침</a>
            <a href="/support-policy">응원 메시지 운영정책</a>
            <a href="/legal">법적 고지</a>
          </div>
          <div>
            <div className="footer-col-t">SNS</div>
            <div className="footer-sns">
              <a href={SECTION_SOCIAL_CHANNELS.kakao} target="_blank" rel="noopener noreferrer" aria-label="카카오톡 오픈채팅"><IconKakao /></a>
              <a href={SECTION_SOCIAL_CHANNELS.youtube} target="_blank" rel="noopener noreferrer" aria-label="유튜브 채널"><IconYoutube /></a>
              <a href={SECTION_SOCIAL_CHANNELS.facebook} target="_blank" rel="noopener noreferrer" aria-label="페이스북"><IconFacebook /></a>
              <a href={SECTION_SOCIAL_CHANNELS.instagram} target="_blank" rel="noopener noreferrer" aria-label="인스타그램"><IconInstagram /></a>
            </div>
          </div>
        </div>
      </div>

      <div className="container footer-notice-row">
        <div className="footer-notice">
          <span className="footer-notice-tag">선거법 안내</span>
          <span>본 사이트의 정책·발언 자료는 「공직선거법」 관련 규정에 따라 게재됩니다. 후원·자원봉사 안내는 별도 고지 기준에 따라 운영됩니다.</span>
        </div>
      </div>

      <div className="footer-strip">
        <div className="container footer-strip-row">
          <div>© 2026 전남광주통합특별시 교육감 예비후보 김대중</div>
          <div className="footer-strip-mark">{SECTIONS_OFFICIAL_REVIEW ? "KIM DAEJUNG · EDU 2026" : "JEONNAM × GWANGJU · K-EDU 2026"}</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  QuickActions, Vision, Achievements, Promises, Integrity, News, Contact, Footer,
});