// DANOVI — 전자책 페이지
const EBOOK_FULL = {
  title: ['개발자 없이', '홈페이지를 만든다고?'],
  sub: '자신의 가게·브랜드·서비스에 필요한 홈페이지를 직접 기획하고 만드는 실전 PDF',
  lead: '디자인이나 개발을 전문가에게 맡기기 어려울 때 쓰는 자료입니다. 코딩을 배우는 책이 아니라, 홈페이지를 만들 때 무엇을 먼저 정하고 어떤 순서로 쌓는지를 정리했습니다.',
  forWho: '홈페이지가 필요한데 제작비가 부담스러운 분, 외주를 맡기기 전에 구조를 직접 잡아보고 싶은 분께 맞습니다.',
  receives: [
    '홈페이지를 만들 때 먼저 정해야 하는 것',
    '업종별 구성 예시',
    '바로 쓸 수 있는 프롬프트',
    '페이지를 짜는 방법',
    '결과물을 확인하는 기준',
  ],
  afterRead: '내 홈페이지의 메뉴와 페이지 구성을 직접 확정하고, 첫 화면을 만들어 공개 링크까지 확보할 수 있습니다.',
  /* 두 가지 방식 — 설명이 아니라 표 자체로 드러나게 */
  ways: [
    ['디자인 작업', '다노비가 결과물을 만들어 드립니다. 범위와 일정을 정하고 시안을 거쳐 최종 파일까지 전달합니다.'],
    ['전자책', '직접 만들어 보시는 분께 과정과 자료를 드립니다. 결과물은 직접 만듭니다.'],
  ],
  delivery: [
    ['형식', 'PDF 파일'],
    ['분량', '83쪽 · 12 PART + 별첨 A–F'],
    ['전달', '구매 후 파일로 받습니다'],
  ],
  buySteps: [
    ['카카오톡 문의', '목차와 샘플 페이지를 먼저 보내드립니다.'],
    ['결제', '안내드린 방법으로 결제합니다.'],
    ['파일 수령', '결제 확인 후 PDF 파일을 드립니다.'],
  ],
  specs: [['83쪽', '분량'], ['12 PART', '구성'], ['프롬프트 20종', '섹션별'], ['업종 케이스 9', '입력값']],
  cover: './assets/ebook/cover.webp',
  spreads: [
    ['./assets/ebook/in-use.webp', '이 책의 사용법'],
    ['./assets/ebook/in-part04.webp', 'PART 04 MASTER PROMPT 해부'],
    ['./assets/ebook/in-industry.webp', 'PART 07 업종 케이스 9'],
    ['./assets/ebook/in-check.webp', 'PART 10 검수 체크리스트'],
  ],
  toc: [
    ['PART 1', '견적 420만원 — 홈페이지, 왜 하고, 왜 지금인가'],
    ['PART 2', '준비물은 세 가지 — 사진 한 장, 계정, 30분'],
    ['PART 3', '좋은 홈페이지의 구조 — 메뉴 다섯 개의 법칙'],
    ['PART 4', 'MASTER PROMPT 해부 — 하나로 전체를 받아내는 힘'],
    ['PART 5', '프롬프트 20종 — 섹션별·상황별 카탈로그'],
    ['PART 6', '수정 프롬프트 11종 — 결과를 내 뜻대로 다듬기'],
    ['PART 7', '업종 케이스 9 — 카페부터 1인 사업자까지'],
    ['PART 8', '러닝 예제 — 라뜰리에 네일, 사진 한 장에서 완성까지'],
    ['PART 9', '이미지 만들기 — 커버, 썸네일, 상세컷'],
    ['PART 10', '검수 체크리스트 — 내 손으로 최종 확인하기'],
    ['PART 11', '공개하고 알리기 — 링크 하나로 모으는 방법'],
    ['PART 12', '마치며 — 구매자 혜택과 앞으로의 업데이트'],
  ],
  extras: [['별첨 A', '용어 정리 21'], ['별첨 B', '한 장 요약'], ['별첨 C', '업종별 입력값 — 바로 붙여넣기'], ['별첨 D', '문구 보관함 — 상황별 한 줄 30'], ['별첨 E', '만들다 막힐 때 — 질문 10'], ['별첨 F', '이럴 땐 — 상황별 처방 16']],
};

function EbookPage() {
  const b = EBOOK_FULL;
  return (
    <main data-screen-label="Ebook" className="dn-ebp">
      <div className="dn-wrap">
        <section className="dn-ebp-hero">
          <div className="dn-ebp-left">
            <img className="dn-ebp-cover" src={b.cover} alt="《개발자 없이 홈페이지를 만든다고?》 표지" />
            <div className="dn-ebp-specs">
              {b.specs.map(([v, k]) => <div key={k}><b>{v}</b><span>{k}</span></div>)}
            </div>
          </div>
          <div className="dn-ebp-right">
            <div className="dn-eyebrow">전자책</div>
            <h1 className="dn-ebp-title">
              {b.title.map((t, i) => (
                <React.Fragment key={t}>{i > 0 && <br />}{i === 1 ? <em>{t}</em> : t}</React.Fragment>
              ))}
            </h1>
            <p className="dn-ebp-sub">{b.sub}</p>
            <p className="dn-ebp-desc">{b.lead}</p>
            <div className="dn-ebp-buy">
              <KakaoButton>카카오톡으로 구매 문의</KakaoButton>
              <span className="dn-ebp-buy-note">목차와 샘플 페이지를 먼저 보내드립니다.</span>
            </div>
          </div>
        </section>

        <section className="dn-ebp-sec">
          <h2 className="dn-sec-h">이런 분께</h2>
          <p className="dn-ebp-body">{b.forWho}</p>
        </section>

        <section className="dn-ebp-sec">
          <h2 className="dn-sec-h">책에서 다루는 것</h2>
          <ul className="dn-ebp-list">
            {b.receives.map(t => <li key={t}>{t}</li>)}
          </ul>
          <p className="dn-ebp-body dn-ebp-after">{b.afterRead}</p>
        </section>

        <section className="dn-ebp-sec">
          <h2 className="dn-sec-h">내지</h2>
          <div className="dn-ebp-spreads">
            {b.spreads.map(([src, cap]) => (
              <figure key={src}>
                <img src={src} alt={cap} loading="lazy" />
                <figcaption>{cap}</figcaption>
              </figure>
            ))}
          </div>
        </section>

        {/* 두 가지 방식 — 말로 설명하지 않고 표로만 */}
        <section className="dn-ebp-sec">
          <h2 className="dn-sec-h">두 가지 방식</h2>
          <dl className="dn-ebp-vs">
            {b.ways.map(([k, v]) => (
              <div className="dn-ebp-vs-row" key={k}>
                <dt>{k}</dt>
                <dd>{v}</dd>
              </div>
            ))}
          </dl>
        </section>

        <section className="dn-ebp-sec dn-ebp-buysec">
          <div className="dn-ebp-cols">
            <div>
              <h2 className="dn-sec-h">형식</h2>
              <dl className="dn-ebp-spec-list">
                {b.delivery.map(([k, v]) => <div key={k}><dt>{k}</dt><dd>{v}</dd></div>)}
              </dl>
            </div>
            <div>
              <h2 className="dn-sec-h">구매 방법</h2>
              <ol className="dn-abp-steps">
                {b.buySteps.map(([k, v], i) => (
                  <li key={k}>
                    <b>{String(i + 1).padStart(2, '0')}</b>
                    <span className="dn-abp-step-k">{k}</span>
                    <span className="dn-abp-step-v">{v}</span>
                  </li>
                ))}
              </ol>
              <KakaoButton className="dn-ebp-buy2">카카오톡으로 구매 문의</KakaoButton>
            </div>
          </div>
        </section>

        <section className="dn-ebp-sec dn-ebp-toc">
          <h2 className="dn-sec-h">목차</h2>
          <ol>
            {b.toc.map(([n, t]) => <li key={n}><b>{n}</b><span>{t}</span></li>)}
          </ol>
          <h2 className="dn-sec-h dn-ebp-h2">별첨</h2>
          <ol className="dn-ebp-extra">
            {b.extras.map(([n, t]) => <li key={n}><b>{n}</b><span>{t}</span></li>)}
          </ol>
        </section>
      </div>
    </main>
  );
}
Object.assign(window, { EbookPage, EBOOK_FULL });