import React from 'react';
import './About.css';

const About = () => {
  return (
    <div className="about">
      <div className="about-header">
        <h1>About Wraffle</h1>
        <p>Your premium hoodie destination</p>
      </div>

      <div className="about-content">
        <section className="story-section">
          <div className="story-content">
            <h2>Our Story</h2>
            <p>
              Wraffle was born from a passion for quality streetwear and a desire to create
              hoodies that stand out from the crowd. We believe that everyone deserves to
              wear comfortable, stylish clothing that expresses their unique personality.
            </p>
            <p>
              Founded in 2024, we've quickly become a go-to destination for fashion enthusiasts
              who appreciate premium quality, unique designs, and exceptional comfort.
            </p>
          </div>
          <div className="story-image">
            <img src="/wraffle_logo.png" alt="Wraffle Story" className="story-logo" />
          </div>
        </section>

        <section className="values-section">
          <h2>Our Values</h2>
          <div className="values-grid">
            <div className="value-card">
              <h3>Quality First</h3>
              <p>
                We use only the finest materials and pay attention to every detail
                in our manufacturing process to ensure lasting quality.
              </p>
            </div>
            <div className="value-card">
              <h3>Unique Designs</h3>
              <p>
                Our designs are created by talented artists and designers who push
                the boundaries of streetwear fashion.
              </p>
            </div>
            <div className="value-card">
              <h3>Sustainability</h3>
              <p>
                We're committed to reducing our environmental impact through
                sustainable practices and eco-friendly materials.
              </p>
            </div>
            <div className="value-card">
              <h3>Customer Focus</h3>
              <p>
                Your satisfaction is our top priority. We strive to provide
                exceptional service and support to every customer.
              </p>
            </div>
          </div>
        </section>

        <section className="mission-section">
          <h2>Our Mission</h2>
          <p>
            To empower individuals to express themselves through fashion while maintaining
            the highest standards of quality, comfort, and style. We believe that great
            clothing should be accessible to everyone, regardless of their budget or style preferences.
          </p>
          <div className="mission-stats">
            <div className="stat">
              <h3>1000+</h3>
              <p>Happy Customers</p>
            </div>
            <div className="stat">
              <h3>50+</h3>
              <p>Unique Designs</p>
            </div>
            <div className="stat">
              <h3>24/7</h3>
              <p>Customer Support</p>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default About;
