templates/changelog.tsx

import { motion } from 'framer-motion'
import {
  GitCommit, Tag, Zap, Bug, Sparkles, AlertCircle,
  CheckCircle, Package, Rocket, Shield, Clock, ChevronRight
} from 'lucide-react'

export default function ChangelogTemplate() {
  const releases = [
    {
      version: "3.0.0",
      date: "December 18, 2024",
      type: "major",
      highlights: ["Complete UI redesign", "New AI features", "Performance improvements"],
      changes: {
        features: ["AI-powered code generation", "Real-time collaboration", "Dark mode support"],
        improvements: ["50% faster build times", "Reduced bundle size by 30%", "Better TypeScript support"],
        fixes: ["Fixed memory leak in dev mode", "Resolved auth token issues", "Fixed mobile responsive bugs"]
      }
    },
    {
      version: "2.5.3",
      date: "December 10, 2024",
      type: "patch",
      highlights: ["Critical security fixes", "Bug fixes"],
      changes: {
        features: [],
        improvements: ["Updated dependencies", "Better error messages"],
        fixes: ["Security vulnerability in auth system", "Fixed data sync issues"]
      }
    }
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-gray-400 dark:from-gray-950 dark:to-slate-950">
      {/* Header */}
      <header className="border-b border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg sticky top-0 z-50">
        <div className="max-w-5xl mx-auto px-6 py-4">
          <nav className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-gradient-to-br from-white to-gray-500 rounded-lg flex items-center justify-center">
                <GitCommit className="w-6 h-6 text-white" />
              </div>
              <span className="text-xl font-bold">Hanzo Changelog</span>
            </div>

            <div className="flex items-center gap-4">
              <button className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100">
                Subscribe to Updates
              </button>
              <button className="px-4 py-2 bg-gray-800 text-white rounded-lg font-semibold">
                View Docs
              </button>
            </div>
          </nav>
        </div>
      </header>

      {/* Hero */}
      <section className="max-w-5xl mx-auto px-6 py-12">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center"
        >
          <h1 className="text-4xl md:text-5xl font-bold mb-4">
            What's New at{" "}
            <span className="bg-gradient-to-r from-white to-gray-500 bg-clip-text text-transparent">
              Hanzo
            </span>
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-400">
            Track product updates, improvements, and fixes
          </p>
        </motion.div>
      </section>

      {/* Timeline */}
      <section className="max-w-5xl mx-auto px-6 pb-20">
        <div className="relative">
          {/* Timeline Line */}
          <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-white to-gray-500" />

          {releases.map((release, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.2 }}
              className="relative mb-12"
            >
              {/* Timeline Node */}
              <div className="absolute left-8 -translate-x-1/2 w-4 h-4 bg-gray-800 rounded-full border-4 border-white dark:border-gray-950" />

              {/* Content Card */}
              <div className="ml-20 bg-white dark:bg-gray-900 rounded-xl shadow-lg overflow-hidden">
                {/* Header */}
                <div className="px-6 py-4 bg-gradient-to-r from-white to-gray-500">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-4">
                      <div className="flex items-center gap-2">
                        <Tag className="w-5 h-5 text-white" />
                        <span className="text-xl font-bold text-white">v{release.version}</span>
                      </div>
                      {release.type === 'major' && (
                        <span className="px-2 py-1 bg-white/20 backdrop-blur rounded text-xs font-semibold text-white">
                          MAJOR RELEASE
                        </span>
                      )}
                    </div>
                    <div className="flex items-center gap-2 text-white/80">
                      <Clock className="w-4 h-4" />
                      <span className="text-sm">{release.date}</span>
                    </div>
                  </div>
                </div>

                {/* Highlights */}
                {release.highlights.length > 0 && (
                  <div className="px-6 py-4 bg-gray-800 dark:bg-gray-800/20">
                    <div className="flex flex-wrap gap-2">
                      {release.highlights.map((highlight, i) => (
                        <span
                          key={i}
                          className="px-3 py-1 bg-white dark:bg-gray-800 rounded-full text-sm font-medium"
                        >
                          {highlight}
                        </span>
                      ))}
                    </div>
                  </div>
                )}

                {/* Changes */}
                <div className="p-6 space-y-6">
                  {/* New Features */}
                  {release.changes.features.length > 0 && (
                    <div>
                      <h3 className="flex items-center gap-2 text-lg font-semibold mb-3">
                        <Sparkles className="w-5 h-5 text-gray-300" />
                        New Features
                      </h3>
                      <ul className="space-y-2">
                        {release.changes.features.map((feature, i) => (
                          <li key={i} className="flex items-start gap-2">
                            <CheckCircle className="w-4 h-4 text-gray-300 mt-0.5" />
                            <span className="text-gray-700 dark:text-gray-300">{feature}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}

                  {/* Improvements */}
                  {release.changes.improvements.length > 0 && (
                    <div>
                      <h3 className="flex items-center gap-2 text-lg font-semibold mb-3">
                        <Zap className="w-5 h-5 text-gray-400" />
                        Improvements
                      </h3>
                      <ul className="space-y-2">
                        {release.changes.improvements.map((improvement, i) => (
                          <li key={i} className="flex items-start gap-2">
                            <CheckCircle className="w-4 h-4 text-gray-400 mt-0.5" />
                            <span className="text-gray-700 dark:text-gray-300">{improvement}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}

                  {/* Bug Fixes */}
                  {release.changes.fixes.length > 0 && (
                    <div>
                      <h3 className="flex items-center gap-2 text-lg font-semibold mb-3">
                        <Bug className="w-5 h-5 text-gray-400" />
                        Bug Fixes
                      </h3>
                      <ul className="space-y-2">
                        {release.changes.fixes.map((fix, i) => (
                          <li key={i} className="flex items-start gap-2">
                            <CheckCircle className="w-4 h-4 text-gray-400 mt-0.5" />
                            <span className="text-gray-700 dark:text-gray-300">{fix}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}
                </div>

                {/* Footer */}
                <div className="px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
                  <button className="flex items-center gap-2 text-gray-400 dark:text-gray-400 font-semibold">
                    View Full Release Notes <ChevronRight className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </motion.div>
          ))}

          {/* Load More */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.5 }}
            className="text-center mt-12"
          >
            <button className="px-6 py-3 bg-white dark:bg-gray-900 rounded-lg shadow-lg font-semibold">
              Load More Updates
            </button>
          </motion.div>
        </div>
      </section>

      {/* Subscribe Section */}
      <section className="bg-gradient-to-r from-white to-gray-500 py-16">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <Rocket className="w-12 h-12 text-white mx-auto mb-4" />
          <h2 className="text-3xl font-bold text-white mb-4">Stay in the Loop</h2>
          <p className="text-xl text-white/90 mb-8">
            Get notified about new releases and important updates
          </p>
          <div className="flex gap-4 max-w-md mx-auto">
            <input
              type="email"
              placeholder="Enter your email"
              className="flex-1 px-4 py-3 bg-white/20 backdrop-blur placeholder-white/60 text-white rounded-lg border border-white/30"
            />
            <button className="px-6 py-3 bg-white text-gray-400 rounded-lg font-semibold">
              Subscribe
            </button>
          </div>
        </div>
      </section>
    </div>
  )
}