const { Eyebrow, Divider, Button } = window.IndigoAdvisoryDesignSystem_fba97f;

const artGutter = { paddingLeft: 'var(--gutter)', paddingRight: 'var(--gutter)' };
const artWrap = { maxWidth: 760, margin: '0 auto' };

function ArticleScreen({ onNav, data }) {
  const list = window.INSIGHTS || [];
  const idx = typeof data === 'number' ? data : 0;
  const a = list[idx] || list[0];
  if (!a) return null;

  return (
    <div>
      {/* Header band */}
      <section style={{ background: 'linear-gradient(120deg, #2a1c10 0%, #241811 60%, #1c130c 100%)', ...artGutter, paddingTop: 'var(--space-9)', paddingBottom: 'var(--space-9)' }}>
        <div style={artWrap}>
          <button onClick={() => onNav('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', letterSpacing: '0.14em', color: 'var(--yamabuki-400)', padding: 0, marginBottom: 'var(--space-6)' }}>← Insights</button>
          <div style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', marginBottom: 'var(--space-5)' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', letterSpacing: '0.14em', color: 'var(--shu-400)' }}>{a.cat}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', letterSpacing: '0.1em', color: 'rgba(255,255,255,0.5)' }}>{a.dateline}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', letterSpacing: '0.1em', color: 'rgba(255,255,255,0.5)' }}>{a.read}</span>
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 'var(--fw-med)', letterSpacing: 'var(--ls-tight)', lineHeight: 'var(--lh-tight)', color: 'var(--paper)', margin: 0 }}>{a.title}</h1>
        </div>
      </section>

      {/* Body */}
      <section style={{ background: 'var(--paper)', ...artGutter, paddingTop: 'var(--space-9)', paddingBottom: 'var(--space-10)' }}>
        <div style={artWrap}>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-lead)', fontWeight: 'var(--fw-light)', lineHeight: 'var(--lh-normal)', color: 'var(--text-primary)', margin: '0 0 var(--space-8)', borderLeft: '3px solid var(--shu-500)', paddingLeft: 'var(--space-5)' }}>{a.standfirst}</p>

          {a.body.map((para, i) => (
            <p key={i} style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-loose)', color: 'var(--text-secondary)', margin: '0 0 var(--space-6)' }}>{para}</p>
          ))}

          <div style={{ marginTop: 'var(--space-8)' }}>
            <Divider />
          </div>

          {/* Takeaways */}
          <div style={{ marginTop: 'var(--space-8)' }}>
            <Eyebrow>Key takeaways</Eyebrow>
            <ul style={{ listStyle: 'none', padding: 0, margin: 'var(--space-5) 0 0' }}>
              {a.takeaways.map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'flex-start', padding: 'var(--space-4) 0', borderBottom: '1px solid var(--border-default)' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', color: 'var(--shu-500)', lineHeight: 1.6, flexShrink: 0 }}>0{i + 1}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-normal)', color: 'var(--text-primary)' }}>{t}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Next article + CTA */}
          <div style={{ marginTop: 'var(--space-9)', display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
            <Button variant="solid" size="lg" onClick={() => onNav('contact')}>Start a conversation</Button>
            <Button variant="outline" size="lg" onClick={() => onNav('article', (idx + 1) % list.length)} style={{ borderColor: 'rgba(74,50,26,0.4)', color: 'var(--sumi-900)' }}>Next insight →</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ArticleScreen });