// No-scroll homepage — class-driven via styles.css

function FeaturedCaseCard({ study, featured = false, fonts }) {
  return (
    <a href={CASE_STUDY_URLS[study.id]} className={`feat-card${featured ? ' feat-card--featured' : ''}`}>
      <div style={{ width: '100%', aspectRatio: '16 / 10', marginBottom: 10, position: 'relative', overflow: 'hidden', border: '1px solid var(--border-faint)', background: 'var(--ink)' }}>
        <img src={study.image} alt={study.title} style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
        <div style={{ position: 'absolute', top: 10, left: 10, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--platinum)', background: 'rgba(5,8,28,0.75)', padding: '3px 8px', backdropFilter: 'blur(4px)' }}>
          {study.index}
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: fonts.ui, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--text-faint)', marginBottom: 6 }}>
        <span>Case {study.index}</span>
        {featured && <span style={{ color: 'var(--orange)' }}>● Featured</span>}
      </div>

      <h3 style={{ fontFamily: fonts.display, fontSize: 24, fontWeight: fonts.displayWeight, lineHeight: 1.08, margin: '0 0 4px', letterSpacing: '-0.01em', color: 'var(--platinum)', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
        <span>{study.title}</span>
        {CASE_STUDY_CONTENT[study.id]?.locked && (
          <span className="tag-nda" style={{ alignSelf: 'center', lineHeight: 1, padding: '3px 7px' }}>🔒 NDA</span>
        )}
      </h3>
      <div style={{ fontFamily: fonts.ui, fontSize: 12.5, color: 'var(--text-mute)', marginBottom: 8 }}>{study.subtitle}</div>
      {study.summary ? (
        <p style={{ fontFamily: fonts.body, fontSize: 13, lineHeight: 1.4, color: 'var(--text-body)', margin: '0 0 10px', textWrap: 'pretty' }}>
          {study.summary}
        </p>
      ) : (
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--text-dim)', padding: '10px 12px', border: '1px dashed var(--border-mid)', margin: '0 0 16px', borderRadius: 3 }}>
          Description forthcoming
        </div>
      )}

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 10 }}>
        {study.tags.map((t) => (
          <span key={t} className="tag-mini tag-mini--soft" style={{ fontSize: 10, padding: '4px 8px', borderRadius: 3 }}>
            {t}
          </span>
        ))}
      </div>

      <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', paddingTop: 10, borderTop: '1px solid var(--border-soft)' }}>
        <div style={{ display: 'flex', gap: 18 }}>
          {study.metrics.map((m) => (
            <div key={m.k}>
              <div style={{ fontFamily: fonts.display, fontSize: 20, fontWeight: fonts.displayWeight, color: 'var(--platinum)', lineHeight: 1 }}>{m.k}</div>
              <div style={{ fontFamily: fonts.ui, fontSize: 10, color: 'var(--text-faint)', marginTop: 4, letterSpacing: '0.04em' }}>{m.v}</div>
            </div>
          ))}
        </div>
        <div style={{ fontFamily: fonts.ui, fontSize: 12, fontWeight: 600, color: 'var(--platinum)', letterSpacing: '0.04em', borderBottom: '1px solid var(--orange)', paddingBottom: 2 }}>
          View case study →
        </div>
      </div>
    </a>
  );
}

function NoScrollHome({ fonts, fill = false } = {}) {
  const f = fonts || { display: 'Faustina, serif', displayWeight: 500, body: 'Faustina, serif', ui: 'Outfit, sans-serif' };
  const featuredIds = ['ai-ssc', 'mobile-service'];
  const featured = CASE_STUDIES.filter((s) => featuredIds.includes(s.id));

  return (
    <div className={fill ? 'page-shell' : ''} style={fill ? undefined : { width: 1440, height: 900, background: 'var(--ink)', color: 'var(--platinum)', fontFamily: f.ui, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <TopNav active="Home" variant="compact" />

      <div className="home-main" style={{ flex: 1, display: 'grid', gridTemplateColumns: '480px 1fr', minHeight: 0 }}>
        <aside className="home-identity" style={{ padding: '28px 40px 24px', display: 'flex', flexDirection: 'column', borderRight: '1px solid var(--border-faint)', position: 'relative' }}>
          <div className="home-identity__row" style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 18 }}>
            <div style={{ width: 84, height: 84, flexShrink: 0, borderRadius: 2, overflow: 'hidden', border: '1px solid var(--border-soft)' }}>
              <img src="assets/headshot.jpg" alt="Jason Yu" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
              <h1 style={{ fontFamily: f.display, fontSize: 50, fontWeight: f.displayWeight, lineHeight: 0.95, letterSpacing: '-0.03em', color: 'var(--platinum)', margin: '0 0 6px', whiteSpace: 'nowrap' }}>
                Jason Yu
              </h1>
              <div style={{ fontFamily: f.ui, fontSize: 17, fontWeight: 500, color: 'var(--orange)', letterSpacing: '0.01em' }}>
                Senior Product Designer
              </div>
            </div>
          </div>

          <p style={{ fontFamily: f.body, fontSize: 14.5, lineHeight: 1.5, color: 'var(--text-body)', margin: '0 0 16px', textWrap: 'pretty' }}>
            Most of my work lives where scale and ambiguity meet. Across my 15+ year career,
            I've designed internal platforms used by 1,300+ people, reduced friction by 6×,
            and supported systems operating at 1M+ users and 4B+ data points. I'm now focused
            on security-informed product design; turning complex, cross-functional problems
            into clear, resilient product foundations.
          </p>

          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
            <a href="work.html" className="btn-primary">View all work →</a>
            <a href="about.html" className="btn-ghost">Get in touch</a>
          </div>

          <div style={{ position: 'absolute', top: 40, right: -1, width: 1, height: 60, background: 'var(--sapphire)' }} />
        </aside>

        <main className="home-featured" style={{ padding: '28px 48px 24px', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
            <Eyebrow color="orange">Featured Work</Eyebrow>
            <div style={{ fontFamily: f.ui, fontSize: 12, color: 'var(--platinum)', letterSpacing: '0.04em' }}>
              <span style={{ color: 'var(--text-soft)' }}>2 of 4 shown · </span>
              <a href="work.html" style={{ color: 'var(--platinum)', textDecoration: 'none', fontWeight: 500, borderBottom: '1px solid var(--orange)', paddingBottom: 2 }}>
                See all →
              </a>
            </div>
          </div>

          <div className="feat-grid" style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, minHeight: 0 }}>
            {featured.map((s) => <FeaturedCaseCard key={s.id} study={s} featured fonts={f} />)}
          </div>
        </main>
      </div>
      <SiteFooter />
    </div>
  );
}

window.NoScrollHome = NoScrollHome;