// Hero v2: The Stack
// Annotation layers as 3D-stacked translucent slabs. Press to illuminate
// each layer in cascading sequence. Like exploded-view engineering drawings.

const HeroStack = ({ pressed, t }) => {
  const open = Math.min(1, t);

  // 5 layers; each lights up at staggered times
  const layers = [
    { id: 'L1', name: 'TRANSCRIPT',     start: 0.00, render: TranscriptLayer },
    { id: 'L2', name: 'PROSODY',        start: 0.15, render: ProsodyLayer },
    { id: 'L3', name: 'PARALINGUISTIC', start: 0.30, render: ParaLayer },
    { id: 'L4', name: 'SPEAKER',        start: 0.45, render: SpeakerLayer },
    { id: 'L5', name: 'ACOUSTIC',       start: 0.60, render: AcousticLayer },
  ];

  return (
    <div className="hero-frame">
      <div className="hero-meta" style={{ top: 24, left: 28 }}>
        ANNOTATION_STACK · v4.2
      </div>
      <div className="hero-meta" style={{ top: 24, right: 28, textAlign: 'right' }}>
        5 LAYERS · 50+ LABELS<br/>
        <span style={{ opacity: 0.6 }}>SAMPLE 0:00 — 0:04.12</span>
      </div>

      <div style={{
        position: 'absolute', inset: '90px 80px 60px 80px',
        display: 'grid', placeItems: 'center',
        perspective: 1600,
      }}>
        <div style={{
          position: 'relative',
          width: 'min(560px, 100%)', height: 280,
          transformStyle: 'preserve-3d',
          transform: `rotateX(${46 - open * 10}deg) rotateZ(-12deg) rotateY(0deg) scale(${0.92 + open * 0.04})`,
          transition: 'transform 0.6s cubic-bezier(.2,.7,.2,1)',
        }}>
          {layers.map((L, i) => {
            const lit = open > L.start ? Math.min(1, (open - L.start) / 0.18) : 0;
            const z = i * 44 + lit * 22;
            return (
              <div key={L.id} style={{
                position: 'absolute', inset: 0,
                transform: `translateZ(${z}px)`,
                transition: 'transform 0.4s cubic-bezier(.2,.7,.2,1)',
              }}>
                {/* slab */}
                <div style={{
                  position: 'absolute', inset: 0,
                  background: lit > 0
                    ? `oklch(0.96 0.005 80 / ${0.85 + lit * 0.1})`
                    : 'oklch(0.94 0.005 80 / 0.78)',
                  borderRadius: 4,
                  border: `1px solid ${lit > 0.3 ? 'oklch(0.68 0.22 30 / 0.7)' : 'rgba(26,22,18,0.18)'}`,
                  boxShadow: lit > 0.2
                    ? `0 18px 40px -10px oklch(0.68 0.22 30 / ${lit * 0.35}), 0 0 0 1px oklch(0.68 0.22 30 / ${lit * 0.4})`
                    : '0 8px 24px -8px rgba(26,22,18,0.18)',
                  transition: 'background 0.3s, border-color 0.3s, box-shadow 0.3s',
                }}/>
                {/* layer tab */}
                <div style={{
                  position: 'absolute', left: -2, top: -1,
                  padding: '4px 10px',
                  background: lit > 0.3 ? 'var(--ex-signal)' : 'var(--ex-ink)',
                  color: 'var(--ex-cream)',
                  fontFamily: 'var(--ex-mono)',
                  fontSize: 9,
                  letterSpacing: '0.08em',
                  borderRadius: '4px 4px 0 0',
                  transform: 'translateY(-100%)',
                  transition: 'background 0.3s',
                }}>
                  {L.id} · {L.name}
                </div>
                {/* layer content */}
                <div style={{ position: 'absolute', inset: 0, padding: 18, opacity: 0.6 + lit * 0.4 }}>
                  <L.render lit={lit} t={t} />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Bottom legend */}
      <div style={{
        position: 'absolute', bottom: 24, left: 28, right: 28,
        display: 'flex', gap: 20, alignItems: 'flex-end', justifyContent: 'space-between',
      }}>
        <div className="hero-meta" style={{ position: 'static' }}>
          {layers.map((L, i) => {
            const lit = open > L.start ? Math.min(1, (open - L.start) / 0.18) : 0;
            return (
              <span key={L.id} style={{
                marginRight: 14,
                color: lit > 0.4 ? 'var(--ex-signal)' : 'var(--ex-mute)',
                opacity: lit > 0 ? 1 : 0.5,
                transition: 'color 0.3s, opacity 0.3s',
              }}>
                ● {L.id}
              </span>
            );
          })}
        </div>
        <div className="hero-meta" style={{ position: 'static', textAlign: 'right' }}>
          {pressed ? '● UNFOLDING' : '○ COLLAPSED'}
        </div>
      </div>
    </div>
  );
};

const TranscriptLayer = ({ lit }) => (
  <div style={{ fontFamily: 'var(--ex-mono)', fontSize: 11, color: '#1a1612', lineHeight: 1.5 }}>
    <div style={{ opacity: 0.5, fontSize: 9, marginBottom: 6 }}>0:01.2 SPK_A</div>
    <div>Entonces le dije <span style={{ opacity: 0.5 }}>[laughs]</span> — bueno, tú sabes cómo es, ¿no?</div>
    <div style={{ opacity: 0.5, fontSize: 9, marginTop: 10, marginBottom: 6 }}>0:03.8 SPK_B</div>
    <div>Sí, totalmente <span style={{ opacity: 0.5 }}>[overlap]</span>.</div>
  </div>
);

const ProsodyLayer = ({ lit }) => (
  <div style={{ height: '100%', display: 'flex', alignItems: 'center' }}>
    <svg viewBox="0 0 680 80" style={{ width: '100%', height: 80 }}>
      <path d="M 0 40 Q 80 10 160 30 T 320 24 T 480 50 T 640 32 L 680 40"
        fill="none"
        stroke={lit > 0.3 ? 'oklch(0.68 0.22 30)' : '#1a1612'}
        strokeWidth="1.5"/>
      <text x="40" y="65" fontFamily="var(--ex-mono)" fontSize="9" fill="#6b5f52">↗ rise</text>
      <text x="280" y="55" fontFamily="var(--ex-mono)" fontSize="9" fill="#6b5f52">— level</text>
      <text x="500" y="75" fontFamily="var(--ex-mono)" fontSize="9" fill="#6b5f52">↘ fall</text>
    </svg>
  </div>
);

const ParaLayer = ({ lit }) => (
  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', fontFamily: 'var(--ex-mono)', fontSize: 10 }}>
    {['LAUGH 0:01.4', 'BREATH 0:02.1', 'HESITATION 0:02.8', 'OVERLAP 0:03.6', 'PROSODY:RISE'].map(p => (
      <span key={p} style={{
        padding: '4px 8px',
        border: `1px solid ${lit > 0.3 ? 'oklch(0.68 0.22 30 / 0.6)' : 'rgba(26,22,18,0.2)'}`,
        borderRadius: 3,
        color: lit > 0.3 ? 'oklch(0.55 0.22 30)' : '#1a1612',
        background: lit > 0.3 ? 'oklch(0.68 0.22 30 / 0.08)' : 'transparent',
        transition: 'all 0.3s',
      }}>{p}</span>
    ))}
  </div>
);

const SpeakerLayer = ({ lit }) => (
  <div style={{ display: 'flex', gap: 24, fontFamily: 'var(--ex-mono)', fontSize: 10, color: '#1a1612' }}>
    <div>
      <div style={{ opacity: 0.5, marginBottom: 4 }}>SPK_A</div>
      <div>F · 34 · CDMX</div>
      <div style={{ opacity: 0.7 }}>VOC: WARM</div>
      <div style={{ opacity: 0.7 }}>RATE: 4.2 syl/s</div>
    </div>
    <div style={{ borderLeft: '1px dashed rgba(0,0,0,0.2)', paddingLeft: 24 }}>
      <div style={{ opacity: 0.5, marginBottom: 4 }}>SPK_B</div>
      <div>M · 42 · GDL</div>
      <div style={{ opacity: 0.7 }}>VOC: BRIGHT</div>
      <div style={{ opacity: 0.7 }}>RATE: 3.8 syl/s</div>
    </div>
  </div>
);

const AcousticLayer = ({ lit, t }) => {
  // little spectrogram
  const cols = 64, rows = 12;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 1, height: '100%' }}>
      {Array.from({ length: cols * rows }).map((_, i) => {
        const c = i % cols, r = Math.floor(i / cols);
        const intensity = Math.abs(Math.sin(c * 0.18 + r * 0.4 + (lit > 0 ? t * 6 : 0))) *
                          (1 - Math.abs(r - 5) / 8) *
                          (lit > 0.2 ? 1 : 0.4);
        return (
          <div key={i} style={{
            background: lit > 0.3
              ? `oklch(0.68 0.22 30 / ${intensity * 0.9})`
              : `oklch(0.3 0.02 60 / ${intensity * 0.7})`,
            borderRadius: 1,
          }}/>
        );
      })}
    </div>
  );
};

window.HeroStack = HeroStack;