import { motion } from 'motion/react';
export default function ClientServerArchitectureDiagram() {
  return (
    <motion.div initial={{ opacity: 0, y: 24, scale: 0.97 }} animate={{ opacity: 1, y: 0, scale: 1 }} transition={{ duration: 0.7, ease: [0.25,0.1,0.25,1] as const, delay: 0.2 }} className="mt-10 mb-4">
      <div className="text-center mb-6"><span className="text-lg font-bold uppercase tracking-widest text-emerald-400" style={{ filter: 'drop-shadow(0 0 10px rgba(16,185,129,0.5))' }}>CLIENT-SERVER ARCHITECTURE</span></div>
      <svg viewBox="0 0 900 600" className="w-full max-w-6xl mx-auto" style={{ filter: 'drop-shadow(0 0 30px rgba(16,185,129,0.1))' }}>
        <defs>
          <marker id="csArrReq" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#3b82f6"/></marker>
          <marker id="csArrRes" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#10b981"/></marker>
          <linearGradient id="csHdr" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stopColor="rgba(16,185,129,0.2)"/><stop offset="100%" stopColor="rgba(16,185,129,0.05)"/></linearGradient>
        </defs>
        <rect x="20" y="10" width="860" height="44" rx="12" fill="url(#csHdr)" stroke="rgba(16,185,129,0.4)" strokeWidth="2"/>
        <text x="45" y="28" fill="#34d399" fontSize="10" fontWeight="700" fontFamily="'Inter',sans-serif">Client-Server Model:</text>
        <text x="180" y="28" fill="#6ee7b7" fontSize="9" fontFamily="'Inter',sans-serif">Distributed architecture partitioning tasks between service providers (servers) and service requesters (clients).</text>
        <text x="45" y="42" fill="#64748b" fontSize="8" fontFamily="'Inter',sans-serif">The foundation of the modern web (HTTP), email (SMTP/IMAP), and most networked applications.</text>

        {/* Clients */}
        <rect x="20" y="65" width="260" height="360" rx="12" fill="rgba(59,130,246,0.05)" stroke="rgba(59,130,246,0.3)" strokeWidth="1.5"/>
        <text x="150" y="85" textAnchor="middle" fill="#60a5fa" fontSize="11" fontWeight="800" fontFamily="'Inter',sans-serif">CLIENTS</text>
        <text x="150" y="100" textAnchor="middle" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Frontend / UI / Devices</text>
        
        {/* Mobile */}
        <rect x="110" y="130" width="80" height="120" rx="10" fill="rgba(59,130,246,0.15)" stroke="#60a5fa" strokeWidth="2"/>
        <rect x="115" y="135" width="70" height="100" rx="5" fill="rgba(15,23,42,0.8)"/>
        <circle cx="150" cy="242" r="4" fill="rgba(59,130,246,0.4)"/>
        <text x="150" y="185" textAnchor="middle" fill="#93c5fd" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Mobile App</text>
        
        {/* Laptop */}
        <path d="M 60 330 L 240 330 L 250 340 L 50 340 Z" fill="rgba(59,130,246,0.3)" stroke="#60a5fa" strokeWidth="1"/>
        <rect x="80" y="270" width="140" height="60" rx="4" fill="rgba(59,130,246,0.15)" stroke="#60a5fa" strokeWidth="2"/>
        <rect x="85" y="275" width="130" height="50" rx="2" fill="rgba(15,23,42,0.8)"/>
        <text x="150" y="305" textAnchor="middle" fill="#93c5fd" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Web Browser</text>
        
        <text x="150" y="380" textAnchor="middle" fill="#60a5fa" fontSize="8" fontFamily="'Inter',sans-serif">Initiates requests • Renders UI</text>
        <text x="150" y="395" textAnchor="middle" fill="#60a5fa" fontSize="8" fontFamily="'Inter',sans-serif">Holds state (cookies, local storage)</text>

        {/* Network / Internet */}
        <ellipse cx="450" cy="245" rx="90" ry="50" fill="rgba(148,163,184,0.05)" stroke="rgba(148,163,184,0.3)" strokeWidth="1.5" strokeDasharray="5,5"/>
        <text x="450" y="240" textAnchor="middle" fill="#cbd5e1" fontSize="10" fontWeight="700" fontFamily="'Inter',sans-serif">INTERNET / NETWORK</text>
        <text x="450" y="255" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">TCP/IP • HTTP(S) • WebSockets</text>

        {/* Arrows */}
        <path d="M 285 220 Q 360 210 420 220" fill="none" stroke="#3b82f6" strokeWidth="2" markerEnd="url(#csArrReq)"/>
        <text x="350" y="210" textAnchor="middle" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Request (GET/POST)</text>
        
        <path d="M 615 220 Q 540 210 480 220" fill="none" stroke="#3b82f6" strokeWidth="2" markerEnd="url(#csArrReq)"/>
        <text x="550" y="210" textAnchor="middle" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Request</text>
        
        <path d="M 480 270 Q 540 280 615 270" fill="none" stroke="#10b981" strokeWidth="2" markerEnd="url(#csArrRes)"/>
        <text x="550" y="288" textAnchor="middle" fill="#34d399" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Response (JSON/HTML)</text>
        
        <path d="M 420 270 Q 360 280 285 270" fill="none" stroke="#10b981" strokeWidth="2" markerEnd="url(#csArrRes)"/>
        <text x="350" y="288" textAnchor="middle" fill="#34d399" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Response (200 OK)</text>

        {/* Servers */}
        <rect x="620" y="65" width="260" height="360" rx="12" fill="rgba(16,185,129,0.05)" stroke="rgba(16,185,129,0.3)" strokeWidth="1.5"/>
        <text x="750" y="85" textAnchor="middle" fill="#10b981" fontSize="11" fontWeight="800" fontFamily="'Inter',sans-serif">SERVERS</text>
        <text x="750" y="100" textAnchor="middle" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Backend / API / Database</text>
        
        {/* Web/App Server */}
        <rect x="680" y="130" width="140" height="90" rx="8" fill="rgba(16,185,129,0.15)" stroke="#10b981" strokeWidth="2"/>
        <text x="750" y="160" textAnchor="middle" fill="#6ee7b7" fontSize="9" fontWeight="700" fontFamily="'Inter',sans-serif">Web/API Server</text>
        <text x="750" y="175" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Node.js, Go, Python</text>
        <text x="750" y="185" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Business Logic &amp; Auth</text>

        {/* Database */}
        <path d="M 690 280 Q 750 265 810 280 L 810 330 Q 750 345 690 330 Z" fill="rgba(245,158,11,0.15)" stroke="#fbbf24" strokeWidth="2"/>
        <path d="M 690 280 Q 750 295 810 280" fill="none" stroke="#fbbf24" strokeWidth="2"/>
        <text x="750" y="315" textAnchor="middle" fill="#fbbf24" fontSize="9" fontWeight="700" fontFamily="'Inter',sans-serif">Database</text>
        <text x="750" y="330" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">PostgreSQL / MongoDB</text>
        
        <path d="M 730 220 L 730 270" fill="none" stroke="#10b981" strokeWidth="1.5" strokeDasharray="4,2"/>
        <path d="M 770 270 L 770 220" fill="none" stroke="#fbbf24" strokeWidth="1.5" strokeDasharray="4,2"/>
        <text x="700" y="250" fill="#94a3b8" fontSize="6.5" fontFamily="'Inter',sans-serif">Query</text>
        <text x="775" y="250" fill="#94a3b8" fontSize="6.5" fontFamily="'Inter',sans-serif">Data</text>

        <text x="750" y="380" textAnchor="middle" fill="#10b981" fontSize="8" fontFamily="'Inter',sans-serif">Listens for requests • Processes data</text>
        <text x="750" y="395" textAnchor="middle" fill="#10b981" fontSize="8" fontFamily="'Inter',sans-serif">Centralized security &amp; storage</text>

        {/* Comparison and traits */}
        <rect x="20" y="440" width="860" height="140" rx="10" fill="rgba(15,23,42,0.4)" stroke="rgba(16,185,129,0.2)" strokeWidth="1.5"/>
        <text x="450" y="460" textAnchor="middle" fill="#e2e8f0" fontSize="10" fontWeight="800" fontFamily="'Inter',sans-serif">KEY CONCEPTS</text>
        
        {/* Tiers */}
        <rect x="40" y="475" width="250" height="85" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
        <text x="165" y="495" textAnchor="middle" fill="#34d399" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">N-Tier Architecture</text>
        <text x="50" y="515" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">• 1-Tier: Client, logic, DB on same machine</text>
        <text x="50" y="530" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">• 2-Tier: Client (Logic+UI) directly to DB</text>
        <text x="50" y="545" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">• 3-Tier: Presentation (Client) → Application (Server) → Data (DB)</text>

        {/* Characteristics */}
        <rect x="305" y="475" width="290" height="85" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
        <text x="450" y="495" textAnchor="middle" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Characteristics</text>
        <text x="315" y="515" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">✓ Separation of Concerns: UI decoupled from logic.</text>
        <text x="315" y="530" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">✓ Scalability: Can scale servers independently of clients.</text>
        <text x="315" y="545" fill="#f87171" fontSize="7.5" fontFamily="'Inter',sans-serif">✗ Single Point of Failure (if server goes down, clients fail).</text>

        {/* Stateful vs Stateless */}
        <rect x="610" y="475" width="250" height="85" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
        <text x="735" y="495" textAnchor="middle" fill="#c084fc" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">State Management</text>
        <text x="620" y="515" fill="#e2e8f0" fontSize="7.5" fontWeight="700" fontFamily="'Inter',sans-serif">Stateless (REST):</text>
        <text x="620" y="527" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Each request contains all info needed. Easier to scale.</text>
        <text x="620" y="542" fill="#e2e8f0" fontSize="7.5" fontWeight="700" fontFamily="'Inter',sans-serif">Stateful (WebSockets):</text>
        <text x="620" y="554" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Persistent connection. Server remembers client data.</text>

      </svg>
    </motion.div>
  );
}
