/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, useTyping, Shimmer, SB_EASE,
   MShell, MHead, MGenerate */
// Create Video feature page — mobile layout.
const { useState: cvmS, useEffect: cvmE } = React;
const MCV_PROMPT = 'getting ready in the mirror, golden hour — laugh at the camera at the end';

const MCVHero = () => {
  const [ref, on] = useReveal(0.25);
  const [phase, setPhase] = cvmS('idle');
  const [typed, doneTyping] = useTyping(MCV_PROMPT, phase !== 'idle', 24, 400);
  cvmE(() => { if (on && phase === 'idle') setPhase('typing'); }, [on]);
  cvmE(() => {
    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 (
    <section style={{ background: CREAM, padding: '0 22px 56px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 0 30px' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
          <img loading="lazy" decoding="async" src="assets/logo-icon.png" alt="" style={{ width: 19, height: 19, objectFit: 'contain' }} />
          <span style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-0.03em', color: INK }}>sozee</span>
        </span>
      </div>
      <div style={{ textAlign: 'center' }}>
      <Reveal>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginBottom: 16, borderRadius: 9999, padding: '6px 12px', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
          <a href="/" style={{ fontSize: 10.5, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>Features</a>
          <span style={{ fontSize: 10, color: 'rgba(28,27,27,0.35)' }}>/</span>
          <span style={{ fontSize: 10.5, fontWeight: 700, color: INK }}>Create Video</span>
        </div>
      </Reveal>
      <Reveal delay={90}>
        <h1 style={{ font: '800 44px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 16px', textWrap: 'balance' }}>
          Direct the take.<br /><GradText>Watch it move.</GradText>
        </h1>
      </Reveal>
      <Reveal delay={170}>
        <p style={{ fontSize: 14.5, lineHeight: 1.58, color: 'var(--text-secondary)', margin: '0 0 24px' }}>
          One sentence becomes moving footage of your Character — with her voice. Start from text, a photo, or a video you already love.
        </p>
      </Reveal>
      <Reveal delay={250} style={{ marginBottom: 34 }}><CTAButton size="sm">Start generating</CTAButton></Reveal>
      </div>
      <Reveal delay={200} y={26}>
        <div ref={ref} style={{ transform: 'rotate(1.2deg) perspective(1200px) rotateY(-3deg)', borderRadius: 20, background: '#fff', boxShadow: '0 20px 44px rgba(28,27,27,0.12), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 13 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9, marginBottom: 11 }}>
            {['assets/video/explore-1.mp4', 'assets/video/explore-3.mp4'].map((src, i) =>
              <div key={i} style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', background: 'rgb(246,243,242)', aspectRatio: '9 / 13' }}>
                {!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)', transition: `opacity 0.55s ${SB_EASE} ${i * 170}ms, filter 0.75s ${SB_EASE} ${i * 170}ms` }} />
                <span style={{ position: 'absolute', left: 7, bottom: 7, display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 8, fontWeight: 700, color: ready ? '#fff' : 'rgba(28,27,27,0.6)',
                  background: ready ? 'rgba(28,27,27,0.55)' : '#fff', borderRadius: 9999, padding: '3px 7px' }}>
                  {ready && <svg width="6" height="7" viewBox="0 0 8 10" fill="#fff"><path d="M0 0l8 5-8 5z" /></svg>}
                  {ready ? `Take ${i + 1}` : phase === 'gen' ? 'Rendering…' : 'Waiting'}</span>
              </div>
            )}
          </div>
          <div style={{ borderRadius: 14, boxShadow: 'inset 0 0 0 1.5px rgba(129,60,237,0.35)', padding: 9, marginBottom: 9 }}>
            <div style={{ display: 'flex', gap: 8, marginBottom: 9 }}>
              <span style={{ width: 30, height: 30, borderRadius: 8, flexShrink: 0, outline: '1.5px dashed rgba(28,27,27,0.22)', outlineOffset: -1.5, display: 'grid', placeItems: 'center' }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="rgba(28,27,27,0.4)" strokeWidth="1.8"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9l5 3-5 3z"/></svg>
              </span>
              <div style={{ fontSize: 11.5, lineHeight: 1.45, color: typed ? INK : 'rgba(28,27,27,0.42)', minHeight: 30, fontWeight: 500, textAlign: 'left' }}>
                {typed || 'Describe the take, or drop an image or video…'}
                {phase === 'typing' && <span style={{ display: 'inline-block', width: 2, height: 12, background: 'var(--brand-purple-500)', marginLeft: 2, verticalAlign: 'middle', animation: 'sz-blink 1s step-end infinite' }} />}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 9999, padding: '4px 9px', fontSize: 9, fontWeight: 600, background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: INK }}>
                <span style={{ width: 11, height: 11, borderRadius: '50%', backgroundImage: `url(${GENS[0].src})`, backgroundSize: 'cover', backgroundPosition: 'center 15%' }} />Scarlett
              </span>
              {['9:16', '8s', 'Sound on'].map(c =>
                <span key={c} style={{ borderRadius: 9999, padding: '4px 9px', fontSize: 9, fontWeight: 600, background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: INK }}>{c}</span>)}
            </div>
          </div>
          <MGenerate count={3} active={doneTyping} />
        </div>
      </Reveal>
    </section>);
};

// ---------- § 01 — Four ways in ----------
const MCV_WAYS = [
  { t: 'Text to video', d: 'Type the take — Sozee shoots it from scratch.', media: 'prompt' },
  { t: 'Image to video', d: 'Start from any photo — it starts moving.', media: 'img' },
  { t: 'Reference video', d: 'Same energy, same pacing — performed by you.', media: 'vid' },
  { t: 'Clone a reel', d: 'Paste a link. Same motion, your face, your voice.', media: 'link' }];

const MCVWays = () => (
  <MShell bg="#fff">
    <MHead title={<span>Four ways in.<br /><GradText>One Generate.</GradText></span>}
      sub="However the idea arrives — a sentence, a still, a clip, a link — it leaves as footage of your Character." />
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 28 }}>
      {MCV_WAYS.map((w, i) =>
        <Reveal key={w.t} delay={i * 80} y={18}>
          <div style={{ borderRadius: 14, background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', overflow: 'hidden', height: '100%', boxSizing: 'border-box' }}>
            <div style={{ position: 'relative', height: 92, background: 'rgb(246,243,242)', overflow: 'hidden' }}>
              {w.media === 'prompt' && <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', padding: 10 }}>
                <div style={{ width: '100%', borderRadius: 9, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.12)', padding: '8px 9px', fontSize: 8.5, fontWeight: 500, color: INK, lineHeight: 1.45 }}>
                  beach walk at sunset, wind in my hair<span style={{ display: 'inline-block', width: 1.5, height: 8, background: 'var(--brand-purple-500)', marginLeft: 2, verticalAlign: 'middle', animation: 'sz-blink 1s step-end infinite' }} /></div>
              </div>}
              {w.media === 'img' && <React.Fragment>
                <img loading="lazy" decoding="async" src="assets/create/out-garden.webp" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 16%' }} />
                <span style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', width: 28, height: 28, borderRadius: '50%', background: 'rgba(252,248,248,0.85)', display: 'grid', placeItems: 'center', boxShadow: '0 6px 14px rgba(28,27,27,0.25)' }}>
                  <svg width="9" height="11" viewBox="0 0 12 14" fill={INK}><path d="M0 0l12 7-12 7z" /></svg></span>
              </React.Fragment>}
              {w.media === 'vid' && <video src="assets/video/explore-2.mp4" autoPlay muted loop playsInline preload="metadata" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}
              {w.media === 'link' && <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', padding: 10 }}>
                <div style={{ width: '100%', borderRadius: 9999, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.12)', padding: '7px 10px', display: 'flex', alignItems: 'center', gap: 5, minWidth: 0 }}>
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="rgba(28,27,27,0.5)" strokeWidth="2.2" strokeLinecap="round" style={{ flexShrink: 0 }}><path d="M10 13a5 5 0 007.07 0l3-3a5 5 0 00-7.07-7.07l-1.5 1.5" /><path d="M14 11a5 5 0 00-7.07 0l-3 3a5 5 0 007.07 7.07l1.5-1.5" /></svg>
                  <span style={{ fontSize: 8, fontWeight: 600, color: 'rgba(28,27,27,0.65)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>instagram.com/reel/xK92hf4…</span>
                </div>
              </div>}
              <span style={{ position: 'absolute', top: 7, left: 7, fontSize: 7.5, fontWeight: 800, letterSpacing: '0.08em', color: 'rgba(28,27,27,0.5)', background: 'rgba(252,248,248,0.85)', borderRadius: 9999, padding: '2px 7px' }}>0{i + 1}</span>
            </div>
            <div style={{ padding: '11px 12px 13px' }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '-0.01em', color: INK, marginBottom: 4 }}>{w.t}</div>
              <div style={{ fontSize: 10, lineHeight: 1.45, color: 'var(--text-secondary)' }}>{w.d}</div>
            </div>
          </div>
        </Reveal>
      )}
    </div>
  </MShell>
);

// ---------- § 04 — Formats ----------
const MCV_FMT = [
  { vid: 'assets/video/explore-1.mp4', ar: '9 / 16', w: 148, r: '-2deg', chip: '9:16 · Reels & TikTok', badge: '♪' },
  { vid: 'assets/video/live-mode.mp4', ar: '16 / 10', w: 210, r: '1.5deg', chip: '16:9 · YouTube' }];

const MCVFormats = () => (
  <MShell>
    <MHead title={<span>Cut for<br /><GradText>every feed.</GradText></span>}
      sub="Tall for Reels and TikTok, wide for YouTube — with her voice on the track. Pick the shape before you generate." />
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 16, marginTop: 34, padding: '0 2px' }}>
      {MCV_FMT.map((f, i) =>
        <Reveal key={i} delay={140 + i * 110} y={22}>
          <div style={{ width: f.w, transform: `rotate(${f.r})` }}>
            <div style={{ position: 'relative', borderRadius: 14, overflow: 'hidden', aspectRatio: f.ar, boxShadow: '0 16px 34px rgba(28,27,27,0.18), 0 0 0 4px #fff' }}>
              <video src={f.vid} autoPlay muted loop playsInline preload="metadata" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              {f.badge && <span style={{ position: 'absolute', top: 7, right: 7, width: 20, height: 20, borderRadius: '50%', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 800, color: '#fff',
                background: PULSE, boxShadow: '0 6px 16px -2px rgba(104,19,212,0.5)' }}>{f.badge}</span>}
            </div>
            <div style={{ marginTop: 9, fontSize: 9.5, fontWeight: 700, color: 'rgba(28,27,27,0.6)', letterSpacing: '0.04em', textAlign: 'center', whiteSpace: 'nowrap' }}>{f.chip}</div>
          </div>
        </Reveal>
      )}
    </div>
  </MShell>
);

// ---------- § 05 — Where the take goes next ----------
const MCV_NEXT = [
  { t: 'The Scheduler', d: 'Queue it to six platforms straight from the board.', kind: 'sched', href: '/#11 Scheduler' },
  { t: 'Create Image', d: 'The matching stills — same scene, same outfit.', kind: 'image', href: '/create-image' },
  { t: 'Explore', d: 'Video concepts that already perform. Tap to prefill.', kind: 'explore', href: '/#14 Explore' }];

const MCVPipeMedia = ({ kind }) => (
  <div style={{ width: 96, borderRadius: 11, overflow: 'hidden', flexShrink: 0, aspectRatio: '4/4.4', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 5, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 4 }}>
    {kind === 'sched' &&
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: 1, minHeight: 0 }}>
        {[['assets/gen/beach-pool.png', 'IG · 9:00'], ['assets/shoot/set-2.webp', 'TT · 12:30'], ['assets/create/out-garden.webp', 'OF · 6:00']].map(([src, l]) =>
          <span key={l} style={{ display: 'flex', alignItems: 'center', gap: 5, borderRadius: 6, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '0 5px', flex: 1, minHeight: 0 }}>
            <span style={{ width: 14, height: 14, borderRadius: 4, overflow: 'hidden', flexShrink: 0 }}>
              <img loading="lazy" decoding="async" src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} /></span>
            <span style={{ fontSize: 7, fontWeight: 700, color: INK, whiteSpace: 'nowrap' }}>{l}</span>
          </span>)}
      </div>}
    {kind === 'image' && <React.Fragment>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, flex: 1, minHeight: 0 }}>
        {['assets/create/out-mirror.webp', 'assets/create/out-garden.webp'].map((src, i) =>
          <span key={src} style={{ position: 'relative', borderRadius: 5, overflow: 'hidden', boxShadow: i === 0 ? '0 0 0 1.5px var(--brand-purple-500)' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>
            <img loading="lazy" decoding="async" src={src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} />
          </span>)}
      </div>
      <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3, borderRadius: 6, padding: '4px 0', background: PULSE, color: '#fff', fontSize: 6.5, fontWeight: 800, letterSpacing: '0.05em' }}>GENERATE ✦</span>
    </React.Fragment>}
    {kind === 'explore' &&
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, flex: 1, minHeight: 0 }}>
        {['assets/video/explore-1.mp4', 'assets/video/explore-2.mp4'].map((src, i) =>
          <span key={src} style={{ position: 'relative', borderRadius: 5, overflow: 'hidden', boxShadow: i === 1 ? '0 0 0 1.5px var(--brand-purple-500)' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>
            <video src={src} autoPlay muted loop playsInline preload="metadata" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          </span>)}
      </div>}
  </div>
);

const MCVPipeline = () => (
  <MShell bg="#fff">
    <MHead title={<span>One take is<br /><GradText>just the start.</GradText></span>}
      sub="Every render lands on a board wired into the rest of the studio." />
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 28 }}>
      {MCV_NEXT.map((c, i) =>
        <Reveal key={c.t} delay={i * 90} y={20}>
          <a href={c.href} style={{ display: 'flex', gap: 12, borderRadius: 16, overflow: 'hidden', background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: 'inherit', padding: 10, transform: `rotate(${i % 2 ? 0.9 : -0.9}deg)` }}>
            <MCVPipeMedia kind={c.kind} />
            <div style={{ minWidth: 0, alignSelf: 'center' }}>
              <div style={{ fontSize: 14.5, fontWeight: 700, letterSpacing: '-0.01em', color: INK, marginBottom: 4 }}>{c.t}</div>
              <div style={{ fontSize: 11.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{c.d}</div>
            </div>
          </a>
        </Reveal>
      )}
    </div>
    <Reveal delay={280} style={{ textAlign: 'center', marginTop: 20 }}>
      <a href="/" style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--brand-purple-700)' }}>See the full tour →</a>
    </Reveal>
  </MShell>
);

const MCVPage = () => (
  <React.Fragment>
    <div style={{ fontFamily: 'var(--font-sans)', maxWidth: 430, margin: '0 auto', boxShadow: '0 0 0 1px rgba(28,27,27,0.06), 0 0 60px rgba(28,27,27,0.08)', overflow: 'clip' }}>
      <div data-screen-label="Hero — Create Video"><MCVHero /></div>
      <div data-screen-label="01 Ways in"><MCVWays /></div>
      <div data-screen-label="02 Reel cloning"><window.MReelSection /></div>
      <div data-screen-label="03 Voice and Live"><window.MVoiceLiveSection /></div>
      <div data-screen-label="04 Formats"><MCVFormats /></div>
      <div data-screen-label="05 What comes next"><MCVPipeline /></div>
      <div data-screen-label="06 Pricing"><window.MPricingSection /></div>
      <div data-screen-label="07 FAQ"><window.MFAQSection /></div>
      <div data-screen-label="CTA + Footer"><window.MFinalSection /></div>
    </div>
    <window.MCISticky />
    <window.SozeeNavMobile siteHref="/" localLabels={{ '/create-video': 'Hero — Create Video', '08 Reel cloning': '02 Reel cloning', '09 Voice and Live': '03 Voice and Live', '15 Pricing': '06 Pricing', '16 FAQ': '07 FAQ' }} />
  </React.Fragment>
);

Object.assign(window, { MCVPage });
