// variants/company.jsx — 회사소개 (브랜드 스토리 중심)

function CompanyPage({ onNav }) {
  const P = EDPAL;

  const chapters = [
    { n:'01', label:'시작', en:'THE BEGINNING',
      t:'한 그릇에서 시작했습니다.',
      d:'부산에서 먹던 밀면 한 그릇의 기억. 시원한 육수와 쫄깃한 면, 그 단순한 맛이 왜 이렇게 오래 남을까. 2022년 용인 기흥에서 그 답을 찾는 일부터 시작했습니다. 처음에는 작은 매장 하나였습니다.',
      img:'assets/hero-storefront.png' },
    { n:'02', label:'집념', en:'THE OBSESSION',
      t:'면과 육수는 타협하지 않습니다.',
      d:'제면기를 들이고 배합을 바꾸기를 수백 번. 밀가루 비율, 반죽 숙성 시간, 삶는 초 단위까지 기록하며 맞춰갔습니다. 육수도 마찬가지였습니다. 진하면 무겁고 맑으면 심심한 그 사이, 한 모금 더 마시게 되는 지점을 찾을 때까지 멈추지 않았습니다.',
      img:'assets/craft.jpg' },
    { n:'03', label:'표준', en:'THE STANDARD',
      t:'어느 매장에서나 같은 맛.',
      d:'맛을 찾았다면 다음은 지키는 일이었습니다. 삼성웰스토리와 전용상품 계약을 맺고 면·육수·양념을 표준화해 전 매장에 공급합니다. 사람이 바뀌어도, 매장이 늘어도 그릇에 담기는 맛은 같아야 한다고 생각했습니다.',
      img:'assets/welstory.jpg' },
    { n:'04', label:'오늘', en:'TODAY',
      t:'여섯 곳, 그리고 계속.',
      d:'용인본점을 시작으로 오산세교·강남·송파·분당판교, 그리고 인천 소래포구까지. 매장 수보다 중요한 건 각 매장이 지역에서 오래 사랑받는 일이라고 믿습니다. 사계절 메뉴라인과 본사 관리 시스템으로 가맹점의 하루를 함께 지킵니다.',
      img:'assets/team-group.jpg' },
  ];

  const facts = [
    ['법인명', '주식회사 샐리스푸드 (SALLY\u2019S FOOD INC.)'],
    ['브랜드', '민속밀면 (MINSOK MILMYEON)'],
    ['대표이사', '황만영'],
    ['설립', '2022년'],
    ['사업자등록번호', '450-86-02847'],
    ['본사', '경기도 용인시 기흥구 민속촌로 30, 4층 (보라동)'],
    ['대표번호', '1899-6988'],
    ['사업분야', '한식 프랜차이즈 · 밀면 전문점 운영 및 가맹사업'],
  ];

  return (
    <div style={{ background:P.bg, color:P.fg, fontFamily:P.gothic, minHeight:'100vh' }}>
      <EdHeader onNav={onNav} active="company" />

      <EdPageHero
        no="01" en="COMPANY" vertical="맛에 대한 집념"
        ko={<>맛 하나로<br/>여기까지 왔습니다.</>}
        lead="샐리스푸드는 민속밀면을 운영하는 한식 프랜차이즈 기업입니다. 마케팅보다 맛이 먼저라는 단순한 원칙 하나로 시작했고, 지금도 그 순서를 바꾸지 않았습니다."
      />

      {/* 챕터 — 브랜드 스토리 */}
      {chapters.map((c, i) => (
        <section key={c.n} style={{
          padding:'120px 56px', borderBottom:`0.5px solid ${P.line}`,
          background: i % 2 ? P.bgDim : P.bg,
        }}>
          <div style={{
            maxWidth:1400, margin:'0 auto', display:'grid',
            gridTemplateColumns: i % 2 ? '1.05fr 1fr' : '1fr 1.05fr', gap:80, alignItems:'center',
          }}>
            <div style={{ order: i % 2 ? 2 : 1 }}>
              <div style={{ display:'flex', alignItems:'baseline', gap:16, marginBottom:24 }}>
                <div style={{ fontSize:10, letterSpacing:'0.4em', color:P.fg3, fontFamily:P.inter }}>{c.n} ─ {c.en}</div>
                <div style={{ fontFamily:P.myeongjo, fontSize:12, color:P.fg2, letterSpacing:'0.3em' }}>{c.label}</div>
              </div>
              <h2 style={{
                fontFamily:P.myeongjo, fontSize:'clamp(30px, 3.4vw, 44px)', fontWeight:800,
                lineHeight:1.4, letterSpacing:'-0.01em', color:P.fg, margin:'0 0 28px',
              }}>{c.t}</h2>
              <div style={{ fontSize:15, lineHeight:2.1, color:P.fg2, fontFamily:P.myeongjo, maxWidth:520, textWrap:'pretty' }}>
                {c.d}
              </div>
            </div>
            <div style={{ order: i % 2 ? 1 : 2, aspectRatio:'5/4', overflow:'hidden', background:P.bgWarm }}>
              <img src={c.img} alt={c.t} style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }} />
            </div>
          </div>
        </section>
      ))}

      {/* 대표 인사말 */}
      <section style={{ padding:'150px 56px', background:P.bgWarm, borderBottom:`0.5px solid ${P.line}` }}>
        <div style={{ maxWidth:1200, margin:'0 auto', display:'grid', gridTemplateColumns:'0.7fr 1fr', gap:80, alignItems:'center' }}>
          <div style={{ aspectRatio:'3/4', overflow:'hidden', background:P.bgDim }}>
            <img src="assets/ceo-portrait.jpg" alt="황만영 대표이사" style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }} />
          </div>
          <div>
            <div style={{ fontSize:10, letterSpacing:'0.4em', color:P.fg3, fontFamily:P.inter, marginBottom:28 }}>05 ─ CEO MESSAGE</div>
            <div style={{
              fontFamily:P.myeongjo, fontSize:'clamp(26px, 3vw, 38px)', fontWeight:700,
              lineHeight:1.6, color:P.fg, marginBottom:36, textWrap:'pretty',
            }}>
              “고객을 가족처럼 대접하며<br/>정직한 한 그릇을 내겠습니다.”
            </div>
            <div style={{ fontSize:14, lineHeight:2.1, color:P.fg2, fontFamily:P.myeongjo, maxWidth:520, marginBottom:40, textWrap:'pretty' }}>
              식당은 결국 사람이 먹는 일을 다루는 곳입니다. 좋은 재료를 쓰고, 매일 같은 정성으로 만들고, 값에 부끄럽지 않게 내는 것. 그 기본을 지키는 일이 가장 어렵고 가장 중요하다고 생각합니다. 민속밀면은 그 기본 위에 서 있겠습니다.
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:20, paddingTop:28, borderTop:`0.5px solid ${P.line}` }}>
              <div>
                <div style={{ fontSize:10, letterSpacing:'0.3em', color:P.fg3, fontFamily:P.inter, marginBottom:6 }}>(주)샐리스푸드 대표이사</div>
                <div style={{ fontFamily:P.myeongjo, fontSize:24, fontWeight:800, color:P.fg }}>황만영</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 기업 개요 */}
      <section style={{ padding:'140px 56px', background:P.bg, borderBottom:`0.5px solid ${P.line}` }}>
        <div style={{ maxWidth:1400, margin:'0 auto', display:'grid', gridTemplateColumns:'180px 1fr', gap:80, alignItems:'flex-start' }}>
          <div>
            <div style={{ fontSize:10, letterSpacing:'0.4em', color:P.fg3, fontFamily:P.inter, marginBottom:20 }}>06 ─ OVERVIEW</div>
            <div style={{ fontFamily:P.myeongjo, fontSize:13, color:P.fg2, writingMode:'vertical-lr', letterSpacing:'0.3em', marginTop:16 }}>기업 개요</div>
          </div>
          <div style={{ maxWidth:860, borderTop:`0.5px solid ${P.lineStrong}` }}>
            {facts.map(([k, v]) => (
              <div key={k} style={{
                display:'grid', gridTemplateColumns:'200px 1fr', gap:32,
                padding:'22px 0', borderBottom:`0.5px solid ${P.line}`,
              }}>
                <div style={{ fontSize:12, color:P.fg3, fontFamily:P.gothic, letterSpacing:'0.1em' }}>{k}</div>
                <div style={{ fontSize:15, color:P.fg, fontFamily:P.myeongjo, lineHeight:1.7 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding:'140px 56px', background:P.bgDark, color:P.bg }}>
        <div style={{ maxWidth:1400, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr auto', gap:60, alignItems:'flex-end' }}>
          <div>
            <div style={{ fontSize:10, letterSpacing:'0.4em', color:'rgba(246,241,228,0.5)', fontFamily:P.inter, marginBottom:24 }}>07 ─ JOIN US</div>
            <div style={{ fontFamily:"var(--font-jeju), 'Nanum Myeongjo', serif", fontSize:'clamp(34px, 4vw, 54px)', fontWeight:400, lineHeight:1.35, letterSpacing:'0.02em' }}>
              같은 기준으로<br/>함께 하실 분을 찾습니다.
            </div>
          </div>
          <div style={{ display:'flex', gap:16 }}>
            <a onClick={() => onNav && onNav('stores')} style={{
              cursor:'pointer', fontSize:13, letterSpacing:'0.2em', color:P.bg,
              border:'0.5px solid rgba(246,241,228,0.3)', padding:'20px 36px', whiteSpace:'nowrap',
            }}>매장 보기</a>
            <a onClick={() => onNav && onNav('franchise')} style={{
              cursor:'pointer', fontSize:13, letterSpacing:'0.2em', color:P.bgDark,
              background:P.bg, padding:'20px 40px', whiteSpace:'nowrap',
            }}>가맹문의 →</a>
          </div>
        </div>
      </section>

      <EdFooter onNav={onNav} />
    </div>
  );
}

Object.assign(window, { CompanyPage });