// variants/stores.jsx — 매장 소개

function StoresPage({ onNav }) {
  const P = EDPAL;
  const [hover, setHover] = React.useState(null);

  const stores = [
    { no:'01', ko:'용인본점', en:'YONGIN', tel:'031-281-7888',
      addr:'경기도 용인시 기흥구 지삼로17번길 2-22',
      note:'민속밀면이 시작된 곳. 용인 지역 맛집으로 인정받은 집.',
      img:'assets/hero-storefront.png', tone:'warm', badge:'본점' },
    { no:'02', ko:'오산세교점', en:'OSAN SEGYO', tel:'031-377-0914',
      addr:'경기 오산시 서동로 193 가장동근생 주건축물 제1동 1층',
      note:'넓은 홀과 여유로운 주차. 직장인과 가족 단위 방문객이 조화를 이룬 매장.',
      img:'assets/store-osan-segyo.jpg', tone:'day', badge:'직영점' },
    { no:'03', ko:'강남점', en:'GANGNAM', tel:'02-3443-1888',
      addr:'서울 강남구 선릉로112길 63 1층 2층',
      note:'1·2층 복층 구조. 선릉 상권의 점심 수요를 담당합니다.',
      img:'assets/store-gangnam.jpg', tone:'dusk' },
    { no:'04', ko:'송파점', en:'SONGPA', tel:'02-3012-1838',
      addr:'서울 송파구 위례성대로22길 24 1층',
      note:'주택가와 오피스가 만나는 자리. 저녁 방문객이 많습니다.',
      img:'assets/store-songpa.jpg', tone:'warm' },
    { no:'05', ko:'분당판교점', en:'BUNDANG PANGYO', tel:'031-707-8249',
      addr:'경기 성남시 분당구 판교역로 184 1층 102-1호',
      note:'판교역 도보권. 직장인 점심 회전이 빠른 매장.',
      img:'assets/store-pangyo.jpg', tone:'day' },
    { no:'06', ko:'소래포구점', en:'INCHEON SORAE', tel:'070-4149-9600',
      addr:'인천 남동구 소래역남로 10 1층 103호, 103-1호',
      note:'소래포구 어시장 인근. 기존 샤브샤브 매장에서 업종을 변경해 문을 열었습니다.',
      img:'assets/store-sorae.jpg', tone:'day', badge:'NEW' },
  ];

  const mapUrl = (name) => `https://map.naver.com/p/search/${encodeURIComponent('민속밀면 ' + name)}`;

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

      <EdPageHero
        no="01" en="STORES" vertical="여섯 곳"
        ko={<>단골손님이<br/>점주님으로…</>}
        lead="별다른 가맹광고 없이 입소문과 맛 만으로 가맹점이 늘고 있습니다. 자주 오시던 분이 직접 가게를 열었고, 용인본점과 세교 직영점에 이어, 네 곳의 가맹점이 그렇게 문을 열었습니다."
      />

      {/* 매장 카드 그리드 */}
      <section style={{ padding:'100px 56px 120px', background:P.bg }}>
        <div style={{
          maxWidth:1400, margin:'0 auto',
          display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(360px, 1fr))', gap:1,
          background:P.line, border:`0.5px solid ${P.line}`,
        }}>
          {stores.map((s) => (
            <a key={s.no} href={mapUrl(s.ko)} target="_blank" rel="noreferrer"
              onMouseEnter={() => setHover(s.no)} onMouseLeave={() => setHover(null)}
              style={{
                display:'flex', flexDirection:'column', cursor:'pointer',
                background: hover===s.no ? P.bgDim : P.bg,
                transition:'background 260ms ease',
              }}>
              <div style={{ aspectRatio:'4/3', overflow:'hidden', background:P.bgWarm, position:'relative' }}>
                {s.img
                  ? <img src={s.img} alt={`민속밀면 ${s.ko}`} style={{
                      width:'100%', height:'100%', objectFit:'cover', display:'block',
                      transform: hover===s.no ? 'scale(1.04)' : 'scale(1)', transition:'transform 700ms cubic-bezier(.2,.7,.3,1)',
                    }} />
                  : <StorePlaceholder tone={s.tone} />}
                {s.badge ? (
                  <div style={{
                    position:'absolute', top:0, left:0, fontSize:10, letterSpacing:'0.2em',
                    color:P.bg, background:P.fg, padding:'6px 14px', fontFamily:P.gothic,
                  }}>{s.badge}</div>
                ) : null}
              </div>
              <div style={{ padding:'32px 32px 36px', display:'flex', flexDirection:'column', flex:1 }}>
                <div style={{ display:'flex', alignItems:'baseline', gap:14, marginBottom:14 }}>
                  <div style={{ fontSize:10, letterSpacing:'0.35em', color:P.fg3, fontFamily:P.inter }}>{s.no}</div>
                  <div style={{ fontSize:9, letterSpacing:'0.35em', color:P.fg3, fontFamily:P.inter }}>{s.en}</div>
                </div>
                <h2 style={{ fontFamily:P.myeongjo, fontSize:30, fontWeight:800, letterSpacing:'-0.01em', color:P.fg, margin:'0 0 14px' }}>
                  {s.ko}
                </h2>
                <div style={{ fontSize:13, lineHeight:1.9, color:P.fg2, fontFamily:P.myeongjo, marginBottom:26, textWrap:'pretty' }}>
                  {s.note}
                </div>
                <div style={{ marginTop:'auto', display:'grid', gap:0, borderTop:`0.5px solid ${P.line}` }}>
                  <div style={{ display:'grid', gridTemplateColumns:'72px 1fr', gap:16, padding:'14px 0', borderBottom:`0.5px solid ${P.line}` }}>
                    <div style={{ fontSize:9, letterSpacing:'0.25em', color:P.fg3, fontFamily:P.inter, paddingTop:4 }}>TEL</div>
                    <div style={{ fontFamily:P.myeongjo, fontSize:18, fontWeight:800, color:P.fg }}>{s.tel}</div>
                  </div>
                  <div style={{ display:'grid', gridTemplateColumns:'72px 1fr', gap:16, padding:'14px 0' }}>
                    <div style={{ fontSize:9, letterSpacing:'0.25em', color:P.fg3, fontFamily:P.inter, paddingTop:2 }}>ADDRESS</div>
                    <div style={{ fontSize:12, lineHeight:1.8, color:P.fg }}>{s.addr}</div>
                  </div>
                </div>
                <div style={{
                  marginTop:22, display:'flex', justifyContent:'space-between', alignItems:'center',
                  fontSize:11, letterSpacing:'0.15em', fontFamily:P.gothic,
                  color: hover===s.no ? P.fg : P.fg3, transition:'color 260ms ease',
                }}>
                  <span>네이버 플레이스에서 보기</span>
                  <span style={{ fontFamily:P.inter, transform: hover===s.no ? 'translateX(4px)' : 'none', transition:'transform 260ms ease' }}>→</span>
                </div>
              </div>
            </a>
          ))}
        </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 }}>02 ─ NEXT STORE</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>
          <a onClick={() => onNav && onNav('franchise')} style={{
            cursor:'pointer', fontSize:13, letterSpacing:'0.2em', color:P.bg,
            border:'0.5px solid rgba(246,241,228,0.4)', padding:'20px 40px', whiteSpace:'nowrap',
          }}>가맹문의 →</a>
        </div>
      </section>

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

Object.assign(window, { StoresPage });