<?php
require_once 'includes/User.php';

$me = User::getCurrentUser();
$lg = User::isLoggedIn();
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Allura Dry Clean - About Us</title>
  <?php include 'includes/header.php'; ?>
  <style>
    :root {
      --primary: #0066cc;
      --primary-dark: #004c99;
      --light-bg: #f8fafc;
      --text-dark: #1a1a1a;
      --text-light: #555;
      --radius: 18px;
      --shadow: 0 6px 20px rgba(0,0,0,0.08);
      --gradient: linear-gradient(135deg, #0066cc, #00b4d8);
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--light-bg);
      color: var(--text-dark);
      margin: 0;
    }

    /* HERO SECTION */
    .about-hero {
      background: var(--gradient);
      color: #fff;
      text-align: center;
      padding: 100px 20px 80px;
      position: relative;
      overflow: hidden;
    }

    .about-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.15);
    }

    .about-hero h1 {
      position: relative;
      font-size: 2.6rem;
      font-weight: 800;
      margin-bottom: 15px;
      letter-spacing: -0.5px;
    }

    .about-hero p {
      position: relative;
      font-size: 1.1rem;
      max-width: 700px;
      margin: 0 auto;
      opacity: 0.95;
      line-height: 1.6;
    }

    /* CONTAINER */
    .about-container {
      padding: 60px 7%;
      display: flex;
      flex-direction: column;
      gap: 60px;
    }

    .about-section {
      text-align: center;
    }

    .about-section h2, .about-section h3 {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 20px;
    }

    .about-section p {
      color: var(--text-light);
      font-size: 1.05rem;
      line-height: 1.7;
      max-width: 850px;
      margin: 0 auto;
    }

    /* SERVICES LIST */
    .services-list {
      list-style: none;
      padding: 0;
      margin-top: 40px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 25px;
    }

    .services-list li {
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 25px;
      text-align: left;
      display: flex;
      gap: 15px;
      align-items: flex-start;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .services-list li:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    }

    .services-list i {
      font-size: 1.8rem;
      color: var(--primary);
      flex-shrink: 0;
    }

    .services-list strong {
      display: block;
      font-size: 1.1rem;
      margin-bottom: 6px;
      color: var(--text-dark);
    }

    .services-list p {
      font-size: 0.95rem;
      color: var(--text-light);
      margin: 0;
    }

    /* FEATURES GRID */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 25px;
      margin-top: 30px;
    }

    .feature-card {
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 30px 25px;
      text-align: center;
      transition: all 0.3s ease;
    }

    .feature-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    }

    .feature-card i {
      font-size: 2rem;
      color: var(--primary);
      margin-bottom: 12px;
    }

    .feature-card h3 {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 10px;
    }

    .feature-card p {
      font-size: 0.95rem;
      color: var(--text-light);
      line-height: 1.5;
    }

    /* MISSION */
    .mission-statement {
      background: var(--gradient);
      color: #fff;
      padding: 60px 25px;
      text-align: center;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .mission-statement h3 {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 15px;
    }

    .mission-statement p {
      font-size: 1.05rem;
      line-height: 1.6;
      max-width: 700px;
      margin: 0 auto;
    }

    /* CTA SECTION */
    .cta-section {
      text-align: center;
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 60px 25px;
    }

    .cta-section h2 {
      font-size: 2rem;
      color: var(--primary);
      margin-bottom: 10px;
    }

    .cta-section p {
      color: var(--text-light);
      font-size: 1.05rem;
      margin-bottom: 25px;
    }

    .cta-buttons {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 15px;
    }

    .cta-btn {
      padding: 12px 28px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .cta-btn-primary {
      background: var(--primary);
      color: #fff;
    }

    .cta-btn-primary:hover {
      background: var(--primary-dark);
    }

    .cta-btn-secondary {
      border: 2px solid var(--primary);
      color: var(--primary);
      background: transparent;
    }

    .cta-btn-secondary:hover {
      background: var(--primary);
      color: #fff;
    }

    @media (max-width: 768px) {
      .about-hero {
        padding: 80px 20px;
      }
      .about-hero h1 {
        font-size: 2rem;
      }
      .about-container {
        padding: 40px 20px;
      }
    }
  </style>
</head>

<body>
  <div class="about-hero">
    <h1>About Allura Dry Clean</h1>
    <p>Redefining the laundry experience by combining convenience, quality, and technology.</p>
  </div>

  <div class="about-container">
    <div class="about-section">
      <h2>Our Story</h2>
      <p>At Allura Dry Clean, we redefine the laundry experience by combining convenience, quality, and technology. Our service was created to make your life easier, offering a modern solution that saves you time and effort through fast, reliable, and professional laundry care.</p>
    </div>

    <div class="about-section">
      <h3>What We Offer</h3>
      <ul class="services-list">
        <li><i class="fas fa-home"></i><div><strong>Home Pickup & Delivery</strong><p>Clothes collected from your doorstep and returned clean and fresh.</p></div></li>
        <li><i class="fas fa-check-circle"></i><div><strong>High-Quality Services</strong><p>Washing, ironing, dry cleaning, carpet cleaning, and more.</p></div></li>
        <li><i class="fas fa-cogs"></i><div><strong>Customized Options</strong><p>Eco-friendly detergents, fabric-safe cleaning, and special garment care.</p></div></li>
        <li><i class="fas fa-star"></i><div><strong>Flexible Plans</strong><p>Affordable subscription packages and loyalty rewards for regular customers.</p></div></li>
      </ul>
    </div>

    <div class="about-section">
      <h2>Why Choose Allura?</h2>
      <div class="features-grid">
        <div class="feature-card"><i class="fas fa-shield-alt"></i><h3>Transparency</h3><p>Complete visibility into our processes and pricing with no hidden fees.</p></div>
        <div class="feature-card"><i class="fas fa-clock"></i><h3>Reliability</h3><p>Consistent, on-time service you can depend on every time.</p></div>
        <div class="feature-card"><i class="fas fa-heart"></i><h3>Customer Satisfaction</h3><p>Your happiness is our priority with personalized care for every order.</p></div>
      </div>
    </div>

    <div class="about-section">
      <h2>Our Technology</h2>
      <p>What makes us different is our commitment to transparency, reliability, and customer satisfaction. With a smart online ordering system, real-time tracking, and 24/7 support, we ensure that your clothes are always in safe hands.</p>

      <div class="features-grid">
        <div class="feature-card"><i class="fas fa-mobile-alt"></i><h3>Smart Ordering</h3><p>Easy-to-use online platform for placing and managing orders.</p></div>
        <div class="feature-card"><i class="fas fa-map-marker-alt"></i><h3>Real-Time Tracking</h3><p>Track your order status from pickup to delivery.</p></div>
        <div class="feature-card"><i class="fas fa-headset"></i><h3>24/7 Support</h3><p>Round-the-clock customer service for all your needs.</p></div>
      </div>
    </div>

    <div class="mission-statement">
      <h3>Our Mission</h3>
      <p>Our mission is simple: to provide a laundry service that matches the pace of modern life — efficient, trustworthy, and always putting our customers first.</p>
    </div>

    <div class="cta-section">
      <h2>Ready to Experience the Difference?</h2>
      <p>Join thousands of satisfied customers who trust Allura Dry Clean with their laundry needs.</p>
      <div class="cta-buttons">
        <a href="/service.php" class="cta-btn cta-btn-primary">View Our Services</a>
        <a href="/contact.php" class="cta-btn cta-btn-secondary">Get In Touch</a>
      </div>
    </div>
  </div>

  <?php include 'includes/footer.php'; ?>
</body>
</html>
