// About.jsx — agency manifesto. Headline + two-paragraph statement + meta column.
const aboutStyles = {
  wrap: { padding: '100px 36px 140px', maxWidth: 1280, margin: '0 auto' },

  // Top eyebrow + tiny meta — sits above the hero, like a chapter mark
  eyebrow: {
    display: 'flex', alignItems: 'center', gap: 12,
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 11,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#000',
    marginBottom: 56,
  },
  eyebrowDot: { width: 8, height: 8, background: '#000', borderRadius: '50%' },
  eyebrowSep: { color: '#9A9A9A', fontWeight: 400, letterSpacing: '-0.03em', textTransform: 'none', fontFamily: 'Pretendard' },

  // Hero — KO oversized, EN small underneath
  hero: { paddingBottom: 56, borderBottom: '1px solid #000', marginBottom: 80 },
  heroKo: {
    fontFamily: 'Pretendard', fontWeight: 700, fontSize: 'clamp(40px, 5.4vw, 76px)',
    letterSpacing: '-0.03em', lineHeight: 1.05, color: '#000', margin: 0,
    maxWidth: 1100,
  },
  heroEn: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 'clamp(20px, 2.4vw, 32px)',
    letterSpacing: '-0.03em', textTransform: 'uppercase',
    color: '#000', marginTop: 24, lineHeight: 1.05,
  },
  heroEnFaint: { color: '#9A9A9A' },

  // Manifesto — 2-col layout: numbered statements left, meta right
  manifesto: {
    display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 100,
    alignItems: 'flex-start',
  },

  statements: { display: 'flex', flexDirection: 'column', gap: 56 },
  stmt: { display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28 },
  stmtNum: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 13,
    letterSpacing: '-0.03em', color: '#9A9A9A', paddingTop: 6,
  },
  stmtBody: {
    fontFamily: 'Pretendard', fontWeight: 300,
    fontSize: 'clamp(17px, 1.45vw, 21px)',
    letterSpacing: '-0.03em', lineHeight: 1.85, color: '#1A1A1A',
  },
  stmtBodyEm: {
    color: '#000', fontWeight: 700,
  },
  stmtCaption: {
    marginTop: 14,
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#9A9A9A',
  },

  // Right column — company meta as a sharp data table
  meta: { border: '1px solid #000', background: '#fff' },
  metaHead: {
    padding: '20px 24px', borderBottom: '1px solid #000',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
  },
  metaHeadKo: { color: '#9A9A9A', fontFamily: 'Pretendard', fontWeight: 300, fontSize: 11, letterSpacing: '-0.03em', textTransform: 'none' },
  metaRow: {
    display: 'grid', gridTemplateColumns: '90px 1fr', gap: 14,
    padding: '18px 24px', borderBottom: '1px solid #E5E5E5', alignItems: 'baseline',
  },
  metaRowLast: { borderBottom: 'none' },
  metaLabel: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#9A9A9A',
  },
  metaValue: {
    fontFamily: 'Pretendard', fontWeight: 400, fontSize: 13,
    letterSpacing: '-0.03em', color: '#000', lineHeight: 1.65,
  },
  metaValueEn: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 12,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
  },
};

function About() {
  const meta = [
    { label: 'Founded',  ko: '설립',     value: 'February 2026',                         en: true  },
    { label: 'Type',     ko: '회사 형태', value: '주식회사 사구오 · SAGUO Inc.',           en: false },
    { label: 'Field',    ko: '분야',     value: 'Management · 매니지먼트',               en: false },
    { label: 'Office',   ko: '본사',     value: '서울특별시 서초구\n사임당로8길 13',         en: false },
    { label: 'Reg. No.', ko: '사업자번호', value: '752-87-03676',                          en: true  },
  ];

  return (
    <section style={aboutStyles.wrap}>
      <div style={aboutStyles.eyebrow}>
        <span style={aboutStyles.eyebrowDot}></span>
        <span>About SAGUO Management</span>
        <span style={aboutStyles.eyebrowSep}>· 사구오 매니지먼트 소개</span>
      </div>

      <header style={aboutStyles.hero}>
        <h1 style={aboutStyles.heroKo}>
          완성을 위한 마지막 점,<br/>
          SAGUO MANAGEMENT.
        </h1>
        <div style={aboutStyles.heroEn}>
          The last dot for completion.<span style={{ marginLeft: 18 }}>·</span>
          <span style={{ ...aboutStyles.heroEnFaint, marginLeft: 18 }}>SAGUO MANAGEMENT.</span>
        </div>
      </header>

      <div style={aboutStyles.manifesto}>
        <div style={aboutStyles.statements}>
          <div style={aboutStyles.stmt}>
            <div style={aboutStyles.stmtNum}>01</div>
            <div>
              <p style={aboutStyles.stmtBody}>
                <span style={aboutStyles.stmtBodyEm}>세상이 미처 발견 못한 고유한 빛깔, 유행 너머의 취향</span>을 만드는 내일의 아티스트와 함께합니다.
              </p>
              <div style={aboutStyles.stmtCaption}>Mission · 우리의 시선</div>
            </div>
          </div>

          <div style={aboutStyles.stmt}>
            <div style={aboutStyles.stmtNum}>02</div>
            <div>
              <p style={aboutStyles.stmtBody}>
                SAGUO MANAGEMENT는 <span style={aboutStyles.stmtBodyEm}>2026년 2월</span>을 시작으로, 브랜드의 비전을 가장 직관적이고 감각적으로 구현할 아티스트 라인업을 제안합니다.
              </p>
              <div style={aboutStyles.stmtCaption}>Approach · 우리의 일</div>
            </div>
          </div>
        </div>

        <aside style={aboutStyles.meta}>
          <div style={aboutStyles.metaHead}>
            <span>Company</span>
            <span style={aboutStyles.metaHeadKo}>회사 정보</span>
          </div>
          {meta.map((m, i) => (
            <div key={m.label} style={{
              ...aboutStyles.metaRow,
              ...(i === meta.length - 1 ? aboutStyles.metaRowLast : {}),
            }}>
              <div>
                <div style={aboutStyles.metaLabel}>{m.label}</div>
                <div style={{ ...aboutStyles.metaLabel, color: '#9A9A9A', fontFamily: 'Pretendard', fontSize: 10, letterSpacing: '-0.03em', textTransform: 'none', marginTop: 4 }}>{m.ko}</div>
              </div>
              <div style={{
                ...aboutStyles.metaValue,
                ...(m.en ? aboutStyles.metaValueEn : {}),
                whiteSpace: 'pre-line',
              }}>{m.value}</div>
            </div>
          ))}
        </aside>
      </div>
    </section>
  );
}

window.About = About;