import React, { useState } from 'react';
import { Mail, Shield, Zap, Heart, Copy, Check, ArrowRight, Github, Coffee, Lock, Menu } from 'lucide-react';

export default function App() {
  const [alias, setAlias] = useState('');
  const [realEmail, setRealEmail] = useState('');
  const [isGenerated, setIsGenerated] = useState(false);
  const [copied, setCopied] = useState(false);

  const handleGenerate = (e) => {
    e.preventDefault();
    if (alias && realEmail) {
      setIsGenerated(true);
      // In a real app, this would send data to the backend
    }
  };

  const copyToClipboard = () => {
    const email = `${alias}@tohug.me`;
    const textArea = document.createElement("textarea");
    textArea.value = email;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy', err);
    }
    document.body.removeChild(textArea);
  };

  const reset = () => {
    setIsGenerated(false);
    setAlias('');
    setRealEmail('');
  };

  return (
    <div className="min-h-screen bg-[#FFFBF5] text-slate-800 font-sans selection:bg-orange-200 overflow-x-hidden">
      
      {/* Navbar */}
      <nav className="max-w-4xl mx-auto p-6 flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-0">
        <div className="flex items-center gap-2 font-bold text-xl tracking-tight text-orange-600">
          <div className="bg-orange-100 p-2 rounded-xl">
            <Shield size={24} className="text-orange-500" />
          </div>
          tohug.me
        </div>
        {/* Mobile-friendly nav links: stacked below logo on mobile, side-by-side on desktop */}
        <div className="flex gap-4 sm:gap-6 text-sm font-medium text-slate-500">
          <a href="#" className="hover:text-orange-600 transition-colors">How it works</a>
          <a href="#" className="hover:text-orange-600 transition-colors">Privacy</a>
          <a href="#" className="hover:text-orange-600 transition-colors">Blog</a>
        </div>
      </nav>

      {/* Main Content */}
      <main className="max-w-2xl mx-auto px-4 sm:px-6 py-8 sm:py-20 text-center">
        
        {/* Hero */}
        <div className="mb-10 sm:mb-12 space-y-4">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-100 text-purple-700 text-xs font-bold uppercase tracking-wide">
            <Zap size={12} />
            <span>Beta v1.0</span>
          </div>
          <h1 className="text-3xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-slate-900 leading-tight">
            Email privacy that feels like a <span className="text-orange-500 decoration-wavy underline decoration-orange-200">hug.</span>
          </h1>
          <p className="text-base sm:text-xl text-slate-500 max-w-lg mx-auto leading-relaxed">
            Stop giving your real email to random websites. Create a warm, safe alias and keep your inbox happy.
          </p>
        </div>

        {/* The Generator Card */}
        <div className="bg-white p-2 rounded-3xl shadow-xl shadow-orange-900/5 border border-slate-100 max-w-md mx-auto relative overflow-hidden">
          
          {/* Decorative Blob */}
          <div className="absolute -top-20 -right-20 w-40 h-40 bg-orange-100 rounded-full blur-3xl opacity-50 pointer-events-none"></div>

          <div className="relative z-10 p-5 sm:p-8">
            {!isGenerated ? (
              <form onSubmit={handleGenerate} className="space-y-4 text-left">
                <div>
                  <label className="block text-sm font-bold text-slate-700 mb-1 ml-1">Pick a username</label>
                  <div className="flex items-center">
                    <input 
                      type="text" 
                      required
                      placeholder="pizza-lover"
                      value={alias}
                      onChange={(e) => setAlias(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
                      className="w-full bg-slate-50 border-2 border-slate-100 focus:border-orange-400 focus:bg-white transition-all rounded-l-xl px-4 py-3 outline-none font-medium text-slate-700 placeholder:text-slate-300 text-sm sm:text-base"
                    />
                    <div className="bg-slate-100 border-y-2 border-r-2 border-slate-100 text-slate-400 px-3 sm:px-4 py-3 rounded-r-xl font-medium select-none text-sm sm:text-base whitespace-nowrap">
                      @tohug.me
                    </div>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-bold text-slate-700 mb-1 ml-1">Where should we forward emails?</label>
                  <div className="relative">
                    <Mail className="absolute left-4 top-3.5 text-slate-300" size={18} />
                    <input 
                      type="email" 
                      required
                      placeholder="manny@example.com"
                      value={realEmail}
                      onChange={(e) => setRealEmail(e.target.value)}
                      className="w-full bg-slate-50 border-2 border-slate-100 focus:border-orange-400 focus:bg-white transition-all rounded-xl pl-11 pr-4 py-3 outline-none font-medium text-slate-700 placeholder:text-slate-300 text-sm sm:text-base"
                    />
                  </div>
                  <p className="text-xs text-slate-400 mt-2 ml-1 flex items-center gap-1">
                    <Lock size={10} /> We never share or sell this. Pinky promise.
                  </p>
                </div>

                <button 
                  type="submit" 
                  className="w-full bg-orange-500 hover:bg-orange-600 active:scale-[0.98] transition-all text-white font-bold py-3 sm:py-4 rounded-xl shadow-lg shadow-orange-500/20 flex justify-center items-center gap-2 mt-2 text-sm sm:text-base"
                >
                  Create My Alias <ArrowRight size={18} />
                </button>
              </form>
            ) : (
              <div className="text-center py-4 space-y-6">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto text-green-600 mb-4 animate-bounce">
                  <Check size={32} strokeWidth={3} />
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-slate-800">You're protected!</h3>
                  <p className="text-slate-500 text-sm">Emails sent to this alias will forward to your real inbox.</p>
                </div>
                
                <div className="bg-slate-50 border-2 border-slate-100 rounded-xl p-4 flex items-center justify-between gap-2 group cursor-pointer hover:border-orange-200 transition-colors" onClick={copyToClipboard}>
                  <code className="text-base sm:text-lg font-bold text-orange-600 truncate max-w-[200px] sm:max-w-none">
                    {alias}@tohug.me
                  </code>
                  <button className="text-slate-400 group-hover:text-orange-500 transition-colors p-2 rounded-lg hover:bg-orange-50 shrink-0">
                    {copied ? <Check size={20} /> : <Copy size={20} />}
                  </button>
                </div>
                
                <button 
                  onClick={reset}
                  className="text-sm text-slate-400 hover:text-slate-600 underline decoration-slate-300 underline-offset-4"
                >
                  Create another one
                </button>
              </div>
            )}
          </div>
        </div>

        {/* Features / Why */}
        <div className="mt-16 sm:mt-20 grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8 text-left">
          <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
            <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-4">
              <Shield size={20} />
            </div>
            <h3 className="font-bold text-slate-800 mb-2">Total Anonymity</h3>
            <p className="text-sm text-slate-500 leading-relaxed">
              When you reply to forwarded emails, we strip your real address so you stay hidden.
            </p>
          </div>
          <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
            <div className="w-10 h-10 bg-pink-100 rounded-lg flex items-center justify-center text-pink-600 mb-4">
              <Zap size={20} />
            </div>
            <h3 className="font-bold text-slate-800 mb-2">Kill Switch</h3>
            <p className="text-sm text-slate-500 leading-relaxed">
              Getting spammed? Delete the alias instantly and the emails stop forever.
            </p>
          </div>
          <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
            <div className="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center text-yellow-600 mb-4">
              <Heart size={20} />
            </div>
            <h3 className="font-bold text-slate-800 mb-2">Open Source</h3>
            <p className="text-sm text-slate-500 leading-relaxed">
              No shady business. The code is public so you can see exactly how we handle data.
            </p>
          </div>
        </div>

        {/* Manny's Corner */}
        <div className="mt-20 sm:mt-24 border-t border-slate-200 pt-12">
          <div className="flex flex-col items-center gap-4">
            <div className="w-16 h-16 bg-slate-200 rounded-full overflow-hidden border-2 border-white shadow-md">
               {/* Placeholder for Manny's Avatar */}
               <svg viewBox="0 0 24 24" className="w-full h-full text-slate-400 fill-current p-2">
                 <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
               </svg>
            </div>
            <div className="text-center max-w-lg">
              <p className="text-slate-600 font-medium mb-2">Hey, I'm Manny. 👋</p>
              <p className="text-sm text-slate-500 leading-relaxed">
                I built <span className="font-bold text-orange-500">tohug.me</span> on a weekend because I was tired of getting newsletters I never signed up for. This service is free, runs on solar energy (mostly), and I promise not to be evil.
              </p>
            </div>
            <div className="flex flex-wrap justify-center gap-4 mt-2">
              <a href="#" className="flex items-center gap-2 text-xs font-bold text-slate-600 hover:text-slate-900 bg-white px-3 py-2 rounded-lg border border-slate-200 hover:border-slate-300 transition-all">
                <Github size={14} /> View Code
              </a>
              <a href="#" className="flex items-center gap-2 text-xs font-bold text-slate-600 hover:text-slate-900 bg-white px-3 py-2 rounded-lg border border-slate-200 hover:border-slate-300 transition-all">
                <Coffee size={14} /> Buy me a coffee
              </a>
            </div>
          </div>
        </div>

      </main>

      {/* Footer */}
      <footer className="py-8 text-center text-slate-400 text-xs font-medium bg-[#FDF8F0] border-t border-orange-100 px-6">
        <p>© 2025 tohug.me • Made with <Heart size={10} className="inline text-red-400 fill-red-400" /> by Manny</p>
      </footer>
    </div>
  );
}