import React from 'react';

const AntibodyDiagram = () => {
  // Y-shaped antibody component
  const Antibody = ({ x, y, color, rotation = 0 }) => (
    <g transform={`translate(${x}, ${y}) rotate(${rotation})`}>
      {/* Stem (Fc region) */}
      <rect x="-4" y="0" width="8" height="25" fill={color} rx="2" />
      {/* Left arm (Fab region) */}
      <rect x="-25" y="-20" width="8" height="25" fill={color} rx="2" transform="rotate(-30, -4, 0)" />
      {/* Right arm (Fab region) */}
      <rect x="17" y="-20" width="8" height="25" fill={color} rx="2" transform="rotate(30, 4, 0)" />
      {/* Binding sites */}
      <circle cx="-22" cy="-18" r="5" fill={color} stroke="#fff" strokeWidth="1" />
      <circle cx="22" cy="-18" r="5" fill={color} stroke="#fff" strokeWidth="1" />
    </g>
  );

  // Antigen with epitopes
  const Antigen = ({ x, y, epitopes, colors }) => (
    <g transform={`translate(${x}, ${y})`}>
      {/* Main antigen body */}
      <ellipse cx="0" cy="0" rx="60" ry="30" fill="#e8e8e8" stroke="#999" strokeWidth="2" />
      <text x="0" y="5" textAnchor="middle" fontSize="12" fill="#666">항원 (Antigen)</text>
      {/* Epitopes */}
      {epitopes.map((ep, i) => (
        <g key={i}>
          <rect 
            x={ep.x - 8} 
            y={ep.y - 8} 
            width="16" 
            height="16" 
            fill={colors[i]} 
            rx="3"
            stroke="#fff"
            strokeWidth="1"
          />
        </g>
      ))}
    </g>
  );

  return (
    <div style={{ 
      padding: '24px', 
      backgroundColor: '#f9fafb', 
      minHeight: '100vh' 
    }}>
      <h1 style={{ 
        fontSize: '1.5rem', 
        fontWeight: 'bold', 
        textAlign: 'center', 
        marginBottom: '32px', 
        color: '#1f2937' 
      }}>
        단클론 항체 vs 다클론 항체
      </h1>
      
      <div style={{ 
        display: 'flex', 
        flexDirection: 'row', 
        gap: '32px', 
        justifyContent: 'center', 
        alignItems: 'flex-start',
        flexWrap: 'wrap'
      }}>
        {/* Monoclonal Antibodies */}
        <div style={{ 
          backgroundColor: 'white', 
          borderRadius: '12px', 
          boxShadow: '0 4px 6px rgba(0,0,0,0.1)', 
          padding: '24px', 
          flex: '1 1 0',
          maxWidth: '500px',
          minWidth: '300px'
        }}>
          <h2 style={{ 
            fontSize: '1.25rem', 
            fontWeight: '600', 
            textAlign: 'center', 
            marginBottom: '16px', 
            color: '#2563eb' 
          }}>
            단클론 항체 (Monoclonal)
          </h2>
          <svg viewBox="0 0 300 280" style={{ width: '100%', height: '256px' }}>
            {/* Antigen */}
            <Antigen 
              x={150} 
              y={220} 
              epitopes={[
                {x: -40, y: -30},
                {x: 0, y: -30},
                {x: 40, y: -30}
              ]}
              colors={['#3b82f6', '#3b82f6', '#3b82f6']}
            />
            
            {/* Identical antibodies - all blue, all same shape */}
            <Antibody x={110} y={140} color="#3b82f6" />
            <Antibody x={150} y={140} color="#3b82f6" />
            <Antibody x={190} y={140} color="#3b82f6" />
            
            {/* B cell clone */}
            <g transform="translate(150, 50)">
              <circle cx="0" cy="0" r="25" fill="#dbeafe" stroke="#3b82f6" strokeWidth="2" />
              <text x="0" y="5" textAnchor="middle" fontSize="10" fill="#3b82f6">B세포</text>
            </g>
            
            {/* Arrows from B cell */}
            <path d="M130 70 L115 115" stroke="#3b82f6" strokeWidth="2" markerEnd="url(#arrow)" />
            <path d="M150 75 L150 115" stroke="#3b82f6" strokeWidth="2" markerEnd="url(#arrow)" />
            <path d="M170 70 L185 115" stroke="#3b82f6" strokeWidth="2" markerEnd="url(#arrow)" />
            
            {/* Arrow marker definition */}
            <defs>
              <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
                <path d="M0,0 L0,6 L9,3 z" fill="#666" />
              </marker>
            </defs>
          </svg>
          
          <div style={{ 
            marginTop: '16px', 
            fontSize: '0.875rem', 
            color: '#4b5563' 
          }}>
            <p style={{ marginBottom: '8px' }}>✓ <strong>단일 B세포 클론</strong>에서 유래</p>
            <p style={{ marginBottom: '8px' }}>✓ 모든 항체가 <strong>동일한 구조</strong></p>
            <p style={{ marginBottom: '8px' }}>✓ <strong>하나의 에피토프</strong>만 인식</p>
            <p style={{ marginBottom: '8px' }}>✓ 높은 특이성 & 재현성</p>
          </div>
        </div>

        {/* Polyclonal Antibodies */}
        <div style={{ 
          backgroundColor: 'white', 
          borderRadius: '12px', 
          boxShadow: '0 4px 6px rgba(0,0,0,0.1)', 
          padding: '24px', 
          flex: '1 1 0',
          maxWidth: '500px',
          minWidth: '300px'
        }}>
          <h2 style={{ 
            fontSize: '1.25rem', 
            fontWeight: '600', 
            textAlign: 'center', 
            marginBottom: '16px', 
            color: '#9333ea' 
          }}>
            다클론 항체 (Polyclonal)
          </h2>
          <svg viewBox="0 0 300 280" style={{ width: '100%', height: '256px' }}>
            {/* Antigen with different epitopes */}
            <Antigen 
              x={150} 
              y={220} 
              epitopes={[
                {x: -40, y: -30},
                {x: 0, y: -30},
                {x: 40, y: -30}
              ]}
              colors={['#ef4444', '#22c55e', '#8b5cf6']}
            />
            
            {/* Different antibodies - different colors */}
            <Antibody x={110} y={140} color="#ef4444" />
            <Antibody x={150} y={140} color="#22c55e" />
            <Antibody x={190} y={140} color="#8b5cf6" />
            
            {/* Multiple B cell clones */}
            <g transform="translate(80, 50)">
              <circle cx="0" cy="0" r="20" fill="#fee2e2" stroke="#ef4444" strokeWidth="2" />
              <text x="0" y="4" textAnchor="middle" fontSize="8" fill="#ef4444">B세포1</text>
            </g>
            <g transform="translate(150, 40)">
              <circle cx="0" cy="0" r="20" fill="#dcfce7" stroke="#22c55e" strokeWidth="2" />
              <text x="0" y="4" textAnchor="middle" fontSize="8" fill="#22c55e">B세포2</text>
            </g>
            <g transform="translate(220, 50)">
              <circle cx="0" cy="0" r="20" fill="#ede9fe" stroke="#8b5cf6" strokeWidth="2" />
              <text x="0" y="4" textAnchor="middle" fontSize="8" fill="#8b5cf6">B세포3</text>
            </g>
            
            {/* Arrows from B cells */}
            <path d="M90 68 L105 115" stroke="#ef4444" strokeWidth="2" markerEnd="url(#arrow)" />
            <path d="M150 60 L150 115" stroke="#22c55e" strokeWidth="2" markerEnd="url(#arrow)" />
            <path d="M210 68 L195 115" stroke="#8b5cf6" strokeWidth="2" markerEnd="url(#arrow)" />
          </svg>
          
          <div style={{ 
            marginTop: '16px', 
            fontSize: '0.875rem', 
            color: '#4b5563' 
          }}>
            <p style={{ marginBottom: '8px' }}>✓ <strong>여러 B세포 클론</strong>에서 유래</p>
            <p style={{ marginBottom: '8px' }}>✓ 항체들이 <strong>서로 다른 구조</strong></p>
            <p style={{ marginBottom: '8px' }}>✓ <strong>여러 에피토프</strong>를 인식</p>
            <p style={{ marginBottom: '8px' }}>✓ 높은 민감도 (신호 증폭)</p>
          </div>
        </div>
      </div>

      {/* Legend */}
      <div style={{ 
        marginTop: '32px', 
        backgroundColor: 'white', 
        borderRadius: '12px', 
        boxShadow: '0 4px 6px rgba(0,0,0,0.1)', 
        padding: '24px', 
        maxWidth: '672px', 
        marginLeft: 'auto', 
        marginRight: 'auto' 
      }}>
        <h3 style={{ 
          fontWeight: '600', 
          marginBottom: '16px', 
          color: '#374151' 
        }}>
          범례 (Legend)
        </h3>
        <div style={{ 
          display: 'flex', 
          flexWrap: 'wrap', 
          gap: '24px', 
          justifyContent: 'center' 
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <Antibody x={20} y={25} color="#666" />
            </svg>
            <span style={{ fontSize: '0.875rem' }}>항체 (Y자 구조)</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <svg width="30" height="30">
              <ellipse cx="15" cy="15" rx="12" ry="8" fill="#e8e8e8" stroke="#999" strokeWidth="1" />
            </svg>
            <span style={{ fontSize: '0.875rem' }}>항원</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <svg width="20" height="20">
              <rect x="2" y="2" width="16" height="16" fill="#3b82f6" rx="3" />
            </svg>
            <span style={{ fontSize: '0.875rem' }}>에피토프 (항원결정기)</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AntibodyDiagram;