<?php
/* -----------------------------------------------------------------
 * Public homepage. All copy/images below come from admin/data/
 * content.json (edited via the /admin portal); gf_content_defaults()
 * (admin/content-defaults.php) is the fallback for anything missing,
 * so the page never breaks even on a first run with no saved data.
 *
 * Shared head/topbar/header/footer/scripts live in inc/chrome.php so
 * this page and the 6 gallery-<slug>.php category pages render one
 * consistent header and footer instead of six independent copies.
 * --------------------------------------------------------------- */
if (!function_exists('h')) {
  function h($v){ return htmlspecialchars((string)$v, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'); }
}

require __DIR__ . '/admin/content-defaults.php';
require __DIR__ . '/inc/chrome.php';
$defaults = gf_content_defaults();
$savedContent = gf_read_content_json(__DIR__ . '/admin/data/content.json');

$promo    = gf_content_section($savedContent, 'promo', $defaults['promo']);
$hero     = gf_content_section($savedContent, 'hero', $defaults['hero']);
$strip    = gf_content_section($savedContent, 'strip', $defaults['strip']);
$about    = gf_content_section($savedContent, 'workshop', $defaults['workshop']);
$services = gf_content_section($savedContent, 'services', $defaults['services']);
$process  = gf_content_section($savedContent, 'process', $defaults['process']);
$hours    = gf_content_section($savedContent, 'hours', $defaults['hours']);
$contact  = gf_content_section($savedContent, 'contact', $defaults['contact']);
$footer   = gf_content_section($savedContent, 'footer', $defaults['footer']);
$social   = gf_content_section($savedContent, 'social', $defaults['social']);

$hoursDays = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
$socialLabels = ['facebook' => 'Facebook', 'twitter' => 'Twitter / X', 'pinterest' => 'Pinterest', 'linkedin' => 'LinkedIn'];

$telHref = preg_replace('/[^0-9+]/', '', $contact['phone'] ?? '');
$addrParts = array_filter([$contact['address1'] ?? '', $contact['address2'] ?? '', $contact['address3'] ?? '', $contact['address4'] ?? '']);
$addrLine = implode(', ', $addrParts);
$addrHtml = implode('<br>', array_map('h', $addrParts));

$lat = (isset($hours['map_lat']) && is_numeric($hours['map_lat'])) ? (float) $hours['map_lat'] : 51.863609;
$lng = (isset($hours['map_lng']) && is_numeric($hours['map_lng'])) ? (float) $hours['map_lng'] : -2.249009;

$mapPopupHtml = '<h3>Gloucester Framing</h3>' . ($addrHtml ? '<p>' . $addrHtml . '</p>' : '')
  . '<p><a href="https://www.openstreetmap.org/?mlat=' . $lat . '&mlon=' . $lng . '#map=18/' . $lat . '/' . $lng . '" target="_blank" rel="noopener">Open in OpenStreetMap</a></p>';

$pageTitle = 'Gloucester Framing | Bespoke Fine Art & Commercial Framing';
$pageDescription = 'Gloucester Framing — bespoke, hand-made fine art and commercial framing on Commercial Road, Gloucester.';
$navBase = '';
$extraHead = '<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">' . "\n"
  . '<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin="" defer></script>';

ob_start();
?>
  // Opening-hours map — waits for the deferred Leaflet script too
  window.addEventListener('DOMContentLoaded', function () {
    var lat = <?= json_encode($lat) ?>;
    var lng = <?= json_encode($lng) ?>;
    if (typeof L === 'undefined') {
      console.error('Leaflet failed to load.');
      return;
    }
    var map = L.map('map-hours', { scrollWheelZoom: false }).setView([lat, lng], 17);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
    var popupHtml = <?= json_encode($mapPopupHtml) ?>;
    L.marker([lat, lng]).addTo(map).bindPopup(popupHtml).openPopup();
    window.addEventListener('load', function () { map.invalidateSize(); });
  });
<?php
$extraFoot = '<script>' . ob_get_clean() . '</script>';

gf_chrome_head_open();
gf_chrome_topbar_header();
?>

<?php if (!empty($promo['show']) && trim((string) $promo['text']) !== ''): ?>
<div class="promo"><?= h($promo['text']) ?></div>
<?php endif; ?>

<section class="hero" id="top">
  <div class="hero-inner">
    <div class="hero-copy">
      <span class="eyebrow"><?= h($hero['eyebrow']) ?></span>
      <h1><?= h($hero['heading_line1']) ?> <em><?= h($hero['heading_em']) ?></em></h1>
      <p class="lead"><?= h($hero['lead']) ?></p>
      <div class="hero-actions">
        <a href="#services" class="btn btn-primary"><?= h($hero['button_text']) ?></a>
      </div>
    </div>
    <div class="hero-frame">
      <?php if (trim((string) $hero['tag']) !== ''): ?><span class="tag"><?= h($hero['tag']) ?></span><?php endif; ?>
      <div class="mat">
        <div class="art">
          <?php if (!empty($hero['frame_image'])): ?>
          <img src="<?= h($hero['frame_image']) ?>" alt="">
          <?php endif; ?>
        </div>
      </div>
      <?php if (trim((string) $hero['frame_caption']) !== ''): ?><div class="caption"><?= h($hero['frame_caption']) ?></div><?php endif; ?>
    </div>
  </div>
</section>

<?php $stripWords = array_values(array_filter($strip, function($w){ return trim((string) $w) !== ''; })); ?>
<?php if ($stripWords): ?>
<div class="strip">
  <div class="strip-track">
    <?php foreach (array_merge($stripWords, $stripWords) as $word): ?><span><?= h($word) ?></span><?php endforeach; ?>
  </div>
</div>
<?php endif; ?>

<section class="intro" id="about">
  <div class="container intro-grid">
    <div class="intro-text reveal">
      <span class="section-head kicker"><?= h($about['kicker']) ?></span>
      <p class="lead-line"><?= h($about['lead_line']) ?></p>
      <p><?= h($about['text1']) ?></p>
      <p><?= h($about['text2']) ?></p>
      <div class="stat-row">
        <?php foreach ($about['stats'] as $stat): if (trim((string) ($stat['value'] ?? '')) === '') continue; ?>
        <div class="stat"><strong><?= h($stat['value']) ?></strong><span><?= h($stat['label']) ?></span></div>
        <?php endforeach; ?>
      </div>
    </div>
    <div class="intro-visual reveal">
      <?php if (!empty($about['visual_image'])): ?><img src="<?= h($about['visual_image']) ?>" alt=""><?php endif; ?>
      <?php if (trim((string) $about['visual_label']) !== ''): ?><div class="label"><?= h($about['visual_label']) ?></div><?php endif; ?>
    </div>
  </div>
</section>

<section class="services" id="services">
  <div class="container">
    <div class="section-head center reveal">
      <span class="kicker"><?= h($services['kicker']) ?></span>
      <h2><?= h($services['heading']) ?></h2>
    </div>
    <div class="cards">
      <?php foreach ($services['cards'] as $card): ?>
      <a href="gallery.php?category=<?= h($card['slug']) ?>" class="card reveal">
        <span class="corner"></span>
        <div class="card-top">
          <?php if (!empty($card['image'])): ?><img src="<?= h($card['image']) ?>" alt="<?= h($card['title']) ?>"><?php endif; ?>
          <span class="view-badge">View examples →</span>
        </div>
        <div class="card-body">
          <h3><?= h($card['title']) ?></h3>
          <p><?= h($card['text']) ?></p>
        </div>
      </a>
      <?php endforeach; ?>
    </div>
    <p class="services-note">Click any service above to browse examples from that category.</p>
  </div>
</section>

<section class="process" id="process">
  <div class="container">
    <div class="section-head reveal">
      <span class="kicker"><?= h($process['kicker']) ?></span>
      <h2><?= h($process['heading']) ?></h2>
    </div>
    <div class="steps">
      <?php foreach ($process['steps'] as $step): if (trim((string) ($step['title'] ?? '')) === '') continue; ?>
      <div class="step reveal"><h4><?= h($step['title']) ?></h4><p><?= h($step['text']) ?></p></div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<section class="hours" id="hours">
  <div class="container hours-grid reveal">
    <div>
      <div class="section-head" style="margin-bottom:1.5rem">
        <span class="kicker">Visit us</span>
        <h2>Opening hours</h2>
      </div>
      <div class="hours-list">
        <?php foreach ($hoursDays as $day): $val = $hours[$day] ?? ''; $closed = stripos($val, 'closed') !== false; ?>
        <div class="row<?= $closed ? ' closed' : '' ?>"><span><?= h($day) ?></span><span><?= h($val) ?></span></div>
        <?php endforeach; ?>
      </div>
    </div>
    <div class="map-card">
      <div id="map-hours" role="region" aria-label="Map showing Gloucester Framing's location"></div>
      <div class="map-card-info">
        <h3><?= h($hours['map_caption_title']) ?></h3>
        <p class="locale"><?= h($hours['map_caption_text']) ?></p>
      </div>
    </div>
  </div>
</section>

<section class="cta" id="contact">
  <div class="container">
    <h2><?= h($contact['cta_heading']) ?></h2>
    <p><?= h($contact['cta_text']) ?></p>
    <div class="hero-actions" style="justify-content:center">
      <a href="tel:<?= h($telHref) ?>" class="btn btn-primary">Call <?= h($contact['phone']) ?></a>
      <a href="mailto:<?= h($contact['email']) ?>" class="btn btn-ghost">Email us</a>
    </div>
    <?php if (trim((string) $contact['cta_small_note']) !== ''): ?><p class="note"><?= h($contact['cta_small_note']) ?></p><?php endif; ?>
  </div>
</section>

<?php gf_chrome_footer_scripts(); ?>
