<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BEAR System | Barangay Emergency Alert & Reporting</title>

<!-- Bootstrap & Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">

<!-- Animate on Scroll -->
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">

<style>
body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  margin: 0;
  padding-top: 70px;
  background: #f9fafc;
}

/* Navbar */
.navbar { background-color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.05); padding: 0.8rem 2rem; position: fixed; width: 100%; top: 0; z-index: 1000; }
.navbar-brand { color: #d62c2c; font-weight: 900; font-size: 1.8rem; letter-spacing: -0.5px; }
.navbar-nav .nav-link { color: #555; font-weight: 500; margin: 0 5px; transition: color 0.3s; }
.navbar-nav .nav-link:hover { color: #d62c2c; }
.btn-login { border-radius: 25px; font-weight: 600; padding: 8px 18px; }

/* Hero */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(120deg, #ffffff 0%, #f8f9fa 100%);
  padding: 6rem 10%;
}
.hero-content {
  max-width: 600px;
  animation: fadeSlideIn 1s ease forwards;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}
.hero h1 {
  font-size: 3rem;
  font-weight: 900;
  color: black;
  margin-bottom: 1rem;
}
.hero p { font-size: 1.15rem; color: #555; margin-bottom: 2rem; }
.hero .btn {
  font-size: 1.1rem;
  padding: 0.75rem 2.2rem;
  border-radius: 30px;
  font-weight: 600;
  background: linear-gradient(90deg, #d62c2c, #ff5757);
  border: none;
  transition: transform 0.3s, box-shadow 0.3s;
}
.hero .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(214,44,44,0.3); }

/* Sections */
section { padding: 6rem 2rem; }
.section-title { text-align: center; margin-bottom: 3rem; }
.section-title h2 { color: #d62c2c; font-weight: 800; font-size: 2.3rem; }
.section-title p { color: #666; }

/* About */
.about-text ul { list-style: none; padding-left: 0; }
.about-text ul li::before { content: "✔"; color: #2b6df6; margin-right: 10px; }
.about-text ul li { margin-bottom: 8px; }

/* Timeline */
.timeline ul { list-style: none; padding-left: 0; position: relative; }
.timeline ul::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #d62c2c, #2b6df6);
  border-radius: 3px;
}
.timeline ul li {
  padding-left: 2rem;
  margin-bottom: 1.3rem;
  position: relative;
  font-weight: 500;
}
.timeline ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #d62c2c;
}

/* Stats */
.stats {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  text-align: center;
  margin-top: 3rem;
}
.stats .stat {
  flex: 1 1 200px;
  background: #fff;
  margin: 1rem;
  padding: 2rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s;
}
.stats .stat:hover { transform: translateY(-6px); }
.stats .stat h3 { color: #2b6df6; font-weight: 800; font-size: 2.2rem; }
.stats .stat p { color: #555; }

/* Handbook */
.handbook-card {
  background: linear-gradient(135deg, #d62c2c, #ff6b6b);
  color: #fff;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 10px 25px rgba(214,44,44,0.3);
  transition: transform 0.3s;
}
.handbook-card:hover { transform: translateY(-6px); }
.handbook-card a {
  background: #fff;
  color: #d62c2c;
  padding: 10px 18px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
}

/* Footer */
footer {
  background: linear-gradient(90deg, #2b6df6, #d62c2c);
  color: #fff;
  text-align: center;
  padding: 2.2rem 1rem;
  margin-top: 3rem;
}

/* Responsive */
@media(max-width:768px){
  .hero h1 { font-size: 2.2rem; }
  .hero p { font-size: 1rem; }
  .stats { flex-direction: column; }
}
</style>
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
  <div class="container">
    <a class="navbar-brand d-flex align-items-center" href="#top">
      <img src="https://www.bear-report.com/assets/img/logo.png" alt="BEAR Logo" style="height: 40px; width: auto; margin-right: 10px;">
      <span>BEAR</span>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto align-items-center">
        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#handbook">Handbook</a></li>
        <li class="nav-item"><a class="btn btn-danger text-white ms-2 btn-login" href="https://www.bear-report.com/login">Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- Hero -->
<section class="hero" id="top" data-aos="fade-right">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6 hero-content">
        <h1>Welcome to BEAR!</h1>
        <p>AI-powered Barangay Emergency Alert and Reporting System for safer communities.</p>
        <a href="https://www.bear-report.com/login" class="btn btn-lg btn-primary mt-3">Get Started</a>
      </div>
      <div class="col-md-6 text-center" data-aos="fade-left">
        <img src="https://www.bear-report.com/assets/img/alert.png" alt="Emergency Alert Illustration" class="img-fluid" style="max-width: 90%; border-radius: 60px;">
      </div>
    </div>
  </div>
</section>

<!-- About -->
<section id="about" data-aos="fade-up">
  <div class="container">
    <div class="section-title">
      <h2>About BEAR</h2>
      <p>Empowering residents and responders to report, track, and respond to emergencies in real-time.</p>
    </div>
    <div class="row align-items-center">
      <div class="col-md-6 about-text">
        <p>BEAR (Barangay Emergency Alert and Reporting System) provides:</p>
        <ul>
          <li>Real-time GPS-based incident tagging</li>
          <li>Instant notification alerts</li>
          <li>Dashboard for responders and officials</li>
          <li>Offline emergency handbooks</li>
          <li>Responsive, mobile-first design</li>
        </ul>
      </div>
      <div class="col-md-6 text-center">
        <img src="https://www.bear-report.com/assets/img/about.png" class="img-fluid rounded shadow-sm" alt="About Illustration">
      </div>
    </div>
  </div>
</section>

<!-- Features -->
<section id="features" data-aos="fade-up">
  <div class="container">
    <div class="section-title">
      <h2>How BEAR Works</h2>
      <p>From reporting to response</p>
    </div>
    <div class="timeline">
      <ul>
        <li>User registers and logs in</li>
        <li>Selects emergency type</li>
        <li>Pins exact location and description</li>
        <li>System notifies responders & officials</li>
        <li>Teams verify & update in real-time</li>
        <li>User receives live status updates</li>
      </ul>
    </div>
    <div class="video-wrapper mt-4 text-center">
      <video controls width="80%" poster="https://www.bear-report.com/assets/img/video-preview.png">
        <source src="https://www.bear-report.com/assets/video/bear.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>
  </div>
</section>

<!-- Impact -->
<section id="impact" data-aos="fade-up">
  <div class="container">
    <div class="section-title">
      <h2>Impact & Reach</h2>
      <p>Showcasing BEAR’s growing effectiveness</p>
    </div>
    <div class="stats">
      <div class="stat"><h3>120+</h3><p>Reports Filed</p></div>
      <div class="stat"><h3>90+</h3><p>Responders Active</p></div>
      <div class="stat"><h3>5+</h3><p>Officials On Duty</p></div>
      <div class="stat"><h3>99%</h3><p>Verified Responses</p></div>
    </div>
  </div>
</section>

<!-- Handbook -->
<section id="handbook" data-aos="fade-up">
  <div class="container">
    <div class="section-title">
      <h2>Emergency Handbook</h2>
      <p>Download offline-ready guides</p>
    </div>
    <div class="row g-4 justify-content-center">
      <div class="col-md-4">
        <div class="handbook-card">
          <i class="bi bi-file-earmark-pdf-fill fs-1 mb-3"></i>
          <h5>Fire Safety</h5>
          <p>Prevent and respond to fire hazards.</p>
          <a href="https://www.bear-report.com/download/fire">Download</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="handbook-card">
          <i class="bi bi-file-earmark-pdf-fill fs-1 mb-3"></i>
          <h5>First Aid</h5>
          <p>Learn basic first aid techniques.</p>
          <a href="https://www.bear-report.com/download/first-aid">Download</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="handbook-card">
          <i class="bi bi-file-earmark-pdf-fill fs-1 mb-3"></i>
          <h5>Disaster Preparedness</h5>
          <p>Guidelines for floods, typhoons, and earthquakes.</p>
          <a href="https://www.bear-report.com/download/disaster">Download</a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer>
  &copy; 2026 Barangay Emergency Alert and Reporting System — All Rights Reserved.
</footer>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script>AOS.init({ duration: 1000, once: true });</script>
</body>
</html>
