/* SkinJourney UI Kit — onboarding screens */
const Cc = window.SJ.c, GRADc = window.SJ.grad, Rc = window.SJ.r, FONTc = window.SJ.font;

/* ---- Splash --------------------------------------------------------------- */
function SplashScreen() {
  return (
    <div style={{ position:'absolute', inset:0, background:GRADc.splash, overflow:'hidden',
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
      {/* ambient blobs */}
      <div style={{ position:'absolute', top:'-12%', right:'-22%', width:'80%', height:'40%',
        background:'rgba(168,197,184,.2)', borderRadius:'50%', filter:'blur(50px)' }}/>
      <div style={{ position:'absolute', bottom:'-16%', left:'-12%', width:'90%', height:'48%',
        background:'rgba(255,252,248,.9)', borderRadius:'50%', filter:'blur(50px)' }}/>
      <div style={{ display:'flex', alignItems:'center', gap:10, zIndex:2, animation:'sjBloom 1s cubic-bezier(.2,0,0,1)' }}>
        <span style={{ fontSize:34, fontWeight:700, letterSpacing:-.5, color:Cc.sage700 }}>SkinJourney</span>
        <Leaf size={40}/>
      </div>
      <div style={{ display:'flex', gap:10, marginTop:22, zIndex:2 }}>
        {[Cc.sage400, Cc.sand400, Cc.sand400].map((b,i)=>(
          <div key={i} style={{ width:i?8:10, height:i?8:10, borderRadius:'50%', background:b }}/>
        ))}
      </div>
      <div style={{ position:'absolute', bottom:64, fontSize:18, fontWeight:500, color:Cc.textSecondary, zIndex:2 }}>
        המסע שלך לעור בריא
      </div>
    </div>
  );
}

/* ---- Organic face blob (recreation of v1 welcome illustration) ------------ */
function FaceBlob() {
  return (
    <div style={{ position:'relative', width:240, height:230 }}>
      <div style={{ position:'absolute', inset:0, background:Cc.sage100,
        borderRadius:'46% 54% 56% 44% / 52% 46% 54% 48%' }}/>
      <div style={{ position:'absolute', inset:'14% 18%', background:Cc.coral300,
        borderRadius:'48% 52% 44% 56% / 56% 48% 52% 44%' }}/>
      <div style={{ position:'absolute', top:'30%', left:'30%', width:54, height:54,
        background:Cc.sage600, borderRadius:'50%' }}/>
      <svg style={{ position:'absolute', bottom:'34%', right:'26%' }} width="90" height="40" viewBox="0 0 90 40">
        <path d="M6 8 C30 34 64 34 84 14" stroke={Cc.coral700} strokeWidth="3" strokeLinecap="round" fill="none"/>
      </svg>
    </div>
  );
}

/* ---- Welcome -------------------------------------------------------------- */
function WelcomeScreen({ go }) {
  return (
    <div style={{ position:'absolute', inset:0, background:GRADc.hero, padding:'60px 20px 28px',
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'space-between' }}>
      <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:36 }}>
        <FaceBlob/>
        <div style={{ textAlign:'center' }}>
          <div style={{ fontSize:30, fontWeight:700, color:Cc.textPrimary, marginBottom:12 }}>ברוכים הבאים למסע</div>
          <p style={{ fontSize:17, lineHeight:1.6, color:Cc.textSecondary, margin:0, maxWidth:300 }}>
            כאן אין עור מושלם או לא מושלם. יש רק את המסע שלך — ואנחנו כאן לתעד אותו.
          </p>
        </div>
      </div>
      <div style={{ width:'100%', display:'flex', flexDirection:'column', alignItems:'center', gap:22 }}>
        <ProgressDots total={3} index={0}/>
        <Btn label="המשך" onClick={()=>go('howitworks')}/>
        <div style={{ display:'flex', alignItems:'center', gap:6, fontSize:12, color:Cc.textTertiary }}>
          <Icon name="lock-closed" size={13} color={Cc.textTertiary}/>
          התמונות שלך פרטיות ומאוחסנות באופן מאובטח
        </div>
      </div>
    </div>
  );
}

/* ---- How it works --------------------------------------------------------- */
function HowItWorksScreen({ go }) {
  const steps = [
    { icon:'camera-outline', title:'צלמי פעם בשבוע', body:'תעדי את מצב העור שלך באופן עקבי לקבלת תמונה מדויקת.' },
    { icon:'trending-up-outline', title:'ראי את ההתקדמות', body:'עקבי אחרי השינויים לאורך זמן והביני מה עובד הכי טוב עבורך.' },
    { icon:'document-text-outline', title:'שתפי עם המטפל/ת שלך', body:'הציגי את ההיסטוריה בצורה מסודרת למומחה העור שלך.' },
  ];
  return (
    <div style={{ position:'absolute', inset:0, background:Cc.bg, display:'flex', flexDirection:'column' }}>
      <div style={{ display:'flex', flexDirection:'row-reverse', alignItems:'center', gap:12, padding:'56px 20px 14px' }}>
        <Icon name="arrow-forward" size={26} color={Cc.textPrimary}/>
        <div style={{ fontSize:24, fontWeight:700, color:Cc.textPrimary }}>איך זה עובד</div>
      </div>
      <div style={{ flex:1, overflowY:'auto', padding:'4px 20px', display:'flex', flexDirection:'column', gap:14 }}>
        {steps.map((s,i)=>(
          <Card key={i} elev={1} style={{ position:'relative', overflow:'hidden', textAlign:'center', padding:'22px 18px' }}>
            <div style={{ position:'absolute', top:-20, left:-10, width:120, height:120,
              background:Cc.sage100, borderRadius:'50%', opacity:.6 }}/>
            <div style={{ position:'relative' }}>
              <div style={{ width:56, height:56, margin:'0 auto 12px', borderRadius:18, background:Cc.surfaceElevated,
                boxShadow:window.SJ.elev[1], display:'flex', alignItems:'center', justifyContent:'center' }}>
                <Icon name={s.icon} size={26} color={Cc.sage700}/>
              </div>
              <div style={{ fontSize:18, fontWeight:700, color:Cc.textPrimary, marginBottom:6 }}>{s.title}</div>
              <p style={{ fontSize:15, lineHeight:1.6, color:Cc.textSecondary, margin:'0 auto', maxWidth:280 }}>{s.body}</p>
            </div>
          </Card>
        ))}
      </div>
      <div style={{ padding:'8px 20px 30px' }}>
        <Btn label="הבא" onClick={()=>go('personalize')}/>
      </div>
    </div>
  );
}

/* ---- Personalize ---------------------------------------------------------- */
function PersonalizeScreen({ go }) {
  const [name,setName]=useState(''); const [age,setAge]=useState('');
  const [skin,setSkin]=useState('dry'); const [area,setArea]=useState('face');
  const SKIN=[{value:'normal',label:'רגיל'},{value:'combination',label:'מעורב'},{value:'dry',label:'יבש'},{value:'oily',label:'שמן'}];
  const AREA=[{value:'face',label:'פנים'},{value:'back',label:'גב'},{value:'chest',label:'חזה'}];
  return (
    <div style={{ position:'absolute', inset:0, background:Cc.bg, display:'flex', flexDirection:'column' }}>
      <div style={{ padding:'56px 20px 0', display:'flex', flexDirection:'row-reverse',
        alignItems:'center', justifyContent:'space-between' }}>
        <div onClick={()=>go('howitworks')} style={{ cursor:'pointer' }}><Icon name="arrow-forward" size={26} color={Cc.textPrimary}/></div>
        <div style={{ flex:1, margin:'0 16px', height:6, background:Cc.surfaceSunken, borderRadius:99, direction:'rtl', overflow:'hidden' }}>
          <div style={{ width:'100%', height:'100%', background:Cc.sage400, borderRadius:99 }}/>
        </div>
        <div style={{ width:26 }}/>
      </div>
      <div style={{ flex:1, overflowY:'auto', padding:'24px 20px', display:'flex', flexDirection:'column', gap:24 }}>
        <div>
          <div style={{ fontSize:28, fontWeight:700, color:Cc.textPrimary }}>ספרי לנו קצת על עצמך</div>
          <p style={{ fontSize:16, color:Cc.textSecondary, margin:'6px 0 0' }}>המידע יעזור לנו להתאים לך את החוויה.</p>
        </div>
        <Input label="שם" value={name} onChange={setName} placeholder="הכניסי את שמך"/>
        <Input label="גיל" value={age} onChange={v=>setAge(v.replace(/[^0-9]/g,''))} placeholder="25"/>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          <div style={{ fontSize:13, fontWeight:600, color:Cc.textSecondary }}>סוג עור</div>
          <div style={{ display:'flex', gap:8, flexWrap:'wrap', justifyContent:'flex-end' }}>
            {SKIN.map(s=><Chip key={s.value} label={s.label} selected={skin===s.value} onClick={()=>setSkin(s.value)}/>)}
          </div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          <div style={{ fontSize:13, fontWeight:600, color:Cc.textSecondary }}>אזור מיקוד</div>
          <div style={{ display:'flex', gap:8, flexWrap:'wrap', justifyContent:'flex-end' }}>
            {AREA.map(a=><Chip key={a.value} label={a.label} selected={area===a.value} accent onClick={()=>setArea(a.value)}/>)}
          </div>
        </div>
      </div>
      <div style={{ padding:'8px 20px 30px' }}>
        <Btn label="בואו נתחיל!" onClick={()=>go('home')}/>
      </div>
    </div>
  );
}

Object.assign(window, { SplashScreen, WelcomeScreen, HowItWorksScreen, PersonalizeScreen, FaceBlob });