`src/components/shared/VersionSwitcher.tsx`

54 lines
'use client'

import { usePathname } from 'next/navigation'
import { Palette, Check } from 'lucide-react'

const VERSIONS = [
  { path: '/', label: 'Original' },
  { path: '/v1', label: 'V1 Silk' },
  { path: '/v2', label: 'V2 Glass' },
  { path: '/v3', label: 'V3 Polaroid' },
]

export default function VersionSwitcher() {
  const pathname = usePathname()

  const isLanding = pathname === '/' || pathname.startsWith('/v')
  if (!isLanding) return null

  return (
    <div
      className="fixed bottom-0 left-0 right-0 flex items-center justify-center gap-2 px-4 py-3"
      style={{
        zIndex: 99999,
        background: 'rgba(61, 64, 91, 0.92)',
        backdropFilter: 'blur(12px)',
        pointerEvents: 'auto',
      }}
    >
      <Palette size={14} style={{ color: 'var(--color-peach)' }} />
      <span className="text-xs font-medium mr-1" style={{ color: 'rgba(255,255,255,0.6)' }}>
        Design:
      </span>
      {VERSIONS.map((v) => {
        const active = v.path === pathname
        return (
          <a
            key={v.path}
            href={v.path}
            className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-semibold transition-all hover:scale-105 no-underline"
            style={{
              background: active ? 'var(--color-peach)' : 'rgba(255,255,255,0.12)',
              color: active ? 'var(--color-brown)' : 'rgba(255,255,255,0.7)',
              pointerEvents: 'auto',
            }}
          >
            {active && <Check size={10} />}
            {v.label}
          </a>
        )
      })}
    </div>
  )
}