import React from 'react';
import { MoreHorizontal, ChevronRight, Plus, Globe, Book } from 'lucide-react';

const HowItWorks: React.FC = () => {
  return (
    <section id="how-it-works" className="py-24 bg-[#0A0C12] overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          
          {/* Text Content */}
          <div className="order-2 lg:order-1">
            <h2 className="text-3xl lg:text-4xl font-display font-bold mb-6 text-white">
              Your Pocket Tutor. <br />
              <span className="text-primary">Always Ready.</span>
            </h2>
            
            <div className="space-y-8 mt-10">
              <div className="flex gap-4">
                <div className="flex-shrink-0 w-10 h-10 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 font-bold">
                  1
                </div>
                <div>
                  <h4 className="text-lg font-bold text-white mb-2">Build Your Library</h4>
                  <p className="text-gray-400">Create decks manually, use AI prompts, or import shared decks from friends via unique codes.</p>
                </div>
              </div>
              
              <div className="flex gap-4">
                <div className="flex-shrink-0 w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-emerald-400 font-bold">
                  2
                </div>
                <div>
                  <h4 className="text-lg font-bold text-white mb-2">Configure Focus Mode</h4>
                  <p className="text-gray-400">On Android, select distracting apps to block. They'll stay locked until you complete your daily reviews.</p>
                </div>
              </div>
              
              <div className="flex gap-4">
                <div className="flex-shrink-0 w-10 h-10 rounded-full bg-purple-900/30 flex items-center justify-center text-purple-400 font-bold">
                  3
                </div>
                <div>
                  <h4 className="text-lg font-bold text-white mb-2">Study & Sync</h4>
                  <p className="text-gray-400">Review cards using SRS. Your progress syncs to the cloud automatically, even after studying offline.</p>
                </div>
              </div>
            </div>
          </div>

          {/* Visual Mockups */}
          <div className="order-1 lg:order-2 relative">
            <div className="relative w-full aspect-square max-w-md mx-auto">
              
              {/* Back Card Ghost */}
              <div className="absolute top-0 right-0 w-3/4 bg-surface-dark opacity-30 rounded-2xl h-64 transform rotate-6 translate-x-4 border border-gray-700"></div>
              
              {/* Main Flashcard */}
              <div className="absolute top-8 right-8 w-3/4 bg-surface-dark rounded-2xl shadow-2xl p-6 border border-gray-700 transform -rotate-3 z-10">
                <div className="flex justify-between items-center mb-6">
                  <span className="text-gray-400 text-xs uppercase tracking-widest">Korean Vocab</span>
                  <MoreHorizontal size={20} className="text-gray-400" />
                </div>
                <div className="h-24 flex items-center justify-center text-center">
                  <h3 className="text-2xl font-bold text-white">억울하다</h3>
                </div>
                <div className="border-t border-gray-700 my-4"></div>
                <p className="text-gray-300 text-center mb-6">To feel wronged / To feel unfair</p>
                <div className="grid grid-cols-2 gap-3">
                  <button className="bg-red-500/20 text-red-400 py-2 rounded-lg text-sm font-medium hover:bg-red-500/30 transition-colors">Again</button>
                  <button className="bg-orange-500/20 text-orange-400 py-2 rounded-lg text-sm font-medium hover:bg-orange-500/30 transition-colors">Hard</button>
                  <button className="bg-green-500/20 text-green-400 py-2 rounded-lg text-sm font-medium hover:bg-green-500/30 transition-colors">Good</button>
                  <button className="bg-primary/20 text-primary py-2 rounded-lg text-sm font-medium hover:bg-primary/30 transition-colors">Easy</button>
                </div>
              </div>

              {/* My Decks List Card (Overlapping) */}
              <div className="absolute bottom-0 left-0 w-3/4 bg-surface-dark rounded-2xl shadow-2xl p-5 border border-gray-700 z-20">
                <h4 className="font-bold text-lg mb-4 text-white">My Decks</h4>
                <div className="space-y-3">
                  <div className="bg-gradient-to-r from-purple-500/10 to-blue-500/10 p-3 rounded-lg border border-purple-500/20 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <Book size={20} className="text-purple-400" />
                      <div>
                        <p className="font-bold text-sm text-white">Maths</p>
                        <p className="text-xs text-gray-500">4 cards • <span className="text-primary">2 due</span></p>
                      </div>
                    </div>
                    <ChevronRight size={16} className="text-gray-400" />
                  </div>
                  <div className="bg-gradient-to-r from-emerald-500/10 to-teal-500/10 p-3 rounded-lg border border-emerald-500/20 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <Globe size={20} className="text-emerald-400" />
                      <div>
                        <p className="font-bold text-sm text-white">Geography</p>
                        <p className="text-xs text-gray-500">2 cards • <span className="text-primary">2 due</span></p>
                      </div>
                    </div>
                    <ChevronRight size={16} className="text-gray-400" />
                  </div>
                </div>
                <div className="absolute -bottom-5 -right-5">
                  <button className="w-12 h-12 bg-primary rounded-full shadow-lg flex items-center justify-center text-gray-900 hover:scale-110 transition-transform">
                    <Plus size={24} />
                  </button>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HowItWorks;