import React from 'react'
import '../styles/global.css'

export default function About() {
  return (
    <div className="about-page">
      <h1>About Brand Master</h1>

      <section className="about-section">
        <h2>Our Story</h2>
        <p>
          Founded in 2020, Brand Master started as a passion project to bring
          quality fashion and footwear to customers worldwide. What began as
          a small collection has grown into a comprehensive online store
          featuring over 1000 products from leading brands.
        </p>
      </section>

      <section className="about-section">
        <h2>Our Mission</h2>
        <p>
          We believe everyone deserves access to stylish, high-quality
          products at reasonable prices. Our mission is to make fashion
          accessible, affordable, and enjoyable for everyone.
        </p>
      </section>

      <section className="about-section">
        <h2>Our Values</h2>
        <ul className="values-list">
          <li>
            <strong>Quality:</strong> We only stock products from trusted
            brands and manufacturers
          </li>
          <li>
            <strong>Customer First:</strong> Your satisfaction is our top
            priority
          </li>
          <li>
            <strong>Sustainability:</strong> We're committed to eco-friendly
            practices
          </li>
          <li>
            <strong>Innovation:</strong> We constantly improve our platform
            for the best experience
          </li>
        </ul>
      </section>

      <section className="about-section">
        <h2>Why Shop with Us?</h2>
        <div className="why-us-grid">
          <div className="why-us-card">
            <h3>🚚 Fast Shipping</h3>
            <p>Orders shipped within 24 hours to most locations</p>
          </div>
          <div className="why-us-card">
            <h3>💯 Money Back</h3>
            <p>30-day satisfaction guarantee on all purchases</p>
          </div>
          <div className="why-us-card">
            <h3>🔒 Secure Payment</h3>
            <p>Your payment information is always protected</p>
          </div>
          <div className="why-us-card">
            <h3>💬 24/7 Support</h3>
            <p>Our team is ready to help anytime</p>
          </div>
          <div className="why-us-card">
            <h3>🎁 Best Prices</h3>
            <p>We offer competitive prices and frequent discounts</p>
          </div>
          <div className="why-us-card">
            <h3>📱 Mobile App</h3>
            <p>Shop on the go with our mobile apps</p>
          </div>
        </div>
      </section>

      <section className="about-section team-section">
        <h2>Our Team</h2>
        <p>
          We have a passionate team of fashion experts, developers, and
          customer service professionals working to bring you the best
          shopping experience.
        </p>
      </section>
    </div>
  )
}
