import React, { useState, useEffect } from 'react';
import { Settings, Wind, RefreshCw, Trash2, ArrowRight, Gauge, Info, Zap } from 'lucide-react';

const App = () => {
  const [isSpinning, setIsSpinning] = useState(false);
  const [isAirOn, setIsAirOn] = useState(false);

  // 미생물 이모지 데이터
  const microbes = [
    '🙂', '😊', '🦠', '😃', '🌿', '🙂', '🦠', '😊', 
    '🙂', '😃', '🌿', '🦠', '😊', '🙂', '🦠'
  ];

  // 음식물 입자 데이터
  const foodParticles = [
    { color: 'bg-orange-600', size: 'w-4 h-4 md:w-6 md:h-6', rounded: 'rounded-lg', top: '20%', left: '20%' },
    { color: 'bg-green-700', size: 'w-3 h-3 md:w-4 md:h-4', rounded: 'rounded-full', top: '15%', left: '15%' },
    { color: 'bg-yellow-600', size: 'w-3 h-3 md:w-5 md:h-5', rounded: 'rounded-sm', top: '40%', left: '60%' },
    { color: 'bg-red-800', size: 'w-2 h-2 md:w-3 md:h-3', rounded: 'rounded-full', top: '60%', left: '30%' },
    { color: 'bg-amber-700', size: 'w-4 h-4 md:w-5 md:h-5', rounded: 'rounded-md', top: '30%', left: '70%' },
    { color: 'bg-orange-400', size: 'w-2 h-2 md:w-3 md:h-3', rounded: 'rounded-full', top: '50%', left: '80%' },
    { color: 'bg-green-800', size: 'w-3 h-3 md:w-4 md:h-4', rounded: 'rounded-lg', top: '25%', left: '40%' },
    { color: 'bg-brown-600', size: 'w-3 h-3 md:w-4 md:h-4', rounded: 'rounded-none', top: '55%', left: '10%' },
  ];

  // 흙 입자 데이터 (작은 점들) - useMemo 대신 컴포넌트 내부 상수로 정의하여 리렌더링 시 위치 유지
  const [soilParticles] = useState(() => [...Array(25)].map(() => ({
    top: `${Math.random() * 80 + 10}%`,
    left: `${Math.random() * 90 + 5}%`,
    size: Math.random() > 0.5 ? 'w-1 h-1' : 'w-1.5 h-1.5',
    opacity: Math.random() * 0.5 + 0.2
  })));

  // 공기 방울 데이터
  const [bubbles] = useState(() => [...Array(20)].map(() => ({
    left: `${Math.random() * 90 + 5}%`,
    animationDuration: `${2 + Math.random() * 2}s`,
    animationDelay: `${Math.random() * 2}s`
  })));

  return (
    <div className="flex flex-col items-center p-3 md:p-8 bg-slate-50 min-h-screen font-sans text-slate-800 selection:bg-emerald-100">
      
      {/* 커스텀 애니메이션 정의 */}
      <style>
        {`
          @keyframes swayRise {
            0% { transform: translateY(0) translateX(0); opacity: 0; }
            20% { opacity: 0.8; }
            50% { transform: translateY(-100px) translateX(10px); opacity: 0.8; }
            75% { transform: translateY(-200px) translateX(-10px); opacity: 0.6; }
            100% { transform: translateY(-300px) translateX(0); opacity: 0; }
          }
          .animate-sway-rise {
            animation: swayRise 3s infinite ease-in-out;
          }

          @keyframes mixing {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(10px, -10px) rotate(45deg); }
            50% { transform: translate(0, -20px) rotate(90deg); }
            75% { transform: translate(-10px, -10px) rotate(45deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
          }
          
          @keyframes chaosMix {
            0% { transform: translate(0, 0) rotate(0deg) scale(1); }
            33% { transform: translate(15px, -30px) rotate(120deg) scale(1.1); }
            66% { transform: translate(-15px, -15px) rotate(240deg) scale(0.9); }
            100% { transform: translate(0, 0) rotate(360deg) scale(1); }
          }
          
          @keyframes bladeSpin {
            0% { transform: translateY(-50%) rotate(0deg); }
            100% { transform: translateY(-50%) rotate(360deg); }
          }

          @keyframes nozzlePulse {
            0%, 100% { transform: scale(1.2); box-shadow: 0 0 10px rgba(56,189,248,0.8); }
            50% { transform: scale(1.5); box-shadow: 0 0 20px rgba(56,189,248,1); }
          }

          .animate-mixing {
            animation: chaosMix 4s infinite linear;
          }
          .animate-mixing-slow {
            animation: mixing 5s infinite ease-in-out;
          }
          .animate-blade-spin {
            animation: bladeSpin 2s infinite linear;
          }
          .animate-nozzle-pulse {
            animation: nozzlePulse 1.5s infinite ease-in-out;
          }
          
          /* 스크롤바 숨기기 (크롬, 사파리, 오페라) */
          .no-scrollbar::-webkit-scrollbar {
            display: none;
          }
          /* 스크롤바 숨기기 (IE, 엣지, 파이어폭스) */
          .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
          }
        `}
      </style>

      <div className="max-w-6xl w-full bg-white rounded-2xl md:rounded-3xl shadow-xl md:shadow-2xl overflow-hidden border border-slate-200">
        
        {/* 헤더 섹션: 모바일에서는 세로 배치, 데스크탑에서는 가로 배치 */}
        <div className="bg-emerald-700 p-4 md:p-6 text-white flex flex-col md:flex-row justify-between items-center gap-4">
          <div className="w-full md:w-auto text-center md:text-left">
            <h1 className="text-xl md:text-3xl font-bold tracking-tight break-keep flex items-center justify-center md:justify-start gap-2">
              <Zap className="text-yellow-300 w-5 h-5 md:w-8 md:h-8" />
              바이오 리액터
              <span className="opacity-70 text-sm md:text-lg font-normal block md:inline md:ml-2">System</span>
            </h1>
            <p className="text-emerald-100 text-xs md:text-sm opacity-90 mt-1">하단 가로형 통합 구동축 시스템 개념도</p>
          </div>
          
          {/* 컨트롤 버튼 그룹: 모바일에서 버튼이 꽉 차도록 flex-1 사용 */}
          <div className="flex w-full md:w-auto gap-2 md:gap-3">
            <button 
              onClick={() => setIsSpinning(!isSpinning)}
              className={`flex-1 md:flex-none flex items-center justify-center gap-1.5 md:gap-2 px-4 py-3 md:px-6 rounded-xl md:rounded-full font-bold transition-all transform active:scale-95 text-sm md:text-base shadow-sm ${
                isSpinning 
                  ? 'bg-amber-400 text-amber-900 shadow-amber-200 ring-2 ring-amber-200 ring-offset-2 ring-offset-emerald-700' 
                  : 'bg-emerald-800 text-emerald-100 hover:bg-emerald-900 hover:shadow-lg'
              }`}
            >
              <RefreshCw size={18} className={`md:w-5 md:h-5 ${isSpinning ? 'animate-spin' : ''}`} />
              <span>교반기 {isSpinning ? 'ON' : 'OFF'}</span>
            </button>
            
            <button 
              onClick={() => setIsAirOn(!isAirOn)}
              className={`flex-1 md:flex-none flex items-center justify-center gap-1.5 md:gap-2 px-4 py-3 md:px-6 rounded-xl md:rounded-full font-bold transition-all transform active:scale-95 text-sm md:text-base shadow-sm ${
                isAirOn 
                  ? 'bg-sky-400 text-sky-900 shadow-sky-200 ring-2 ring-sky-200 ring-offset-2 ring-offset-emerald-700' 
                  : 'bg-emerald-800 text-emerald-100 hover:bg-emerald-900 hover:shadow-lg'
              }`}
            >
              <Wind size={18} className={`md:w-5 md:h-5 ${isAirOn ? 'animate-pulse' : ''}`} />
              <span>공기 {isAirOn ? 'ON' : 'OFF'}</span>
            </button>
          </div>
        </div>

        <div className="p-3 md:p-8 flex flex-col gap-6 md:gap-8 bg-slate-50/50">
          
          {/* 메인 애니메이션 영역 */}
          <div className="relative w-full bg-gradient-to-b from-slate-200 to-slate-300 rounded-2xl md:rounded-3xl p-2 md:p-12 border-b-4 md:border-b-8 border-slate-400 shadow-inner overflow-hidden min-h-[400px] md:min-h-[500px]">
            
            {/* 상부: 투입구 공간 가이드 */}
            <div className="absolute top-0 left-0 w-full h-8 md:h-10 bg-slate-300 border-b-2 border-slate-400 flex items-center justify-center shadow-sm z-10">
              <span className="text-[10px] md:text-xs font-bold text-slate-600 uppercase tracking-widest flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-slate-500 animate-pulse"></span>
                Waste Input Area
              </span>
            </div>

            {/* 메인 챔버: 미생물 처리 공간 (배경) */}
            <div className="absolute inset-x-2 md:inset-x-8 top-12 md:top-16 bottom-24 md:bottom-32 bg-stone-800 rounded-xl shadow-2xl overflow-hidden border-2 border-stone-700">
              
              {/* 내부 조명 효과 (그라디언트) */}
              <div className="absolute inset-0 bg-gradient-to-b from-black/20 to-transparent pointer-events-none z-10"></div>
              
              {/* 공기 기포 애니메이션 */}
              {isAirOn && (
                <div className="absolute inset-0 z-0 pointer-events-none">
                  {bubbles.map((bubble, i) => (
                    <div 
                      key={i} 
                      className="absolute bottom-0 w-1.5 md:w-2 h-1.5 md:h-2 bg-sky-300/80 rounded-full animate-sway-rise blur-[1px]"
                      style={{ 
                        left: bubble.left, 
                        animationDuration: bubble.animationDuration,
                        animationDelay: bubble.animationDelay 
                      }}
                    ></div>
                  ))}
                </div>
              )}

              {/* 미생물 캐릭터 및 음식물, 흙 입자 분포 */}
              <div className="relative z-0 w-full h-full p-4 md:p-10">
                  
                 {/* 흙 입자 (배경 효과) */}
                 {soilParticles.map((particle, idx) => (
                   <div
                     key={`soil-${idx}`}
                     className={`absolute bg-stone-500 rounded-full transition-all duration-1000 ${particle.size}`}
                     style={{
                       top: particle.top,
                       left: particle.left,
                       opacity: particle.opacity,
                       transform: isSpinning ? `translate(${Math.sin(idx)*10}px, ${Math.cos(idx)*10}px)` : 'none'
                     }}
                   ></div>
                 ))}

                 {/* 미생물 이모지 - 반응형 그리드 배치 느낌 */}
                 <div className="flex flex-wrap justify-around items-center h-full content-center gap-1 md:gap-4 pointer-events-none opacity-90">
                   {microbes.map((emoji, idx) => (
                     <div 
                       key={idx} 
                       className={`text-2xl md:text-4xl p-1 select-none transition-all duration-1000 transform ${isSpinning ? 'animate-mixing' : ''}`}
                       style={{ 
                         animationDelay: `${idx * 0.15}s`,
                         animationDuration: `${3 + Math.random()}s`,
                         filter: 'drop-shadow(0 2px 2px rgba(0,0,0,0.5))'
                       }}
                     >
                       {emoji}
                     </div>
                   ))}
                 </div>
                 
                 {/* 움직이는 음식물 입자 */}
                 {foodParticles.map((item, idx) => (
                   <div 
                     key={idx}
                     className={`absolute ${item.size} ${item.color} ${item.rounded} shadow-lg opacity-90 border border-black/10 transition-all duration-1000 ${isSpinning ? 'animate-mixing' : ''}`}
                     style={{
                       top: item.top,
                       left: item.left,
                       animationDelay: `${idx * 0.3}s`,
                       animationDuration: `${2.5 + Math.random()}s`
                     }}
                   ></div>
                 ))}
              </div>

              {/* 하단 가로형 통합 장치 (메인 관) */}
              <div className="absolute bottom-0 left-0 w-full h-20 md:h-28 bg-stone-900 border-t-4 border-stone-700 flex items-center justify-center px-2 md:px-10 z-20 shadow-[0_-5px_15px_rgba(0,0,0,0.5)]">
                
                {/* 메인 가로축 관 */}
                <div className="relative w-full h-8 md:h-12 bg-gradient-to-r from-slate-600 via-slate-500 to-slate-600 rounded-full flex items-center shadow-inner border border-slate-600">
                  
                  {/* 교반 날개들 */}
                  {[...Array(6)].map((_, i) => (
                    <div 
                      key={i} 
                      className={`absolute w-1.5 md:w-2 h-16 md:h-24 -mt-8 md:-mt-12 bg-slate-400/90 rounded-full flex justify-center items-start shadow-lg ${isSpinning ? 'animate-blade-spin' : 'transition-transform duration-700'}`}
                      style={{ 
                        left: `${15 + i * 14}%`, 
                        top: '50%',
                        // 애니메이션 딜레이를 주어 날개들이 서로 다른 타이밍에 회전하게 함 (짝수/홀수 엇박)
                        animationDelay: isSpinning ? `${(i % 2) * -1}s` : '0s',
                        // 회전 중일 때는 CSS animation이 transform을 제어하도록 undefined 설정
                        transform: isSpinning ? undefined : `translateY(-50%) rotate(${i % 2 === 0 ? 0 : 180}deg)`,
                        transformOrigin: 'center center'
                      }}
                    >
                      {/* 날개 끝부분 디테일 */}
                      <div className="w-5 md:w-8 h-1.5 md:h-2 bg-slate-300 rounded-full absolute top-0 shadow-sm"></div>
                      <div className="w-5 md:w-8 h-1.5 md:h-2 bg-slate-300 rounded-full absolute bottom-0 shadow-sm"></div>
                    </div>
                  ))}
                  
                  {/* 하단 공기 노즐 */}
                  <div className="flex justify-around w-full px-4 md:px-8 absolute top-1/2 -translate-y-1/2">
                    {[...Array(8)].map((_, i) => (
                      <div 
                        key={i} 
                        className={`w-1.5 h-1.5 md:w-2.5 md:h-2.5 rounded-full transition-all duration-300 ${
                          isAirOn 
                            ? 'bg-sky-400 animate-nozzle-pulse' 
                            : 'bg-slate-800'
                        }`}
                        style={{
                          animationDelay: isAirOn ? `${i * 0.1}s` : '0s'
                        }}
                      ></div>
                    ))}
                  </div>
                </div>

                {/* 구동 모터부 */}
                <div className="absolute right-3 md:right-8 w-12 h-12 md:w-20 md:h-20 bg-gradient-to-br from-indigo-600 to-indigo-800 rounded-xl md:rounded-2xl flex items-center justify-center border-2 md:border-4 border-indigo-400 shadow-2xl z-30">
                  <Settings className={`text-white/90 ${isSpinning ? 'animate-spin' : ''}`} strokeWidth={1.5} style={{ width: '60%', height: '60%' }} />
                </div>
              </div>
            </div>

            {/* 라벨링 가이드 */}
            <div className="absolute bottom-3 md:bottom-6 left-0 w-full px-4 flex flex-wrap justify-center gap-x-4 gap-y-2 text-[10px] md:text-xs font-bold text-slate-500">
               <div className="flex items-center gap-1.5 bg-white/50 px-2 py-1 rounded-full backdrop-blur-sm"><div className="w-2 h-2 md:w-3 md:h-3 bg-indigo-600 rounded-sm"></div> 구동 모터</div>
               <div className="flex items-center gap-1.5 bg-white/50 px-2 py-1 rounded-full backdrop-blur-sm"><div className="w-2 h-1 md:w-3 md:h-1 bg-slate-400"></div> 통합 교반축</div>
               <div className="flex items-center gap-1.5 bg-white/50 px-2 py-1 rounded-full backdrop-blur-sm"><div className="w-2 h-2 md:w-3 md:h-3 bg-sky-400 rounded-full"></div> 공기 노즐</div>
            </div>
          </div>

          {/* 하단 상세 설명 그리드: 모바일 1열, 데스크탑 3열 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
            <div className="bg-white p-5 md:p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
              <div className="flex items-center gap-3 mb-2 md:mb-3 text-amber-600">
                <div className="p-2 bg-amber-50 rounded-lg">
                  <RefreshCw size={20} className="md:w-6 md:h-6" />
                </div>
                <h3 className="font-bold text-base md:text-lg">교반 시스템</h3>
              </div>
              <p className="text-sm text-slate-600 leading-relaxed break-keep">
                가로 회전축이 바닥면의 음식물을 끊임없이 섞어줍니다. 사각지대 없는 강력한 혼합으로 미생물 분해 효율을 극대화합니다.
              </p>
            </div>

            <div className="bg-white p-5 md:p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
              <div className="flex items-center gap-3 mb-2 md:mb-3 text-sky-600">
                <div className="p-2 bg-sky-50 rounded-lg">
                  <Wind size={20} className="md:w-6 md:h-6" />
                </div>
                <h3 className="font-bold text-base md:text-lg">공기 주입</h3>
              </div>
              <p className="text-sm text-slate-600 leading-relaxed break-keep">
                하단 노즐에서 산소를 직접 미세 분사하여 호기성 미생물에게 최적의 환경을 제공하고 악취 발생을 원천 차단합니다.
              </p>
            </div>

            <div className="bg-white p-5 md:p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
              <div className="flex items-center gap-3 mb-2 md:mb-3 text-emerald-600">
                <div className="p-2 bg-emerald-50 rounded-lg">
                  <Gauge size={20} className="md:w-6 md:h-6" />
                </div>
                <h3 className="font-bold text-base md:text-lg">바이오 리액터</h3>
              </div>
              <p className="text-sm text-slate-600 leading-relaxed break-keep">
                물리적 교반과 산소 공급이 결합되어 단순 퇴비함을 넘어선 고효율 미생물 배양기 역할을 수행하여 처리 속도를 높입니다.
              </p>
            </div>
          </div>
        </div>

        {/* 프로세스 플로우바: 모바일에서 가로 스크롤 가능하도록 설정 */}
        <div className="bg-slate-50 p-4 md:p-6 border-t border-slate-200">
          <div className="flex justify-start md:justify-center overflow-x-auto no-scrollbar pb-2 md:pb-0">
            <div className="flex items-center gap-2 md:gap-4 min-w-max px-2">
              <div className="flex items-center gap-2 px-3 py-2 bg-white rounded-lg shadow-sm border border-slate-200">
                <Trash2 size={14} className="md:w-4 md:h-4 text-slate-400" />
                <span className="text-xs md:text-sm font-bold text-slate-600">투입</span>
              </div>
              <ArrowRight size={14} className="md:w-4 md:h-4 text-slate-300" />
              
              <div className={`flex items-center gap-2 px-3 py-2 rounded-lg shadow-sm border transition-colors duration-500 ${isSpinning ? 'bg-amber-50 border-amber-200 ring-1 ring-amber-200' : 'bg-white border-slate-200'}`}>
                <RefreshCw size={14} className={`md:w-4 md:h-4 ${isSpinning ? 'text-amber-600 animate-spin' : 'text-slate-400'}`} />
                <span className={`text-xs md:text-sm font-bold ${isSpinning ? 'text-amber-700' : 'text-slate-600'}`}>혼합</span>
              </div>
              
              <ArrowRight size={14} className="md:w-4 md:h-4 text-slate-300" />
              
              <div className={`flex items-center gap-2 px-3 py-2 rounded-lg shadow-sm border transition-colors duration-500 ${isAirOn ? 'bg-sky-50 border-sky-200 ring-1 ring-sky-200' : 'bg-white border-slate-200'}`}>
                <Wind size={14} className={`md:w-4 md:h-4 ${isAirOn ? 'text-sky-600 animate-pulse' : 'text-slate-400'}`} />
                <span className={`text-xs md:text-sm font-bold ${isAirOn ? 'text-sky-700' : 'text-slate-600'}`}>산소 공급</span>
              </div>
              
              <ArrowRight size={14} className="md:w-4 md:h-4 text-slate-300" />
              
              <div className="flex items-center gap-2 px-3 py-2 bg-emerald-600 rounded-lg shadow-md text-white ring-2 ring-emerald-100 ring-offset-1">
                <Info size={14} className="md:w-4 md:h-4" />
                <span className="text-xs md:text-sm font-bold">퇴비화 완료</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;