// Scene 6: Logo + tagline (28.5–32s)

function Scene6Logo() {
  const { localTime, progress, duration } = useSprite();

  // Logo emerges; rail "ghost" stripes pulse behind
  const logoT = clamp(localTime / 0.7, 0, 1);
  const logoEase = Easing.easeOutBack(logoT);
  const tagT = clamp((localTime - 0.7) / 0.5, 0, 1);
  const subT = clamp((localTime - 1.1) / 0.5, 0, 1);
  const ctaT = clamp((localTime - 1.6) / 0.5, 0, 1);
  const exitT = clamp((localTime - (duration - 0.4)) / 0.4, 0, 1);

  // Background: subtle horizontal hour rails sliding
  const slide = localTime * 24;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: TB.fg,
      overflow: 'hidden',
    }}>
      {/* Drifting rail lines */}
      <div style={{
        position: 'absolute', inset: -40,
        backgroundImage: `repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,255,255,0.06) 79px 80px)`,
        transform: `translateY(${slide}px)`,
      }}/>

      {/* Color block accents */}
      <div style={{
        position: 'absolute',
        left: 80, top: 200,
        width: 140, height: 320,
        background: TB.orange,
        borderRadius: 18,
        opacity: 0.85 * Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1)) * (1 - exitT),
        transform: `translateY(${(1 - Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1))) * -40}px)`,
      }}/>
      <div style={{
        position: 'absolute',
        right: 110, top: 540,
        width: 180, height: 220,
        background: TB.butter,
        borderRadius: 18,
        opacity: 0.7 * Easing.easeOutCubic(clamp((localTime - 0.2) / 0.6, 0, 1)) * (1 - exitT),
        transform: `translateY(${(1 - Easing.easeOutCubic(clamp((localTime - 0.2) / 0.6, 0, 1))) * 40}px)`,
      }}/>
      <div style={{
        position: 'absolute',
        left: 200, top: 720,
        width: 110, height: 160,
        background: TB.sage,
        borderRadius: 18,
        opacity: 0.6 * Easing.easeOutCubic(clamp((localTime - 0.4) / 0.6, 0, 1)) * (1 - exitT),
      }}/>
      <div style={{
        position: 'absolute',
        right: 300, top: 130,
        width: 90, height: 140,
        background: TB.lavender,
        borderRadius: 18,
        opacity: 0.55 * Easing.easeOutCubic(clamp((localTime - 0.5) / 0.6, 0, 1)) * (1 - exitT),
      }}/>

      {/* Center content */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        opacity: 1 - exitT,
      }}>
        {/* Logo mark */}
        <div style={{
          width: 120, height: 120,
          borderRadius: 28,
          background: TB.orange,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 36,
          transform: `scale(${0.5 + 0.5 * logoEase})`,
          opacity: logoT,
          boxShadow: `0 20px 60px ${TB.orange}66, 0 8px 16px ${TB.orange}44`,
        }}>
          {/* Stylized clock-rail mark */}
          <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
            <circle cx="30" cy="30" r="24" stroke="#fff" strokeWidth="3.5" opacity="0.95"/>
            <line x1="30" y1="30" x2="30" y2="14" stroke="#fff" strokeWidth="4" strokeLinecap="round"/>
            <line x1="30" y1="30" x2="42" y2="30" stroke="#fff" strokeWidth="4" strokeLinecap="round"/>
            <circle cx="30" cy="30" r="3.5" fill="#fff"/>
          </svg>
        </div>

        {/* Wordmark */}
        <div style={{
          fontFamily: TB.display,
          fontSize: 132, fontWeight: 900, color: TB.bg,
          letterSpacing: '-0.04em', lineHeight: 1,
          opacity: logoT,
          transform: `translateY(${(1 - logoEase) * 20}px)`,
        }}>
          Time<span style={{ color: TB.orange }}>blind</span>
        </div>

        {/* Tagline */}
        <div style={{
          fontFamily: TB.display,
          fontSize: 36, fontWeight: 500, color: TB.bg,
          letterSpacing: '-0.01em',
          marginTop: 28,
          opacity: tagT * 0.9,
          transform: `translateY(${(1 - Easing.easeOutCubic(tagT)) * 12}px)`,
        }}>
          A day you can <em style={{ color: TB.orange, fontStyle: 'normal', fontWeight: 700 }}>see</em>.
        </div>

        {/* Subtitle */}
        <div style={{
          fontFamily: TB.body,
          fontSize: 18, color: 'rgba(250,247,242,0.55)',
          marginTop: 18, fontWeight: 500,
          letterSpacing: '0.02em',
          opacity: subT,
        }}>
          For ADHD, autism, anxiety — and anyone who's lost an afternoon.
        </div>

        {/* CTA pill */}
        <div style={{
          marginTop: 52,
          display: 'flex', alignItems: 'center', gap: 14,
          opacity: ctaT,
          transform: `translateY(${(1 - Easing.easeOutCubic(ctaT)) * 8}px)`,
        }}>
          <div style={{
            background: TB.bg,
            color: TB.fg,
            padding: '16px 28px',
            borderRadius: 999,
            fontFamily: TB.display, fontWeight: 700, fontSize: 18,
            letterSpacing: '-0.01em',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            timeblind.app
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M3 8h10M9 4l4 4-4 4" stroke={TB.fg} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div style={{
            fontFamily: TB.mono, fontSize: 13, color: 'rgba(250,247,242,0.5)',
            letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600,
          }}>
            Web · iOS · macOS
          </div>
        </div>
      </div>
    </div>
  );
}

window.Scene6Logo = Scene6Logo;