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

// ── Quick Action Cards (under Hero) ────────────────────────────────────
function QuickActions() {
  const items = [
    { 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>
  );
}

// ── 4대 비전 ────────────────────────────────────────────────────────
function Vision() {
  const items = [
    {
      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="4 VISIONS"
          title={<>K-교육특별시, <br/><span className="title-em">네 가지 약속</span></>}
          sub="출마 선언에서 밝힌 김대중의 통합특별시 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>
              )}
              <a href="#vision" className="vision-more">자세히 보기 <IconArrow size={14} /></a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 임기 성과 ───────────────────────────────────────────────────────
function Achievements() {
  const stats = [
    { 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="TRACK RECORD · 임기 성과"
          title={<>"근자열 원자래" — <br/><span className="title-em">현장에서 만든 변화</span></>}
          sub="제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" />
              <a href="/print" className="ach-more">자료실에서 보기 <IconArrow size={12} /></a>
            </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" },
  }[status];
  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 = {
    title: "전국 최초 학생교육수당",
    sub: "월 10만원 / 모든 초등학생 / 2025년 전면 시행",
    progress: 82,
    status: "추진중",
  };
  const cards = [
    { 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 = {
    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),
  };
  return (
    <section className="prom-section" id="promises">
      <div className="container">
        <div className="prom-hd-row">
          <SectionHeader
            eyebrow="PROMISES · 약속과 실천"
            title={<>약속은 말이 아니라 <br/><span className="title-em">실천으로.</span></>}
            sub="전남교육에서 이미 만들어 온 변화, 통합특별시에서 이어갑니다."
          />
          <div className="prom-legend">
            <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">대표 공약 · 전국 최초</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">{featured.progress}<em>%</em></span>
              </div>
            </div>
            <a href="#promises" className="prom-feat-more">정책 자세히 보기 <IconArrow size={14} /></a>
          </div>
          <div className="prom-feat-num">
            <div className="prom-feat-num-eyebrow">월 지급</div>
            <div className="prom-feat-num-big">10<span>만원</span></div>
            <div className="prom-feat-num-foot">전남 초등학생 전원</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">총 공약 수</span>
          </div>
          <div className="prom-tot-item">
            <span className="prom-tot-num">{totals.avgPct}<em>%</em></span>
            <span className="prom-tot-lbl">평균 이행률</span>
          </div>
          <div className="prom-tot-item">
            <span className="prom-tot-num">{totals.done}</span>
            <span className="prom-tot-lbl">완료 카테고리</span>
          </div>
          <div className="prom-tot-item">
            <span className="prom-tot-num">{totals.going}</span>
            <span className="prom-tot-lbl">진행 카테고리</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">{c.pct}<em>%</em></span>
              </div>
              <div className="prom-card-foot">
                <span className="prom-card-count">{c.count}</span>
                <a href="#promises" className="prom-card-link">자세히 <IconArrow size={12} /></a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 청렴 원년 신뢰 섹션 (약점 정면 돌파) ────────────────────────────
function Integrity() {
  const items = [
    { 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={<>2026, <span className="title-em">청렴 원년.</span></>}
              sub="피하지 않습니다. 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="https://invite.kakao.com/tc/PZLZYBT4h2" target="_blank" rel="noopener noreferrer"><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">
            <span className="contact-channels-lbl">채널</span>
            <a href="https://invite.kakao.com/tc/PZLZYBT4h2" target="_blank" rel="noopener noreferrer" aria-label="카카오톡 오픈채팅"><IconKakao /></a>
          </div>
          <div className="contact-foot">
            <div><strong>착착캠프</strong> · 전남광주통합특별시 교육감 예비후보 김대중 선거사무소</div>
            <div className="contact-foot-sub">{/* TODO: 운영 주체 / 주소 / 연락처 — 법무 검토 후 확정 */} 운영 정보 — 법무 검토 후 확정</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">K-EDU SPECIAL CITY · 2026</span>
          </div>
          <p className="footer-disclaimer">
            본 사이트는 김대중 예비후보의 정책·활동 정보를 소개하는 사이트입니다. 공식 행정 정보는 전라남도교육청 공식 누리집을 이용해 주세요.
          </p>

          <div className="footer-camp">
            <div className="footer-camp-title">착착캠프</div>
            <div className="footer-camp-row">
              <span className="footer-camp-lbl">주소</span>
              <span>전남광주 통합특별시 (선거사무소 — 추후 공지)</span>
            </div>
            <div className="footer-camp-row">
              <span className="footer-camp-lbl">전화</span>
              <span>061-000-0000</span>
            </div>
            <div className="footer-camp-row">
              <span className="footer-camp-lbl">이메일</span>
              <a href="mailto:contact@kdjedu.kr">contact@kdjedu.kr</a>
            </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="https://invite.kakao.com/tc/PZLZYBT4h2" target="_blank" rel="noopener noreferrer">정책 제안</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="https://invite.kakao.com/tc/PZLZYBT4h2" target="_blank" rel="noopener noreferrer" aria-label="카카오톡 오픈채팅"><IconKakao /></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">JEONNAM × GWANGJU · K-EDU 2026</div>
        </div>
      </div>
    </footer>
  );
}

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