// MASTHEAD — the one and only homepage direction.
// Oversized broken name, dense info-block bio, asymmetric content grid.
// Fully localised via the i18n layer; deep-links into the inner pages.

function HomeB() {
  const { go } = React.useContext(RouteCtx);
  const lang = useLang();
  const store = usePhotoStore();
  const c = tr('home', lang);
  const cv = cvFor(lang);
  const last3essays = ESSAYS_ENABLED ? ESSAYS.filter((e) => e.sec === 'mine').slice(-3).reverse() : [];
  const featured = SERIES[0];
  const ft = seriesText(featured, lang);

  return (
    <div className="pp-mesh-wrap">
      <div className="pp-mesh" />
      <div style={{ position:'relative', zIndex:1 }}>
        <TopNav />
        <div className="pp-wrap tight">
        <div className="pp-rv" style={{ position: 'relative' }}>
          <h1 className="pp-h1 upper pp-h1-name" style={{ fontSize: 'clamp(56px, 11vw, 150px)', lineHeight: 0.84, margin: '0 0 8px' }}>
            <div><span className="pp-em" style={{ fontStyle:'normal' }}>Vlady</span>slav</div>
            <div>Ostroukhov</div>
          </h1>
        </div>

        <div className="pp-rv g-bio" style={{ padding: '36px 0', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', marginBottom: 36 }}>
          <div style={{ maxWidth: 640 }}>
            <p className="t-body" style={{ margin:0, fontSize: 16, lineHeight: 1.55 }} dangerouslySetInnerHTML={{ __html: c.bio }} />
            {c.bio2 && (
              <p className="t-body" style={{ margin: "14px 0 0", fontSize: 16, lineHeight: 1.55 }} dangerouslySetInnerHTML={{ __html: c.bio2 }} />
            )}
          </div>
          <div style={{ fontSize: 11, lineHeight: 1.7 }}>
            <div style={{ color:'var(--mute)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom: 8 }}>{c.currently}</div>
            <div>{c.currentlyVal}<br/>{c.currentlySub}</div>
          </div>
          <div style={{ fontSize: 11, lineHeight: 1.7 }}>
            <div style={{ color:'var(--mute)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom: 8 }}>{c.writes}</div>
            <div>{c.writesVal}</div>
          </div>
        </div>

        {/* Asymmetric content grid */}
        <div className="pp-rv g-main" style={{ marginBottom: 40, gridTemplateColumns: ESSAYS_ENABLED ? undefined : '1fr' }}>
          {/* Featured photo series */}
          <div onClick={() => go('series', featured.id)} style={{ cursor:'pointer' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 12 }}>
              <div style={{ fontSize: 11, color:'var(--mute)', textTransform:'uppercase', letterSpacing:'0.12em' }}>{c.featured} · {featured.no}</div>
              <div style={{ fontSize: 11, color:'var(--mute)' }}>{featured.frames} {c.frames}</div>
            </div>
            <Img ratio="3 / 2" no={featured.no} caption={ft.title} src={featured.cover}
                 slot={'cover/' + featured.id} pos={store.coverPos(featured.id)}
                 onPos={(p) => store.patchCover(featured.id, p)} />
            <div style={{ marginTop: 14, display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
              <h3 className="t-title" style={{ margin: 0, fontSize: 22, fontWeight: 500 }}>{ft.title} <span style={{ color:'var(--mute)', fontWeight:400 }}>· {featured.year}</span></h3>
              <span className="red" style={{ fontSize: 12 }}>{c.viewSeries}</span>
            </div>
            <p style={{ fontSize: 13, color: 'var(--mute)', margin: '4px 0 0', maxWidth: 540 }}>{ft.sub}</p>
          </div>

          {/* Recent essays */}
          {ESSAYS_ENABLED && (
            <div>
              <div style={{ fontSize: 11, color:'var(--mute)', textTransform:'uppercase', letterSpacing:'0.12em', marginBottom: 12 }}>{c.recent}</div>
              {last3essays.map((e, i) => {
                const et = essayText(e, lang);
                return (
                <div key={e.id} onClick={() => go('essay', e.id)} style={{ cursor:'pointer', padding:'14px 0', borderTop: '1px solid var(--line)' }}
                     onMouseEnter={(ev) => ev.currentTarget.querySelector('h4').style.color = THEME.red}
                     onMouseLeave={(ev) => ev.currentTarget.querySelector('h4').style.color = ''}>
                  <div style={{ display:'flex', justifyContent:'space-between', fontSize: 10, color:'var(--mute)', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom: 4 }}>
                    <span>№ {String(i+1).padStart(2,'0')}</span>
                    <span>essay</span>
                  </div>
                  <h4 className="t-title" style={{ margin: '0 0 4px', fontSize: 17, fontWeight: 500, lineHeight: 1.25, transition: 'color .15s' }}>{et.title}</h4>
                  <p style={{ margin: 0, fontSize: 12, color:'var(--mute)', lineHeight: 1.45 }}>{et.sub}</p>
                </div>
              ); })}
              <div style={{ borderTop: '1px solid var(--line)', paddingTop: 14, marginTop: 4 }}>
                <a className="pp-link" onClick={() => go('essays')} style={{ fontSize: 12 }}>{c.all(ESSAYS.length)}</a>
              </div>
            </div>
          )}
        </div>

        {/* Selected work mini-strip */}
        <div className="pp-rv g-work" style={{ paddingTop: 28, borderTop:'1px solid var(--line)' }}>
          <div style={{ fontSize: 11, color:'var(--mute)', textTransform:'uppercase', letterSpacing:'0.12em' }}>{c.selected}</div>
          <div>
            {cv.work.map((w, i) => (
              <div key={i} className="g-workrow" onClick={() => go('cv')} style={{ padding: '12px 0', borderTop: i===0 ? 0 : '1px solid var(--line)', cursor:'pointer' }}>
                <span className="pp-num" style={{ color:'var(--mute)', fontSize: 12 }}>{fmtDate(w.from)} → {fmtDate(w.to)}</span>
                <span style={{ fontSize: 14 }}><b style={{ fontWeight: 500 }}>{w.role}</b> · {w.org}</span>
                <span style={{ color: 'var(--mute)', fontSize: 11 }}>{w.kind}</span>
              </div>
            ))}
          </div>
        </div>
        </div>
        <Footer />
      </div>
    </div>
  );
}

Object.assign(window, { HomeB });