/* MMDiff project page — top sections: Nav, Hero, Abstract */
const DS = window.MMDiffDesignSystem_07b833;
const { Button, Badge, Kicker, StatBlock, SpectrumBar, Card } = DS;
const I = window.Icons;
const D = window.MMD;

const iconFor = { paper: I.paper, arxiv: I.arxiv, github: I.github, data: I.data, hf: I.hf };

function NavBar() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: 'smooth' });
  };
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 clamp(1rem, 4vw, 2.2rem)', height: '60px',
      background: scrolled ? 'rgba(255,255,255,0.86)' : 'rgba(255,255,255,0)',
      backdropFilter: scrolled ? 'saturate(180%) blur(12px)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--line)' : 'transparent'}`,
      transition: 'background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out)',
    }}>
      <a href="#top" onClick={go('top')} style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', textDecoration: 'none' }}>
        <span style={{ fontFamily: 'var(--font-serif)', fontSize: '1.35rem', fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--text-strong)' }}>
          MM<span style={{ fontStyle: 'italic', color: 'var(--accent-ink)' }}>Diff</span>
        </span>
        <SpectrumBar length="22px" thickness="3px" />
      </a>
      <nav style={{ display: 'flex', alignItems: 'center', gap: 'clamp(0.5rem, 2vw, 1.6rem)' }}>
        <div className="nav-links" style={{ display: 'flex', gap: '1.4rem' }}>
          {['abstract', 'method', 'results', 'use-cases', 'cite'].map((id) => (
            <a key={id} href={'#' + id} onClick={go(id)} style={{
              fontFamily: 'var(--font-mono)', fontSize: '0.74rem', letterSpacing: '0.12em',
              textTransform: 'uppercase', color: 'var(--text-muted)', textDecoration: 'none',
            }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent-ink)'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}
            >{id === 'cite' ? 'BibTeX' : id === 'abstract' ? 'Idea' : id === 'use-cases' ? 'Uses' : id}</a>
          ))}
        </div>
        <Button variant="solid" size="sm" href={D.meta.released ? D.meta.repo : undefined} disabled={!D.meta.released}
          title={D.meta.released ? undefined : 'Available after release'}
          target={D.meta.released ? '_blank' : undefined} rel={D.meta.released ? 'noopener noreferrer' : undefined}
          icon={React.createElement(I.github)}>Code</Button>
      </nav>
    </header>
  );
}

function Hero() {
  return (
    <section id="top" style={{
      position: 'relative', textAlign: 'center',
      padding: 'clamp(6rem, 12vw, 9rem) var(--section-pad-x) clamp(2.5rem, 5vw, 4rem)',
      background: 'radial-gradient(60rem 30rem at 50% -10rem, rgba(165,44,96,0.08), transparent 60%), var(--paper-warm)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div style={{ maxWidth: '64rem', margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'center', gap: '0.6rem', marginBottom: '1.4rem', flexWrap: 'wrap' }}>
          <Badge variant="neutral" dot>{D.meta.venue}</Badge>
        </div>
        <h1 style={{
          fontFamily: 'var(--font-serif)', fontWeight: 500,
          fontSize: 'var(--text-display)', lineHeight: 1.05, letterSpacing: '-0.022em',
          color: 'var(--text-strong)', margin: '0 auto 1.4rem', maxWidth: '20ch',
        }}>
          Extending diffusion transformers for <span style={{ fontStyle: 'italic', color: 'var(--accent-ink)' }}>multi-modal</span> generation
        </h1>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '1.6rem' }}>
          <SpectrumBar length="120px" thickness="4px" />
        </div>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: '1.1rem', fontWeight: 500, color: 'var(--text-body)' }}>
          {D.meta.authors.map((a, i) => (
            <span key={a.name}>
              <span style={{ color: 'var(--text-strong)' }}>{a.name}</span>
              <sup style={{ color: 'var(--text-muted)' }}>{a.sup}</sup>
              {i < D.meta.authors.length - 1 ? <span style={{ color: 'var(--text-faint)', margin: '0 0.5rem' }}>·</span> : null}
            </span>
          ))}
        </div>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: '0.98rem', color: 'var(--text-muted)', marginTop: '0.5rem' }}>
          <sup>1</sup>{D.meta.affiliation}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.7rem', marginTop: '2rem' }}>
          <div style={{ display: 'flex', justifyContent: 'center', gap: '0.6rem', flexWrap: 'wrap' }}>
            {D.meta.links.map((l) => {
              const dis = !!l.soon || (l.gated && !D.meta.released);
              return (
                <Button key={l.label} href={dis ? undefined : l.href} variant={l.variant} disabled={dis}
                  title={dis ? 'Available after release' : undefined}
                  target={dis ? undefined : '_blank'} rel={dis ? undefined : 'noopener noreferrer'}
                  icon={l.kind === 'arxiv' ? null : React.createElement(iconFor[l.kind])}>{l.label}</Button>
              );
            })}
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-faint)' }}>
            {D.meta.released ? 'Paper \u0026 arXiv links available after release' : 'Links available after release'}
          </div>
        </div>
      </div>

      {/* Teaser figure on the lab surface */}
      <figure style={{ margin: 'clamp(2.5rem, 5vw, 4rem) auto 0', maxWidth: 'var(--measure-wide)' }}>
        <Card variant="figure">
          <img src="assets/teaser.png" alt="MMDiff teaser: generated images with their decoded saliency, segmentation and depth"
            style={{ width: '100%', display: 'block' }} />
        </Card>
        <figcaption style={{
          fontFamily: 'var(--font-sans)', fontSize: '0.95rem', lineHeight: 1.6,
          color: 'var(--text-muted)', marginTop: '1rem', maxWidth: '52rem',
          marginLeft: 'auto', marginRight: 'auto', textAlign: 'center',
        }}>
          MMDiff gets more out of one frozen image generator: in a single pass it creates an image and reads several detailed maps, perfectly aligned to it.
        </figcaption>
      </figure>
    </section>
  );
}

function Abstract() {
  return (
    <section id="abstract" style={{ padding: 'var(--section-pad-y) var(--section-pad-x)', background: 'var(--paper)' }}>
      <div style={{ maxWidth: 'var(--measure-wide)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0, 0.9fr) minmax(0, 2.1fr)', gap: 'clamp(1.5rem, 4vw, 3.5rem)' }} className="abstract-grid">
        <div>
          <Kicker index="01">The idea</Kicker>
        </div>
        <div>
          <p style={{
            fontFamily: 'var(--font-serif)', fontWeight: 500,
            fontSize: 'clamp(1.5rem, 3.2vw, 2.1rem)', lineHeight: 1.22, letterSpacing: '-0.015em',
            color: 'var(--text-strong)', margin: '0 0 1.2rem', textWrap: 'pretty',
          }}>{D.idea.lead}</p>
          <p className="mmd-prose" style={{ fontSize: 'var(--text-lead)', margin: 0, color: 'var(--text-muted)' }}>{D.idea.body}</p>
          <div style={{ height: '1px', background: 'var(--line)', margin: '2.4rem 0' }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1.6rem' }} className="stat-grid">
            {D.stats.map((s) => <StatBlock key={s.label} value={s.value} label={s.label} sub={s.sub} accent={s.accent} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { NavBar, Hero, Abstract });
