<?php
session_start();
include 'db.php';

// Latest reviews
$latestReviews = $pdo->query("
  SELECT r.comment, r.rating, u.username, c.name AS company_name
  FROM reviews r
  JOIN users u ON r.user_id = u.id
  JOIN companies c ON r.company_id = c.id
  ORDER BY r.id DESC
  LIMIT 5
")->fetchAll();

// Fetch testimonials from users table
$testimonials = $pdo->query("
  SELECT username, testimonial 
  FROM users 
  WHERE testimonial IS NOT NULL AND testimonial != ''
  ORDER BY id DESC 
  LIMIT 10
")->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Us - Review Stream</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- Sans-serif fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">

<!-- Favicon -->
<link rel="icon" href="/favicon.png" type="image/png" />


<style>
  body {
	  margin: 0px;
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
	padding-bottom: 260px !important;
  }
  
  .banner {
    background: url('/images/about/banner1.jpg') no-repeat center center;
    background-size: cover;
    color: white;
    text-align: center;
    padding: 80px 20px;
  }
  .banner h1 {
    font-size: 3em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  }
  .hero-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin: 20px 0;
  }
  .content-layout { 
    display: flex; 
    gap: 40px; /* increased gap */
    flex-wrap: wrap; 
  }
  .main-content { flex: 3; min-width: 250px; }
  .sidebar { 
    flex: 1; 
    min-width: 200px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
  }
  
  
  .main-content .card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease;
}
  
  
 .main-content .card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.main-content h2, .main-content h3 {
  color: #4A90E2;
  margin-top: 15px;
  margin-bottom: 10px;
}
.main-content p, .main-content ul {
  font-size: 1.05em;
  color: #444;
}
.main-content ul li {
  margin-bottom: 6px;
}


/* --- SIDEBAR --- */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sidebar-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.07);
  transition: box-shadow 0.3s ease;
}
.sidebar-card:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Optional dark mode support */
body.dark-mode .sidebar-card {
  background: #1e1e1e;
}



 
  

/* --- TESTIMONIAL SLIDER --- */
.slider-wrapper {
  position: relative;
  margin-top: 20px;
}
.slider-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 16px;
  padding-bottom: 5px;
}

  .slider-card {
  flex: 0 0 auto;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: 12px;
  padding: 18px;
  width: 240px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.slider-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.slider-card p {
  font-size: 0.95em;
  color: #333;
}



  .testimonial-tag {
  font-size: 0.8em;
  color: #666;
}
 
 /* --- SLIDER ARROWS --- */
.slider-arrow {
  background: rgba(0,0,0,0.5);
  color: white;
  width: 32px;
  height: 32px;
  font-size: 1em;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.3s;
}
.slider-arrow:hover {
  background: rgba(0,0,0,0.7);
}
.slider-arrow.left { left: -12px; }
.slider-arrow.right { right: -12px; }
 
 
 /* --- BUTTON --- */
.btn-primary {
  display: inline-block;
  background: #4A90E2;
  color: white;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  margin-top: 10px;
  transition: background 0.3s ease;
}
.btn-primary:hover {
  background: #4A90E2;
}
 
 
 
 
/* --- MISSION, VALUES, WHY CHOOSE, CTA SECTIONS --- */
.mission, .values, .why-choose, .cta {
  background: #f9f9f9;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}
.mission h3, .values h3, .why-choose h3, .cta h3 {
  color: #4A90E2;
  font-weight: 600;
}


/* --- DARK MODE SUPPORT (optional) --- */
body.dark-mode {
  background: #121212;
  color: #e0e0e0;
}
body.dark-mode .main-content .card,
body.dark-mode .sidebar,
body.dark-mode .mission,
body.dark-mode .values,
body.dark-mode .why-choose,
body.dark-mode .cta {
  background: #1e1e1e;
  color: #e0e0e0;
}
body.dark-mode .slider-card {
  background: #2c2c2c;
  color: #ddd;
}
body.dark-mode .slider-arrow {
  background: rgba(255,255,255,0.2);
}

/* --- CONTAINER SPACING --- */
.container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}




  .star-box { display: inline-block; width: 20px; height: 20px; margin-right: 2px; text-align: center; line-height: 20px; border-radius: 3px; }
  .star-box.filled { background: #00b67a; color: white; }
  .star-box.empty { background: #d3d3d3; color: white; }
  
  /* Collapsible menu */
  .menu { display: none; flex-direction: column; }
  .menu.active { display: flex; }
  .menu a { padding: 8px 0; text-decoration: none; color: #333; }
  .menu-toggle { font-size: 1.5em; cursor: pointer; }
  @media(min-width: 768px){
    .menu { display: flex !important; flex-direction: row; }
    .menu a { margin-left: 15px; }
    .menu-toggle { display: none; }
  }
  
 .about-flex {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}
.about-img {
  float: left;
  width: 400px;
  height: 450px;
  object-fit: cover;
  margin-right: 20px; /* space between image and text */
  border-radius: 8px; /* optional */
}

.about-text {
  flex: 1;
  min-width: 250px; /* ensure text doesn't get too narrow on small screens */
}

.about-text p {
  text-align: justify; /* makes text flow neatly under the image */
  overflow: hidden; /* ensure container wraps around floated image */
}


.fixed-footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      background: #222;
      text-align: center;
      padding: 10px 0;
      color: #fff;
      z-index: 1000;
    }

   .fixed-footer p{
		font-family: 'Poppins', sans-serif !important;
		font-size: 13px !important;
	}

    .footer-menu a {
      margin: 0 10px;
      text-decoration: none;
      color: #fff;
	  font-family: 'Poppins', sans-serif !important;
	  font-size: 13px !important;
    }

    .footer-menu a:hover {
      text-decoration: underline;
    }
	
	
.topbar { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  padding:10px 20px; 
  background:#007BFF; 
  color:white; 
  }
 
  .logo {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #a2d4f5, #fefb72); /* light blue to lemon */
  border-radius: 50%;
  width: 36px;
  height: 36px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  margin-right: 8px;
}
</style>
</head>
<body>
<div class="topbar">
 <div class="logo"><div class="logo-icon"><i class="fas fa-shield-alt" style="color: skyblue; font-size: 25px; margin-left: 6px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"></i>
</div> REVIEW STREAM
  </div>
  <div class="menu-toggle" onclick="document.querySelector('.menu').classList.toggle('active')">
    <i class="fas fa-bars"></i>
  </div>
  
  
  <div class="menu">
    <a href="index.php">Home</a>
    <a href="companies.php">Companies</a>
    <a href="blog.php">Newsroom</a>
    <?php if(isset($_SESSION['user_id'])): ?>
      <a href="user-settings.php">My Settings</a>
      <a href="logout.php">Logout</a>
    <?php else: ?>
      <a href="login.php">Login</a>
    <?php endif; ?>
    <button class="dark-mode-toggle" onclick="document.body.classList.toggle('dark-mode')">🌓</button>
  </div>
  
</div>

<div class="banner">
  <h1>About Us</h1>
  <p>Discover who we are, what drives us, and why millions trust Review Stream.</p>
</div>

<div class="container">
  <div class="content-layout">
    <div class="main-content">
      <div class="card">
  <div class="about-flex">
  <img src="images/about/comp-img.jpg" alt="About Review Stream" class="about-img">
  <div class="about-text">
  <div class="about-text">
    <h2><i class="fas fa-info-circle"></i> About Review Stream</h2>
    <p>
      Welcome to <strong>Review Stream</strong> â€” your trusted online platform for authentic user reviews across thousands of companies worldwide.
      Founded to empower consumers and businesses alike, we provide a transparent space where feedback flows freely.
      Every opinion matters, helping people make smarter choices and businesses build trust.
    </p>
    <p>
      Our mission goes beyond collecting reviews: we aim to create a global community rooted in honesty and constructive dialogue.
      By sharing real stories and insights, users help shape better decisions and improve services across industries.
    </p>
    <p>
      Together, we're making reviews more meaningful: strengthening trust, encouraging improvement, and connecting voices from around the world.
    </p>
  </div>
  </div> 
</div>

        <h3><i class="fas fa-users"></i> What Users Are Saying About Review Stream</h3>
        <div class="slider-wrapper">        
          <div class="slider-container" id="testimonialSlider">
            <?php foreach($testimonials as $t): ?>
              <div class="slider-card">
                <p><?= nl2br(htmlspecialchars($t['testimonial'])) ?></p>
                <small class="testimonial-tag"><i class="fas fa-user-check"></i> <?= htmlspecialchars($t['username']) ?></small>
              </div>
            <?php endforeach; ?>
          </div>         
        </div>

        <div class="mission">
          <h3><i class="fas fa-bullseye"></i> Our Mission</h3>
          <p>To bring transparency to the marketplace by connecting consumers and businesses through authentic reviews, 
          helping people make informed decisions and companies improve through real feedback.</p>
        </div>

        <div class="values">
          <h3><i class="fas fa-handshake"></i> Our Values</h3>
          <ul>
            <li><strong>Trust:</strong> Integrity and honesty are at the core of what we do.</li>
            <li><strong>Transparency:</strong> Open sharing of real user experiences.</li>
            <li><strong>Empowerment:</strong> Giving voice to consumers and businesses alike.</li>
            <li><strong>Innovation:</strong> Continuously improving our platform for better user experience.</li>
          </ul>
        </div>

        <div class="why-choose">
          <h3><i class="fas fa-check-circle"></i> Why Choose Review Stream?</h3>
          <ul>
            <li>Thousands of verified reviews updated daily</li>
            <li>Easy-to-use interface with powerful search tools</li>
            <li>Community-driven and unbiased ratings</li>
            <li>Supports businesses in improving reputation</li>
          </ul>
        </div>

        <div class="cta">
          <h3><i class="fas fa-user-plus"></i> Join Our Community</h3>
          <p>Sign up today to share your own reviews or discover what others are saying about the brands you care about most.</p>
          <a href="register.php" class="btn-primary">Get Started</a>
        </div>
      </div>
    </div>




     <div class="sidebar">
      <div class="sidebar-card">
        <h4>Latest Reviews</h4>
        <?php foreach($latestReviews as $rev): ?>
          <p><strong><?= htmlspecialchars($rev['username']) ?></strong> on <em><?= htmlspecialchars($rev['company_name']) ?></em>:</p>
          <div>
            <?php for($i=1;$i<=5;$i++): ?>
              <span class="star-box <?= $i<=$rev['rating'] ? 'filled' : 'empty' ?>">★</span>
            <?php endfor; ?>
            (<?= $rev['rating'] ?>/5)
          </div>
          <p style="margin-top:2px;"><?= htmlspecialchars(substr($rev['comment'],0,50)) ?>...</p>
          <hr>
        <?php endforeach; ?>
      </div>
      <div class="sidebar-card">
        <h4>Top Rated Companies</h4>
        <?php foreach($topCompanies as $top): ?>
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:5px;">
            <img src="images/companies/<?= htmlspecialchars($top['image']) ?>" alt="<?= htmlspecialchars($top['name']) ?>" style="width:30px;height:30px;object-fit:contain;">
            <span><?= htmlspecialchars($top['name']) ?> (<?= $top['avg_rating'] ?>/5)</span>
          </div>
        <?php endforeach; ?>
      </div>
      <div class="sidebar-card">
        <h4>Latest Blog Posts</h4>
        <?php foreach($latestBlogs as $b): ?>
          <p><a href="blog_details.php?id=<?= $b['id'] ?>"><?= htmlspecialchars($b['title']) ?></a></p>
        <?php endforeach; ?>
      </div>
    </div>
    
    
	
	
  </div>
</div>

<?php include 'footer.php'; ?>

<script>
  // Auto slide
  const slider = document.getElementById('testimonialSlider');
  let scrollAmount = 0;
  setInterval(() => {
    slider.scrollBy({ left: 1, behavior: 'smooth' });
    scrollAmount += 1;
    if (scrollAmount >= slider.scrollWidth - slider.clientWidth) scrollAmount = 0;
  }, 20);

  // Manual arrows
  function scrollSlider(distance) {
    slider.scrollBy({ left: distance, behavior: 'smooth' });
  }
</script>
</body>
</html>
