// shared/editorial.jsx — 일본 F&B 에디토리얼 공통 셸 (헤더/푸터/팔레트)

const EDPAL = {
  bg:'#F6F1E4', bgDim:'#EDE7D6', bgWarm:'#E4DCC6', bgDark:'#1A1612',
  fg:'#1F1B17', fg2:'#5A5148', fg3:'#8F8577',
  line:'rgba(31,27,23,0.14)', lineStrong:'rgba(31,27,23,0.3)',
  myeongjo:"'Nanum Myeongjo', serif", gothic:"'Noto Sans KR', sans-serif", inter:"Inter, sans-serif",
};

function EdHeader({ onNav, active }) {
  const P = EDPAL;
  const nav = [
    { k:'home', ko:'홈' }, { k:'franchise', ko:'가맹문의' },
    { k:'stores', ko:'매장' }, { k:'company', ko:'회사소개' },
  ];
  return (
    <header style={{
      padding:'28px 56px', display:'grid', gridTemplateColumns:'1fr auto 1fr',
      alignItems:'center', gap:40, borderBottom:`0.5px solid ${P.line}`,
      position:'sticky', top:0, zIndex:100,
      background:'rgba(246,241,228,0.94)', backdropFilter:'blur(20px)',
    }}>
      <div style={{ fontSize:10, letterSpacing:'0.35em', color:P.fg3, fontFamily:P.inter }}>EST. 2022</div>
      <a onClick={() => onNav && onNav('home')} style={{ cursor:'pointer', textAlign:'center' }}>
        <div style={{ fontFamily:P.myeongjo, fontWeight:800, fontSize:22, letterSpacing:'0.15em', color:P.fg }}>민속밀면</div>
        <div style={{ fontSize:8, letterSpacing:'0.4em', color:P.fg3, marginTop:2, fontFamily:P.inter }}>MINSOK MILMYEON</div>
      </a>
      <nav style={{ display:'flex', justifyContent:'flex-end', gap:28, alignItems:'center' }}>
        {nav.map(m => (
          <a key={m.k} onClick={() => onNav && onNav(m.k)} style={{
            fontSize:12, cursor:'pointer', color:P.fg, fontFamily:P.gothic, letterSpacing:'0.05em',
            paddingBottom:3, borderBottom: active===m.k ? `1px solid ${P.fg}` : '1px solid transparent',
          }}>{m.ko}</a>
        ))}
      </nav>
    </header>
  );
}

function EdFooter({ onNav }) {
  const P = EDPAL;
  return (
    <footer style={{ padding:'80px 56px 40px', background:P.bgDim, color:P.fg2, borderTop:`0.5px solid ${P.line}` }}>
      <div style={{ maxWidth:1400, margin:'0 auto' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap:60, marginBottom:56 }}>
          <div>
            <div style={{ fontFamily:P.myeongjo, fontWeight:800, fontSize:22, color:P.fg, letterSpacing:'0.1em', marginBottom:8 }}>민속밀면</div>
            <div style={{ fontSize:9, letterSpacing:'0.35em', color:P.fg3, fontFamily:P.inter }}>SALLY'S FOOD INC.</div>
            <div style={{ marginTop:24, fontSize:13, lineHeight:1.9, color:P.fg2, fontFamily:P.myeongjo }}>
              전통의 맛을 오롯이 살려<br/>현대적으로 재해석한 밀면.
            </div>
          </div>
          <div>
            <div style={{ fontSize:9, letterSpacing:'0.35em', color:P.fg3, fontFamily:P.inter, marginBottom:14 }}>CONTACT ─ 연락처</div>
            <div style={{ fontFamily:P.myeongjo, fontSize:22, fontWeight:800, color:P.fg, marginBottom:6 }}>1899-6988</div>
            <div style={{ fontSize:11, color:P.fg3, fontFamily:P.gothic }}>가맹문의 · 평일 09:00-18:00</div>
          </div>
          <div>
            <div style={{ fontSize:9, letterSpacing:'0.35em', color:P.fg3, fontFamily:P.inter, marginBottom:14 }}>ADDRESS ─ 오시는 길</div>
            <div style={{ fontSize:13, lineHeight:1.8, fontFamily:P.gothic, color:P.fg }}>
              경기도 용인시 기흥구<br/>민속촌로 30, 4층 (보라동)
            </div>
          </div>
        </div>
        <div style={{
          paddingTop:24, borderTop:`0.5px solid ${P.line}`, display:'flex', justifyContent:'space-between',
          fontSize:10, color:P.fg3, letterSpacing:'0.1em', fontFamily:P.inter,
        }}>
          <div>사업자등록번호 450-86-02847 · (주)샐리스푸드 · 대표이사 황만영</div>
          <div>© 2026 SALLY'S FOOD · 이천이십육년</div>
        </div>
      </div>
    </footer>
  );
}

// 페이지 상단 공통 히어로 (세로쓰기 라벨 + 대형 제목)
function EdPageHero({ no, en, ko, lead, vertical }) {
  const P = EDPAL;
  return (
    <section style={{ borderBottom:`0.5px solid ${P.line}`, padding:'120px 56px 100px' }}>
      <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 }}>{no} ─ {en}</div>
          {vertical ? (
            <div style={{ fontFamily:P.myeongjo, fontSize:13, color:P.fg2, writingMode:'vertical-lr', letterSpacing:'0.3em', marginTop:16 }}>{vertical}</div>
          ) : null}
        </div>
        <div>
          <h1 style={{
            fontFamily:"var(--font-jeju), 'Nanum Myeongjo', serif", fontSize:'clamp(40px, 5vw, 68px)', fontWeight:400,
            lineHeight:1.3, letterSpacing:'0.02em', color:P.fg, margin:0,
          }}>{ko}</h1>
          {lead ? (
            <div style={{ marginTop:32, fontSize:15, lineHeight:2, color:P.fg2, fontFamily:P.myeongjo, maxWidth:620, textWrap:'pretty' }}>{lead}</div>
          ) : null}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { EDPAL, EdHeader, EdFooter, EdPageHero });