// LINKONA prototype — brand / influencer registration onboarding.
(function () {
  const { Button, Card, Badge, Tag, Input, Select, Logo, Avatar } = window.LINKONADesignSystem_465a88;
  const { Icon, Eyebrow } = window;
  const MARK = 'assets/linkona-mark.png';

  const FLOWS = {
    advertiser: {
      eyebrow: 'BRAND ONBOARDING',
      title: '브랜드 등록',
      sub: 'K-뷰티 제품을 베트남 크리에이터와 연결하기 위한 기본 정보를 입력하세요.',
      steps: ['브랜드 정보', '대표 제품', '타깃 설정'],
      role: '광고주',
    },
    influencer: {
      eyebrow: 'CREATOR ONBOARDING',
      title: '크리에이터 등록',
      sub: 'SNS를 연결하면 AI가 적합한 캠페인 제안을 매칭해 드립니다.',
      steps: ['계정 연결', '카테고리', '완료'],
      role: '인플루언서',
    },
  };

  function Onboarding({ role, onDone, onSkip }) {
    const f = FLOWS[role];
    const [step, setStep] = React.useState(0);
    const [cats, setCats] = React.useState(role === 'advertiser' ? ['스킨케어'] : ['스킨케어', '민감성']);
    const CATS = role === 'advertiser' ? ['스킨케어', '메이크업', '선케어', '헤어케어', '향수'] : ['스킨케어', '메이크업', '선케어', 'GRWM', '민감성', '브라이트닝'];
    const toggle = (c) => setCats((p) => p.includes(c) ? p.filter((x) => x !== c) : [...p, c]);
    const last = f.steps.length - 1;

    return (
      <div style={{ minHeight: '100vh', display: 'flex', background: 'var(--bg-page)' }}>
        {/* Left brand panel */}
        <div style={{ width: 420, flexShrink: 0, background: 'var(--ink-900)', padding: '48px 44px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -80, right: -80, width: 320, height: 320, borderRadius: '50%', background: 'var(--grad-brand)', opacity: 0.22, filter: 'blur(50px)' }} />
          <div style={{ position: 'relative' }}>
            <img src={MARK} alt="LINKONA" style={{ height: 34, marginBottom: 28 }} />
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--amber-500)', marginBottom: 14 }}>{f.role} · 시작하기</div>
            <h1 style={{ fontSize: 30, fontWeight: 700, color: '#fff', margin: '0 0 14px', lineHeight: 1.25, letterSpacing: '-0.01em' }}>베트남 K-뷰티 캠페인,<br/>적합도부터 성과까지.</h1>
            <p style={{ fontSize: 14.5, color: 'rgba(255,255,255,.6)', lineHeight: 1.65, margin: 0 }}>단순 인플루언서 매칭이 아닙니다. 피부 빅데이터 기반으로 크리에이터를 찾고, 콘텐츠를 기획하고, 성과 데이터를 남깁니다.</p>
          </div>
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 14 }}>
            {['AI 적합도 매칭', '호치민 현지 제작 지원', 'Before & After 피부 리포트'].map((t) => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 11, color: 'rgba(255,255,255,.82)', fontSize: 14 }}>
                <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'rgba(255,255,255,.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="check" size={14} color="var(--amber-500)" /></div>
                {t}
              </div>
            ))}
          </div>
        </div>

        {/* Right form */}
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
          <div style={{ width: '100%', maxWidth: 460 }} className="lk-fade" key={step}>
            <div style={{ display: 'flex', gap: 6, marginBottom: 26 }}>
              {f.steps.map((s, i) => (
                <div key={i} style={{ flex: 1, height: 4, borderRadius: 'var(--r-full)', background: i <= step ? 'var(--grad-brand)' : 'var(--ink-150)' }} />
              ))}
            </div>
            <Eyebrow style={{ marginBottom: 8 }}>{f.eyebrow} · {step + 1}/{f.steps.length}</Eyebrow>
            <h2 style={{ fontSize: 24, fontWeight: 700, margin: '0 0 8px' }}>{f.steps[step]}</h2>
            <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: '0 0 26px', lineHeight: 1.55 }}>{f.sub}</p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 30 }}>
              {role === 'advertiser' && step === 0 && (<>
                <Input label="브랜드명" placeholder="예: PHILCOS" defaultValue="㈜필코스" />
                <Input label="담당자 이메일" placeholder="you@brand.com" defaultValue="marketing@philcos.co.kr" iconLeft={<Icon name="user" size={16} />} />
              </>)}
              {role === 'advertiser' && step === 1 && (<>
                <Input label="대표 제품 URL" placeholder="브랜드 제품 페이지 주소" defaultValue="philcos.co.kr/products/glow-vitc-serum" iconLeft={<Icon name="link" size={16} />} />
                <div style={{ display: 'flex', gap: 14, alignItems: 'center', padding: 14, background: 'var(--grad-brand-soft)', border: '1px solid var(--border-default)', borderRadius: 'var(--r-md)' }}>
                  <Icon name="sparkle" size={22} color="var(--secondary)" />
                  <div style={{ fontSize: 13, color: 'var(--ink-700)', lineHeight: 1.5 }}>URL을 입력하면 제품 카테고리·성분·가격을 자동으로 인식합니다.</div>
                </div>
              </>)}
              {role === 'influencer' && step === 0 && (<>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {[{ n: 'TikTok', h: '@mailan.skin', on: true }, { n: 'Instagram', h: '@mailan.skin', on: true }, { n: 'YouTube', h: '연결하기', on: false }].map((s) => (
                    <div key={s.n} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 16px', border: `1px solid ${s.on ? 'var(--success-500)' : 'var(--border-default)'}`, borderRadius: 'var(--r-md)', background: s.on ? 'var(--success-100)' : 'var(--bg-surface)' }}>
                      <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 600 }}>{s.n}</div><div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)' }}>{s.h}</div></div>
                      {s.on ? <Icon name="check" size={18} color="var(--success-600)" /> : <Button variant="outline" size="sm">연결</Button>}
                    </div>
                  ))}
                </div>
              </>)}
              {((role === 'advertiser' && step === 2) || (role === 'influencer' && step === 1)) && (
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 5 }}>{role === 'advertiser' ? '타깃 카테고리' : '콘텐츠 카테고리'}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 14 }}>{role === 'advertiser' ? '제품이 속한 카테고리를 선택하세요.' : '주로 다루는 주제를 선택하세요. AI 매칭에 사용됩니다.'}</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>{CATS.map((c) => <Tag key={c} selected={cats.includes(c)} onClick={() => toggle(c)}>{c}</Tag>)}</div>
                  {role === 'advertiser' && <div style={{ marginTop: 18 }}><Select label="타깃 시장" defaultValue="베트남" options={['베트남', '태국', '인도네시아', '필리핀']} /></div>}
                </div>
              )}
              {role === 'influencer' && step === 2 && (
                <div style={{ textAlign: 'center', padding: '10px 0' }}>
                  <Avatar name="Mai Lan" size={72} ring status="online" style={{ marginBottom: 14 }} />
                  <div style={{ fontSize: 18, fontWeight: 700, fontFamily: 'var(--font-display)' }}>Mai Lan</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--text-muted)', marginBottom: 12 }}>@mailan.skin · Hồ Chí Minh</div>
                  <div style={{ display: 'flex', justifyContent: 'center', gap: 6, flexWrap: 'wrap' }}>{cats.map((c) => <Tag key={c} selected>{c}</Tag>)}</div>
                  <div style={{ marginTop: 18, padding: 14, background: 'var(--grad-brand-soft)', borderRadius: 'var(--r-md)', fontSize: 13, color: 'var(--ink-700)' }}>프로필이 준비되었습니다. AI가 적합한 캠페인 제안을 찾아드립니다.</div>
                </div>
              )}
            </div>

            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <button onClick={step === 0 ? onSkip : () => setStep(step - 1)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-secondary)', fontSize: 14, fontFamily: 'var(--font-sans)' }}>
                {step === 0 ? '샘플 계정으로 둘러보기' : '이전'}
              </button>
              {step < last
                ? <Button variant="primary" onClick={() => setStep(step + 1)} iconRight={<Icon name="arrowRight" size={17} color="#fff" />}>다음</Button>
                : <Button variant="gradient" size="lg" onClick={onDone} iconRight={<Icon name="arrowRight" size={18} color="#fff" />}>{role === 'advertiser' ? '워크스페이스 입장' : '시작하기'}</Button>}
            </div>
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { Onboarding });
})();