// app-guide.jsx — 이용안내 · 주의사항 (무대의상 주문제작 판매)
// 마이페이지의 자주묻는질문 / 공지사항 / 이용약관에서 진입

const GUIDE_SECTIONS = [
  {
    key: 'order', tag: 'Most Important', title: '주문제작 청약철회 제한',
    lead: '주문에 따라 개별 제작되는 맞춤 상품은 「전자상거래법」상 단순 변심에 의한 청약철회(환불·교환)가 제한됩니다.',
    items: [
      '주문 전 색상·원단·치수를 확정하고 동의하신 뒤 제작이 시작됩니다.',
      '제작 착수 이후의 단순 변심 취소·환불·교환은 어렵습니다.',
      '다만 제작 하자·오배송 등 회사 귀책 사유는 무상 수선·재제작·환불로 책임집니다.',
    ],
  },
  {
    key: 'flow', tag: 'Process', title: '주문 · 제작 절차',
    steps: ['상담 · 견적', '디자인 · 원단 · 사이즈 확정', '계약금(선금) 입금', '제작 시작', '가봉(선택)', '완성 · 잔금', '배송'],
    note: '“주문 확정 = 제작 시작” 시점 이후에는 취소가 제한됩니다.',
  },
  {
    key: 'period', tag: 'Lead Time', title: '제작 기간',
    items: [
      '표준 제작 기간: 품목에 따라 약 7~14일 (단체·대량은 2~4주).',
      '성수기·대량 주문 시 기간이 연장될 수 있습니다.',
      '행사일이 임박한 경우 급행 제작비(추가요금)가 발생할 수 있습니다.',
    ],
  },
  {
    key: 'size', tag: 'Fit', title: '사이즈 · 실측 책임',
    items: [
      '고객이 제출한 실측 치수를 기준으로 제작합니다.',
      '고객 측정 오류로 인한 수선·재제작은 유상으로 진행됩니다.',
      '무대의상 특성상 활동성을 고려한 여유분을 반영합니다. 치수가 고민되면 카톡 상담을 이용하세요.',
    ],
  },
  {
    key: 'color', tag: 'Fabric', title: '색상 · 원단',
    items: [
      '모니터 환경에 따라 실제 색상과 차이가 있을 수 있어 단순 색상차는 환불 사유가 되지 않습니다.',
      '원단 수급 사정에 따라 동일·유사 원단으로 대체될 수 있습니다.',
      '추가 제작분은 염색 로트 차이로 색감이 달라질 수 있습니다.',
    ],
  },
  {
    key: 'refund', tag: 'Cancel · Refund', title: '취소 · 환불 규정',
    rows: [
      ['제작 착수 전 취소', '계약금 환불 (수수료 공제 여부 안내)'],
      ['원단 재단 후 취소', '진행률에 따라 정산 · 환불 제한'],
      ['완성품 단순 변심', '환불 · 교환 불가'],
      ['제작 하자 · 오배송', '무상 수선 · 재제작 · 환불 (회사 부담)'],
    ],
  },
  {
    key: 'as', tag: 'A/S', title: '하자 · A/S',
    items: [
      '봉제 불량, 치수 오차(허용오차 초과) 등은 무상 수선해 드립니다.',
      '수령 후 7일 이내에 검수하시고 하자를 통보해 주세요.',
      '착용·세탁 후 발견된 하자는 별도 기준에 따라 처리됩니다.',
    ],
  },
  {
    key: 'pay', tag: 'Payment', title: '결제',
    items: [
      '계약금(선금) + 잔금 구조로 진행됩니다.',
      '계좌이체 · 카드결제 · 세금계산서 · 현금영수증 발행이 가능합니다.',
      '대량·단체 주문은 견적서·계약서를 별도로 제공해 드립니다.',
    ],
  },
  {
    key: 'ship', tag: 'Shipping', title: '배송',
    items: [
      '제작 완료 후 배송됩니다. (제작기간 + 배송기간 합산 안내)',
      '도서산간 지역은 추가 배송비가 발생할 수 있습니다.',
      '행사일 기준 발송 마감일을 꼭 확인해 주세요.',
    ],
  },
  {
    key: 'care', tag: 'Care', title: '세탁 · 관리',
    items: [
      '스팽글·비즈·특수원단은 드라이클리닝 전용이며 물세탁을 피해 주세요.',
      '무대 조명·땀에 의한 변색은 제품 하자가 아닙니다.',
      '보관 시 직사광선을 피하고 통풍이 잘 되는 곳에 걸어 두세요.',
    ],
  },
];

const FAQ = [
  ['제작 기간은 얼마나 걸리나요?', '품목에 따라 보통 7~14일, 단체·대량은 2~4주가 소요됩니다. 행사일이 임박하면 급행 제작도 상담 가능합니다.'],
  ['사이즈는 어떻게 정하나요?', '상품 상세의 “실측 사이즈”에 키·몸무게·치수를 입력하시면 그에 맞춰 제작합니다. 고민되면 카톡으로 상담해 주세요.'],
  ['단순 변심으로 환불되나요?', '맞춤 제작 특성상 제작 착수 이후 단순 변심 환불·교환은 제한됩니다. 제작 하자·오배송은 무상 처리됩니다.'],
  ['색상을 바꿔 제작할 수 있나요?', '네, 대부분 원하는 색상으로 맞춤 제작이 가능합니다. 상세에서 색상을 고르고 카톡으로 문의해 주세요.'],
  ['단체로 여러 벌 맞출 수 있나요?', '가능합니다. 단체주문 견적에서 인원·색상·일정을 남기시면 카톡으로 1:1 견적을 보내드립니다.'],
];

const BIZ = {
  name: `${CONTACT.brand} · ${CONTACT.company}`,
  ceo: `대표 ${CONTACT.ceo}`,
  biz: `사업자등록번호 ${CONTACT.bizNo}`,
  sell: `통신판매업신고 ${CONTACT.sellNo}`,
  tel: CONTACT.tel,
  email: CONTACT.email,
  addr: `(${CONTACT.postal}) ${CONTACT.addr}`,
  hours: CONTACT.hours,
};

function GuideScreen({ go, params }) {
  const TABS = [['guide', '이용안내'], ['faq', '자주 묻는 질문'], ['terms', '약관·사업자정보']];
  const [tab, setTab] = React.useState(params?.tab || 'guide');
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#F4F1EA' }}>
      <div style={{ flex: '0 0 auto', background: '#FBFAF6', borderBottom: `1px solid ${T.line}` }}>
        <AppHeader title="이용안내 · 주의사항" onBack={() => go('my')} />
        <div style={{ display: 'flex', gap: 8, padding: '2px 14px 12px', overflowX: 'auto' }}>
          {TABS.map(([k, label]) => (
            <Press key={k} onClick={() => setTab(k)} style={{ flex: '0 0 auto', padding: '8px 16px', borderRadius: 20, background: tab === k ? T.soft : 'transparent', border: tab === k ? `1px solid ${T.ink}` : `1px solid ${T.line}`, color: tab === k ? T.ink : T.taupe, fontSize: 13, fontWeight: tab === k ? 500 : 300, whiteSpace: 'nowrap', fontFamily: "'Noto Serif KR', serif" }}>{label}</Press>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '18px 16px 28px', fontFamily: "'Noto Serif KR', serif" }}>
        {tab === 'guide' && <GuideBody />}
        {tab === 'faq' && <FaqBody />}
        {tab === 'terms' && <TermsBody />}
      </div>
      <NavBar active="my" onNav={go} />
    </div>
  );
}

function GuideBody() {
  return (
    <div>
      <div style={{ fontFamily: "'Jost', sans-serif", fontSize: 10.5, letterSpacing: '.22em', textTransform: 'uppercase', color: T.gold }}>Made-to-order Notice</div>
      <div style={{ fontSize: 19, fontWeight: 400, color: T.ink, marginTop: 8, lineHeight: 1.4, letterSpacing: '.01em' }}>무대의상 주문제작 안내</div>
      <div style={{ fontSize: 12.5, fontWeight: 300, color: T.sub, marginTop: 8, lineHeight: 1.7, wordBreak: 'keep-all' }}>STAR 무대의상의 모든 상품은 주문에 따라 개별 제작되는 맞춤 상품입니다. 아래 내용을 확인하신 뒤 주문해 주세요.</div>

      {GUIDE_SECTIONS.map((s, i) => (
        <div key={s.key} style={{ marginTop: 18, padding: '18px 16px', background: s.key === 'order' ? '#FBF6E9' : '#FBFAF6', border: s.key === 'order' ? `1px solid ${T.gold}` : `1px solid ${T.line}` }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 9, marginBottom: 4 }}>
            <span style={{ fontFamily: "'Jost', sans-serif", fontSize: 9.5, letterSpacing: '.16em', textTransform: 'uppercase', color: T.gold }}>{String(i + 1).padStart(2, '0')}</span>
            <span style={{ fontSize: 15.5, fontWeight: 500, color: T.ink, letterSpacing: '.01em' }}>{s.title}</span>
          </div>
          {s.lead && <div style={{ fontSize: 13, fontWeight: 400, color: T.sub, lineHeight: 1.7, margin: '8px 0 2px', wordBreak: 'keep-all' }}>{s.lead}</div>}

          {s.steps && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, margin: '12px 0 4px' }}>
              {s.steps.map((st, k) => (
                <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 300, color: T.ink }}>
                  <span style={{ fontFamily: "'Jost', sans-serif", fontSize: 10, color: T.gold }}>{String(k + 1).padStart(2, '0')}</span>{st}
                  {k < s.steps.length - 1 && <span style={{ color: T.taupe, marginLeft: 2 }}>›</span>}
                </span>
              ))}
            </div>
          )}

          {s.items && (
            <ul style={{ listStyle: 'none', margin: '10px 0 0' }}>
              {s.items.map((it, k) => (
                <li key={k} style={{ display: 'flex', gap: 9, fontSize: 12.5, fontWeight: 300, color: T.sub, lineHeight: 1.7, marginBottom: 7, wordBreak: 'keep-all' }}>
                  <span style={{ flex: '0 0 auto', width: 4, height: 4, borderRadius: '50%', background: T.gold, marginTop: 8 }} />{it}
                </li>
              ))}
            </ul>
          )}

          {s.rows && (
            <div style={{ marginTop: 12, border: `1px solid ${T.line}` }}>
              {s.rows.map((r, k) => (
                <div key={k} style={{ display: 'flex', borderTop: k ? `1px solid ${T.line}` : 'none' }}>
                  <div style={{ flex: '0 0 42%', padding: '11px 12px', fontSize: 12, fontWeight: 400, color: T.ink, background: T.bg, borderRight: `1px solid ${T.line}` }}>{r[0]}</div>
                  <div style={{ flex: 1, padding: '11px 12px', fontSize: 12, fontWeight: 300, color: T.sub, lineHeight: 1.6, wordBreak: 'keep-all' }}>{r[1]}</div>
                </div>
              ))}
            </div>
          )}

          {s.note && <div style={{ marginTop: 12, fontSize: 11.5, fontWeight: 300, color: T.taupe, lineHeight: 1.6, wordBreak: 'keep-all' }}>※ {s.note}</div>}
        </div>
      ))}

      <div style={{ marginTop: 20, padding: '16px', background: '#FBFAF6', border: `1px dashed ${T.gold}`, textAlign: 'center' }}>
        <div style={{ fontSize: 13, fontWeight: 400, color: T.ink }}>궁금한 점은 카카오톡으로 편하게 문의하세요</div>
        <div style={{ fontSize: 11.5, fontWeight: 300, color: T.taupe, marginTop: 5 }}>치수 · 색상 · 일정 · 견적 모두 1:1 상담 가능합니다</div>
      </div>
    </div>
  );
}

function FaqBody() {
  const [open, setOpen] = React.useState(0);
  return (
    <div>
      <div style={{ fontFamily: "'Jost', sans-serif", fontSize: 10.5, letterSpacing: '.22em', textTransform: 'uppercase', color: T.gold }}>FAQ</div>
      <div style={{ fontSize: 19, fontWeight: 400, color: T.ink, marginTop: 8, marginBottom: 6 }}>자주 묻는 질문</div>
      {FAQ.map((f, i) => {
        const on = open === i;
        return (
          <div key={i} style={{ borderTop: `1px solid ${T.line}` }}>
            <Press onClick={() => setOpen(on ? -1 : i)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '16px 2px' }}>
              <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 18, color: T.gold, flex: '0 0 auto' }}>Q</span>
              <span style={{ flex: 1, fontSize: 13.5, fontWeight: 400, color: T.ink, lineHeight: 1.4 }}>{f[0]}</span>
              <span style={{ fontFamily: "'Jost', sans-serif", fontSize: 15, color: T.taupe, transform: on ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>⌄</span>
            </Press>
            {on && <div style={{ padding: '0 2px 18px 28px', fontSize: 12.5, fontWeight: 300, color: T.sub, lineHeight: 1.75, wordBreak: 'keep-all' }}>{f[1]}</div>}
          </div>
        );
      })}
    </div>
  );
}

function TermsBody() {
  return (
    <div>
      <div style={{ fontFamily: "'Jost', sans-serif", fontSize: 10.5, letterSpacing: '.22em', textTransform: 'uppercase', color: T.gold }}>Terms · Business</div>
      <div style={{ fontSize: 19, fontWeight: 400, color: T.ink, marginTop: 8, marginBottom: 14 }}>약관 · 사업자정보</div>

      {[
        ['이용약관', '본 약관은 STAR 무대의상(이하 “회사”)이 제공하는 무대의상 주문제작·판매 서비스의 이용 조건을 규정합니다. 회원은 주문 시 맞춤 제작 상품의 청약철회 제한에 동의한 것으로 봅니다. 상세 약관 전문은 추후 정식 게시됩니다.'],
        ['개인정보처리방침', '회사는 주문·배송·상담을 위해 최소한의 개인정보(성함·연락처·배송지·치수)를 수집하며, 목적 달성 후 관련 법령에 따라 파기합니다. 동의 없이 제3자에게 제공하지 않습니다. 상세 방침 전문은 추후 정식 게시됩니다.'],
        ['전자상거래 환불규정', '맞춤 제작 상품은 제작 착수 이후 단순 변심 환불·교환이 제한됩니다. 제작 하자·오배송 등 회사 귀책 사유는 무상 수선·재제작·환불로 처리합니다. (이용안내 탭의 ‘취소·환불 규정’ 참고)'],
      ].map((t, i) => (
        <div key={i} style={{ marginBottom: 14, padding: '16px', background: '#FBFAF6', border: `1px solid ${T.line}` }}>
          <div style={{ fontSize: 14.5, fontWeight: 500, color: T.ink, marginBottom: 8 }}>{t[0]}</div>
          <div style={{ fontSize: 12, fontWeight: 300, color: T.sub, lineHeight: 1.75, wordBreak: 'keep-all' }}>{t[1]}</div>
        </div>
      ))}

      <div style={{ marginTop: 6, padding: '18px 16px', background: '#1A1714', color: '#E7E0D2' }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 20, letterSpacing: '.2em', textIndent: '.2em', color: '#C19A3D' }}>STAR</div>
        <div style={{ fontSize: 11, fontWeight: 300, lineHeight: 1.9, marginTop: 12, opacity: .85 }}>
          {BIZ.name} · {BIZ.ceo}<br />
          {BIZ.biz}<br />
          {BIZ.sell}<br />
          {BIZ.addr}<br />
          고객센터 {BIZ.tel} · {BIZ.email}<br />
          {BIZ.hours}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GuideScreen, GUIDE_SECTIONS, FAQ, BIZ });