// Dashboard mockup — faithful recreation of the new ClassGenie dashboard
// Features: AI Homeschool Team (Ivy, Pip, Milo, Penny, Sage, Scout) + washi-tape stat cards + Today's Inspiration

// Decorative washi-tape strip
const Washi = ({ color, top = -8, left = '50%', rotate = -8, width = 60 }) =>
<div style={{
  position: 'absolute', top, left, transform: `translateX(-50%) rotate(${rotate}deg)`,
  width, height: 18,
  background: `repeating-linear-gradient(45deg, ${color} 0 6px, ${color}cc 6px 12px)`,
  opacity: 0.85,
  borderRadius: 2,
  boxShadow: '0 2px 4px rgba(0,0,0,0.08)',
  pointerEvents: 'none'
}} />;


// Hand-drawn style underline used under "Rose"
const Squiggle = ({ color = 'var(--primary-purple)' }) =>
<svg viewBox="0 0 120 10" style={{ position: 'absolute', left: 0, right: 0, bottom: -4, width: '100%', height: 8 }}>
    <path d="M2 6 Q 20 1, 40 5 T 80 5 T 118 5" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" />
  </svg>;


// AI helper agent tile — clean glyph-based avatar
const HelperPortrait = ({ name, gradient, accent, glyph }) => {
  return (
    <div style={{
      position: 'relative', height: 64, borderRadius: 8,
      background: gradient,
      overflow: 'hidden',
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}>
      {/* Soft watercolor blobs */}
      <div style={{ position: 'absolute', top: -14, left: -14, width: 60, height: 60, borderRadius: '50%', background: `${accent}55`, filter: 'blur(16px)' }} />
      <div style={{ position: 'absolute', bottom: -18, right: -10, width: 70, height: 70, borderRadius: '50%', background: `${accent}77`, filter: 'blur(18px)' }} />

      {/* Glyph in a circular medallion */}
      <div style={{
        position: 'relative',
        width: 36, height: 36, borderRadius: '50%',
        background: 'rgba(255,255,255,0.95)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 18,
        boxShadow: `0 2px 6px rgba(0,0,0,0.08), 0 0 0 1.5px ${accent}33`
      }}>
        {glyph}
      </div>

      {/* Status dot */}
      <div style={{
        position: 'absolute', top: 6, right: 6,
        width: 6, height: 6, borderRadius: '50%',
        background: name === 'Penny' ? 'var(--primary-pink)' : 'var(--success-green)',
        boxShadow: '0 0 0 2px rgba(255,255,255,0.85)'
      }} />
    </div>);

};

const DashboardMockup = () =>
<div className="dashboard-mockup" style={{
  background: 'white',
  borderRadius: 16,
  boxShadow: 'var(--shadow-xl)',
  overflow: 'hidden',
  border: '1px solid var(--border-subtle)',
  fontFamily: 'var(--font-body)',
  containerType: 'inline-size'
}}>
    {/* Browser chrome */}
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', background: '#f1f5f9', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ display: 'flex', gap: 6 }}>
        <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#ef4444' }} />
        <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#f59e0b' }} />
        <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#10b981' }} />
      </div>
      <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
        <div style={{ background: 'white', padding: '4px 12px', borderRadius: 6, fontSize: 11, color: '#94a3b8', minWidth: 220, textAlign: 'center' }}>
          🔒 app.homescholarapp.com
        </div>
      </div>
    </div>

    <div style={{ display: 'flex' }}>
      {/* Sidebar */}
      <div style={{ width: 140, background: 'white', borderRight: '1px solid var(--border-subtle)', padding: '12px 8px', flexShrink: 0, fontSize: 11 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '0 8px 12px' }}>
          <img src="/uploads/classgenie-mark.png" alt="" style={{ width: 22, height: 'auto', display: 'block' }} />
          <span style={{ fontWeight: 800, fontSize: 13, color: 'var(--text-primary)' }}>Class<span style={{ color: 'var(--primary-purple)' }}>Genie</span></span>
        </div>
        {[
      ['Home', true], ['AI Tools'], ['Curriculum'], ['Students'],
      ['Assignments'], ['Gradebook'], ['Calendar'], ['Reports'],
      ['Resources'], ['Settings']].
      map(([label, active], i) =>
      <div key={i} style={{
        padding: '6px 10px', borderRadius: 6, marginBottom: 1,
        background: active ? 'var(--signature-gradient)' : 'transparent',
        color: active ? 'white' : 'var(--text-secondary)',
        fontWeight: active ? 700 : 500
      }}>{label}</div>
      )}
        <div style={{ marginTop: 12, padding: '8px', borderTop: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', gap: 6 }}>
          <div className="avatar av-purple" style={{ width: 22, height: 22, fontSize: 9 }}>RD</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 10, fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Rose</div>
            <div style={{ fontSize: 8, color: 'var(--text-tertiary)' }}>Starter ✦</div>
          </div>
        </div>
      </div>

      {/* Main */}
      <div style={{ flex: 1, padding: '14px 18px 16px', background: 'var(--bg-base)', minWidth: 0, position: 'relative' }}>
        {/* Top search bar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <div style={{ flex: 1, background: '#eef2ff', borderRadius: 8, padding: '7px 12px', display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--text-tertiary)' }}>
            <Icon name="check" size={11} /> Search…
            <span style={{ marginLeft: 'auto', fontSize: 9, background: 'white', padding: '1px 5px', borderRadius: 3 }}>⌘K</span>
          </div>
          <div style={{ width: 24, height: 24, borderRadius: '50%', background: '#fef2f2', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, position: 'relative' }}>
            🔔
            <div style={{ position: 'absolute', top: -2, right: -2, background: 'var(--primary-pink)', color: 'white', fontSize: 7, fontWeight: 800, borderRadius: 99, padding: '1px 4px' }}>1</div>
          </div>
          <div className="avatar" style={{ width: 26, height: 26, fontSize: 10, background: 'var(--primary-pink)', color: 'white' }}>RP</div>
        </div>

        {/* Greeting */}
        <div style={{ marginBottom: 12 }}>
          <div style={{ fontSize: 22, fontWeight: 800, fontFamily: 'var(--font-display)', display: 'flex', alignItems: 'baseline', gap: 6 }}>
            Good morning,
            <span style={{ position: 'relative', color: 'var(--text-primary)' }}>
              <span className="gradient-text">Rose</span>!
              <Squiggle />
            </span>
            <span style={{ fontSize: 16 }}>👋</span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 4 }}>Wednesday, April 29, 2026</div>
        </div>

        {/* Today's Inspiration */}
        <div style={{
        position: 'relative',
        background: 'linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%)',
        border: '1px solid #fde68a',
        borderRadius: 12,
        padding: '10px 14px',
        marginBottom: 12
      }}>
          <Washi color="#fbbf24" top={-6} left="50%" rotate={-6} width={64} />
          <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.08em', color: '#a16207', textTransform: 'uppercase', marginBottom: 4 }}>
            💡 Today's Inspiration
          </div>
          <div style={{ fontSize: 12, fontWeight: 600, color: '#78350f', fontStyle: 'italic', lineHeight: 1.45 }}>
            "Teaching kids to count is fine, but teaching them what counts is best." <span style={{ fontStyle: 'normal', fontWeight: 500, color: '#a16207' }}>— Bob Talbert</span>
          </div>
        </div>

        {/* 4 stat cards with washi tape */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 14 }}>
          {[
        { bg: '#fce7f3', border: '#fbcfe8', tape: '#f9a8d4', n: 0, label: 'Need Grading', accent: 'var(--primary-pink)', icon: '🤚' },
        { bg: '#dbeafe', border: '#bfdbfe', tape: '#93c5fd', n: 1, label: 'Lessons Today', accent: 'var(--primary-blue)', icon: '📅' },
        { bg: '#dcfce7', border: '#bbf7d0', tape: '#86efac', n: 0, label: 'Completed', accent: 'var(--success-green)', icon: '📈' },
        { bg: '#ede9fe', border: '#ddd6fe', tape: '#c4b5fd', n: 0, label: 'Students', accent: 'var(--primary-purple)', icon: '➕' }].
        map((c, i) =>
        <div key={i} style={{
          position: 'relative',
          background: c.bg, border: `1px solid ${c.border}`, borderRadius: 10,
          padding: '10px',
          aspectRatio: '1 / 1',
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start',
          gap: 6
        }}>
              <Washi color={c.tape} top={-6} left="65%" rotate={(i % 2 === 0 ? -1 : 1) * (8 + i * 2)} width={42} />
              <div style={{
            position: 'absolute', top: 8, left: 8,
            width: 22, height: 22, borderRadius: '50%',
            background: 'rgba(255,255,255,0.9)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 11,
            lineHeight: 1
          }}>{c.icon}</div>
              <div style={{ fontSize: 24, fontWeight: 800, fontFamily: 'var(--font-display)', color: 'var(--text-primary)', lineHeight: 1 }}>{c.n}</div>
              <div style={{ fontSize: 8.5, fontWeight: 800, color: c.accent, textTransform: 'uppercase', letterSpacing: '0.06em', lineHeight: 1.1 }}>{c.label}</div>
            </div>
        )}
        </div>

        {/* AI Homeschool Team */}
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
            <h3 style={{ fontSize: 15, fontWeight: 800, fontFamily: 'var(--font-display)', margin: 0 }}>Your Homeschool Team</h3>
            <span style={{ fontSize: 11 }}>✨</span>
          </div>
          <div style={{ fontSize: 10, color: 'var(--text-secondary)', marginBottom: 8 }}>Your AI helpers, working behind the scenes for you.</div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {[
          { name: 'Ivy', role: 'Learning Planner', desc: 'Plans calm homeschool days.', glyph: '🗓️', gradient: 'linear-gradient(160deg, #d1fae5 0%, #a7f3d0 100%)', accent: '#10b981' },
          { name: 'Pip', role: 'Lesson Builder', desc: 'Builds clear lessons fast.', glyph: '✏️', gradient: 'linear-gradient(160deg, #fef3c7 0%, #fde68a 100%)', accent: '#f59e0b' },
          { name: 'Penny', role: 'Grading Helper', desc: 'Reviews work, keeps notes.', glyph: '✅', gradient: 'linear-gradient(160deg, #fce7f3 0%, #fbcfe8 100%)', accent: '#ec4899' },
          { name: 'Sage', role: 'Progress Coach', desc: 'Catches gaps before they grow.', glyph: '📈', gradient: 'linear-gradient(160deg, #ede9fe 0%, #ddd6fe 100%)', accent: '#a855f7' }].
          map((h) =>
          <div key={h.name} style={{ background: 'white', border: '1px solid var(--border-subtle)', borderRadius: 10, overflow: 'hidden', padding: 4 }}>
                <HelperPortrait name={h.name} gradient={h.gradient} accent={h.accent} glyph={h.glyph} />
                <div style={{ padding: '6px 4px 4px', textAlign: 'center' }}>
                  <div style={{ fontSize: 11, fontWeight: 800, fontFamily: 'var(--font-display)', color: 'var(--text-primary)', lineHeight: 1.1 }}>{h.name}</div>
                  <div style={{ fontSize: 7.5, fontWeight: 800, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 2 }}>{h.role}</div>
                </div>
              </div>
          )}
          </div>
        </div>

      </div>
    </div>
  </div>;


Object.assign(window, { DashboardMockup });