// Nextability Lab — second page of the site.
// Reuses Header + Footer from screens.jsx for nav continuity.
// Lab-specific screens live here.

/* ───── Lab Hero ─────
   Editorial three-act structure: premise (italic mauve) →
   the term (display, accent) → mission (body, behind rule). */
function LabHero() {
  return (
    <section
      id="top"
      data-screen-label="01 Lab Hero"
      style={{
        position: 'relative',
        padding: '64px 56px 64px',
        overflow: 'hidden',
        minHeight: 0
      }}>

      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 32 }}>
        <Dot size={10} pulse />
        <Cap opacity={0.85} style={{ fontSize: 16, letterSpacing: '0.16em' }}>Nextability Lab</Cap>
      </div>

      {/* Act 1 — Premise */}
      <p
        style={{
          fontFamily: 'var(--font-display)',
          fontStyle: 'italic',
          fontWeight: 400,
          color: 'var(--mid)',
          fontSize: 26,
          lineHeight: 1.35,
          maxWidth: 720,
          margin: 0,
          textWrap: 'pretty'
        }}>
        Every organization reaches a point where existing capabilities are no longer enough for the reality it faces.
      </p>

      {/* Act 2 — The term */}
      <h1
        className="display reveal"
        style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 500,
          fontSize: 64,
          letterSpacing: '-0.04em',
          lineHeight: 1.04,
          maxWidth: 1040,
          margin: '20px 0 0',
          textWrap: 'balance'
        }}>
        I think of the ability to cross that threshold as <span style={{ color: 'var(--accent)' }}>nextability.</span>
      </h1>

      {/* Act 3 — Mission, separated by rule */}
      <div style={{ marginTop: 36, paddingTop: 24, borderTop: '1px solid var(--rule)', maxWidth: 720 }}>
        <p
          style={{
            fontFamily: 'var(--font-body)',
            fontSize: 19,
            lineHeight: 1.6,
            opacity: 0.82,
            margin: 0,
            textWrap: 'pretty'
          }}>
          The Lab is a collection of <span style={{ color: 'var(--ground)', opacity: 1 }}>interactive models, learning systems, and reasoning tools</span> designed to help people build better judgment, stronger operational thinking, and new abilities.
        </p>
      </div>
    </section>);

}

/* ───── Lab Notes Index ─────
   Placeholder entries. Replace with real notes when ready. */
const LAB_NOTES = [
{
  id: '005',
  title: "Bayes's theorem.",
  kicker: 'An interactive lesson on reasoning under uncertainty — how new evidence should update what we already believe.',
  tag: 'Interactive lesson',
  date: '12.05.2026',
  href: 'lab/bayes-theorem.html'
},
{
  id: '004',
  title: 'Abstraction laddering.',
  kicker: 'Most problems are solved at the wrong level. An interactive lesson on climbing toward purpose and descending toward action — and seeing how the solutions change when the starting point does.',
  tag: 'Interactive lesson',
  date: '19.05.2026',
  href: 'lab/abstraction-laddering.html'
},
{
  id: '003',
  title: 'Stay tuned.',
  kicker: null,
  tag: 'Note',
  date: '28.04.2026'
},
{
  id: '002',
  title: 'Stay tuned.',
  kicker: null,
  tag: 'Essay',
  date: '14.04.2026'
},
{
  id: '001',
  title: 'Stay tuned.',
  kicker: null,
  tag: 'Note',
  date: '02.04.2026'
}];


function LabNotes() {
  return (
    <section
      id="notes"
      data-screen-label="02 Lab Notes"
      style={{ padding: '8px 56px 120px' }}>
      
      <Rule strong />
      <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {LAB_NOTES.map((n) => {
          const isLive = !!n.href;
          return (
            <li key={n.id}>
              <a
                href={n.href || '#'}
                onClick={isLive ? undefined : (e) => e.preventDefault()}
                style={{
                  display: 'grid',
                  gridTemplateColumns: '88px 1fr 220px 24px',
                  gap: 32,
                  alignItems: 'baseline',
                  padding: '36px 0',
                  borderBottom: '1px solid var(--rule)',
                  color: 'inherit',
                  cursor: isLive ? 'pointer' : 'default',
                  borderTop: 0,
                  textDecoration: 'none',
                  opacity: isLive ? 1 : 0.5,
                  transition: 'background 320ms cubic-bezier(.2,0,0,1), opacity 320ms cubic-bezier(.2,0,0,1)'
                }}
                onMouseEnter={(e) => { if (isLive) e.currentTarget.style.background = 'color-mix(in srgb, currentColor 4%, transparent)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>

                <Cap style={{ fontSize: 16, letterSpacing: '0.16em' }} opacity={0.65}>{n.id}</Cap>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 28, letterSpacing: '-0.03em', lineHeight: 1.15, fontStyle: isLive ? 'normal' : 'italic', color: isLive ? 'inherit' : 'var(--mid)' }}>
                    {n.title}
                  </div>
                  {n.kicker && (
                    <div style={{ marginTop: 8, fontSize: 15, lineHeight: 1.55, opacity: 0.7, maxWidth: 640 }}>
                      {n.kicker}
                    </div>
                  )}
                </div>
                {isLive ? (
                  <Cap style={{ fontSize: 13, letterSpacing: '0.16em' }} opacity={0.55}>
                    {n.tag} · {n.date}
                  </Cap>
                ) : (
                  <Cap style={{ fontSize: 13, letterSpacing: '0.16em', color: 'var(--accent)' }} opacity={1}>
                    Coming soon
                  </Cap>
                )}
                <span style={{ textAlign: 'right', opacity: isLive ? 0.45 : 0 }}><Arrow /></span>
              </a>
            </li>
          );
        })}
      </ol>
    </section>);

}

/* ───── Lab Closer ───── */
function LabCloser() {
  return (
    <section
      style={{
        background: 'var(--field-deep)',
        padding: '120px 56px',
        textAlign: 'center'
      }}>
      
      <div style={{ maxWidth: 900, margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 32 }}>
        <Cap style={{ fontSize: 16, letterSpacing: '0.16em' }} opacity={0.75}>Currently</Cap>
        <Button primary href="index.html#engagement" style={{ fontSize: 16, letterSpacing: '0.16em', padding: '18px 28px' }}>
          See current engagement <Arrow size={16} />
        </Button>
      </div>
    </section>);

}

/* ───── App ───── */
function LabApp() {
  return (
    <div style={{ background: 'var(--field)', color: 'var(--ground)', minHeight: '100vh' }}>
      <Header wordmarkAccent="alem" page="lab" />
      <LabHero />
      <LabNotes />
      <LabCloser />
      <Footer wordmarkAccent="alem" />
    </div>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<LabApp />);