// mockui.jsx — embedded "Shelfire app" UI fragments used throughout the
// landing page. Each component is a self-contained, statically-styled
// snapshot of a real Shelfire surface (library, player, catalog, etc.).
// Styling pulls from CSS vars defined in shelfire.html: --bg, --fg, --mut,
// --line, --surface, --surface-2, --accent, --accent-ink.

// ── tiny atoms ──────────────────────────────────────────────────────────────

function Poster({ hue = 30, label, w = 92, h = 138, rating, dim = false, progress }) {
  // Posters are intentionally NOT illustrated — we use diagonally-striped
  // SVG placeholders + a mono label so the design doesn't lie about content.
  const id = `p-${hue}-${w}-${h}-${(label || '').replace(/\W+/g, '')}`;
  return (
    <div style={{
      position: 'relative', width: w, height: h, borderRadius: 6,
      overflow: 'hidden', flexShrink: 0,
      boxShadow: '0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px rgba(0,0,0,.35)',
      opacity: dim ? 0.45 : 1,
    }}>
      <svg width="100%" height="100%" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none"
           style={{ display: 'block' }}>
        <defs>
          <pattern id={id} width="8" height="8" patternUnits="userSpaceOnUse"
                   patternTransform="rotate(45)">
            <rect width="8" height="8" fill={`oklch(0.22 0.04 ${hue})`} />
            <rect width="4" height="8" fill={`oklch(0.26 0.05 ${hue})`} />
          </pattern>
        </defs>
        <rect width={w} height={h} fill={`url(#${id})`} />
      </svg>
      {rating != null && (
        <div style={{
          position: 'absolute', top: 5, right: 5, padding: '1px 5px',
          fontSize: 9, fontWeight: 600, borderRadius: 3,
          background: 'rgba(0,0,0,.55)', color: 'var(--fg)',
          fontFamily: 'var(--mono)',
        }}>★ {rating}</div>
      )}
      <div style={{
        position: 'absolute', left: 6, right: 6, bottom: 6,
        fontFamily: 'var(--mono)', fontSize: 8.5, letterSpacing: '.04em',
        textTransform: 'uppercase', color: 'rgba(255,255,255,.78)',
        textShadow: '0 1px 2px rgba(0,0,0,.6)', lineHeight: 1.15,
      }}>{label}</div>
      {progress != null && (
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, height: 3,
          background: 'rgba(0,0,0,.5)',
        }}>
          <div style={{
            width: `${progress}%`, height: '100%', background: 'var(--accent)',
          }} />
        </div>
      )}
    </div>
  );
}

function WindowChrome({ title = 'Shelfire', children, style }) {
  return (
    <div style={{
      borderRadius: 14, overflow: 'hidden', background: 'var(--surface)',
      border: '.5px solid var(--line)',
      boxShadow: '0 1px 0 rgba(255,255,255,.05) inset, 0 30px 90px -20px rgba(0,0,0,.75), 0 10px 30px rgba(0,0,0,.4)',
      ...style,
    }}>
      <div style={{
        height: 30, display: 'flex', alignItems: 'center', gap: 8,
        padding: '0 12px', borderBottom: '.5px solid var(--line)',
        background: 'var(--surface-2)',
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <i style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f57' }} />
          <i style={{ width: 10, height: 10, borderRadius: '50%', background: '#febc2e' }} />
          <i style={{ width: 10, height: 10, borderRadius: '50%', background: '#28c840' }} />
        </div>
        <div style={{
          flex: 1, textAlign: 'center', fontSize: 11, color: 'var(--mut)',
          fontFamily: 'var(--mono)', letterSpacing: '.04em',
        }}>{title}</div>
        <div style={{ width: 38 }} />
      </div>
      {children}
    </div>
  );
}

// ── 1. Full app shell (hero) ────────────────────────────────────────────────

function AppShell() {
  const continueRows = [
    { label: 'Foundation · S2E04', hue: 25, prog: 38, time: '24:11 / 58:00' },
    { label: 'Shōgun · S1E08', hue: 12, prog: 72, time: '42:50 / 59:30' },
    { label: 'Severance · S2E03', hue: 200, prog: 15, time: '08:12 / 52:40' },
    { label: 'Andor · S2E01', hue: 60, prog: 91, time: '49:20 / 54:10' },
  ];
  const library = [
    { label: 'Dune Pt. II', hue: 35, r: '8.4' },
    { label: 'The Bear', hue: 18, r: '8.7' },
    { label: 'True Detective', hue: 250, r: '8.0' },
    { label: 'Mad Men', hue: 220, r: '8.6' },
    { label: 'Better Call Saul', hue: 280, r: '9.0' },
    { label: 'Chernobyl', hue: 90, r: '9.4' },
  ];
  const nav = [
    ['◐', 'Continue Watching', true],
    ['❐', 'Library', false],
    ['✦', 'To Watch', false],
    ['♥', 'Favorites', false],
    ['◇', 'Discover', false],
    ['⊞', 'Custom Lists', false],
  ];
  const lists = [
    ['#d97757', 'Comfort Rewatches', 12],
    ['#5b8def', 'Slow Burns', 8],
    ['#3a9e6e', 'A24 Catalog', 21],
    ['#b46cd9', 'Saturday Night', 6],
  ];
  return (
    <WindowChrome title="shelfire · library">
      <div style={{ display: 'grid', gridTemplateColumns: '188px 1fr', height: 540 }}>
        {/* Sidebar */}
        <aside style={{
          borderRight: '.5px solid var(--line)', padding: '14px 10px',
          display: 'flex', flexDirection: 'column', gap: 14,
          background: 'var(--surface-2)',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '2px 6px',
          }}>
            <Logo size={18} />
            <span style={{ fontWeight: 600, fontSize: 13, letterSpacing: '-.01em' }}>
              Shelfire
            </span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
            {nav.map(([icon, label, active]) => (
              <div key={label} style={{
                display: 'flex', alignItems: 'center', gap: 9, padding: '6px 8px',
                borderRadius: 6, fontSize: 12, cursor: 'default',
                background: active ? 'var(--accent-soft)' : 'transparent',
                color: active ? 'var(--accent)' : 'var(--fg)',
                fontWeight: active ? 600 : 400,
              }}>
                <span style={{ width: 14, textAlign: 'center', opacity: .8 }}>{icon}</span>
                <span style={{ flex: 1 }}>{label}</span>
              </div>
            ))}
          </div>
          <div>
            <div style={{
              fontSize: 9.5, letterSpacing: '.1em', textTransform: 'uppercase',
              color: 'var(--mut)', padding: '0 8px 6px',
            }}>Custom Lists</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              {lists.map(([c, label, n]) => (
                <div key={label} style={{
                  display: 'flex', alignItems: 'center', gap: 9, padding: '5px 8px',
                  borderRadius: 6, fontSize: 12,
                }}>
                  <span style={{
                    width: 10, height: 10, borderRadius: 3, background: c,
                    boxShadow: '0 0 0 .5px rgba(0,0,0,.4) inset',
                  }} />
                  <span style={{ flex: 1 }}>{label}</span>
                  <span style={{
                    fontSize: 10, color: 'var(--mut)', fontVariantNumeric: 'tabular-nums',
                  }}>{n}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 'auto', padding: '8px', display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{
              width: 26, height: 26, borderRadius: '50%',
              background: 'linear-gradient(135deg, #d97757, #b46cd9)',
            }} />
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 11.5, fontWeight: 500 }}>Léa Martin</div>
              <div style={{ fontSize: 9.5, color: 'var(--mut)', fontFamily: 'var(--mono)' }}>
                synced · 2 min ago
              </div>
            </div>
          </div>
        </aside>
        {/* Main */}
        <main style={{ padding: '16px 18px 18px', overflow: 'hidden' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16,
          }}>
            <div style={{
              flex: 1, height: 26, borderRadius: 7, border: '.5px solid var(--line)',
              background: 'var(--surface-2)', display: 'flex', alignItems: 'center',
              padding: '0 10px', gap: 8, color: 'var(--mut)', fontSize: 11.5,
            }}>
              <span style={{ fontFamily: 'var(--mono)' }}>⌕</span>
              Search library, catalog, episodes…
              <span style={{
                marginLeft: 'auto', padding: '1px 5px', borderRadius: 3,
                border: '.5px solid var(--line)', fontFamily: 'var(--mono)', fontSize: 9.5,
              }}>⌘K</span>
            </div>
            {['All', 'Series', 'Films', 'Anime'].map((t, i) => (
              <div key={t} style={{
                padding: '5px 9px', borderRadius: 6, fontSize: 11,
                background: i === 0 ? 'var(--fg)' : 'transparent',
                color: i === 0 ? 'var(--bg)' : 'var(--mut)',
                border: i === 0 ? '0' : '.5px solid var(--line)',
                fontWeight: 500,
              }}>{t}</div>
            ))}
          </div>
          <SectionLabel>Continue Watching</SectionLabel>
          <div style={{ display: 'flex', gap: 12, marginBottom: 22 }}>
            {continueRows.map((r) => (
              <div key={r.label} style={{ width: 168 }}>
                <div style={{
                  position: 'relative', width: 168, height: 95, borderRadius: 6,
                  overflow: 'hidden',
                  boxShadow: '0 6px 18px rgba(0,0,0,.45)',
                }}>
                  <Stripes hue={r.hue} />
                  <div style={{
                    position: 'absolute', left: 0, right: 0, bottom: 0, height: 3,
                    background: 'rgba(0,0,0,.5)',
                  }}>
                    <div style={{
                      width: `${r.prog}%`, height: '100%', background: 'var(--accent)',
                    }} />
                  </div>
                  <div style={{
                    position: 'absolute', inset: 0, display: 'flex',
                    alignItems: 'center', justifyContent: 'center',
                  }}>
                    <div style={{
                      width: 28, height: 28, borderRadius: '50%',
                      background: 'rgba(0,0,0,.55)', display: 'grid', placeItems: 'center',
                      color: '#fff', fontSize: 11, paddingLeft: 2,
                    }}>▶</div>
                  </div>
                </div>
                <div style={{ marginTop: 7, fontSize: 11.5, fontWeight: 500 }}>{r.label}</div>
                <div style={{
                  fontSize: 10, color: 'var(--mut)', fontFamily: 'var(--mono)', marginTop: 2,
                }}>{r.time}</div>
              </div>
            ))}
          </div>
          <SectionLabel>Your Library
            <span style={{ marginLeft: 'auto', fontSize: 10.5, color: 'var(--mut)' }}>
              218 titles · 64% watched
            </span>
          </SectionLabel>
          <div style={{ display: 'flex', gap: 14 }}>
            {library.map((p) => (
              <div key={p.label} style={{ display: 'flex', flexDirection: 'column' }}>
                <Poster hue={p.hue} label={p.label} rating={p.r} w={104} h={156} />
              </div>
            ))}
          </div>
        </main>
      </div>
    </WindowChrome>
  );
}

function SectionLabel({ children }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline',
      fontSize: 10.5, letterSpacing: '.08em', textTransform: 'uppercase',
      color: 'var(--mut)', marginBottom: 9, fontWeight: 600,
    }}>{children}</div>
  );
}

function Stripes({ hue = 30 }) {
  const id = `stripe-${hue}-${Math.random().toString(36).slice(2, 6)}`;
  return (
    <svg width="100%" height="100%" preserveAspectRatio="none"
         style={{ position: 'absolute', inset: 0 }} viewBox="0 0 100 100">
      <defs>
        <pattern id={id} width="8" height="8" patternUnits="userSpaceOnUse"
                 patternTransform="rotate(45)">
          <rect width="8" height="8" fill={`oklch(0.22 0.04 ${hue})`} />
          <rect width="4" height="8" fill={`oklch(0.27 0.05 ${hue})`} />
        </pattern>
      </defs>
      <rect width="100" height="100" fill={`url(#${id})`} />
    </svg>
  );
}

function Logo({ size = 22 }) {
  return (
    <img
      src="./icon.png"
      width={size}
      height={size}
      alt="Shelfire"
      style={{ borderRadius: size * 0.22, display: 'block' }}
    />
  );
}

// ── Catalog / discovery ─────────────────────────────────────────────────────

function CatalogMock() {
  const items = [
    { label: 'Severance', hue: 200, year: 2022, r: '8.7', genre: 'Sci-fi · Drama', in: true },
    { label: 'Shōgun', hue: 22, year: 2024, r: '8.6', genre: 'Drama · History', in: false },
    { label: 'The Penguin', hue: 270, year: 2024, r: '8.5', genre: 'Crime', in: false },
    { label: 'Frieren', hue: 140, year: 2023, r: '9.0', genre: 'Anime · Fantasy', in: true },
    { label: 'Slow Horses', hue: 50, year: 2022, r: '8.3', genre: 'Spy · Drama', in: false },
    { label: 'Andor', hue: 18, year: 2022, r: '8.4', genre: 'Sci-fi', in: true },
  ];
  return (
    <div style={{
      borderRadius: 12, overflow: 'hidden', border: '.5px solid var(--line)',
      background: 'var(--surface)',
    }}>
      <div style={{
        padding: 14, borderBottom: '.5px solid var(--line)',
        display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
      }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginRight: 8 }}>Discover</div>
        {['Drama', 'Sci-fi', 'Anime', 'Crime', '2020-2026', '★ 8+', 'Ongoing'].map((f, i) => (
          <div key={f} style={{
            padding: '3px 9px', borderRadius: 999, fontSize: 11,
            border: '.5px solid var(--line)',
            background: i < 2 ? 'var(--accent-soft)' : 'transparent',
            color: i < 2 ? 'var(--accent)' : 'var(--fg)',
            fontWeight: i < 2 ? 600 : 400,
          }}>{f}</div>
        ))}
        <div style={{
          marginLeft: 'auto', fontSize: 11, color: 'var(--mut)', fontFamily: 'var(--mono)',
        }}>1,284 titles</div>
      </div>
      <div style={{
        padding: 16,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14,
      }}>
        {items.map((it) => (
          <div key={it.label} style={{
            display: 'flex', gap: 12, padding: 10, borderRadius: 8,
            background: 'var(--surface-2)', border: '.5px solid var(--line)',
          }}>
            <Poster hue={it.hue} label={it.label} w={70} h={104} />
            <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontSize: 12.5, fontWeight: 600 }}>{it.label}</div>
              <div style={{ fontSize: 10.5, color: 'var(--mut)', fontFamily: 'var(--mono)' }}>
                {it.year} · {it.genre}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 4 }}>
                <span style={{ color: 'var(--accent)', fontSize: 11 }}>★</span>
                <span style={{ fontSize: 11, fontVariantNumeric: 'tabular-nums', fontWeight: 600 }}>{it.r}</span>
                <span style={{ fontSize: 10, color: 'var(--mut)' }}>/ 10</span>
              </div>
              <div style={{ marginTop: 'auto', display: 'flex', gap: 5 }}>
                {it.in ? (
                  <div style={{
                    flex: 1, padding: '4px 8px', borderRadius: 5, fontSize: 10.5,
                    background: 'transparent', color: 'var(--mut)',
                    border: '.5px solid var(--line)', textAlign: 'center',
                  }}>✓ In library</div>
                ) : (
                  <div style={{
                    flex: 1, padding: '4px 8px', borderRadius: 5, fontSize: 10.5,
                    background: 'var(--accent)', color: 'var(--accent-ink)',
                    fontWeight: 600, textAlign: 'center',
                  }}>+ Add</div>
                )}
                <div style={{
                  width: 26, padding: '4px 0', borderRadius: 5, fontSize: 11,
                  border: '.5px solid var(--line)', textAlign: 'center',
                }}>♥</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Custom lists / rating ───────────────────────────────────────────────────

function ListsMock() {
  const lists = [
    { color: '#d97757', name: 'Comfort Rewatches', count: 12, hues: [22, 30, 18] },
    { color: '#5b8def', name: 'Slow Burns', count: 8, hues: [220, 200, 240] },
    { color: '#3a9e6e', name: 'A24 Catalog', count: 21, hues: [120, 90, 60] },
    { color: '#b46cd9', name: 'Saturday Night', count: 6, hues: [300, 280, 320] },
  ];
  return (
    <div style={{ display: 'grid', gap: 14 }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12,
      }}>
        {lists.map((l) => (
          <div key={l.name} style={{
            borderRadius: 10, overflow: 'hidden', border: '.5px solid var(--line)',
            background: 'var(--surface)',
          }}>
            <div style={{
              position: 'relative', height: 76, display: 'flex',
              background: `linear-gradient(135deg, ${l.color} 0%, oklch(0.2 0.04 30) 130%)`,
              padding: 10, alignItems: 'flex-end',
            }}>
              <div style={{ display: 'flex', gap: -10 }}>
                {l.hues.map((h, i) => (
                  <div key={i} style={{
                    marginLeft: i === 0 ? 0 : -16, transform: `rotate(${(i - 1) * 4}deg)`,
                  }}>
                    <Poster hue={h} label="" w={32} h={48} />
                  </div>
                ))}
              </div>
            </div>
            <div style={{ padding: '10px 12px' }}>
              <div style={{ fontSize: 12.5, fontWeight: 600 }}>{l.name}</div>
              <div style={{
                fontSize: 10.5, color: 'var(--mut)', fontFamily: 'var(--mono)', marginTop: 2,
              }}>{l.count} titles</div>
            </div>
          </div>
        ))}
      </div>
      {/* Rating card */}
      {/* <div style={{
        borderRadius: 10, padding: 16, border: '.5px solid var(--line)',
        background: 'var(--surface)', display: 'flex', alignItems: 'center', gap: 18,
      }}>
        <Poster hue={250} label="True Detective" w={66} h={99} rating="8.0" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>True Detective · Night Country</div>
          <div style={{
            fontSize: 11, color: 'var(--mut)', fontFamily: 'var(--mono)', marginBottom: 9,
          }}>your rating</div>
          <div style={{ display: 'flex', gap: 4 }}>
            {[1,2,3,4,5,6,7,8,9,10].map((n) => (
              <div key={n} style={{
                width: 18, height: 18, display: 'grid', placeItems: 'center',
                fontSize: 12, color: n <= 8 ? 'var(--accent)' : 'var(--line)',
              }}>★</div>
            ))}
            <div style={{
              marginLeft: 10, fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 600,
              color: 'var(--accent)',
            }}>8 / 10</div>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{
            padding: '6px 10px', borderRadius: 6, fontSize: 11,
            border: '.5px solid var(--accent)', color: 'var(--accent)', fontWeight: 600,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>♥ Favorited</div>
          <div style={{
            padding: '6px 10px', borderRadius: 6, fontSize: 11,
            border: '.5px solid var(--line)', color: 'var(--mut)',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>✦ To Watch</div>
        </div>
      </div> */}
    </div>
  );
}

Object.assign(window, {
  AppShell, CatalogMock, ListsMock,
  Poster, Logo, Stripes, SectionLabel, WindowChrome,
});