// Insights — uses SITE.insights

const Insights = () => (
  <section id="insights" className="section" data-screen-label="Insights">
    <div className="shell">
      <div className="reveal"><SectionHead idx="IV" eyebrow="Insights"
        title="Short-form notes from the desk — between papers, before conclusions." numeral="IV" /></div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24,
      }} className="insight-grid">
        {SITE.insights.map((it, i) => {
          const span = it.kind === 'quote' ? 8 : (i === 0 ? 8 : 4);
          return (
            <div key={i} className={`reveal delay-${(i % 4) + 1}`} style={{ gridColumn: `span ${span}` }}>
              <InsightCard item={it} span={12} idx={i} />
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

const InsightCard = ({ item, span }) => {
  const baseStyle = {
    minHeight: 280,
    padding: 28,
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    border: '1px solid var(--hairline)', borderRadius: 14,
    background: 'var(--surface)',
    backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
    transition: 'transform 0.4s, border-color 0.3s',
  };

  if (item.kind === 'quote') {
    return (
      <article style={{ ...baseStyle, background: 'var(--ink)', color: 'var(--bg)', borderColor: 'var(--ink)' }}
        onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-3px)'}
        onMouseLeave={(e) => e.currentTarget.style.transform = 'none'}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', opacity: 0.6 }}>
          {item.tag.toUpperCase()}
        </div>
        <blockquote className="serif" style={{
          margin: 0, fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.15,
          fontStyle: 'italic', fontWeight: 380, letterSpacing: '-0.015em',
        }}>
          “{item.body}”
        </blockquote>
        <div className="mono" style={{ fontSize: 11, opacity: 0.7, letterSpacing: '0.06em' }}>
          — {item.author}
        </div>
      </article>
    );
  }

  if (item.kind === 'data') {
    const max = Math.max(...item.series);
    return (
      <article style={baseStyle}
        onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-3px)'}
        onMouseLeave={(e) => e.currentTarget.style.transform = 'none'}>
        <div>
          <div className="eyebrow">{item.tag}</div>
          <h3 style={{ margin: '14px 0 0', fontSize: 22, fontWeight: 460, letterSpacing: '-0.02em', lineHeight: 1.2 }}>
            {item.title}
          </h3>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 80, marginTop: 24, marginBottom: 8 }}>
          {item.series.map((v, i) => (
            <div key={i} style={{
              flex: 1, height: `${(v / max) * 100}%`,
              background: i === item.series.length - 1 ? 'var(--accent)' : 'var(--ink-3)',
              opacity: 0.4 + (i / item.series.length) * 0.6,
            }} />
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>12W ROLLING</span>
          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>{item.date}</span>
        </div>
      </article>
    );
  }

  return (
    <article style={baseStyle}
      onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-3px)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'none'}>
      <div>
        <div className="eyebrow">{item.tag} · {item.date}</div>
        <h3 className="serif" style={{
          margin: '16px 0 0', fontSize: 26, fontWeight: 400, lineHeight: 1.25,
          letterSpacing: '-0.005em', color: 'var(--ink)',
        }}>{item.title}</h3>
      </div>
      <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-2)' }}>{item.body}</p>
      <a className="link-arrow" style={{ alignSelf: 'flex-start' }}>Continue reading <ArrowSm /></a>
    </article>
  );
};

window.Insights = Insights;