// Aumixo Solutions — Layout-aware video scenes (16:9 horizontal + 9:16 vertical)

// ─── Background (shared) ─────────────────────────────────
function BgGrid() {
  const time = useTime();
  const op = interpolate([0, 1, 11.5, 13], [0, 0.3, 0.3, 0])(time);
  const drift = time * 6;
  return (
    <div aria-hidden style={{
      position:'absolute', inset:'-10%',
      backgroundImage:'linear-gradient(rgba(59,130,246,1) 1px, transparent 1px),linear-gradient(90deg, rgba(59,130,246,1) 1px, transparent 1px)',
      backgroundSize:'48px 48px',
      backgroundPosition:`${drift}px ${drift*0.5}px`,
      opacity: op,
      maskImage:'radial-gradient(ellipse at center, black 30%, transparent 75%)',
      WebkitMaskImage:'radial-gradient(ellipse at center, black 30%, transparent 75%)'
    }}/>
  );
}

function Orbs() {
  const time = useTime();
  const op = interpolate([0, 0.6, 12, 13], [0, 1, 1, 0])(time);
  return (
    <>
      <div style={{ position:'absolute', top:'-15%', right:'-10%',
            width:'55%', height:'90%', opacity: op,
            background:'radial-gradient(circle, rgba(59,130,246,0.5), transparent 60%)',
            filter:'blur(50px)', transform:`translate(${Math.sin(time*0.4)*20}px,${Math.cos(time*0.3)*20}px)` }}/>
      <div style={{ position:'absolute', bottom:'-15%', left:'-10%',
            width:'55%', height:'80%', opacity: op,
            background:'radial-gradient(circle, rgba(34,211,238,0.35), transparent 60%)',
            filter:'blur(50px)', transform:`translate(${Math.cos(time*0.3)*20}px,${Math.sin(time*0.4)*20}px)` }}/>
    </>
  );
}

// ─── Brand symbol SVG (reusable) ──────────────────────────
function BrandSymbol({ size = 520, animated = true, t = 0, gradId = 'vf' }) {
  const bar1 = animated ? interpolate([0, 0.6], [-80, 0], Easing.easeOutCubic)(t) : 0;
  const bar2 = animated ? interpolate([0.15, 0.75], [-80, 0], Easing.easeOutCubic)(t) : 0;
  const bar3 = animated ? interpolate([0.3, 0.9], [-80, 0], Easing.easeOutCubic)(t) : 0;
  const barOp = animated ? interpolate([0, 0.4], [0, 1])(t) : 1;
  const draw = animated ? interpolate([1.0, 1.8], [0, 1], Easing.easeInOutCubic)(t) : 1;
  const beam = animated ? interpolate([1.6, 2.2], [0, 1], Easing.easeOutBack)(t) : 1;
  const dotR = animated ? interpolate([2.0, 2.4, 2.55], [0, 6, 3])(t) : 3;
  const glow = animated ? interpolate([2.4, 3.0], [0, 1])(t) : 1;
  const pathLen = 50;
  const dash1 = pathLen * (1 - draw);
  const dash2 = 22 * (1 - draw);
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow:'visible' }}>
      <defs>
        <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#22d3ee"/><stop offset="1" stopColor="#3b82f6"/>
        </linearGradient>
        <filter id={gradId+'g'} x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="1.2"/>
        </filter>
      </defs>
      <g style={{ transform:`translateX(${bar1}px)`, opacity:barOp }}>
        <rect x="6" y="14" width="7" height="10" rx="2" fill="#fff" opacity="0.5"/>
      </g>
      <g style={{ transform:`translateX(${bar2}px)`, opacity:barOp }}>
        <rect x="6" y="27" width="7" height="10" rx="2" fill="#fff" opacity="0.7"/>
      </g>
      <g style={{ transform:`translateX(${bar3}px)`, opacity:barOp }}>
        <rect x="6" y="40" width="7" height="10" rx="2" fill="#fff"/>
      </g>
      <path d="M13 19 C 22 19, 30 24, 36 32 C 30 40, 22 45, 13 45"
            stroke={`url(#${gradId})`} strokeWidth="2.6" fill="none" strokeLinecap="round"
            strokeDasharray={pathLen} strokeDashoffset={dash1}/>
      <path d="M13 32 H 33"
            stroke={`url(#${gradId})`} strokeWidth="2.6" strokeLinecap="round"
            strokeDasharray="22" strokeDashoffset={dash2}/>
      <g style={{ transform:`scaleX(${beam})`, transformOrigin:'38px 32px' }}>
        <rect x="38" y="29" width="16" height="6" rx="3" fill={`url(#${gradId})`}/>
      </g>
      <circle cx="58" cy="32" r={dotR} fill="#22d3ee"/>
      <circle cx="58" cy="32" r={dotR*2} fill="#22d3ee" opacity={glow*0.4} filter={`url(#${gradId}g)`}/>
    </svg>
  );
}

// ═══════════════════════════════════════════════════════════
// 16:9 HORIZONTAL SCENE (1920×1080) — YouTube/LinkedIn
// ═══════════════════════════════════════════════════════════
function SceneHorizontal() {
  return (
    <div style={{ width:'100%', height:'100%', position:'relative',
         background:'linear-gradient(180deg, #050b16 0%, #0a1628 50%, #0f1e36 100%)',
         overflow:'hidden', fontFamily:"'Inter', system-ui, sans-serif", color:'#fff' }}>
      <BgGrid/><Orbs/>
      <Sprite start={0} end={3.4}><S1MarkH/></Sprite>
      <Sprite start={3} end={6.4}><S2WordmarkH/></Sprite>
      <Sprite start={6} end={9.2}><S3ManifestoH/></Sprite>
      <Sprite start={8.6} end={13}><S4FinalH/></Sprite>
      <CornerChrome label="12s · 1920×1080"/>
    </div>
  );
}

function S1MarkH() {
  const t = useTime();
  const exitX = interpolate([3.0, 3.4], [0, -120], Easing.easeInOutCubic)(t);
  const scale = interpolate([0, 0.4, 3.0, 3.4], [0.92, 1, 1, 0.78], Easing.easeOutCubic)(t);
  return (
    <div style={{ position:'absolute', inset:0, display:'flex',
          alignItems:'center', justifyContent:'center',
          transform:`translateX(${exitX}px) scale(${scale})` }}>
      <BrandSymbol size={520} t={t} gradId="vfH1"/>
    </div>
  );
}

function S2WordmarkH() {
  const { localTime: t } = useSprite();
  const letters = 'aumixo'.split('');
  const dotOp = interpolate([0.8, 1.2], [0, 1])(t);
  const subOp = interpolate([1.4, 2.0], [0, 1])(t);
  const subY = interpolate([1.4, 2.0], [10, 0], Easing.easeOutCubic)(t);
  const exit = interpolate([2.6, 3.2], [0, -30], Easing.easeInOutCubic)(t);
  const exitOp = interpolate([2.6, 3.2], [1, 0])(t);
  return (
    <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center',
          justifyContent:'center', paddingLeft:'10%',
          transform:`translateY(${exit}px)`, opacity:exitOp }}>
      <div style={{ display:'flex', flexDirection:'column', gap:18, lineHeight:1 }}>
        <div style={{ fontFamily:"'Space Grotesk', sans-serif", fontWeight:600,
              fontSize:140, letterSpacing:'-0.04em', display:'flex' }}>
          {letters.map((l,i) => {
            const start = 0.1 + i*0.07;
            const op = interpolate([start, start+0.4], [0, 1])(t);
            const y = interpolate([start, start+0.5], [40, 0], Easing.easeOutCubic)(t);
            return <span key={i} style={{ display:'inline-block', opacity:op,
                          transform:`translateY(${y}px)` }}>{l}</span>;
          })}
          <span style={{ display:'inline-block', opacity:dotOp, color:'#22d3ee' }}>.</span>
        </div>
        <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:18,
              letterSpacing:'0.4em', color:'#94a3b8', opacity:subOp,
              transform:`translateY(${subY}px)` }}>SOLUTIONS</div>
      </div>
    </div>
  );
}

function S3ManifestoH() {
  return <Manifesto fontSize={84} height={120}/>;
}

function S4FinalH() {
  const { localTime: t } = useSprite();
  const op = interpolate([0, 0.4], [0, 1], Easing.easeOutCubic)(t);
  const y = interpolate([0, 0.4], [16, 0], Easing.easeOutCubic)(t);
  const ctaOp = interpolate([0.6, 1.0], [0, 1])(t);
  const ctaY = interpolate([0.6, 1.0], [10, 0], Easing.easeOutCubic)(t);
  return (
    <div style={{ position:'absolute', inset:0, display:'flex',
          flexDirection:'column', alignItems:'center', justifyContent:'center',
          gap:36, opacity:op, transform:`translateY(${y}px)` }}>
      <div style={{ display:'flex', alignItems:'center', gap:24 }}>
        <BrandSymbol size={90} animated={false} gradId="vfH4"/>
        <div style={{ display:'flex', flexDirection:'column', gap:8, lineHeight:1 }}>
          <div style={{ fontFamily:"'Space Grotesk', sans-serif", fontWeight:600,
                fontSize:78, letterSpacing:'-0.035em' }}>
            aumixo<span style={{ color:'#22d3ee' }}>.</span>
          </div>
          <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:14,
                letterSpacing:'0.4em', color:'#94a3b8' }}>SOLUTIONS</div>
        </div>
      </div>
      <CTA opacity={ctaOp} translateY={ctaY}/>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// 9:16 VERTICAL SCENE (1080×1920) — TikTok/Reels/Stories
// ═══════════════════════════════════════════════════════════
function SceneVertical() {
  return (
    <div style={{ width:'100%', height:'100%', position:'relative',
         background:'linear-gradient(180deg, #050b16 0%, #0a1628 50%, #0f1e36 100%)',
         overflow:'hidden', fontFamily:"'Inter', system-ui, sans-serif", color:'#fff' }}>
      <BgGrid/><Orbs/>
      <Sprite start={0} end={3.4}><S1MarkV/></Sprite>
      <Sprite start={3} end={6.4}><S2WordmarkV/></Sprite>
      <Sprite start={6} end={9.2}><S3ManifestoV/></Sprite>
      <Sprite start={8.6} end={13}><S4FinalV/></Sprite>
      <CornerChrome label="12s · 1080×1920"/>
    </div>
  );
}

function S1MarkV() {
  const t = useTime();
  const exitY = interpolate([3.0, 3.4], [0, -200], Easing.easeInOutCubic)(t);
  const scale = interpolate([0, 0.4, 3.0, 3.4], [0.92, 1, 1, 0.7], Easing.easeOutCubic)(t);
  return (
    <div style={{ position:'absolute', inset:0, display:'flex',
          alignItems:'center', justifyContent:'center',
          transform:`translateY(${exitY}px) scale(${scale})` }}>
      <BrandSymbol size={680} t={t} gradId="vfV1"/>
    </div>
  );
}

function S2WordmarkV() {
  const { localTime: t } = useSprite();
  const letters = 'aumixo'.split('');
  const dotOp = interpolate([0.8, 1.2], [0, 1])(t);
  const subOp = interpolate([1.4, 2.0], [0, 1])(t);
  const subY = interpolate([1.4, 2.0], [10, 0], Easing.easeOutCubic)(t);
  const exit = interpolate([2.6, 3.2], [0, -40], Easing.easeInOutCubic)(t);
  const exitOp = interpolate([2.6, 3.2], [1, 0])(t);
  return (
    <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center',
          justifyContent:'center',
          transform:`translateY(${exit}px)`, opacity:exitOp }}>
      <div style={{ display:'flex', flexDirection:'column', gap:24,
            lineHeight:1, alignItems:'center' }}>
        <div style={{ fontFamily:"'Space Grotesk', sans-serif", fontWeight:600,
              fontSize:180, letterSpacing:'-0.04em', display:'flex' }}>
          {letters.map((l,i) => {
            const start = 0.1 + i*0.07;
            const op = interpolate([start, start+0.4], [0, 1])(t);
            const y = interpolate([start, start+0.5], [50, 0], Easing.easeOutCubic)(t);
            return <span key={i} style={{ display:'inline-block', opacity:op,
                          transform:`translateY(${y}px)` }}>{l}</span>;
          })}
          <span style={{ display:'inline-block', opacity:dotOp, color:'#22d3ee' }}>.</span>
        </div>
        <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:26,
              letterSpacing:'0.5em', color:'#94a3b8', opacity:subOp,
              transform:`translateY(${subY}px)` }}>SOLUTIONS</div>
      </div>
    </div>
  );
}

function S3ManifestoV() {
  return <Manifesto fontSize={96} height={300} maxWidth="85%"/>;
}

function S4FinalV() {
  const { localTime: t } = useSprite();
  const op = interpolate([0, 0.4], [0, 1], Easing.easeOutCubic)(t);
  const y = interpolate([0, 0.4], [16, 0], Easing.easeOutCubic)(t);
  const ctaOp = interpolate([0.6, 1.0], [0, 1])(t);
  const ctaY = interpolate([0.6, 1.0], [10, 0], Easing.easeOutCubic)(t);
  return (
    <div style={{ position:'absolute', inset:0, display:'flex',
          flexDirection:'column', alignItems:'center', justifyContent:'center',
          gap:60, opacity:op, transform:`translateY(${y}px)` }}>
      <BrandSymbol size={220} animated={false} gradId="vfV4"/>
      <div style={{ display:'flex', flexDirection:'column', gap:14, lineHeight:1, alignItems:'center' }}>
        <div style={{ fontFamily:"'Space Grotesk', sans-serif", fontWeight:600,
              fontSize:140, letterSpacing:'-0.035em' }}>
          aumixo<span style={{ color:'#22d3ee' }}>.</span>
        </div>
        <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:22,
              letterSpacing:'0.5em', color:'#94a3b8' }}>SOLUTIONS</div>
      </div>
      <CTA opacity={ctaOp} translateY={ctaY} large/>
    </div>
  );
}

// ─── Shared sub-components ────────────────────────────────
function Manifesto({ fontSize, height, maxWidth = '90%' }) {
  const { localTime: t } = useSprite();
  const phrases = [
    { txt: 'Inteligência aplicada.', em: false },
    { txt: 'Resultado mensurável.', em: true },
    { txt: 'Para sua empresa.', em: false },
  ];
  return (
    <div style={{ position:'absolute', inset:0, display:'flex',
          alignItems:'center', justifyContent:'center', padding:`0 ${maxWidth === '85%' ? '7.5%' : '10%'}` }}>
      <div style={{ position:'relative', width:'100%', maxWidth, textAlign:'center', height }}>
        {phrases.map((p, i) => {
          const start = i * 1.0;
          const op = interpolate([start, start+0.25, start+0.85, start+1.05], [0, 1, 1, 0])(t);
          const y = interpolate([start, start+0.4], [22, 0], Easing.easeOutCubic)(t);
          const blur = interpolate([start, start+0.3, start+0.85, start+1.05], [8, 0, 0, 8])(t);
          return (
            <div key={i} style={{ position:'absolute', inset:0,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:"'Space Grotesk', sans-serif",
                  fontWeight:600, fontSize, letterSpacing:'-0.035em',
                  lineHeight:1.05, opacity:op,
                  transform:`translateY(${y}px)`, filter:`blur(${blur}px)`,
                  background: p.em ? 'linear-gradient(90deg, #60a5fa, #22d3ee)' : 'transparent',
                  WebkitBackgroundClip: p.em ? 'text' : undefined,
                  backgroundClip: p.em ? 'text' : undefined,
                  WebkitTextFillColor: p.em ? 'transparent' : '#fff',
                  color: p.em ? 'transparent' : '#fff',
            }}>{p.txt}</div>
          );
        })}
      </div>
    </div>
  );
}

function CTA({ opacity, translateY, large = false }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:18,
          opacity, transform:`translateY(${translateY}px)` }}>
      <span style={{
        display:'inline-flex', alignItems:'center', gap: large ? 14 : 8,
        padding: large ? '18px 36px' : '10px 20px', borderRadius:99,
        background:'rgba(59,130,246,0.12)',
        border:'1px solid rgba(59,130,246,0.4)',
        fontFamily:"'JetBrains Mono', monospace",
        fontSize: large ? 22 : 13,
        letterSpacing:'0.1em', textTransform:'uppercase', color:'#60a5fa'
      }}>
        <span style={{ width: large ? 12 : 8, height: large ? 12 : 8,
              borderRadius:99, background:'#22d3ee',
              boxShadow:'0 0 12px #22d3ee' }}/>
        aumixo.com
      </span>
    </div>
  );
}

function CornerChrome({ label }) {
  const t = useTime();
  const op = interpolate([0.4, 1.0, 12.2, 13], [0, 1, 1, 0])(t);
  const tc = (t).toFixed(2).padStart(5,'0');
  return (
    <>
      <div style={{ position:'absolute', top:24, left:32, opacity:op,
            fontFamily:"'JetBrains Mono', monospace", fontSize:11,
            letterSpacing:'0.12em', color:'#64748b', textTransform:'uppercase',
            display:'flex', alignItems:'center', gap:10 }}>
        <span style={{ width:6, height:6, borderRadius:99, background:'#22d3ee',
              boxShadow:'0 0 8px #22d3ee' }}/>
        aumixo · institutional · 2026
      </div>
      <div style={{ position:'absolute', top:24, right:32, opacity:op,
            fontFamily:"'JetBrains Mono', monospace", fontSize:11,
            letterSpacing:'0.1em', color:'#64748b' }}>TC {tc}</div>
      <div style={{ position:'absolute', bottom:24, left:32, opacity:op,
            fontFamily:"'JetBrains Mono', monospace", fontSize:10,
            letterSpacing:'0.1em', color:'#475569' }}>IA APLICADA · PARA PMES</div>
      <div style={{ position:'absolute', bottom:24, right:32, opacity:op,
            fontFamily:"'JetBrains Mono', monospace", fontSize:10,
            letterSpacing:'0.1em', color:'#475569' }}>{label}</div>
    </>
  );
}

// Backwards compat
function Scene() { return <SceneHorizontal/>; }
function SceneFor(w, h) { return h > w ? SceneVertical : SceneHorizontal; }

Object.assign(window, { Scene, SceneHorizontal, SceneVertical, SceneFor });