import React, { useState } from 'react';
import { Network, Zap, ShieldAlert } from 'lucide-react';

function UseCaseTabs() {
  const [activeTab, setActiveTab] = useState('enterprise');

  return (
    <section id="use-cases" className="tabs-section">
      <div className="tabs-header">
        <h2>Deployment Scenarios</h2>
      </div>
      <div className="tab-switcher">
        <button 
          className={`tab-pill ${activeTab === 'enterprise' ? 'active' : ''}`}
          onClick={() => setActiveTab('enterprise')}
        >
          Enterprise
        </button>
        <button 
          className={`tab-pill ${activeTab === 'research' ? 'active' : ''}`}
          onClick={() => setActiveTab('research')}
        >
          AI Research
        </button>
      </div>

      <div className="tab-content-card">
        <div className="tab-ghost-icon">
          {activeTab === 'enterprise' ? 'E' : 'R'}
        </div>
        <div className="tab-content-inner">
          <h3 className="tab-content-title">
            {activeTab === 'enterprise' ? 'Supply Chain Optimization' : 'OpenEnv RL Agent Training'}
          </h3>
          <p className="tab-content-desc">
            {activeTab === 'enterprise' 
              ? 'Deploy TradeStorm as a digital twin to stress-test your supply chain against simulated macroeconomic shocks.'
              : 'Utilize our OpenEnv-compliant Gymnasium wrapper to train massive LLM-based autonomous logistics agents.'}
          </p>

          <div className="benefits-grid">
            <div className="benefit-item">
              <div className="benefit-icon"><Network size={20} color="var(--primary)" /></div>
              <div className="benefit-title">Complex Routing</div>
              <div className="benefit-desc">Calculate optimal n-tier logistics pathways instantly.</div>
            </div>
            <div className="benefit-item">
              <div className="benefit-icon"><Zap size={20} color="var(--primary)" /></div>
              <div className="benefit-title">Real-Time Processing</div>
              <div className="benefit-desc">React to geopolitical shocks within simulation ticks.</div>
            </div>
            <div className="benefit-item">
              <div className="benefit-icon"><ShieldAlert size={20} color="var(--primary)" /></div>
              <div className="benefit-title">Risk Mitigation</div>
              <div className="benefit-desc">Proactive alerts prevent costly inventory stockouts.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default UseCaseTabs;