const LaborIllusionDemo = () => {
  const [loading, setLoading] = useState(false);
  const [logs, setLogs] = useState([]);
  const [result, setResult] = useState(null);
  const [mode, setMode] = useState('labor'); // 'instant' or 'labor'

  const startSearch = () => {
    setResult(null);
    setLogs([]);
    setLoading(true);

    if (mode === 'instant') {
      setTimeout(() => {
        setLoading(false);
        setResult('Found 12 flights for you.');
      }, 300); // ほぼ一瞬
    } else {
      // 労働の錯覚モード
      const steps = [
        'Connecting to airline database...',
        'Analyzing best routes...',
        'Comparing prices...',
        'Checking seat availability...',
        'Finalizing results...'
      ];
      
      let step = 0;
      const interval = setInterval(() => {
        setLogs(prev => [...prev, steps[step]]);
        step++;
        if (step >= steps.length) {
          clearInterval(interval);
          setTimeout(() => {
            setLoading(false);
            setResult('Found 12 optimal flights for you.');
          }, 800);
        }
      }, 600);
    }
  };

  return (
    <div className="p-8 bg-gray-900 text-white rounded-xl shadow-lg max-w-sm mx-auto">
      <div className="flex justify-center gap-4 mb-6">
        <button
          onClick={() => { setMode('instant'); setResult(null); setLogs([]); }}
          className={`px-3 py-1 text-xs rounded-full border ${mode === 'instant' ? 'bg-primary border-blue-600' : 'border-gray-600'}`}
        >
          Instant UX
        </button>
        <button
          onClick={() => { setMode('labor'); setResult(null); setLogs([]); }}
          className={`px-3 py-1 text-xs rounded-full border ${mode === 'labor' ? 'bg-green-600 border-green-600' : 'border-gray-600'}`}
        >
          Labor Illusion UX
        </button>
      </div>

      <div className="text-center">
        <button
          onClick={startSearch}
          disabled={loading}
          className="w-full bg-card text-card-foreground font-bold py-3 rounded hover:bg-muted disabled:opacity-50 mb-6"
        >
          {loading ? 'Searching...' : 'Find Cheap Flights'}
        </button>

        <div className="h-40 bg-secondary rounded p-4 text-left overflow-y-auto font-mono text-xs">
          {loading && logs.map((log, i) => (
            <div key={i} className="text-green-400 mb-1 animate-in slide-in-from-left-2">
              &gt; {log}
            </div>
          ))}
          
          {result && (
            <div className="text-white font-bold text-center mt-8 animate-in zoom-in">
              ✈️ {result}
              {mode === 'instant' && <div className="text-muted-foreground font-normal mt-2 text-[10px]">(So fast... is it accurate?)</div>}
              {mode === 'labor' && <div className="text-green-400 font-normal mt-2 text-[10px]">(Feels trustworthy!)</div>}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

render(<LaborIllusionDemo />);