// 하루결 — 온보딩 / 시작 화면

function OnboardingScreen({ onDone }) {
  const [step, setStep] = React.useState(0);
  const slides = [
    {
      img: IMG.morning,
      eyebrow: '하루결',
      title: '항암치료의 하루를\n내 리듬에 맞게',
      body: '길고 무거운 치료의 여정,\n환자의 하루 결을 지켜주는 동행 노트.',
    },
    {
      img: IMG.tea,
      eyebrow: '기록은 가볍게',
      title: '몸 상태와 식사,\n한 번의 탭으로',
      body: '컨디션, 증상, 식사, 수분을\n버튼 하나로 기록해두세요.',
    },
    {
      img: IMG.window,
      eyebrow: '진료는 든든하게',
      title: '진료실에서 잊지 않도록,\n질문 노트를 챙겨드려요',
      body: '다음 진료가 가까워지면\n질문과 준비물을 알려드립니다.',
    },
    {
      img: IMG.flower,
      eyebrow: '혼자가 아니에요',
      title: '보호자와 함께\n같은 화면을 봐요',
      body: '같은 기록을 보고, 같은 일정을 챙기고,\n함께 진료를 준비합니다.',
    },
  ];
  const s = slides[step];

  return (
    <div style={{ minHeight: '100%', position: 'relative', display: 'flex', flexDirection: 'column', background: '#000' }}>
      <MoodImage src={s.img} alt="" style={{ position: 'absolute', inset: 0 }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(42,36,29,0.0) 20%, rgba(42,36,29,0.65) 65%, rgba(42,36,29,0.92) 100%)',
      }} />

      {/* skip */}
      <div style={{ position: 'relative', padding: '54px 22px 0', display: 'flex', justifyContent: 'flex-end' }}>
        <button onClick={onDone} style={{
          color: 'rgba(255,253,247,0.85)', fontSize: 13, fontWeight: 600,
          padding: '8px 14px', borderRadius: 999,
          background: 'rgba(255,255,255,0.12)',
          backdropFilter: 'blur(10px)',
        }}>건너뛰기</button>
      </div>

      <div style={{ flex: 1 }} />

      <div style={{ position: 'relative', padding: '0 28px 36px', color: '#fff' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--hg-honey)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>
          {s.eyebrow}
        </div>
        <div className="hg-serif" style={{ fontSize: 34, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.2, marginBottom: 14, whiteSpace: 'pre-line' }}>
          {s.title}
        </div>
        <div style={{ fontSize: 14, opacity: 0.85, lineHeight: 1.7, whiteSpace: 'pre-line', marginBottom: 32 }}>
          {s.body}
        </div>

        {/* 진행 점 */}
        <div style={{ display: 'flex', gap: 6, marginBottom: 22 }}>
          {slides.map((_, i) => (
            <div key={i} style={{
              flex: i === step ? 2 : 1,
              height: 4, borderRadius: 2,
              background: i === step ? 'var(--hg-honey)' : 'rgba(255,255,255,0.25)',
              transition: 'all 240ms',
            }} />
          ))}
        </div>

        <button onClick={() => step < slides.length - 1 ? setStep(step + 1) : onDone()} style={{
          width: '100%', minHeight: 56, borderRadius: 16,
          background: 'var(--hg-honey)', color: 'var(--hg-ink)',
          fontSize: 15, fontWeight: 700, letterSpacing: '-0.02em',
        }}>
          {step < slides.length - 1 ? '다음' : '시작하기'}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { OnboardingScreen });