import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, addDoc, serverTimestamp } from 'firebase/firestore';

// --- FIREBASE CONFIGURATION ---
// These globals are provided by the environment
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'neural-guard-default';

export default function App() {
  const [user, setUser] = useState(null);
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState({ loading: false, success: false, error: null });

  // 1. Initialize Authentication (Rule 3)
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Auth failed", err);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // 2. Handle Form Submission
  const handleSubscribe = async (e) => {
    e.preventDefault();
    if (!user) {
      setStatus({ ...status, error: "Authentication not ready. Please try again." });
      return;
    }
    
    setStatus({ loading: true, success: false, error: null });

    try {
      // Save to Public Data (Rule 1)
      const signupRef = collection(db, 'artifacts', appId, 'public', 'data', 'newsletter_signups');
      await addDoc(signupRef, {
        email: email,
        timestamp: serverTimestamp(),
        userId: user.uid
      });
      
      setStatus({ loading: false, success: true, error: null });
      setEmail('');
    } catch (err) {
      setStatus({ loading: false, success: false, error: "Submission failed. Please try again." });
      console.error(err);
    }
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans selection:bg-indigo-500/30">
      {/* Navigation */}
      <nav className="fixed w-full z-50 bg-slate-950/80 backdrop-blur-md border-b border-white/5 top-0">
        <div className="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center shadow-lg shadow-indigo-500/20">
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-7.535 5.353a1 1 0 011.415 0 2.5 2.5 0 003.24 0 1 1 0 111.414 1.414 4.5 4.5 0 01-6.069 0 1 1 0 010-1.414z" clipRule="evenodd" />
              </svg>
            </div>
            <span className="font-bold text-xl tracking-tight text-white">Neural Guard</span>
          </div>
          <div className="hidden md:flex space-x-8 text-sm font-medium">
            <a href="#mission" className="hover:text-indigo-400 transition">Mission</a>
            <a href="#approach" className="hover:text-indigo-400 transition">Our Approach</a>
            <a href="#join" className="hover:text-indigo-400 transition">Sign Up</a>
          </div>
          <button className="bg-indigo-600 hover:bg-indigo-500 text-white px-5 py-2 rounded-full text-sm font-bold transition shadow-lg shadow-indigo-600/20">
            Get Involved
          </button>
        </div>
      </nav>

      {/* Hero Section */}
      <header className="relative pt-40 pb-24 overflow-hidden bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-indigo-900/20 via-slate-950 to-slate-950">
        <div className="max-w-5xl mx-auto px-6 text-center relative z-10">
          <div className="inline-block px-4 py-1.5 mb-6 border border-indigo-500/30 bg-indigo-500/10 rounded-full">
            <span className="text-indigo-400 text-xs font-bold tracking-widest uppercase">Guarding Human Potential</span>
          </div>
          <h1 className="text-5xl md:text-7xl font-extrabold text-white mb-8 tracking-tight leading-[1.1]">
            Don't Lose Your <br />
            <span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-cyan-400">Cognitive Strength</span>
          </h1>
          <p className="text-xl text-slate-400 mb-12 max-w-2xl mx-auto leading-relaxed">
            Neural Guard Institute teaches you to use AI as an extension of your mind, not a replacement for your brain. Master the art of <strong>Augmentation</strong>.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-6">
            <a href="#join" className="bg-white text-slate-950 px-10 py-4 rounded-2xl font-bold hover:bg-indigo-50 transition-all transform hover:-translate-y-1">
              Join the Institute
            </a>
            <a href="#approach" className="bg-slate-900 text-white border border-slate-800 px-10 py-4 rounded-2xl font-bold hover:bg-slate-800 transition-all">
              See the Methodology
            </a>
          </div>
        </div>
      </header>

      {/* Mission Section */}
      <section id="mission" className="py-32 border-t border-white/5">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-20 items-center">
            <div className="space-y-8">
              <h2 className="text-3xl font-bold text-white leading-tight">The Decline of Human Reasoning</h2>
              <p className="text-slate-400 text-lg leading-relaxed">
                As AI adoption accelerates, we face a silent crisis: <strong>Cognitive Atrophy</strong>. Just as GPS weakened our sense of direction and cell phones replaced our memory, generative AI is replacing our ability to think, reason, and create.
              </p>
              <div className="space-y-4">
                <div className="flex gap-4 p-4 rounded-2xl bg-slate-900/50 border border-slate-800">
                  <div className="text-indigo-500 font-bold text-xl">01.</div>
                  <p className="text-slate-300">Total automation leads to the weakening of creative neural pathways.</p>
                </div>
                <div className="flex gap-4 p-4 rounded-2xl bg-slate-900/50 border border-slate-800">
                  <div className="text-indigo-500 font-bold text-xl">02.</div>
                  <p className="text-slate-300">Prompt-based creation "Write me a story" bypasses human logic entirely.</p>
                </div>
              </div>
            </div>
            <div className="relative">
              <div className="absolute -inset-4 bg-indigo-500/10 blur-3xl rounded-full"></div>
              <div className="relative bg-slate-900 border border-slate-800 rounded-3xl p-8 shadow-2xl">
                <blockquote className="text-2xl font-medium text-white italic leading-snug">
                  "At Neural Guard Institute, we encourage everyone to use AI effectively. We are not against AI; we believe there is a responsible way to use it."
                </blockquote>
                <div className="mt-6 flex items-center space-x-3">
                  <div className="w-10 h-1 h-px bg-indigo-500"></div>
                  <span className="text-indigo-400 font-bold tracking-widest text-xs uppercase">Our Core Mission</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* The Method Section */}
      <section id="approach" className="py-32 bg-indigo-950/10">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-20">
            <h2 className="text-4xl font-bold text-white mb-6">The Storytelling Example</h2>
            <p className="text-slate-400 max-w-2xl mx-auto text-lg">
              Here is how we teach responsible AI interaction. It's the difference between being a "Prompt Operator" and a "Creative Director."
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="p-10 rounded-3xl border border-slate-800 bg-slate-900">
              <div className="w-12 h-12 bg-red-500/10 text-red-500 rounded-xl flex items-center justify-center mb-6">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </div>
              <h3 className="text-2xl font-bold text-white mb-4">Automation (Passive)</h3>
              <p className="text-slate-400 mb-6">"AI, write me a story about a detective in 1920s Paris."</p>
              <ul className="space-y-3 text-slate-500 text-sm">
                <li>• No mental effort required</li>
                <li>• Generic tropes and cliches</li>
                <li>• Your brain learns nothing</li>
              </ul>
            </div>

            <div className="p-10 rounded-3xl border border-indigo-500/30 bg-indigo-500/5 ring-1 ring-indigo-500/20">
              <div className="w-12 h-12 bg-green-500/10 text-green-500 rounded-xl flex items-center justify-center mb-6">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <h3 className="text-2xl font-bold text-white mb-4">Augmentation (Active)</h3>
              <p className="text-slate-400 mb-6">"I have a concept: A detective in Paris who can't see the color blue. Here are my character notes. Help me fix the grammar."</p>
              <ul className="space-y-3 text-slate-300 text-sm font-medium">
                <li>• Human logic drives the vision</li>
                <li>• AI handles structure and polish</li>
                <li>• Brain strengthens through iteration</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Join/Subscribe Section */}
      <section id="join" className="py-32 border-t border-white/5 bg-slate-950">
        <div className="max-w-4xl mx-auto px-6">
          <div className="bg-gradient-to-b from-indigo-600 to-indigo-800 rounded-[3rem] p-12 text-center shadow-2xl shadow-indigo-600/20 relative overflow-hidden">
            <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
              <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                <path d="M0 0 L100 0 L100 100 Z" fill="white" />
              </svg>
            </div>
            
            <h2 className="text-4xl font-bold text-white mb-6 relative">Join the Movement</h2>
            <p className="text-indigo-100 mb-10 text-lg relative max-w-xl mx-auto">
              We are building a community of "Neural Guards" who prioritize human intelligence. Get our latest guides on responsible AI use.
            </p>

            <form onSubmit={handleSubscribe} className="relative max-w-md mx-auto">
              <div className="flex flex-col sm:flex-row gap-3">
                <input
                  required
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Enter your email"
                  className="flex-1 bg-white/10 border border-white/20 rounded-2xl px-6 py-4 text-white placeholder:text-indigo-200 focus:outline-none focus:ring-2 focus:ring-white/50 transition-all"
                />
                <button
                  type="submit"
                  disabled={status.loading}
                  className="bg-white text-indigo-700 px-8 py-4 rounded-2xl font-bold hover:bg-indigo-50 transition-all disabled:opacity-50"
                >
                  {status.loading ? 'Joining...' : 'Sign Up'}
                </button>
              </div>
              
              {status.success && (
                <div className="mt-4 p-3 bg-green-500/20 text-green-100 rounded-xl text-sm border border-green-500/30">
                  Welcome to the Institute! Your data is saved.
                </div>
              )}
              {status.error && (
                <div className="mt-4 p-3 bg-red-500/20 text-red-100 rounded-xl text-sm border border-red-500/30">
                  {status.error}
                </div>
              )}
            </form>
            
            <p className="mt-8 text-xs text-indigo-200 uppercase tracking-widest font-bold">
              Your data is stored securely in our cloud database
            </p>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 border-t border-white/5 text-center">
        <div className="max-w-7xl mx-auto px-6 flex flex-col items-center">
          <div className="flex items-center space-x-2 mb-6">
            <div className="w-6 h-6 bg-indigo-600 rounded flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-white" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-7.535 5.353a1 1 0 011.415 0 2.5 2.5 0 003.24 0 1 1 0 111.414 1.414 4.5 4.5 0 01-6.069 0 1 1 0 010-1.414z" clipRule="evenodd" />
              </svg>
            </div>
            <span className="font-bold text-slate-200">Neural Guard Institute</span>
          </div>
          <p className="text-slate-500 text-sm mb-6 max-w-md">
            Dedicated to the preservation of human cognition and original creation in the age of artificial intelligence.
          </p>
          <div className="text-slate-600 text-xs flex space-x-4">
            <span>© 2025 Neural Guard Institute</span>
            <span>•</span>
            <a href="#" className="hover:text-slate-400 transition">Privacy Policy</a>
            <span>•</span>
            <a href="#" className="hover:text-slate-400 transition">Contact</a>
          </div>
        </div>
      </footer>
    </div>
  );
}