import React, { useState } from 'react';

const App = () => {
  const [currentStep, setCurrentStep] = useState(0);

  const steps = [
    {
      title: "Choose the right beans",
      content: "Select freshly roasted, high-quality espresso beans. Look for a medium to dark roast with a rich, complex flavor profile."
    },
    {
      title: "Grind the beans",
      content: "Grind your beans just before brewing. Aim for a fine, consistent grind - similar to table salt."
    },
    {
      title: "Dose the grounds",
      content: "Use about 18-20 grams of ground coffee for a double shot. Distribute evenly in the portafilter."
    },
    {
      title: "Tamp the grounds",
      content: "Apply even pressure (about 30 lbs) when tamping to create a level bed of coffee."
    },
    {
      title: "Prepare the machine",
      content: "Ensure your espresso machine is heated up. Purge the group head to clear any residual water."
    },
    {
      title: "Pull the shot",
      content: "Lock in the portafilter and start the extraction. Aim for a 25-30 second pull for about 60ml of espresso."
    }
  ];

  return (
    <div style={{
      fontFamily: 'Arial, sans-serif',
      maxWidth: '800px',
      margin: '0 auto',
      padding: '20px',
      backgroundColor: '#f5e5d5',
      minHeight: '100vh',}}>
      <h1 style={{
        textAlign: 'center',
        color: '#4a2c2a',
        borderBottom: '2px solid #4a2c2a',
        paddingBottom: '10px'
      }}>
        The Perfect Espresso Guide
      </h1>
      
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        marginTop: '20px'
      }}>
        <div style={{
          width: '30%',
          backgroundColor: '#ffffff',
          padding: '20px',
          borderRadius: '10px',
          boxShadow: '0 0 10px rgba(0,0,0,0.1)'
        }}>
          <h2 style={{ color: '#4a2c2a' }}>Steps</h2>
          {steps.map((step, index) => (
            <div 
              key={index}
              onClick={() => setCurrentStep(index)}
              style={{
                padding: '10px',
                marginBottom: '5px',
                backgroundColor: currentStep === index ? '#4a2c2a' : '#e6ccb3',
                color: currentStep === index ? '#ffffff' : '#4a2c2a',
                cursor: 'pointer',
                borderRadius: '5px'
              }}
            >
              {step.title}
            </div>
          ))}
        </div>
        
        <div style={{
          width: '65%',
          backgroundColor: '#ffffff',
          padding: '20px',
          borderRadius: '10px',
          boxShadow: '0 0 10px rgba(0,0,0,0.1)'
        }}>
          <h2 style={{ color: '#4a2c2a' }}>{steps[currentStep].title}</h2>
          <p>{steps[currentStep].content}</p><div style={{
            marginTop: '20px',
            textAlign: 'center'
          }}>
            <button 
              onClick={() => setCurrentStep(prev => Math.max(0, prev - 1))}
              disabled={currentStep === 0}
              style={{
                padding: '10px 20px',
                marginRight: '10px',
                backgroundColor: '#4a2c2a',
                color: '#ffffff',
                border: 'none',
                borderRadius: '5px',
                cursor: 'pointer'
              }}
            >
              Previous
            </button>
            <button 
              onClick={() => setCurrentStep(prev => Math.min(steps.length - 1, prev + 1))}
              disabled={currentStep === steps.length - 1}
              style={{
                padding: '10px 20px',
                backgroundColor: '#4a2c2a',
                color: '#ffffff',
                border: 'none',
                borderRadius: '5px',
                cursor: 'pointer'
              }}
            >
              Next
            </button>
          </div>
        </div>
      </div>
      <div style={{
        marginTop: '30px',
        textAlign: 'center',
        color: '#4a2c2a'
      }}>
        <h3>Enjoy your perfect espresso!</h3>
        <p>Remember, practice makes perfect. Don't be discouraged if your first attempts aren't ideal.</p>
      </div>
    </div>
  );
};

export default App;