// Pricing / 요금 안내 — 서버 SHIPPING_PRICES / CONVENIENCE_PRICES 기준
//   functions/index.js:3039  SHIPPING_PRICES (한진 박스타입 S/A/B/C/E)
//   functions/index.js:3046  CONVENIENCE_PRICES (CU/Emart24/GS25/7Eleven × S/M/L)
//   functions/index.js:3042  SHIPPING_REMOTE_AREA_PRICE (제주 3000/울릉 5000)
// 가격 변경 시 양쪽을 함께 업데이트해야 함.

const VISIT_TIERS = [
  {
    size: "S", title: "소형",
    meta: "5kg 이하 · 세 변 합 80cm 이하",
    price: 4500,
    examples: ["의류 1-2벌", "도서 3-5권", "화장품 세트"],
  },
  {
    size: "M", title: "중형",
    meta: "10kg 이하 · 세 변 합 100cm 이하",
    price: 5500,
    examples: ["박스 1개 분량", "노트북·태블릿", "주방 소품"],
  },
  {
    size: "L", title: "대형",
    meta: "20kg 이하 · 세 변 합 160cm 이하",
    price: 8500,
    examples: ["선풍기·소형 가전", "캐리어", "쌀 10kg"],
  },
];

// 편의점 4사 × SML 정찰가
//   S: 500g / 80cm
//   M: 5kg / 80cm
//   L: 20kg / 140cm (단, 7Eleven 만 160cm)
// 세븐일레븐은 박스타입 E 1종만 지원 — S/M 미지원 (LogisHub 운영팀 확인 2026-05-23)
const CVS_TABLE = [
  { brand: "CU",         s: 3500, m: 4000, l: 4500, note: "" },
  { brand: "GS25",       s: 3500, m: 4000, l: 5000, note: "대형만 500원 더" },
  { brand: "세븐일레븐", s: null, m: null, l: 4500, note: "대형(160cm)만 접수 가능" },
  { brand: "이마트24",   s: 3500, m: 4000, l: 4500, note: "" },
];

// 한진 도서산간 추가비 (박스당, RecvFNSVerification 기반)
const REMOTE_AREA = [
  { region: "제주",       price: 3000 },
  { region: "울릉도",     price: 5000 },
];

const Pricing = ({ navigate }) => {
  return (
    <main>
      <div className="page-head">
        <div className="container-narrow">
          <h1>요금 안내</h1>
          <p>박스 크기 · 접수 방식에 따라 결정됩니다. 추가 비용은 도서산간 외 없어요.</p>
        </div>
      </div>

      <section style={{ paddingBottom: 80 }}>
        <div className="container">

          {/* 방문택배 */}
          <div className="section-head">
            <div className="section-tag">방문택배 (한진택배)</div>
            <h2 style={{ fontSize: 28 }}>기사님이 직접 픽업</h2>
            <p className="sub" style={{ fontSize: 15 }}>
              집·사무실 어디든 방문 픽업합니다. 박스당 1건으로 계산되며 추가 픽업비는 없습니다.
            </p>
          </div>

          <div className="pricing-grid">
            {VISIT_TIERS.map(t => (
              <div key={t.size} className="price-card">
                <div className="pkg-size">{t.size}</div>
                <h3>{t.title} <span style={{ color: "var(--muted)", fontWeight: 500, fontSize: 15 }}>({t.size})</span></h3>
                <div className="pkg-meta">{t.meta}</div>

                <div className="price-num">
                  <span className="currency">₩</span>
                  {t.price.toLocaleString()}
                </div>
                <div className="price-foot">박스 1개당 · VAT 포함</div>

                <div style={{
                  padding: "12px 14px", background: "var(--bg-2)", borderRadius: 10,
                  fontSize: 12, color: "var(--muted)"
                }}>
                  <div style={{ fontWeight: 600, color: "var(--ink-2)", marginBottom: 4 }}>이런 물품에</div>
                  {t.examples.join(" · ")}
                </div>
              </div>
            ))}
          </div>

          <div style={{ display: "flex", justifyContent: "center", marginTop: 24 }}>
            <button className="btn btn-outline" onClick={() => navigate('reserve-home')}>
              방문택배 예약 <Icon name="arrow-right" size={14}/>
            </button>
          </div>

          {/* 편의점택배 */}
          <div style={{ marginTop: 88 }}>
            <div className="section-head">
              <div className="section-tag">편의점택배</div>
              <h2 style={{ fontSize: 28 }}>가까운 편의점에 맡기기</h2>
              <p className="sub" style={{ fontSize: 15 }}>
                24시간 접수. 손님이 직접 매장에 박스를 가져가는 방식으로 방문택배보다 저렴합니다.
              </p>
            </div>

            <div className="price-table-wrap">
              <table className="price-table">
                <thead>
                  <tr>
                    <th>편의점</th>
                    <th>소형 (S)<div style={{fontSize:11,fontWeight:400,color:"var(--muted)",marginTop:2}}>500g / 80cm</div></th>
                    <th>중형 (M)<div style={{fontSize:11,fontWeight:400,color:"var(--muted)",marginTop:2}}>5kg / 80cm</div></th>
                    <th>대형 (L)<div style={{fontSize:11,fontWeight:400,color:"var(--muted)",marginTop:2}}>20kg / 140cm</div></th>
                    <th>비고</th>
                  </tr>
                </thead>
                <tbody>
                  {CVS_TABLE.map(c => (
                    <tr key={c.brand}>
                      <td><strong>{c.brand}</strong></td>
                      <td>{c.s == null ? <span className="muted">미지원</span> : `${c.s.toLocaleString()}원`}</td>
                      <td>{c.m == null ? <span className="muted">미지원</span> : `${c.m.toLocaleString()}원`}</td>
                      <td>{c.l == null ? <span className="muted">미지원</span> : `${c.l.toLocaleString()}원`}</td>
                      <td className="muted">{c.note || "—"}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div style={{ display: "flex", justifyContent: "center", marginTop: 24 }}>
              <button className="btn btn-outline" onClick={() => navigate('reserve-store')}>
                편의점택배 예약 <Icon name="arrow-right" size={14}/>
              </button>
            </div>
          </div>

          {/* 도서산간 추가비 */}
          <div style={{ marginTop: 88 }}>
            <div className="section-head">
              <div className="section-tag">도서산간 추가비</div>
              <h2 style={{ fontSize: 28 }}>제주·울릉도는 별도 비용</h2>
              <p className="sub" style={{ fontSize: 15 }}>
                방문택배(한진)에만 적용됩니다. 박스 1개당 아래 금액이 더해져요. 편의점택배는 정찰제로 추가비가 없습니다.
              </p>
            </div>

            <div className="price-table-wrap">
              <table className="price-table">
                <thead>
                  <tr>
                    <th>지역</th>
                    <th>박스당 추가비</th>
                  </tr>
                </thead>
                <tbody>
                  {REMOTE_AREA.map(r => (
                    <tr key={r.region}>
                      <td><strong>{r.region}</strong></td>
                      <td>+{r.price.toLocaleString()}원</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p style={{ fontSize: 13, color: "var(--muted)", marginTop: 12, textAlign: "center" }}>
              실제 적용 금액은 예약 시 자동 산정됩니다.
            </p>
          </div>

          {/* 안내 */}
          <div style={{ marginTop: 88 }}>
            <div className="section-head">
              <div className="section-tag">서비스 안내</div>
              <h2 style={{ fontSize: 28 }}>요금 외에 알아두면 좋은 점</h2>
            </div>

            <div className="extras-grid">
              <div className="extra-card">
                <div className="extra-icon"><Icon name="bell" size={18}/></div>
                <div>
                  <div className="title">실시간 알림</div>
                  <div className="sub">예약 확정 · 수거 · 배송 단계마다 푸시 알림</div>
                </div>
                <span className="fee">무료</span>
              </div>
              <div className="extra-card">
                <div className="extra-icon"><Icon name="search" size={18}/></div>
                <div>
                  <div className="title">통합 배송 조회</div>
                  <div className="sub">운송장 한 줄로 한진·편의점 모두 추적</div>
                </div>
                <span className="fee">무료</span>
              </div>
              <div className="extra-card">
                <div className="extra-icon"><Icon name="shield" size={18}/></div>
                <div>
                  <div className="title">분실·파손 보상</div>
                  <div className="sub">예약 시 입력한 물품 가액 한도 내 보상 (한진택배 기준)</div>
                </div>
                <span className="fee">기본 포함</span>
              </div>
              <div className="extra-card">
                <div className="extra-icon"><Icon name="card" size={18}/></div>
                <div>
                  <div className="title">간편 결제 / 환불</div>
                  <div className="sub">카드·간편결제 지원. 예약 취소 시 자동 환불</div>
                </div>
                <span className="fee">무료</span>
              </div>
            </div>
          </div>

          {/* CTA */}
          <div className="callout" style={{ marginTop: 56 }}>
            <div className="ic"><Icon name="sparkle" size={22}/></div>
            <div className="body">
              <h4>지금 바로 시작해보세요</h4>
              <p>예약은 5분, 결제와 픽업 안내까지 한 번에. 자세한 약관은 이용약관에서 확인하세요.</p>
            </div>
            <button className="btn btn-primary" onClick={() => navigate('reserve')}>
              택배 예약하기 <Icon name="arrow-right" size={14}/>
            </button>
          </div>
        </div>
      </section>
    </main>
  );
};

window.Pricing = Pricing;