// Dashboard mockup — faithful recreation of the HomeScholar dashboard screenshot

const DashboardMockup = ({ compact = false }) => (
  <div style={{
    background: 'white',
    borderRadius: 16,
    boxShadow: 'var(--shadow-xl)',
    overflow: 'hidden',
    border: '1px solid var(--border-subtle)',
    fontSize: 12,
    fontFamily: 'var(--font-body)',
  }}>
    {/* 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>
        <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#f59e0b' }}></div>
        <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#10b981' }}></div>
      </div>
      <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
        <div style={{ background: 'white', padding: '4px 12px', borderRadius: 6, fontSize: 11, color: '#94a3b8', minWidth: 200, textAlign: 'center' }}>
          app.homescholar.app/dashboard
        </div>
      </div>
    </div>

    <div style={{ display: 'flex', minHeight: 480 }}>
      {/* Sidebar */}
      <div style={{ width: 160, background: 'white', borderRight: '1px solid var(--border-subtle)', padding: 12, flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px', marginBottom: 16 }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--signature-gradient)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="bookOpen" size={12} style={{ color: 'white' }} />
          </div>
          <span style={{ fontWeight: 700, fontSize: 13, color: 'var(--primary-blue)' }}>HomeScholar</span>
        </div>
        {[
          { icon: 'home', label: 'Home', active: true },
          { icon: 'sparkles', label: 'AI Tools' },
          { icon: 'layers', label: 'Differentiation' },
          { icon: 'target', label: 'Test Prep' },
          { icon: 'puzzle', label: 'Game Creator' },
          { icon: 'document', label: 'Documents' },
          { icon: 'users', label: 'Community' },
          { icon: 'heart', label: 'Favorites' },
          { icon: 'map', label: 'Curriculum' },
          { icon: 'user', label: 'Students' },
          { icon: 'bookOpen', label: 'Classes' },
          { icon: 'clipboard', label: 'Assignments' },
          { icon: 'trophy', label: 'Gradebook' },
          { icon: 'calendar', label: 'Calendar' },
        ].map((item, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '6px 10px', borderRadius: 6, marginBottom: 2,
            background: item.active ? 'hsla(217, 91%, 60%, 0.1)' : 'transparent',
            color: item.active ? 'var(--primary-blue)' : 'var(--text-secondary)',
            fontSize: 11, fontWeight: item.active ? 600 : 500,
          }}>
            <Icon name={item.icon} size={13} />
            <span>{item.label}</span>
          </div>
        ))}
      </div>

      {/* Main content */}
      <div style={{ flex: 1, background: '#f8fafc', padding: 16, overflow: 'hidden' }}>
        {/* Search bar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <div style={{ flex: 1, maxWidth: 220, display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', background: 'white', border: '1px solid var(--border-subtle)', borderRadius: 8, fontSize: 11, color: 'var(--text-tertiary)' }}>
            <Icon name="search" size={12} />
            Search...
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, alignItems: 'center' }}>
            <div style={{ position: 'relative', color: 'var(--text-secondary)' }}>
              <Icon name="bell" size={14} />
              <div style={{ position: 'absolute', top: -4, right: -4, width: 14, height: 14, borderRadius: '50%', background: 'var(--warning-red)', color: 'white', fontSize: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }}>3</div>
            </div>
            <div className="avatar av-purple avatar-sm" style={{ width: 24, height: 24, fontSize: 10 }}>L</div>
          </div>
        </div>

        <h3 style={{ fontSize: 18, fontWeight: 800, color: 'var(--text-primary)', marginBottom: 2, fontFamily: 'var(--font-display)' }}>
          Good afternoon, Rose! <span style={{ display: 'inline-block' }}>👋</span>
        </h3>
        <div style={{ color: 'var(--text-secondary)', fontSize: 11, marginBottom: 14 }}>Thursday, April 23, 2026</div>

        {/* Inspiration banner */}
        <div style={{
          background: 'var(--signature-gradient)',
          borderRadius: 10,
          padding: 14,
          color: 'white',
          marginBottom: 14,
          position: 'relative',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, fontWeight: 700, letterSpacing: '0.05em' }}>
              💡 ✨ TODAY'S INSPIRATION
            </div>
            <div style={{ background: 'rgba(255,255,255,0.2)', padding: '2px 8px', borderRadius: 12, fontSize: 9, fontWeight: 600 }}>New tip</div>
          </div>
          <div style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.4 }}>
            "The roots of education are bitter, but the fruit is sweet."
          </div>
          <div style={{ fontSize: 10, opacity: 0.8, marginTop: 4 }}>— Aristotle</div>
        </div>

        {/* Stat cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 14 }}>
          <StatCard color="red" icon="bell" value="7" label="NEED GRADING" note="3 from Emma, 4 from Jake" button="Grade Now" btnColor="red" />
          <StatCard color="blue" icon="calendar" value="4" label="LESSONS TODAY" note="Next: Math at 10:30" button="View Schedule" btnColor="outline" />
          <StatCard color="green" icon="chart" value="23/30" label="LESSONS COMPLETED" note="3 days ahead 🎉" progress={76} />
          <StatCard color="purple" icon="check" value="3" label="ACTIVE STUDENTS" note="All on track ✓" avatars button="View All" btnColor="purple-outline" />
        </div>

        {/* Active classes */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <div style={{ fontSize: 13, fontWeight: 800, fontFamily: 'var(--font-display)' }}>Active Classes This Week</div>
          <a href="#" style={{ fontSize: 10, color: 'var(--primary-blue)', fontWeight: 600 }}>View All →</a>
        </div>

        <ClassRow
          color="green"
          icon="bookOpen"
          title="4th Grade Science"
          subtitle="Ecosystems & Food Chains"
          student="Emma Johnson"
          stuColor="av-green"
          progress={80}
          badge="In Progress"
          badgeColor="badge-blue"
          next="Photosynthesis lab experiment"
          nextTime="Tomorrow, 10:00 AM"
        />
      </div>
    </div>
  </div>
);

const StatCard = ({ color, icon, value, label, note, button, btnColor, progress, avatars }) => {
  const accent = { red: 'var(--warning-red)', blue: 'var(--primary-blue)', green: 'var(--success-green)', purple: 'var(--primary-purple)' }[color];
  return (
    <div style={{
      background: 'white',
      borderRadius: 8,
      padding: 10,
      borderLeft: `3px solid ${accent}`,
      boxShadow: 'var(--shadow-sm)',
      fontSize: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
        {avatars ? (
          <div className="avatar-stack">
            <div className="avatar av-green" style={{ width: 18, height: 18, fontSize: 8, border: '1.5px solid white' }}>EJ</div>
            <div className="avatar av-purple" style={{ width: 18, height: 18, fontSize: 8, border: '1.5px solid white' }}>JJ</div>
            <div className="avatar av-teal" style={{ width: 18, height: 18, fontSize: 8, border: '1.5px solid white' }}>SJ</div>
          </div>
        ) : (
          <div className={`icon-box icon-${color}`} style={{ width: 22, height: 22, borderRadius: 6 }}>
            <Icon name={icon} size={12} />
          </div>
        )}
        <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--text-primary)', fontFamily: 'var(--font-display)' }}>{value}</div>
      </div>
      <div style={{ fontSize: 8, fontWeight: 700, letterSpacing: '0.06em', color: 'var(--text-secondary)', marginBottom: 2 }}>{label}</div>
      <div style={{ fontSize: 9, color: 'var(--text-secondary)', marginBottom: 6, minHeight: 20 }}>{note}</div>
      {progress !== undefined && (
        <div style={{ height: 4, background: '#e2e8f0', borderRadius: 2, overflow: 'hidden', marginBottom: 6 }}>
          <div style={{ height: '100%', width: progress + '%', background: accent, borderRadius: 2 }}></div>
        </div>
      )}
      {button && (
        <div style={{
          padding: '4px 8px',
          borderRadius: 5,
          fontSize: 9,
          fontWeight: 600,
          textAlign: 'center',
          background: btnColor === 'red' ? accent : btnColor === 'outline' ? 'white' : 'white',
          border: btnColor === 'outline' ? `1px solid ${accent}` : btnColor === 'purple-outline' ? `1px solid ${accent}` : 'none',
          color: btnColor === 'red' ? 'white' : accent,
        }}>
          {button}
        </div>
      )}
    </div>
  );
};

const ClassRow = ({ color, icon, title, subtitle, student, stuColor, progress, badge, badgeColor, next, nextTime }) => (
  <div style={{ background: 'white', borderRadius: 10, padding: 12, border: '1px solid var(--border-subtle)' }}>
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 8 }}>
      <div className={`icon-box icon-${color}`} style={{ width: 28, height: 28, borderRadius: 6 }}>
        <Icon name={icon} size={14} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 12, fontWeight: 700 }}>{title}</div>
          <span className={`badge ${badgeColor}`} style={{ fontSize: 8, padding: '2px 6px' }}>{badge}</span>
        </div>
        <div style={{ fontSize: 10, color: 'var(--text-secondary)' }}>{subtitle}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 4 }}>
          <div className={`avatar ${stuColor}`} style={{ width: 14, height: 14, fontSize: 7 }}>EJ</div>
          <span style={{ fontSize: 9, color: 'var(--text-secondary)' }}>{student}</span>
        </div>
      </div>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 9, marginBottom: 4 }}>
      <span style={{ color: 'var(--text-secondary)' }}>Lesson 4 of 5 completed</span>
      <span style={{ fontWeight: 700 }}>{progress}%</span>
    </div>
    <div style={{ height: 4, background: '#e2e8f0', borderRadius: 2, overflow: 'hidden', marginBottom: 10 }}>
      <div style={{ height: '100%', width: progress + '%', background: 'var(--success-green)', borderRadius: 2 }}></div>
    </div>
    <div style={{ background: '#eff6ff', borderRadius: 6, padding: 8, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
      <Icon name="arrowRight" size={10} style={{ color: 'var(--primary-blue)' }} />
      <div>
        <div style={{ fontSize: 9, fontWeight: 600 }}>Next: {next}</div>
        <div style={{ fontSize: 8, color: 'var(--text-secondary)' }}>{nextTime}</div>
      </div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
      <div style={{ textAlign: 'center', padding: '5px 8px', border: '1px solid var(--border-subtle)', borderRadius: 5, fontSize: 9, fontWeight: 600 }}>View Details</div>
      <div style={{ textAlign: 'center', padding: '5px 8px', background: 'var(--signature-gradient)', color: 'white', borderRadius: 5, fontSize: 9, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
        <Icon name="sparkles" size={10} /> Generate
      </div>
    </div>
  </div>
);

window.DashboardMockup = DashboardMockup;