// Hero — uses SITE data, MMRL tagline, real stats, real focuses

const Ticker = () => {
  const { ticks, status, updatedAt } = window.useLiveTicker();
  const all = [...ticks, ...ticks];
  // Slow the scroll proportionally so the new (more) items still read at a steady pace.
  const dur = Math.max(60, Math.min(180, ticks.length * 8));

  return (
    <div style={{
      borderTop: '1px solid var(--hairline)',
      borderBottom: '1px solid var(--hairline)',
      overflow: 'hidden',
      background: 'color-mix(in oklab, var(--bg-deep) 50%, transparent)',
      maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
      position: 'relative',
    }}>
      <div style={{
        display: 'flex', gap: 0,
        animation: `ticker-scroll ${dur}s linear infinite`,
        whiteSpace: 'nowrap',
        width: 'fit-content',
      }}>
        {all.map((t, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '12px 28px',
            borderRight: '1px solid var(--hairline)',
            fontSize: 11.5,
          }} className="mono">
            <span style={{ color: 'var(--ink-3)', letterSpacing: '0.06em' }}>{t.sym}</span>
            <span style={{ color: 'var(--ink)' }}>{t.px}</span>
            <span style={{ color: t.positive ? 'var(--positive)' : 'var(--negative)', fontSize: 10.5 }}>{t.ch}</span>
          </div>
        ))}
      </div>
      {/* Live status pill */}
      <div className="mono" style={{
        position: 'absolute', top: '50%', right: 12, transform: 'translateY(-50%)',
        display: 'flex', alignItems: 'center', gap: 6,
        fontSize: 9.5, color: 'var(--ink-3)', letterSpacing: '0.12em',
        padding: '4px 8px', background: 'var(--bg)', borderRadius: 999,
        border: '1px solid var(--hairline)',
        zIndex: 2,
      }}>
        <span style={{
          width: 5, height: 5, borderRadius: '50%',
          background: status === 'live' ? 'var(--positive)' : 'var(--ink-4)',
          animation: status === 'live' ? 'pulse-dot 1.6s ease-in-out infinite' : 'none',
        }} />
        {status === 'live' ? 'LIVE' : 'CACHED'}
      </div>
    </div>
  );
};

const Hero = () => {
  const [hovered, setHovered] = React.useState(null);
  return (
    <section id="hero" style={{ paddingTop: 64, position: 'relative' }}>
      <Ticker />
      <div className="shell" style={{ paddingTop: 70, paddingBottom: 90 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)',
          gap: 60,
          alignItems: 'end',
        }} className="hero-grid">
          <div className="fade-up">
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 32, flexWrap: 'wrap' }}>
              <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)', letterSpacing: '0.18em' }}>
                {SITE.lab.abbr} · WORKING PAPER SERIES
              </span>
              <div style={{ flex: 'none', width: 24, height: 1, background: 'var(--hairline-strong)' }} />
              <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)', letterSpacing: '0.18em' }}>
                ESTABLISHED {SITE.lab.founded}
              </span>
            </div>

            <h1 className="display" style={{
              margin: 0,
              fontSize: 'clamp(44px, 7vw, 100px)',
              fontWeight: 460,
            }}>
              Bridging<br />
              <span style={{ color: 'var(--ink-3)' }}>mathematical rigor</span><br />
              and trading <em className="serif" style={{
                fontStyle: 'italic',
                fontWeight: 380,
                color: 'var(--accent)',
              }}>reality</em>.
            </h1>

            <p className="serif" style={{
              marginTop: 36, marginBottom: 0,
              fontSize: 18.5,
              lineHeight: 1.55,
              color: 'var(--ink-2)',
              maxWidth: 580,
              letterSpacing: '-0.005em',
            }}>
              {SITE.lab.mission}
            </p>

            <ul style={{
              listStyle: 'none', padding: 0, margin: '32px 0 0',
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              {SITE.lab.focuses.map((f, i) => (
                <li key={i} style={{
                  display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, alignItems: 'baseline',
                  fontSize: 14.5, color: 'var(--ink-2)',
                }}>
                  <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>
                    0{i + 1} —
                  </span>
                  {f}
                </li>
              ))}
            </ul>

            <div style={{ display: 'flex', gap: 14, marginTop: 40, flexWrap: 'wrap' }}>
              <button onClick={() => document.getElementById('research')?.scrollIntoView({ behavior: 'smooth' })}
                style={{
                  background: 'var(--ink)', color: 'var(--bg)',
                  border: 'none', padding: '14px 22px', borderRadius: 999,
                  fontSize: 13, letterSpacing: '-0.01em',
                  display: 'flex', alignItems: 'center', gap: 10,
                  fontWeight: 500,
                }}>
                Explore research <ArrowSm />
              </button>
              <a href={SITE.links.ssrn} target="_blank" rel="noopener noreferrer"
                style={{
                  background: 'transparent', color: 'var(--ink)',
                  border: '1px solid var(--hairline-strong)',
                  padding: '14px 22px', borderRadius: 999,
                  fontSize: 13, letterSpacing: '-0.01em',
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                Read on SSRN
              </a>
            </div>
          </div>

          <aside className="glass fade-up" style={{ padding: 28, animationDelay: '0.15s' }} data-parallax="0.4">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
              <span className="eyebrow">Lab Index · {SITE.lab.founded}</span>
              <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>UPDATED 04.2026</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0 }}>
              {SITE.stats.map((s, i) => (
                <div key={i}
                  onMouseEnter={() => setHovered(i)}
                  onMouseLeave={() => setHovered(null)}
                  style={{
                    padding: '18px 14px',
                    borderRight: i < SITE.stats.length - 1 ? '1px solid var(--hairline)' : 'none',
                    transition: 'background 0.3s',
                    background: hovered === i ? 'color-mix(in oklab, var(--accent) 6%, transparent)' : 'transparent',
                    cursor: 'default',
                  }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
                    {s.label}
                  </div>
                  <div className="display tabular" style={{
                    marginTop: 8,
                    fontSize: 30,
                    fontWeight: 460,
                    letterSpacing: '-0.04em',
                    color: 'var(--accent)',
                  }}>{s.value}</div>
                </div>
              ))}
            </div>
            <div style={{
              marginTop: 24, paddingTop: 18,
              borderTop: '1px solid var(--hairline)',
            }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Disseminated via</div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--ink-2)', letterSpacing: '0.04em', lineHeight: 1.7 }}>
                SSRN · LinkedIn · Working Papers
              </div>
            </div>
            <div style={{
              marginTop: 20, paddingTop: 18,
              borderTop: '1px solid var(--hairline)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>NEXT WORKING PAPER · 06.2026</span>
              <a href="#publications" className="link-arrow"
                onClick={(e) => { e.preventDefault(); document.getElementById('publications')?.scrollIntoView({ behavior: 'smooth' }); }}>
                View archive <ArrowSm />
              </a>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
};

const ArrowSm = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

window.Hero = Hero;
window.ArrowSm = ArrowSm;