// franchise.jsx — 가맹문의 페이지 (민속밀면 · 일본 에디토리얼 톤)
const { useState } = React;

function FranchisePage({ onNav, tweaks = {} }) {
  const bg = '#F6F1E4';
  const bgDim = '#EDE7D6';
  const bgDark = '#1A1612';
  const fg = '#1F1B17';
  const fg2 = '#5A5148';
  const fg3 = '#8A7F72';
  const line = 'rgba(26,22,18,0.15)';
  const lineStrong = 'rgba(26,22,18,0.35)';

  const [openFaq, setOpenFaq] = useState(0);
  const [form, setForm] = useState({ name:'', phone:'', region:'', message:'', agree:false });
  const [submitted, setSubmitted] = useState(false);

  const benefits = [
    { n:'01', ko:'맛의 장인이 아니어도\n민속밀면의 맛을 낼 수 있습니다',
      d:'끊임없이 이어진 노력 끝에 민속밀면은 최고라고 할 만한 면과 소스를 만들어냈습니다. 가맹교육과 시스템을 통해 가맹점주님은 민속밀면의 다양한 메뉴의 맛을 고객님께 전달할 수 있습니다.',
      img:'assets/craft.jpg' },
    { n:'02', ko:'어느 상권에서도 창업이 가능합니다',
      d:'민속밀면은 다양한 상권에 맞춘 맞춤형 운영 지원을 제공합니다. 탄탄한 본사의 지원 시스템으로 안정적인 창업과 운영을 도와드립니다. 입지에 상관없이 성공적인 사업 확장이 가능합니다.',
      img:'assets/store-osan-segyo.jpg' },
    { n:'03', ko:'간편 매뉴얼로 최고 매출이 가능합니다',
      d:'체계적인 교육과 지원으로 누구나 쉽게 운영할 수 있습니다. 간편한 매뉴얼로 시간과 비용을 절약해 효율을 극대화합니다. 검증된 운영 방식을 통해 안정적인 매출 성장이 가능합니다.',
      img:'assets/team-group.jpg' },
  ];

  const edu = [
    { n:'01', ko:'운영교육', d:'운영 매뉴얼 · 발주 시스템\n품질 · 서비스 · 식품안전\n인사·노무 및 세무' },
    { n:'02', ko:'레시피교육', d:'메뉴 조리 실습\n주방 및 장비 관리' },
    { n:'03', ko:'홍보관리', d:'오픈 및 마감 · 메뉴 조리 실습\n고객 대응 및 제공\n매장운영 관리' },
    { n:'04', ko:'신메뉴지원', d:'매장 세팅\n오픈 홍보' },
  ];

  const steps = [
    { n:'01', title:'상담 및 신청', d:'초기 상담 후 가맹 신청서 제출' },
    { n:'02', title:'가맹 계약 체결', d:'계약 체결 및 입지 선정' },
    { n:'03', title:'교육 및 개점 준비', d:'운영 교육 · 매장 인테리어 · 식자재 준비' },
    { n:'04', title:'오픈 및 사후지원', d:'성공적인 오픈과 지속적인 운영지원' },
  ];

  const costs = [
    { label:'가맹비',              amount:'550',   note:'영업표지 및 가맹점 운영권 부여 / 운영을 위한 자료 제공' },
    { label:'교육비',              amount:'440',   note:'점포 오픈 지도' },
    { label:'계약 이행 보증금',     amount:'500',   note:'별도 계약시 개별약정 우선' },
    { label:'인테리어',            amount:'7,920', note:'' },
    { label:'간판 및 사인물',       amount:'550',   note:'' },
    { label:'의탁자',              amount:'319',   note:'' },
    { label:'POS, 프로그램 등',    amount:'220',   note:'' },
    { label:'주방 설비 및 집기',    amount:'2,200', note:'' },
    { label:'초도물품',            amount:'550',   note:'' },
  ];

  const faqs = [
    { q:'초보 창업자도 할 수 있을까요?',
      a:'점포 임대부터 점포개발 및 교육, 매장 오픈 후에도 각 전문 슈퍼바이저가 매장을 방문하여 사후관리를 해줍니다. 초보자도 체계적이고 충분한 필수 매뉴얼 교육 시스템을 통해 숙련자가 될 수 있습니다. 조리에 대한 레시피 교육 및 상세한 매뉴얼이 제공됨은 물론 성공창업을 위한 본사의 모든 노하우를 전수해 드립니다.' },
    { q:'민속밀면 프랜차이즈의 장점은 무엇인가요?',
      a:'민속밀면은 차별화된 맛과 높은 가성비로 경쟁력을 가집니다. 맛과 가격 모두 대중적으로 인기가 높아 고객 유치가 용이합니다. 밀면이라는 특수성으로 멀리서도 찾아오시기 때문에 A급 입지만 고집하지 않습니다. 저렴한 임대료를 통해 초기 비용 회수가 타 프랜차이즈보다 빠를 수 있습니다. 또한 본사의 체계적인 교육과 운영 지원을 받으므로 초기 창업의 리스크를 줄일 수 있습니다.' },
    { q:'본사에서 제공하는 지원 및 교육은 무엇이고 어떻게 이루어지나요?',
      a:'민속밀면 본사는 창업 전 교육, 매장 오픈 지원, 운영 매뉴얼 제공, 마케팅 지원, 재료공급 등을 제공합니다. 매장 운영에 필요한 지식 및 노하우를 창업자에게 전수하기 위하여 충분한 이론 교육 및 실무 교육을 진행합니다.\n\n1) 이론 교육 : 개점 전에 필요한 제반 교육\n2) 실무 교육 : 개점 전 실무 교육\n3) 운영 및 관리 교육 : 개점 후 SV 파견 교육' },
    { q:'오픈 후 가맹점 관리는 어떤 방식으로 진행되나요?',
      a:'본사의 정기적인 신메뉴 출시 및 빠른 교육과 지원을 합니다. 또한 본사는 매장의 운영 데이터를 분석하고, 성과를 평가하여 개선할 수 있는 방안을 조언하며, 부진한 가맹점 발생시에는 지역적으로 맞춤화된 광고 및 마케팅 등으로 수익률 향상에 지원을 합니다. 전문 슈퍼바이저가 정기적으로 매장을 방문하여 운영 상태를 점검 및 상담을 진행하여 가맹점이 직면할 수 있는 문제를 사전에 예방하고 지속 가능한 운영을 돕습니다.' },
  ];

  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.agree) { alert('개인정보 수집 및 이용에 동의해 주세요.'); return; }
    if (!form.name || !form.phone) { alert('성함과 연락처를 입력해 주세요.'); return; }
    setSubmitted(true);
  };

  return (
    <div style={{ background: bg, color: fg, minHeight:'100vh', fontFamily:"'Noto Sans KR', sans-serif" }}>
      {/* ============ HEADER ============ */}
      <header style={{
        position: 'sticky', top: 0, zIndex: 50, background: bg,
        borderBottom: `0.5px solid ${line}`, padding: '18px 56px',
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 32,
      }}>
        <div style={{ fontSize: 10, letterSpacing: '0.35em', color: fg3, fontFamily:'Inter, sans-serif' }}>
          EST. 2022
        </div>
        <a onClick={() => onNav && onNav('home')} style={{ cursor: 'pointer', textAlign: 'center' }}>
          <div style={{
            fontFamily: "'Nanum Myeongjo', serif", fontWeight: 800,
            fontSize: 22, letterSpacing: '0.15em', color: fg,
          }}>민속밀면</div>
          <div style={{ fontSize: 8, letterSpacing: '0.4em', color: fg3, marginTop: 2, fontFamily:'Inter, sans-serif' }}>MINSOK MILMYEON</div>
        </a>
        <nav style={{ display:'flex', justifyContent:'flex-end', gap: 28, alignItems:'center' }}>
          {[
            { k:'home',      ko:'홈' },
            { k:'franchise', ko:'가맹문의' },
            { k:'stores',    ko:'매장' },
            { k:'company',   ko:'회사소개' },
          ].map(m => (
            <a key={m.k} onClick={() => onNav && onNav(m.k)} style={{
              fontSize: 12, cursor:'pointer',
              color: m.k === 'franchise' ? fg : fg,
              fontFamily:"'Noto Sans KR', sans-serif", letterSpacing:'0.05em',
              fontWeight: m.k === 'franchise' ? 700 : 400,
              borderBottom: m.k === 'franchise' ? `1px solid ${fg}` : 'none',
              paddingBottom: 2,
            }}>
              {m.ko}
            </a>
          ))}
        </nav>
      </header>

      {/* ============ HERO ============ */}
      <section style={{
        padding:'120px 56px 100px', borderBottom:`0.5px solid ${line}`,
        position:'relative',
      }}>
        <div style={{ maxWidth: 1400, margin:'0 auto' }}>
          <div style={{ fontSize: 10, letterSpacing:'0.4em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 32 }}>
            FRANCHISE ─ 가맹문의
          </div>
          <div style={{
            display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 80, alignItems:'flex-end',
          }}>
            <div>
              <div style={{
                fontFamily:"var(--font-jeju), 'Nanum Myeongjo', serif",
                fontSize: 108, lineHeight: 1.05, letterSpacing:'-0.02em', fontWeight: 400, color: fg,
              }}>
                맛,<br/>
                <span style={{ color: fg2, fontStyle:'italic' }}>민속밀면의</span><br/>
                근본입니다.
              </div>
              <div style={{
                marginTop: 48, fontSize: 15, lineHeight: 1.9, color: fg2,
                fontFamily:"'Nanum Myeongjo', serif", maxWidth: 560,
              }}>
                민속밀면은 오로지 맛을 통해 평가받고,<br/>
                맛을 통한 창업을 지원하고 있습니다.<br/>
                지금의 민속밀면의 성공은 고객들이 평가하는 맛에 대한 결과입니다.<br/>
                창업 및 가맹점주님께 맛과 성공 사업을 위한 노하우를 전달해 드립니다.
              </div>
              <div style={{
                marginTop: 40, fontSize: 11, letterSpacing:'0.4em',
                color: fg3, fontFamily:'Inter, sans-serif',
              }}>
                FUSION · TRENDY · RESTAURANT
              </div>
            </div>

            {/* hero image — 2:3 vertical */}
            <div style={{
              position:'relative',
              aspectRatio:'2 / 3',
              overflow:'hidden',
              background:'#000',
            }}>
              <img src="assets/franchise-hero-bowl.jpg" alt="민속밀면 한 그릇"
                style={{
                  width:'100%', height:'100%', objectFit:'cover',
                  filter:'contrast(1.03)',
                }} />
              {/* vertical caption */}
              <div style={{
                position:'absolute', right: 20, top: 24,
                writingMode:'vertical-lr',
                fontFamily:"'Nanum Myeongjo', serif",
                fontSize: 12, letterSpacing:'0.5em',
                color:'rgba(255,255,255,0.85)',
              }}>
                한 그릇, 정성으로
              </div>
              {/* bottom caption */}
              <div style={{
                position:'absolute', left: 20, bottom: 20,
                fontSize: 9, letterSpacing:'0.4em',
                color:'rgba(255,255,255,0.75)',
                fontFamily:'Inter, sans-serif',
              }}>
                ─ SIGNATURE BOWL
              </div>
            </div>
          </div>

          {/* in-page nav */}
          <div style={{
            marginTop: 80, paddingTop: 32, borderTop:`0.5px solid ${line}`,
            display:'flex', gap: 40, fontSize: 12, color: fg2, fontFamily:"'Noto Sans KR', sans-serif",
          }}>
            {[
              { h:'#benefits', t:'가맹조건 및 혜택' },
              { h:'#procedure', t:'가맹절차' },
              { h:'#education', t:'교육 및 지원' },
              { h:'#interview', t:'가맹점주 인터뷰' },
              { h:'#faq', t:'창업 FAQ' },
            ].map((it, i) => (
              <a key={i} href={it.h} style={{ color: fg2, cursor:'pointer', letterSpacing:'0.05em' }}>
                <span style={{ color: fg3, fontFamily:'Inter, sans-serif', marginRight: 8 }}>0{i+1}</span>
                {it.t}
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ============ BENEFITS ============ */}
      <section id="benefits" style={{ padding:'140px 56px', background: bgDim, borderBottom:`0.5px solid ${line}` }}>
        <div style={{ maxWidth: 1400, margin:'0 auto' }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr auto', alignItems:'flex-end', marginBottom: 80, paddingBottom: 32, borderBottom:`0.5px solid ${lineStrong}` }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing:'0.4em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 16 }}>01 ─ BENEFITS</div>
              <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 56, fontWeight: 400, letterSpacing:'-0.01em', lineHeight: 1.1, color: fg }}>
                가맹조건 및 혜택
              </div>
              <div style={{ marginTop: 20, fontSize: 14, color: fg2, fontFamily:"'Nanum Myeongjo', serif", letterSpacing:'0.02em' }}>
                창업 및 가맹 희망하시는 분께 혜택을 드리고 있습니다.
              </div>
            </div>
            <div style={{ fontSize: 12, color: fg3, letterSpacing:'0.1em', fontFamily:'Inter, sans-serif' }}>
              THREE PILLARS
            </div>
          </div>

          {benefits.map((b, i) => (
            <div key={i} style={{
              display:'grid', gridTemplateColumns: i % 2 === 0 ? '1fr 1.4fr' : '1.4fr 1fr',
              gap: 80, alignItems:'center', padding:'80px 0',
              borderBottom: i < benefits.length - 1 ? `0.5px solid ${line}` : 'none',
            }}>
              <div style={{ order: i % 2 === 0 ? 1 : 2 }}>
                <div style={{ fontSize: 11, letterSpacing:'0.35em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 24 }}>{b.n}</div>
                <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 32, fontWeight: 700, lineHeight: 1.4, color: fg, letterSpacing:'-0.005em', marginBottom: 24, whiteSpace:'pre-line' }}>
                  {b.ko}
                </div>
                <div style={{ fontSize: 14, lineHeight: 1.9, color: fg2, fontFamily:"'Nanum Myeongjo', serif", maxWidth: 520 }}>
                  {b.d}
                </div>
              </div>
              <div style={{ order: i % 2 === 0 ? 2 : 1, aspectRatio:'4 / 3', overflow:'hidden', background:'#000' }}>
                <img src={b.img} alt="" style={{ width:'100%', height:'100%', objectFit:'cover', filter:'grayscale(0.15) contrast(1.02)' }} />
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ============ EDUCATION & SUPPORT ============ */}
      <section id="education" style={{ padding:'140px 56px', borderBottom:`0.5px solid ${line}` }}>
        <div style={{ maxWidth: 1400, margin:'0 auto' }}>
          <div style={{ marginBottom: 80, paddingBottom: 32, borderBottom:`0.5px solid ${lineStrong}` }}>
            <div style={{ fontSize: 10, letterSpacing:'0.4em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 16 }}>02 ─ EDUCATION & SUPPORT</div>
            <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 56, fontWeight: 400, letterSpacing:'-0.01em', lineHeight: 1.1, color: fg }}>
              교육 및 지원
            </div>
            <div style={{ marginTop: 20, fontSize: 14, color: fg2, fontFamily:"'Nanum Myeongjo', serif" }}>
              균일한 퀄리티, 동일한 맛 — 민속밀면 본사 전문 관리자가 처음부터 끝까지 책임집니다.
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0 }}>
            {edu.map((e, i) => (
              <div key={i} style={{
                padding: '48px 32px',
                borderLeft: i > 0 ? `0.5px solid ${line}` : 'none',
                minHeight: 280,
              }}>
                <div style={{ fontSize: 10, letterSpacing:'0.35em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 20 }}>{e.n}</div>
                <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 24, fontWeight: 700, color: fg, marginBottom: 20, letterSpacing:'-0.005em' }}>
                  {e.ko}
                </div>
                <div style={{ fontSize: 13, lineHeight: 1.9, color: fg2, fontFamily:"'Nanum Myeongjo', serif", whiteSpace:'pre-line' }}>
                  {e.d}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ PROCEDURE ============ */}
      <section id="procedure" style={{ padding:'140px 56px', background: bgDark, color:'#F3F1EC', borderBottom:`0.5px solid rgba(255,255,255,0.1)` }}>
        <div style={{ maxWidth: 1400, margin:'0 auto' }}>
          <div style={{ marginBottom: 80, paddingBottom: 32, borderBottom:`0.5px solid rgba(255,255,255,0.2)` }}>
            <div style={{ fontSize: 10, letterSpacing:'0.4em', color:'rgba(255,255,255,0.5)', fontFamily:'Inter, sans-serif', marginBottom: 16 }}>03 ─ PROCEDURE</div>
            <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 56, fontWeight: 400, letterSpacing:'-0.01em', lineHeight: 1.1, color:'#F3F1EC' }}>
              가맹절차
            </div>
            <div style={{ marginTop: 20, fontSize: 14, color:'rgba(255,255,255,0.7)', fontFamily:"'Nanum Myeongjo', serif" }}>
              개설 상담부터 사후관리까지, 창업절차 각 단계마다 밀착 지도 및 매뉴얼 제공으로 초기 창업의 심리적 부담을 해소해 드립니다.
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0, position:'relative' }}>
            {/* dotted connector line */}
            <div style={{
              position:'absolute', top: 48, left: '12.5%', right: '12.5%',
              borderTop:'1px dashed rgba(255,255,255,0.25)', zIndex: 0,
            }} />
            {steps.map((s, i) => (
              <div key={i} style={{ textAlign:'center', position:'relative', zIndex: 1, padding:'0 16px' }}>
                <div style={{
                  width: 96, height: 96, borderRadius:'50%',
                  border:'0.5px solid rgba(255,255,255,0.35)',
                  background: bgDark, margin:'0 auto 32px',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:"'Nanum Myeongjo', serif", fontSize: 28, color:'#F3F1EC',
                  letterSpacing:'0.05em',
                }}>
                  {s.n}
                </div>
                <div style={{
                  fontFamily:"'Nanum Myeongjo', serif", fontSize: 22, fontWeight: 700,
                  color:'#F3F1EC', marginBottom: 16, letterSpacing:'-0.005em',
                }}>
                  {s.title}
                </div>
                <div style={{ fontSize: 13, lineHeight: 1.9, color:'rgba(255,255,255,0.7)', fontFamily:"'Nanum Myeongjo', serif" }}>
                  {s.d}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ COSTS ============ */}
      <section id="costs" style={{ padding:'140px 56px', borderBottom:`0.5px solid ${line}` }}>
        <div style={{ maxWidth: 1200, margin:'0 auto' }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr auto', alignItems:'flex-end', marginBottom: 60, paddingBottom: 32, borderBottom:`0.5px solid ${lineStrong}` }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing:'0.4em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 16 }}>04 ─ INVESTMENT</div>
              <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 56, fontWeight: 400, letterSpacing:'-0.01em', lineHeight: 1.1, color: fg }}>
                가맹비용
              </div>
              <div style={{ marginTop: 20, fontSize: 14, color: fg2, fontFamily:"'Nanum Myeongjo', serif" }}>
                40평 기준 · 단위 만원 · VAT 포함
              </div>
            </div>
            <div style={{ fontSize: 12, color: fg3, letterSpacing:'0.1em', fontFamily:'Inter, sans-serif' }}>
              40 PYEONG / STANDARD
            </div>
          </div>

          <table style={{
            width:'100%', borderCollapse:'collapse',
            fontFamily:"'Noto Sans KR', sans-serif",
          }}>
            <thead>
              <tr style={{ borderBottom:`1px solid ${lineStrong}` }}>
                <th style={{ textAlign:'left', padding:'16px 12px', fontSize: 11, letterSpacing:'0.2em', color: fg3, fontWeight: 400, fontFamily:'Inter, sans-serif', width:'28%' }}>구분</th>
                <th style={{ textAlign:'right', padding:'16px 12px', fontSize: 11, letterSpacing:'0.2em', color: fg3, fontWeight: 400, fontFamily:'Inter, sans-serif', width:'18%' }}>금액 (만원)</th>
                <th style={{ textAlign:'left', padding:'16px 12px', fontSize: 11, letterSpacing:'0.2em', color: fg3, fontWeight: 400, fontFamily:'Inter, sans-serif' }}>비고</th>
              </tr>
            </thead>
            <tbody>
              {costs.map((c, i) => (
                <tr key={i} style={{ borderBottom:`0.5px solid ${line}` }}>
                  <td style={{ padding:'20px 12px', fontSize: 14, color: fg, fontFamily:"'Nanum Myeongjo', serif" }}>{c.label}</td>
                  <td style={{ padding:'20px 12px', fontSize: 16, color: fg, fontFamily:"'Nanum Myeongjo', serif", textAlign:'right', fontWeight: 600, letterSpacing:'0.02em' }}>{c.amount}</td>
                  <td style={{ padding:'20px 12px', fontSize: 12, color: fg2, fontFamily:"'Noto Sans KR', sans-serif", lineHeight: 1.6 }}>{c.note || '—'}</td>
                </tr>
              ))}
              <tr style={{ borderTop:`1px solid ${lineStrong}`, background: bgDim }}>
                <td style={{ padding:'28px 12px', fontSize: 15, color: fg, fontFamily:"'Nanum Myeongjo', serif", fontWeight: 700, letterSpacing:'0.05em' }}>합계</td>
                <td style={{ padding:'28px 12px', fontSize: 28, color: fg, fontFamily:"'Nanum Myeongjo', serif", textAlign:'right', fontWeight: 800, letterSpacing:'-0.01em' }}>13,249</td>
                <td style={{ padding:'28px 12px', fontSize: 12, color: fg2, fontFamily:"'Noto Sans KR', sans-serif" }}>만원 (VAT 포함)</td>
              </tr>
            </tbody>
          </table>

          <div style={{ marginTop: 24, fontSize: 11, color: fg3, fontFamily:"'Noto Sans KR', sans-serif", letterSpacing:'0.02em' }}>
            * 40평 기준이며, 공사 환경에 따라 창업비용은 달라질 수 있습니다.
          </div>
        </div>
      </section>

      {/* ============ INTERVIEW ============ */}
      <section id="interview" style={{ padding:'140px 56px', background: bgDim, borderBottom:`0.5px solid ${line}` }}>
        <div style={{ maxWidth: 1400, margin:'0 auto' }}>
          <div style={{ marginBottom: 80, paddingBottom: 32, borderBottom:`0.5px solid ${lineStrong}` }}>
            <div style={{ fontSize: 10, letterSpacing:'0.4em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 16 }}>05 ─ INTERVIEW</div>
            <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 56, fontWeight: 400, letterSpacing:'-0.01em', lineHeight: 1.1, color: fg }}>
              현 가맹점주 인터뷰
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 80, alignItems:'flex-start' }}>
            <div style={{ position:'sticky', top: 100 }}>
              <div style={{ aspectRatio:'3 / 4', overflow:'hidden', background:'#000', marginBottom: 20, position:'relative' }}>
                <img src="assets/interview-owner-1.jpg" alt="민속밀면 오산세교점 점주" style={{ width:'100%', height:'100%', objectFit:'cover' }} />
                <div style={{
                  position:'absolute', left: 16, bottom: 12,
                  fontSize: 9, letterSpacing:'0.3em',
                  color:'rgba(255,255,255,0.75)',
                  fontFamily:'Inter, sans-serif',
                }}>
                  ─ OWNER · OSAN
                </div>
              </div>
              <div style={{ fontSize: 10, letterSpacing:'0.35em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 8 }}>STORE ─ 매장</div>
              <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 24, fontWeight: 700, color: fg, marginBottom: 4 }}>
                민속밀면 오산세교점
              </div>
              <div style={{ fontSize: 12, color: fg3, fontFamily:"'Noto Sans KR', sans-serif", letterSpacing:'0.05em', marginBottom: 20 }}>
                경기 오산시 · 2023년 개점
              </div>
              <div style={{
                fontSize: 10, color: fg3,
                fontFamily:"'Noto Sans KR', sans-serif",
                letterSpacing:'0.05em', lineHeight: 1.6,
                paddingTop: 16, borderTop:`0.5px solid ${line}`,
              }}>
                ※ 이미지는 연출 사진입니다.
              </div>
            </div>

            <div style={{ display:'flex', flexDirection:'column', gap: 64 }}>
              <div>
                <div style={{ fontSize: 11, letterSpacing:'0.3em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 12 }}>Q.01</div>
                <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 26, fontWeight: 700, color: fg, marginBottom: 32, letterSpacing:'-0.005em', lineHeight: 1.4 }}>
                  수많은 프랜차이즈 중에<br/>왜 민속밀면을 선택하셨나요?
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'140px 1fr', gap: 32, paddingBottom: 32, borderBottom:`0.5px solid ${line}` }}>
                  <div style={{ fontSize: 12, color: fg3, fontFamily:'Inter, sans-serif', letterSpacing:'0.2em' }}>시장 경쟁력</div>
                  <div style={{ fontSize: 14, lineHeight: 1.9, color: fg2, fontFamily:"'Nanum Myeongjo', serif" }}>
                    "민속밀면은 차별화된 메뉴와 독특한 맛으로 지역 시장에서 강력한 경쟁력을 가지고 있습니다. 특히 밀면과 같은 특화된 메뉴는 많은 고객들에게 사랑받고 있어 성공 가능성이 높다고 판단했습니다."
                  </div>
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'140px 1fr', gap: 32, paddingTop: 32 }}>
                  <div style={{ fontSize: 12, color: fg3, fontFamily:'Inter, sans-serif', letterSpacing:'0.2em' }}>본사 지원</div>
                  <div style={{ fontSize: 14, lineHeight: 1.9, color: fg2, fontFamily:"'Nanum Myeongjo', serif" }}>
                    "본사의 체계적인 지원과 운영 시스템이 잘 갖춰져 있어 안정적으로 사업을 시작하고 성장시킬 수 있을 것이라 생각했습니다."
                  </div>
                </div>
              </div>

              <div>
                <div style={{ fontSize: 11, letterSpacing:'0.3em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 12 }}>Q.02</div>
                <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 26, fontWeight: 700, color: fg, marginBottom: 32, letterSpacing:'-0.005em', lineHeight: 1.4 }}>
                  빠르게 성공하신 비결은<br/>무엇이라고 생각하시나요?
                </div>
                {[
                  { k:'시장 조사', v:'"사업을 시작하기 전에 지역 시장과 고객의 취향을 철저히 분석했습니다. 고객의 니즈에 맞춘 맞춤형 마케팅 전략이 성공의 핵심이었습니다."' },
                  { k:'품질 관리', v:'"민속밀면의 브랜드 가치는 음식의 품질에 크게 의존합니다. 고품질 재료를 사용하고, 일관된 맛을 유지하기 위해 세심한 품질 관리를 했습니다."' },
                  { k:'효율적 운영', v:'"본사에서 제공하는 시스템과 가이드를 충실히 따르며 운영의 효율성을 극대화했습니다. 이를 통해 운영상의 문제를 최소화하고 빠르게 안정적인 성과를 얻을 수 있었습니다."' },
                  { k:'고객 서비스', v:'"우수한 고객 서비스와 친절한 대응이 고객 충성도를 높이는 데 큰 역할을 했습니다. 고객의 피드백을 적극적으로 반영하여 서비스 품질을 지속적으로 개선했습니다."' },
                ].map((a, i) => (
                  <div key={i} style={{ display:'grid', gridTemplateColumns:'140px 1fr', gap: 32, padding:'28px 0', borderBottom: i < 3 ? `0.5px solid ${line}` : 'none' }}>
                    <div style={{ fontSize: 12, color: fg3, fontFamily:'Inter, sans-serif', letterSpacing:'0.2em' }}>{a.k}</div>
                    <div style={{ fontSize: 14, lineHeight: 1.9, color: fg2, fontFamily:"'Nanum Myeongjo', serif" }}>{a.v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ FAQ ============ */}
      <section id="faq" style={{ padding:'140px 56px', borderBottom:`0.5px solid ${line}` }}>
        <div style={{ maxWidth: 1000, margin:'0 auto' }}>
          <div style={{ marginBottom: 80, paddingBottom: 32, borderBottom:`0.5px solid ${lineStrong}` }}>
            <div style={{ fontSize: 10, letterSpacing:'0.4em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 16 }}>06 ─ FAQ</div>
            <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 56, fontWeight: 400, letterSpacing:'-0.01em', lineHeight: 1.1, color: fg }}>
              창업 FAQ
            </div>
          </div>

          <div>
            {faqs.map((f, i) => {
              const open = openFaq === i;
              return (
                <div key={i} style={{ borderBottom:`0.5px solid ${line}` }}>
                  <div
                    onClick={() => setOpenFaq(open ? -1 : i)}
                    style={{
                      padding:'32px 0', cursor:'pointer',
                      display:'grid', gridTemplateColumns:'auto 1fr auto', gap: 32, alignItems:'center',
                    }}>
                    <div style={{ fontSize: 11, letterSpacing:'0.3em', color: fg3, fontFamily:'Inter, sans-serif', minWidth: 40 }}>Q.0{i+1}</div>
                    <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 20, fontWeight: 700, color: fg, letterSpacing:'-0.005em' }}>
                      {f.q}
                    </div>
                    <div style={{
                      fontFamily:'Inter, sans-serif', fontSize: 20, color: fg3,
                      transform: open ? 'rotate(45deg)' : 'rotate(0deg)', transition:'transform 0.25s ease',
                    }}>
                      +
                    </div>
                  </div>
                  <div style={{
                    maxHeight: open ? 800 : 0, overflow:'hidden',
                    transition:'max-height 0.4s ease, padding 0.3s ease',
                    padding: open ? '0 0 32px 72px' : '0 0 0 72px',
                  }}>
                    <div style={{ fontSize: 14, lineHeight: 2.0, color: fg2, fontFamily:"'Nanum Myeongjo', serif", whiteSpace:'pre-line', maxWidth: 760 }}>
                      {f.a}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ============ CONTACT FORM ============ */}
      <section id="contact" style={{ padding:'140px 56px', background: bgDark, color:'#F3F1EC' }}>
        <div style={{ maxWidth: 1200, margin:'0 auto' }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.2fr', gap: 100, alignItems:'flex-start' }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing:'0.4em', color:'rgba(255,255,255,0.5)', fontFamily:'Inter, sans-serif', marginBottom: 24 }}>
                07 ─ CONTACT
              </div>
              <div style={{
                fontFamily:"var(--font-jeju), 'Nanum Myeongjo', serif",
                fontSize: 64, lineHeight: 1.1, fontWeight: 400, letterSpacing:'-0.01em', color:'#F3F1EC',
              }}>
                빠른<br/>
                <span style={{ color:'rgba(255,255,255,0.55)', fontStyle:'italic' }}>민속밀면</span><br/>
                가맹문의.
              </div>

              <div style={{ marginTop: 56, paddingTop: 32, borderTop:'0.5px solid rgba(255,255,255,0.2)' }}>
                <div style={{ fontSize: 10, letterSpacing:'0.4em', color:'rgba(255,255,255,0.5)', fontFamily:'Inter, sans-serif', marginBottom: 12 }}>
                  CALL ─ 전화문의
                </div>
                <div style={{
                  fontFamily:"'Nanum Myeongjo', serif", fontSize: 44, fontWeight: 800,
                  letterSpacing:'-0.01em', color:'#F3F1EC',
                }}>1899-6988</div>
                <div style={{ marginTop: 12, fontSize: 13, color:'rgba(255,255,255,0.65)', fontFamily:"'Noto Sans KR', sans-serif" }}>
                  평일 09:00–18:00 · 점심시간 12:00–13:00
                </div>
              </div>
            </div>

            {/* form */}
            <form onSubmit={onSubmit} style={{ display:'flex', flexDirection:'column', gap: 24 }}>
              {submitted ? (
                <div style={{
                  padding:'80px 40px', border:'0.5px solid rgba(255,255,255,0.25)',
                  textAlign:'center',
                }}>
                  <div style={{ fontSize: 10, letterSpacing:'0.4em', color:'rgba(255,255,255,0.5)', fontFamily:'Inter, sans-serif', marginBottom: 20 }}>
                    THANK YOU
                  </div>
                  <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 32, fontWeight: 700, color:'#F3F1EC', marginBottom: 20, lineHeight: 1.4 }}>
                    문의 주셔서<br/>감사합니다.
                  </div>
                  <div style={{ fontSize: 14, lineHeight: 1.9, color:'rgba(255,255,255,0.7)', fontFamily:"'Nanum Myeongjo', serif" }}>
                    담당자가 빠른 시일 내에 연락 드리겠습니다.<br/>급하신 경우 1899-6988로 전화 주세요.
                  </div>
                </div>
              ) : (
                <>
                  {[
                    { k:'name', label:'성함', en:'NAME', ph:'홍길동' },
                    { k:'phone', label:'연락처', en:'PHONE', ph:'010-0000-0000' },
                    { k:'region', label:'희망 지역', en:'REGION', ph:'예: 경기 용인시 기흥구' },
                  ].map(f => (
                    <div key={f.k}>
                      <label style={{
                        display:'block', fontSize: 10, letterSpacing:'0.35em',
                        color:'rgba(255,255,255,0.55)', fontFamily:'Inter, sans-serif', marginBottom: 10,
                      }}>
                        {f.en} ─ {f.label}
                      </label>
                      <input
                        type="text"
                        placeholder={f.ph}
                        value={form[f.k]}
                        onChange={(e) => setForm({ ...form, [f.k]: e.target.value })}
                        style={{
                          width:'100%', padding:'14px 0',
                          background:'transparent', border:'none',
                          borderBottom:'0.5px solid rgba(255,255,255,0.3)',
                          color:'#F3F1EC', fontSize: 16,
                          fontFamily:"'Noto Sans KR', sans-serif",
                          outline:'none',
                        }}
                      />
                    </div>
                  ))}

                  <div>
                    <label style={{
                      display:'block', fontSize: 10, letterSpacing:'0.35em',
                      color:'rgba(255,255,255,0.55)', fontFamily:'Inter, sans-serif', marginBottom: 10,
                    }}>
                      MESSAGE ─ 문의내용
                    </label>
                    <textarea
                      rows={4}
                      placeholder="궁금하신 점을 적어주세요."
                      value={form.message}
                      onChange={(e) => setForm({ ...form, message: e.target.value })}
                      style={{
                        width:'100%', padding:'14px 0',
                        background:'transparent', border:'none',
                        borderBottom:'0.5px solid rgba(255,255,255,0.3)',
                        color:'#F3F1EC', fontSize: 16,
                        fontFamily:"'Noto Sans KR', sans-serif",
                        outline:'none', resize:'vertical',
                      }}
                    />
                  </div>

                  <label style={{
                    display:'flex', alignItems:'center', gap: 12,
                    fontSize: 12, color:'rgba(255,255,255,0.7)',
                    fontFamily:"'Noto Sans KR', sans-serif", marginTop: 8, cursor:'pointer',
                  }}>
                    <input
                      type="checkbox"
                      checked={form.agree}
                      onChange={(e) => setForm({ ...form, agree: e.target.checked })}
                      style={{ width: 16, height: 16, accentColor:'#F3F1EC' }}
                    />
                    개인정보 수집 및 이용에 동의합니다
                    <span style={{ fontSize: 11, color:'rgba(255,255,255,0.45)', textDecoration:'underline', marginLeft: 4 }}>(약관보기)</span>
                  </label>

                  <button type="submit" style={{
                    marginTop: 24, padding:'22px 40px',
                    background:'#F3F1EC', color: bgDark,
                    border:'none', cursor:'pointer',
                    fontSize: 12, letterSpacing:'0.3em',
                    fontFamily:'Inter, sans-serif', fontWeight: 600,
                    alignSelf:'flex-start',
                  }}>
                    SUBMIT ─ 상담신청하기 →
                  </button>
                </>
              )}
            </form>
          </div>
        </div>
      </section>

      {/* ============ FOOTER ============ */}
      <footer style={{ padding:'60px 56px 40px', background: bg, color: fg2, borderTop:`0.5px solid ${line}` }}>
        <div style={{ maxWidth: 1400, margin:'0 auto', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap: 24 }}>
          <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 18, fontWeight: 800, color: fg, letterSpacing:'0.1em' }}>
            민속밀면
          </div>
          <div style={{ fontSize: 11, color: fg3, fontFamily:'Inter, sans-serif', letterSpacing:'0.1em' }}>
            (주)샐리스푸드 · 사업자등록번호 450-86-02847 · 1899-6988
          </div>
          <div style={{ fontSize: 10, color: fg3, fontFamily:'Inter, sans-serif', letterSpacing:'0.15em' }}>
            © 2026 SALLY'S FOOD · ALL RIGHTS RESERVED
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { FranchisePage });