// Demo — cinematic video slot
const Demo = () => {
  const [hover, setHover] = React.useState(false);
  return (
    <section id="demo" className="tight">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(120px, 200px) 1fr',
          gap: 'clamp(24px, 5vw, 64px)',
          alignItems: 'baseline',
          marginBottom: 'clamp(36px, 6vh, 64px)',
        }}>
          <div className="eyebrow"><span className="dot"></span> 05 — Demo</div>
          <h2 className="display h-l" style={{maxWidth: '15ch'}}>
            90 seconds, from <span className="it">repo</span> to <span className="it">launch&nbsp;kit.</span>
          </h2>
        </div>

        <div
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
          style={{
            position: 'relative',
            aspectRatio: '16 / 9',
            borderRadius: 16,
            overflow: 'hidden',
            cursor: 'pointer',
            boxShadow: '0 40px 100px -30px rgba(20,15,10,0.45)',
            background: 'var(--ink)',
          }}>

          {/* Poster — typographic */}
          <div style={{
            position:'absolute', inset:0,
            background: 'radial-gradient(ellipse at 70% 30%, #2a2218 0%, #14110d 70%)',
          }}/>

          {/* Big italic word */}
          <div style={{
            position: 'absolute',
            inset: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
            <div className="display" style={{
              fontSize: 'clamp(80px, 18vw, 280px)',
              fontStyle: 'italic',
              color: 'color-mix(in srgb, var(--paper) 8%, transparent)',
              letterSpacing: '-0.04em',
              lineHeight: 0.9,
              userSelect: 'none',
            }}>
              pitchkit
            </div>
          </div>

          {/* Center content */}
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            gap: 22,
            color: 'var(--paper)',
            textAlign:'center',
            padding: 24,
          }}>
            <div style={{
              width: hover ? 108 : 96,
              height: hover ? 108 : 96,
              borderRadius: '50%',
              background: 'var(--vermillion)',
              display:'flex', alignItems:'center', justifyContent:'center',
              transition: 'width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), background .25s ease',
              boxShadow: '0 20px 60px rgba(223, 74, 38, 0.35)',
            }}>
              <div style={{
                width:0, height:0,
                borderTop:'18px solid transparent',
                borderBottom:'18px solid transparent',
                borderLeft:'28px solid var(--paper)',
                marginLeft: 6,
              }}/>
            </div>
            <div className="display" style={{
              fontSize: 'clamp(28px, 4vw, 56px)',
              lineHeight: 1.05,
              fontStyle:'italic',
              maxWidth: '14ch',
            }}>
              Watch a real run.
            </div>
            <div className="mono" style={{
              fontSize: 11,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              color: 'color-mix(in srgb, var(--paper) 60%, transparent)',
              display:'flex', gap: 18, flexWrap:'wrap', justifyContent:'center',
            }}>
              <span>· 01:32</span>
              <span>· 1080p</span>
              <span>· captioned</span>
            </div>
          </div>

          {/* Chapter strip */}
          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: 0,
            padding: '14px 20px',
            background: 'linear-gradient(0deg, rgba(0,0,0,0.5), transparent)',
            display: 'flex', gap: 8,
            alignItems: 'center',
            color: 'var(--paper)',
            fontFamily: 'var(--mono)',
            fontSize: 10,
            letterSpacing: '0.16em',
            textTransform: 'uppercase',
          }}>
            {[
              ['00:00','intro', 0.18],
              ['00:14','init', 0.18],
              ['00:32','prompts', 0.22],
              ['00:54','rendering', 0.20],
              ['01:14','output', 0.22],
            ].map(([t, l, w], i) => (
              <div key={i} style={{flex: w, opacity: 0.75}}>
                <div style={{height: 2, background:'rgba(255,255,255,0.2)', marginBottom: 8, position:'relative'}}>
                  {i === 0 && <div style={{position:'absolute',inset:0, width:'30%', background:'var(--vermillion)'}}/>}
                </div>
                <div style={{display:'flex', justifyContent:'space-between'}}>
                  <span>{t}</span><span>{l}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Caption */}
        <div className="mono" style={{
          marginTop: 18,
          display: 'flex',
          justifyContent: 'space-between',
          fontSize: 11,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: 'var(--ink-mute)',
          flexWrap:'wrap', gap: 8,
        }}>
          <span>↳ recorded on a base m2 air · no edits</span>
          <span>fig. 06 — the full pipeline, end-to-end</span>
        </div>
      </div>
    </section>
  );
};

window.Demo = Demo;