// DANOVI — 소개 페이지
// 작업 영역 목록(WORK_AREAS)은 g1-data.jsx 에 있습니다.

const ABOUT_STEPS = [
  ['문의', '용도와 필요한 범위를 확인합니다.'],
  ['견적', '범위와 일정, 금액을 정리해 보내드립니다.'],
  ['디자인', '시안을 만들고 수정을 거쳐 방향을 맞춥니다.'],
  ['전달', '인쇄·웹·상세페이지에 바로 쓸 수 있는 최종 파일을 드립니다.'],
];

function AboutPage() {
  return (
    <main data-screen-label="About" className="dn-abp">
      <div className="dn-wrap">
        <section className="dn-abp-intro">
          <div className="dn-eyebrow">소개</div>
          <h1 className="dn-abp-h1">
            문의부터 최종 파일까지<br />대표가 직접 합니다.
          </h1>
          <p className="dn-abp-lead">
            다노비는 디자인 작업을 혼자 하는 1인 스튜디오입니다.
            모든 작업은 온라인으로 진행하고, 문의부터 기획·디자인·수정·최종 파일까지 대표가 맡습니다.
          </p>
          <p className="dn-abp-lead">
            브랜드와 제품이 어디에서 어떻게 보여야 하는지를 먼저 정하고 디자인합니다.
          </p>
        </section>

        <section className="dn-abp-sec" id="areas">
          <h2 className="dn-sec-h">작업 영역</h2>
          <dl className="dn-abp-areas">
            {WORK_AREAS.map(([k, v]) => (
              <div className="dn-abp-area" key={k}>
                <dt>{k}</dt>
                <dd>{v}</dd>
              </div>
            ))}
          </dl>
        </section>

        <section className="dn-abp-sec">
          <h2 className="dn-sec-h">진행 방식</h2>
          <ol className="dn-abp-steps">
            {ABOUT_STEPS.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>
        </section>

        {/* 문의 — 카카오톡 버튼만 */}
        <section className="dn-abp-sec dn-abp-contact">
          <KakaoButton />
        </section>
      </div>
    </main>
  );
}
Object.assign(window, { AboutPage });