/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE */
// Create Video feature page — Ways In · Formats · Pipeline.

const CVBadge = ({ label, bg = CREAM }) =>
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 18, borderRadius: 9999, padding: '7px 14px', background: bg, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
    <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#813CED' }} />
    <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>{label}</span>
  </div>;

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

const WaysInSection = () => (
  <section style={{ background: '#fff', padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 46 }}>
        <Reveal delay={90}>
          <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px' }}>
            Four ways in.<br /><GradText>One Generate.</GradText>
          </h2>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 auto', maxWidth: 520 }}>
            However the idea arrives — a sentence, a still, a clip, a link — it leaves as footage of your Character.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {CV_WAYS.map((w, i) =>
          <Reveal key={w.t} delay={i * 100} y={24}>
            <div style={{ borderRadius: 18, 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: 148, background: 'rgb(246,243,242)', overflow: 'hidden' }}>
                {w.media === 'prompt' && <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', padding: 16 }}>
                  <div style={{ width: '100%', borderRadius: 12, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.12)', padding: '11px 13px', fontSize: 11, fontWeight: 500, color: INK, lineHeight: 1.45 }}>
                    beach walk at sunset, wind in my hair<span style={{ display: 'inline-block', width: 2, height: 11, 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: 40, height: 40, borderRadius: '50%', background: 'rgba(252,248,248,0.85)', backdropFilter: 'blur(6px)', display: 'grid', placeItems: 'center', boxShadow: '0 8px 20px rgba(28,27,27,0.25)' }}>
                    <svg width="13" height="15" 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: 16 }}>
                  <div style={{ width: '100%', borderRadius: 9999, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.12)', padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 8 }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(28,27,27,0.5)" strokeWidth="2.2" strokeLinecap="round"><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: 10.5, 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: 10, left: 10, fontSize: 9, fontWeight: 800, letterSpacing: '0.08em', color: 'rgba(28,27,27,0.5)', background: 'rgba(252,248,248,0.85)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '3px 9px' }}>0{i + 1}</span>
              </div>
              <div style={{ padding: '17px 18px 20px' }}>
                <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.01em', color: INK, marginBottom: 6 }}>{w.t}</div>
                <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{w.d}</div>
              </div>
            </div>
          </Reveal>
        )}
      </div>
    </div>
  </section>
);

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

const VideoFormatsSection = () => (
  <section style={{ background: CREAM, padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto', textAlign: 'center' }}>
      <Reveal delay={90}>
        <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px' }}>
          Cut for<br /><GradText>every feed.</GradText>
        </h2>
      </Reveal>
      <Reveal delay={170}>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 auto 50px', maxWidth: 520 }}>
          Tall for Reels and TikTok, wide for YouTube — with her voice on the track. Pick the shape before you generate, not in an editor after.
        </p>
      </Reveal>
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 44, paddingBottom: 12 }}>
        {CV_FMT.map((f, i) =>
          <Reveal key={i} delay={160 + i * 110} y={24}>
            <div style={{ width: f.w, transform: `rotate(${f.r})` }}>
              <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', aspectRatio: f.ar, boxShadow: '0 22px 44px rgba(28,27,27,0.18), 0 0 0 5px #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: 10, right: 10, width: 26, height: 26, borderRadius: '50%', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 800, color: '#fff',
                  background: PULSE, boxShadow: '0 6px 16px -2px rgba(104,19,212,0.5)' }}>{f.badge}</span>}
              </div>
              <div style={{ marginTop: 12, fontSize: 12, fontWeight: 700, color: 'rgba(28,27,27,0.6)', letterSpacing: '0.04em', whiteSpace: 'nowrap' }}>{f.chip}</div>
            </div>
          </Reveal>
        )}
      </div>
    </div>
  </section>
);

// ---------- § 05 — Where the take goes next ----------
const CV_NEXT = [
  { t: 'The Scheduler', d: 'Queue it to six platforms straight from the board. Posted while you shoot the next take.', kind: 'sched', href: '/#11 Scheduler' },
  { t: 'Create Image', d: 'Need the matching stills? Same scene, same outfit — a photo set to post alongside it.', kind: 'image', href: '/create-image' },
  { t: 'Explore', d: 'A feed of video concepts that already perform. Tap one — it prefills the composer.', kind: 'explore', href: '/#14 Explore' }];

const CV_PANEL = { borderRadius: '12px 12px 0 0', background: '#fff', boxShadow: '0 10px 24px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 10, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' };
const CV_ROWS = [
  { src: 'assets/gen/beach-pool.png', p: 'Instagram', time: '9:00 AM', st: 'Queued' },
  { src: 'assets/shoot/set-2.webp', p: 'TikTok', time: '12:30 PM', st: 'Queued' },
  { src: 'assets/create/out-garden.webp', p: 'OnlyFans', time: 'Yesterday', st: 'Posted' }];

const CVPipeMedia = ({ kind }) => (
  <div style={{ height: 210, background: 'rgb(246,243,242)', padding: '16px 16px 0', boxSizing: 'border-box' }}>
    {kind === 'sched' &&
      <div style={{ ...CV_PANEL, gap: 6 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 2 }}>
          <span style={{ fontSize: 10.5, fontWeight: 700, color: INK }}>This week</span>
          <span style={{ fontSize: 8.5, fontWeight: 700, color: 'rgba(28,27,27,0.5)' }}>Scarlett · 6 platforms</span>
        </div>
        {CV_ROWS.map((r) =>
          <div key={r.p} style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 9, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '6px 8px', flex: 1, minHeight: 0 }}>
            <span style={{ width: 26, height: 26, borderRadius: 7, overflow: 'hidden', flexShrink: 0 }}>
              <img loading="lazy" decoding="async" src={r.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} /></span>
            <span style={{ flex: 1, minWidth: 0 }}>
              <span style={{ display: 'block', fontSize: 9.5, fontWeight: 700, color: INK }}>{r.p}</span>
              <span style={{ display: 'block', fontSize: 8.5, color: 'rgba(28,27,27,0.5)' }}>{r.time}</span>
            </span>
            <span style={{ fontSize: 8, fontWeight: 700, borderRadius: 9999, padding: '2px 8px',
              color: r.st === 'Posted' ? '#15803D' : 'var(--brand-purple-700)',
              background: r.st === 'Posted' ? 'rgba(34,197,94,0.12)' : 'var(--brand-purple-50)',
              border: r.st === 'Posted' ? '1px solid rgba(34,197,94,0.3)' : '1px solid var(--brand-purple-200)' }}>{r.st}</span>
          </div>
        )}
      </div>}
    {kind === 'image' &&
      <div style={CV_PANEL}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, flex: 1, minHeight: 0, marginBottom: 8 }}>
          {['assets/create/out-mirror.webp', 'assets/create/out-garden.webp', 'assets/create/out-gym.webp'].map((src, i) =>
            <div key={src} style={{ position: 'relative', borderRadius: 7, overflow: 'hidden', boxShadow: i === 0 ? '0 0 0 2px 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%' }} />
            </div>)}
        </div>
        <div style={{ display: 'flex', gap: 7, alignItems: 'center' }}>
          <span style={{ flex: 1, borderRadius: 8, background: 'rgb(235,231,231)', padding: '7px 10px', fontSize: 9.5, fontWeight: 500, color: 'rgba(28,27,27,0.75)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>the matching stills — same scene, same outfit</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 8, padding: '7px 11px', background: PULSE, color: '#fff', fontSize: 8.5, fontWeight: 800, letterSpacing: '0.05em' }}>GENERATE <span style={{ fontSize: 8 }}>✦</span></span>
        </div>
      </div>}
    {kind === 'explore' &&
      <div style={{ ...CV_PANEL, gap: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontSize: 10.5, fontWeight: 700, color: INK }}>Explore · Video</span>
          <span style={{ fontSize: 8.5, fontWeight: 700, color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '2px 8px' }}>Trending</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, flex: 1, minHeight: 0 }}>
          {['assets/video/explore-1.mp4', 'assets/video/explore-2.mp4', 'assets/video/explore-3.mp4'].map((src, i) =>
            <div key={src} style={{ position: 'relative', borderRadius: 7, overflow: 'hidden', boxShadow: i === 1 ? '0 0 0 2px 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' }} />
              {i === 1 && <span style={{ position: 'absolute', left: 4, bottom: 4, fontSize: 7, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '2px 6px' }}>Prefill</span>}
            </div>)}
        </div>
      </div>}
  </div>
);

const VideoPipelineSection = () => (
  <section style={{ background: '#fff', padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap', marginBottom: 46 }}>
        <div style={{ maxWidth: 560 }}>
          <Reveal delay={90}>
            <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 16px', textWrap: 'balance' }}>
              One take is<br /><GradText>just the start.</GradText>
            </h2>
          </Reveal>
          <Reveal delay={170}>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: 0 }}>
              Every render lands on a board wired into the rest of the studio.
            </p>
          </Reveal>
        </div>
        <Reveal delay={240} style={{ paddingBottom: 8 }}>
          <a href="/" style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--brand-purple-700)' }}>See the full tour →</a>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {CV_NEXT.map((c, i) =>
          <Reveal key={c.t} delay={i * 110} y={26}>
            <a href={c.href} style={{ display: 'block', borderRadius: 18, overflow: 'hidden', background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: 'inherit',
              transform: `rotate(${i === 1 ? 1 : -1}deg) perspective(1200px) rotateY(${i === 1 ? -2 : 2}deg)` }}>
              <CVPipeMedia kind={c.kind} />
              <div style={{ padding: '18px 20px 22px' }}>
                <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em', color: INK, marginBottom: 7 }}>{c.t}</div>
                <div style={{ fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{c.d}</div>
              </div>
            </a>
          </Reveal>
        )}
      </div>
    </div>
  </section>
);

Object.assign(window, { WaysInSection, VideoFormatsSection, VideoPipelineSection });