import AnimatedLogo from '@/components/AnimatedLogo';

export const dynamic = 'force-static';

export const metadata = {
  title: 'AnimatedLogo preview — AV Beat',
  robots: { index: false, follow: false },
};

/**
 * Standalone preview for /preview/animated-logo. Renders the new
 * AnimatedLogo component in both light and dark variants at several
 * sizes so you can eyeball the animation before any wiring decisions.
 */
export default function AnimatedLogoPreviewPage() {
  return (
    <div style={{ minHeight: '100vh', background: '#F8FAFC', padding: '48px 32px', fontFamily: 'var(--font-sans)' }}>
      <h1 style={{ fontSize: 32, fontWeight: 800, color: '#0F172A', marginBottom: 8 }}>AnimatedLogo preview</h1>
      <p style={{ fontSize: 14, color: '#475569', marginBottom: 40 }}>
        Standalone — not wired into Header or Footer. Reload the page to replay the mount animation.
      </p>

      <section style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
        <div style={{ background: '#FFFFFF', border: '1px solid #DCE6F2', borderRadius: 8, padding: 32 }}>
          <h2 style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#475569', marginBottom: 24 }}>
            onLight · default sizes
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <AnimatedLogo size={48} variant="onLight" />
            <AnimatedLogo size={64} variant="onLight" />
            <AnimatedLogo size={96} variant="onLight" />
            <AnimatedLogo size={128} variant="onLight" />
          </div>
        </div>

        <div style={{ background: '#0F172A', border: '1px solid #1E293B', borderRadius: 8, padding: 32 }}>
          <h2 style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#94A3B8', marginBottom: 24 }}>
            onDark · default sizes
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <AnimatedLogo size={48} variant="onDark" />
            <AnimatedLogo size={64} variant="onDark" />
            <AnimatedLogo size={96} variant="onDark" />
            <AnimatedLogo size={128} variant="onDark" />
          </div>
        </div>

        <div style={{ background: '#FFFFFF', border: '1px solid #DCE6F2', borderRadius: 8, padding: 32 }}>
          <h2 style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#475569', marginBottom: 24 }}>
            no tagline · favicon-style
          </h2>
          <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
            <AnimatedLogo size={48} variant="onLight" showTagline={false} />
            <AnimatedLogo size={64} variant="onLight" showTagline={false} />
            <AnimatedLogo size={96} variant="onLight" showTagline={false} />
          </div>
        </div>
      </section>
    </div>
  );
}