// Annotation showcase + Domains grid + Capability scope.

const Annotation = () => {
  return (
    <PinnedScrub scrubLength={1.5} background="var(--ex-cream)" sectionId="annotation">
      {(t) => {
        const pressed = t > 0.02;
        return (
          <div style={{
            padding: '110px 40px 40px',
            borderBottom: '1px solid var(--ex-rule)',
            flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0,
          }} className="ex-section-padded">
            <div style={{ maxWidth: 1320, margin: '0 auto', width: '100%', flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
              <div className="ex-annot-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28 }}>
                <div>
                  <div className="hero-meta" style={{ position: 'static', marginBottom: 12 }}>
                    ANNOTATION · /001
                  </div>
                  <h2 className="ex-h2" style={{
                    fontFamily: 'var(--ex-serif)', fontWeight: 300,
                    fontSize: 'clamp(40px, 4.5vw, 60px)', lineHeight: 1.05,
                    letterSpacing: '-0.025em', margin: 0, maxWidth: 720,
                  }}>
                    What ships with <em style={{ fontStyle: 'italic', color: 'var(--ex-signal)' }}>every hour</em>.
                  </h2>
                </div>
                <p style={{
                  maxWidth: 360, margin: 0,
                  fontSize: 15, lineHeight: 1.55,
                  color: 'var(--ex-ink-2)',
                }}>
                  Five annotation layers, all delivered alongside raw audio — inspect each in cascade.
                </p>
              </div>

              <div className="ex-annot-grid" style={{
                display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40,
                alignItems: 'stretch', flex: 1, minHeight: 0,
              }}>
                <div style={{ position: 'relative', height: '100%', minHeight: 0 }}>
                  <HeroStack pressed={pressed} t={t}/>
                </div>

                <div style={{
                  background: 'var(--ex-cream)',
                  border: '1px solid var(--ex-rule)',
                  borderRadius: 6,
                  padding: 24,
                  height: '100%', minHeight: 0,
                  overflow: 'hidden',
                  fontFamily: 'var(--ex-mono)',
                  fontSize: 12, lineHeight: 1.7,
                }}>
                  <div style={{
                    display: 'flex', justifyContent: 'space-between',
                    fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
                    color: 'var(--ex-mute)',
                    borderBottom: '1px solid var(--ex-rule)',
                    paddingBottom: 12, marginBottom: 16,
                  }}>
                    <span>SAMPLE_0481.WAV</span>
                    <span>ES-MX · CDMX</span>
                  </div>

                  <div style={{ marginBottom: 4, fontSize: 9, opacity: 0.5 }}>0:01.2 · SPEAKER_A · F · 34</div>
                  <p style={{ margin: '0 0 18px', color: 'var(--ex-ink)' }}>
                    Entonces le dije <Tag>laughs</Tag> — bueno, tú sabes cómo es, ¿no? Que a veces uno quiere explicar algo <Tag>breath</Tag> y simplemente no salen las palabras<Tag tone="signal">↘ fall</Tag>.
                  </p>

                  <div style={{ marginBottom: 4, fontSize: 9, opacity: 0.5 }}>0:03.8 · SPEAKER_B · M · 42</div>
                  <p style={{ margin: '0 0 18px', color: 'var(--ex-ink)' }}>
                    Sí, totalmente <Tag>overlap</Tag>. A mí me pasa igual con mi mamá. <Tag>laughs</Tag> Cada vez que trato de <Tag>hesitation</Tag> — de explicarle algo del trabajo, se queda como… <Tag tone="signal">↗ rise</Tag> ¿qué?
                  </p>

                  <div style={{ marginBottom: 4, fontSize: 9, opacity: 0.5 }}>0:07.1 · SPEAKER_A</div>
                  <p style={{ margin: '0 0 18px', color: 'var(--ex-ink)' }}>
                    Exacto <Tag tone="signal">emphatic</Tag>. Y es que no es porque no entienda <Tag>creak</Tag>, es que…
                  </p>

                  <div style={{
                    marginTop: 20, paddingTop: 14,
                    borderTop: '1px dashed var(--ex-rule)',
                    fontSize: 10, color: 'var(--ex-mute)',
                    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8,
                  }}>
                    <div>F0 mean · 184 Hz</div>
                    <div>Speech rate · 4.2 syl/s</div>
                    <div>SNR · 38 dB</div>
                    <div>Code-switch · false</div>
                    <div>Disfluency · 0.18</div>
                    <div>Reverb · 0.12</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      }}
    </PinnedScrub>
  );
};

const Tag = ({ children, tone }) => (
  <span style={{
    display: 'inline-block',
    padding: '1px 7px',
    margin: '0 2px',
    fontFamily: 'var(--ex-mono)',
    fontSize: 9,
    letterSpacing: '0.05em',
    textTransform: 'uppercase',
    borderRadius: 3,
    border: tone === 'signal' ? '1px solid oklch(0.68 0.22 30 / 0.5)' : '1px solid var(--ex-rule-strong)',
    background: tone === 'signal' ? 'var(--ex-signal-soft)' : 'var(--ex-cream-2)',
    color: tone === 'signal' ? 'oklch(0.5 0.22 30)' : 'var(--ex-mute)',
    verticalAlign: 'middle',
  }}>{children}</span>
);

const Domains = () => {
  return (
    <PinnedScrub scrubLength={1.4} background="var(--ex-cream)" sectionId="domains">
      {(t) => (
        <section className="ex-section-padded" style={{
          padding: '110px 40px 32px',
          flex: 1, display: 'flex', flexDirection: 'column',
          justifyContent: 'center',
          minHeight: 0,
          borderBottom: '1px solid var(--ex-rule)',
        }}>
          <div style={{ maxWidth: 1320, margin: '0 auto', width: '100%' }}>
            <div className="ex-annot-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28 }}>
              <div>
                <div className="hero-meta" style={{ position: 'static', marginBottom: 14 }}>DOMAINS · /002</div>
                <h2 className="ex-h2" style={{
                  fontFamily: 'var(--ex-serif)', fontWeight: 300,
                  fontSize: 60, lineHeight: 1.05, letterSpacing: '-0.025em', margin: 0,
                }}>
                  Versatile <em style={{ fontStyle: 'italic' }}>datasets.</em>
                </h2>
              </div>
              <p style={{
                maxWidth: 360, margin: 0,
                fontSize: 15, lineHeight: 1.55,
                color: 'var(--ex-ink-2)', textAlign: 'right',
              }}>
                A typological catalog of voice. 1,847 specimens across 60+ languages and 8 domains.
              </p>
            </div>
            <DatasetsAtlas scrollT={t}/>
          </div>
        </section>
      )}
    </PinnedScrub>
  );
};

window.Annotation = Annotation;
window.Domains = Domains;