// ===================== SECTIONS A (Hero → Why Me) =====================

// ---------- 1. HERO ----------
function HeroSection() {
  return (
    <section id="top" style={{
      position: "relative",
      minHeight: "100vh",
      paddingTop: 120,
      paddingBottom: 80,
      overflow: "hidden",
    }} data-screen-label="01 Hero">
      {/* Background grid + glows */}
      <div className="bg-grid bg-noise" style={{
        position: "absolute", inset: 0, opacity: 0.5,
        maskImage: "radial-gradient(ellipse at 50% 30%, black, transparent 70%)",
        WebkitMaskImage: "radial-gradient(ellipse at 50% 30%, black, transparent 70%)",
      }} />
      <div className="glow" style={{
        width: 600, height: 600, top: -180, left: -120, background: "radial-gradient(circle, #3B82F6, transparent 70%)",
      }} />
      <div className="glow" style={{
        width: 700, height: 700, top: 120, right: -200, background: "radial-gradient(circle, #8B5CF6, transparent 70%)",
      }} />

      <div className="container" style={{ position: "relative" }}>
        <Reveal>
          <Eyebrow>AI · IT Career Mentor · 1:1 Mentoring</Eyebrow>
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr",
          gap: 64,
          alignItems: "center",
          marginTop: 32,
        }} className="hero-grid">
          <div>
            <Reveal delay={50}>
              <h1 className="h-display" style={{ marginTop: 16 }}>
                AI · IT 커리어,<br />
                <span className="grad-text">혼자 헤매지 마세요.</span>
              </h1>
            </Reveal>
            <Reveal delay={200}>
              <p style={{
                marginTop: 28,
                fontSize: "clamp(16px, 1.5vw, 19px)",
                color: "var(--text-1)",
                lineHeight: 1.7,
                maxWidth: 640,
              }}>
                Microsoft · VMware를 거쳐 현재 <span style={{ color: "var(--text-0)", fontWeight: 600 }}>Unity Technologies Staff Engineer</span>, 전 AI 스타트업 CTO.<br />
                <span style={{ color: "var(--text-2)" }}>외국계 6년 · 스타트업 2년 · 대학원 2년, 총 10년의 경험으로</span><br />
                비전공자부터 전공자까지, <span className="grad-text-gold" style={{ fontWeight: 600 }}>개발직부터 외국계 세일즈 오피스까지</span><br />
                가장 빠른 취업 경로를 직접 설계해 드립니다.
              </p>
            </Reveal>

            <Reveal delay={350}>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 40 }}>
                <CTAButton>1대1 멘토링 신청하기</CTAButton>
                <a href="#about" className="btn-ghost">
                  멘토 소개 보기
                </a>
              </div>
            </Reveal>

            <Reveal delay={500}>
              <div style={{
                display: "flex", gap: 28, marginTop: 40, flexWrap: "wrap",
                color: "var(--text-2)", fontSize: 13,
              }}>
                <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span className="badge badge-live">현직 Unity Staff Engineer</span>
                </span>
                <span>소수 정원 운영 · 선착순 마감</span>
              </div>
            </Reveal>
          </div>

          {/* Profile column */}
          <Reveal delay={250} className="hero-right">
            <div style={{ position: "relative", display: "flex", flexDirection: "column", alignItems: "center" }}>
              <div className="avatar-glow" style={{
                width: "min(340px, 100%)",
                aspectRatio: "1",
                borderRadius: 24,
                overflow: "hidden",
                border: "1px solid var(--line-strong)",
                boxShadow: "0 60px 80px -40px rgba(59,130,246,0.6)",
              }}>
                <Img src="assets/profile.jpeg" alt="문기준" />
              </div>

              {/* Floating stat chips */}
              <div style={{
                position: "absolute", left: "-16px", top: "20%",
                background: "rgba(19, 28, 46, 0.85)", backdropFilter: "blur(10px)",
                border: "1px solid var(--line-strong)",
                padding: "12px 16px", borderRadius: 14,
                display: "flex", flexDirection: "column", gap: 2,
              }}>
                <span style={{ fontSize: 11, color: "var(--text-2)", letterSpacing: "0.06em", textTransform: "uppercase" }}>Current</span>
                <span style={{ fontSize: 14, fontWeight: 600 }}>Unity · Staff Engineer</span>
              </div>
              <div style={{
                position: "absolute", right: "-12px", bottom: "18%",
                background: "rgba(19, 28, 46, 0.85)", backdropFilter: "blur(10px)",
                border: "1px solid rgba(245, 158, 11, 0.35)",
                padding: "12px 16px", borderRadius: 14,
                display: "flex", flexDirection: "column", gap: 2,
              }}>
                <span style={{ fontSize: 11, color: "#FCD34D", letterSpacing: "0.06em", textTransform: "uppercase" }}>APAC Lead</span>
                <span style={{ fontSize: 14, fontWeight: 600 }}>1,200+ 고객 담당</span>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Bottom mini-stats row */}
        <Reveal delay={650}>
          <div style={{
            marginTop: 80,
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 0,
            border: "1px solid var(--line)",
            borderRadius: 20,
            background: "rgba(15, 22, 38, 0.5)",
            backdropFilter: "blur(8px)",
            overflow: "hidden",
          }} className="hero-stats">
            {[
              { num: "10", suf: "년", lbl: "IT 업계 경력" },
              { num: "6", suf: "년+", lbl: "외국계 빅테크" },
              { num: "1,200", suf: "+", lbl: "APAC 담당 고객" },
              { num: "500", suf: "+", lbl: "직접 지도 멘티" },
            ].map((s, i) => (
              <div key={i} style={{
                padding: "26px 28px",
                borderRight: i < 3 ? "1px solid var(--line)" : "none",
              }}>
                <div className="num" style={{ fontSize: "clamp(28px, 3vw, 36px)", fontWeight: 700, letterSpacing: "-0.03em" }}>
                  {s.num}<span style={{ color: "var(--text-2)", fontSize: "0.7em" }}>{s.suf}</span>
                </div>
                <div style={{ fontSize: 13, color: "var(--text-2)", marginTop: 4 }}>{s.lbl}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .hero-right { order: -1; }
          .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
          .hero-stats > div:nth-child(1), .hero-stats > div:nth-child(2) {
            border-bottom: 1px solid var(--line);
          }
          .hero-stats > div:nth-child(2) { border-right: none !important; }
        }
      `}</style>
    </section>
  );
}

// ---------- 2. TRUST BAR ----------
function TrustSection() {
  const logos = window.SITE.TRUST_LOGOS;
  const photos = window.SITE.LECTURE_PHOTOS || [];
  const allLogos = [...logos, ...logos, ...logos];
  const allPhotos = [...photos, ...photos];
  return (
    <section style={{
      borderTop: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
      padding: "56px 0 64px",
      background: "var(--bg-2)",
      overflow: "hidden",
    }} data-screen-label="02 Trust">
      <div className="container">
        <Reveal>
          <div style={{ textAlign: "center", marginBottom: 32 }}>
            <Eyebrow>Trusted by</Eyebrow>
            <h3 style={{ fontSize: 20, fontWeight: 600, marginTop: 12, color: "var(--text-1)" }}>
              국내 최고 교육기관들이 선택한 강사
            </h3>
          </div>
        </Reveal>
      </div>

      {/* Logo marquee */}
      <div style={{ position: "relative" }}>
        <div className="marquee" style={{ gap: 24 }}>
          {allLogos.map((l, i) => (
            <LogoCell key={i} src={l.src} alt={l.alt} h={l.h} minW={l.minW} dark={l.dark} offsetY={l.offsetY} />
          ))}
        </div>
        <div style={{
          position: "absolute", left: 0, top: 0, bottom: 0, width: 120,
          background: "linear-gradient(to right, var(--bg-2), transparent)",
          pointerEvents: "none", zIndex: 2,
        }} />
        <div style={{
          position: "absolute", right: 0, top: 0, bottom: 0, width: 120,
          background: "linear-gradient(to left, var(--bg-2), transparent)",
          pointerEvents: "none", zIndex: 2,
        }} />
      </div>

      {/* Lecture photo marquee — reverse direction */}
      <div style={{
        position: "relative",
        marginTop: 28,
      }}>
        <div className="marquee marquee-reverse" style={{ gap: 16 }}>
          {allPhotos.map((p, i) => (
            <div key={i} style={{
              width: 220,
              height: 140,
              borderRadius: 12,
              overflow: "hidden",
              border: "1px solid var(--line)",
              background: "var(--bg-2)",
              flexShrink: 0,
              position: "relative",
            }}>
              <img src={p.src} alt="강의 현장" loading="lazy" style={{
                width: "100%", height: "100%",
                objectFit: "cover",
                objectPosition: p.objectPosition || "center",
                display: "block",
              }} />
            </div>
          ))}
        </div>
        <div style={{
          position: "absolute", left: 0, top: 0, bottom: 0, width: 120,
          background: "linear-gradient(to right, var(--bg-2), transparent)",
          pointerEvents: "none", zIndex: 2,
        }} />
        <div style={{
          position: "absolute", right: 0, top: 0, bottom: 0, width: 120,
          background: "linear-gradient(to left, var(--bg-2), transparent)",
          pointerEvents: "none", zIndex: 2,
        }} />
      </div>

      <div className="container">
        <Reveal>
          <p style={{
            textAlign: "center",
            marginTop: 36,
            color: "var(--text-2)",
            fontSize: 14,
          }}>
            <span className="num" style={{ color: "var(--text-0)", fontWeight: 600 }}>6</span>개 교육기관 ·
            <span className="num" style={{ color: "var(--text-0)", fontWeight: 600 }}> 2</span>년 연속 재계약 ·
            수백 명의 수강생 지도
          </p>
        </Reveal>
      </div>

      <style>{`
        .marquee-reverse {
          animation-direction: reverse !important;
          animation-duration: 60s !important;
        }
      `}</style>
    </section>
  );
}

// ---------- 3. PAIN POINTS ----------
function PainSection() {
  return (
    <Section id="pain" screenLabel="03 Pain Points">
      <Reveal>
        <Eyebrow>Pain Points</Eyebrow>
        <h2 className="h-section" style={{ marginTop: 16, maxWidth: 880 }}>
          혹시 지금 <span className="grad-text">이런 고민</span>을<br />
          하고 계신가요?
        </h2>
      </Reveal>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(2, 1fr)",
        gap: 16,
        marginTop: 64,
      }} className="pain-grid">
        {window.SITE.PAIN_POINTS.map((p, i) => (
          <Reveal key={i} delay={i * 40}>
            <div className="card" style={{
              padding: "26px 28px",
              borderColor: p.tag ? "rgba(245, 158, 11, 0.25)" : "var(--line)",
              position: "relative",
              height: "100%",
            }}>
              <div style={{ display: "flex", alignItems: "flex-start", gap: 18 }}>
                <div style={{
                  minWidth: 36,
                  display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 8,
                }}>
                  <span className="num" style={{
                    fontSize: 28, color: p.tag ? "var(--gold)" : "var(--text-3)",
                    fontWeight: 700, lineHeight: 1,
                  }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  {p.tag && (
                    <span style={{
                      fontSize: 10,
                      fontWeight: 600,
                      letterSpacing: "0.08em",
                      color: "var(--gold)",
                      opacity: 0.85,
                    }}>
                      {p.tag}
                    </span>
                  )}
                </div>
                <p style={{
                  margin: 0,
                  fontSize: 17,
                  color: "var(--text-1)",
                  fontStyle: "italic",
                  lineHeight: 1.55,
                }}>
                  "{p.text}"
                </p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal delay={300}>
        <div style={{
          marginTop: 80,
          textAlign: "center",
          padding: "40px 24px",
        }}>
          <p style={{
            fontSize: "clamp(22px, 2.6vw, 30px)",
            fontWeight: 600,
            margin: 0,
            lineHeight: 1.4,
          }}>
            이 고민들, 저도 <span className="grad-text">전부 겪었습니다.</span><br />
            <span style={{ color: "var(--text-2)", fontWeight: 500 }}>그리고 지금은 이 고민을 해결해주는 것이 제 일입니다.</span>
          </p>
        </div>
      </Reveal>

      <style>{`
        @media (max-width: 760px) {
          .pain-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </Section>
  );
}

// ---------- 4. ABOUT ----------
function AboutSection() {
  return (
    <Section id="about" screenLabel="04 About">
      <Reveal>
        <Eyebrow>About the Mentor</Eyebrow>
        <h2 className="h-section" style={{ marginTop: 16 }}>
          멘토 <span className="grad-text">문기준</span>을 소개합니다
        </h2>
      </Reveal>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 0.85fr",
        gap: 80,
        marginTop: 72,
        alignItems: "start",
      }} className="about-grid">
        <div>
          <Reveal>
            <p style={{ fontSize: 18, color: "var(--text-1)", lineHeight: 1.85 }}>
              안녕하세요, <strong style={{ color: "var(--text-0)" }}>문기준</strong>입니다.
            </p>
            <p style={{ fontSize: 16, color: "var(--text-1)", lineHeight: 1.85, marginTop: 20 }}>
              고려대학교 컴퓨터학과를 졸업하고, 미국 <strong style={{ color: "var(--text-0)" }}>Georgia Institute of Technology</strong>에서 AI 석사를 마쳤습니다. Microsoft에서 커리어를 시작해 VMware를 거쳐, 현재 <strong style={{ color: "var(--text-0)" }}>Unity Technologies에서 Staff Engineer</strong>로 근무하고 있습니다. 외국계 빅테크에서만 6년, 그 사이 AI 헬스케어 스타트업 글루코메트릭스의 CTO를 2년간 병행하며 삼성서울병원과 협업하여 AI 기반 디지털 치료제를 직접 개발했습니다.
            </p>
          </Reveal>

          <Reveal delay={150}>
            {/* Highlight box */}
            <div style={{
              marginTop: 36,
              padding: "28px 32px",
              borderRadius: 18,
              background: "linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(249, 115, 22, 0.04))",
              border: "1px solid rgba(245, 158, 11, 0.25)",
              position: "relative",
            }}>
              <span className="badge badge-gold" style={{ marginBottom: 14 }}>핵심 포인트</span>
              <p style={{ fontSize: 19, fontWeight: 600, lineHeight: 1.55, margin: "10px 0 0 0" }}>
                저는 <span className="grad-text-gold">'개발자'로 빅테크에 입사한 것이 아닙니다.</span>
              </p>
              <p style={{ fontSize: 15, color: "var(--text-1)", lineHeight: 1.7, marginTop: 12, marginBottom: 0 }}>
                <strong>솔루션 엔지니어(SE)</strong>라는 직무로 시작하여, 아시아 태평양 전 지역을 담당하는 기술 리드까지 올라갔습니다. 외국계 IT 기업에는 개발자 이외에도 <strong>SE, SA, CSM, AE, 기술 마케팅, 파트너 매니저</strong> 등 코딩 실력이 아닌 비즈니스 감각과 커뮤니케이션으로 승부하는 고연봉 직무가 수십 가지 존재합니다.
              </p>
            </div>
          </Reveal>

          <Reveal delay={250}>
            <p style={{ fontSize: 16, color: "var(--text-1)", lineHeight: 1.85, marginTop: 32 }}>
              화려한 경력을 자랑하려는 게 아닙니다. "대기업, 외국계, 스타트업, 연구실, 창업" 이 모든 환경을 직접 경험했기에, 여러분이 어떤 길을 선택하든 가장 현실적인 조언을 드릴 수 있다는 것입니다. 그리고 저는 이론이 아니라 <strong style={{ color: "var(--text-0)" }}>지금도 현직에서 일하고 있는 사람</strong>입니다.
            </p>
            <p style={{ fontSize: 16, color: "var(--text-1)", lineHeight: 1.85, marginTop: 20 }}>
              2021년부터 인텔, 고려대, 한국경제×토스뱅크, 동국대 등에서 수백 명의 취업 준비생을 만났습니다. 그 과정에서 깨달은 것 — 대부분이 <strong>"실력이 부족해서"가 아니라 "방향을 몰라서"</strong> 시간을 낭비하고 있다는 것. 특히 외국계 <strong>세일즈 오피스 직무</strong>는 정보 자체가 없어서 존재조차 모르는 분이 대부분이었습니다.
            </p>
            <p style={{ fontSize: 18, fontWeight: 600, marginTop: 28 }}>그래서 이 멘토링을 시작했습니다.</p>
          </Reveal>
        </div>

        {/* Right column: portrait + LinkedIn + GT campus */}
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <Reveal delay={100}>
            <div className="img-frame" style={{ height: 440 }}>
              <Img src="assets/profile-full.png" alt="문기준 전신 프로필" />
            </div>
          </Reveal>

          {/* LinkedIn screenshot tilted */}
          <Reveal delay={200}>
            <div style={{
              position: "relative",
              padding: "16px 18px 14px",
              background: "rgba(255, 255, 255, 0.97)",
              borderRadius: 14,
              boxShadow: "0 30px 60px -30px rgba(0,0,0,0.6)",
              border: "1px solid rgba(0,0,0,0.1)",
            }}>
              <div style={{
                display: "flex", alignItems: "center", gap: 8, marginBottom: 10,
                fontSize: 12, fontWeight: 600, color: "#0A66C2",
              }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="#0A66C2">
                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                </svg>
                <span>LinkedIn — Experience</span>
              </div>
              <div style={{
                height: 220, overflow: "hidden", borderRadius: 8,
                border: "1px solid rgba(0,0,0,0.08)",
              }}>
                <img src="assets/linkedin.png" alt="LinkedIn 프로필"
                  style={{ width: "100%", display: "block" }} />
              </div>
              <div style={{
                marginTop: 10, fontSize: 11, color: "#666", display: "flex", justifyContent: "space-between",
              }}>
                <span>Unity · Full-time · 3 yrs 10 mos</span>
                <span style={{ color: "#057642", fontWeight: 600 }}>● Current</span>
              </div>
            </div>
          </Reveal>

          <Reveal delay={300}>
            <div className="img-frame" style={{
              height: 220, position: "relative",
            }}>
              <Img src="assets/gt-campus.jpeg" alt="Georgia Tech Campus" />
              <div style={{
                position: "absolute", bottom: 0, left: 0, right: 0,
                padding: "20px 18px 14px",
                background: "linear-gradient(transparent, rgba(0,0,0,0.85))",
              }}>
                <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "#FCD34D" }}>Georgia Tech</div>
                <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>MS in Computer Science · AI Concentration</div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>

      {/* Core stats */}
      <Reveal delay={150}>
        <h3 style={{
          fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase",
          color: "var(--text-2)", marginTop: 96, fontWeight: 500,
        }}>핵심 수치</h3>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(5, 1fr)",
          gap: 16,
          marginTop: 20,
        }} className="stats-grid">
          {window.SITE.STATS.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="card" style={{ padding: "28px 24px" }}>
                <div style={{
                  fontSize: "clamp(32px, 3.4vw, 44px)",
                  fontWeight: 700, lineHeight: 1, letterSpacing: "-0.04em",
                }}>
                  <span className="grad-text">
                    <CountUp to={s.value} suffix={s.suffix} />
                  </span>
                </div>
                <div style={{ fontSize: 15, fontWeight: 600, marginTop: 16 }}>{s.label}</div>
                <div style={{ fontSize: 13, color: "var(--text-2)", marginTop: 6, lineHeight: 1.5 }}>{s.sub}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </Reveal>

      <style>{`
        @media (max-width: 980px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
          .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </Section>
  );
}

// ---------- 5. TIMELINE ----------
function TimelineSection() {
  return (
    <Section id="timeline" screenLabel="05 Timeline">
      <Reveal>
        <Eyebrow>Career Timeline · 2017 — Present</Eyebrow>
        <h2 className="h-section" style={{ marginTop: 16, maxWidth: 820 }}>
          창업부터 빅테크, CTO까지 —<br />
          <span className="grad-text">모든 길을 직접 걸었습니다</span>
        </h2>
      </Reveal>

      <div style={{
        position: "relative",
        marginTop: 80,
        paddingLeft: 56,
      }} className="timeline">
        {/* Vertical line */}
        <div style={{
          position: "absolute", left: 18, top: 8, bottom: 0,
          width: 1, background: "var(--line-strong)",
        }} />

        {window.SITE.TIMELINE.map((t, i) => (
          <Reveal key={i} delay={i * 50}>
            <div style={{
              position: "relative",
              paddingBottom: 56,
            }}>
              {/* Dot */}
              <div style={{
                position: "absolute", left: -56, top: 6,
                width: 36, height: 36,
                borderRadius: "50%",
                background: "var(--bg-1)",
                border: `2px solid ${
                  t.accent === "gold" ? "var(--gold)" :
                  t.accent === "emerald" ? "var(--emerald)" :
                  t.accent === "violet" ? "var(--violet)" : "var(--blue)"
                }`,
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                {t.live && (
                  <span style={{
                    width: 10, height: 10, borderRadius: "50%",
                    background: "var(--emerald)",
                    boxShadow: "0 0 12px var(--emerald)",
                    animation: "pulse 2s infinite",
                  }} />
                )}
                {!t.live && (
                  <span style={{
                    width: 8, height: 8, borderRadius: "50%",
                    background: t.accent === "gold" ? "var(--gold)" :
                              t.accent === "emerald" ? "var(--emerald)" :
                              t.accent === "violet" ? "var(--violet)" : "var(--blue)",
                  }} />
                )}
              </div>

              <div style={{
                display: "grid",
                gridTemplateColumns: t.image ? "1fr 220px" : "1fr",
                gap: 32,
                alignItems: "start",
              }} className="timeline-row">
                <div className="card" style={{
                  padding: "24px 28px",
                  borderColor: t.live ? "rgba(16, 185, 129, 0.4)" : "var(--line)",
                  background: t.live ? "rgba(16, 185, 129, 0.04)" : "var(--card)",
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
                    <span className="num" style={{
                      fontSize: 13, color: "var(--text-2)", fontWeight: 600, letterSpacing: "0.05em",
                    }}>{t.year}</span>
                    {t.live && <span className="badge badge-live">현직</span>}
                    {t.salesTag && <span className="badge badge-gold">세일즈 오피스 직무</span>}
                  </div>
                  <h3 style={{
                    fontSize: 20, fontWeight: 700, marginTop: 10, lineHeight: 1.35,
                  }}>{t.title}</h3>
                  <div style={{
                    fontSize: 13, color: "var(--text-2)", marginTop: 4,
                    fontWeight: 500,
                  }}>{t.role}</div>
                  <p style={{
                    fontSize: 14.5, color: "var(--text-1)", marginTop: 14, lineHeight: 1.65, marginBottom: 0,
                  }}>{t.desc}</p>
                  {t.link && (
                    <a href={t.link.url} target="_blank" rel="noopener noreferrer"
                      className="timeline-link"
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
                        gap: 8,
                        marginTop: 18,
                        padding: "10px 14px",
                        borderRadius: 10,
                        background: "rgba(139, 92, 246, 0.08)",
                        border: "1px solid rgba(139, 92, 246, 0.25)",
                        color: "#C4B5FD",
                        fontSize: 12.5,
                        fontWeight: 500,
                        letterSpacing: "0.01em",
                        transition: "background 0.2s, border-color 0.2s, transform 0.2s",
                      }}>
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                        <path d="M4 19V5a2 2 0 0 1 2-2h11l3 3v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/>
                        <line x1="8" y1="8" x2="16" y2="8"/>
                        <line x1="8" y1="12" x2="16" y2="12"/>
                        <line x1="8" y1="16" x2="13" y2="16"/>
                      </svg>
                      <span>{t.link.label}</span>
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, opacity: 0.75 }}>
                        <path d="M7 17L17 7M9 7h8v8"/>
                      </svg>
                    </a>
                  )}
                </div>

                {t.image && (
                  t.link ? (
                    <a href={t.link.url} target="_blank" rel="noopener noreferrer"
                      className="img-frame timeline-img-link"
                      style={{
                        height: 160,
                        display: "block",
                        position: "relative",
                        transition: "border-color 0.2s",
                      }} title={t.link.label}>
                      <Img src={t.image} alt={t.title} />
                    </a>
                  ) : (
                    <div className="img-frame" style={{ height: 160 }}>
                      <Img src={t.image} alt={t.title} />
                    </div>
                  )
                )}
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      <style>{`
        @media (max-width: 760px) {
          .timeline { padding-left: 36px !important; }
          .timeline .timeline-row { grid-template-columns: 1fr !important; }
        }
        .timeline-link:hover {
          background: rgba(139, 92, 246, 0.14) !important;
          border-color: rgba(139, 92, 246, 0.45) !important;
          transform: translateY(-1px);
        }
        .timeline-img-link:hover {
          border-color: rgba(139, 92, 246, 0.5) !important;
        }
      `}</style>
    </Section>
  );
}

// ---------- 6. LECTURES ----------
function LecturesSection() {
  return (
    <Section id="lectures" screenLabel="06 Lectures">
      <Reveal>
        <Eyebrow>Teaching Track Record</Eyebrow>
        <h2 className="h-section" style={{ marginTop: 16, maxWidth: 880 }}>
          국내 최고 교육기관들이<br />
          <span className="grad-text">연속으로 선택</span>한 강사
        </h2>
        <p style={{
          fontSize: 17, color: "var(--text-2)", marginTop: 20,
          maxWidth: 720, lineHeight: 1.7,
        }}>
          2년 연속 재계약 · 6개 교육기관 · 수백 명의 수강생.
          단순한 강의가 아닌, 한 명의 커리어를 책임지는 멘토십을 제공해왔습니다.
        </p>
      </Reveal>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(2, 1fr)",
        gap: 24,
        marginTop: 64,
      }} className="lecture-grid">
        {window.SITE.LECTURES.map((l, i) => (
          <Reveal key={i} delay={i * 60}>
            <article className="card" style={{
              padding: 30,
              display: "flex", flexDirection: "column", gap: 22, height: "100%",
            }}>
              {/* Logo + renewed */}
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
                <div style={{
                  height: 72,
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "flex-start",
                  padding: "0 20px",
                  borderRadius: 12,
                  background: l.logoDark
                    ? "linear-gradient(135deg, #1A2438, #0F1626)"
                    : "rgba(248, 250, 252, 0.97)",
                  border: `1px solid ${l.logoDark ? "rgba(148,163,184,0.18)" : "var(--line)"}`,
                  boxShadow: l.logoDark
                    ? "0 1px 0 rgba(255,255,255,0.04) inset"
                    : "0 1px 0 rgba(255,255,255,0.5) inset",
                  maxWidth: "78%",
                }}>
                  <img src={l.logo} alt="" style={{
                    height: l.logoH || 38,
                    width: "auto",
                    maxWidth: "100%",
                    objectFit: "contain",
                    display: "block",
                    transform: l.logoOffsetY ? `translateY(${l.logoOffsetY}px)` : undefined,
                  }} />
                </div>
                {l.renewed && (
                  <span className="badge badge-emerald">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="1 4 1 10 7 10"/><polyline points="23 20 23 14 17 14"/><path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15"/>
                    </svg>
                    2년 연속 재계약
                  </span>
                )}
              </div>

              {/* Title + org + period */}
              <div>
                <h3 style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.3, letterSpacing: "-0.02em" }}>
                  {l.title}
                </h3>
                <div style={{
                  fontSize: 13, color: "var(--text-2)", marginTop: 8, lineHeight: 1.55,
                }}>
                  {l.org}
                </div>
                <div className="num" style={{
                  fontSize: 12, color: "var(--text-3)", marginTop: 10,
                  letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 600,
                }}>
                  {l.period}
                </div>
              </div>

              {/* Tagline pull-quote */}
              <div style={{
                paddingLeft: 16,
                borderLeft: "2px solid rgba(139, 92, 246, 0.5)",
                fontSize: 15,
                color: "var(--text-0)",
                fontWeight: 500,
                fontStyle: "italic",
                lineHeight: 1.55,
              }}>
                {l.tagline}
              </div>

              {/* Bullets */}
              <div style={{
                display: "flex", flexDirection: "column", gap: 14,
                paddingTop: 6, paddingBottom: 6,
              }}>
                {l.bullets.map((b, k) => (
                  <div key={k} style={{
                    display: "grid",
                    gridTemplateColumns: "100px 1fr",
                    gap: 14,
                    alignItems: "baseline",
                  }} className="bullet-row">
                    <div style={{
                      fontSize: 11, color: "var(--text-2)",
                      letterSpacing: "0.08em", textTransform: "uppercase",
                      fontWeight: 600, paddingTop: 3,
                    }}>
                      {b.label}
                    </div>
                    <div style={{
                      fontSize: 14, color: "var(--text-1)", lineHeight: 1.65,
                    }}>
                      {b.body}
                    </div>
                  </div>
                ))}
              </div>

              {/* Quote */}
              <div style={{
                display: "flex", gap: 14, alignItems: "flex-start",
                padding: "16px 18px",
                borderRadius: 12,
                background: "rgba(59, 130, 246, 0.05)",
                border: "1px solid rgba(59, 130, 246, 0.12)",
              }}>
                <svg width="22" height="18" viewBox="0 0 36 28" fill="none" style={{ flexShrink: 0, marginTop: 2 }}>
                  <path d="M0 28V14C0 6 5 0 14 0V6C8 6 6 9 6 14H14V28H0ZM22 28V14C22 6 27 0 36 0V6C30 6 28 9 28 14H36V28H22Z"
                    fill="#3B82F6" opacity="0.5"/>
                </svg>
                <p style={{
                  fontSize: 13.5,
                  color: "var(--text-1)",
                  fontStyle: "italic",
                  lineHeight: 1.6,
                  margin: 0,
                }}>
                  {l.quote}
                </p>
              </div>

              {/* Tags */}
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: "auto" }}>
                {l.tags.map((t, k) => <span key={k} className="pill">{t}</span>)}
              </div>
            </article>
          </Reveal>
        ))}
      </div>

      <style>{`
        @media (max-width: 880px) {
          .lecture-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 520px) {
          .bullet-row { grid-template-columns: 1fr !important; gap: 4px !important; }
        }
      `}</style>
    </Section>
  );
}

// ---------- 7. WHY ME ----------
function WhySection() {
  return (
    <Section id="why" screenLabel="07 Why Me">
      <Reveal>
        <Eyebrow>Why Me</Eyebrow>
        <h2 className="h-section" style={{ marginTop: 16, maxWidth: 880 }}>
          다른 멘토와<br />
          <span className="grad-text">무엇이 다른가요?</span>
        </h2>
      </Reveal>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 20,
        marginTop: 64,
      }} className="why-grid">
        {window.SITE.STRENGTHS.map((s, i) => {
          const isGold = s.accent === "gold";
          return (
            <Reveal key={i} delay={i * 80}>
              <div className="card" style={{
                padding: 28,
                height: "100%",
                display: "flex", flexDirection: "column",
                borderColor: isGold ? "rgba(245, 158, 11, 0.35)" : "var(--line)",
                background: isGold ? "linear-gradient(135deg, rgba(245,158,11,0.04), rgba(249,115,22,0.02))" : "var(--card)",
                position: "relative", overflow: "hidden",
              }}>
                {/* Bg image fade for exclusive cards */}
                {s.image && (
                  <div style={{
                    position: "absolute", inset: 0,
                    opacity: 0.08,
                    backgroundImage: `url(${s.image})`,
                    backgroundSize: "cover", backgroundPosition: "center",
                    pointerEvents: "none",
                  }} />
                )}

                <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 20 }}>
                  <span className="num" style={{
                    fontSize: 16, fontWeight: 600,
                    color: isGold ? "var(--gold)" :
                          s.accent === "emerald" ? "var(--emerald)" :
                          s.accent === "violet" ? "var(--violet)" : "var(--blue)",
                  }}>{s.n}</span>
                  {s.tag && <span className="badge badge-gold">⭐ {s.tag}</span>}
                </div>

                <h3 style={{
                  position: "relative",
                  fontSize: 19, fontWeight: 600, lineHeight: 1.35, whiteSpace: "pre-line",
                  marginBottom: 16,
                }}>{s.title}</h3>

                <p style={{
                  position: "relative",
                  fontSize: 14, color: "var(--text-1)", lineHeight: 1.7, margin: 0,
                }}>{s.desc}</p>
              </div>
            </Reveal>
          );
        })}
      </div>

      <style>{`
        @media (max-width: 980px) {
          .why-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 640px) {
          .why-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </Section>
  );
}

Object.assign(window, {
  HeroSection, TrustSection, PainSection, AboutSection,
  TimelineSection, LecturesSection, WhySection,
});