// sections/References.jsx — end matter: works cited + AI statement.
// data-noword keeps the bibliography out of the word count.
function ReferencesSection() {
  const refs = [
  `Braun, V., & Clarke, V. (2006). Using thematic analysis in psychology. <em>Qualitative Research in Psychology, 3</em>(2), 77–101. https://doi.org/10.1191/1478088706qp063oa`,
  `Design Council. (2005). <em>Framework for innovation</em>. https://www.designcouncil.org.uk/resources/framework-for-innovation/`,
  `Funk, M. (2019). <em>OOCSI</em> [Computer software]. Zenodo. https://doi.org/10.5281/zenodo.1321220`,
  `Haidt, J. (2024). <em>The anxious generation: How the great rewiring of childhood is causing an epidemic of mental illness</em>. Penguin.`,
  `Hummels, C., & Frens, J. (2009). The reflective transformative design process. In <em>CHI '09 Extended Abstracts on Human Factors in Computing Systems</em> (pp. 2655–2658). https://doi.org/10.1145/1520340.1520376`,
  `Koren, L. (2008). <em>Wabi-sabi for artists, designers, poets & philosophers</em>. Imperfect Publishing.`,
  `Newport, C. (2019). <em>Digital minimalism: Choosing a focused life in a noisy world</em>. Penguin.`,
  `Williams, J. (2018). <em>Stand out of our light: Freedom and resistance in the attention economy</em>. Cambridge University Press. https://doi.org/10.1017/9781108453004`];

  const aiUses = [
  'Design and build this portfolio website (Claude Design).',
  'Reduce the word count of the written reflections (Claude Opus 4.8).'];

  return (
    <div className="fade-key" data-noword="true" data-screen-label="References & AI Statement">
      <section style={{ position: 'relative', padding: '72px 0 40px' }}>
        <LinerLabel chip="var(--c-muted)">End matter</LinerLabel>
        <h1 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(3.2rem, 8vw, 5.5rem)',
          fontWeight: 700,
          lineHeight: 0.96,
          letterSpacing: '-0.035em',
          color: 'var(--c-smoke)',
          marginBottom: 20
        }}>
          References
        </h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, color: 'var(--c-whisper)', maxWidth: '54ch', lineHeight: 1.65 }}>
          Sources cited across the portfolio, and a statement on the AI tools used to make it.
        </p>
      </section>

      {/* Works cited */}
      <div style={{ padding: '8px 0 56px', borderTop: '1px solid var(--c-border)' }}>
        <div style={{ margin: '28px 0 0', maxWidth: '78ch', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {refs.map((r, i) =>
          <p key={i} style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, color: 'var(--c-cream)', lineHeight: 1.6, margin: 0, paddingLeft: '1.7em', textIndent: '-1.7em', wordBreak: 'break-word' }} dangerouslySetInnerHTML={{ __html: r }}></p>
          )}
        </div>
      </div>

      {/* AI statement */}
      <div style={{ padding: '32px 0 96px', borderTop: '1px solid var(--c-border)' }}>
        <LinerLabel chip="var(--p-sky)">AI Statement</LinerLabel>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 30,
          fontWeight: 700,
          lineHeight: 1.08,
          letterSpacing: '-0.02em',
          color: 'var(--c-smoke)',
          margin: '8px 0 18px',
          maxWidth: '24ch'
        }}>
          AI Statement
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--c-cream)', lineHeight: 1.65, maxWidth: '62ch', marginBottom: 14 }}>
          This deliverable was created with Claude, which was used to:
        </p>
        <ul style={{ margin: 0, paddingLeft: '1.4em', display: 'flex', flexDirection: 'column', gap: 10, maxWidth: '62ch' }}>
          {aiUses.map((u, i) =>
          <li key={i} style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--c-cream)', lineHeight: 1.6 }}>{u}</li>
          )}
        </ul>
      </div>
    </div>);

}

window.ReferencesSection = ReferencesSection;