/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton,
   Reveal, useReveal, useTyping, AppWindow, ControlPill, GenBtn, Shimmer, SB_EASE */
// Create Video feature page — hero: copy left, live video composer right.
const { useState: cvS, useEffect: cvE } = React;
const CV_PROMPT = 'getting ready in the mirror, golden hour, handheld — laugh at the camera at the end';
const CV_OUTS = ['assets/video/explore-1.mp4', 'assets/video/explore-2.mp4', 'assets/video/explore-3.mp4'];

const CVComposer = () => {
  const [ref, on] = useReveal(0.3);
  const [phase, setPhase] = cvS('idle'); // idle → typing → gen → done → loop
  const [typed, doneTyping] = useTyping(CV_PROMPT, phase !== 'idle', 24, 400);
  cvE(() => { if (on && phase === 'idle') setPhase('typing'); }, [on]);
  cvE(() => {
    if (phase === 'typing' && doneTyping) { const t = setTimeout(() => setPhase('gen'), 650); return () => clearTimeout(t); }
    if (phase === 'gen') { const t = setTimeout(() => setPhase('done'), 2100); return () => clearTimeout(t); }
    if (phase === 'done') { const t = setTimeout(() => setPhase('typing'), 11000); return () => clearTimeout(t); }
  }, [phase, doneTyping]);
  const ready = phase === 'done';
  return (
    <div ref={ref} style={{ transform: 'rotate(1.4deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}>
      <AppWindow>
        <div style={{ padding: '20px 22px 22px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 11, marginBottom: 16, height: 250 }}>
            {CV_OUTS.map((src, i) =>
              <div key={i} style={{ position: 'relative', borderRadius: 13, overflow: 'hidden', background: 'rgb(246,243,242)' }}>
                {!ready && <Shimmer style={{ position: 'absolute', inset: 0 }} />}
                <video src={src} autoPlay muted loop playsInline preload="metadata" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
                  opacity: ready ? 1 : 0, filter: ready ? 'none' : 'blur(14px)', transform: ready ? 'scale(1)' : 'scale(1.05)',
                  transition: `opacity 0.55s ${SB_EASE} ${i * 170}ms, filter 0.75s ${SB_EASE} ${i * 170}ms, transform 0.85s ${SB_EASE} ${i * 170}ms` }} />
                {ready ?
                  <span style={{ position: 'absolute', left: 9, bottom: 9, display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 9.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '3px 8px' }}>
                    <svg width="7" height="8" viewBox="0 0 8 10" fill="#fff"><path d="M0 0l8 5-8 5z" /></svg>Take {i + 1}</span> :
                  <span style={{ position: 'absolute', left: 9, bottom: 9, fontSize: 9.5, fontWeight: 700, color: 'rgba(28,27,27,0.6)', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', borderRadius: 9999, padding: '3px 8px' }}>
                    {phase === 'gen' ? 'Rendering…' : 'Waiting'}</span>}
              </div>
            )}
          </div>
          <div style={{ borderRadius: 18, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.15), 0 12px 32px rgba(0,0,0,0.06)', padding: 16 }}>
            <div style={{ display: 'flex', gap: 11, alignItems: 'stretch', marginBottom: 13 }}>
              <div style={{ flex: 1, borderRadius: 13, background: 'rgb(235,231,231)', display: 'flex', alignItems: 'center', padding: '0 15px', minHeight: 52 }}>
                <span style={{ fontSize: 12.5, fontWeight: 500, color: typed ? 'rgb(28,27,27)' : 'rgba(28,27,27,0.6)' }}>
                  {typed || 'Describe the take, or drop an image or video to start from'}
                  {phase === 'typing' && <span style={{ display: 'inline-block', width: 2, height: 14, background: 'var(--brand-purple-500)', marginLeft: 2, verticalAlign: 'middle', animation: 'sz-blink 1s step-end infinite' }} />}
                </span>
              </div>
              <div style={{ width: 60, borderRadius: 11, outline: '1px dashed rgba(28,27,27,0.15)', outlineOffset: -1,
                display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 2 }}>
                <span style={{ fontSize: 7.5, fontWeight: 700, letterSpacing: '0.08em', color: 'rgba(28,27,27,0.45)' }}>REFERENCE</span>
                <span style={{ fontSize: 7.5, color: 'rgba(28,27,27,0.4)' }}>(optional)</span>
              </div>
              <GenBtn active={doneTyping} count={3} style={{ alignSelf: 'center' }} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <ControlPill><span style={{ width: 15, height: 15, borderRadius: '50%', backgroundImage: `url(${GENS[0].src})`, backgroundSize: 'cover', backgroundPosition: 'center 15%' }} />Scarlett</ControlPill>
              <ControlPill>9:16</ControlPill>
              <ControlPill>8s</ControlPill>
              <ControlPill>Sound on</ControlPill>
            </div>
          </div>
        </div>
      </AppWindow>
    </div>);
};

const CreateVideoHero = () => (
  <section style={{ background: CREAM, padding: '0 0 100px' }}>
    <div style={{ maxWidth: 1180, margin: '0 auto', padding: '140px 56px 0', display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 60, alignItems: 'center' }}>
      <div>
        <Reveal>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 20, borderRadius: 9999, padding: '7px 14px', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
            <a href="/" style={{ fontSize: 11.5, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>Features</a>
            <span style={{ fontSize: 11, color: 'rgba(28,27,27,0.35)' }}>/</span>
            <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>Create Video</span>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <h1 style={{ font: '800 62px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 20px', textWrap: 'balance' }}>
            Direct the take.<br /><GradText>Watch it move.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 30px', maxWidth: 430 }}>
            One sentence becomes moving footage of your Character — with her voice, up to a minute long. Start from text, a photo, or a video you already love.
          </p>
        </Reveal>
        <Reveal delay={250}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <CTAButton>Start generating</CTAButton>
          </div>
        </Reveal>
      </div>
      <Reveal delay={200} y={30}><CVComposer /></Reveal>
    </div>
  </section>
);

Object.assign(window, { CreateVideoHero });