import Image from 'next/image'

const colors = [
  { name: 'Teal', hex: '#0F766E', tailwind: 'teal-600' },
  { name: 'Purple', hex: '#7C3AED', tailwind: 'purple-600' },
  { name: 'Pink', hex: '#EC4899', tailwind: 'pink-500' },
  { name: 'Slate', hex: '#343F56', tailwind: 'slate-800' },
  { name: 'White', hex: '#FFFFFF', tailwind: 'white' },
  { name: 'Light Gray', hex: '#F1F5F9', tailwind: 'slate-100' },
]

const fonts = [
  { name: 'Inter', sample: 'The quick brown fox jumps over the lazy dog. 1234567890', weight: '400' },
  { name: 'JetBrains Mono', sample: 'const bookwiz = "awesome";', weight: '400' },
]

export default function BrandKitPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-100 via-slate-200 to-slate-100 py-12 px-2 sm:px-4">
      <div className="max-w-3xl mx-auto">
        <h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-center mb-10 bg-gradient-to-r from-teal-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">
          Bookwiz Brand Kit
        </h1>
        <div className="bg-white rounded-2xl shadow-xl p-8 mb-10">
          <h2 className="text-xl font-bold mb-4 text-slate-900">Logo Assets</h2>
          <div className="flex flex-col sm:flex-row gap-8 items-center">
            <div className="flex flex-col items-center">
              <Image src="/images/logo-glyph-white.png" alt="Bookwiz Glyph Logo" width={64} height={64} className="bg-slate-800 rounded-xl p-2" />
              <span className="text-xs text-slate-500 mt-2">Glyph (white, PNG)</span>
            </div>
            <div className="flex flex-col items-center">
              <Image src="/images/logo-text-white.svg" alt="Bookwiz Text Logo" width={180} height={40} className="bg-slate-800 rounded-xl p-2" />
              <span className="text-xs text-slate-500 mt-2">Wordmark (white, SVG)</span>
            </div>
          </div>
          <div className="mt-6 text-xs text-slate-500 text-center">
            For dark backgrounds, use the white logos above. For light backgrounds, request the dark version at <a href="mailto:hello@bookwiz.io" className="text-teal-600 underline">hello@bookwiz.io</a>.
          </div>
        </div>
        <div className="bg-white rounded-2xl shadow-xl p-8 mb-10">
          <h2 className="text-xl font-bold mb-4 text-slate-900">Color Palette</h2>
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-6">
            {colors.map((color) => (
              <div key={color.hex} className="flex flex-col items-center">
                <div className="w-16 h-16 rounded-xl mb-2 border shadow" style={{ background: color.hex }} />
                <span className="font-mono text-xs text-slate-700">{color.hex}</span>
                <span className="text-xs text-slate-400">{color.name}</span>
                <span className="text-xs text-slate-300">{color.tailwind}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="bg-white rounded-2xl shadow-xl p-8 mb-10">
          <h2 className="text-xl font-bold mb-4 text-slate-900">Typography</h2>
          <div className="space-y-6">
            <div>
              <span className="text-sm text-slate-500">Primary Font:</span>
              <div className="font-sans text-lg text-slate-900 mt-1">Inter</div>
              <div className="text-slate-500 text-sm">{fonts[0].sample}</div>
            </div>
            <div>
              <span className="text-sm text-slate-500">Monospace (Code):</span>
              <div className="font-mono text-lg text-slate-900 mt-1">JetBrains Mono</div>
              <div className="text-slate-500 text-sm">{fonts[1].sample}</div>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-2xl shadow-xl p-8 mb-10">
          <h2 className="text-xl font-bold mb-4 text-slate-900">Brand Preferences & Usage</h2>
          <ul className="list-disc pl-6 space-y-2 text-slate-700 text-sm">
            <li>Use plenty of whitespace and a minimal, modern look.</li>
            <li>Use the teal, purple, and pink gradients for highlights and CTAs.</li>
            <li>Logos should not be stretched, recolored, or altered.</li>
            <li>Typography should be clean and readable (Inter for UI, JetBrains Mono for code).</li>
            <li>For questions or custom assets, contact <a href="mailto:hello@bookwiz.io" className="text-teal-600 underline">hello@bookwiz.io</a>.</li>
          </ul>
        </div>
      </div>
    </div>
  )
}