// Ngā Whakaaro · Writing — monthly articles for organisations and professionals

const ARTICLES = [
  {
    id: 'maori-engagement-timing',
    title: 'Why Māori engagement at the end is already too late',
    audience: 'For Organisations',
    date: 'May 2026',
    readTime: '6 min read',
    summary: 'A common mistake organisations make is treating Māori consultation as a final review step. This article explores why that approach fails — and what meaningful engagement from day one looks like in practice.',
    body: [
      {
        type: 'lead',
        text: 'There is a pattern I see often. An organisation builds something — a platform, a policy, a dataset — and then, near the end, someone asks: "Should we check with Māori?" The answer is yes. But by then, it is too late.',
      },
      {
        type: 'h2',
        text: 'The consultation trap',
      },
      {
        type: 'p',
        text: 'Consultation at the end of a project is not partnership. It is review. By the time you are asking Māori stakeholders to look at something you have already built, the fundamental decisions — what to build, how to store it, who owns it, what it will be used for — have already been made. You are asking for approval, not participation.',
      },
      {
        type: 'p',
        text: 'This matters especially in AI and data projects, where the architecture of a system shapes what is possible later. If Māori data is collected using frameworks designed without Māori input, no amount of end-stage review will fix the structural problem.',
      },
      {
        type: 'h2',
        text: 'What beginning looks like',
      },
      {
        type: 'p',
        text: 'Meaningful engagement from the beginning means Māori stakeholders are present when the problem is being defined — not just when the solution is being checked. It means they have a say in what questions are worth asking, what data is worth collecting, and what outcomes matter.',
      },
      {
        type: 'p',
        text: 'This requires a different kind of resourcing. It takes longer. It may change the shape of your project. These are features, not bugs. A system built with Māori from the beginning will work differently — and better — than one built for Māori at the end.',
      },
      {
        type: 'h2',
        text: 'Governance as relationship, not process',
      },
      {
        type: 'p',
        text: 'Governing data that relates to Māori communities may require more than one relationship. Iwi, hapū, and urban Māori organisations may all have legitimate interests in the same data. A single sign-off from one entity does not resolve this.',
      },
      {
        type: 'p',
        text: 'This is not a bureaucratic complication. It reflects the actual complexity of Māori governance — whakapapa, mana whenua, collective authority. Organisations that invest in understanding this complexity build more durable relationships and more trustworthy systems.',
      },
      {
        type: 'closing',
        text: 'If you are planning a project that touches Māori data, communities, or stories, I am happy to talk through what genuine beginning-to-end engagement could look like for your context.',
      },
    ],
  },
  {
    id: 'linkedin-opportunities',
    title: 'Your LinkedIn is not working for you. Here is how to change that.',
    audience: 'For Professionals',
    date: 'May 2026',
    readTime: '5 min read',
    summary: 'Most LinkedIn profiles are written for the job you have, not the one you want. A few deliberate changes to how you present yourself can shift who finds you, who reaches out, and what doors open.',
    body: [
      {
        type: 'lead',
        text: 'LinkedIn is not a digital CV. It is a search engine — and right now, most people are optimising for the wrong thing. If you are waiting for opportunities to come to you, your profile needs to be doing more work.',
      },
      {
        type: 'h2',
        text: 'The headline is doing the heavy lifting',
      },
      {
        type: 'p',
        text: 'Your headline appears in search results, connection requests, and notifications — often before anyone clicks through to your profile. If it just says your job title, you are invisible. A strong headline names who you help, what you do, and the value you bring. It does not need to be clever. It needs to be clear.',
      },
      {
        type: 'p',
        text: 'For example: "Helping organisations build ethical AI systems | Kaupapa Māori research | Career transition coaching" tells a reader in ten seconds who you are and whether you are relevant to them. A title like "Senior Advisor at X" does not.',
      },
      {
        type: 'h2',
        text: 'Write your About section to the person you want to find you',
      },
      {
        type: 'p',
        text: 'Most About sections read like a third-person biography written under duress. The ones that generate opportunities read like a direct conversation. Write to your future client, employer, or collaborator. Tell them what you do, why you do it, and what it looks like to work with you. End with a clear invitation — what should they do next?',
      },
      {
        type: 'p',
        text: 'This is also where your values and background can live. If your cultural identity, your community, or your point of view shapes how you work, say so. The right people will recognise it. The wrong ones will self-select out — and that is a good thing.',
      },
      {
        type: 'h2',
        text: 'Activity matters more than polish',
      },
      {
        type: 'p',
        text: 'A perfectly written profile that has been inactive for six months will underperform a simpler one where the person posts, comments, and engages regularly. LinkedIn surfaces active profiles. You do not need to post every day — one thoughtful post a week, or genuine engagement with others in your space, is enough to stay visible.',
      },
      {
        type: 'p',
        text: 'The goal is not to go viral. It is to be findable and recognisable when the right person is looking.',
      },
      {
        type: 'closing',
        text: 'If you are in the middle of a career transition and want to think through how your LinkedIn profile should reflect where you are going — not just where you have been — that is exactly the kind of conversation I have in my career sessions.',
      },
    ],
  },
];

function ArticleBody({ body }) {
  return (
    <div style={{maxWidth: 680}}>
      {body.map((block, i) => {
        if (block.type === 'lead') return (
          <p key={i} style={{fontSize: 'var(--step-lg)', lineHeight: 1.65, marginBottom: 32, color: 'var(--ink)'}}>
            {block.text}
          </p>
        );
        if (block.type === 'h2') return (
          <h2 key={i} style={{fontSize: 'clamp(1.3rem, 2.5vw, 1.7rem)', marginTop: 48, marginBottom: 16}}>
            {block.text}
          </h2>
        );
        if (block.type === 'p') return (
          <p key={i} style={{fontSize: 16, lineHeight: 1.75, marginBottom: 24, color: 'var(--ink-2)'}}>
            {block.text}
          </p>
        );
        if (block.type === 'closing') return (
          <div key={i} style={{
            marginTop: 48, padding: '24px 28px',
            background: 'var(--bg-2)', border: '1px solid var(--hair)',
            borderLeft: '3px solid var(--accent)', borderRadius: 8,
          }}>
            <p style={{fontSize: 15, color: 'var(--ink-2)', margin: 0}}>{block.text}</p>
          </div>
        );
        return null;
      })}
    </div>
  );
}

function ArticleDetail({ article, onBack }) {
  const audienceColor = article.audience === 'For Organisations' ? 'var(--accent)' : 'var(--rust)';
  return (
    <div className="route-enter">
      <section style={{paddingTop: 80, paddingBottom: 80}}>
        <div className="container">
          <button
            onClick={onBack}
            className="mono"
            style={{
              fontSize: 11, color: 'var(--muted)', background: 'none', border: 'none',
              cursor: 'pointer', letterSpacing: '0.1em', marginBottom: 48,
              display: 'flex', alignItems: 'center', gap: 8, padding: 0,
            }}
          >
            ← BACK TO INSIGHTS
          </button>

          <div style={{display: 'flex', gap: 12, alignItems: 'center', marginBottom: 24}}>
            <span className="mono" style={{
              fontSize: 10, letterSpacing: '0.12em', padding: '4px 10px',
              border: `1px solid ${audienceColor}`, borderRadius: 999, color: audienceColor,
            }}>
              {article.audience.toUpperCase()}
            </span>
            <span className="mono" style={{fontSize: 10, color: 'var(--muted)', letterSpacing: '0.08em'}}>
              {article.date} · {article.readTime}
            </span>
          </div>

          <h1 style={{
            fontSize: 'clamp(2rem, 5vw, 3.8rem)', maxWidth: '18ch',
            lineHeight: 1.15, marginBottom: 48,
          }}>
            {article.title}
          </h1>

          <div className="hair" style={{marginBottom: 48}}/>

          <ArticleBody body={article.body} />

          <div className="hair" style={{marginTop: 64, marginBottom: 48}}/>

          <div style={{display: 'flex', gap: 24, alignItems: 'center'}}>
            <div>
              <div className="mono" style={{fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', marginBottom: 4}}>WRITTEN BY</div>
              <div style={{fontSize: 15}}>Nadine Young · NRX Auaha</div>
            </div>
          </div>
        </div>
      </section>

      <EmailCapture />
    </div>
  );
}

function ArticleCard({ article, onClick }) {
  const [hover, setHover] = React.useState(false);
  const audienceColor = article.audience === 'For Organisations' ? 'var(--accent)' : 'var(--rust)';
  return (
    <article
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--bg-2)', border: '1px solid var(--hair)',
        borderRadius: 12, padding: 32, cursor: 'pointer',
        transform: hover ? 'translateY(-2px)' : 'none',
        transition: 'all .25s',
        borderColor: hover ? 'var(--ink-2)' : 'var(--hair)',
        display: 'flex', flexDirection: 'column',
      }}
    >
      <div style={{display: 'flex', gap: 10, alignItems: 'center', marginBottom: 20}}>
        <span className="mono" style={{
          fontSize: 10, letterSpacing: '0.12em', padding: '4px 10px',
          border: `1px solid ${audienceColor}`, borderRadius: 999, color: audienceColor,
        }}>
          {article.audience.toUpperCase()}
        </span>
        <span className="mono" style={{fontSize: 10, color: 'var(--muted)', letterSpacing: '0.08em'}}>
          {article.date}
        </span>
        <span className="mono" style={{fontSize: 10, color: 'var(--muted)', letterSpacing: '0.08em', marginLeft: 'auto'}}>
          {article.readTime}
        </span>
      </div>

      <h3 style={{
        fontSize: 'clamp(1.2rem, 2vw, 1.5rem)', lineHeight: 1.25,
        marginBottom: 16, flex: 1,
      }}>
        {article.title}
      </h3>

      <p style={{fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.65, marginBottom: 24}}>
        {article.summary}
      </p>

      <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        fontFamily: 'var(--f-mono)', fontSize: 11,
        color: hover ? 'var(--ink)' : 'var(--muted)',
        transition: 'color .2s', letterSpacing: '0.08em',
      }}>
        READ ARTICLE <Arrow rotate={0}/>
      </div>
    </article>
  );
}

function EmailCapture() {
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [audience, setAudience] = React.useState('Both');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setErr('');
    try {
      const res = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, audience, source: 'insights-page' }),
      });
      const data = await res.json();
      if (data.success) {
        setSubmitted(true);
      } else {
        setErr(data.error || 'Something went wrong. Please try again.');
      }
    } catch (e) {
      setErr('Could not subscribe. Please try again.');
    }
    setLoading(false);
  };

  return (
    <section style={{background: 'var(--ink)', color: 'var(--bg)'}}>
      <div className="container">
        <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center'}}>
          <div>
            <span className="label" style={{color: 'var(--sand)'}}>Ngā Whakaaro · Monthly writing</span>
            <h2 style={{color: 'var(--bg)', marginTop: 12, maxWidth: '18ch'}}>
              One article a month. Directly to you.
            </h2>
            <p style={{color: 'rgba(239,230,218,0.65)', marginTop: 16, fontSize: 'var(--step-lg)'}}>
              For organisations and professionals working at the edge of AI, ethics, and Māori values. No noise, no newsletter cadence — just one considered piece each month.
            </p>
          </div>
          <div>
            {submitted ? (
              <div style={{textAlign: 'center', padding: '40px 0'}}>
                <div className="display" style={{fontSize: 48, fontStyle: 'italic', color: 'var(--sand)', marginBottom: 12}}>Ngā mihi.</div>
                <p style={{color: 'rgba(239,230,218,0.65)'}}>You're on the list. First issue arrives next month.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{display: 'flex', flexDirection: 'column', gap: 12}}>
                <label className="mono" style={{fontSize: 10, color: 'var(--sand)', letterSpacing: '0.1em'}}>
                  YOUR EMAIL
                </label>
                <input
                  type="email"
                  placeholder="you@kaimahi.co"
                  required
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  style={{
                    width: '100%', fontFamily: 'var(--f-body)', fontSize: 15,
                    padding: '14px 18px', border: '1px solid rgba(239,230,218,0.2)',
                    borderRadius: 8, background: 'rgba(239,230,218,0.05)',
                    color: 'var(--bg)', outline: 'none', boxSizing: 'border-box',
                  }}
                />
                <div style={{display: 'flex', gap: 8}}>
                  {['For Organisations', 'For Professionals', 'Both'].map(opt => (
                    <label key={opt} className="mono" style={{
                      padding: '8px 14px', border: '1px solid',
                      borderColor: audience === opt ? 'rgba(239,230,218,0.6)' : 'rgba(239,230,218,0.2)',
                      borderRadius: 999, fontSize: 10, cursor: 'pointer',
                      color: audience === opt ? 'rgba(239,230,218,1)' : 'rgba(239,230,218,0.7)',
                      transition: 'all .15s',
                    }}>
                      <input type="radio" name="audience" value={opt} onChange={() => setAudience(opt)} style={{display: 'none'}}/>
                      {opt}
                    </label>
                  ))}
                </div>
                {err && <p style={{color: 'var(--rust)', fontSize: 13, margin: 0}}>{err}</p>}
                <button
                  type="submit"
                  disabled={loading}
                  className="btn btn-accent"
                  style={{marginTop: 8, justifyContent: 'center', padding: '14px', opacity: loading ? 0.7 : 1}}
                >
                  {loading ? 'Subscribing…' : 'Subscribe'} <span className="arrow">→</span>
                </button>
                <p className="mono" style={{fontSize: 10, color: 'rgba(239,230,218,0.4)', letterSpacing: '0.06em'}}>
                  No spam. Unsubscribe anytime. One email per month.
                </p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function ArticlesPage() {
  const [filter, setFilter] = React.useState('All');
  const [activeArticle, setActiveArticle] = React.useState(null);

  if (activeArticle) {
    return <ArticleDetail article={activeArticle} onBack={() => { setActiveArticle(null); window.scrollTo({top:0,behavior:'instant'}); }}/>;
  }

  const filters = ['All', 'For Organisations', 'For Professionals'];
  const shown = filter === 'All' ? ARTICLES : ARTICLES.filter(a => a.audience === filter);

  return (
    <div className="route-enter">
      <section style={{paddingTop: 80, paddingBottom: 64}}>
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 56}}>
            <div>
              <span className="label">Ngā Whakaaro · Writing</span>
              <h1 style={{marginTop: 16, maxWidth: '14ch'}}>
                One article a month. <em style={{color: 'var(--accent)'}}>No filler.</em>
              </h1>
            </div>
            <p style={{fontSize: 'var(--step-lg)', color: 'var(--ink-2)'}}>
              Monthly writing for organisations navigating AI ethics, and for professionals building purpose-driven careers at the intersection of technology and Māori values.
            </p>
          </div>

          <div style={{display: 'flex', gap: 8, marginBottom: 40, flexWrap: 'wrap', alignItems: 'center'}}>
            {filters.map(f => (
              <button
                key={f}
                onClick={() => setFilter(f)}
                className="chip"
                style={{
                  fontFamily: 'var(--f-mono)', fontSize: 11, padding: '10px 16px',
                  borderRadius: 999, cursor: 'pointer', transition: 'all .2s',
                  border: '1px solid ' + (filter === f ? 'var(--ink)' : 'var(--hair)'),
                  background: filter === f ? 'var(--ink)' : 'var(--bg)',
                  color: filter === f ? 'var(--bg)' : 'var(--ink-2)',
                }}
              >
                {f}
              </button>
            ))}
            <span className="mono" style={{fontSize: 11, color: 'var(--muted)', marginLeft: 'auto'}}>
              {shown.length} article{shown.length !== 1 ? 's' : ''}
            </span>
          </div>

          <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24}}>
            {shown.map(article => (
              <ArticleCard
                key={article.id}
                article={article}
                onClick={() => { setActiveArticle(article); window.scrollTo({top:0,behavior:'instant'}); }}
              />
            ))}
          </div>

          {shown.length === 0 && (
            <div style={{textAlign: 'center', padding: '80px 0', color: 'var(--muted)'}}>
              <div className="mono" style={{fontSize: 11, letterSpacing: '0.1em'}}>NO ARTICLES IN THIS CATEGORY YET</div>
            </div>
          )}
        </div>
      </section>

      <EmailCapture />
    </div>
  );
}

Object.assign(window, { ArticlesPage });
