<?php
header('Content-Type: text/html; charset=utf-8');
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();

// Top rated companies
$topCompanies = $pdo->query("
  SELECT c.id, c.name, c.image, ROUND(AVG(r.rating),1) AS avg_rating
  FROM companies c
  JOIN reviews r ON c.id = r.company_id
  GROUP BY c.id
  HAVING COUNT(r.id) >= 1
  ORDER BY avg_rating DESC
  LIMIT 5
")->fetchAll();


// Latest blog posts (limit 5 for sidebar)
$latestBlogs = $pdo->query("
  SELECT id, title 
  FROM blogs
  ORDER BY created_at DESC 
  LIMIT 5
")->fetchAll();

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact 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">
<!-- 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:0; font-family:Arial,sans-serif; background:#f9f9f9; padding-bottom: 140px}


  .content-layout { display: flex; gap: 20px; flex-wrap: wrap; }
  .main-content { flex: 3; min-width: 250px; }
  .sidebar { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 15px; }
  form.contact-form { display: flex; flex-direction: column; gap: 10px; }
  form.contact-form input, form.contact-form textarea { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
  .contact-details, .faq, .map { background: #f9f9f9; padding: 15px; border-radius: 8px; margin-top: 15px; }
  .btn-submit { background: #007BFF; color: white; padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; }
  .btn-submit:hover { background: #0056b3; }
  
  
  
  .sidebar { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 20px; }
  .sidebar-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.07);
    transition: box-shadow 0.3s ease;
  }
  
  .sidebar-card p{
	  font-family:'Poppins', sans-serif !important;	  
  }
  
  .sidebar-card:hover { box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
  
  
  .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; }
  
  
  
  
  
  .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;
    }
	
	
	
	.why-choose-us {
  background: #f0f4f8;
  border: 1px solid #dce3ea;
  border-radius: 10px;
  padding: 20px 25px;
  margin-top: 30px;
  font-family: 'Open Sans', sans-serif;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.why-choose-us h3 {
  margin-top: 0;
  color: #333;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  margin-bottom: 12px;
}

.why-choose-us ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}

.why-choose-us li {
  margin-bottom: 10px;
  color: #444;
  line-height: 1.6;
  font-size: 15px;
}


 /* 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; }
  }
  
	
	
	
 .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="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="container">
  <div class="content-layout">
    <div class="main-content">
      <div class="card">
        <h2>Contact Us</h2>
        <p>We’d love to hear from you! Whether you have a question, feedback, or partnership proposal, feel free to reach out.</p>
        
        <form class="contact-form" method="post" action="send_message.php">
          <input type="text" name="name" placeholder="Your Name" required>
          <input type="email" name="email" placeholder="Your Email" required>
          <input type="text" name="subject" placeholder="Subject" required>
          <textarea name="message" rows="5" placeholder="Your Message" required></textarea>
          <button type="submit" class="btn-submit">Send Message</button>
        </form>

        <div class="contact-details">
  <h3>Our Contact Details</h3>
  <p><i class="fas fa-map-marker-alt"></i> 701 W 8th Ave, Anchorage, AK 99501, USA</p>
  <p><i class="fas fa-envelope"></i> info@previewstream.online</p>
  <p><i class="fas fa-phone"></i> +1 (907) 555-1849</p>
</div>

<div class="map">
  <h3>Find Us</h3>
  <iframe src="https://maps.google.com/maps?q=701%20W%208th%20Ave,%20Anchorage,%20AK%2099501&t=&z=15&ie=UTF8&iwloc=&output=embed" width="100%" height="200" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>


       <div class="why-choose-us">
  <h3>Why Choose Review Stream?</h3>
  <ul>
    <li><strong>Trusted Platform:</strong> Thousands of users rely on our reviews monthly.</li>
    <li><strong>Verified Feedback:</strong> We ensure reviews come from real people.</li>
    <li><strong>Business-Friendly:</strong> We bridge the gap between users and companies.</li>
    <li><strong>Responsive Support:</strong> Reach out anytime — we listen and respond fast.</li>
  </ul>
</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 <?= htmlspecialchars($rev['company_name']) ?>:</p>
		  <p style="margin-top:2px;"><em><?= htmlspecialchars(substr($rev['comment'],0,50)) ?>...</em></p>
          <div>
            <?php for($i=1;$i<=5;$i++): ?>
              <span class="star-box <?= $i<=$rev['rating'] ? 'filled' : '' ?>">★</span>
            <?php endfor; ?>
            (<?= $rev['rating'] ?>/5)
          </div>
          
          <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 style="font-family:'Poppins', sans-serif !important;"><?= 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 $blog): ?>
          <p><a href="blog.php?id=<?= $blog['id'] ?>"><?= htmlspecialchars($blog['title']) ?></a></p>
        <?php endforeach; ?>
      </div>
    </div>
	
	
	
	
  </div>
</div>

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