// CINEMATIC — Direction B: Loud, slabs, glow, big italic display.
// Volt as section slabs. Plasma flashes on shot numbers. Reflective floor.

(function () {
  const { Icon, CopyBtn, useExpand, scrollToInside, useIsMobile } = window.TutorialUtils;
  const T = window.TUTORIAL;

  const ci = {
    bg: '#000',
    ink: '#fff',
    ink2: '#C9C9C9',
    ink3: '#7d7d7d',
    line: 'rgba(255,255,255,0.10)',
    volt: '#BBFF27',
    voltDeep: '#8FCC15',
    voltLine: 'rgba(187,255,39,0.40)',
    voltGlow: '0 0 24px rgba(187,255,39,0.55), 0 0 64px rgba(187,255,39,0.18)',
    plasma: '#A33BFF',
    plasmaDeep: '#8800E1',
    plasmaGlow: '0 0 24px rgba(136,0,225,0.55), 0 0 64px rgba(136,0,225,0.18)',
    body: '"Rubik", system-ui, sans-serif',
    display: '"Transducer", Impact, sans-serif',
    ext: '"Transducer Extended", "Transducer", sans-serif'
  };

  // ─── IngredientRefs — reference images flush to top of card ────────
  function IngredientRefs({ images }) {
    const single = images.length === 1;
    return (
      <div style={{
        width: '100%', height: '100%',
        display: 'grid', gap: 1,
        gridTemplateColumns: single ? '1fr' : `repeat(${images.length}, 1fr)`,
        background: ci.line
      }}>
        {images.map((img, i) =>
        <figure key={i} style={{
          margin: 0, position: 'relative',
          overflow: 'hidden', background: '#000',
          minHeight: 0
        }}>
            <img src={img.src} alt={img.caption || ''} style={{
            width: '100%', height: '100%', objectFit: 'cover',
            display: 'block'
          }} />
            <div style={{
            position: 'absolute', left: 0, right: 0, bottom: 0, height: '55%',
            background: 'linear-gradient(to top, rgba(0,0,0,0.85), transparent)',
            pointerEvents: 'none'
          }} />
            <span style={{
            position: 'absolute', top: 8, left: 8,
            fontFamily: ci.ext, fontSize: 9, fontWeight: 700,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: '#000', background: ci.volt,
            padding: '3px 7px', borderRadius: 2
          }}>REF · {String(i + 1).padStart(2, '0')}</span>
            {img.caption &&
          <figcaption style={{
            position: 'absolute', left: 10, right: 10, bottom: 8,
            fontFamily: ci.ext, fontWeight: 600,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: ci.ink2,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: "8px"
          }}>{img.caption}</figcaption>
          }
          </figure>
        )}
      </div>);
  }

  // ─── PromptResult ──────────────────────────────────────────────────
  function PromptResult({ result }) {
    return (
      <div style={{ marginTop: 20, position: 'relative' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          marginBottom: 14, paddingLeft: 8
        }}>
          <div style={{ width: 1, height: 18, background: ci.voltLine }} />
          <div style={{
            fontFamily: ci.ext, fontSize: 10, fontWeight: 700,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: ci.plasma
          }}>↓ Resultado do prompt acima</div>
        </div>

        <figure style={{
          margin: 0,
          background: '#000',
          border: `1px solid ${ci.voltLine}`,
          borderRadius: 14,
          overflow: 'hidden',
          boxShadow: '0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(187,255,39,0.08)'
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '10px 16px',
            borderBottom: `1px solid ${ci.line}`,
            background: '#0A0A0A'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{
                width: 8, height: 8, borderRadius: 4,
                background: ci.volt,
                boxShadow: '0 0 8px rgba(187,255,39,0.7)'
              }} />
              <span style={{
                fontFamily: ci.ext, fontSize: 10, fontWeight: 700,
                letterSpacing: '0.22em', textTransform: 'uppercase', color: ci.volt
              }}>{result.label}</span>
            </div>
            <span style={{
              fontFamily: ci.ext, fontSize: 9.5, fontWeight: 600,
              letterSpacing: '0.22em', textTransform: 'uppercase', color: ci.ink3
            }}>NANO BANANA · OUTPUT</span>
          </div>
          <div style={{
            position: 'relative',
            aspectRatio: result.aspect || '3/2',
            background: '#000'
          }}>
            <img src={result.src} alt={result.caption || result.label} style={{
              width: '100%', height: '100%', objectFit: 'contain',
              display: 'block'
            }} />
          </div>
          {result.caption &&
          <figcaption style={{
            padding: '12px 16px',
            borderTop: `1px solid ${ci.line}`,
            background: '#0A0A0A',
            fontFamily: ci.body, fontSize: 12.5, color: ci.ink2,
            fontStyle: 'italic'
          }}>{result.caption}</figcaption>
          }
        </figure>
      </div>);
  }

  // ─── Shell ─────────────────────────────────────────────────
  function CinematicDirection({ bgTexture }) {
    const scrollRef = React.useRef(null);
    const nav = (hash) => scrollToInside(scrollRef.current, hash);
    return (
      <div style={{
        position: 'relative',
        width: '100%', height: '100%',
        background: ci.bg, color: ci.ink, fontFamily: ci.body,
        overflow: 'hidden',
        display: 'flex', flexDirection: 'column'
      }}>
        {bgTexture === 'ghost' && <GhostBg />}
        <TopBar nav={nav} />
        <div ref={scrollRef} style={{
          flex: 1, overflowY: 'auto', overflowX: 'hidden',
          position: 'relative', zIndex: 1,
          scrollBehavior: 'smooth'
        }}>
          <Hero />
          <VoltSlab step={T.steps[0]} hashId="step-01" />
          <StepBody step={T.steps[0]} />
          <VoltSlab step={T.steps[1]} hashId="step-02" inverse />
          <StepBody step={T.steps[1]} />
          <VoltSlab step={T.steps[2]} hashId="step-03" />
          <StepBody step={T.steps[2]} />
          <Closing />
        </div>
      </div>);
  }

  function GhostBg() {
    const txt = "LET'S FLY  ";
    return (
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        zIndex: 0, overflow: 'hidden', opacity: 0.06
      }}>
        <div style={{
          position: 'absolute', inset: '-40%',
          fontFamily: ci.display, fontStyle: 'italic', fontWeight: 900,
          fontSize: 160, lineHeight: 1, letterSpacing: '-0.02em',
          color: 'transparent',
          WebkitTextStroke: '1.5px #BBFF27',
          transform: 'rotate(-12deg)',
          whiteSpace: 'pre', userSelect: 'none'
        }}>{Array.from({ length: 14 }, () => txt.repeat(20)).join('\n')}</div>
      </div>);
  }

  function TopBar({ nav }) {
    const mobile = useIsMobile();
    return (
      <div style={{
        position: 'relative', zIndex: 5,
        padding: mobile ? '14px 20px' : '16px 48px',
        display: 'flex', alignItems: 'center',
        gap: mobile ? 12 : 28,
        borderBottom: `1px solid ${ci.voltLine}`,
        background: 'rgba(0,0,0,0.7)',
        backdropFilter: 'blur(8px)'
      }}>
        <div style={{
          fontFamily: ci.display, fontStyle: 'italic', fontWeight: 900,
          fontSize: mobile ? 18 : 22, letterSpacing: '0.01em', textTransform: 'uppercase',
          display: 'flex', alignItems: 'center', gap: 6
        }}>
          FLY MEDIA
        </div>
        {!mobile && (
          <div style={{
            fontFamily: ci.ext, fontSize: 10, fontWeight: 600,
            letterSpacing: '0.22em', textTransform: 'uppercase', color: ci.volt,
            padding: '5px 10px',
            border: `1px solid ${ci.voltLine}`, borderRadius: 999
          }}>FLY HUB · TUTORIAL</div>
        )}

        <div style={{ flex: 1 }} />

        <a href="https://discord.com/invite/flyhub/" target="_blank" rel="noreferrer" style={{
          background: ci.volt, color: '#000', textDecoration: 'none',
          fontFamily: ci.body, fontSize: mobile ? 10 : 11, fontWeight: 700,
          letterSpacing: '0.08em', textTransform: 'uppercase',
          padding: mobile ? '8px 14px' : '10px 18px', borderRadius: 999,
          whiteSpace: 'nowrap'
        }}>Let's Fly</a>
      </div>);
  }

  // ─── Hero ──────────────────────────────────────────────────
  function Hero() {
    const mobile = useIsMobile();
    return (
      <section style={{
        position: 'relative',
        padding: mobile ? '32px 20px 40px' : '48px 48px 64px',
        minHeight: mobile ? 'auto' : 520,
        overflow: 'hidden'
      }}>
        <Laser color={ci.volt} angle={-18} glow="0 0 30px #BBFF27, 0 0 80px rgba(187,255,39,0.5)" left="35%" top="60%" />
        <Laser color={ci.plasma} angle={18} glow="0 0 30px #A33BFF, 0 0 80px rgba(136,0,225,0.5)" left="35%" top="60%" />

        <div style={{
          position: 'relative', zIndex: 2,
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1.3fr 0.7fr',
          gap: mobile ? 0 : 40,
          alignItems: 'center',
          minHeight: mobile ? 'auto' : 420
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: mobile ? 18 : 28 }}>
              <span style={{ width: 28, height: 1, background: ci.volt }} />
              <span style={{
                fontFamily: ci.ext, fontSize: mobile ? 9 : 11, fontWeight: 600,
                letterSpacing: '0.22em', textTransform: 'uppercase', color: ci.volt
              }}>PROJECT FILE · 001 · ZUKA</span>
            </div>
            <h1 style={{
              margin: 0,
              fontFamily: ci.display, fontStyle: 'italic', fontWeight: 900,
              fontSize: mobile ? 52 : 124,
              lineHeight: 0.88, letterSpacing: '-0.02em',
              textTransform: 'uppercase', color: ci.ink, textWrap: 'balance'
            }}>
              Como a gente <span style={{ color: ci.volt }}>faz</span><br />
              um filme em <span style={{ color: ci.plasma, textShadow: '0 0 32px rgba(168,59,255,0.4)' }}>3 passos</span>
            </h1>
          </div>

          {!mobile && (
            <div style={{ position: 'relative', height: 420 }}>
              <PosterCard />
            </div>
          )}
        </div>
      </section>);
  }

  function Laser({ color, angle, glow, left, top }) {
    return <div style={{
      position: 'absolute', top, left, width: 1000, height: 3,
      transform: `translate(-50%, -50%) rotate(${angle}deg)`,
      transformOrigin: 'center', filter: 'blur(1.5px)', opacity: 0.7,
      background: `linear-gradient(90deg, transparent, ${color} 45%, ${color} 55%, transparent)`,
      boxShadow: glow, pointerEvents: 'none', zIndex: 0
    }} />;
  }

  function PosterCard() {
    return (
      <div style={{
        position: 'absolute', inset: 0,
        border: `1px solid ${ci.voltLine}`, borderRadius: 16,
        background: 'radial-gradient(120% 100% at 100% 0%, rgba(187,255,39,0.12), transparent 55%), radial-gradient(120% 100% at 0% 100%, rgba(136,0,225,0.18), transparent 55%), #050505',
        padding: 22,
        boxShadow: '0 30px 80px rgba(0,0,0,0.6)',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        overflow: 'hidden'
      }}>
        <Corners color={ci.voltLine} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative', zIndex: 1 }}>
          <div>
            <div style={{
              fontFamily: ci.ext, fontSize: 9.5, fontWeight: 600,
              letterSpacing: '0.22em', textTransform: 'uppercase', color: ci.ink3
            }}>CASE FILE</div>
            <div style={{
              fontFamily: ci.display, fontStyle: 'italic', fontWeight: 900,
              fontSize: 38, lineHeight: 1, color: ci.ink, marginTop: 6
            }}>ZUKA</div>
          </div>
          <div style={{
            fontFamily: ci.ext, fontSize: 10, fontWeight: 600,
            letterSpacing: '0.22em', color: ci.volt, textTransform: 'uppercase',
            padding: '4px 8px', border: `1px solid ${ci.voltLine}`, borderRadius: 999
          }}>9:16</div>
        </div>

        <div style={{ position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 4, marginBottom: 14 }}>
            {[1, 2, 3, 4, 5, 6].map((i) =>
            <div key={i} style={{
              aspectRatio: '9/16',
              background: i === 2 ? `linear-gradient(to bottom, rgba(187,255,39,0.18), rgba(0,0,0,0.6))` : '#0E0E0E',
              border: `1px solid ${i === 2 ? ci.voltLine : ci.line}`,
              borderRadius: 4,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: ci.display, fontStyle: 'italic', fontWeight: 900,
              fontSize: 14, color: i === 2 ? ci.volt : ci.ink3
            }}>{i}</div>
            )}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: ci.ext, fontSize: 9.5, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: ci.ink3 }}>
            <span>STORYBOARD · 6 PANELS</span>
            <span style={{ color: ci.volt }}>● LIVE</span>
          </div>
        </div>
      </div>);
  }

  function Corners({ color }) {
    const c = { position: 'absolute', width: 14, height: 14, borderColor: color };
    return <>
      <span style={{ ...c, top: 8, left: 8, borderTop: `1.5px solid`, borderLeft: '1.5px solid' }} />
      <span style={{ ...c, top: 8, right: 8, borderTop: `1.5px solid`, borderRight: '1.5px solid' }} />
      <span style={{ ...c, bottom: 8, left: 8, borderBottom: `1.5px solid`, borderLeft: '1.5px solid' }} />
      <span style={{ ...c, bottom: 8, right: 8, borderBottom: `1.5px solid`, borderRight: '1.5px solid' }} />
    </>;
  }

  // ─── Volt section slab ─────────────────────────────────────
  function VoltSlab({ step, hashId, inverse }) {
    const mobile = useIsMobile();
    const useVolt = !inverse;
    return (
      <section id={hashId} style={{
        background: useVolt ? ci.volt : '#0a0a0a',
        color: useVolt ? '#000' : ci.ink,
        padding: mobile ? '24px 20px' : '40px 48px',
        position: 'relative', overflow: 'hidden',
        borderTop: useVolt ? 'none' : `1px solid ${ci.voltLine}`,
        borderBottom: useVolt ? 'none' : `1px solid ${ci.voltLine}`
      }}>
        {useVolt && <div style={{ position: 'absolute', top: 0, right: 0, width: 220, height: '100%', background: 'repeating-linear-gradient(135deg, transparent 0 12px, rgba(0,0,0,0.06) 12px 14px)' }} />}

        <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 16 : 32, position: 'relative', zIndex: 1 }}>
          <div style={{
            fontFamily: ci.display, fontStyle: 'italic', fontWeight: 900,
            fontSize: mobile ? 52 : 132,
            lineHeight: 0.88, letterSpacing: '-0.03em',
            color: useVolt ? '#000' : ci.volt,
            flexShrink: 0
          }}>{step.n}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: ci.ext, fontSize: mobile ? 9 : 10.5, fontWeight: 700,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: useVolt ? 'rgba(0,0,0,0.6)' : ci.ink3,
              marginBottom: 6
            }}>{step.kicker} — {useVolt ? 'Etapa atual' : 'Próxima etapa'}</div>
            <div style={{
              fontFamily: ci.display, fontStyle: 'italic', fontWeight: 900,
              fontSize: mobile ? 'clamp(22px, 6.5vw, 44px)' : 96,
              lineHeight: 0.92, letterSpacing: '-0.015em',
              textTransform: 'uppercase',
              color: useVolt ? '#000' : ci.ink
            }}>{step.title}<span style={{ color: useVolt ? '#8800E1' : ci.plasma }}>.</span></div>
          </div>
          {useVolt && !mobile && (
            <div style={{
              padding: '8px 12px',
              border: '1.5px solid #000', borderRadius: 999,
              fontFamily: ci.ext, fontSize: 10, fontWeight: 700,
              letterSpacing: '0.22em', color: '#000', textTransform: 'uppercase',
              alignSelf: 'flex-start', whiteSpace: 'nowrap'
            }}>{step.shots ? `${step.shots.length} TAKES` : '1 PROMPT'}</div>
          )}
        </div>
      </section>);
  }

  // ─── Step body (on black) ─────────────────────────────────
  function StepBody({ step }) {
    const mobile = useIsMobile();
    return (
      <section style={{ padding: mobile ? '32px 20px 24px' : '56px 48px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 1140, margin: '0 auto' }}>
          <div style={{
            fontFamily: ci.body, fontSize: 22, lineHeight: 1.45,
            color: ci.ink, maxWidth: 760, fontWeight: 400, fontStyle: 'italic',
            paddingLeft: 18, borderLeft: `2px solid ${ci.volt}`, opacity: "0"
          }}>{step.lede}</div>

          {/* Tool callout */}
          <div style={{
            marginTop: 28,
            display: 'flex',
            flexDirection: mobile ? 'column' : 'row',
            alignItems: mobile ? 'flex-start' : 'center',
            gap: mobile ? 10 : 18,
            padding: mobile ? '16px 16px' : '18px 22px',
            background: '#0A0A0A',
            border: `1px solid ${ci.voltLine}`,
            borderRadius: 12,
            boxShadow: 'inset 0 0 0 1px rgba(187,255,39,0.05), 0 0 0 1px rgba(0,0,0,0.6)'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 10 : 18, flexWrap: 'wrap' }}>
              <div style={{
                fontFamily: ci.ext, fontSize: 10, fontWeight: 700,
                letterSpacing: '0.22em', textTransform: 'uppercase', color: ci.plasma,
                padding: '4px 10px', borderRadius: 999,
                border: `1px solid rgba(168,59,255,0.45)`,
                whiteSpace: 'nowrap'
              }}>FERRAMENTA</div>
              <div style={{
                fontFamily: ci.display, fontStyle: 'italic', fontWeight: 800,
                fontSize: mobile ? 18 : 22, textTransform: 'uppercase', color: ci.ink,
                display: 'inline-flex', alignItems: 'center', gap: 6
              }}>
                {step.tool.name} <Icon.External size={12} color={ci.ink3} />
              </div>
              {!mobile && <div style={{ width: 1, height: 22, background: ci.line }} />}
            </div>
            <div style={{
              fontFamily: ci.body, fontSize: mobile ? 13 : 13.5, lineHeight: 1.5, color: ci.ink2
            }}>{step.tool.hint}</div>
          </div>

          {/* Single prompt (step 1) */}
          {step.prompt &&
          <div style={{ marginTop: 28 }}>
              <PromptCard
              kicker="Prompt do storyboard"
              label={step.prompt.title}
              body={step.prompt.body}
              imgLeft={step.prompt.imgLeft}
              imgRight={step.prompt.imgRight}
              output={step.output} />
            </div>
          }

          {step.result && <PromptResult result={step.result} />}

          {/* Shots (steps 2 & 3) */}
          {step.shots &&
          <div style={{ marginTop: 36 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18 }}>
                <div style={{
                fontFamily: ci.display, fontStyle: 'italic', fontWeight: 900,
                fontSize: mobile ? 28 : 38, lineHeight: 1, color: ci.ink, textTransform: 'uppercase'
              }}>Os takes</div>
                <div style={{
                fontFamily: ci.ext, fontSize: mobile ? 9 : 10, fontWeight: 600,
                letterSpacing: '0.22em', textTransform: 'uppercase', color: ci.ink3
              }}>{step.shots.length} planos · expande pra copiar o prompt</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {step.shots.map((shot) => <ShotCard key={shot.n} shot={shot} stepN={step.n} />)}
              </div>
            </div>
          }
        </div>
      </section>);
  }

  // ─── Prompt body — IMG / PROMPT / IMG layout ───────
  function PromptBody({ body, imgLeft, imgRight }) {
    const mobile = useIsMobile();

    if (mobile) {
      return (
        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 14 }}>
          {imgLeft && <RefImgMobile src={imgLeft} side="left" />}
          <pre style={{
            margin: 0,
            padding: '16px 16px',
            background: '#000',
            border: `1px solid ${ci.line}`,
            borderRadius: 10,
            fontFamily: 'ui-monospace, "JetBrains Mono", monospace',
            fontSize: 11.5, lineHeight: 1.65, color: '#E5E5E5',
            whiteSpace: 'pre-wrap', wordBreak: 'break-word',
            overflowY: 'auto', maxHeight: 320
          }}>{body}</pre>
          {imgRight && <RefImgMobile src={imgRight} side="right" />}
        </div>
      );
    }

    const cols = [imgLeft && '240px', '1fr', imgRight && '240px'].filter(Boolean).join(' ');
    return (
      <div style={{
        marginTop: 18,
        display: 'grid', gridTemplateColumns: cols, gap: 20,
        alignItems: 'start'
      }}>
        {imgLeft && <RefImg src={imgLeft} side="left" />}
        <pre style={{
          margin: 0,
          padding: '20px 22px',
          background: '#000',
          border: `1px solid ${ci.line}`,
          borderRadius: 10,
          fontFamily: 'ui-monospace, "JetBrains Mono", monospace',
          fontSize: 12.5, lineHeight: 1.65, color: '#E5E5E5',
          whiteSpace: 'pre-wrap', wordBreak: 'break-word',
          overflowY: 'auto'
        }}>{body}</pre>
        {imgRight && <RefImg src={imgRight} side="right" />}
      </div>);
  }

  function RefImgMobile({ src, side }) {
    return (
      <div style={{
        width: '100%',
        background: '#000',
        border: `1px solid ${ci.voltLine}`,
        borderRadius: 10,
        overflow: 'hidden',
        position: 'relative'
      }}>
        <img src={src} alt={side === 'left' ? 'Referência' : 'Resultado'} style={{
          width: '100%', height: 'auto', display: 'block'
        }} />
        <span style={{
          position: 'absolute', top: 8, left: 8,
          fontFamily: ci.ext, fontSize: 9, fontWeight: 700,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: '#000', background: ci.volt,
          padding: '3px 7px', borderRadius: 2
        }}>{side === 'left' ? 'INPUT' : 'OUTPUT'}</span>
      </div>
    );
  }

  function RefImg({ src, side }) {
    return (
      <div style={{
        position: 'sticky', top: 12,
        aspectRatio: '9/16',
        background: '#000',
        border: `1px solid ${ci.voltLine}`,
        borderRadius: 10,
        overflow: 'hidden',
        boxShadow: '0 0 0 1px rgba(187,255,39,0.06)'
      }}>
        <img src={src} alt={side === 'left' ? 'Referência' : 'Resultado'} style={{
          width: '100%', height: '100%', objectFit: 'cover', display: 'block'
        }} />
        <span style={{
          position: 'absolute', top: 8, left: 8,
          fontFamily: ci.ext, fontSize: 9, fontWeight: 700,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: '#000', background: ci.volt,
          padding: '3px 7px', borderRadius: 2
        }}>{side === 'left' ? 'INPUT' : 'OUTPUT'}</span>
      </div>);
  }

  // ─── Prompt card ───────────────────────────────────────────
  function PromptCard({ kicker, label, body, output, imgLeft, imgRight }) {
    const mobile = useIsMobile();
    const [open, toggle] = useExpand(false);
    return (
      <div style={{
        border: `1px solid ${open ? ci.voltLine : ci.line}`,
        borderRadius: 14, overflow: 'hidden',
        background: '#0A0A0A',
        boxShadow: open ? `0 0 0 1px rgba(187,255,39,0.15)` : 'none',
        transition: 'all .15s'
      }}>
        <div onClick={toggle} role="button" tabIndex={0} style={{
          width: '100%', padding: mobile ? '16px 16px' : '22px 24px',
          background: 'transparent', cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: mobile ? 12 : 20, textAlign: 'left',
          color: ci.ink, fontFamily: 'inherit'
        }}>
          <div style={{
            width: mobile ? 44 : 56, height: mobile ? 44 : 56,
            background: ci.volt, color: '#000',
            borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: ci.display, fontStyle: 'italic', fontWeight: 900,
            fontSize: mobile ? 22 : 28, flexShrink: 0,
            boxShadow: open ? ci.voltGlow : 'none',
            transition: 'box-shadow .2s'
          }}>P1</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: ci.ext, fontSize: 10, fontWeight: 700,
              letterSpacing: '0.22em', textTransform: 'uppercase', color: ci.volt,
              marginBottom: 4
            }}>{kicker}</div>
            <div style={{
              fontFamily: ci.display, fontStyle: 'italic', fontWeight: 800,
              fontSize: mobile ? 18 : 26, textTransform: 'uppercase', color: ci.ink,
              letterSpacing: '-0.01em'
            }}>{label}</div>
          </div>
          <CopyBtn text={body} label="" theme="volt" />
          <div style={{
            width: 32, height: 32, borderRadius: 16,
            border: `1px solid ${ci.voltLine}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: ci.volt, flexShrink: 0
          }}>
            {open ? <Icon.Minus size={13} color={ci.volt} /> : <Icon.Plus size={13} color={ci.volt} />}
          </div>
        </div>
        {open &&
        <div style={{
          padding: mobile ? '0 16px 20px' : '0 24px 24px',
          borderTop: `1px solid ${ci.voltLine}`
        }}>
            {output &&
          <div style={{ paddingTop: 18 }}>
                <div style={{
              fontFamily: ci.ext, fontSize: 9.5, fontWeight: 600,
              letterSpacing: '0.22em', textTransform: 'uppercase', color: ci.plasma
            }}>RESULTADO ESPERADO →</div>
                <div style={{
              marginTop: 6,
              fontFamily: ci.body, fontSize: 14, color: ci.ink2
            }}>{output}</div>
              </div>
          }
            <PromptBody body={body} imgLeft={imgLeft} imgRight={imgRight} />
          </div>
        }
      </div>);
  }

  // ─── Shot card ─────────────────────────────────────────────
  function ShotCard({ shot, stepN }) {
    const mobile = useIsMobile();
    const [open, toggle] = useExpand(false);
    const numColor = stepN === '03' ? ci.plasma : ci.volt;
    const numBg = stepN === '03' ? 'rgba(136,0,225,0.10)' : 'rgba(187,255,39,0.08)';
    return (
      <div style={{
        border: `1px solid ${open ? ci.voltLine : ci.line}`,
        borderRadius: 14, overflow: 'hidden',
        background: '#0A0A0A',
        transition: 'border-color .15s, box-shadow .15s',
        boxShadow: open ? `0 0 0 1px rgba(187,255,39,0.12)` : 'none'
      }}>
        <div onClick={toggle} role="button" tabIndex={0} style={{
          width: '100%', padding: mobile ? '12px 14px 12px 12px' : '14px 18px 14px 14px',
          background: 'transparent', cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: mobile ? 12 : 20, textAlign: 'left',
          color: ci.ink, fontFamily: 'inherit'
        }}>
          {/* 9:16 poster placeholder */}
          <div style={{
            width: mobile ? 52 : 68, height: mobile ? 78 : 102, flexShrink: 0,
            background: `linear-gradient(180deg, ${numBg}, #050505)`,
            border: `1px solid ${ci.line}`, borderRadius: 6,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'space-between',
            padding: '8px 0 8px',
            position: 'relative', overflow: 'hidden'
          }}>
            <div style={{
              fontFamily: ci.ext, fontSize: 8, fontWeight: 600,
              letterSpacing: '0.22em', color: ci.ink3
            }}>TAKE</div>
            <div style={{
              fontFamily: ci.display, fontStyle: 'italic', fontWeight: 900,
              fontSize: mobile ? 34 : 44, color: numColor, lineHeight: 1,
              textShadow: stepN === '03' ? '0 0 16px rgba(168,59,255,0.55)' : '0 0 16px rgba(187,255,39,0.4)'
            }}>{String(shot.n).padStart(2, '0')}</div>
            <div style={{
              fontFamily: ci.ext, fontSize: 8, fontWeight: 600,
              letterSpacing: '0.22em', color: ci.ink3
            }}>9:16</div>
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: ci.display, fontStyle: 'italic', fontWeight: 800,
              fontSize: mobile ? 16 : 22, textTransform: 'uppercase', color: ci.ink,
              letterSpacing: '-0.005em', marginBottom: 4
            }}>{shot.label}</div>
            <div style={{
              fontFamily: ci.body, fontSize: mobile ? 12 : 13.5, lineHeight: 1.5, color: ci.ink2,
              overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical'
            }}>{shot.dir}</div>
          </div>

          <CopyBtn text={shot.prompt} label="" theme="dark" style={{ flexShrink: 0 }} />
          <div style={{
            width: 32, height: 32, borderRadius: 16,
            border: `1px solid ${ci.line}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: ci.ink2, flexShrink: 0
          }}>
            {open ? <Icon.Minus size={12} color={ci.ink2} /> : <Icon.Plus size={12} color={ci.ink2} />}
          </div>
        </div>
        {open &&
        <div style={{
          padding: mobile ? '0 16px 18px' : '0 22px 22px',
          borderTop: `1px solid ${ci.voltLine}`
        }}>
            <PromptBody body={shot.prompt} imgLeft={shot.imgLeft} imgRight={shot.imgRight} />
          </div>
        }
      </div>);
  }

  // ─── Closing ───────────────────────────────────────────────
  function Closing() {
    const mobile = useIsMobile();
    const c = T.closing;
    return (
      <section style={{
        padding: mobile ? '56px 20px 72px' : '72px 48px 96px',
        position: 'relative', overflow: 'hidden'
      }}>
        <div style={{
          position: 'absolute', inset: '0 -10% 0 -10%', height: '100%',
          background: 'radial-gradient(60% 60% at 50% 50%, rgba(187,255,39,0.10), transparent 60%)',
          pointerEvents: 'none'
        }} />

        <div style={{ maxWidth: 1140, margin: '0 auto', position: 'relative', zIndex: 1, textAlign: 'center' }}>
          <div style={{
            fontFamily: ci.ext, fontSize: 11, fontWeight: 700,
            letterSpacing: '0.28em', textTransform: 'uppercase', color: ci.volt,
            marginBottom: 18
          }}>{c.eyebrow}</div>
          <h2 style={{
            margin: 0,
            fontFamily: ci.display, fontStyle: 'italic', fontWeight: 900,
            fontSize: mobile ? 64 : 96,
            lineHeight: 0.92, letterSpacing: '-0.015em',
            textTransform: 'uppercase', color: ci.ink, textWrap: 'balance'
          }}>
            {c.title}<span style={{ color: ci.volt }}>.</span>
          </h2>
          <div style={{
            margin: '24px auto 36px',
            fontFamily: ci.body, fontSize: mobile ? 15 : 18, lineHeight: 1.55,
            color: ci.ink2, maxWidth: 620
          }}>{c.body}</div>
          <div style={{
            display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap',
            flexDirection: mobile ? 'column' : 'row',
            alignItems: 'center'
          }}>
            <a href={c.primary.url} target="_blank" rel="noreferrer" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: ci.volt, color: '#000', textDecoration: 'none',
              fontFamily: ci.body, fontSize: 13, fontWeight: 700,
              letterSpacing: '0.08em', textTransform: 'uppercase',
              padding: '16px 24px', borderRadius: 999, boxShadow: ci.voltGlow,
              width: mobile ? '100%' : 'auto', justifyContent: mobile ? 'center' : 'flex-start'
            }}>
              {c.primary.label} <Icon.Arrow size={11} color="#000" />
            </a>
            <a href={c.secondary.url} target="_blank" rel="noreferrer" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: 'transparent', color: ci.ink, textDecoration: 'none',
              fontFamily: ci.body, fontSize: 13, fontWeight: 600,
              letterSpacing: '0.08em', textTransform: 'uppercase',
              padding: '16px 24px', borderRadius: 999,
              border: `1px solid ${ci.voltLine}`,
              width: mobile ? '100%' : 'auto', justifyContent: mobile ? 'center' : 'flex-start'
            }}>{c.secondary.label}</a>
          </div>
          <div style={{ marginTop: 56, color: ci.ink3, fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase', fontFamily: ci.ext }}>
            Fly Media · Fly Hub · 2026 — Let's Fly
          </div>
        </div>
      </section>);
  }

  window.CinematicDirection = CinematicDirection;
})();