<?php
require_once __DIR__ . '/data.php';

function mockup_page_start(string $title, string $description, string $active = 'home'): void
{
    global $mockupNav, $mockupSite;
    ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#eef4fb">
<title><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></title>
<meta name="description" content="<?= htmlspecialchars($description, ENT_QUOTES, 'UTF-8') ?>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Cormorant+Garamond:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#f5f1e8;
  --bg-soft:#fffdf8;
  --surface:rgba(255,255,255,.84);
  --surface-strong:rgba(255,255,255,.96);
  --line:rgba(22,34,57,.10);
  --text:#13243f;
  --muted:#5d6a7f;
  --brand:#0c5aa6;
  --brand-2:#183a63;
  --gold:#c89a4a;
  --gold-soft:rgba(200,154,74,.12);
  --shadow:0 22px 50px rgba(20, 32, 53, .10);
  --radius-xl:44px;
  --radius-lg:30px;
  --radius-md:20px;
  --container:min(1320px, calc(100% - 32px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 10%, rgba(12,90,166,.12), transparent 20%),
    radial-gradient(circle at 82% 8%, rgba(200,154,74,.14), transparent 18%),
    linear-gradient(180deg, #fdfaf4 0%, #f3efe5 48%, #f6f3ec 100%);
  overflow-x:hidden;
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
::selection{background:rgba(11,95,174,.28);color:#fff}
.container{width:var(--container);margin:0 auto}
.site-shell{position:relative;isolation:isolate}
.site-shell::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.07;
  background-image:linear-gradient(rgba(12,90,166,.10) 1px, transparent 1px),linear-gradient(90deg, rgba(12,90,166,.10) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 94%);
  z-index:-2;
}
header{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(94%, 1460px);
  z-index:1000;
  padding:16px 24px;
  border:1px solid rgba(16,40,74,.08);
  border-radius:999px;
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
}
.nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
}
.brand{
  display:inline-flex;
  align-items:center;
  min-width:0;
}
.site-logo{
  height:48px;
  width:auto;
  display:block;
}
.menu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-width:0;
}
.menu a{
  position:relative;
  color:rgba(18,35,61,.82);
  font-weight:600;
  padding:10px 0;
  letter-spacing:.01em;
}
.menu a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--gold));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 180ms ease;
}
.menu a:hover,
.menu a.is-active{color:#0b5fae}
.menu a:hover::after,
.menu a.is-active::after{transform:scaleX(1)}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 24px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.01em;
  border:1px solid transparent;
  transition:transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--brand), #2470bf 50%, #6da7f0);
  box-shadow:0 18px 30px rgba(12,90,166,.22);
}
.btn-secondary{
  color:#10365e;
  border-color:rgba(11,95,174,.3);
  background:rgba(255,255,255,.86);
}
.header-cta{white-space:nowrap}
.menu-toggle{
  display:none;
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(16,40,74,.10);
  background:rgba(255,255,255,.88);
  color:#10365e;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.menu-toggle span{
  width:22px;
  height:2px;
  border-radius:999px;
  background:#10365e;
}
main{padding-top:116px}
section{padding:110px 0;position:relative}
section:not(.hero)::before,
section:not(.hero)::after{
  content:'';
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  filter:blur(30px);
  z-index:0;
}
section:not(.hero)::before{width:340px;height:340px;left:-120px;top:-100px;background:radial-gradient(circle, rgba(12,90,166,.10), transparent 66%)}
section:not(.hero)::after{width:420px;height:420px;right:-160px;bottom:-180px;background:radial-gradient(circle, rgba(200,154,74,.12), transparent 66%)}
section > *{position:relative;z-index:1}
.hero,
.section-dark,
.section-light,
.cta{
  border-top:1px solid rgba(16,40,74,.06);
  border-bottom:1px solid rgba(16,40,74,.06);
}
.section-dark{
  background:
    radial-gradient(circle at 18% 10%, rgba(12,90,166,.06), transparent 18%),
    linear-gradient(180deg, #f5efe5 0%, #ece4d4 100%);
}
.section-light{
  background:
    radial-gradient(circle at 82% 0%, rgba(200,154,74,.10), transparent 20%),
    linear-gradient(180deg, #fbf8f1 0%, #f3efe7 100%);
  color:#13203a;
}
.section-light .section-heading h2,
.section-light .glass-panel h2,
.section-light .glass-panel h3,
.section-light .contact-card h3,
.section-light .quote strong{color:#10284a}
.section-light .section-heading p,
.section-light .glass-panel p,
.section-light .collection-item span,
.section-light .service-card p,
.section-light .process-card p,
.section-light .quote p,
.section-light .quote footer,
.section-light .contact-card p,
.section-light .contact-card li{color:#516277}
.section-light .glass-panel,
.section-light .contact-card,
.section-light .service-card,
.section-light .process-card,
.section-light .collection-item,
.section-light .quote,
.section-dark .glass-panel,
.section-dark .contact-card,
.section-dark .service-card,
.section-dark .process-card,
.section-dark .collection-item,
.section-dark .quote{
  background:rgba(255,255,255,.88);
  border-color:rgba(16,40,74,.08);
  box-shadow:0 18px 40px rgba(19,36,63,.07);
}
.section-light .pill,
.section-light .badge,
.section-dark .pill,
.section-dark .badge{
  color:#10284a;
  background:rgba(255,255,255,.82);
  border-color:rgba(16,40,74,.08);
}
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:84px 0 50px;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.18) 34%, transparent 60%),
    radial-gradient(circle at 76% 18%, rgba(12,90,166,.10), transparent 26%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:34px;align-items:center}
.hero-copy{max-width:760px}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--brand);font-size:.8rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase
}
.eyebrow::before{
  content:'';width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(200,154,74,.14)
}
.hero h1{margin:18px 0 0;font-family:'Cormorant Garamond',Georgia,"Times New Roman",serif;font-size:clamp(3.4rem,7vw,6.9rem);line-height:.86;letter-spacing:-.05em;max-width:11ch}
.hero p{margin:22px 0 0;max-width:58ch;color:#546377;font-size:1.06rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-pills{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid rgba(16,40,74,.08);color:#10284a;box-shadow:0 10px 30px rgba(17,34,66,.06)}
.hero-card{padding:22px;border-radius:36px;background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,246,240,.92));border:1px solid rgba(16,40,74,.08);box-shadow:0 30px 80px rgba(24,37,61,.10)}
.showcase{position:relative;border-radius:28px;overflow:hidden;min-height:420px;background:radial-gradient(circle at 18% 24%, rgba(12,90,166,.22), transparent 18%),radial-gradient(circle at 82% 16%, rgba(200,154,74,.18), transparent 22%),linear-gradient(145deg, #ffffff 0%, #f2f5f9 48%, #e3edf7 100%);border:1px solid rgba(16,40,74,.08)}
.showcase::before{content:'';position:absolute;inset:16px;border-radius:22px;border:1px solid rgba(16,40,74,.08)}
.window-grid{position:absolute;inset:44px 44px 34px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pane{border-radius:20px;border:1px solid rgba(16,40,74,.10);background:linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.48)),radial-gradient(circle at 30% 20%, rgba(12,90,166,.16), transparent 35%),linear-gradient(180deg, rgba(255,255,255,.95), rgba(235,243,251,.86));backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.pane.large{grid-column:span 2;position:relative;overflow:hidden}
.pane.large::after{content:'';position:absolute;inset:auto 0 0 0;height:24%;background:linear-gradient(180deg, transparent, rgba(11,95,174,.16))}
.badge-row{position:absolute;left:28px;right:28px;bottom:22px;display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid rgba(16,40,74,.08);color:#10284a;font-size:.92rem;box-shadow:0 10px 30px rgba(17,34,66,.06)}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.stat{padding:18px;border-radius:20px;background:rgba(255,255,255,.92);border:1px solid rgba(16,40,74,.08)}
.stat strong{display:block;color:var(--brand);font-size:1.2rem;margin-bottom:4px}
.section-heading{text-align:center;margin-bottom:54px}
.section-heading h2{margin:12px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.1rem,4vw,3.6rem);letter-spacing:-.04em}
.section-heading p{max-width:760px;margin:14px auto 0;color:var(--muted)}
.section-heading .section-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(16,40,74,.08);
  color:#34506f;
  font-size:.92rem;
  font-weight:700;
}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.service-card{
  display:grid;
  gap:16px;
  padding:18px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,236,.96));
  border:1px solid rgba(16,40,74,.08);
  box-shadow:0 18px 50px rgba(17,34,66,.08);
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.service-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(17,34,66,.12);border-color:rgba(12,90,166,.16)}
.service-card .icon{
  width:54px;height:54px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg, var(--brand), #6b9ce0);color:#fff;font-weight:900
}
.card-media{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  aspect-ratio: 1.2 / 0.86;
  background:linear-gradient(135deg, rgba(12,90,166,.14), rgba(200,154,74,.14));
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 420ms ease;
}
.service-card:hover .card-media img{transform:scale(1.04)}
.card-badge{
  position:absolute;
  left:14px;
  top:14px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:#0f325a;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}
.card-copy{color:#56667b}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-head h3{margin:0;font-size:1.18rem;line-height:1.25;letter-spacing:-.02em}
.card-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--brand);
  font-weight:800;
  margin-top:auto;
}
.card-link::after{content:'>';transition:transform 180ms ease}
.service-card:hover .card-link::after{transform:translateX(4px)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.glass-panel{padding:28px;border-radius:30px;background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,246,240,.96));border:1px solid rgba(16,40,74,.08);box-shadow:var(--shadow)}
.feature-panel{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:26px;
  align-items:center;
}
.feature-visual{
  position:relative;
  min-height:420px;
  border-radius:34px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(12,90,166,.12), rgba(200,154,74,.14));
  box-shadow:var(--shadow);
}
.feature-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.feature-overlay{
  position:absolute;
  inset:auto 18px 18px 18px;
  display:grid;
  gap:10px;
}
.feature-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(16,40,74,.08);
  color:#12355d;
  font-weight:800;
  backdrop-filter:blur(12px);
}
.collection-list{display:grid;gap:14px}
.collection-item{padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.92);border:1px solid rgba(16,40,74,.08)}
.collection-item strong{display:block;margin-bottom:6px;font-size:1.05rem}
.feature-list{display:grid;gap:12px;margin-top:18px}
.feature{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.92);border:1px solid rgba(16,40,74,.08)}
.feature .dot{width:12px;height:12px;border-radius:50%;margin-top:6px;flex:0 0 auto;background:var(--gold);box-shadow:0 0 0 6px rgba(200,154,74,.12)}
.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.process-card{padding:22px;border-radius:24px;background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,246,240,.94));border:1px solid rgba(16,40,74,.08)}
.process-card strong{display:block;font-size:2rem;line-height:1;color:var(--gold);margin-bottom:10px}
.testimonials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.quote{padding:26px;border-radius:28px;background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,246,240,.94));border:1px solid rgba(16,40,74,.08)}
.quote p{margin:0;color:#3f5068}
.cta{padding:100px 0;text-align:center}
.cta-box{padding:46px 28px;border-radius:34px;background:radial-gradient(circle at 18% 10%, rgba(12,90,166,.14), transparent 24%),radial-gradient(circle at 82% 0%, rgba(200,154,74,.18), transparent 22%),linear-gradient(135deg, #ffffff, #f7f2e8);border:1px solid rgba(16,40,74,.08);box-shadow:var(--shadow)}
.cta-box h2{color:#10284a}
.cta-box p{max-width:760px;margin:16px auto 0;color:#516277}
.cta-box h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.2rem,4vw,3.8rem);letter-spacing:-.04em}
.contact-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px;align-items:start}
.contact-card{padding:28px;border-radius:30px;background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,246,240,.96));border:1px solid rgba(16,40,74,.08);box-shadow:0 18px 50px rgba(17,34,66,.08)}
.contact-card .card-media{margin-bottom:18px}
.contact-list{list-style:none;display:grid;gap:12px;margin:18px 0 0;padding:0}
.contact-list li{padding:15px 16px;border-radius:16px;background:rgba(255,255,255,.9);border:1px solid rgba(16,40,74,.08)}
.form{display:grid;gap:12px}
.form input,.form select,.form textarea{width:100%;padding:15px 16px;border-radius:14px;border:1px solid rgba(11,95,174,.16);background:rgba(255,255,255,.96);color:#12233d;outline:none}
.form textarea{min-height:128px;resize:vertical}
footer.site-footer{padding:34px 0 42px;border-top:1px solid rgba(16,40,74,.08);color:var(--muted);background:rgba(255,255,255,.74)}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
[data-reveal]{animation:rise .7s ease both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(0,-10px,0) scale(1.02)}
}
@media(max-width:1080px){
  .hero-grid,.split,.contact-grid,.process,.testimonials,.feature-panel{grid-template-columns:1fr 1fr}
  .hero h1{max-width:100%}
}
@media(max-width:920px){
  header{padding:12px 14px;border-radius:24px;top:10px}
  .nav{grid-template-columns:auto auto;grid-template-areas:'brand toggle' 'menu menu';}
  .brand{grid-area:brand}
  .menu-toggle{grid-area:toggle;display:inline-flex;justify-self:end}
  .menu{grid-area:menu;display:none;justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:12px;padding:18px;margin-top:10px;border-radius:24px;background:rgba(255,255,255,.96);border:1px solid rgba(16,40,74,.08);box-shadow:var(--shadow)}
  .site-menu-open .menu{display:flex}
  .header-cta{display:none}
  .hero{min-height:auto;padding-top:64px}
  .hero-grid,.split,.contact-grid,.process,.testimonials,.feature-panel{grid-template-columns:1fr}
  .window-grid{inset:28px 28px 22px}
}
@media(max-width:640px){
  .hero-actions,.hero-pills{flex-direction:column}
  .btn,.pill{width:100%}
  .stats-grid{grid-template-columns:1fr}
  .showcase{min-height:300px}
}
</style>
</head>
<body>
<div class="site-shell">
  <header>
    <div class="nav container">
      <a class="brand" href="index.php" aria-label="<?= htmlspecialchars($mockupSite['brand'], ENT_QUOTES, 'UTF-8') ?>">
        <img class="site-logo" src="/projects/mock/assets/mockup_logo.png" alt="<?= htmlspecialchars($mockupSite['brand'], ENT_QUOTES, 'UTF-8') ?>">
      </a>

      <button class="menu-toggle" type="button" aria-label="Toggle menu" aria-expanded="false" data-menu-toggle>
        <span></span><span></span><span></span>
      </button>

      <nav class="menu" aria-label="Primary">
        <?php foreach ($mockupNav as $key => $item): ?>
          <a class="<?= $active === $key ? 'is-active' : '' ?>" href="<?= htmlspecialchars($item['href'], ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($item['label'], ENT_QUOTES, 'UTF-8') ?></a>
        <?php endforeach; ?>
      </nav>

      <a class="btn btn-primary header-cta" href="contact.php">Book Consultation</a>
    </div>
  </header>
  <main>
<?php
}

function mockup_page_end(): void
{
    global $mockupSite;
    ?>
  </main>
  <footer class="site-footer">
    <div class="container footer-row">
      <div>
        <strong style="display:block;letter-spacing:.12em;text-transform:uppercase;color:#10284a"><?= htmlspecialchars($mockupSite['brand'], ENT_QUOTES, 'UTF-8') ?></strong>
        <span><?= htmlspecialchars($mockupSite['tagline'], ENT_QUOTES, 'UTF-8') ?></span>
      </div>
      <div style="color:#516277"><?= htmlspecialchars($mockupSite['phone'], ENT_QUOTES, 'UTF-8') ?> | <?= htmlspecialchars($mockupSite['address'], ENT_QUOTES, 'UTF-8') ?></div>
    </div>
  </footer>
</div>
<script>
(function () {
  const shell = document.querySelector('.site-shell');
  const toggle = document.querySelector('[data-menu-toggle]');
  const navLinks = document.querySelectorAll('.menu a');
  const revealItems = document.querySelectorAll('[data-reveal]');
  if (toggle && shell) {
    toggle.addEventListener('click', function () {
      const open = shell.classList.toggle('site-menu-open');
      toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
    });
  }
  navLinks.forEach(function (link) {
    link.addEventListener('click', function () {
      shell.classList.remove('site-menu-open');
      if (toggle) toggle.setAttribute('aria-expanded', 'false');
    });
  });
  if ('IntersectionObserver' in window) {
    const io = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.style.animationDelay = '0ms';
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.15 });
    revealItems.forEach(function (item, index) {
      item.style.animationDelay = (index * 90) + 'ms';
      io.observe(item);
    });
  }
})();
</script>
</body>
</html>
<?php
}
