// Hero — three variants controlled by tweak `heroVariant`
// A: 강한 임팩트 (Navy full bleed)
// B: 따뜻한 신뢰 (Light + sky beam)
// C: 슬로건 중심 (gradient, centered)

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

const HERO_CTA_LINKS = {
  "정책 보기": "#promises",
  "4대 비전 보기": "#vision",
  "김대중 알기": "#about",
  "약속과 실천": "#promises",
};

const HERO_PROGRESS_ITEMS = [
  { label: "학생교육수당", status: "시행", width: "88%" },
  { label: "글로컬 미래교육박람회", status: "완료", width: "100%" },
  { label: "2030교실", status: "현장운영", width: "76%" },
  { label: "2030수업나눔", status: "확산", width: "82%" },
  { label: "IB 월드스쿨", status: "운영", width: "72%" },
  { label: "글로컬 독서인문", status: "강화", width: "80%" },
  { label: "전남형 늘봄학교", status: "운영", width: "74%" },
  { label: "교육지원청 협력", status: "성과", width: "86%" },
];

function HeroBadge({ children, variant = "light" }) {
  const styles = {
    light: { background: "rgba(255,255,255,0.12)", color: "#fff", border: "1px solid rgba(255,255,255,0.25)" },
    dark: { background: "var(--c-navy)", color: "#fff", border: "1px solid var(--c-navy)" },
    soft: { background: "var(--c-sky)", color: "var(--c-navy)", border: "1px solid rgba(29,78,216,0.15)" },
    mint: { background: "rgba(16,185,129,0.15)", color: "var(--c-mint-700, #047857)", border: "1px solid rgba(16,185,129,0.3)" }
  }[variant];
  return (
    <span className="hero-badge" style={styles}>
      <span className="hero-badge-dot" style={{ background: variant === "mint" ? "#10B981" : "currentColor" }} />
      {children}
    </span>);

}

function HeroCTA({ primary, kakao, label, href, icon }) {
  const cls = kakao ? "cta cta-kakao" : `cta ${primary ? "cta-primary" : "cta-secondary"}`;
  const resolvedHref = href || (kakao ? KAKAO_OPENCHAT_URL : HERO_CTA_LINKS[label] || "#top");
  const isExternal = /^https?:\/\//.test(resolvedHref);
  return (
    <a
      className={cls}
      href={resolvedHref}
      target={isExternal ? "_blank" : undefined}
      rel={isExternal ? "noopener noreferrer" : undefined}
      aria-label={kakao ? "카카오톡 오픈채팅 참여" : undefined}
      style={{ width: "139px" }}>
      {kakao && <span className="cta-kakao-icon"><IconKakao size={18} /></span>}
      {primary && <span className="cta-leading-icon" aria-hidden="true"><IconBook size={16} /></span>}
      <span style={{ width: "64px", fontSize: "14px" }}>{label}</span>
      {icon !== false && <IconArrow size={16} />}
    </a>);

}

function HeroProgressRoll() {
  const rollingItems = [...HERO_PROGRESS_ITEMS, ...HERO_PROGRESS_ITEMS];

  return (
    <div className="hero-progress-strip" aria-label="주요 교육 성과">
      <div className="hero-progress-track">
        {rollingItems.map((item, index) =>
          <div className="prog-item" key={`${item.label}-${index}`} aria-hidden={index >= HERO_PROGRESS_ITEMS.length ? "true" : undefined}>
            <span className="prog-bar" style={{ "--w": item.width }} />
            <span className="prog-lbl">
              <strong>{item.label}</strong>
              <span>{item.status}</span>
            </span>
          </div>
        )}
      </div>
    </div>
  );
}

// Decorative K-modern type stamp — vertical Korean glyph block
function KStamp({ char = "敎", color = "rgba(255,255,255,0.08)" }) {
  return (
    <div className="k-stamp" aria-hidden="true">
      <span style={{ color }}>{char}</span>
    </div>);

}

function PortraitBlock({ showPhoto, variant = "A" }) {
  if (!showPhoto) {
    // Type-driven placeholder when photos OFF
    return (
      <div className="portrait-typeblock" aria-label="포트레이트 자리">
        <div className="portrait-typeblock-inner">
          <div className="ko-vertical">김<br />대<br />중</div>
          <div className="portrait-meta">
            <div className="portrait-meta-eyebrow">後補 · CANDIDATE</div>
            <div className="portrait-meta-title">제 9회 전국동시지방선거</div>
            <div className="portrait-meta-sub">전남광주통합특별시 초대 교육감</div>
          </div>
        </div>
      </div>);

  }
  return (
    <div className={`portrait-block portrait-${variant}`}>
      <img
        src="assets/portrait-kdj-clean.png"
        alt="김대중 전남광주통합특별시 교육감 예비후보"
        className="portrait-photo"
        loading="eager" />
      
      <div className="portrait-tag">
        <span className="portrait-tag-dot" />
        <span>김대중 · 교육감 예비후보</span>
      </div>
    </div>);

}

// ── Variant A: 강한 임팩트 (Navy full-bleed) ──────────────────────────────
function HeroVariantA({ catchphrase, showPhoto }) {
  return (
    <section className="hero hero-A">
      <div className="hero-bg-navy">
        {/* Light beam */}
        <div className="beam beam-A" />
        <KStamp char="敎" color="rgba(255,255,255,0.04)" />
      </div>

      <div className="container hero-grid">
        <div className="hero-copy">
          <HeroBadge variant="light">
            <IconShield size={12} /> 청렴 원년 · 2026
          </HeroBadge>

          <h1 className="hero-headline hero-headline-A">
            <span className="hl-line">{catchphrase.split(",")[0]}<span className="hl-comma">,</span></span>
            <span className="hl-line hl-accent">{catchphrase.split(",")[1] || "교육도 착착"}</span>
          </h1>

          <p className="hero-sub hero-sub-A">
            학생 생애 책임교육으로<br />
            <em>새로운 100년 교육</em>을 설계합니다.
          </p>

          <div className="hero-meta">
            <span>전남광주통합특별시 초대 교육감 예비후보</span>
            <span className="hero-meta-divider" />
            <strong>김 대 중</strong>
          </div>

          <div className="hero-ctas">
            <HeroCTA primary label="정책 보기" />
            <HeroCTA kakao label="카카오톡방" />
            <HeroCTA label="김대중 알기" />
          </div>

          <div className="hero-stat-row">
            <div className="hero-stat">
              <div className="hero-stat-num">2026<span>.6.3</span></div>
              <div className="hero-stat-lbl">선거일</div>
            </div>
            <div className="hero-stat">
              <div className="hero-stat-num">D<span>-35</span></div>
              <div className="hero-stat-lbl">착착캠프 개소 후</div>
            </div>
            <div className="hero-stat">
              <div className="hero-stat-num">40<span>년 만</span></div>
              <div className="hero-stat-lbl">전남광주 재통합</div>
            </div>
          </div>
        </div>

        <PortraitBlock showPhoto={showPhoto} variant="A" />
      </div>

      <div className="hero-marquee" aria-hidden="true">
        <div className="hero-marquee-track">
          {Array.from({ length: 4 }).map((_, i) =>
          <span key={i}>K-교육특별시 · 학생생애 책임교육 · 빛의 혁명 · 글로컬 미래교육 · 통합도 착착, 교육도 착착 · </span>
          )}
        </div>
      </div>
    </section>);

}

// ── Variant B: 따뜻한 신뢰 ────────────────────────────────────────────────
function HeroVariantB({ catchphrase, showPhoto }) {
  return (
    <section className="hero hero-B">
      <div className="hero-bg-light">
        <div className="beam beam-B" />
        <KStamp char="信" color="rgba(11,31,58,0.04)" />
      </div>

      <div className="container hero-grid">
        <div className="hero-copy">
          <HeroBadge variant="dark">K-교육특별시</HeroBadge>

          <h1 className="hero-headline hero-headline-B">
            현장에서 시작하는<br />
            <span className="underline-stroke">미래교육</span>,<br />
            아이들의 내일을<br />
            준비합니다.
          </h1>

          <p className="hero-sub hero-sub-B">
            "{catchphrase}" — 말이 아니라 실천으로,<br />
            전남교육에서 만들어 온 변화를 통합특별시에서 이어갑니다.
          </p>

          <div className="hero-ctas">
            <HeroCTA primary label="4대 비전 보기" />
            <HeroCTA kakao label="카카오톡방" />
            <HeroCTA label="약속과 실천" />
          </div>

          <div className="hero-quote">
            <div className="hero-quote-mark">"</div>
            <p>近者悅 遠者來<br /><span>가까이 있는 사람을 기쁘게 하면 멀리 있는 사람도 찾아옵니다.</span></p>
          </div>
        </div>

        <PortraitBlock showPhoto={showPhoto} variant="B" />
      </div>
    </section>);

}

// ── Variant C: 슬로건 중심형 (centered) ─────────────────────────────────
function HeroVariantC({ catchphrase, showPhoto }) {
  const stageRef = React.useRef(null);
  const [mx, setMx] = React.useState(0); // -1 .. 1
  const [my, setMy] = React.useState(0);
  const [headlineLive, setHeadlineLive] = React.useState(false);
  const [stageLive, setStageLive] = React.useState(false);

  // 포인터 추적 패럴랙스. 터치/펜/마우스 모두 같은 흐름으로 처리한다.
  // 포인터가 없거나 움직임이 적은 환경에서는 아래 ambient loop가 대신 살린다.
  React.useEffect(() => {
    const el = stageRef.current;
    if (!el) return;
    const onMove = (e) => {
      if (e.pointerType === "touch") return;
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      // viewport 중심에서의 상대 위치
      const dx = (e.clientX - cx) / (window.innerWidth / 2);
      const dy = (e.clientY - cy) / (window.innerHeight / 2);
      setMx(Math.max(-1, Math.min(1, dx)));
      setMy(Math.max(-1, Math.min(1, dy)));
    };
    const onLeave = () => {setMx(0);setMy(0);};
    window.addEventListener("pointermove", onMove);
    window.addEventListener("pointercancel", onLeave);
    window.addEventListener("blur", onLeave);
    return () => {
      window.removeEventListener("pointermove", onMove);
      window.removeEventListener("pointercancel", onLeave);
      window.removeEventListener("blur", onLeave);
    };
  }, []);

  // 모바일/무마우스 환경에서도 첫 화면이 정지해 보이지 않도록 약한 자동 반응.
  React.useEffect(() => {
    const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
    if (reduce) return;
    let stop = false;
    let t;
    const tick = () => {
      if (stop || document.hidden) {
        t = setTimeout(tick, 1600);
        return;
      }
      setHeadlineLive(true);
      setStageLive(true);
      setMx((Math.random() - 0.5) * 0.7);
      setMy((Math.random() - 0.5) * 0.5);
      window.setTimeout(() => {
        setHeadlineLive(false);
        setStageLive(false);
      }, 1050);
      t = window.setTimeout(tick, 5200 + Math.random() * 2200);
    };
    t = window.setTimeout(tick, 900);
    return () => { stop = true; window.clearTimeout(t); };
  }, []);

  // 탭/클릭 시 stage shake 트리거
  const [shake, setShake] = React.useState(0);
  const handleStageClick = () => setShake((n) => n + 1);
  React.useEffect(() => {
    if (!shake) return;
    const t = setTimeout(() => setShake(0), 600);
    return () => clearTimeout(t);
  }, [shake]);

  // headline 글자별 split — hover 시 각 글자가 차례로 살짝 들썩
  const renderSplit = (text) =>
  [...text].map((ch, i) =>
  <span
    key={i}
    className="hl-ch"
    style={{ "--i": i, animationDelay: `${i * 60}ms` }}>
    
        {ch === " " ? "\u00A0" : ch}
      </span>
  );

  return (
    <section className="hero hero-C">
      <div className="hero-bg-grad">
        <div className="beam beam-C" />
        <div className="dot-grid" />
      </div>

      <div className="container hero-grid hero-grid-C">
        <div className="hero-eyebrow-row hero-event-row" aria-label="주요 일정">
          <HeroBadge variant="light">출마선언 2026.4.15</HeroBadge>
          <HeroBadge variant="light">착착캠프 · 4.25 개소</HeroBadge>
        </div>

        <h1 className={`hero-headline hero-headline-C hl-interactive ${headlineLive ? "is-ambient" : ""}`}>
          <span className="hl-block">
            {renderSplit("통합도 ")}
            <em className="hl-em">착착</em>
            {renderSplit(",")}
          </span>
          <span className="hl-block">
            {renderSplit("교육도 ")}
            <em className="hl-em">착착</em>
            {renderSplit(".")}
          </span>
        </h1>

        <p className="hero-sub hero-sub-C">
          전남광주 K-교육특별시,<br className="mob-only" /> 김대중이 만들어 갑니다.
        </p>

        {showPhoto &&
        <div
          className={"hero-c-stage" + (shake ? " hero-c-stage-shake" : "") + (stageLive ? " is-ambient" : "")}
          data-no-burst="1"
          ref={stageRef}
          onPointerDown={handleStageClick}
          style={{
            "--mx": mx.toFixed(3),
            "--my": my.toFixed(3)
          }}>
          
            {/* Desktop / Tablet (≥641px) — 격자 stage */}
            <div className="hero-c-stage-frame hero-c-stage-desktop">
              <span className="hero-c-stage-ring hero-c-stage-ring-a" aria-hidden="true" />
              <span className="hero-c-stage-ring hero-c-stage-ring-b" aria-hidden="true" />
              <span className="hero-c-typeline hero-c-typeline-yellow" aria-hidden="true" style={{ width: "327px", opacity: "0.96", lineHeight: "1.35" }}>교육감은</span>
              <span className="hero-c-typeline hero-c-typeline-name" aria-hidden="true">김대중</span>
              <div className="hero-c-stage-photo-wrap" style={{ backgroundPosition: "center center", backgroundSize: "cover" }}>
                <img
                src="assets/portrait-kdj-clean.png"
                alt="김대중 전남광주통합특별시 교육감 예비후보"
                className="hero-c-stage-img"
                loading="eager" />
              </div>
              <span className="hero-c-stage-tag">
                <span className="hero-c-stage-tag-dot" /> 김 대 중 · 金大中
              </span>
            </div>

            {/* Mobile (≤640px) — 단순 세로 stack */}
            <div className="hero-c-stage-mobile" aria-hidden="true">
              <span className="hcm-yellow">교육감은</span>
              <div className="hcm-photo-wrap">
                <img
                src="assets/portrait-kdj-clean.png"
                alt="김대중"
                className="hcm-photo"
                loading="eager" />
                <span className="hcm-tag">
                  <span className="hcm-tag-dot" /> 김 대 중 · 金大中
                </span>
              </div>
              <span className="hcm-name">김대중</span>
            </div>
          </div>
        }

        <div className="hero-ctas hero-ctas-C">
          <HeroCTA primary label="정책 보기" icon={false} />
          <HeroCTA kakao label="카카오톡방" icon={false} />
        </div>

        <a
          className="hero-mobile-kakao-cta"
          href={KAKAO_OPENCHAT_URL}
          target="_blank"
          rel="noopener noreferrer"
          aria-label="카카오톡 오픈채팅방 입장하기">
          <span className="hero-mobile-kakao-icon"><IconKakao size={20} /></span>
          <span className="hero-mobile-kakao-copy">
            <strong>톡방 입장하기</strong>
            <small>순천사랑톡방</small>
          </span>
          <IconArrow size={17} />
        </a>

        <HeroProgressRoll />
      </div>
    </section>);

}

// ── Variant D: 명함형 카드 (원형 프로필 + CTA + 채널) ──────────────────
function HeroVariantD({ catchphrase, showPhoto }) {
  return (
    <section className="hero hero-D">
      <div className="hero-d-bg" aria-hidden="true">
        <div className="hero-d-bg-grad" />
        <KStamp char="敎" color="rgba(11,31,58,0.05)" />
      </div>

      <div className="container hero-d-wrap">
        <div className="hero-d-card">
          {showPhoto &&
          <div className="hero-d-avatar">
              <div className="hero-d-avatar-ring" />
              <img
              src="assets/portrait-kdj-clean.png"
              alt="김대중 예비후보"
              className="hero-d-avatar-img" />
            
              <span className="hero-d-avatar-badge" aria-hidden="true">
                <IconCheck size={14} />
              </span>
            </div>
          }

          <div className="hero-d-eyebrow">第 9 회 전국동시지방선거 · 2026.6.3</div>
          <h1 className="hero-d-name">김 대 중</h1>
          <div className="hero-d-role">전남광주통합특별시 초대 교육감 예비후보</div>
          <div className="hero-d-tag">"{catchphrase}"</div>

          <div className="hero-d-meta">
            <span className="hero-d-meta-row">
              <strong>선거사무소</strong>
              <span>김대중 컨벤션센터역 1번 출구 앞<br/>광주광역시 서구 상무대로708</span>
            </span>
            <span className="hero-d-meta-row">
              <strong>후원회 사무실</strong>
              <span>전라남도 순천시 조례동 584, 2층</span>
            </span>
          </div>

          <a className="hero-d-primary" href="https://invite.kakao.com/tc/PZLZYBT4h2" target="_blank" rel="noopener noreferrer">
            <span className="hero-d-primary-icon"><IconKakao size={18} /></span>
            <span>김대중과 함께하기</span>
          </a>

          <div className="hero-d-channels" aria-label="채널">
            <a href={HERO_SOCIAL_CHANNELS.youtube} target="_blank" rel="noopener noreferrer" aria-label="유튜브 채널"><IconYoutube /></a>
            <a href={HERO_SOCIAL_CHANNELS.facebook} target="_blank" rel="noopener noreferrer" aria-label="페이스북"><IconFacebook /></a>
            <a href={HERO_SOCIAL_CHANNELS.instagram} target="_blank" rel="noopener noreferrer" aria-label="인스타그램"><IconInstagram /></a>
          </div>

          <div className="hero-d-quick">
            <a href="/#about" className="hero-d-quick-card">
              <span className="hero-d-quick-tag">ABOUT</span>
              <span className="hero-d-quick-title">김대중은</span>
            </a>
            <a href="/#vision" className="hero-d-quick-card">
              <span className="hero-d-quick-tag">VISION</span>
              <span className="hero-d-quick-title">4대 비전</span>
            </a>
            <a href="/#promises" className="hero-d-quick-card">
              <span className="hero-d-quick-tag">PROMISES</span>
              <span className="hero-d-quick-title">약속과 실천</span>
            </a>
            <a href="/news" className="hero-d-quick-card">
              <span className="hero-d-quick-tag">NEWS</span>
              <span className="hero-d-quick-title">현장 소식</span>
            </a>
          </div>
        </div>
      </div>
    </section>);

}

function Hero({ variant, catchphrase, showPhoto }) {
  if (variant === "B") return <HeroVariantB catchphrase={catchphrase} showPhoto={showPhoto} />;
  if (variant === "C") return <HeroVariantC catchphrase={catchphrase} showPhoto={showPhoto} />;
  if (variant === "D") return <HeroVariantD catchphrase={catchphrase} showPhoto={showPhoto} />;
  return <HeroVariantA catchphrase={catchphrase} showPhoto={showPhoto} />;
}

Object.assign(window, { Hero });