<?php
// Shared layout for Herbal Wellness using Taste of Africa design system
/*
 * Usage:
 *   $page_title = 'Your Title';
 *   $page_content = function () {
 *       // your page content here
 *   };
 *   include __DIR__ . '/layout.php';
 */

if (!isset($page_title)) { $page_title = 'A Taste of Africa Marketplace'; }
if (!isset($page_description)) { $page_description = 'A secure bridge between clinical herbalism and heritage knowledge.'; }
if (!isset($body_class)) { $body_class = 'antialiased'; }

// Lightweight preview protection: allow local access or require HTTP Basic auth
$__preview_allow_local = in_array($_SERVER['REMOTE_ADDR'] ?? '', ['127.0.0.1', '::1'], true) || php_sapi_name() === 'cli';
$__preview_basic_user = 'reviewer';
$__preview_basic_pass = '123456';
if (! $__preview_allow_local) {
    $auth_user = $_SERVER['PHP_AUTH_USER'] ?? null;
    $auth_pass = $_SERVER['PHP_AUTH_PW'] ?? null;
    if ($auth_user !== $__preview_basic_user || $auth_pass !== $__preview_basic_pass) {
        header('WWW-Authenticate: Basic realm="Herbal Wellness Preview"');
        header('HTTP/1.0 401 Unauthorized');
        echo 'Authentication required.';
        exit;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($page_title) ?></title>
    <meta name="description" content="<?= htmlspecialchars($page_description) ?>" />
    <!-- Main CSS -->
    <link rel="stylesheet" href="/atasteofafricanmarketplace/assets/dist/assets/index-DZRhnU2s.css">
    <link rel="stylesheet" href="/atasteofafricanmarketplace/assets/dashboard.css">
    <link rel="stylesheet" href="/atasteofafricanmarketplace/assets/login-choice.css">
    <link rel="stylesheet" href="/atasteofafricanmarketplace/assets/login.css">
    <link rel="stylesheet" href="/atasteofafricanmarketplace/assets/register.css">
    <style>
    :root {
      --primary-50: #eff6ff;
      --primary-100: #dbeafe;
      --primary-600: #2563eb;
      --primary-700: #1d4ed8;
      --neutral-600: #4b5563;
      --neutral-900: #111827;
    }
    .bg-hero {
      background: linear-gradient(135deg, #f0fdf4 0%, #f3f4f6 100%);
    }
    .text-primary-600 { color: var(--primary-600); }
    .bg-primary-100 { background-color: var(--primary-100); }
    .text-primary-700 { color: var(--primary-700); }
    .bg-primary-600 { background-color: var(--primary-600); }
    .bg-amber-100 { background-color: #fef3c7; }
    .text-amber-700 { color: #b45309; }
    .text-amber-600 { color: #d97706; }
    .bg-emerald-100 { background-color: #dcfce7; }
    .text-emerald-700 { color: #047857; }
    .text-emerald-600 { color: #059669; }
    .text-neutral-600 { color: var(--neutral-600); }
    .text-neutral-900 { color: var(--neutral-900); }
    .font-display { font-family: Georgia, serif; }
    .card {
      background: white;
      border-radius: 0.75rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .card:hover {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    .nav-link {
      color: var(--neutral-600);
      text-decoration: none;
      font-size: 0.875rem;
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      transition: color 0.2s ease;
    }
    .nav-link:hover {
      color: var(--primary-600);
    }
    .btn {
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      border: none;
      transition: all 0.2s ease;
    }
    .btn-primary {
      background-color: var(--primary-600);
      color: white;
    }
    .btn-primary:hover {
      background-color: var(--primary-700);
    }
    .btn-ghost {
      background-color: transparent;
      color: var(--neutral-600);
      border: 1px solid var(--neutral-600);
    }
    .btn-ghost:hover {
      background-color: var(--neutral-600);
      color: white;
    }
    </style>
    <style>
    .brand-logo {
        width: 100px;
        height: 100px;
        object-fit: contain;
        flex-shrink: 0;
        margin-top: -10px;
    }
    </style>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "A Taste of Africa Marketplace",
      "url": "http://localhost/herbal-wellness",
      "email": "support@tasteofafrica.example",
      "contactPoint": [
        {
          "@type": "ContactPoint",
          "telephone": "+1-555-555-0100",
          "contactType": "customer service",
          "areaServed": "Worldwide",
          "availableLanguage": ["English"]
        }
      ],
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "123 Market St",
        "addressLocality": "Remote",
        "addressRegion": "N/A",
        "postalCode": "00000",
        "addressCountry": "US"
      },
      "sameAs": [
        "https://twitter.com/tasteofafrica",
        "https://instagram.com/tasteofafrica",
        "https://facebook.com/tasteofafrica",
        "https://www.linkedin.com/company/tasteofafrica"
      ]
    }
    </script>
</head>
<body class="<?= htmlspecialchars($body_class) ?>">

    <!-- Navigation -->
    <nav class="fixed w-full z-50 bg-white/90 backdrop-blur-lg shadow-soft border-b border-neutral-200">
        <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
            <div class="flex items-center gap-4">
                <img src="/atasteofafricanmarketplace/assets/images/logo.jpg" alt="Brand logo" class="brand-logo" />
            </div>
            <div class="hidden md:flex space-x-2 items-center">
                                <a href="/atasteofafricanmarketplace/index.php#home" class="nav-link">Home</a>
                                <a href="/atasteofafricanmarketplace/all-coaches.php" class="nav-link">All Coaches</a>
                                <?php $authUser = function_exists('hw_get_auth_user') ? hw_get_auth_user() : null; ?>
                                <?php if ($authUser && isset($authUser['roles']) && (in_array('coach', $authUser['roles']) || in_array('admin', $authUser['roles']))): ?>
                                    <a href="/atasteofafricanmarketplace/index.php#coaches-store" class="nav-link">Coaches Store</a>
                                <?php endif; ?>
                                <a href="/atasteofafricanmarketplace/store.php" class="nav-link">Apothecary</a>
            </div>
            <div class="flex items-center gap-3">
                <?php 
                $authUser = function_exists('hw_get_auth_user') ? hw_get_auth_user() : null;
                if ($authUser): 
                ?>
                    <span class="nav-link text-neutral-600">Welcome, <?= htmlspecialchars($authUser['first_name'] ?? 'User') ?></span>
                    <a href="/atasteofafricanmarketplace/api/auth/logout.php" class="btn btn-ghost">
                        Sign out
                    </a>
                <?php else: ?>
                    <a href="/atasteofafricanmarketplace/login-choice.php" class="nav-link">Sign in</a>
                    <a href="/atasteofafricanmarketplace/register.php" class="btn btn-primary">
                        Begin Journey
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </nav>

    <main class="pt-20">
        <?php if (isset($page_content) && is_callable($page_content)) { $page_content(); } ?>
    </main>

    <footer class="bg-gray-900 text-white py-20 px-6 mt-24">
        <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-start gap-12">
            <div class="max-w-sm">
                <img src="/atasteofafricanmarketplace/assets/images/logo.svg" alt="A Taste of Africa Marketplace" class="logo-img brightness-0 invert mb-6">
                <p class="text-gray-400 leading-relaxed">A Taste of Africa Marketplace: The global destination for heritage healing and botanical integrity. Bridging traditions across the diaspora.</p>
                <div class="mt-6 flex items-center gap-4" aria-label="Social links">
                    <a href="https://twitter.com/tasteofafrica" class="text-gray-400 hover:text-white" aria-label="Twitter" target="_blank" rel="noopener noreferrer">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M23 4.557a9.83 9.83 0 01-2.828.775A4.93 4.93 0 0022.337 3.2a9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-8.38 4.482A13.944 13.944 0 011.671 3.149 4.916 4.916 0 003.195 9.723 4.9 4.9 0 01.964 9.1v.062a4.916 4.916 0 003.941 4.816 4.902 4.902 0 01-2.212.084 4.918 4.918 0 004.588 3.417A9.868 9.868 0 010 19.54a13.94 13.94 0 007.548 2.212c9.056 0 14.01-7.496 14.01-13.986 0-.213-.005-.425-.014-.636A10.012 10.012 0 0023 4.557z"/></svg>
                    </a>
                    <a href="https://instagram.com/tasteofafrica" class="text-gray-400 hover:text-white" aria-label="Instagram" target="_blank" rel="noopener noreferrer">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M7.75 2h8.5A5.75 5.75 0 0122 7.75v8.5A5.75 5.75 0 0116.25 22h-8.5A5.75 5.75 0 012 16.25v-8.5A5.75 5.75 0 017.75 2zm0 1.5A4.25 4.25 0 003.5 7.75v8.5A4.25 4.25 0 007.75 20.5h8.5a4.25 4.25 0 004.25-4.25v-8.5A4.25 4.25 0 0016.25 3.5h-8.5zM12 7a5 5 0 110 10 5 5 0 010-10zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM18.2 6.1a1.1 1.1 0 11-2.2 0 1.1 1.1 0 012.2 0z"/></svg>
                    </a>
                    <a href="https://facebook.com/tasteofafrica" class="text-gray-400 hover:text-white" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 12a10 10 0 10-11.5 9.87v-6.99H7.9v-2.88h2.6V9.41c0-2.57 1.53-3.99 3.88-3.99 1.12 0 2.29.2 2.29.2v2.52h-1.29c-1.27 0-1.66.79-1.66 1.6v1.92h2.83l-.45 2.88h-2.38v6.99A10 10 0 0022 12z"/></svg>
                    </a>
                    <a href="https://www.linkedin.com/company/tasteofafrica" class="text-gray-400 hover:text-white" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M4.98 3.5C4.98 5 3.87 6.11 2.38 6.11S-.22 5 0 3.5C0 2 1.12.89 2.6.89s2.38 1.11 2.38 2.61zM.5 8.5h4.87V24H.5V8.5zM8.37 8.5h4.67v2.09h.07c.65-1.23 2.24-2.52 4.61-2.52 4.93 0 5.84 3.24 5.84 7.45V24h-4.87v-7.19c0-1.71-.03-3.9-2.38-3.9-2.39 0-2.76 1.87-2.76 3.79V24H8.37V8.5z"/></svg>
                    </a>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-20">
                <div>
                    <h6 class="font-bold text-amber-500 uppercase tracking-widest text-xs mb-6">Explore</h6>
                    <ul class="space-y-4 text-gray-400">
                        <li><a href="/atasteofafricanmarketplace/index.php#remedies">The Marketplace</a></li>
                        <li>Heritage Records</li>
                        <li>Ritual Guides</li>
                    </ul>
                </div>
                <div>
                    <h6 class="font-bold text-amber-500 uppercase tracking-widest text-xs mb-6">Legal</h6>
                    <ul class="space-y-4 text-gray-400">
                        <li>HIPAA Compliance</li>
                        <li>Sourcing Ethics</li>
                        <li>Terms of Access</li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
<?php include __DIR__ . '/components/chat-widget.php'; ?>
</body>
</html>
