
<!DOCTYPE html>
<html lang="en">
<style>
@media (max-width: 768px) {
  .site-header { padding-left: 16px; padding-right: 16px; }
  .nav-toggle { margin-left: auto; padding-left: 16px; padding-bottom: 4px; }
}
body.no-scroll { overflow: hidden; }

.site-footer .footer-main{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: flex-start !important;
  text-align: initial !important;
  gap: 48px !important;
}
.site-footer .footer-brand{ grid-column: 1 !important; }
.site-footer .footer-contact{
  grid-column: 2 !important;
  text-align: right !important;
  margin: 0 !important;
}
.site-footer .footer-contact p{ margin: 0 0 6px 0 !important; }

@media (max-width: 768px){
  .site-footer .footer-main{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .site-footer .footer-contact{
    grid-column: 1 !important;
    text-align: left !important;
  }
}

.site-footer .footer-contact,
.site-footer .footer-contact *{ user-select: none; }
.site-footer .footer-contact a.copy-link{
  color: #f3eee6 !important;
  background: transparent !important;
  text-decoration: none;
  display: inline-block;
  padding: 2px 4px;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.site-footer .footer-contact a.copy-link:hover{
  text-decoration: underline;
  background: rgba(255,255,255,.06);
}
.site-footer .footer-contact a.copy-link:active{ transform: translateY(1px); }
.site-footer .footer-contact a.copy-link:focus-visible{
  outline: 2px solid #e7d8c9;
  outline-offset: 2px;
}

.copy-toast{
  position: fixed;
  right: 24px;
  bottom: 96px;
  background: #2b221c;
  color: #f3eee6;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.1;
  font-family: inherit;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 2147483000;
}
.copy-toast.show{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .copy-toast{ transition: none; } }
@media (max-width: 768px){
  .copy-toast{
    left: 50%;
    right: auto;
    bottom: 80px;
    transform: translate(-50%, 8px);
  }
  .copy-toast.show{ transform: translate(-50%, 0); }
}

.site-footer .footer-bottom{
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 18px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  border-top: 1px solid rgba(255,255,255,.12);
}
.site-footer .footer-bottom::before,
.site-footer .footer-bottom::after{ content: none !important; display: none !important; }
.site-footer .footer-bottom .footer-copy{
  max-width: none !important;
  white-space: normal;
  opacity: .85;
}
</style>

<head>
    <?= $this->Html->charset() ?>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="csrfToken" content="<?= $this->request->getAttribute('csrfToken'); ?>">
    <?= $this->Html->css('normalize.min.css') ?>
    <?= $this->Html->css('home.css') ?>
    <?= $this->Html->css('contact.css') ?>
    <?= $this->Html->css('responsive.css') ?>
    <?= $this->Html->css('products') ?>
    <title><?= h($this->ContentBlock->text('site-title')) ?></title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <!-- Base + page styles -->
    <?= $this->Html->css(['normalize.min']) ?>
    <?= $this->Html->css(['home']) ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('meta') ?>
    <?= $this->fetch('script') ?>
</head>
<body>
<header class="site-header">
    <div class="container header-inner">
        <div class="brand"><a href="/">BrewHub Coffee</a></div>
        <button class="nav-toggle" aria-expanded="false" aria-controls="site-nav">
          <span class="sr-only">Menu</span> ☰
        </button>
        <nav id="site-nav" class="nav">
            <?= $this->Html->link('Shop All', ['controller'=>'ProductBrowser','action'=>'index'], ['class'=>'nav-link']) ?>
            <?= $this->Html->link('About', '/#about') ?>  <!-- in-page jump -->
            <?= $this->Html->link('Contact', ['controller' => 'Contact', 'action' => 'index']) ?>

                <?php
                if (!$this->Identity->isLoggedIn()) {
                    echo $this->Html->link(
                        'Log in',
                        ['controller' => 'Auth', 'action' => 'login'],
                        ['class' => 'button button-outline']);
                }
                ?>
                <?php
                if ($this->Identity->isLoggedIn()) {
                    echo $this->Html->link('Logout', ['controller' => 'Auth', 'action' => 'logout']);
                }
                ?>
                <?php
                if ($this->Identity->isLoggedIn() && $this->Identity->get('role') != 'customer' ) {
                    echo $this->Html->link('Dashboard', ['controller' => 'Auth', 'action' => 'adminDashboard']);
                }
                ?>
        </nav>
        <div class="header-right">
          <?php
          $cart = (array)$this->getRequest()->getSession()->read('Cart');
          $count = array_sum($cart);
          ?>
          <?php if ($this->Identity->isLoggedIn()): ?>
            <?= $this->Html->link('Profile', ['controller' => 'Users', 'action' => 'profile'], ['class' => 'small-link', 'style' => 'margin-right:12px;']) ?>
          <?php endif; ?>
          <?= $this->Html->link('Cart ('.$count.')', ['controller' => 'Cart', 'action' => 'index'], ['class' => 'small-link']) ?>
        </div>
    </div>
</header>

<main>
    <?= $this->fetch('content') ?>
    <?= $this->Flash->render() ?>

</main>
<footer class="site-footer">
  <div class="container footer-main">
    <div class="footer-brand">BrewHub<br/>Coffee</div>

    <div class="footer-right">
      <div class="footer-contact">
        <?php
          $phone = $this->ContentBlock->text('contact-phone');
          $email = $this->ContentBlock->text('contact-email');
          $addr  = $this->ContentBlock->text('contact-address');
          $tel   = preg_replace('/\s+/', '', $phone);
          $mapsQ = urlencode($addr);
        ?>
        <p>
          <a href="tel:<?= h($tel) ?>"
             class="copy-link"
             data-copy="<?= h($phone) ?>"
             aria-label="Copy phone to clipboard">
            <?= h($phone) ?>
          </a>
        </p>
        <p>
          <a href="mailto:<?= h($email) ?>"
             class="copy-link"
             data-copy="<?= h($email) ?>"
             aria-label="Copy email to clipboard">
            <?= h($email) ?>
          </a>
        </p>
        <p>
          <a href="https://maps.google.com/?q=<?= $mapsQ ?>"
             target="_blank" rel="noopener"
             class="copy-link"
             data-copy="<?= h($addr) ?>"
             aria-label="Copy address to clipboard">
            <?= h($addr) ?>
          </a>
        </p>
      </div>
    </div>
  </div>

  <div class="footer-bottom">
    <div class="footer-copy">© <?= date('Y') ?> <?= $this->ContentBlock->text('footer-html') ?></div>
  </div>
</footer>

<?= $this->element('brewbot_gemini'); ?>
<script>
(function () {
  const btn = document.querySelector('.nav-toggle');
  const nav = document.getElementById('site-nav');
  if (!btn || !nav) return;

  function setOpen(open) {
    btn.setAttribute('aria-expanded', String(open));
    nav.classList.toggle('open', open);
    document.body.classList.toggle('no-scroll', open);
  }

  btn.addEventListener('click', () => {
    const open = btn.getAttribute('aria-expanded') === 'true';
    setOpen(!open);
  });

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') {
      setOpen(false);
      btn.focus();
    }
  });

  nav.addEventListener('click', (e) => {
    const link = e.target.closest('a');
    if (!link) return;
    if (btn.getAttribute('aria-expanded') === 'true') setOpen(false);
  });

  document.addEventListener('click', (e) => {
    if (btn.getAttribute('aria-expanded') !== 'true') return;
    const clickedToggle = e.target.closest('.nav-toggle');
    const clickedNav = e.target.closest('#site-nav');
    if (!clickedToggle && !clickedNav) setOpen(false);
  });
})();
</script>

<div id="discountModal" style="
  display:none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.4);
">
  <div style="
    background-color: #fff;
    margin: 15% auto;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  ">
    <h2 style="color:#4b2e05;">☕ Special Offer!</h2>
    <p>Join with us to have <strong>5% discount</strong> for your next order.</p>
    <button id="closeModalBtn" style="
      background-color:#4b2e05;
      color:white;
      border:none;
      padding:10px 20px;
      border-radius:5px;
      cursor:pointer;
      margin-top:10px;
    ">Join Now</button>
  </div>
</div>


<script>
window.addEventListener("load", function() {
  if (sessionStorage.getItem("discountShown")) return;
  setTimeout(() => {
    document.getElementById("discountModal").style.display = "block";
  }, 2000);
  const modal = document.getElementById("discountModal");
  const closeBtn = document.getElementById("closeModalBtn");
  const LOGIN_URL = "/auth/login";
  function closeModal() {
    modal.style.display = "none";
    sessionStorage.setItem("discountShown", "true");
  }
  closeBtn.addEventListener("click", () => {
    closeModal();
    window.location.href = LOGIN_URL;
  });
  window.addEventListener("click", (event) => {
    if (event.target === modal) closeModal();
  });
  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") closeModal();
  });
});
</script>


</body>
</html>
