'use client';

import React from 'react';

// Isometric grid configuration - true 2:1 isometric projection
const CELL_WIDTH = 120;
const CELL_HEIGHT = 60; // Half of width for 2:1 isometric

// Convert grid coordinates to isometric screen coordinates
// Using standard isometric projection where x goes right-down, y goes right-up
function gridToScreen(col: number, row: number): { x: number; y: number } {
  return {
    x: (col - row) * (CELL_WIDTH / 2),
    y: (col + row) * (CELL_HEIGHT / 2),
  };
}

// Grid layout (10 columns x 8 rows)
// Energy flow: Solar/Wind (left) → Substations (center) → Transmission → City (right)
const GRID = {
  cols: 10,
  rows: 8,
};

// Infrastructure positions - precisely on grid intersections
const INFRASTRUCTURE = {
  // Solar panels (two groups)
  solar: [
    // Group 1 - bottom-left
    { col: 0, row: 5 },
    { col: 1, row: 5 },
    { col: 0, row: 6 },
    { col: 1, row: 6 },
    // Group 2 - middle-bottom
    { col: 2, row: 7 },
    { col: 3, row: 7 },
    { col: 2, row: 8 },
    { col: 3, row: 8 },
  ],
  // Wind turbines (two groups)
  wind: [
    // Group 1 - top-left
    { col: 0, row: 1 },
    { col: 1, row: 2 },
    { col: 2, row: 1 },
    // Group 2 - top-center
    { col: 3, row: 0 },
    { col: 4, row: 1 },
    { col: 5, row: 0 },
  ],
  // Substations
  substations: [
    { col: 3, row: 3, type: 'collection' }, // Main collection substation
    { col: 6, row: 4, type: 'distribution' }, // Distribution substation (right)
    { col: 5, row: 7, type: 'distribution' }, // Distribution substation (bottom-left)
  ],
  // Transmission towers (along the routes)
  towers: [
    { col: 4, row: 3 },
    { col: 5, row: 4 },
    { col: 4, row: 5 },
    { col: 5, row: 6 },
  ],
  // City/Buildings (right side)
  city: [
    { col: 8, row: 3, type: 'tall' },
    { col: 9, row: 4, type: 'medium' },
    { col: 8, row: 5, type: 'small' },
    { col: 9, row: 5, type: 'medium' },
  ],
  // City 2 (bottom-left area)
  city2: [
    { col: 6, row: 8, type: 'medium' },
    { col: 7, row: 7, type: 'tall' },
    { col: 7, row: 8, type: 'small' },
  ],
  // Trees (decorative, scattered around)
  trees: [
    { col: 0, row: 3 },
    { col: 2, row: 6 },
    { col: 3, row: 1 },
    { col: 6, row: 2 },
    { col: 6, row: 6 },
  ],
};

// Power line connections - grid-aligned paths only (no diagonals)
// Each group meets at a collection point, then flows to main substation
const POWER_LINES = [
  // === WIND GROUP 1 (top-left) - meet at (1,1) then to substation ===
  // Turbine at (0,1) → collection point (1,1)
  { from: { col: 0, row: 1 }, to: { col: 1, row: 1 } },
  // Turbine at (1,2) → up to (1,1)
  { from: { col: 1, row: 2 }, to: { col: 1, row: 1 } },
  // Turbine at (2,1) → left to (1,1)
  { from: { col: 2, row: 1 }, to: { col: 1, row: 1 } },
  // Collection point (1,1) → down to (1,3) → right to substation (3,3)
  { from: { col: 1, row: 1 }, to: { col: 1, row: 3 } },
  { from: { col: 1, row: 3 }, to: { col: 3, row: 3 } },

  // === WIND GROUP 2 (top-center) - meet at (4,1) then to substation ===
  // Turbine at (3,0) → right to (4,0) → down to (4,1)
  { from: { col: 3, row: 0 }, to: { col: 4, row: 0 } },
  { from: { col: 4, row: 0 }, to: { col: 4, row: 1 } },
  // Turbine at (4,1) is the collection point
  // Turbine at (5,0) → down to (5,1) → left to (4,1)
  { from: { col: 5, row: 0 }, to: { col: 5, row: 1 } },
  { from: { col: 5, row: 1 }, to: { col: 4, row: 1 } },
  // Collection point (4,1) → down to (4,3) → left to substation (3,3)
  { from: { col: 4, row: 1 }, to: { col: 4, row: 3 } },
  { from: { col: 4, row: 3 }, to: { col: 3, row: 3 } },

  // === SOLAR GROUP 1 (bottom-left) - meet at (1,5) then to substation ===
  // Panels at (0,5), (1,5), (0,6), (1,6) → collection at (1,5)
  { from: { col: 0, row: 5 }, to: { col: 1, row: 5 } },
  { from: { col: 0, row: 6 }, to: { col: 0, row: 5 } },
  { from: { col: 1, row: 6 }, to: { col: 1, row: 5 } },
  // Collection point (1,5) → up to (1,3) → right to substation (3,3)
  { from: { col: 1, row: 5 }, to: { col: 1, row: 3 } },

  // === SOLAR GROUP 2 (middle-bottom) - meet at (3,7) then to substation ===
  // Panels at (2,7), (3,7), (2,8), (3,8) → collection at (3,7)
  { from: { col: 2, row: 7 }, to: { col: 3, row: 7 } },
  { from: { col: 2, row: 8 }, to: { col: 2, row: 7 } },
  { from: { col: 3, row: 8 }, to: { col: 3, row: 7 } },
  // Collection point (3,7) → up to (3,3) substation
  { from: { col: 3, row: 7 }, to: { col: 3, row: 5 } },
  { from: { col: 3, row: 5 }, to: { col: 3, row: 3 } },

  // === MAIN TRANSMISSION: Substation (3,3) → Towers → Distribution → City ===
  // Substation to first tower
  { from: { col: 3, row: 3 }, to: { col: 4, row: 3 } },
  // First tower to second tower (grid-aligned)
  { from: { col: 4, row: 3 }, to: { col: 5, row: 3 } },
  { from: { col: 5, row: 3 }, to: { col: 5, row: 4 } },
  // Second tower to distribution substation (right)
  { from: { col: 5, row: 4 }, to: { col: 6, row: 4 } },
  // Distribution to city 1 (grid-aligned)
  { from: { col: 6, row: 4 }, to: { col: 7, row: 4 } },
  { from: { col: 7, row: 4 }, to: { col: 8, row: 4 } },
  // Branch to buildings (city 1)
  { from: { col: 8, row: 4 }, to: { col: 8, row: 3 } },
  { from: { col: 8, row: 4 }, to: { col: 8, row: 5 } },
  { from: { col: 8, row: 3 }, to: { col: 9, row: 3 } },
  { from: { col: 9, row: 3 }, to: { col: 9, row: 4 } },
  { from: { col: 8, row: 5 }, to: { col: 9, row: 5 } },

  // === SECOND ROUTE: Substation (3,3) → Towers → Distribution (5,7) → City 2 ===
  // Branch from main substation down
  { from: { col: 3, row: 3 }, to: { col: 3, row: 5 } },
  { from: { col: 3, row: 5 }, to: { col: 4, row: 5 } },
  // Tower at (4,5) to tower at (5,6)
  { from: { col: 4, row: 5 }, to: { col: 5, row: 5 } },
  { from: { col: 5, row: 5 }, to: { col: 5, row: 6 } },
  // Tower to distribution substation (bottom-left)
  { from: { col: 5, row: 6 }, to: { col: 5, row: 7 } },
  // Distribution to city 2
  { from: { col: 5, row: 7 }, to: { col: 6, row: 7 } },
  { from: { col: 6, row: 7 }, to: { col: 6, row: 8 } },
  { from: { col: 6, row: 7 }, to: { col: 7, row: 7 } },
  { from: { col: 7, row: 7 }, to: { col: 7, row: 8 } },
];

export default function HeroIllustration() {
  return (
    <div className="absolute inset-0 z-0 overflow-hidden bg-primary">
      <svg
        viewBox="-400 -200 1800 1100"
        className="w-full h-full opacity-40 md:opacity-100 scale-150 md:scale-100 translate-x-1/4 md:translate-x-0"
        preserveAspectRatio="xMidYMid slice"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          {/* Electric energy flow gradient */}
          <linearGradient id="energy-pulse" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#82ed20" stopOpacity="0" />
            <stop offset="30%" stopColor="#82ed20" stopOpacity="0.6" />
            <stop offset="50%" stopColor="#9bf14d" stopOpacity="1" />
            <stop offset="70%" stopColor="#82ed20" stopOpacity="0.6" />
            <stop offset="100%" stopColor="#82ed20" stopOpacity="0" />
          </linearGradient>

          {/* Wind flow gradient */}
          <linearGradient id="wind-flow" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="white" stopOpacity="0" />
            <stop offset="30%" stopColor="white" stopOpacity="0.4" />
            <stop offset="50%" stopColor="white" stopOpacity="0.6" />
            <stop offset="70%" stopColor="white" stopOpacity="0.4" />
            <stop offset="100%" stopColor="white" stopOpacity="0" />
          </linearGradient>

          {/* Sun ray gradient */}
          <linearGradient id="sun-ray" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#FFD700" stopOpacity="0.6" />
            <stop offset="50%" stopColor="#FFD700" stopOpacity="0.3" />
            <stop offset="100%" stopColor="#82ed20" stopOpacity="0.1" />
          </linearGradient>

          {/* Glow filter */}
          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="3" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>

          {/* Soft glow for nodes */}
          <filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
            <feGaussianBlur stdDeviation="2" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>

          {/* Sun glow filter */}
          <filter id="sun-glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="4" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>

        {/* Main scene container - positioned to the right */}
        <g transform="translate(900, 100)">
          
          {/* === ISOMETRIC GRID === */}
          <g opacity="0.15">
            {/* Horizontal grid lines (going from top-left to bottom-right) */}
            {[...Array(GRID.rows + 1)].map((_, row) => {
              const start = gridToScreen(0, row);
              const end = gridToScreen(GRID.cols, row);
              return (
                <line
                  key={`h-${row}`}
                  x1={start.x}
                  y1={start.y}
                  x2={end.x}
                  y2={end.y}
                  stroke="white"
                  strokeWidth="1"
                />
              );
            })}
            {/* Vertical grid lines (going from top-right to bottom-left) */}
            {[...Array(GRID.cols + 1)].map((_, col) => {
              const start = gridToScreen(col, 0);
              const end = gridToScreen(col, GRID.rows);
              return (
                <line
                  key={`v-${col}`}
                  x1={start.x}
                  y1={start.y}
                  x2={end.x}
                  y2={end.y}
                  stroke="white"
                  strokeWidth="1"
                />
              );
            })}
          </g>

          {/* Grid intersection nodes */}
          <g opacity="0.2">
            {[...Array(GRID.cols + 1)].map((_, col) =>
              [...Array(GRID.rows + 1)].map((_, row) => {
                const pos = gridToScreen(col, row);
                return (
                  <circle
                    key={`node-${col}-${row}`}
                    cx={pos.x}
                    cy={pos.y}
                    r="2"
                    fill="white"
                  />
                );
              })
            )}
          </g>

          {/* === POWER LINES (Base cables) === */}
          <g stroke="white" strokeWidth="2" strokeOpacity="0.25">
            {POWER_LINES.map((line, i) => {
              const from = gridToScreen(line.from.col, line.from.row);
              const to = gridToScreen(line.to.col, line.to.row);
              return (
                <line
                  key={`cable-${i}`}
                  x1={from.x}
                  y1={from.y}
                  x2={to.x}
                  y2={to.y}
                />
              );
            })}
          </g>

          {/* === ANIMATED ENERGY FLOW === */}
          <g filter="url(#glow)">
            {POWER_LINES.map((line, i) => {
              const from = gridToScreen(line.from.col, line.from.row);
              const to = gridToScreen(line.to.col, line.to.row);
              const length = Math.sqrt(
                Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2)
              );
              return (
                <line
                  key={`flow-${i}`}
                  x1={from.x}
                  y1={from.y}
                  x2={to.x}
                  y2={to.y}
                  stroke="url(#energy-pulse)"
                  strokeWidth="3"
                  strokeLinecap="round"
                  strokeDasharray={`${length * 0.2} ${length * 0.8}`}
                >
                  <animate
                    attributeName="stroke-dashoffset"
                    from={length}
                    to={0}
                    dur={`${1.5 + (i % 3) * 0.5}s`}
                    repeatCount="indefinite"
                  />
                </line>
              );
            })}
          </g>

          {/* === SOLAR PANELS === */}
          {INFRASTRUCTURE.solar.map((panel, i) => {
            const pos = gridToScreen(panel.col, panel.row);
            return (
              <g key={`solar-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                {/* Panel base */}
                <path
                  d="M -20 0 L 0 -10 L 20 0 L 0 10 Z"
                  fill="white"
                  fillOpacity="0.1"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.4"
                />
                {/* Panel surface (tilted) */}
                <path
                  d="M -15 -5 L 0 -15 L 15 -5 L 0 5 Z"
                  fill="white"
                  fillOpacity="0.15"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.5"
                />
                {/* Panel grid lines */}
                <line x1="-7" y1="-10" x2="7" y2="0" stroke="white" strokeWidth="0.5" strokeOpacity="0.3" />
                <line x1="0" y1="-15" x2="0" y2="5" stroke="white" strokeWidth="0.5" strokeOpacity="0.3" />
                {/* Connection glow */}
                <circle r="4" fill="#82ed20" fillOpacity="0.4" filter="url(#soft-glow)">
                  <animate attributeName="fillOpacity" values="0.3;0.6;0.3" dur="2s" repeatCount="indefinite" />
                </circle>
              </g>
            );
          })}

          {/* === WIND TURBINES === */}
          {INFRASTRUCTURE.wind.map((turbine, i) => {
            const pos = gridToScreen(turbine.col, turbine.row);
            return (
              <g key={`wind-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                {/* Base */}
                <ellipse cx="0" cy="0" rx="10" ry="5" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
                {/* Tower */}
                <line x1="0" y1="0" x2="0" y2="-60" stroke="white" strokeWidth="2" strokeOpacity="0.5" />
                {/* Nacelle */}
                <ellipse cx="0" cy="-60" rx="6" ry="3" fill="white" fillOpacity="0.3" stroke="white" strokeWidth="1" />
                {/* Blades */}
                <g transform="translate(0, -60)">
                  {[0, 120, 240].map((angle, j) => (
                    <line
                      key={`blade-${i}-${j}`}
                      x1="0"
                      y1="0"
                      x2="0"
                      y2="-30"
                      stroke="white"
                      strokeWidth="1.5"
                      strokeOpacity="0.6"
                      transform={`rotate(${angle})`}
                    >
                      <animateTransform
                        attributeName="transform"
                        type="rotate"
                        from={`${angle} 0 0`}
                        to={`${angle + 360} 0 0`}
                        dur={`${3 + i}s`}
                        repeatCount="indefinite"
                      />
                    </line>
                  ))}
                  <circle r="3" fill="white" fillOpacity="0.4" />
                </g>
                {/* Connection glow */}
                <circle r="5" fill="#82ed20" fillOpacity="0.4" filter="url(#soft-glow)">
                  <animate attributeName="fillOpacity" values="0.3;0.6;0.3" dur="2.5s" repeatCount="indefinite" />
                </circle>
              </g>
            );
          })}

          {/* === SUBSTATIONS === */}
          {INFRASTRUCTURE.substations.map((sub, i) => {
            const pos = gridToScreen(sub.col, sub.row);
            const isCollection = sub.type === 'collection';
            return (
              <g key={`substation-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                {/* Base platform */}
                <path
                  d="M -25 0 L 0 -12 L 25 0 L 0 12 Z"
                  fill="white"
                  fillOpacity="0.1"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.4"
                />
                {/* Building */}
                <path
                  d={isCollection 
                    ? "M -18 0 L -18 -20 L 0 -32 L 18 -20 L 18 0"
                    : "M -22 0 L -22 -25 L 0 -37 L 22 -25 L 22 0"
                  }
                  fill="white"
                  fillOpacity="0.08"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.5"
                />
                {/* Equipment */}
                <rect x="-10" y="-12" width="6" height="8" fill="white" fillOpacity="0.2" stroke="white" strokeWidth="0.5" />
                <rect x="4" y="-12" width="6" height="8" fill="white" fillOpacity="0.2" stroke="white" strokeWidth="0.5" />
                {/* Insulators */}
                <line x1="-7" y1="-12" x2="-7" y2="-22" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
                <line x1="7" y1="-12" x2="7" y2="-22" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
                <circle cx="-7" cy="-22" r="2" fill="white" fillOpacity="0.4" />
                <circle cx="7" cy="-22" r="2" fill="white" fillOpacity="0.4" />
                {/* Connection glow */}
                <circle r="8" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
                  <animate attributeName="r" values="6;10;6" dur="3s" repeatCount="indefinite" />
                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite" />
                </circle>
              </g>
            );
          })}

          {/* === TRANSMISSION TOWERS === */}
          {INFRASTRUCTURE.towers.map((tower, i) => {
            const pos = gridToScreen(tower.col, tower.row);
            return (
              <g key={`tower-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                {/* Base */}
                <ellipse cx="0" cy="0" rx="8" ry="4" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
                {/* Tower legs */}
                <path d="M -6 0 L -3 -45 M 6 0 L 3 -45" stroke="white" strokeWidth="1.5" strokeOpacity="0.5" />
                {/* Cross braces */}
                <path d="M -5 -10 L 5 -10 M -4 -20 L 4 -20 M -3 -30 L 3 -30 M -3 -45 L 3 -45" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
                {/* Cross arms */}
                <line x1="-12" y1="-40" x2="12" y2="-40" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
                <line x1="-10" y1="-32" x2="10" y2="-32" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
                {/* Insulators */}
                <circle cx="-10" cy="-40" r="1.5" fill="white" fillOpacity="0.4" />
                <circle cx="10" cy="-40" r="1.5" fill="white" fillOpacity="0.4" />
                {/* Connection glow */}
                <circle r="5" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite" />
                </circle>
              </g>
            );
          })}

          {/* === CITY BUILDINGS === */}
          {INFRASTRUCTURE.city.map((building, i) => {
            const pos = gridToScreen(building.col, building.row);
            const heights = { tall: 70, medium: 45, small: 30 };
            const height = heights[building.type as keyof typeof heights];
            return (
              <g key={`building-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                {/* Base */}
                <path
                  d="M -12 0 L 0 -6 L 12 0 L 0 6 Z"
                  fill="white"
                  fillOpacity="0.1"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.3"
                />
                {/* Building front */}
                <path
                  d={`M -12 0 L -12 -${height} L 0 -${height + 6} L 0 -6 Z`}
                  fill="white"
                  fillOpacity="0.1"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.4"
                />
                {/* Building side */}
                <path
                  d={`M 0 -6 L 0 -${height + 6} L 12 -${height} L 12 0 Z`}
                  fill="white"
                  fillOpacity="0.05"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.3"
                />
                {/* Windows */}
                {[...Array(Math.floor(height / 15))].map((_, w) => (
                  <g key={`window-${i}-${w}`}>
                    <rect x="-9" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
                    <rect x="-4" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
                    <rect x="3" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
                    <rect x="7" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
                  </g>
                ))}
                {/* Connection glow */}
                <circle r="4" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur={`${2 + i * 0.3}s`} repeatCount="indefinite" />
                </circle>
              </g>
            );
          })}

          {/* === CITY 2 BUILDINGS (bottom-left) === */}
          {INFRASTRUCTURE.city2.map((building, i) => {
            const pos = gridToScreen(building.col, building.row);
            const heights = { tall: 70, medium: 45, small: 30 };
            const height = heights[building.type as keyof typeof heights];
            return (
              <g key={`building2-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                {/* Base */}
                <path
                  d="M -12 0 L 0 -6 L 12 0 L 0 6 Z"
                  fill="white"
                  fillOpacity="0.1"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.3"
                />
                {/* Building front */}
                <path
                  d={`M -12 0 L -12 -${height} L 0 -${height + 6} L 0 -6 Z`}
                  fill="white"
                  fillOpacity="0.1"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.4"
                />
                {/* Building side */}
                <path
                  d={`M 0 -6 L 0 -${height + 6} L 12 -${height} L 12 0 Z`}
                  fill="white"
                  fillOpacity="0.05"
                  stroke="white"
                  strokeWidth="1"
                  strokeOpacity="0.3"
                />
                {/* Windows */}
                {[...Array(Math.floor(height / 15))].map((_, w) => (
                  <g key={`window2-${i}-${w}`}>
                    <rect x="-9" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
                    <rect x="-4" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
                    <rect x="3" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
                    <rect x="7" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
                  </g>
                ))}
                {/* Connection glow */}
                <circle r="4" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur={`${2.5 + i * 0.3}s`} repeatCount="indefinite" />
                </circle>
              </g>
            );
          })}

          {/* === TREES === */}
          {INFRASTRUCTURE.trees.map((tree, i) => {
            const pos = gridToScreen(tree.col, tree.row);
            return (
              <g key={`tree-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                {/* Trunk */}
                <line x1="0" y1="0" x2="0" y2="-15" stroke="white" strokeWidth="2" strokeOpacity="0.3" />
                {/* Foliage - layered circles for tree crown */}
                <ellipse cx="0" cy="-22" rx="10" ry="8" fill="white" fillOpacity="0.12" stroke="white" strokeWidth="0.5" strokeOpacity="0.2" />
                <ellipse cx="-5" cy="-26" rx="7" ry="6" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="0.5" strokeOpacity="0.15" />
                <ellipse cx="5" cy="-26" rx="7" ry="6" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="0.5" strokeOpacity="0.15" />
                <ellipse cx="0" cy="-30" rx="6" ry="5" fill="white" fillOpacity="0.08" stroke="white" strokeWidth="0.5" strokeOpacity="0.1" />
              </g>
            );
          })}

          {/* === ABSTRACT WIND EFFECTS === */}
          {INFRASTRUCTURE.wind.map((turbine, i) => {
            const pos = gridToScreen(turbine.col, turbine.row);
            return (
              <g key={`wind-effect-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                {/* Wind swoosh lines - curved paths flowing toward turbine */}
                {[0, 1, 2].map((j) => (
                  <path
                    key={`wind-line-${i}-${j}`}
                    d={`M ${-80 - j * 15} ${-70 - j * 8} Q ${-50 - j * 10} ${-65 - j * 5} ${-20} ${-60}`}
                    stroke="url(#wind-flow)"
                    strokeWidth="2"
                    fill="none"
                    strokeLinecap="round"
                    opacity="0"
                  >
                    <animate
                      attributeName="opacity"
                      values="0;0.6;0"
                      dur={`${2 + j * 0.5}s`}
                      begin={`${j * 0.7 + i * 0.3}s`}
                      repeatCount="indefinite"
                    />
                    <animate
                      attributeName="stroke-dashoffset"
                      from="100"
                      to="0"
                      dur={`${2 + j * 0.5}s`}
                      begin={`${j * 0.7 + i * 0.3}s`}
                      repeatCount="indefinite"
                    />
                  </path>
                ))}
                {/* Additional wind particles */}
                {[0, 1, 2, 3].map((j) => (
                  <circle
                    key={`wind-particle-${i}-${j}`}
                    r="1.5"
                    fill="white"
                    opacity="0"
                  >
                    <animate
                      attributeName="cx"
                      values={`${-70 - j * 10};${-10}`}
                      dur={`${1.5 + j * 0.3}s`}
                      begin={`${j * 0.4 + i * 0.2}s`}
                      repeatCount="indefinite"
                    />
                    <animate
                      attributeName="cy"
                      values={`${-75 - j * 5};${-60}`}
                      dur={`${1.5 + j * 0.3}s`}
                      begin={`${j * 0.4 + i * 0.2}s`}
                      repeatCount="indefinite"
                    />
                    <animate
                      attributeName="opacity"
                      values="0;0.5;0"
                      dur={`${1.5 + j * 0.3}s`}
                      begin={`${j * 0.4 + i * 0.2}s`}
                      repeatCount="indefinite"
                    />
                  </circle>
                ))}
              </g>
            );
          })}

          {/* === SCHEMATIC SUN RAYS === */}
          {/* Simple downward rays above each solar panel */}
          {INFRASTRUCTURE.solar.map((panel, i) => {
            const pos = gridToScreen(panel.col, panel.row);
            return (
              <g key={`sun-ray-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
                {/* Three short schematic rays coming down to panel */}
                {[-8, 0, 8].map((offset, j) => (
                  <line
                    key={`ray-${i}-${j}`}
                    x1={offset}
                    y1={-45}
                    x2={offset * 0.3}
                    y2={-18}
                    stroke="#FFD700"
                    strokeWidth="1.5"
                    strokeOpacity="0.4"
                    strokeLinecap="round"
                    strokeDasharray="4 6"
                  >
                    <animate
                      attributeName="strokeOpacity"
                      values="0.2;0.5;0.2"
                      dur={`${2 + j * 0.3}s`}
                      begin={`${i * 0.2}s`}
                      repeatCount="indefinite"
                    />
                    <animate
                      attributeName="stroke-dashoffset"
                      from="10"
                      to="0"
                      dur="1.5s"
                      repeatCount="indefinite"
                    />
                  </line>
                ))}
              </g>
            );
          })}

          {/* === ENERGY PARTICLES === */}
          {POWER_LINES.map((line, i) => {
            const from = gridToScreen(line.from.col, line.from.row);
            const to = gridToScreen(line.to.col, line.to.row);
            return (
              <circle
                key={`particle-${i}`}
                r="3"
                fill="#82ed20"
                filter="url(#soft-glow)"
              >
                <animate
                  attributeName="cx"
                  values={`${from.x};${to.x}`}
                  dur={`${1 + (i % 4) * 0.3}s`}
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="cy"
                  values={`${from.y};${to.y}`}
                  dur={`${1 + (i % 4) * 0.3}s`}
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="opacity"
                  values="0;0.8;0"
                  dur={`${1 + (i % 4) * 0.3}s`}
                  repeatCount="indefinite"
                />
              </circle>
            );
          })}

        </g>
      </svg>
      <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-primary/90" />
    </div>
  );
}