import React from 'react';

const App = () => {
  const steps = [
    { title: "Choose Quality Beans", description: "Start with freshly roasted, high-quality coffee beans." },
    { title: "Grind Properly", description: "Grind your beans just before brewing for optimal freshness." },
    { title: "Use Filtered Water", description: "Use clean, filtered water at the right temperature (195°F to 205°F)." },
    { title: "Measure Carefully", description: "Use the right coffee-to-water ratio (typically 1:16 to 1:18)." },
    { title: "Time Your Brew", description: "Brew for the appropriate time based on your method (e.g., 3-4 minutes for pour-over)." },];

  return (
    <div style={{
      fontFamily: 'Arial, sans-serif',
      maxWidth: '800px',
      margin: '0 auto',
      padding: '20px',
      backgroundColor: '#f5f5f5',
      color: '#333',
    }}>
      <header style={{
        textAlign: 'center',
        marginBottom: '40px',
      }}>
        <h1 style={{
          color: '#4a2c2a',
          fontSize: '2.5em',
        }}>Brewing the Perfect Cup of Coffee</h1>
        <p style={{
          fontSize: '1.2em',
          color: '#6f4e37',
        }}>Master these steps to elevate your coffee experience</p>
      </header>

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

      <footer style={{
        textAlign: 'center',
        marginTop: '40px',color: '#6f4e37',
      }}>
        <p>Enjoy your perfectly brewed cup of coffee!</p>
      </footer>
    </div>
  );
};

export default App;