// home.jsx - hero, featured work tiles, more-work list, contact tile
const { useState: useStateH } = React;

function Hero({ go }) {
  return (
    <section style={{ background: '#fff', padding: 'clamp(56px,9vw,104px) clamp(18px,4vw,40px) clamp(48px,7vw,80px)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid',
        gridTemplateColumns: 'minmax(0,1.55fr) minmax(0,1fr)', gap: 'clamp(32px,5vw,72px)', alignItems: 'end' }}
        className="hero-grid">
        <div>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 22 }}>
              <Icon name="pin" size={15} color="var(--ink-muted-48)" strokeWidth={1.8} />
              <Eyebrow>Los Angeles · Available 2027</Eyebrow>
            </div>
          </Reveal>
          <Reveal delay={60}>
            <h1 style={{ margin: 0, color: 'var(--ink)', fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: 'clamp(44px, 7.4vw, 104px)', lineHeight: 0.98, letterSpacing: '-0.03em', textWrap: 'balance' }}>
              I build at the seams<br />between disciplines.</h1>
          </Reveal>
          <Reveal delay={120}>
            <p className="t-lead" style={{ color: 'var(--ink-muted-48)', margin: '26px 0 0', maxWidth: 560, textWrap: 'pretty' }}>
              {PROFILE.positioning}</p>
          </Reveal>
          <Reveal delay={180}>
            <div style={{ display: 'flex', gap: 12, marginTop: 34, flexWrap: 'wrap' }}>
              <Pill size="lg" onClick={() => go('/work')}>See the work <Icon name="arrowR" size={17} color="#fff" /></Pill>
              <Pill size="lg" variant="ghost" onClick={() => go('/about')}>About me</Pill>
            </div>
          </Reveal>
        </div>
        <Reveal delay={140}>
          <div style={{ display: 'grid', gap: 0, borderTop: '1px solid var(--hairline)' }}>
            {[
              ['Now', PROFILE.status],
              ['Disciplines', PROFILE.disciplines.join(' · ')],
              ['Building toward', 'Product · Quant · Consulting'],
            ].map(([k, v]) => (
              <div key={k} style={{ padding: '16px 0', borderBottom: '1px solid var(--hairline)' }}>
                <Eyebrow>{k}</Eyebrow>
                <div className="t-body" style={{ color: 'var(--ink)', marginTop: 6, textWrap: 'pretty' }}>{v}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* One full-bleed featured tile, split text / render, alternating sides. */
function FeaturedTile({ p, index, go }) {
  const dark = p.mode === 'dark';
  const flip = index % 2 === 1; // alternate render side
  const meta = [p.role, p.org].filter(Boolean).join(' · ');
  return (
    <section style={{ background: dark ? 'var(--surface-tile-1)' : 'var(--canvas-parchment)',
      padding: 'clamp(56px,8vw,96px) clamp(18px,4vw,40px)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }}
        className="tile-grid">
        <Reveal style={{ order: flip ? 2 : 1 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17,
              color: dark ? 'var(--primary-on-dark)' : 'var(--primary)', fontVariantNumeric: 'tabular-nums' }}>
              {String(index + 1).padStart(2, '0')}</span>
            <span style={{ flex: 1, height: 1, background: dark ? 'rgba(255,255,255,0.16)' : 'var(--hairline)' }} />
            <Eyebrow dark={dark}>{p.year}</Eyebrow>
          </div>
          <h2 className="t-display-lg" style={{ color: dark ? '#fff' : 'var(--ink)', margin: 0, letterSpacing: '-0.02em' }}>{p.name}</h2>
          <p className="t-lead" style={{ color: dark ? '#fff' : 'var(--ink)', margin: '12px 0 0', maxWidth: 460, textWrap: 'pretty' }}>{p.tagline}</p>
          {meta && <p className="t-caption" style={{ color: dark ? 'var(--body-muted)' : 'var(--ink-muted-48)', marginTop: 12 }}>{meta}</p>}
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 18 }}>
            {p.tags.map(t => <TagChip key={t} dark={dark} accent>{t}</TagChip>)}
          </div>
          <div style={{ marginTop: 26 }}>
            <Stats results={p.results} dark={dark} gap={36} />
          </div>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center', marginTop: 30, flexWrap: 'wrap' }}>
            <Pill onClick={() => go('/work/' + p.id)} dark={dark}>View case study <Icon name="arrowR" size={16} color={dark ? '#001a33' : '#fff'} /></Pill>
            {p.links[0] && <a href={p.links[0].url} target="_blank" rel="noreferrer" className="t-body"
              style={{ color: dark ? 'var(--primary-on-dark)' : 'var(--primary)', textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 5 }}>{p.links[0].label} <Icon name="arrowUR" size={15} color={dark ? 'var(--primary-on-dark)' : 'var(--primary)'} /></a>}
          </div>
        </Reveal>
        <Reveal delay={90} style={{ order: flip ? 1 : 2 }}>
          <button onClick={() => go('/work/' + p.id)} style={{ display: 'block', width: '100%', padding: 0,
            border: 0, background: 'none', cursor: 'pointer' }} aria-label={'Open ' + p.name}>
            <RenderFrame p={p} ratio="4 / 3" />
          </button>
        </Reveal>
      </div>
    </section>
  );
}

function MoreWork({ go }) {
  const more = PROJECTS.filter(p => !p.featured);
  return (
    <section style={{ background: '#fff', padding: 'clamp(56px,8vw,96px) clamp(18px,4vw,40px)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap' }}>
            <div>
              <Eyebrow>More work</Eyebrow>
              <h2 className="t-display-md" style={{ color: 'var(--ink)', margin: '8px 0 0', letterSpacing: '-0.5px' }}>
                Coursework, hackathons, and personal research.</h2>
            </div>
            <button onClick={() => go('/work')} className="t-body" style={{ background: 'none', border: 0,
              cursor: 'pointer', color: 'var(--primary)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              View all {PROJECTS.length} projects <Icon name="arrowR" size={16} color="var(--primary)" /></button>
          </div>
        </Reveal>
        <div style={{ marginTop: 28, borderTop: '1px solid var(--hairline)' }}>
          {more.map((p, i) => (
            <Reveal key={p.id} delay={Math.min(i * 40, 200)}>
              <button onClick={() => go('/work/' + p.id)} className="row-link" style={{ width: '100%',
                display: 'grid', gridTemplateColumns: '1fr auto', gap: 20, alignItems: 'center',
                padding: '20px 4px', borderBottom: '1px solid var(--hairline)', background: 'none',
                border: 'none', borderBottomStyle: 'solid', borderBottomWidth: 1, borderBottomColor: 'var(--hairline)',
                cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font-text)' }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
                    <span className="t-tagline" style={{ color: 'var(--ink)' }}>{p.name}</span>
                    <span className="t-caption" style={{ color: 'var(--ink-muted-48)' }}>{p.year}</span>
                  </div>
                  <div className="t-body" style={{ color: 'var(--ink-muted-48)', marginTop: 3, textWrap: 'pretty' }}>{p.tagline}</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                  <div style={{ display: 'flex', gap: 6 }} className="row-tags">
                    {p.tags.map(t => <span key={t} className="t-micro-legal" style={{ color: 'var(--ink-muted-48)',
                      border: '1px solid var(--hairline)', borderRadius: 9999, padding: '4px 9px' }}>{t}</span>)}
                  </div>
                  <Icon name="arrowR" size={18} color="var(--ink-muted-48)" />
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactTile({ onContact, onResume }) {
  return (
    <section style={{ background: 'var(--surface-tile-3)', padding: 'clamp(72px,10vw,128px) clamp(18px,4vw,40px)', textAlign: 'center' }}>
      <Reveal>
        <Eyebrow dark>Get in touch</Eyebrow>
        <h2 style={{ margin: '14px 0 0', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(36px,5.6vw,64px)', lineHeight: 1.02, letterSpacing: '-0.025em', textWrap: 'balance' }}>
          Let’s build something<br />that holds up under scrutiny.</h2>
        <p className="t-lead-airy" style={{ color: 'var(--body-muted)', margin: '20px auto 0', maxWidth: 560, textWrap: 'pretty' }}>
          I care about rigor, intellectual honesty, and work that earns its claims. Tell me what you’re making.</p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 34, flexWrap: 'wrap' }}>
          <Pill size="lg" dark onClick={onContact}>Get in touch</Pill>
          <Pill size="lg" variant="ghost" dark onClick={onResume}><Icon name="doc" size={16} color="var(--primary-on-dark)" strokeWidth={1.8} />Résumé</Pill>
        </div>
      </Reveal>
    </section>
  );
}

function Home({ go, onContact, onResume }) {
  const featured = PROJECTS.filter(p => p.featured);
  return (
    <div>
      <Hero go={go} />
      <div style={{ padding: '0 clamp(18px,4vw,40px)', background: '#fff' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', borderTop: '1px solid var(--hairline)',
          padding: '36px 0 4px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
          <h2 className="t-display-md" style={{ color: 'var(--ink)', margin: 0, letterSpacing: '-0.5px' }}>Selected work</h2>
          <Eyebrow>Six projects · 01–06</Eyebrow>
        </div>
      </div>
      {featured.map((p, i) => <FeaturedTile key={p.id} p={p} index={i} go={go} />)}
      <MoreWork go={go} />
      <ContactTile onContact={onContact} onResume={onResume} />
    </div>
  );
}

Object.assign(window, { Home, Hero, FeaturedTile, MoreWork, ContactTile });