import React, { useState } from 'react';

const MicroVillageConcept = () => {
  const [selectedCluster, setSelectedCluster] = useState(null);
  
  const clusters = [
    { id: 1, name: "Maple Grove", units: 7, x: 180, y: 120 },
    { id: 2, name: "Oak Hollow", units: 7, x: 380, y: 100 },
    { id: 3, name: "Birch Landing", units: 7, x: 580, y: 140 },
    { id: 4, name: "Pine Ridge", units: 8, x: 140, y: 300 },
    { id: 5, name: "Cedar Walk", units: 7, x: 340, y: 320 },
    { id: 6, name: "Willow Bend", units: 7, x: 540, y: 340 },
    { id: 7, name: "Aspen Court", units: 7, x: 340, y: 500 },
  ];

  const stats = {
    totalUnits: 50,
    sqftPerUnit: 960,
    clustersCount: 7,
    solarCapacity: "850 kW",
    aquaponicsUnits: 7,
    permacultureAcres: 12,
    totalAcreage: 45
  };

  return (
    <div className="min-h-screen bg-slate-900 text-white p-6">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold bg-gradient-to-r from-cyan-400 to-emerald-400 bg-clip-text text-transparent mb-2">
            Town Woods Regenerative Village
          </h1>
          <p className="text-slate-400">50 Units • 7 Clusters • Net-Positive Energy • Integrated Aquaponics</p>
        </div>

        {/* Main Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          
          {/* Site Map */}
          <div className="lg:col-span-2 bg-slate-800/50 rounded-xl p-4 border border-slate-700">
            <h2 className="text-sm font-mono text-cyan-400 mb-4 uppercase tracking-wider">Site Concept • ~45 Acres</h2>
            
            <svg viewBox="0 0 750 650" className="w-full h-auto">
              {/* Background - wooded area */}
              <defs>
                <pattern id="trees" patternUnits="userSpaceOnUse" width="30" height="30">
                  <circle cx="15" cy="15" r="8" fill="#1a3d2e" opacity="0.4"/>
                </pattern>
                <linearGradient id="solarGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stopColor="#3b82f6"/>
                  <stop offset="100%" stopColor="#8b5cf6"/>
                </linearGradient>
                <linearGradient id="aquaGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stopColor="#00d9ff"/>
                  <stop offset="100%" stopColor="#00ff88"/>
                </linearGradient>
              </defs>
              
              {/* Site boundary */}
              <rect x="20" y="20" width="710" height="610" rx="20" fill="url(#trees)" stroke="#22c55e" strokeWidth="2" strokeDasharray="8,4"/>
              
              {/* Solar Farm Area */}
              <rect x="580" y="480" width="130" height="130" rx="8" fill="url(#solarGrad)" opacity="0.3" stroke="#3b82f6" strokeWidth="2"/>
              <text x="645" y="530" textAnchor="middle" fill="#3b82f6" fontSize="11" fontWeight="bold">SOLAR</text>
              <text x="645" y="545" textAnchor="middle" fill="#3b82f6" fontSize="9">850 kW</text>
              <text x="645" y="560" textAnchor="middle" fill="#94a3b8" fontSize="8">~6 acres</text>
              
              {/* Main path/road */}
              <path d="M 100 60 Q 200 200 340 320 Q 480 440 650 600" stroke="#64748b" strokeWidth="12" fill="none" strokeLinecap="round" opacity="0.3"/>
              <path d="M 100 60 Q 200 200 340 320 Q 480 440 650 600" stroke="#94a3b8" strokeWidth="3" fill="none" strokeLinecap="round" strokeDasharray="15,10"/>
              
              {/* Permaculture food forest */}
              <ellipse cx="100" cy="480" rx="70" ry="100" fill="#22c55e" opacity="0.15" stroke="#22c55e" strokeWidth="1"/>
              <text x="100" y="470" textAnchor="middle" fill="#22c55e" fontSize="10" fontWeight="bold">FOOD</text>
              <text x="100" y="485" textAnchor="middle" fill="#22c55e" fontSize="10" fontWeight="bold">FOREST</text>
              <text x="100" y="500" textAnchor="middle" fill="#94a3b8" fontSize="8">12 acres</text>
              
              {/* Community Hub */}
              <rect x="290" y="270" width="100" height="100" rx="50" fill="#ff6b35" opacity="0.2" stroke="#ff6b35" strokeWidth="2"/>
              <text x="340" y="315" textAnchor="middle" fill="#ff6b35" fontSize="10" fontWeight="bold">COMMUNITY</text>
              <text x="340" y="330" textAnchor="middle" fill="#ff6b35" fontSize="10" fontWeight="bold">HUB</text>
              
              {/* Housing Clusters */}
              {clusters.map((cluster) => (
                <g key={cluster.id} 
                   onClick={() => setSelectedCluster(selectedCluster === cluster.id ? null : cluster.id)}
                   className="cursor-pointer">
                  {/* Cluster circle */}
                  <circle 
                    cx={cluster.x} 
                    cy={cluster.y} 
                    r={selectedCluster === cluster.id ? 55 : 45}
                    fill={selectedCluster === cluster.id ? "rgba(0, 217, 255, 0.2)" : "rgba(255, 255, 255, 0.05)"}
                    stroke={selectedCluster === cluster.id ? "#00d9ff" : "#64748b"}
                    strokeWidth={selectedCluster === cluster.id ? 3 : 1}
                  />
                  
                  {/* Housing units (small squares) */}
                  {[...Array(cluster.units)].map((_, i) => {
                    const angle = (i / cluster.units) * 2 * Math.PI - Math.PI/2;
                    const radius = 28;
                    const ux = cluster.x + Math.cos(angle) * radius;
                    const uy = cluster.y + Math.sin(angle) * radius;
                    return (
                      <rect 
                        key={i}
                        x={ux - 6} 
                        y={uy - 6} 
                        width="12" 
                        height="12" 
                        rx="2"
                        fill="#f59e0b"
                        opacity="0.8"
                      />
                    );
                  })}
                  
                  {/* Aquaponics container (center) */}
                  <rect 
                    x={cluster.x - 10} 
                    y={cluster.y - 5} 
                    width="20" 
                    height="10" 
                    rx="2"
                    fill="url(#aquaGrad)"
                  />
                  
                  {/* Cluster name */}
                  <text 
                    x={cluster.x} 
                    y={cluster.y + 60} 
                    textAnchor="middle" 
                    fill="#f0f4f8" 
                    fontSize="9"
                    fontWeight="500"
                  >
                    {cluster.name}
                  </text>
                  <text 
                    x={cluster.x} 
                    y={cluster.y + 72} 
                    textAnchor="middle" 
                    fill="#94a3b8" 
                    fontSize="8"
                  >
                    {cluster.units} units
                  </text>
                </g>
              ))}
              
              {/* Legend */}
              <g transform="translate(30, 560)">
                <rect x="0" y="0" width="180" height="70" rx="8" fill="rgba(0,0,0,0.5)"/>
                <rect x="15" y="15" width="12" height="12" rx="2" fill="#f59e0b"/>
                <text x="35" y="25" fill="#f0f4f8" fontSize="9">Triple Trio Unit (960 sf)</text>
                <rect x="15" y="35" width="20" height="10" rx="2" fill="url(#aquaGrad)"/>
                <text x="45" y="43" fill="#f0f4f8" fontSize="9">Aquaponics Container</text>
                <circle cx="21" y="57" r="6" fill="rgba(255,255,255,0.1)" stroke="#64748b"/>
                <text x="35" y="60" fill="#f0f4f8" fontSize="9">Housing Cluster</text>
              </g>
            </svg>
          </div>

          {/* Stats Panel */}
          <div className="space-y-4">
            {/* Key Numbers */}
            <div className="bg-slate-800/50 rounded-xl p-4 border border-slate-700">
              <h2 className="text-sm font-mono text-cyan-400 mb-4 uppercase tracking-wider">Development Stats</h2>
              <div className="grid grid-cols-2 gap-3">
                <div className="bg-slate-900/50 rounded-lg p-3 border-t-2 border-amber-500">
                  <div className="text-2xl font-bold text-amber-400">{stats.totalUnits}</div>
                  <div className="text-xs text-slate-400">Total Units</div>
                </div>
                <div className="bg-slate-900/50 rounded-lg p-3 border-t-2 border-blue-500">
                  <div className="text-2xl font-bold text-blue-400">{stats.solarCapacity}</div>
                  <div className="text-xs text-slate-400">Solar Capacity</div>
                </div>
                <div className="bg-slate-900/50 rounded-lg p-3 border-t-2 border-cyan-500">
                  <div className="text-2xl font-bold text-cyan-400">{stats.aquaponicsUnits}</div>
                  <div className="text-xs text-slate-400">Aquaponics Units</div>
                </div>
                <div className="bg-slate-900/50 rounded-lg p-3 border-t-2 border-emerald-500">
                  <div className="text-2xl font-bold text-emerald-400">{stats.permacultureAcres}</div>
                  <div className="text-xs text-slate-400">Permaculture Acres</div>
                </div>
              </div>
            </div>

            {/* Cluster Detail */}
            <div className="bg-slate-800/50 rounded-xl p-4 border border-slate-700">
              <h2 className="text-sm font-mono text-cyan-400 mb-3 uppercase tracking-wider">Each Cluster Includes</h2>
              <ul className="space-y-2 text-sm">
                <li className="flex items-start gap-2">
                  <span className="text-amber-400">→</span>
                  <span className="text-slate-300">7-8 Triple Trio homes (960 sf each)</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-cyan-400">→</span>
                  <span className="text-slate-300">1 shared aquaponics container</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-emerald-400">→</span>
                  <span className="text-slate-300">Community garden plots</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-purple-400">→</span>
                  <span className="text-slate-300">Shared tool shed & gathering space</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-blue-400">→</span>
                  <span className="text-slate-300">EV charging stations</span>
                </li>
              </ul>
            </div>

            {/* Energy Flow */}
            <div className="bg-gradient-to-br from-slate-800/50 to-blue-900/20 rounded-xl p-4 border border-blue-500/30">
              <h2 className="text-sm font-mono text-blue-400 mb-3 uppercase tracking-wider">Energy Model</h2>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-400">Solar Production</span>
                  <span className="text-blue-400 font-mono">850 kW</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-400">Community Demand</span>
                  <span className="text-amber-400 font-mono">~500 kW</span>
                </div>
                <div className="flex justify-between border-t border-slate-700 pt-2 mt-2">
                  <span className="text-emerald-400 font-medium">Net Surplus</span>
                  <span className="text-emerald-400 font-mono font-bold">+350 kW</span>
                </div>
                <p className="text-xs text-slate-500 mt-2">
                  Excess powers aquaponics, community hub, and sells to grid for revenue
                </p>
              </div>
            </div>

            {/* Food Production */}
            <div className="bg-gradient-to-br from-slate-800/50 to-emerald-900/20 rounded-xl p-4 border border-emerald-500/30">
              <h2 className="text-sm font-mono text-emerald-400 mb-3 uppercase tracking-wider">Food Production</h2>
              <div className="space-y-2 text-sm text-slate-300">
                <p><span className="text-cyan-400 font-bold">7 aquaponics containers</span> = ~2,000 lbs fish + 15,000 lbs greens/year</p>
                <p><span className="text-emerald-400 font-bold">12-acre food forest</span> = Fruit, nuts, perennial vegetables</p>
                <p className="text-xs text-slate-500 mt-2">
                  Each household gets weekly produce share + fish allocation
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Section - The Pitch */}
        <div className="mt-6 bg-gradient-to-r from-cyan-500/10 to-emerald-500/10 rounded-xl p-6 border border-cyan-500/30">
          <h2 className="text-lg font-bold text-cyan-400 mb-3">The Pitch: "Living Infrastructure"</h2>
          <div className="grid md:grid-cols-3 gap-4 text-sm">
            <div>
              <h3 className="text-amber-400 font-semibold mb-1">For Residents</h3>
              <p className="text-slate-400">Net-zero energy bills, weekly fresh food share, community ownership model, walkable cluster design</p>
            </div>
            <div>
              <h3 className="text-blue-400 font-semibold mb-1">For Devens/MassDev</h3>
              <p className="text-slate-400">50 housing units toward 2035 goals, R&D classification, innovative demonstration project, national model</p>
            </div>
            <div>
              <h3 className="text-emerald-400 font-semibold mb-1">For Funders</h3>
              <p className="text-slate-400">Stacks USDA ag + housing programs, REAP solar credits, Community Facilities, and affordable housing incentives</p>
            </div>
          </div>
        </div>

        <p className="text-center text-slate-500 text-xs mt-6">Click any cluster to highlight • Town Woods Concept v1</p>
      </div>
    </div>
  );
};

export default MicroVillageConcept;