// Writing page
const WRITING_DATA = [
  { date: '2026', reading: '8 min', tag: 'EDTECH · AI', title: 'Generic LLMs vs Purpose-Built Educational AI: What Our Research Reveals', blurb: 'Why a purpose-built, CEFR-aware pipeline outperforms generic LLMs in real classrooms. What we learned shipping Kato AI into language schools.', href: 'https://kato-ai.com/research' },
  { date: '2026', reading: '7 min', tag: 'ANALYTICS', title: 'From Cloud Analytics to Classroom Insights: Applying Structured Usage Analytics to EdTech', blurb: 'Bringing the PhD framework into an applied EdTech context. How structured usage analytics drives teacher-grade insight.', href: 'https://kato-ai.com/research' },
];

// Publications are defined in data.js as the single source of truth.
// Home hero chart, signal panel sparkline, and nav mini-chart all
// derive from the same list via window.SITE_STATS.
const PUBLICATIONS = window.PUBLICATIONS || [];

function PageWriting() {
  const [hover, setHover] = React.useState(0);
  const w = WRITING_DATA[hover];
  return (
    <div className="page" data-page="writing" data-screen-label="03 Writing">
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 10, color: 'var(--ink-dimmer)', letterSpacing: '.18em', textTransform: 'uppercase' }}>⦿ 03 · notes</div>
          <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 40, fontWeight: 800, letterSpacing: '-.03em', margin: '8px 0 0', color: 'var(--ink)' }}>
            Thinking <span style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', color: 'var(--accent-amber)', fontWeight: 400 }}>out loud.</span>
          </h2>
        </div>
        <div style={{ color: 'var(--ink-dim)', fontSize: 11 }}>{WRITING_DATA.length} articles · {PUBLICATIONS.length} papers</div>
      </div>

      <div className="writing-layout">
        <div className="writing-list">
          {WRITING_DATA.map((e, i) => (
            <a
              key={i}
              href={e.href || '#'}
              target={e.href ? '_blank' : undefined}
              rel={e.href ? 'noopener' : undefined}
              className="writing-row"
              onMouseEnter={() => setHover(i)}
              data-hover-label={`▸ read`}
              style={{ textDecoration: 'none', color: 'inherit' }}
            >
              <div>
                <div className="w-date">{e.date}</div>
                <div className="w-tag">// {e.tag}</div>
              </div>
              <div>
                <div className="w-title">{e.title}</div>
                <div className="w-blurb">{e.blurb}</div>
              </div>
              <div className="w-date">{e.reading} · ▸</div>
            </a>
          ))}
        </div>

        <aside className="writing-aside">
          <div className="panel">
            <div className="panel-head"><span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span className="ph-dot" /><span className="ph-title">PREVIEW</span></span><span style={{color:'var(--ink-dimmer)'}}>◦</span></div>
            <div className="panel-body">
              <div style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 10 }}>
                {w.date} · {w.tag} · {w.reading}
              </div>
              <div style={{ fontFamily: 'var(--f-display)', fontSize: 22, fontWeight: 600, letterSpacing: '-.02em', color: 'var(--ink)', lineHeight: 1.2 }}>
                {w.title}
              </div>
              <div style={{ color: 'var(--ink-dim)', fontSize: 12, marginTop: 12, lineHeight: 1.6 }}>
                {w.blurb}
              </div>
              <div style={{ borderTop: '1px dashed var(--line)', margin: '14px 0 10px' }} />
              <div className="term" style={{ fontSize: 11 }}>
                <div><span className="cmd">venue</span> · <span style={{color:'var(--ink)'}}>kato-ai.com/research</span></div>
                <div><span className="cmd">stat</span> · <span className="ok">published</span></div>
                <div><span className="cmd">open</span> · ▸ <a href={w.href} target="_blank" rel="noopener" style={{ color: 'var(--accent)', textDecoration: 'underline' }}>full text</a></div>
              </div>
            </div>
          </div>

          <div className="panel">
            <div className="panel-head"><span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span className="ph-dot" /><span className="ph-title">ALSO PUBLISHED</span></span></div>
            <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{color:'var(--ink-dim)'}}>venue</span><span style={{color:'var(--ink)'}}>kato-ai.com/research</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{color:'var(--ink-dim)'}}>syndicated</span><span className="badge live">LinkedIn</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{color:'var(--ink-dim)'}}>academic</span><span style={{color:'var(--ink)'}}>see below</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{color:'var(--ink-dim)'}}>topics</span><span style={{color:'var(--ink)'}}>ai · edtech · analytics</span></div>
            </div>
          </div>
        </aside>
      </div>

      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', margin: '48px 0 18px' }}>
        <div>
          <div style={{ fontSize: 10, color: 'var(--ink-dimmer)', letterSpacing: '.18em', textTransform: 'uppercase' }}>⦿ 03b · peer-reviewed</div>
          <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 36, fontWeight: 800, letterSpacing: '-.03em', margin: '8px 0 0', color: 'var(--ink)' }}>
            Academic <span style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', color: 'var(--accent-amber)', fontWeight: 400 }}>publications.</span>
          </h2>
        </div>
        <div style={{ color: 'var(--ink-dim)', fontSize: 11 }}>
          <a href="https://scholar.google.com/citations?user=KQOFBPYAAAAJ" target="_blank" rel="noopener" style={{ color: 'var(--accent)' }}>Google Scholar</a> · 85+ citations · Apr 2026
        </div>
      </div>

      <div className="pub-list">
        {PUBLICATIONS.map((p, i) => (
          <div key={i} className="pub-row">
            <div className="pub-meta">
              <div className="pub-year">{p.year}</div>
              <div className="pub-venue">{p.venue}</div>
            </div>
            <div className="pub-body">
              <div className="pub-title">{p.title}</div>
              <div className="pub-authors">{p.authors}</div>
              {(p.pages || p.doi) && (
                <div className="pub-tail">
                  {p.pages && <span>{p.pages}</span>}
                  {p.pages && p.doi && <span className="pub-sep">·</span>}
                  {p.doi && <a href={`https://doi.org/${p.doi}`} target="_blank" rel="noopener" style={{ color: 'var(--accent)' }}>doi:{p.doi}</a>}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
Object.assign(window, { PageWriting });