// SCREEN 1 — Home / Today's Lesson
function ScreenHome({ accent, accentDeep, onStartLesson, onGoPath }) {
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      padding: '14px 16px 0',
      color: '#EAEEF3',
      fontFamily: "'Inter', sans-serif",
      overflow: 'hidden',
    }}>
      {/* Top row: streak, XP, avatar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 5,
          padding: '6px 10px 6px 8px',
          borderRadius: 999,
          background: '#141A22',
          border: '1px solid rgba(255, 196, 0, 0.15)',
        }}>
          <div className="flame-anim">{Icon.flame(16, '#FFC400')}</div>
          <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 13 }}>12</span>
          <span style={{ fontSize: 11, color: '#8A93A0' }}>hari</span>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 5,
          padding: '6px 10px 6px 8px',
          borderRadius: 999,
          background: '#141A22',
          border: `1px solid ${accent}22`,
        }}>
          {Icon.bolt(14, accent)}
          <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 13 }}>2,340</span>
          <span style={{ fontSize: 11, color: '#8A93A0' }}>XP</span>
        </div>
        <div style={{ flex: 1 }} />
        {/* Avatar */}
        <div style={{
          width: 32, height: 32, borderRadius: 999,
          background: 'linear-gradient(135deg, #FF4B91, #FFC400)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: "'Space Grotesk', sans-serif",
          fontWeight: 700, fontSize: 13, color: '#0B0F14',
          border: '2px solid #0B0F14',
          boxShadow: '0 0 0 1px rgba(255,255,255,0.08)',
        }}>DW</div>
      </div>

      {/* Mascot + greeting */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 14,
        marginBottom: 18,
      }}>
        <Mascot size={78} accent={accent} accentDeep={accentDeep} />
        <div style={{ flex: 1 }}>
          <div style={{
            fontFamily: "'Space Grotesk', sans-serif",
            fontSize: 18, fontWeight: 700, letterSpacing: -0.4,
            lineHeight: 1.1, marginBottom: 4,
          }}>Pagi, Dewi!</div>
          <div style={{ fontSize: 12, color: '#8A93A0', lineHeight: 1.4 }}>
            Lu on fire — jangan putus streak hari ini ya 🔥
          </div>
        </div>
      </div>

      {/* Today's lesson card */}
      <div style={{
        background: `linear-gradient(145deg, #1E2631, #141A22)`,
        border: `1px solid ${accent}22`,
        borderRadius: 20,
        padding: 16,
        position: 'relative',
        overflow: 'hidden',
        marginBottom: 12,
      }}>
        {/* accent corner glow */}
        <div style={{
          position: 'absolute', top: -40, right: -40,
          width: 120, height: 120, borderRadius: 999,
          background: accent, opacity: 0.12, filter: 'blur(30px)',
        }} />
        <div style={{
          fontSize: 10, letterSpacing: 2, textTransform: 'uppercase',
          color: accent, fontWeight: 700, marginBottom: 8,
          fontFamily: "'Space Grotesk', sans-serif",
        }}>Pelajaran Hari Ini</div>
        <div style={{
          fontFamily: "'Space Grotesk', sans-serif",
          fontSize: 19, fontWeight: 700, letterSpacing: -0.4,
          lineHeight: 1.15, marginBottom: 4,
        }}>Prompt Patterns:<br/>Persona Technique</div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          color: '#8A93A0', fontSize: 11, marginBottom: 14,
        }}>
          {Icon.clock(12, '#8A93A0')}
          <span>8 menit</span>
          <span style={{ opacity: 0.4 }}>•</span>
          <span>Pelajaran 5 / 12</span>
        </div>
        <button
          onClick={onStartLesson}
          style={{
            width: '100%',
            padding: '11px 16px',
            borderRadius: 14,
            border: 'none',
            background: accent,
            color: '#0B0F14',
            fontFamily: "'Space Grotesk', sans-serif",
            fontWeight: 700, fontSize: 14, letterSpacing: -0.2,
            cursor: 'pointer',
            boxShadow: `0 4px 0 ${accentDeep}, 0 8px 20px ${accent}33`,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            transition: 'transform 0.1s',
          }}
          onMouseDown={e => e.currentTarget.style.transform = 'translateY(2px)'}
          onMouseUp={e => e.currentTarget.style.transform = 'translateY(0)'}
          onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
        >
          Mulai Sekarang
          {Icon.arrow_right_bold(14, '#0B0F14')}
        </button>
      </div>

      {/* Path progress strip */}
      <button onClick={onGoPath} style={{
        display: 'block', width: '100%',
        background: '#141A22',
        border: '1px solid rgba(255,255,255,0.04)',
        borderRadius: 14,
        padding: '10px 12px',
        cursor: 'pointer',
        marginBottom: 12,
        textAlign: 'left',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
          <span style={{ fontSize: 11, color: '#8A93A0' }}>Path · AI untuk Marketer</span>
          <span style={{
            fontFamily: "'Space Grotesk', sans-serif",
            fontSize: 12, fontWeight: 700, color: accent,
          }}>40%</span>
        </div>
        <div style={{
          height: 5, borderRadius: 4,
          background: 'rgba(255,255,255,0.06)',
          overflow: 'hidden', position: 'relative',
        }}>
          <div style={{
            height: '100%', width: '40%',
            background: `linear-gradient(90deg, ${accentDeep}, ${accent})`,
            borderRadius: 4,
            boxShadow: `0 0 8px ${accent}88`,
          }} />
        </div>
      </button>

      {/* Daily challenge card */}
      <div style={{
        background: '#141A22',
        border: '1px dashed rgba(255, 196, 0, 0.25)',
        borderRadius: 16,
        padding: 12,
        position: 'relative',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6,
        }}>
          <div style={{
            width: 22, height: 22, borderRadius: 7,
            background: 'rgba(255, 196, 0, 0.15)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {Icon.target(13, '#FFC400')}
          </div>
          <div style={{
            fontFamily: "'Space Grotesk', sans-serif",
            fontSize: 12, fontWeight: 700, letterSpacing: -0.2,
          }}>Daily Challenge</div>
          <div style={{ flex: 1 }} />
          <div style={{
            fontSize: 10,
            color: '#FFC400', fontWeight: 700,
            fontFamily: "'Space Grotesk', sans-serif",
            background: 'rgba(255, 196, 0, 0.12)',
            padding: '2px 6px', borderRadius: 6,
          }}>+50 XP</div>
        </div>
        <div style={{
          fontSize: 11.5, color: '#8A93A0', lineHeight: 1.45,
        }}>
          Bikin 1 prompt marketing pake teknik Persona, trus terapin di kerjaan lu hari ini. Lapor hasilnya buat bonus.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenHome });