import React from 'react';

const App = () => {
  const steps = [
    {
      title: "Choose the right beans",
      description: "Select freshly roasted, high-quality espresso beans. Look for a medium to dark roast with a rich flavor profile."
    },
    {
      title: "Grind the beans",
      description: "Grind your beans just before brewing. Aim for a fine, consistent grind - similar to table salt."
    },
    {
      title: "Dose the grounds",
      description: "Use about 18-20 grams of ground coffee for a double shot. Adjust based on your basket size and preference."
    },
    {
      title: "Distribute and tamp",
      description: "Evenly distribute the grounds in the portafilter and tamp with about 30 pounds of pressure. Ensure a level surface."
    },
    {
      title: "Prepare the machine",
      description: "Ensure your espresso machine is heated up. Purge the group head to clear any old grounds and stabilize temperature."
    },
    {
      title: "Pull the shot",
      description: "Lock in the portafilter and start the extraction. Aim for a 25-30 second pull time for a 2oz double shot."
    },
    {
      title: "Assess and adjust",
      description: "Evaluate the taste and appearance. A good shot should have a golden crema and balanced flavor. Adjust grind, dose, or time as needed."
    }
  ];

  return (
    <div style={{
      fontFamily: 'Arial, sans-serif',
      maxWidth: '800px',
      margin: '0 auto',
      padding: '20px',
      backgroundColor: '#f5f5f5',
      color: '#333'
    }}>
      <header style={{
        backgroundColor: '#4a2c2a',
        color:'white',
        padding: '20px',
        textAlign: 'center',
        borderRadius: '8px'
      }}>
        <h1 style={{margin: 0}}>The Perfect Espresso Shot</h1>
        <p style={{marginTop: '10px'}}>A step-by-step guide to brewing excellence</p>
      </header>

      <main style={{marginTop: '30px'}}>
        {steps.map((step, index) => (
          <div key={index} style={{
            backgroundColor: 'white',
            margin: '20px 0',
            padding: '20px',
            borderRadius: '8px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
          }}>
            <h2 style={{color: '#4a2c2a', marginTop: 0}}>
              Step {index + 1}: {step.title}
            </h2>
            <p>{step.description}</p>
          </div>
        ))}
      </main>

      <footer style={{
        marginTop: '30px',
        textAlign: 'center',
        color: '#666'
      }}>
        <p>Remember, perfecting your espresso technique takes practice. Enjoy the journey!</p>
      </footer>
    </div>
  );
};

export default App;