/* global React, Wordmark, WorkspaceBrand, BrowserChrome, PhoneFrame, IdPButton, PlaceholderStrip, WizardStepper, SlugStatus, useFlow */

// ============================================================================
// LessonHigh · Auth & Onboarding — Admin (원장) screens
// ============================================================================

// ─── S1 · Marketing landing (lessonhigh.com) ──────────────────────────────
function S1_Landing() {
  const { go } = useFlow();
  return (
    <BrowserChrome url="https://lessonhigh.com">
      <div style={{ height: '100%', background: 'var(--bg-canvas)', display: 'flex', flexDirection: 'column' }}>
        {/* Top nav */}
        <header style={{
          padding: '20px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <Wordmark />
          <nav style={{ display: 'flex', gap: 28, alignItems: 'center', fontSize: 14 }}>
            <a style={{ color: 'var(--text-secondary)', textDecoration: 'none' }}>소개</a>
            <a style={{ color: 'var(--text-secondary)', textDecoration: 'none' }}>요금</a>
            <a style={{ color: 'var(--text-secondary)', textDecoration: 'none' }}>도입 사례</a>
            <a style={{ color: 'var(--text-secondary)', textDecoration: 'none' }}>고객센터</a>
            <button className="btn" onClick={() => go('admin-login')}>로그인</button>
            <button className="btn is-primary" onClick={() => go('admin-signup')}>원장 가입</button>
          </nav>
        </header>

        {/* Hero */}
        <div style={{ flex: 1, padding: '40px 56px 0', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div style={{
              display: 'inline-block', padding: '4px 12px', borderRadius: 99,
              background: 'var(--accent-subtle-bg)', color: 'var(--accent-default)',
              fontSize: 12, fontWeight: 600, letterSpacing: '0.02em', marginBottom: 24,
            }}>
              1:1 정기 수업 학원을 위한 운영 도구
            </div>
            <h1 style={{
              fontSize: 56, lineHeight: 1.1, fontWeight: 700,
              letterSpacing: '-0.024em', margin: '0 0 24px', maxWidth: '14ch',
            }}>
              학원 운영의 모든 것을<br/>한 곳에서.
            </h1>
            <p style={{
              fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)',
              margin: '0 0 32px', maxWidth: '46ch',
            }}>
              회원 등록부터 수업 일정, 공간 예약, 결제 안내까지 — 보컬·미술·PT·1:1 학원이
              매일 손으로 하던 일을 한 화면에서 처리합니다.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <button className="btn is-primary is-lg" style={{ fontSize: 15 }} onClick={() => go('admin-signup')}>
                원장으로 시작하기
                <span style={{ marginLeft: 6 }}>→</span>
              </button>
              <button className="btn is-lg" style={{ fontSize: 15 }} onClick={() => go('teacher-login')}>
                강사 로그인
              </button>
            </div>
            <div style={{
              marginTop: 28, fontSize: 12, color: 'var(--text-tertiary)',
              display: 'flex', gap: 16, alignItems: 'center',
            }}>
              <span>· 신용카드 없이 14일 무료</span>
              <span>· 보컬·미술·PT 등 학원 종류 무관</span>
            </div>
          </div>

          {/* App preview placeholder */}
          <div style={{ position: 'relative' }}>
            <div style={{
              borderRadius: 14,
              border: '1px solid var(--border-default)',
              background: 'var(--bg-surface)',
              boxShadow: 'var(--shadow-lg)',
              padding: 16,
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--accent-default)' }} />
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-tertiary)' }}>
                  songyui.lessonhigh.com/dashboard
                </span>
              </div>
              <PlaceholderStrip label="대시보드 스크린샷 · 1920×1080" height={320} />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <PlaceholderStrip label="회원 목록" height={70} />
                <PlaceholderStrip label="공간 예약" height={70} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </BrowserChrome>
  );
}

// ─── S2 · Admin signup ─────────────────────────────────────────────────────
function S2_AdminSignup() {
  const { go } = useFlow();
  return (
    <BrowserChrome url="https://lessonhigh.com/signup">
      <div style={{ height: '100%', background: 'var(--bg-canvas)', display: 'grid', placeItems: 'center' }}>
        <div style={{
          width: 420,
          background: 'var(--bg-surface)',
          border: '1px solid var(--border-default)',
          borderRadius: 14,
          padding: '40px 36px',
          boxShadow: 'var(--shadow-sm)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
            <Wordmark size={26} />
          </div>
          <h1 style={{
            fontSize: 22, fontWeight: 700, letterSpacing: '-0.018em',
            textAlign: 'center', margin: '0 0 8px',
          }}>
            학원 운영을 시작합니다
          </h1>
          <p style={{
            fontSize: 13.5, color: 'var(--text-secondary)',
            textAlign: 'center', margin: '0 0 28px', lineHeight: 1.55,
          }}>
            원장 계정으로 가입하면 학원 워크스페이스를 만들 수 있어요.<br/>
            강사·회원은 원장 초대로만 들어옵니다.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <IdPButton provider="kakao" onClick={() => go('wizard-slug')} />
            <IdPButton provider="google" onClick={() => go('wizard-slug')} />
            <div style={{
              display: 'flex', alignItems: 'center', gap: 12,
              margin: '8px 0', color: 'var(--text-tertiary)', fontSize: 12,
            }}>
              <div style={{ flex: 1, height: 1, background: 'var(--border-default)' }} />
              또는
              <div style={{ flex: 1, height: 1, background: 'var(--border-default)' }} />
            </div>
            <IdPButton provider="email" onClick={() => go('wizard-slug')} />
          </div>

          <p style={{
            marginTop: 28, fontSize: 12, color: 'var(--text-tertiary)',
            textAlign: 'center', lineHeight: 1.6,
          }}>
            계속 진행하면 <a style={{ color: 'var(--accent-default)' }}>이용약관</a> 및{' '}
            <a style={{ color: 'var(--accent-default)' }}>개인정보처리방침</a>에 동의합니다.
          </p>
        </div>

        <p style={{ position: 'absolute', bottom: 24, fontSize: 13, color: 'var(--text-secondary)' }}>
          이미 계정이 있나요? <a style={{ color: 'var(--accent-default)', fontWeight: 600 }} onClick={() => go('admin-login')}>로그인</a>
        </p>
      </div>
    </BrowserChrome>
  );
}

// ─── S3 · Admin login ──────────────────────────────────────────────────────
function S3_AdminLogin() {
  const { go } = useFlow();
  return (
    <BrowserChrome url="https://lessonhigh.com/login">
      <div style={{ height: '100%', background: 'var(--bg-canvas)', display: 'grid', placeItems: 'center', position: 'relative' }}>
        <div style={{
          width: 420,
          background: 'var(--bg-surface)',
          border: '1px solid var(--border-default)',
          borderRadius: 14,
          padding: '40px 36px',
          boxShadow: 'var(--shadow-sm)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
            <Wordmark size={26} />
          </div>
          <h1 style={{
            fontSize: 22, fontWeight: 700, letterSpacing: '-0.018em',
            textAlign: 'center', margin: '0 0 8px',
          }}>
            원장 로그인
          </h1>
          <p style={{
            fontSize: 13.5, color: 'var(--text-secondary)',
            textAlign: 'center', margin: '0 0 28px',
          }}>
            여러 학원을 운영 중이라면, 로그인 후 워크스페이스를 선택합니다.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <IdPButton provider="kakao" onClick={() => go('switcher')} />
            <IdPButton provider="google" onClick={() => go('switcher')} />
            <div style={{
              display: 'flex', alignItems: 'center', gap: 12,
              margin: '8px 0', color: 'var(--text-tertiary)', fontSize: 12,
            }}>
              <div style={{ flex: 1, height: 1, background: 'var(--border-default)' }} />
              이메일 로그인
              <div style={{ flex: 1, height: 1, background: 'var(--border-default)' }} />
            </div>
            <div className="field">
              <label className="field__label">이메일</label>
              <input className="input" placeholder="name@example.com" defaultValue="songyui@studio.kr" />
            </div>
            <div className="field">
              <label className="field__label" style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span>비밀번호</span>
                <a style={{ color: 'var(--accent-default)', fontWeight: 500, fontSize: 12 }}>찾기</a>
              </label>
              <input className="input" type="password" defaultValue="••••••••••" />
            </div>
            <button className="btn is-primary is-lg is-block" style={{ marginTop: 6 }} onClick={() => go('switcher')}>로그인</button>
          </div>
        </div>

        <p style={{ position: 'absolute', bottom: 24, fontSize: 13, color: 'var(--text-secondary)' }}>
          처음이신가요? <a style={{ color: 'var(--accent-default)', fontWeight: 600 }} onClick={() => go('admin-signup')}>원장으로 가입</a>
          <span style={{ margin: '0 12px', color: 'var(--border-strong)' }}>·</span>
          강사이신가요? <a style={{ color: 'var(--accent-default)', fontWeight: 600 }} onClick={() => go('teacher-login')}>학원 URL로 로그인</a>
        </p>
      </div>
    </BrowserChrome>
  );
}

Object.assign(window, { S1_Landing, S2_AdminSignup, S3_AdminLogin });