import React from 'react';

const LandingPage = () => {
  return (
    <div style={{
      fontFamily: 'Helvetica, Arial, sans-serif',
      color: '#333',
      maxWidth: '1200px',
      margin: '0 auto',
      padding: '40px 20px',
    }}>
      <header style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: '80px',
      }}>
        <h1 style={{
          fontSize: '24px',
          fontWeight: 'bold',
          textTransform: 'uppercase',
          letterSpacing: '2px',
        }}>
          Sitebrew.ai
        </h1>
        <nav>
          <ul style={{
            display: 'flex',
            listStyle: 'none',
            gap: '20px',
          }}>
            <li><a href="#" style={{ color: '#333', textDecoration: 'none' }}>Home</a></li>
            <li><a href="#" style={{ color: '#333', textDecoration: 'none' }}>Features</a></li>
            <li><a href="#" style={{ color: '#333', textDecoration: 'none' }}>Pricing</a></li>
            <li><a href="#" style={{ color: '#333', textDecoration: 'none' }}>Contact</a></li>
          </ul>
        </nav>
      </header>

      <main>
        <section style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: '40px',alignItems: 'center',
          marginBottom: '80px',
        }}>
          <div>
            <h2 style={{
              fontSize: '48px',
              fontWeight: 'bold',
              marginBottom: '20px',lineHeight: '1.2',
            }}>
              Generate a site and share it with the world, in seconds
            </h2>
            <p style={{
              fontSize: '18px',
              lineHeight: '1.6',
              marginBottom: '40px',
            }}>
              Sitebrew.ai empowers you to create stunning websites effortlessly. Our AI-powered platform turns your ideas into reality, allowing you to focus on what matters most - your content.
            </p>
            <button style={{
              backgroundColor: '#333',
              color: '#fff',
              border: 'none',
              padding: '15px 30px',
              fontSize: '18px',
              cursor: 'pointer',textTransform: 'uppercase',
              letterSpacing: '1px',
            }}>
              Get Started
            </button>
          </div>
          <div style={{
            backgroundColor: '#f0f0f0',
            height: '400px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            fontSize: '24px',
            color: '#999',
          }}>
            [Placeholder for hero image]
          </div>
        </section>

        <section style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: '40px',
          marginBottom: '80px',
        }}>
          {['Fast', 'Easy', 'Powerful'].map((feature, index) => (
            <div key={index} style={{
              backgroundColor: '#f0f0f0',
              padding: '40px',
              textAlign: 'center',
            }}>
              <h3 style={{
                fontSize: '24px',
                fontWeight: 'bold',
                marginBottom: '20px',
              }}>
                {feature}
              </h3>
              <p style={{
                fontSize: '16px',
                lineHeight: '1.6',
              }}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
            </div>
          ))}
        </section>
      </main>

      <footer style={{
        borderTop: '1px solid #ccc',
        paddingTop: '40px',
        textAlign: 'center',fontSize: '14px',
      }}>
        <p>&copy; 2024 Sitebrew.ai. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default LandingPage;