import React, { useState } from 'react';

function Workflow() {
  const [activeStep, setActiveStep] = useState(1);

  const steps = [
    {
      id: 1,
      title: "Global Factory Sourcing",
      desc: "Analyze dynamic pricing and geopolitical risks across 6 manufacturing hubs to identify optimal production vectors."
    },
    {
      id: 2,
      title: "Intelligent Routing",
      desc: "Navigate through real-time port delays and sudden closures to maintain strict delivery schedules and minimize holding costs."
    },
    {
      id: 3,
      title: "Demand Fulfillment",
      desc: "Automatically balance warehouse inventory against volatile regional demands to eliminate stockouts and maximize profit scalability."
    }
  ];

  return (
    <section id="features" className="workflow-section">
      <div className="workflow-left">
        <div className="workflow-header">Autonomous Operation</div>
        <div className="workflow-steps">
          {steps.map(step => (
            <div 
              key={step.id}
              className={`workflow-step ${activeStep === step.id ? 'active' : 'inactive'}`}
              onClick={() => setActiveStep(step.id)}
            >
              <div className="workflow-step-top">
                <span className="workflow-step-number">0{step.id}</span>
                <span className="workflow-step-title">{step.title}</span>
              </div>
              <div className="workflow-step-desc">
                <p>{step.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="workflow-right">
        <div className="workflow-card">
          <img src="/workflow.png" alt="Logistics Center" className="workflow-image" />
          <div className="scan-line"></div>
        </div>
      </div>
    </section>
  );
}

export default Workflow;