// Research page — thesis in motion

function ResearchPage() {
  const chapters = [
    { n:'01', date:'Mar 2026', title:'Whakapapa as a model for data lineage',
      summary:'What happens when you ask a data-lineage diagram to answer to more than accountability? Whakapapa as a frame makes the question broader — and more honest.',
      tags:['Data governance','Framework'], read:'12 min' },
    { n:'02', date:'Jan 2026', title:'Consent, in a system that forgets',
      summary:'Informed consent assumes a system with a memory. Most AI systems don\'t have one in any meaningful sense. So what are we consenting to, really?',
      tags:['Consent','Ethics'], read:'9 min' },
    { n:'03', date:'Nov 2025', title:'What storytelling asks of an algorithm',
      summary:'A story is never just content. It has a teller, a listener, and permission. What changes when an algorithm participates in any of those roles?',
      tags:['Storytelling','Indigenous methodology'], read:'14 min' },
    { n:'04', date:'Sep 2025', title:'On integrity frameworks, and when to distrust them',
      summary:'Frameworks make us legible to each other. They also make us lazy. Notes on reading one well.',
      tags:['Frameworks','Critique'], read:'7 min' },
    { n:'05', date:'Jul 2025', title:'Field notes: sitting in on an AI ethics review',
      summary:'An unredacted(-ish) account of one afternoon in a real room, watching the work happen.',
      tags:['Field notes'], read:'11 min' },
  ];

  return (
    <div className="route-enter">
      <section style={{paddingTop: 80, paddingBottom: 40}}>
        <div className="container">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 64, alignItems:'end', marginBottom: 64}}>
            <div>
              <span className="label">Rangahau · Research</span>
              <h1 style={{marginTop: 16, fontSize:'var(--step-5xl)', maxWidth:'12ch'}}>
                Indigenous <em style={{color:'var(--accent)'}}>futures</em> in AI.
              </h1>
            </div>
            <div>
              <p style={{fontSize:'var(--step-lg)', color:'var(--ink-2)', marginBottom: 24}}>
                A Master's thesis in motion. I'm publishing chapters as essays as I go. Read them in any order — they'll eventually stitch together.
              </p>
              <div style={{display:'flex', gap: 12}}>
                <span className="mono" style={{padding:'8px 14px', border:'1px solid var(--hair)', borderRadius: 999, fontSize: 11}}>Thesis submission · Sep 2026</span>
                <span className="mono" style={{padding:'8px 14px', border:'1px solid var(--hair)', borderRadius: 999, fontSize: 11}}>5 of ~8 chapters</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{paddingTop: 40}}>
        <div className="container">
          <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap: 64, alignItems:'start'}}>
            <div style={{position:'sticky', top: 96}}>
              <div className="label" style={{marginBottom: 16}}>Filter by</div>
              <div style={{display:'flex', flexDirection:'column', gap: 8}}>
                {['All chapters','Data governance','Consent','Storytelling','Frameworks','Field notes'].map((f, i) => (
                  <button key={f} className="chip" style={{
                    textAlign:'left', fontFamily:'var(--f-mono)', fontSize: 12,
                    padding:'8px 14px', border:'1px solid var(--hair)', borderRadius: 999,
                    background: i === 0 ? 'var(--ink)' : 'var(--bg)',
                    color: i === 0 ? 'var(--bg)' : 'var(--ink-2)',
                    cursor:'pointer'
                  }}>{f}</button>
                ))}
              </div>
              <div className="hair" style={{margin:'32px 0'}}/>
              <div className="label" style={{marginBottom: 12}}>About the research</div>
              <p style={{fontSize: 14, color:'var(--ink-2)'}}>
                Supervised at [University], with kaupapa Māori methodologies. Reading list and bibliography published with the final thesis.
              </p>
            </div>

            <div style={{display:'flex', flexDirection:'column', gap: 0, borderTop:'1px solid var(--ink)'}}>
              {chapters.map(c => (
                <a href="#" key={c.n} style={{
                  display:'grid', gridTemplateColumns:'80px 1fr',
                  gap: 32, padding:'32px 0', borderBottom:'1px solid var(--hair)', alignItems:'start',
                  transition:'padding-left .3s',
                }}
                onMouseEnter={e => e.currentTarget.style.paddingLeft = '16px'}
                onMouseLeave={e => e.currentTarget.style.paddingLeft = '0'}
                >
                  <div>
                    <div className="mono" style={{fontSize: 12, color:'var(--accent)', marginBottom: 4}}>{c.n}</div>
                    <div className="mono" style={{fontSize: 10, color:'var(--muted)'}}>{c.date}</div>
                  </div>
                  <div>
                    <h3 style={{fontSize:'var(--step-2xl)', marginBottom: 12, maxWidth:'24ch'}}>{c.title}</h3>
                    <p style={{color:'var(--ink-2)', marginBottom: 16, maxWidth:'56ch'}}>{c.summary}</p>
                    <div style={{display:'flex', gap: 8, alignItems:'center'}}>
                      {c.tags.map(t => (
                        <span key={t} className="mono" style={{fontSize: 10, padding:'4px 10px', border:'1px solid var(--hair)', borderRadius: 999, color:'var(--muted)'}}>{t}</span>
                      ))}
                      <span className="mono" style={{fontSize: 10, color:'var(--muted)', marginLeft:'auto'}}>{c.read} · Read →</span>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{background:'var(--bg-2)'}}>
        <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 64, alignItems:'center'}}>
          <div>
            <span className="label">Invited talks & papers</span>
            <h2 style={{marginTop: 12, maxWidth:'16ch'}}>Where the research goes outside.</h2>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap: 0, borderTop:'1px solid var(--hair)'}}>
            {[
              ['2026', 'Panel: AI & Indigenous Data Sovereignty', 'Auckland'],
              ['2025', 'Guest lecture: Ethical AI in Aotearoa', '[University]'],
              ['2025', 'Workshop: Whakapapa & data lineage', 'Māori in Tech Summit'],
              ['2024', 'Paper: Listening as method in AI audits', 'Working draft'],
            ].map(([y, t, where], i) => (
              <div key={i} style={{display:'grid', gridTemplateColumns:'80px 1fr auto', gap: 24, padding:'20px 0', borderBottom:'1px solid var(--hair)', alignItems:'baseline'}}>
                <span className="mono" style={{fontSize: 11, color:'var(--muted)'}}>{y}</span>
                <span style={{fontSize: 16, fontFamily:'var(--f-display)'}}>{t}</span>
                <span className="mono" style={{fontSize: 10, color:'var(--muted)'}}>{where}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ResearchPage });