/* eslint-disable */

function HeroMockup() {
  const navItems = [
    { icon: '◉', label: 'Dashboard', active: true },
    { icon: '◎', label: 'My Curriculum' },
    { icon: '◌', label: 'AI Practitioners' },
    { icon: '◍', label: 'Live Sessions' },
    { icon: '◈', label: 'Certification' },
    { icon: '◇', label: 'My Team' },
  ];
  return (
    <div className="hero-shadow" style={{ background: 'var(--muted-50)', border: '1px solid var(--muted-200)', borderRadius: 16, overflow: 'hidden' }}>
      <MockChrome title="praxis.shiftworksai.com/dashboard" />
      <div style={{ display: 'flex', height: 360, overflow: 'hidden' }}>
        <div style={{ flexShrink: 0, width: 164, background: '#fafafa', borderRight: '1px solid var(--muted-200)', padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: 'linear-gradient(135deg,#7c3aed,#00c8e0)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 13, fontWeight: 800 }}>P</div>
            <span className="font-display gradient-text-subtle" style={{ fontSize: 14, fontWeight: 900, letterSpacing: '-0.5px' }}>Praxis</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {navItems.map(({ icon, label, active }) => (
              <div key={label} style={{
                fontSize: 11, padding: '6px 10px', borderRadius: 6,
                display: 'flex', alignItems: 'center', gap: 6,
                color: active ? 'var(--praxis-primary)' : 'var(--muted-400)',
                background: active ? 'rgba(124,58,237,0.08)' : 'transparent',
                fontWeight: active ? 600 : 400,
              }}>
                <span style={{ fontSize: 10 }}>{icon}</span> {label}
              </div>
            ))}
          </div>
        </div>
        <div style={{ flex: 1, padding: 16, overflow: 'hidden' }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--fg)', marginBottom: 3 }}>Good morning.</div>
          <div style={{ fontSize: 11, color: 'var(--muted-400)', marginBottom: 14 }}>Your team is 68% certified. Next live session in 4 days.</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, marginBottom: 12 }}>
            {[
              { val: '68%', color: 'var(--fg)', label: 'Team certified' },
              { val: '12',  color: 'var(--praxis-primary)', label: 'Sessions booked' },
              { val: '3',   color: 'var(--green)', label: 'Certified this week' },
            ].map(({ val, color, label }) => (
              <div key={label} style={{ background: '#fafafa', border: '1px solid var(--muted-200)', borderRadius: 8, padding: 10 }}>
                <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.5px', color }}>{val}</div>
                <div style={{ fontSize: 10, color: 'var(--muted-400)' }}>{label}</div>
              </div>
            ))}
          </div>
          <div style={{ background: '#fafafa', border: '1px solid var(--muted-200)', borderRadius: 8, padding: 12 }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted-700)', marginBottom: 10 }}>Team Progress</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { initials: 'SC', bg: '#7c3aed', name: 'Sarah C.', pct: 85, pill: { label: 'Certified', variant: 'green' } },
                { initials: 'MR', bg: '#0284c7', name: 'Mike R.', pct: 52, pill: { label: 'Module 2', variant: 'amber' } },
                { initials: 'JL', bg: '#db2777', name: 'Jamie L.', pct: 20, pill: { label: 'Started', variant: 'gray' } },
              ].map(({ initials, bg, name, pct, pill }) => (
                <div key={name} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Avatar initials={initials} bg={bg} size={22} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg)', marginBottom: 4 }}>{name}</div>
                    <ProgressBar pct={pct} />
                  </div>
                  <Pill variant={pill.variant}>{pill.label}</Pill>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function PractitionersMock() {
  return (
    <div className="card-shadow" style={{ background: 'white', border: '1px solid var(--muted-200)', borderRadius: 12, overflow: 'hidden' }}>
      <MockChrome title="AI Practitioners" />
      <div style={{ padding: 14 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted-700)', marginBottom: 10 }}>Available practitioners</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { initials: 'SD', bg: 'linear-gradient(135deg,#7c3aed,#00c8e0)', name: 'ShiftWorks Practitioner', role: 'Ops · Content · SOPs' },
            { initials: 'AL', bg: '#0284c7', name: 'ShiftWorks Practitioner', role: 'Marketing · Analytics' },
          ].map(({ initials, bg, name, role }) => (
            <div key={role} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--muted-50)', borderRadius: 10, padding: 10 }}>
              <div style={{ width: 30, height: 30, borderRadius: 999, background: bg, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, flexShrink: 0 }}>{initials}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg)' }}>{name}</div>
                <div style={{ fontSize: 10, color: 'var(--muted-400)' }}>{role}</div>
              </div>
              <button style={{ background: 'var(--praxis-primary)', color: 'white', fontSize: 11, fontWeight: 600, padding: '6px 12px', borderRadius: 7, border: 'none', cursor: 'pointer' }}>Book</button>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 10, padding: 10, background: 'var(--muted-50)', border: '1px solid var(--muted-200)', borderRadius: 10 }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--muted-500)', marginBottom: 4, textTransform: 'uppercase', letterSpacing: .5 }}>Inbox · 2 threads</div>
          <div style={{ fontSize: 11, color: 'var(--muted-700)', lineHeight: 1.5 }}>
            <strong style={{ color: 'var(--fg)' }}>Practitioner · 2h ago:</strong> "Your mission 2 submission looks good — try tightening constraint #3 next time."
          </div>
        </div>
      </div>
    </div>
  );
}

function CurriculumMock() {
  return (
    <div className="card-shadow" style={{ background: 'white', border: '1px solid var(--muted-200)', borderRadius: 12, overflow: 'hidden' }}>
      <MockChrome title="My Curriculum" />
      <div style={{ padding: 14 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted-700)', marginBottom: 10 }}>Q1 Track — Operations Team</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ background: 'var(--muted-50)', borderRadius: 6, padding: '8px 10px', borderLeft: '3px solid var(--green)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontSize: 11, fontWeight: 600 }}>Mission 1: RCTC Framework</span>
              <Pill variant="green">✓ Done</Pill>
            </div>
          </div>
          <div style={{ background: 'var(--muted-50)', borderRadius: 6, padding: '8px 10px', borderLeft: '3px solid var(--praxis-primary)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
              <span style={{ fontSize: 11, fontWeight: 600 }}>Mission 2: Workflow Automation</span>
              <Pill variant="purple">In progress</Pill>
            </div>
            <ProgressBar pct={55} />
            <div style={{ fontSize: 9, color: 'var(--muted-400)', marginTop: 4 }}>3 of 5 deliverables shipped</div>
          </div>
          <div style={{ background: 'var(--muted-50)', borderRadius: 6, padding: '8px 10px', borderLeft: '3px solid var(--muted-200)' }}>
            <span style={{ fontSize: 11, color: 'var(--muted-400)' }}>Mission 3: Advanced Prompting</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function CertificationMock() {
  return (
    <div className="card-shadow" style={{ background: 'white', border: '1px solid var(--muted-200)', borderRadius: 12, overflow: 'hidden' }}>
      <MockChrome title="Certification" />
      <div style={{ padding: 14 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted-700)', marginBottom: 10 }}>Portfolio Review</div>
        <div style={{ background: 'var(--muted-50)', borderRadius: 10, padding: 10, marginBottom: 8 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg)', marginBottom: 3 }}>Sarah Chen — Mission 2</div>
          <div style={{ fontSize: 10, color: 'var(--muted-400)', marginBottom: 8 }}>Mission Submitted</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <div style={{ background: 'white', border: '1px solid var(--muted-200)', borderRadius: 5, padding: '4px 8px', fontSize: 10, color: 'var(--muted-700)' }}>Review Notes</div>
            <div style={{ background: 'white', border: '1px solid var(--muted-200)', borderRadius: 5, padding: '4px 8px', fontSize: 10, color: 'var(--muted-700)' }}>Mission Rubric</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
          <button style={{ background: 'var(--muted-100)', color: 'var(--muted-700)', border: 'none', borderRadius: 6, padding: '5px 10px', fontSize: 10, fontWeight: 600, cursor: 'pointer' }}>Request Revisions</button>
          <button style={{ background: 'var(--green)', color: 'white', border: 'none', borderRadius: 6, padding: '5px 10px', fontSize: 10, fontWeight: 600, cursor: 'pointer' }}>✓ Certify</button>
        </div>
      </div>
    </div>
  );
}

function LiveSessionsMock() {
  return (
    <div className="card-shadow" style={{ background: 'white', border: '1px solid var(--muted-200)', borderRadius: 16, overflow: 'hidden' }}>
      <MockChrome title="Live Sessions" />
      <div style={{ padding: 16 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--muted-700)', marginBottom: 12 }}>Upcoming sessions</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ background: 'var(--muted-50)', border: '1px solid var(--muted-200)', borderRadius: 12, padding: 14, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <div style={{ background: 'linear-gradient(135deg,#7c3aed,#00c8e0)', borderRadius: 8, padding: 8, textAlign: 'center', flexShrink: 0, minWidth: 50 }}>
              <div style={{ fontSize: 11, fontWeight: 800, color: 'white', letterSpacing: .5 }}>APR</div>
              <div style={{ fontSize: 20, fontWeight: 800, color: 'white', lineHeight: 1, letterSpacing: '-1px' }}>22</div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--fg)', marginBottom: 2 }}>Q2: Workflow Acceleration</div>
              <div style={{ fontSize: 11, color: 'var(--muted-400)' }}>Facilitated by ShiftWorks · 10:00 AM PST · 90 min</div>
              <div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
                <Pill variant="green">18 attending</Pill>
                <Pill variant="purple">Recording available</Pill>
              </div>
            </div>
            <button style={{ background: 'var(--fg)', color: 'white', fontSize: 11, fontWeight: 600, padding: '6px 14px', borderRadius: 7, border: 'none', cursor: 'pointer', flexShrink: 0 }}>RSVP</button>
          </div>
          <div style={{ background: 'var(--muted-50)', border: '1px solid var(--muted-200)', borderRadius: 12, padding: 14, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <div style={{ background: 'var(--muted-100)', border: '1px solid var(--muted-200)', borderRadius: 8, padding: 8, textAlign: 'center', flexShrink: 0, minWidth: 50 }}>
              <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--muted-400)', letterSpacing: .5 }}>JUL</div>
              <div style={{ fontSize: 20, fontWeight: 800, color: 'var(--muted-400)', lineHeight: 1, letterSpacing: '-1px' }}>22</div>
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--muted-700)', marginBottom: 2 }}>Q3: Advanced Prompting</div>
              <div style={{ fontSize: 11, color: 'var(--muted-400)' }}>Facilitated by ShiftWorks · 10:00 AM PST</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function BookingMock() {
  return (
    <div className="card-shadow" style={{ background: 'white', border: '1px solid var(--muted-200)', borderRadius: 16, overflow: 'hidden' }}>
      <MockChrome title="WORKSHOP PORTAL" />
      <div style={{ padding: 16 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--muted-700)', marginBottom: 2 }}>Modern Work Foundations Workshop</div>
        <div style={{ fontSize: 11, color: 'var(--muted-400)', marginBottom: 14 }}>INTAKE FORM</div>
        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted-700)', marginBottom: 8 }}>Highest-impact workflow to improve?</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 14 }}>
          {[
            { label: 'Client reporting', active: true },
            { label: 'Internal hand-off', active: false },
            { label: 'SOP writing', active: false },
            { label: 'Something else', active: false },
          ].map(({ label, active }) => (
            <div key={label} style={{
              borderRadius: 8, padding: '8px 10px', fontSize: 11, fontWeight: 500, cursor: 'pointer',
              ...(active
                ? { background: 'rgba(124,58,237,0.08)', border: '1px solid rgba(124,58,237,0.25)', color: 'var(--praxis-primary)' }
                : { background: 'var(--muted-50)', border: '1px solid var(--muted-200)', color: 'var(--muted-700)' })
            }}>{label}</div>
          ))}
        </div>
        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted-700)', marginBottom: 8 }}>Current AI Comfort Level</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6 }}>
          {[
            { label: 'Rare use', active: true },
            { label: 'Moderate', active: false },
            { label: 'Daily use', active: false },
          ].map(({ label, active }) => (
            <div key={label} style={{
              borderRadius: 6, padding: '6px 8px', textAlign: 'center', fontSize: 10, fontWeight: 600, cursor: 'pointer',
              ...(active
                ? { background: 'rgba(124,58,237,0.08)', border: '1px solid rgba(124,58,237,0.25)', color: 'var(--praxis-primary)' }
                : { background: 'var(--muted-50)', border: '1px solid var(--muted-200)', color: 'var(--muted-700)' })
            }}>{label}</div>
          ))}
        </div>
        <button style={{ marginTop: 12, width: '100%', background: 'var(--fg)', color: 'white', border: 'none', borderRadius: 10, padding: '10px 0', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>Confirm booking</button>
      </div>
    </div>
  );
}

function TeamOverviewMock() {
  return (
    <div className="card-shadow" style={{ background: 'white', border: '1px solid var(--muted-200)', borderRadius: 16, overflow: 'hidden' }}>
      <MockChrome title="Team Overview" />
      <div style={{ padding: 16 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, marginBottom: 14 }}>
          {[
            { val: '14', color: 'var(--green)', label: 'Certified' },
            { val: '8',  color: 'var(--praxis-primary)', label: 'In track' },
            { val: '3',  color: 'var(--muted-400)', label: 'Not started' },
          ].map(({ val, color, label }) => (
            <div key={label} style={{ background: 'var(--muted-50)', border: '1px solid var(--muted-200)', borderRadius: 10, padding: 10, textAlign: 'center' }}>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-1px', color }}>{val}</div>
              <div style={{ fontSize: 10, color: 'var(--muted-400)' }}>{label}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted-700)', marginBottom: 4 }}>Team members</div>
          {[
            { initials: 'SC', bg: '#16a34a', name: 'Sarah Chen', pct: 100, pill: { label: 'Certified', variant: 'green' } },
            { initials: 'MR', bg: '#0284c7', name: 'Mike R.', pct: 52, pill: { label: '52%', variant: 'amber' } },
            { initials: 'JL', bg: '#db2777', name: 'Jamie L.', pct: 20, pill: { label: '20%', variant: 'gray' } },
            { initials: 'AK', bg: '#7c3aed', name: 'Ari K.',   pct: 72, pill: { label: '72%', variant: 'purple' } },
          ].map(({ initials, bg, name, pct, pill }) => (
            <div key={name} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 8, background: 'var(--muted-50)', borderRadius: 10 }}>
              <Avatar initials={initials} bg={bg} size={22} />
              <div style={{ flex: 1, fontSize: 11, color: 'var(--fg)', fontWeight: 500 }}>{name}</div>
              <div style={{ width: 72 }}><ProgressBar pct={pct} /></div>
              <Pill variant={pill.variant}>{pill.label}</Pill>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  HeroMockup, PractitionersMock, CurriculumMock, CertificationMock,
  LiveSessionsMock, BookingMock, TeamOverviewMock
});