/* ============================================================================
 * 서명전에 — iOS Onboarding (3 step)
 * ========================================================================== */

function Onboarding({ onDone }) {
  const [step, setStep] = useState(0);
  const steps = [
    {
      title: "전세·월세 계약서를\n서명 전에 확인해 보세요",
      body:
        "사진 한 장이면 AI가 조항을 읽고, 갱신청구권·보증보험·위약금처럼 중요한 부분에서 불리한 내용을 찾아 알려드려요.",
      art: <OnbArt1 />,
    },
    {
      title: "전세사기 16개 신호를\n자동으로 살펴드려요",
      body:
        "보증보험 가입 제한, 연대보증 강요, 확정일자 제한처럼 정부·법원이 경고한 위험 신호를 체크리스트로 보여드려요.",
      art: <OnbArt2 />,
    },
    {
      title: "계약서 원본은\n기기에서만 처리돼요",
      body:
        "계약서 원문은 분석이 끝나면 바로 지워지고 서버에는 남기지 않아요. 첫 분석 1회는 무료로 써 보실 수 있어요.",
      art: <OnbArt3 />,
    },
  ];

  const s = steps[step];
  const isLast = step === steps.length - 1;

  return (
    <div className="onb">
      <button className="onb__skip" onClick={onDone}>
        {isLast ? "" : "건너뛰기"}
      </button>
      <div className="onb__body">
        <div className="onb__art">{s.art}</div>
        <h1 className="onb__title" style={{ whiteSpace: "pre-line" }}>{s.title}</h1>
        <p className="onb__body-text">{s.body}</p>
      </div>
      <div className="onb__footer">
        <div className="onb__dots">
          {steps.map((_, i) => (
            <div key={i} className={"onb__dot" + (i === step ? " is-active" : "")} />
          ))}
        </div>
        <button
          className="btn btn--filled btn--large btn--block"
          style={{ margin: "0 20px", width: "calc(100% - 40px)" }}
          onClick={() => (isLast ? onDone() : setStep(step + 1))}
        >
          {isLast ? "시작하기" : "다음"}
        </button>
      </div>
    </div>
  );
}

/* Inline SVG art — Toss Blue flat illustrations */
function OnbArt1() {
  return (
    <svg viewBox="0 0 280 280" width="100%" height="100%" fill="none">
      <defs>
        <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#E8F3FF" />
          <stop offset="1" stopColor="#C9E2FF" />
        </linearGradient>
      </defs>
      <rect x="20" y="20" width="240" height="240" rx="40" fill="url(#g1)" />
      {/* document */}
      <rect x="72" y="58" width="136" height="180" rx="14" fill="#fff" stroke="#3182F6" strokeWidth="2.5" />
      <path d="M88 100h104M88 120h104M88 140h76M88 160h90M88 180h64" stroke="#C9E2FF" strokeWidth="4" strokeLinecap="round"/>
      {/* hilite on one line — TDS red-100/red-500 (SVG fill 은 var() 지원이 불완전해 hex 직접) */}
      <rect x="84" y="134" width="84" height="14" rx="3" fill="#ffd4d6" />
      <path d="M88 140h76" stroke="#f04452" strokeWidth="4" strokeLinecap="round" />
      {/* Brand seal badge — official 서명전에 mark in 200×200 grid, scaled down */}
      <g transform="translate(178, 174) scale(0.3)">
        <rect x="4" y="4" width="192" height="192" rx="36" fill="#3182F6" />
        <g stroke="#fff" strokeWidth="10" strokeLinecap="round" strokeLinejoin="round" fill="none">
          <rect x="28" y="28" width="144" height="144" rx="28" />
          <circle cx="90" cy="90" r="30" />
          <path d="M112 112 L140 140" />
          <path d="M56 146 Q82 136 102 148 T150 142" strokeWidth="8" />
        </g>
      </g>
    </svg>
  );
}

function OnbArt2() {
  return (
    <svg viewBox="0 0 280 280" width="100%" height="100%" fill="none">
      <rect x="20" y="20" width="240" height="240" rx="40" fill="#E8F3FF" />
      {/* checklist card */}
      <rect x="56" y="56" width="168" height="168" rx="20" fill="#fff" />
      {[0, 1, 2, 3].map((i) => {
        const y = 86 + i * 32;
        const danger = i === 1 || i === 3;
        return (
          <g key={i}>
            <circle
              cx="82"
              cy={y}
              r="10"
              fill={danger ? "#f04452" : "#03b26c"}
            />
            {danger ? (
              <>
                <path d={`M78 ${y - 4}l8 8M86 ${y - 4}l-8 8`} stroke="#fff" strokeWidth="2.2" strokeLinecap="round" />
              </>
            ) : (
              <path d={`M77 ${y}l4 4 7-7`} stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
            )}
            <rect x="100" y={y - 6} width={100 - i * 8} height="5" rx="2.5" fill="#C9E2FF" />
            <rect x="100" y={y + 2} width={60 - i * 4} height="3" rx="1.5" fill="#E8F3FF" />
          </g>
        );
      })}
    </svg>
  );
}

function OnbArt3() {
  return (
    <svg viewBox="0 0 280 280" width="100%" height="100%" fill="none">
      <rect x="20" y="20" width="240" height="240" rx="40" fill="#E8F3FF" />
      {/* phone */}
      <rect x="96" y="52" width="88" height="176" rx="18" fill="#3182F6" />
      <rect x="102" y="60" width="76" height="150" rx="10" fill="#fff" />
      {/* lock */}
      <rect x="124" y="116" width="32" height="28" rx="4" fill="#3182F6" />
      <path d="M130 116v-6a10 10 0 0120 0v6" stroke="#3182F6" strokeWidth="3" fill="none" strokeLinecap="round" />
      <circle cx="140" cy="130" r="3" fill="#fff" />
      {/* sparkles */}
      <path d="M72 100l2 6 6 2-6 2-2 6-2-6-6-2 6-2z" fill="#3182F6" />
      <path d="M216 84l2 5 5 2-5 2-2 5-2-5-5-2 5-2z" fill="#3182F6" opacity="0.6" />
      <path d="M230 188l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z" fill="#3182F6" opacity="0.8" />
    </svg>
  );
}

window.Onboarding = Onboarding;

Object.assign(window, { Onboarding });