import React, { useState } from 'react';
import { 
  Network, 
  Waves, 
  Users, 
  Scale, 
  HeartHandshake, 
  Leaf, 
  ArrowRight, 
  Globe2, 
  Mail,
  CheckCircle2
} from 'lucide-react';

const App = () => {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [email, setEmail] = useState('');

  const handleJoinSubmit = (e) => {
    e.preventDefault();
    if(email) {
      setIsSubmitted(true);
      // In a real app, this would POST to a backend database
    }
  };

  return (
    <div className="min-h-screen bg-stone-50 text-stone-800 font-sans selection:bg-teal-200 selection:text-teal-900">
      
      {/* Navigation */}
      <nav className="fixed w-full z-50 bg-stone-50/90 backdrop-blur-md border-b border-stone-200">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Network className="text-teal-700 h-8 w-8" />
            <span className="text-xl font-semibold tracking-tight text-stone-900">
              ImprovingCitizenParticipation<span className="text-teal-700">.org</span>
            </span>
          </div>
          <div className="hidden md:flex items-center gap-8 text-sm font-medium">
            <a href="#philosophy" className="text-stone-600 hover:text-teal-700 transition-colors">The Philosophy</a>
            <a href="#sumocracy" className="text-stone-600 hover:text-teal-700 transition-colors">Sumocracy</a>
            <a href="#tools" className="text-stone-600 hover:text-teal-700 transition-colors">Relational Tools</a>
            <a 
              href="https://summanitism.org" 
              target="_blank" 
              rel="noopener noreferrer"
              className="flex items-center gap-1 text-teal-700 hover:text-teal-800"
            >
              Summanitism.org <Globe2 className="w-4 h-4" />
            </a>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <header className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
        <div className="absolute inset-0 z-0">
          <div className="absolute top-0 left-1/4 w-96 h-96 bg-teal-100/50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob"></div>
          <div className="absolute top-0 right-1/4 w-96 h-96 bg-amber-100/50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-2000"></div>
          <div className="absolute -bottom-8 left-1/2 w-96 h-96 bg-stone-200/50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-4000"></div>
        </div>
        
        <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-8">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-teal-50 border border-teal-100 text-teal-800 text-sm font-medium">
            <Waves className="w-4 h-4" />
            <span>Moving from 50%+1 to the Sum of Us</span>
          </div>
          <h1 className="text-5xl lg:text-7xl font-bold tracking-tight text-stone-900 leading-[1.1]">
            Democracy should process <span className="text-transparent bg-clip-text bg-gradient-to-r from-teal-700 to-amber-700">human meaning.</span>
          </h1>
          <p className="text-xl text-stone-600 max-w-2xl mx-auto leading-relaxed">
            The era of atomic, polarized majorities is failing. We are pioneering <strong>Sumocracy</strong>—a relational governance model where power circulates, citizens act as stewards, and democracy harmonizes energies rather than just counting them.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
            <a href="#join" className="px-8 py-4 bg-teal-800 hover:bg-teal-900 text-white rounded-xl font-medium transition-all shadow-lg hover:shadow-xl w-full sm:w-auto">
              Become a Steward
            </a>
            <a href="https://summanitism.org" target="_blank" rel="noopener noreferrer" className="px-8 py-4 bg-white border border-stone-200 hover:border-stone-300 text-stone-700 rounded-xl font-medium transition-all shadow-sm w-full sm:w-auto flex items-center justify-center gap-2">
              Read the Manifesto <ArrowRight className="w-4 h-4" />
            </a>
          </div>
        </div>
      </header>

      {/* The Crisis & The Paradigm Shift */}
      <section id="philosophy" className="py-20 bg-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-16 items-center">
            <div className="space-y-6">
              <h2 className="text-3xl font-bold text-stone-900">The Limits of the Ballot Box</h2>
              <p className="text-lg text-stone-600 leading-relaxed">
                Institutions survive only as long as they are able to relate. Current democratic practices rely too heavily on logic, law, and leverage. They manage competing interests but fail to build the relational grounding necessary for lasting agreements.
              </p>
              <p className="text-lg text-stone-600 leading-relaxed">
                When democracy ends at the ballot box, a 51% majority gets to dominate the 49%. This creates societal viscosity, friction, and polarization. 
              </p>
            </div>
            <div className="bg-stone-50 p-8 rounded-3xl border border-stone-100 shadow-sm relative overflow-hidden">
              <div className="absolute top-0 right-0 w-32 h-32 bg-amber-100/50 rounded-bl-full -z-0"></div>
              <h3 className="text-2xl font-semibold text-stone-900 mb-4 relative z-10">The Summanitist Answer</h3>
              <p className="text-stone-600 mb-6 relative z-10">
                Summanitism proposes a shift toward <strong>Deep Democracy</strong>. Instead of just winning the argument, we must build circles of collective inquiry, experience, and action.
              </p>
              <ul className="space-y-4 relative z-10">
                <li className="flex items-start gap-3">
                  <CheckCircle2 className="w-6 h-6 text-teal-600 shrink-0" />
                  <span className="text-stone-700">From polarization to a <strong>politics of addition</strong>.</span>
                </li>
                <li className="flex items-start gap-3">
                  <CheckCircle2 className="w-6 h-6 text-teal-600 shrink-0" />
                  <span className="text-stone-700">From consumer-citizens to <strong>impact investors</strong> in the public good.</span>
                </li>
                <li className="flex items-start gap-3">
                  <CheckCircle2 className="w-6 h-6 text-teal-600 shrink-0" />
                  <span className="text-stone-700">From power accumulation to <strong>power circulation</strong>.</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Relational Governance Tools */}
      <section id="sumocracy" className="py-24 bg-stone-900 text-stone-50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16 space-y-4">
            <h2 className="text-4xl font-bold text-white">The Architecture of Sumocracy</h2>
            <p className="text-xl text-stone-400">
              Transforming governance from command-and-control to connect-and-care. We champion practical frameworks to process meaning, not just votes.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {/* Card 1 */}
            <div className="bg-stone-800 p-8 rounded-2xl border border-stone-700 hover:border-teal-500 transition-colors group">
              <div className="w-14 h-14 bg-stone-700 rounded-xl flex items-center justify-center mb-6 group-hover:bg-teal-900 transition-colors">
                <HeartHandshake className="w-7 h-7 text-teal-400" />
              </div>
              <h3 className="text-xl font-semibold text-white mb-3">Quadratic Voting (QV)</h3>
              <p className="text-stone-400 text-sm leading-relaxed mb-4">
                Standard "one person, one vote" fails to capture how much someone cares. QV allocates "voice credits," allowing citizens to express the <em>intensity</em> of their preference, protecting minority interests without rigid quotas.
              </p>
            </div>

            {/* Card 2 */}
            <div className="bg-stone-800 p-8 rounded-2xl border border-stone-700 hover:border-teal-500 transition-colors group">
              <div className="w-14 h-14 bg-stone-700 rounded-xl flex items-center justify-center mb-6 group-hover:bg-teal-900 transition-colors">
                <Network className="w-7 h-7 text-teal-400" />
              </div>
              <h3 className="text-xl font-semibold text-white mb-3">Liquid Democracy</h3>
              <p className="text-stone-400 text-sm leading-relaxed mb-4">
                The Web of Trust. Citizens can vote directly or delegate their vote to a trusted proxy (e.g., an ecologist for environmental policy). Unlike 4-year terms, this delegation can be revoked instantly, keeping proxies strictly accountable.
              </p>
            </div>

            {/* Card 3 */}
            <div className="bg-stone-800 p-8 rounded-2xl border border-stone-700 hover:border-teal-500 transition-colors group">
              <div className="w-14 h-14 bg-stone-700 rounded-xl flex items-center justify-center mb-6 group-hover:bg-teal-900 transition-colors">
                <Users className="w-7 h-7 text-teal-400" />
              </div>
              <h3 className="text-xl font-semibold text-white mb-3">Sortition & Assemblies</h3>
              <p className="text-stone-400 text-sm leading-relaxed mb-4">
                For highly polarized moral issues, we draft a statistically representative sample of the population. Provided with expert testimony and facilitated dialogue, these assemblies create long-term, non-partisan decisions that serve the "sum".
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Integration to Summanitism */}
      <section id="join" className="py-24 bg-teal-800 relative overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <svg className="h-full w-full" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="grid-pattern" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M0 40L40 0H20L0 20M40 40V20L20 40" stroke="currentColor" strokeWidth="1" fill="none" />
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#grid-pattern)" />
          </svg>
        </div>
        
        <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
          <Scale className="w-16 h-16 mx-auto mb-6 text-teal-200" />
          <h2 className="text-4xl md:text-5xl font-bold mb-6">Become a Weaver of the Sum</h2>
          <p className="text-xl text-teal-100 mb-10 max-w-2xl mx-auto">
            Improving citizen participation is just one thread. The broader movement requires reshaping how we relate to economics, technology, nature, and each other. 
          </p>
          
          {!isSubmitted ? (
            <div className="bg-white/10 backdrop-blur-md border border-white/20 p-8 rounded-3xl max-w-md mx-auto shadow-2xl">
              <h3 className="text-2xl font-semibold mb-2">Join the Network</h3>
              <p className="text-teal-100 text-sm mb-6">Enter your email to receive updates and be channeled into the global Summanitism alliance.</p>
              <form onSubmit={handleJoinSubmit} className="space-y-4 text-left">
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-teal-100 mb-1">Email Address</label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-teal-700/50" />
                    <input 
                      type="email" 
                      id="email"
                      required
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="w-full pl-10 pr-4 py-3 bg-white text-stone-900 rounded-xl focus:ring-2 focus:ring-amber-500 focus:outline-none shadow-inner" 
                      placeholder="steward@example.com"
                    />
                  </div>
                </div>
                <div>
                  <label htmlFor="interest" className="block text-sm font-medium text-teal-100 mb-1">Area of Interest</label>
                  <select id="interest" className="w-full px-4 py-3 bg-white text-stone-900 rounded-xl focus:ring-2 focus:ring-amber-500 focus:outline-none shadow-inner">
                    <option>Governance & Sumocracy</option>
                    <option>Relational Economy & Harberger Taxes</option>
                    <option>Community & Architecture</option>
                    <option>Relational AI & Technology</option>
                  </select>
                </div>
                <button type="submit" className="w-full py-3 bg-amber-500 hover:bg-amber-600 text-amber-950 font-bold rounded-xl transition-colors shadow-lg">
                  Connect Me
                </button>
              </form>
            </div>
          ) : (
            <div className="bg-white p-10 rounded-3xl max-w-md mx-auto shadow-2xl text-stone-900 transform transition-all">
              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle2 className="w-8 h-8 text-green-600" />
              </div>
              <h3 className="text-2xl font-bold mb-2">Welcome, Suman.</h3>
              <p className="text-stone-600 mb-6">
                Your intention to relate has been registered. We are weaving you into the network. 
              </p>
              <p className="text-sm font-medium text-stone-800 mb-4">To continue your journey into the foundational philosophy, visit our core alliance:</p>
              <a 
                href="https://summanitism.org" 
                target="_blank" 
                rel="noopener noreferrer"
                className="inline-flex items-center justify-center gap-2 w-full py-3 bg-teal-800 hover:bg-teal-900 text-white font-bold rounded-xl transition-colors shadow-md"
              >
                Go to Summanitism.org <ArrowRight className="w-5 h-5" />
              </a>
            </div>
          )}
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-stone-50 border-t border-stone-200 pt-16 pb-8">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-8 mb-12">
            <div className="col-span-2 space-y-4">
              <div className="flex items-center gap-2">
                <Leaf className="text-teal-700 h-6 w-6" />
                <span className="text-lg font-bold text-stone-900">ImprovingCitizenParticipation</span>
              </div>
              <p className="text-sm text-stone-500 max-w-sm">
                A project dedicated to the practical implementation of Sumocracy. Moving humanity from the tyranny of the atomic individual to the sovereignty of the relational web.
              </p>
            </div>
            <div>
              <h4 className="font-semibold text-stone-900 mb-4">Core Concepts</h4>
              <ul className="space-y-2 text-sm text-stone-600">
                <li><a href="#sumocracy" className="hover:text-teal-700">Sumocracy</a></li>
                <li><a href="#sumocracy" className="hover:text-teal-700">Liquid Democracy</a></li>
                <li><a href="#sumocracy" className="hover:text-teal-700">Quadratic Voting</a></li>
                <li><a href="#sumocracy" className="hover:text-teal-700">Sortition</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-stone-900 mb-4">The Alliance</h4>
              <ul className="space-y-2 text-sm text-stone-600">
                <li>
                  <a href="https://summanitism.org" target="_blank" rel="noopener noreferrer" className="hover:text-teal-700 font-medium flex items-center gap-1">
                    Summanitism.org <Globe2 className="w-3 h-3" />
                  </a>
                </li>
                <li><a href="#" className="hover:text-teal-700">Global Relational Academy</a></li>
                <li><a href="#" className="hover:text-teal-700">Impact Fund</a></li>
                <li><a href="#" className="hover:text-teal-700">Manifesto</a></li>
              </ul>
            </div>
          </div>
          <div className="border-t border-stone-200 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
            <p className="text-sm text-stone-500">
              © 2026 Improving Citizen Participation. Aligned with the principles of Summanitism.
            </p>
            <div className="flex items-center gap-4 text-sm font-medium">
              <span className="text-stone-400 italic">"We survive by relating."</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;