<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Coffee Blog | Enter Africa</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#f5f3ed]">

  <!-- Header -->
  <header class="w-full bg-[#8CC63E] p-4 shadow-md flex items-center justify-between">
    <a href="index.html" class="flex items-center">
      <img src="assets/logo.png" alt="Enter Africa Logo" class="h-[50px]">
    </a>
    <nav class="hidden md:flex space-x-6">
      <a href="index.html" class="text-white font-bold text-[16px] hover:text-[#c0a16b]">HOME</a>
      <a href="about-us.html" class="text-white font-bold text-[16px] hover:text-[#c0a16b]">ABOUT US</a>
      <a href="coffee-blog.html" class="text-white font-bold text-[16px] hover:text-[#c0a16b]">BLOG</a>
      <a href="our-process.html" class="text-white font-bold text-[16px] hover:text-[#c0a16b]">PROCESS</a>
      <a href="contact.html" class="text-white font-bold text-[16px] hover:text-[#c0a16b]">CONTACT</a>
    </nav>
    <!-- Mobile menu icon -->
    <button id="menuBtn" class="md:hidden text-white">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </header>

  <!-- Mobile Menu -->
  <div id="mobileMenu" class="hidden fixed inset-0 bg-[#2d2d2d] bg-opacity-95 z-50 flex flex-col items-center justify-center text-white text-xl space-y-8">
    <button id="closeMenu" class="absolute top-6 right-8 text-white text-4xl font-bold">&times;</button>
    <a href="index.html" class="hover:text-[#c0a16b]">Home</a>
    <a href="about-us.html" class="hover:text-[#c0a16b]">About Us</a>
    <a href="coffee-blog.html" class="hover:text-[#c0a16b]">Blog</a>
    <a href="our-process.html" class="hover:text-[#c0a16b]">Process</a>
    <a href="contact.html" class="hover:text-[#c0a16b]">Contact</a>
  </div>

  <!-- Hero Section -->
  <section class="hero bg-cover bg-center text-white py-24 px-4 text-center hero-bg">
    <h1 class="text-4xl md:text-6xl font-bold">Stories from the Origin</h1>
    <p class="mt-4 text-xl">Explore the heart of African coffee culture, farmers, and innovations.</p>
  </section>

  <!-- Blog Content -->
  <main class="max-w-6xl mx-auto px-4 py-12">
    <h2 class="text-3xl font-bold text-[#4e342e] mb-6">Latest Insights</h2>
    <div class="grid md:grid-cols-3 gap-8">
      <article class="card p-4">
        <img src="assets/blog1.jpg" alt="Coffee blog 1" class="rounded mb-4">
        <h3 class="card-title text-xl font-semibold mb-2">Sustainable Coffee Farming in Ethiopia</h3>
        <p class="card-text text-sm">How farmers are embracing eco-friendly practices and maintaining top quality beans.</p>
      </article>

      <article class="card p-4">
        <img src="assets/blog2.jpg" alt="Coffee blog 2" class="rounded mb-4">
        <h3 class="card-title text-xl font-semibold mb-2">Women in Coffee: Empowerment through Agriculture</h3>
        <p class="card-text text-sm">Meet the women shaping the future of African coffee production.</p>
      </article>

      <article class="card p-4">
        <img src="assets/blog3.jpg" alt="Coffee blog 3" class="rounded mb-4">
        <h3 class="card-title text-xl font-semibold mb-2">Traceability and Technology in Exporting</h3>
        <p class="card-text text-sm">Modern systems bringing transparency and trust to global coffee markets.</p>
      </article>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-[#3e2723] text-white py-8 text-center">
    <p class="text-sm">&copy; 2025 Enter Africa Coffee Exporter. All rights reserved.</p>
  </footer>

  <!-- Scripts -->
  <script>
    const menuBtn = document.getElementById('menuBtn');
    const closeMenu = document.getElementById('closeMenu');
    const mobileMenu = document.getElementById('mobileMenu');

    menuBtn.addEventListener('click', () => {
      mobileMenu.classList.remove('hidden');
    });

    closeMenu.addEventListener('click', () => {
      mobileMenu.classList.add('hidden');
    });

    document.querySelectorAll('#mobileMenu a').forEach(link => {
      link.addEventListener('click', () => mobileMenu.classList.add('hidden'));
    });
  </script>

</body>
</html>