// ===================== SECTIONS B (Sales Office → Footer) =====================

// ---------- 8. SALES OFFICE (FLAGSHIP V2 SECTION) ----------
function SalesOfficeSection() {
  const [active, setActive] = useState(0);
  const roles = window.SITE.SALES_ROLES;

  return (
    <section id="sales-office" style={{
      position: "relative",
      padding: "clamp(100px, 14vw, 180px) 0",
      overflow: "hidden",
    }} data-screen-label="08 Sales Office (NEW)">
      {/* Gold gradient backdrop */}
      <div style={{
        position: "absolute", inset: 0,
        background: `
          radial-gradient(ellipse at 0% 0%, rgba(245, 158, 11, 0.16), transparent 55%),
          radial-gradient(ellipse at 100% 100%, rgba(249, 115, 22, 0.12), transparent 55%),
          var(--bg-1)
        `,
        pointerEvents: "none",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "linear-gradient(rgba(245,158,11,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(245,158,11,0.04) 1px, transparent 1px)",
        backgroundSize: "80px 80px",
        maskImage: "radial-gradient(ellipse at center, black 30%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(ellipse at center, black 30%, transparent 80%)",
        pointerEvents: "none",
      }} />

      <div className="container" style={{ position: "relative" }}>
        <Reveal>
          <Eyebrow gold>⭐ V2 EXCLUSIVE · Sales Office Track</Eyebrow>
          <h2 className="h-section" style={{ marginTop: 16, maxWidth: 1000 }}>
            코딩 안 해도 외국계 IT 간다 —<br />
            <span className="grad-text-gold">'세일즈 오피스'</span>를 아시나요?
          </h2>
          <p style={{
            fontSize: "clamp(17px, 1.7vw, 21px)",
            color: "var(--text-1)",
            marginTop: 24,
            fontWeight: 500,
            maxWidth: 760,
            lineHeight: 1.6,
          }}>
            Google · AWS · Microsoft 한국 지사의 진짜 모습.
          </p>
        </Reveal>

        {/* Intro grid: text + 3 hero images */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.05fr 1fr",
          gap: 56,
          marginTop: 72,
          alignItems: "center",
        }} className="sales-intro">
          <Reveal>
            <div style={{
              padding: "32px 36px",
              borderRadius: 22,
              background: "rgba(19, 28, 46, 0.6)",
              backdropFilter: "blur(8px)",
              border: "1px solid rgba(245, 158, 11, 0.2)",
            }}>
              <p style={{ fontSize: 17, color: "var(--text-1)", lineHeight: 1.85, margin: 0 }}>
                외국계 IT 기업의 한국 지사는 대부분 <strong style={{ color: "var(--text-0)" }}>"세일즈 오피스"</strong>입니다. 개발은 본사(미국 · 인도)에서 하고, 한국 지사에서는 그 기술을 <strong style={{ color: "var(--text-0)" }}>고객에게 전달하고, 비즈니스를 만들어내는 역할</strong>을 합니다.
              </p>
              <p style={{ fontSize: 17, color: "var(--text-1)", lineHeight: 1.85, marginTop: 16, marginBottom: 0 }}>
                즉, 한국 지사의 핵심 직무는 개발이 아니라 <span className="grad-text-gold" style={{ fontWeight: 600 }}>기술 영업 · 기술 컨설팅 · 고객 성공</span>입니다.
              </p>
            </div>
          </Reveal>

          <Reveal delay={150}>
            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gridTemplateRows: "180px 180px",
              gap: 12,
            }} className="sales-hero-imgs">
              <div className="img-frame" style={{ gridRow: "span 2", height: "100%" }}>
                <Img src="assets/global-05.jpeg" alt="Unity APAC Conference" />
              </div>
              <div className="img-frame">
                <Img src="assets/global-11.jpeg" alt="VMware Korea Office" />
              </div>
              <div className="img-frame">
                <Img src="assets/global-08.jpeg" alt="VMware Global Call" />
              </div>
            </div>
            <div style={{
              display: "flex", gap: 14, marginTop: 14, fontSize: 11.5,
              color: "var(--text-2)", letterSpacing: "0.02em",
            }}>
              <span>↑ Unity APAC 컨퍼런스 · VMware 한국 오피스 · VMware 글로벌 화상회의</span>
            </div>
          </Reveal>
        </div>

        {/* Roles: tabs + detail */}
        <div style={{ marginTop: 96 }}>
          <Reveal>
            <h3 style={{
              fontSize: "clamp(22px, 2.4vw, 30px)", fontWeight: 700, marginBottom: 24,
            }}>
              세일즈 오피스의 <span className="grad-text-gold">6가지 핵심 직무</span>
            </h3>
          </Reveal>

          <Reveal>
            <div className="scroll-x-mobile" style={{
              display: "flex", gap: 8, marginBottom: 32, flexWrap: "wrap",
            }}>
              {roles.map((r, i) => (
                <button
                  key={i}
                  className={`tab-btn gold ${active === i ? "active gold" : ""}`}
                  onClick={() => setActive(i)}
                  style={{ minWidth: 110 }}
                >
                  <strong style={{ marginRight: 6 }}>{r.code}</strong>
                  <span style={{ fontWeight: 400 }}>{r.title}</span>
                </button>
              ))}
            </div>
          </Reveal>

          <Reveal>
            <div className="card" style={{
              padding: "40px 44px",
              borderColor: "rgba(245, 158, 11, 0.3)",
              background: "linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(249, 115, 22, 0.02))",
              display: "grid",
              gridTemplateColumns: "0.8fr 1.2fr",
              gap: 48,
            }} key={active} className="role-detail">
              <div>
                <div className="num" style={{
                  fontSize: "clamp(60px, 7vw, 100px)", fontWeight: 800,
                  lineHeight: 1, letterSpacing: "-0.04em",
                }}>
                  <span className="grad-text-gold">{roles[active].code}</span>
                </div>
                <div style={{ fontSize: 22, fontWeight: 700, marginTop: 12 }}>{roles[active].title}</div>
                {roles[active].subtitle && (
                  <div style={{ fontSize: 14, color: "var(--text-2)", marginTop: 4 }}>{roles[active].subtitle}</div>
                )}
                <div style={{
                  marginTop: 28, padding: "14px 18px",
                  background: "rgba(245, 158, 11, 0.08)",
                  border: "1px solid rgba(245, 158, 11, 0.2)",
                  borderRadius: 12,
                }}>
                  <div style={{ fontSize: 11, letterSpacing: "0.06em", color: "#FCD34D", textTransform: "uppercase", fontWeight: 600 }}>
                    예상 연봉 범위
                  </div>
                  <div className="num" style={{ fontSize: 20, fontWeight: 700, marginTop: 4 }}>
                    {roles[active].salary}
                  </div>
                </div>
              </div>
              <div>
                <div style={{
                  fontSize: 17, fontWeight: 600, color: "var(--text-0)",
                  paddingBottom: 18, borderBottom: "1px solid var(--line)",
                }}>
                  {roles[active].one}
                </div>
                <p style={{
                  fontSize: 15.5, color: "var(--text-1)", lineHeight: 1.85,
                  marginTop: 20, marginBottom: 0,
                }}>
                  {roles[active].long}
                </p>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Bottom hook */}
        <Reveal>
          <div style={{
            marginTop: 80,
            textAlign: "center",
            padding: "48px 24px",
            borderRadius: 20,
            background: "linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(249, 115, 22, 0.06))",
            border: "1px solid rgba(245, 158, 11, 0.3)",
          }}>
            <p style={{
              fontSize: "clamp(22px, 2.6vw, 32px)", fontWeight: 700,
              margin: 0, lineHeight: 1.4,
            }}>
              <span className="grad-text-gold">이 직무들은 비전공자도 충분히 도전 가능합니다.</span>
            </p>
            <p style={{
              fontSize: 16, color: "var(--text-1)", marginTop: 14, lineHeight: 1.7,
              maxWidth: 680, marginLeft: "auto", marginRight: "auto",
            }}>
              저는 VMware에서 SE로, 현재 Unity에서 Staff Engineer로 이 세계를 직접 걷고 있습니다.<br />
              어떤 직무가 나에게 맞는지, 어떻게 준비해야 하는지, 1대1로 코칭해 드립니다.
            </p>
            <div style={{ marginTop: 28 }}>
              <CTAButton variant="gold">세일즈 오피스 직무 상담 신청하기</CTAButton>
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .sales-intro { grid-template-columns: 1fr !important; gap: 40px !important; }
          .role-detail { grid-template-columns: 1fr !important; gap: 28px !important; padding: 28px !important; }
        }
        @media (max-width: 640px) {
          .sales-hero-imgs { grid-template-rows: 140px 140px !important; }
        }
      `}</style>
    </section>
  );
}

// ---------- 9. CONTENT / WHAT YOU GET ----------
function ContentSection() {
  const [active, setActive] = useState(0);
  const parts = window.SITE.CONTENT_PARTS;

  return (
    <Section id="content" screenLabel="09 What You'll Get">
      <Reveal>
        <Eyebrow>What You'll Get · 멘토링 콘텐츠</Eyebrow>
        <h2 className="h-section" style={{ marginTop: 16, maxWidth: 880 }}>
          멘토링에서 <span className="grad-text">무엇을 얻을 수</span> 있나요?
        </h2>
        <p style={{
          fontSize: 16, color: "var(--text-2)", marginTop: 20, maxWidth: 600, lineHeight: 1.7,
        }}>
          PART A부터 G까지 — 직무 탐색부터 면접 클로징까지 7개 트랙으로 구성된 종합 커리큘럼.
        </p>
      </Reveal>

      <div style={{
        display: "grid",
        gridTemplateColumns: "0.85fr 1.15fr",
        gap: 40,
        marginTop: 64,
      }} className="content-grid">
        {/* Left: tab list */}
        <Reveal>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {parts.map((p, i) => (
              <button
                key={i}
                onClick={() => setActive(i)}
                style={{
                  textAlign: "left",
                  padding: "18px 22px",
                  borderRadius: 14,
                  background: active === i ? "var(--card-2)" : "transparent",
                  border: `1px solid ${active === i ? (p.tag === "NEW" ? "rgba(245, 158, 11, 0.4)" : "rgba(59, 130, 246, 0.35)") : "var(--line)"}`,
                  color: active === i ? "var(--text-0)" : "var(--text-1)",
                  transition: "all 0.2s",
                  display: "flex", alignItems: "center", gap: 16,
                }}
              >
                <span className="num" style={{
                  fontSize: 12, fontWeight: 700, letterSpacing: "0.05em",
                  width: 36, height: 36, borderRadius: 10,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  background: active === i
                    ? (p.tag === "NEW" ? "var(--grad-gold)" : "var(--grad-primary)")
                    : "rgba(148, 163, 184, 0.08)",
                  color: active === i ? "#fff" : "var(--text-2)",
                  flexShrink: 0,
                }}>
                  {p.code}
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 15.5, fontWeight: 600 }}>{p.title}</div>
                  <div style={{ fontSize: 13, color: "var(--text-2)", marginTop: 2, lineHeight: 1.4 }}>
                    {p.short}
                  </div>
                </div>
                {p.tag && <span className="badge badge-gold" style={{ flexShrink: 0 }}>{p.tag}</span>}
              </button>
            ))}
          </div>
        </Reveal>

        {/* Right: details */}
        <Reveal>
          <div className="card" style={{
            padding: "40px 44px",
            position: "sticky", top: 100,
            borderColor: parts[active].tag === "NEW" ? "rgba(245, 158, 11, 0.3)" : "var(--line)",
            background: parts[active].tag === "NEW"
              ? "linear-gradient(135deg, rgba(245, 158, 11, 0.04), rgba(249, 115, 22, 0.02))"
              : "var(--card)",
          }} key={active}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span className="num" style={{
                fontSize: 14, fontWeight: 600, color: "var(--text-2)", letterSpacing: "0.06em",
              }}>PART {parts[active].code}</span>
              {parts[active].tag && <span className="badge badge-gold">{parts[active].tag}</span>}
            </div>
            <h3 className="h-sub" style={{ marginTop: 16 }}>
              {parts[active].title}
            </h3>
            <p style={{
              fontSize: 16, color: "var(--text-1)", lineHeight: 1.85, marginTop: 24, marginBottom: 0,
            }}>
              {parts[active].body}
            </p>
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .content-grid { grid-template-columns: 1fr !important; }
          .content-grid > div:nth-child(2) .card { position: relative !important; top: 0 !important; padding: 28px !important; }
        }
      `}</style>
    </Section>
  );
}

// ---------- 10. AUDIENCE ----------
function AudienceSection() {
  return (
    <Section id="audience" screenLabel="10 Audience">
      <Reveal>
        <Eyebrow>For Whom</Eyebrow>
        <h2 className="h-section" style={{ marginTop: 16, maxWidth: 880 }}>
          이런 분이라면,<br />
          <span className="grad-text">반드시 도움이 됩니다</span>
        </h2>
      </Reveal>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: 16,
        marginTop: 64,
      }} className="audience-grid">
        {window.SITE.AUDIENCE.map((a, i) => (
          <Reveal key={i} delay={i * 50}>
            <div className="card" style={{
              padding: "26px 24px",
              height: "100%",
              borderColor: a.tag ? "rgba(245, 158, 11, 0.3)" : "var(--line)",
              background: a.tag ? "linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(249, 115, 22, 0.02))" : "var(--card)",
              position: "relative",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
                <span className="num" style={{
                  fontSize: 11, color: a.tag ? "var(--gold)" : "var(--text-2)", fontWeight: 600, letterSpacing: "0.06em",
                }}>{String(i + 1).padStart(2, "0")}</span>
                {a.tag && <span className="badge badge-gold" style={{ fontSize: 10, padding: "3px 8px" }}>{a.tag}</span>}
              </div>
              <h3 style={{ fontSize: 16, fontWeight: 600, lineHeight: 1.4 }}>{a.title}</h3>
              <p style={{
                fontSize: 13.5, color: "var(--text-1)", lineHeight: 1.6, marginTop: 8, marginBottom: 0,
              }}>{a.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>

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

// ---------- 11. CASES ----------
function CaseCard({ c, gold = false }) {
  return (
    <div className="card" style={{
      padding: "28px 30px",
      height: "100%",
      display: "flex", flexDirection: "column",
      borderColor: gold ? "rgba(245, 158, 11, 0.3)" : "rgba(59, 130, 246, 0.2)",
      background: gold
        ? "linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(249, 115, 22, 0.02))"
        : "linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.02))",
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
          <span style={{
            fontSize: 19, fontWeight: 700,
            color: gold ? "var(--gold)" : "var(--text-0)",
          }}>{c.company}</span>
          <span style={{ color: "var(--text-3)" }}>—</span>
          <span style={{ fontSize: 15, fontWeight: 500, color: "var(--text-1)" }}>{c.role}</span>
        </div>
        <span className="pill" style={{ fontSize: 11 }}>멘티 {c.mentee}</span>
      </div>

      <div style={{
        fontSize: 12, color: "var(--text-2)", marginTop: 8,
        paddingBottom: 16, borderBottom: "1px solid var(--line)",
      }}>
        {c.bg}
      </div>

      <p style={{
        fontSize: 14.5, color: "var(--text-1)", lineHeight: 1.7, marginTop: 18, marginBottom: 24,
      }}>{c.story}</p>

      <div style={{
        marginTop: "auto",
        padding: "18px 20px",
        borderRadius: 12,
        background: gold ? "rgba(245, 158, 11, 0.07)" : "rgba(59, 130, 246, 0.06)",
        borderLeft: `3px solid ${gold ? "var(--gold)" : "var(--blue)"}`,
        position: "relative",
      }}>
        <div style={{ position: "absolute", top: -6, left: 14 }}>
          <QuoteGlyph color={gold ? "var(--gold)" : "var(--blue)"} />
        </div>
        <p style={{
          fontSize: 13.5, color: "var(--text-1)", lineHeight: 1.7,
          fontStyle: "italic", margin: 0, paddingTop: 14,
        }}>
          "{c.quote}"
        </p>
      </div>
    </div>
  );
}

function CasesSection() {
  const [tab, setTab] = useState("local");
  const local = window.SITE.CASES_LOCAL;
  const global = window.SITE.CASES_GLOBAL;

  return (
    <Section id="cases" screenLabel="11 Success Cases (NEW)">
      <Reveal>
        <Eyebrow>Social Proof · 멘토링 성공 사례</Eyebrow>
        <h2 className="h-section" style={{ marginTop: 16, maxWidth: 920 }}>
          실제 멘티들의 결과로<br />
          <span className="grad-text">증명합니다</span>
        </h2>
        <p style={{
          fontSize: 17, color: "var(--text-2)", marginTop: 20, maxWidth: 720, lineHeight: 1.7,
        }}>
          토스, 카카오, 네이버부터 Moloco, MongoDB, Databricks까지 — 멘토링을 통해 커리어를 바꾼 분들의 이야기.
        </p>
      </Reveal>

      {/* Key numbers */}
      <Reveal>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 16,
          marginTop: 56,
        }} className="cases-numbers">
          {[
            { v: "10", l: "기업 합격 사례", s: "국내 5 + 글로벌 5" },
            { v: "3", l: "PM 전원 비전공자", s: "마케팅·MD·경영학 출신" },
            { v: "4", l: "세일즈 오피스 직무", s: "SE · SA · CSM · AE" },
            { v: "9", l: "일 MVP 완성", s: "비전공자 4개 팀 데모" },
          ].map((n, i) => (
            <div key={i} className="card" style={{ padding: "24px 24px" }}>
              <div className="num" style={{
                fontSize: 36, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1,
              }}><span className="grad-text">{n.v}</span></div>
              <div style={{ fontSize: 14, fontWeight: 600, marginTop: 14 }}>{n.l}</div>
              <div style={{ fontSize: 12, color: "var(--text-2)", marginTop: 4 }}>{n.s}</div>
            </div>
          ))}
        </div>
      </Reveal>

      {/* Companies row */}
      <Reveal>
        <div style={{
          marginTop: 48,
          padding: "22px 28px",
          background: "rgba(15, 22, 38, 0.5)",
          border: "1px solid var(--line)",
          borderRadius: 16,
          display: "flex",
          flexWrap: "wrap",
          alignItems: "center",
          justifyContent: "center",
          gap: "12px 20px",
        }}>
          <span style={{ fontSize: 12, color: "var(--text-3)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
            합격 기업
          </span>
          <span style={{ color: "var(--line-strong)" }}>|</span>
          {["토스", "카카오", "네이버", "당근마켓", "무신사"].map((c) => (
            <span key={c} style={{
              fontSize: 14, fontWeight: 600, color: "var(--text-0)",
              padding: "4px 10px", borderRadius: 8,
              background: "rgba(59, 130, 246, 0.10)",
              border: "1px solid rgba(59, 130, 246, 0.25)",
            }}>{c}</span>
          ))}
          <span style={{ color: "var(--line-strong)" }}>·</span>
          {["Moloco", "Okta", "Notion", "MongoDB", "Databricks"].map((c) => (
            <span key={c} style={{
              fontSize: 14, fontWeight: 600, color: "#FCD34D",
              padding: "4px 10px", borderRadius: 8,
              background: "rgba(245, 158, 11, 0.10)",
              border: "1px solid rgba(245, 158, 11, 0.30)",
            }}>{c}</span>
          ))}
        </div>
      </Reveal>

      {/* Tabs */}
      <Reveal>
        <div style={{ display: "flex", gap: 10, marginTop: 56, flexWrap: "wrap" }}>
          <button
            className={`tab-btn ${tab === "local" ? "active" : ""}`}
            onClick={() => setTab("local")}
            style={{ padding: "12px 22px", fontSize: 15 }}
          >
            <span style={{ marginRight: 8 }}>PART 1.</span>국내 빅테크 (5건)
          </button>
          <button
            className={`tab-btn gold ${tab === "global" ? "active gold" : ""}`}
            onClick={() => setTab("global")}
            style={{ padding: "12px 22px", fontSize: 15 }}
          >
            <span style={{ marginRight: 8 }}>PART 2.</span>글로벌 SaaS 세일즈 오피스 (5건)
          </button>
        </div>
      </Reveal>

      <Reveal>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 20,
          marginTop: 24,
        }} className="cases-grid">
          {(tab === "local" ? local : global).map((c, i) => (
            <Reveal key={`${tab}-${i}`} delay={i * 60}>
              <CaseCard c={c} gold={tab === "global"} />
            </Reveal>
          ))}
        </div>
      </Reveal>

      {/* Part 3 banner */}

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

// ---------- 12. GALLERY ----------
function GallerySection() {
  const scrollRef = useRef(null);
  const gallery = window.SITE.GALLERY;

  const scroll = (dir) => {
    const el = scrollRef.current;
    if (!el) return;
    const w = el.clientWidth;
    el.scrollBy({ left: dir * w * 0.7, behavior: "smooth" });
  };

  return (
    <Section id="gallery" screenLabel="12 Global Gallery">
      <Reveal>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24 }}>
          <div>
            <Eyebrow>Global Experience · 글로벌 현장</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 16, maxWidth: 760 }}>
              사진으로 보는<br />
              <span className="grad-text">진짜 외국계 IT 현장</span>
            </h2>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <button onClick={() => scroll(-1)} className="btn-ghost" style={{ padding: 12, borderRadius: 999 }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M19 12H5M11 18l-6-6 6-6"/>
              </svg>
            </button>
            <button onClick={() => scroll(1)} className="btn-ghost" style={{ padding: 12, borderRadius: 999 }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M13 6l6 6-6 6"/>
              </svg>
            </button>
          </div>
        </div>
      </Reveal>

      <Reveal>
        <div ref={scrollRef} className="h-scroll" style={{ marginTop: 48 }}>
          {gallery.map((g, i) => (
            <div key={i} style={{
              width: "min(420px, 80vw)",
              aspectRatio: "4/3",
              borderRadius: 18,
              overflow: "hidden",
              position: "relative",
              border: "1px solid var(--line)",
              background: "var(--bg-2)",
            }}>
              <Img src={g.src} alt={g.caption} />
              <div style={{
                position: "absolute", inset: 0,
                background: "linear-gradient(to bottom, transparent 50%, rgba(7, 9, 15, 0.95))",
                display: "flex", flexDirection: "column", justifyContent: "flex-end",
                padding: "0 20px 20px",
              }}>
                <span style={{
                  fontSize: 11, color: "#FCD34D", letterSpacing: "0.06em",
                  textTransform: "uppercase", fontWeight: 600,
                }}>{g.tag}</span>
                <p style={{
                  fontSize: 14, color: "#F8FAFC", fontWeight: 500, marginTop: 6, lineHeight: 1.45,
                }}>{g.caption}</p>
              </div>
              <span className="num" style={{
                position: "absolute", top: 16, left: 18,
                fontSize: 11, color: "rgba(255,255,255,0.7)", fontWeight: 600,
                background: "rgba(0,0,0,0.4)", backdropFilter: "blur(4px)",
                padding: "4px 10px", borderRadius: 999,
                letterSpacing: "0.05em",
              }}>{String(i + 1).padStart(2, "0")} / {gallery.length}</span>
            </div>
          ))}
        </div>
      </Reveal>

      <Reveal>
        <p style={{
          marginTop: 40,
          textAlign: "center",
          fontSize: 16,
          color: "var(--text-2)",
          maxWidth: 720,
          marginLeft: "auto", marginRight: "auto",
          lineHeight: 1.7,
        }}>
          Microsoft · VMware · Unity에서 <span style={{ color: "var(--text-0)" }}>직접 경험한</span> 글로벌 IT 현장입니다.
        </p>
      </Reveal>
    </Section>
  );
}

// ---------- 13. CTA FINAL ----------
function CTASection() {
  return (
    <section id="apply" style={{
      position: "relative",
      padding: "clamp(80px, 12vw, 140px) 0",
      overflow: "hidden",
    }} data-screen-label="13 Final CTA">
      <div className="glow" style={{
        width: 700, height: 700, top: -200, left: "50%", transform: "translateX(-50%)",
        background: "radial-gradient(circle, rgba(59,130,246,0.4), transparent 70%)",
      }} />

      <div className="container" style={{ position: "relative" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "0.7fr 1.3fr",
          gap: 56,
          alignItems: "center",
        }} className="cta-grid">
          <Reveal>
            <div className="img-frame" style={{
              height: 500,
              boxShadow: "0 60px 80px -40px rgba(59,130,246,0.5)",
            }}>
              <Img src="assets/profile-full.jpeg" alt="문기준" />
            </div>
          </Reveal>

          <Reveal delay={100}>
            <Eyebrow>The Final Step</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              지금이 <span className="grad-text">가장 빠른 시작</span>입니다
            </h2>
            <p style={{
              fontSize: 17, color: "var(--text-1)", lineHeight: 1.85, marginTop: 28,
            }}>
              AI 직무 공고는 매년 67%씩 늘고 있고, 외국계 IT 기업의 한국 지사도 매년 채용을 확대하고 있습니다.
              혼자 시행착오하며 1년을 허비하기 전에,
              <strong style={{ color: "var(--text-0)" }}> 빅테크 세일즈 오피스 현직자 멘토</strong>와 함께 최단 경로를 설계하세요.
            </p>
            <p style={{
              fontSize: 19, fontWeight: 600, marginTop: 24,
            }}>
              개발자든, 비개발 직군이든 — <span className="grad-text-gold">여러분에게 맞는 길이 있습니다.</span>
            </p>

            <div style={{ display: "flex", gap: 14, marginTop: 40, flexWrap: "wrap" }}>
              <CTAButton>1대1 멘토링 신청하기</CTAButton>
              <a href="#" className="btn-ghost" style={{ background: "#FEE500", color: "#1A1A1A", borderColor: "transparent" }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 3C6.48 3 2 6.58 2 11c0 2.84 1.92 5.32 4.79 6.74L5.5 21l4.13-2.32c.78.1 1.57.15 2.37.15 5.52 0 10-3.58 10-8s-4.48-7.83-10-7.83z"/>
                </svg>
                카카오톡으로 문의하기
              </a>
            </div>

            <p style={{
              fontSize: 13, color: "var(--text-2)", marginTop: 24,
              display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap",
            }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <span style={{
                  width: 6, height: 6, borderRadius: "50%", background: "var(--emerald)",
                }} />
                소수 정원으로 운영됩니다
              </span>
              <span style={{ color: "var(--line-strong)" }}>·</span>
              <span>상담 후 결정하셔도 됩니다</span>
            </p>
          </Reveal>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .cta-grid { grid-template-columns: 1fr !important; }
          .cta-grid .img-frame { height: 380px !important; }
        }
      `}</style>
    </section>
  );
}

// ---------- 14. FOOTER ----------
function FooterSection() {
  return (
    <footer style={{
      borderTop: "1px solid var(--line)",
      background: "var(--bg-0)",
      padding: "64px 0 48px",
    }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.5fr 1fr 1fr",
          gap: 48,
        }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
              <span style={{
                width: 32, height: 32, borderRadius: 9,
                background: "var(--grad-primary)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontWeight: 800, fontSize: 14, color: "#fff",
              }}>문</span>
              <strong style={{ fontSize: 17 }}>문기준 | AI · IT Career Mentor</strong>
            </div>
            <p style={{ fontSize: 14, color: "var(--text-2)", lineHeight: 1.7, margin: 0, maxWidth: 480 }}>
              Unity Technologies 현직 Staff Engineer.<br />
              외국계 6년 · 스타트업 2년 · 대학원 2년, 총 10년 경력.<br />
              개발직부터 외국계 세일즈 오피스까지, 1대1로 커리어를 설계합니다.
            </p>
          </div>

          <div>
            <h4 style={{ fontSize: 12, color: "var(--text-2)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 16, fontWeight: 600 }}>
              연락
            </h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <li><a href="#apply" className="ul-link" style={{ color: "var(--text-1)" }}>1대1 멘토링 신청</a></li>
              <li><a href="#" className="ul-link" style={{ color: "var(--text-1)" }}>카카오톡 채널</a></li>
              <li><a href="#" className="ul-link" style={{ color: "var(--text-1)" }}>이메일 문의</a></li>
            </ul>
          </div>

          <div>
            <h4 style={{ fontSize: 12, color: "var(--text-2)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 16, fontWeight: 600 }}>
              소셜
            </h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <li><a href="#" className="ul-link" style={{ color: "var(--text-1)" }}>LinkedIn ↗</a></li>
              <li><a href="#" className="ul-link" style={{ color: "var(--text-1)" }}>GitHub ↗</a></li>
              <li><a href="#" className="ul-link" style={{ color: "var(--text-1)" }}>Velog ↗</a></li>
            </ul>
          </div>
        </div>

        <div style={{
          marginTop: 56, paddingTop: 24,
          borderTop: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between",
          alignItems: "center", flexWrap: "wrap", gap: 16,
        }}>
          <span style={{ fontSize: 12, color: "var(--text-3)" }}>
            © 2026 문기준. All rights reserved.
          </span>
          <span style={{ fontSize: 11, color: "var(--text-3)", letterSpacing: "0.06em" }}>
            Built with React · Designed for ambitious careers.
          </span>
        </div>
      </div>

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

Object.assign(window, {
  SalesOfficeSection, ContentSection, AudienceSection, CasesSection,
  GallerySection, CTASection, FooterSection,
});
