import { useState } from 'react';
import { Check, Download, Star, Search, ArrowRight, Sparkles, FileText, Palette, Bot, Globe } from 'lucide-react';

export default function CVBuilder() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
      {/* Navigation */}
      <nav className="fixed w-full bg-white/80 backdrop-blur-md z-50 border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <span className="text-xl font-semibold text-gray-900">SmartCV.ai</span>
            </div>

            <div className="hidden md:flex items-center space-x-8">
              <a href="#features" className="text-gray-600 hover:text-gray-900">Features</a>
              <a href="#templates" className="text-gray-600 hover:text-gray-900">Templates</a>
              <a href="#pricing" className="text-gray-600 hover:text-gray-900">Pricing</a>
              <button className="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition-colors">
                Get Started
              </button>
            </div>

            <button 
              className="md:hidden"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile Menu */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-40 bg-white md:hidden pt-16">
          <div className="px-4 pt-4 space-y-4">
            <a href="#features" className="block text-gray-600">Features</a>
            <a href="#templates" className="block text-gray-600">Templates</a>
            <a href="#pricing" className="block text-gray-600">Pricing</a>
            <button className="w-full bg-blue-600 text-white px-6 py-2 rounded-full">
              Get Started
            </button>
          </div>
        </div>
      )}

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div className="text-center">
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
            Create Your Professional CV with
            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"> AI Power</span>
          </h1>
          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            Design stunning resumes in minutes with our AI-powered platform. Get personalized suggestions and stand out from the crowd.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <button className="bg-blue-600 text-white px-8 py-3 rounded-full hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
              Create Your CV <ArrowRight className="w-5 h-5" />
            </button>
            <button className="bg-gray-100 text-gray-900 px-8 py-3 rounded-full hover:bg-gray-200 transition-colors">
              View Templates
            </button>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto" id="features">
        <h2 className="text-3xl font-bold text-center mb-12">Powerful Features</h2>
        <div className="grid md:grid-cols-3 gap-8">
          {[
            {
              icon: <Sparkles className="w-6 h-6 text-blue-600" />,
              title: "AI-Powered Generation",
              description: "Generate professional CVs instantly based on your experience and skills."
            },
            {
              icon: <FileText className="w-6 h-6 text-blue-600" />,
              title: "Smart Templates",
              description: "Choose from industry-specific templates optimized for ATS systems."
            },
            {
              icon: <Download className="w-6 h-6 text-blue-600" />,
              title: "Easy Export",
              description: "Download your CV in multiple formats or share via custom URL."
            },
            {
              icon: <Palette className="w-6 h-6 text-blue-600" />,
              title: "Customization",
              description: "Personalize fonts, colors, and layouts to match your style."
            },
            {
              icon: <Bot className="w-6 h-6 text-blue-600" />,
              title: "AI Assistant",
              description: "Get real-time suggestions to improve your CV content."
            },
            {
              icon: <Globe className="w-6 h-6 text-blue-600" />,
              title: "Multi-language",
              description: "Create CVs in multiple languages for global opportunities."
            }
          ].map((feature, index) => (
            <div key={index} className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
              <div className="mb-4">{feature.icon}</div>
              <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
              <p className="text-gray-600">{feature.description}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 sm:p-12 text-center text-white">
          <h2 className="text-3xl font-bold mb-4">Ready to Create Your Professional CV?</h2>
          <p className="text-lg mb-8 opacity-90">Join thousands of job seekers who have successfully landed their dream jobs</p>
          <button className="bg-white text-blue-600 px-8 py-3 rounded-full hover:bg-gray-100 transition-colors">
            Get Started for Free
          </button>
        </div>
      </section>
    </div>
  );
}

export function TemplateSelection() {
  const [selectedCategory, setSelectedCategory] = useState('All');
  const [searchQuery, setSearchQuery] = useState('');

  const categories = ['All', 'Modern', 'Professional', 'Creative', 'Simple', 'Academic'];

  const templates = [
    {
      id: 1,
      name: "Modern Split",
      category: "Modern",
      popular: true,
      image: "https://sitebrew.ai/f/WhatsApp Image 2024-12-27 at 12-PT81.jpeg",
      description: "Modern two-column layout with bold accents and clean typography"
    },
    {
      id: 2,
      name: "Executive Pro",
      category: "Professional",
      popular: true,
      image: "placeholder-executive.jpg", // You'll need to replace with actual image URL
      description: "Traditional professional layout ideal for corporate roles"
    },
    {
      id: 3,
      name: "Creative Portfolio",
      category: "Creative",
      popular: false,
      image: "placeholder-creative.jpg", // You'll need to replace with actual image URL
      description: "Dynamic design perfect for creative professionals"
    },
    {
      id: 4,
      name: "Minimal Clean",
      category: "Simple",
      popular: true,
      image: "placeholder-minimal.jpg", // You'll need to replace with actual image URL
      description: "Clean and straightforward design for all industries"
    },
    {
      id: 5,
      name: "Academic CV",
      category: "Academic",
      popular: false,
      image: "placeholder-academic.jpg", // You'll need to replace with actual image URL
      description: "Detailed layout for academic and research positions"
    },
    {
      id: 6,
      name: "Tech Modern",
      category: "Modern",
      popular: true,
      image: "placeholder-tech.jpg", // You'll need to replace with actual image URL
      description: "Contemporary design for tech professionals"
    }
  ];

  const filteredTemplates = templates.filter(template => 
    (selectedCategory === 'All' || template.category === selectedCategory) &&
    template.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-gray-50 py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">Choose Your Template</h1>
          <p className="text-lg text-gray-600">Select from our professionally designed templates</p>
        </div>

        {/* Search and Filter */}
        <div className="mb-8 flex flex-col sm:flex-row justify-between items-center gap-4">
          <div className="relative w-full sm:w-96">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              type="text"
              placeholder="Search templates..."
              className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
          <div className="flex gap-2 overflow-x-auto pb-2 w-full sm:w-auto">
            {categories.map(category => (
              <button
                key={category}
                onClick={() => setSelectedCategory(category)}
                className={`px-4 py-2 rounded-full whitespace-nowrap ${
                  selectedCategory === category
                    ? 'bg-blue-600 text-white'
                    : 'bg-white text-gray-600 hover:bg-gray-100'
                }`}
              >
                {category}
              </button>
            ))}
          </div>
        </div>

        {/* Templates Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredTemplates.map(template => (
            <div key={template.id} className="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden">
              <div className="relative">
                {template.popular && (
                  <div className="absolute top-4 left-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-1">
                    <Star className="w-4 h-4" /> Popular
                  </div>
                )}
                <img 
                  src={template.image} 
                  alt={template.name}
                  className="w-full h-[400px] object-cover object-top"
                />
                <div className="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-50 transition-opacity flex items-center justify-center opacity-0 hover:opacity-100">
                  <button className="bg-white text-gray-900 px-6 py-3 rounded-full font-medium flex items-center gap-2">
                    Use Template <Check className="w-5 h-5" />
                  </button>
                </div>
              </div>
              <div className="p-6">
                <h3 className="text-xl font-semibold mb-2">{template.name}</h3>
                <p className="text-gray-600 mb-4">{template.description}</p>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-500">{template.category}</span>
                  <button className="text-blue-600 hover:text-blue-700 flex items-center gap-1">
                    <Download className="w-4 h-4" /> Preview
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}