// Indigenous AI Hub
// Three zones: Foundation → Writing → CTA
// Zone 2 auto-populates from ARTICLES tagged 'ethical-ai'

function IndigenousAIPage() {

  // Zone 2: pull all live articles tagged 'ethical-ai'
  const ethicalAiArticles = (typeof ARTICLES !== 'undefined' ? ARTICLES : [])
    .filter(a => Array.isArray(a.tags) && a.tags.includes('ethical-ai') && isLive(a.publishDate));

  return (
    <div className="route-enter">

      {/* ════════════════════════════════════════════════════════
          HERO — dark teal, sets the tone
      ════════════════════════════════════════════════════════ */}
      <section style={{ paddingTop: 80, paddingBottom: 80, background: 'var(--ink)' }}>
        <div className="container">
          <span className="label" style={{ color: 'rgba(239,230,218,0.55)' }}>Indigenous AI · Ethical Technology · Aotearoa</span>
          <h1 style={{ marginTop: 16, color: 'var(--bg)', fontSize: 'clamp(2.8rem, 6vw, 5rem)', maxWidth: '16ch', lineHeight: 1.1 }}>
            AI governance<br/>
            <em style={{ color: 'var(--accent)' }}>grounded in tikanga.</em>
          </h1>
          <p style={{ marginTop: 28, color: 'rgba(239,230,218,0.78)', fontSize: 'var(--step-lg)', lineHeight: 1.75, maxWidth: '50ch' }}>
            Research, frameworks, and writing on what ethical AI requires in Aotearoa — built from ten expert interviews and grounded in te ao Māori.
          </p>
          <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Link to="thesis" className="btn btn-accent">Explore the thesis →</Link>
            <Link to="contact" className="btn" style={{ border: '1px solid rgba(239,230,218,0.3)', color: 'var(--bg)', background: 'transparent' }}>
              Start a kōrero →
            </Link>
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════
          ZONE 1 — THE FOUNDATION
      ════════════════════════════════════════════════════════ */}
      <div style={{ background: 'var(--bg-2)', borderBottom: '1px solid var(--hair)', padding: '18px 0' }}>
        <div className="container">
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--accent)' }}>
            ZONE 01 — THE FOUNDATION
          </span>
        </div>
      </div>

      {/* ── A. Noa · Tapu · Rāhui ── */}
      <section style={{ padding: '80px 0' }}>
        <div className="container">
          <div style={{ marginBottom: 48 }}>
            <h2 style={{ maxWidth: '26ch' }}>Understanding what Māori data actually is.</h2>
            <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.8, maxWidth: '54ch' }}>
              Not all Māori data is the same. This classification framework has to be in the room before any AI governance conversation can happen.
            </p>
          </div>
          <div className="cols-3" style={{ gap: 1, background: 'var(--hair)' }}>
            {[
              {
                word: 'Noa',
                eng: 'Open',
                body: 'Publicly available information. Can be used with care, with proper attribution and cultural respect. Still requires asking: who benefits from this use, and have they been asked?',
              },
              {
                word: 'Tapu',
                eng: 'Restricted',
                body: 'Sensitive cultural data. Requires explicit authority and consent from the right people. Not decided by the individual — governed by the collective, on their terms.',
              },
              {
                word: 'Rāhui',
                eng: 'Sacred',
                body: 'Whakapapa, medicines, family-held knowledge, sacred oral histories. Should never be shared with an AI system. This is not a risk to be managed — it is a boundary.',
              },
            ].map(c => (
              <div key={c.word} style={{ background: 'var(--bg)', padding: '40px 32px' }}>
                <div style={{
                  fontFamily: 'var(--f-display)', fontStyle: 'italic',
                  fontSize: 'clamp(2.2rem, 4.5vw, 3.2rem)', color: 'var(--ink)',
                  marginBottom: 4, lineHeight: 1,
                }}>{c.word}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.1em', marginBottom: 20 }}>{c.eng}</div>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.75, margin: 0 }}>{c.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── B. 6 trust conditions ── */}
      <section style={{ padding: '80px 0', background: 'var(--bg-2)' }}>
        <div className="container">
          <div style={{ marginBottom: 48 }}>
            <span className="label">Research finding · Community trust</span>
            <h2 style={{ marginTop: 12, maxWidth: '30ch' }}>
              Six conditions communities identified before genuine trust in AI systems is possible.
            </h2>
            <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 15, maxWidth: '54ch', lineHeight: 1.8 }}>
              These are not aspirational values — they emerged directly from research participants as the minimum requirements. Every condition must be met. Not most of them.
            </p>
          </div>
          <div className="cols-3" style={{ gap: 1, background: 'var(--hair)' }}>
            {[
              { n: '01', title: 'Near-perfect accuracy', body: 'Cultural errors carry real harm. A mistranslation does not just mislead — it can fill the gaps left by colonisation with something that feels true but is not.' },
              { n: '02', title: 'Māori control and authority', body: 'Not advisory. Not consultative. Decision-making power over how AI systems are built, trained, and governed — held by Māori, not delegated to them.' },
              { n: '03', title: 'Transparency in plain language', body: 'Organisations must be able to explain what the tool does, where data goes, and who benefits — in language that does not require a computer science degree to understand.' },
              { n: '04', title: 'Active harm prevention', body: 'Systems must be designed to prevent misuse, not just permit reporting of it. Governance structures that can pause or stop a system when harm occurs.' },
              { n: '05', title: 'Intergenerational protection', body: 'Decisions made today about Māori data will affect communities for generations. Governance must account for people who are not yet born — not just current stakeholders.' },
              { n: '06', title: 'Ongoing consent with withdrawal rights', body: 'Consent is not a one-time signature. Communities retain the right to withdraw consent at any time, for any reason, without having to justify it.' },
            ].map(c => (
              <div key={c.n} style={{ background: 'var(--bg)', padding: '32px 28px' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', marginBottom: 16 }}>{c.n}</div>
                <h4 style={{ fontSize: 'var(--step-lg)', color: 'var(--ink)', marginBottom: 12, lineHeight: 1.3 }}>{c.title}</h4>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.75, margin: 0 }}>{c.body}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 24, padding: '20px 24px', background: 'var(--bg)', borderRadius: 8, borderLeft: '3px solid var(--accent)' }}>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.8, margin: 0 }}>
              <strong style={{ color: 'var(--ink)' }}>From the research:</strong>{' '}
              "Having Māori present is not having Māori governance." Meeting these conditions is the difference between cultural safety and cultural performance.
            </p>
          </div>
        </div>
      </section>

      {/* ── C. Thesis link ── */}
      <section style={{ padding: '56px 0', background: 'var(--bg-2)', borderTop: '1px solid var(--hair)', borderBottom: '1px solid var(--hair)' }}>
        <div className="container">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
            <div>
              <span className="label">The research</span>
              <h3 style={{ marginTop: 8, maxWidth: '36ch' }}>Ethical AI and Indigenous Storytelling in Aotearoa</h3>
              <p style={{ marginTop: 12, color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.7, maxWidth: '52ch' }}>
                Master of Technological Futures · 7 chapters · 10 expert interviews · 5 key themes · Nadine Young, 2025
              </p>
            </div>
            <Link to="thesis" className="btn btn-primary" style={{ flexShrink: 0 }}>
              Read the thesis →
            </Link>
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════
          ZONE 2 — THE WRITING
      ════════════════════════════════════════════════════════ */}
      <div style={{ background: 'var(--bg)', borderBottom: '1px solid var(--hair)', padding: '18px 0' }}>
        <div className="container">
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--accent)' }}>
            ZONE 02 — THE WRITING
          </span>
        </div>
      </div>

      <section style={{ padding: '80px 0' }}>
        <div className="container">
          <div style={{ marginBottom: 48 }}>
            <h2 style={{ maxWidth: '28ch' }}>Analysis, commentary, and independent research.</h2>
            <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.8, maxWidth: '52ch' }}>
              Published as issues arise — not on a weekly schedule. Each piece is grounded in the research and the moment it was written.
            </p>
          </div>

          {ethicalAiArticles.length > 0 ? (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 24 }}>
              {ethicalAiArticles.map(a => (
                <a
                  key={a.id}
                  href={'#/articles/' + a.id}
                  style={{
                    display: 'block', textDecoration: 'none',
                    background: 'var(--bg)', border: '1px solid var(--hair)',
                    borderRadius: 10, padding: '28px 28px 24px',
                    transition: 'border-color .2s, transform .2s',
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.borderColor = 'var(--ink-2)';
                    e.currentTarget.style.transform = 'translateY(-2px)';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.borderColor = 'var(--hair)';
                    e.currentTarget.style.transform = 'none';
                  }}
                >
                  <span className="mono" style={{
                    fontSize: 9, color: 'var(--accent)', letterSpacing: '0.1em',
                    background: 'var(--bg-2)', padding: '3px 8px', borderRadius: 3,
                    display: 'inline-block', marginBottom: 20,
                  }}>
                    ETHICAL AI
                  </span>
                  <h3 style={{ fontSize: 'var(--step-lg)', color: 'var(--ink)', lineHeight: 1.35, marginBottom: 20 }}>
                    {a.title}
                  </h3>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.06em' }}>
                      {a.date} · {a.readTime}
                    </span>
                    <span style={{ color: 'var(--accent)', fontSize: 12 }}>→</span>
                  </div>
                </a>
              ))}
            </div>
          ) : (
            <p style={{ fontSize: 15, color: 'var(--muted)', paddingBottom: 24 }}>Articles coming soon.</p>
          )}
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════
          ZONE 3 — START A KŌRERO (CTA)
      ════════════════════════════════════════════════════════ */}
      <div style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--hair)', borderBottom: '1px solid var(--hair)', padding: '18px 0' }}>
        <div className="container">
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--accent)' }}>
            ZONE 03 — START A KŌRERO
          </span>
        </div>
      </div>

      <section style={{ padding: '100px 0', background: 'var(--ink)' }}>
        <div style={{ maxWidth: 600, margin: '0 auto', padding: '0 24px', textAlign: 'center' }}>
          <h2 style={{ color: 'var(--bg)', fontSize: 'clamp(2rem, 5vw, 3.5rem)', marginBottom: 24, lineHeight: 1.15 }}>
            Ready to build AI with<br/>
            <em style={{ color: 'var(--accent)' }}>integrity?</em>
          </h2>
          <p style={{ color: 'rgba(239,230,218,0.75)', fontSize: 'var(--step-lg)', lineHeight: 1.75, marginBottom: 40 }}>
            Whether you are an organisation wanting to govern AI responsibly, a researcher exploring these questions, or simply want to talk through what ethical AI means in your context — let's start a conversation.
          </p>
          <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Link to="contact" className="btn btn-accent" style={{ fontSize: 15, padding: '14px 28px' }}>
              Start a kōrero →
            </Link>
            <Link to="thesis" className="btn" style={{
              fontSize: 15, padding: '14px 28px',
              border: '1px solid rgba(239,230,218,0.3)',
              color: 'var(--bg)', background: 'transparent',
            }}>
              Read the research →
            </Link>
          </div>
        </div>
      </section>

    </div>
  );
}

Object.assign(window, { IndigenousAIPage });