// Research Domains — uses SITE.research

const Research = () => {
  const [active, setActive] = React.useState(0);
  const list = SITE.research;
  const d = list[active];
  return (
    <section id="research" className="section" data-screen-label="Research">
      <div className="shell">
        <div className="reveal"><SectionHead idx="I" eyebrow="Research Domains" title="Three axes of inquiry into how markets actually function." numeral="I" /></div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)',
          gap: 60,
        }} className="research-grid">
          <div style={{ borderTop: '1px solid var(--hairline)' }}>
            {list.map((dom, i) => (
              <button key={i} onClick={() => setActive(i)}
                style={{
                  width: '100%', textAlign: 'left',
                  background: active === i ? 'color-mix(in oklab, var(--accent) 4%, transparent)' : 'transparent',
                  border: 'none',
                  borderBottom: '1px solid var(--hairline)',
                  padding: '24px 4px',
                  display: 'grid',
                  gridTemplateColumns: '60px 1fr auto',
                  gap: 24,
                  alignItems: 'center',
                  transition: 'background 0.3s, padding 0.3s',
                  paddingLeft: active === i ? 18 : 4,
                  cursor: 'pointer',
                }}
                onMouseEnter={(e) => { if (active !== i) e.currentTarget.style.background = 'color-mix(in oklab, var(--ink) 3%, transparent)'; }}
                onMouseLeave={(e) => { if (active !== i) e.currentTarget.style.background = 'transparent'; }}
              >
                <span className="mono" style={{
                  fontSize: 11, color: active === i ? 'var(--accent)' : 'var(--ink-3)',
                  letterSpacing: '0.06em',
                }}>{dom.idx}</span>
                <div>
                  <div style={{ fontSize: 19, letterSpacing: '-0.02em', fontWeight: 500, color: 'var(--ink)' }}
                    dangerouslySetInnerHTML={{ __html: dom.title }} />
                  <div className="mono" style={{ marginTop: 4, fontSize: 10.5, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>
                    {dom.tag}
                  </div>
                </div>
                <span style={{
                  fontSize: 12, color: 'var(--ink-3)',
                  transform: active === i ? 'translateX(4px)' : 'none',
                  transition: 'transform 0.3s',
                }}>
                  {active === i ? '●' : '○'}
                </span>
              </button>
            ))}
          </div>

          <div style={{ position: 'sticky', top: 100, alignSelf: 'flex-start' }}>
            <div className="glass" style={{ padding: 32 }} key={active}>
              <div className="fade-up">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
                  <span className="eyebrow">Domain · {d.idx}</span>
                  <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{d.label}</span>
                </div>
                <h3 style={{ margin: 0, fontSize: 32, fontWeight: 460, letterSpacing: '-0.03em', lineHeight: 1.1 }}
                    dangerouslySetInnerHTML={{ __html: d.title }} />
                <p className="serif" style={{
                  marginTop: 18, marginBottom: 0, fontSize: 16.5, lineHeight: 1.6,
                  color: 'var(--ink-2)',
                }}>{d.desc}</p>

                {/* Formula card */}
                <div style={{
                  marginTop: 28,
                  border: '1px solid var(--hairline)',
                  borderRadius: 8,
                  overflow: 'hidden',
                  background: 'var(--bg-deep)',
                }}>
                  <div style={{
                    padding: '8px 14px',
                    borderBottom: '1px solid var(--hairline)',
                    display: 'flex', alignItems: 'center', gap: 8,
                  }}>
                    <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)' }} />
                    <span className="mono" style={{ fontSize: 9.5, color: 'var(--accent)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                      {d.formulaLabel}
                    </span>
                  </div>
                  <div style={{ padding: '20px 14px', textAlign: 'center' }} className="mono">
                    <span style={{ fontSize: 16, color: 'var(--ink)', letterSpacing: '0.02em' }}>{d.formula}</span>
                  </div>
                  <div style={{
                    borderTop: '1px solid var(--hairline)',
                    padding: '12px 14px',
                    display: 'flex', flexDirection: 'column', gap: 5,
                  }}>
                    {d.formulaVars.map((v, i) => (
                      <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                        <span className="mono" style={{ fontSize: 10.5, color: 'var(--accent)', minWidth: 64 }}>{v.sym}</span>
                        <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>—</span>
                        <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>{v.def}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div style={{ marginTop: 22, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {d.tags.map(t => (
                    <span key={t} className="mono" style={{
                      fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
                      border: '1px solid var(--hairline-strong)', padding: '4px 9px',
                      color: 'var(--ink-2)',
                    }}>{t}</span>
                  ))}
                </div>

                <a href="#publications" className="link-arrow" style={{ marginTop: 28, display: 'inline-flex' }}
                   onClick={(e) => { e.preventDefault(); document.getElementById('publications')?.scrollIntoView({ behavior: 'smooth' }); }}>
                  Related publications <ArrowSm />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const SectionHead = ({ idx, eyebrow, title, kicker, numeral }) => (
  <div className="section-head">
    {numeral && <span className="section-watermark" aria-hidden="true">{numeral}</span>}
    <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.18em', alignSelf: 'baseline', position: 'relative', zIndex: 1 }}>
      § {idx}
    </div>
    <div style={{ position: 'relative', zIndex: 1 }}>
      <div className="eyebrow" style={{ marginBottom: 18 }}>{eyebrow}</div>
      <h2 className="display" style={{ maxWidth: 820 }}>{title}</h2>
    </div>
    {kicker && <div className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)', position: 'relative', zIndex: 1 }}>{kicker}</div>}
  </div>
);

window.Research = Research;
window.SectionHead = SectionHead;