<?php
$c = json_decode(file_get_contents(__DIR__ . '/config.json'), true);
$year = date('Y');

$palettes = [
  'salon' => [
    'bg'=>'#FAF7F4','surface'=>'#FFFFFF','card'=>'rgba(255,255,255,0.7)',
    'accent'=>'#2C1B0E','amber'=>'#B07040','muted'=>'#8A7060',
    'border'=>'rgba(176,112,64,0.15)','glass'=>'rgba(255,255,255,0.55)',
    'gradStart'=>'#FAF7F4','gradEnd'=>'#F0E8DF',
    'heroFrom'=>'rgba(44,27,14,0.72)','heroTo'=>'rgba(44,27,14,0.25)',
  ],
  'frizerie' => [
    'bg'=>'#F4F5F8','surface'=>'#FFFFFF','card'=>'rgba(255,255,255,0.7)',
    'accent'=>'#1C2340','amber'=>'#4A5680','muted'=>'#7A8299',
    'border'=>'rgba(74,86,128,0.15)','glass'=>'rgba(255,255,255,0.55)',
    'gradStart'=>'#F4F5F8','gradEnd'=>'#E8ECF8',
    'heroFrom'=>'rgba(28,35,64,0.78)','heroTo'=>'rgba(28,35,64,0.2)',
  ],
  'cafenea' => [
    'bg'=>'#FBF8F4','surface'=>'#FFFFFF','card'=>'rgba(255,255,255,0.7)',
    'accent'=>'#2C1A0E','amber'=>'#C8862A','muted'=>'#8A7060',
    'border'=>'rgba(200,134,42,0.15)','glass'=>'rgba(255,255,255,0.55)',
    'gradStart'=>'#FBF8F4','gradEnd'=>'#F4EDE2',
    'heroFrom'=>'rgba(44,26,14,0.75)','heroTo'=>'rgba(44,26,14,0.18)',
  ],
  'restaurant' => [
    'bg'=>'#F7F5F0','surface'=>'#FFFFFF','card'=>'rgba(255,255,255,0.7)',
    'accent'=>'#1A1208','amber'=>'#8B5E3C','muted'=>'#7A6858',
    'border'=>'rgba(139,94,60,0.15)','glass'=>'rgba(255,255,255,0.55)',
    'gradStart'=>'#F7F5F0','gradEnd'=>'#EDE8DE',
    'heroFrom'=>'rgba(26,18,8,0.76)','heroTo'=>'rgba(26,18,8,0.2)',
  ],
];
$P = $palettes[$c['vertical']] ?? $palettes['salon'];
$services = $c['services'] ?? [];
$gallery  = $c['galleryPhotos'] ?? [];
$reviews  = $c['reviews'] ?? [];
?>
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($c['businessName']) ?> — <?= htmlspecialchars($c['tagline'] ?? 'Ialoveni') ?></title>
<meta name="description" content="<?= htmlspecialchars($c['metaDesc'] ?? '') ?>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:<?= $P['bg'] ?>;color:<?= $P['accent'] ?>;line-height:1.6;-webkit-font-smoothing:antialiased}

/* NAV — glass */
nav{
  position:fixed;top:0;width:100%;z-index:100;height:66px;
  display:flex;align-items:center;justify-content:space-between;padding:0 6%;
  background:<?= $P['glass'] ?>;
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid <?= $P['border'] ?>;
}
.logo{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600;color:<?= $P['accent'] ?>;text-decoration:none;letter-spacing:.02em}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:<?= $P['muted'] ?>;text-decoration:none;transition:color .2s}
.nav-links a:hover{color:<?= $P['amber'] ?>}
.nav-cta{background:<?= $P['accent'] ?>;color:#fff;padding:.55rem 1.4rem;border-radius:50px;font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:opacity .2s}
.nav-cta:hover{opacity:.8}

/* HERO */
.hero{position:relative;height:90vh;min-height:560px;display:flex;align-items:flex-end;padding-top:66px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.7)}
.hero-grad{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,<?= $P['heroFrom'] ?> 0%,<?= $P['heroTo'] ?> 60%,transparent 100%)}
.hero-content{position:relative;z-index:2;padding:0 6% 5rem;width:100%;max-width:840px}

/* Glass badge */
.glass-badge{
  display:inline-flex;align-items:center;gap:.7rem;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:50px;padding:.55rem 1.3rem;margin-bottom:1.5rem;
}
.glass-badge .stars{color:#F0C97A;font-size:.76rem;letter-spacing:.08em}
.glass-badge span{font-size:.75rem;color:rgba(255,255,255,.85)}

.eyebrow{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.eyebrow::before{content:'';width:22px;height:1px;background:rgba(255,255,255,.4);flex-shrink:0}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.8rem,5.5vw,5rem);font-weight:400;line-height:1.06;color:#fff;margin-bottom:1.25rem}
.hero h1 em{font-style:italic;color:rgba(230,205,155,.92)}
.hero-desc{font-size:.88rem;color:rgba(255,255,255,.68);line-height:1.9;max-width:460px;margin-bottom:2rem;font-weight:300}
.hero-btns{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.btn-fill{
  background:<?= $P['amber'] ?>;color:#fff;
  padding:.82rem 2rem;border-radius:50px;
  font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;transition:all .25s;display:inline-block;
  box-shadow:0 8px 28px rgba(0,0,0,.2);
}
.btn-fill:hover{opacity:.85;transform:translateY(-1px)}
.btn-ghost{font-size:.78rem;color:rgba(255,255,255,.68);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:1px;transition:all .2s}
.btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.7)}

/* SECTION BASE */
section{padding:6rem 6%}
.s-eyebrow{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:<?= $P['amber'] ?>;display:flex;align-items:center;gap:.65rem;margin-bottom:.9rem}
.s-eyebrow::before{content:'';width:18px;height:1px;background:<?= $P['amber'] ?>;flex-shrink:0}
.s-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.9rem,2.8vw,2.7rem);font-weight:400;line-height:1.15;color:<?= $P['accent'] ?>}

/* SERVICES — glass cards */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-top:3rem}
.svc-card{
  background:<?= $P['glass'] ?>;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid <?= $P['border'] ?>;
  border-radius:20px;padding:2rem 1.75rem;
  transition:all .3s;position:relative;overflow:hidden;
}
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:<?= $P['amber'] ?>;
  transform:scaleX(0);transform-origin:left;transition:transform .35s;border-radius:20px 20px 0 0;
}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.08);border-color:<?= $P['amber'] ?>44}
.svc-card:hover::before{transform:scaleX(1)}
.svc-num{font-family:'Cormorant Garamond',serif;font-size:.72rem;color:<?= $P['amber'] ?>;font-style:italic;margin-bottom:.8rem}
.svc-icon{color:<?= $P['amber'] ?>;margin-bottom:.9rem}
.svc-card h3{font-size:.9rem;font-weight:500;margin-bottom:.4rem;color:<?= $P['accent'] ?>}
.svc-card p{font-size:.78rem;color:<?= $P['muted'] ?>;line-height:1.75}

/* GALLERY */
.gallery-section{background:linear-gradient(135deg,<?= $P['gradStart'] ?>,<?= $P['gradEnd'] ?>)}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:240px 240px;gap:12px;margin-top:3rem}
.gcell{overflow:hidden;border-radius:16px;position:relative}
.gcell:first-child{grid-row:1/3}
.gcell img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.95);transition:filter .4s,transform .55s}
.gcell:hover img{filter:saturate(.95) brightness(1.02);transform:scale(1.05)}

/* REVIEWS */
.reviews-section{background:<?= $P['surface'] ?>}
.reviews-header{display:flex;align-items:center;gap:2.5rem;margin:2rem 0 3rem;flex-wrap:wrap}
.big-score{font-family:'Cormorant Garamond',serif;font-size:5.5rem;font-weight:400;line-height:1;color:<?= $P['accent'] ?>}
.score-detail .stars{color:<?= $P['amber'] ?>;font-size:.85rem;letter-spacing:.1em;margin-bottom:.3rem}
.score-detail span{font-size:.74rem;color:<?= $P['muted'] ?>}
.rg{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.1rem}
.rc{
  background:<?= $P['glass'] ?>;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid <?= $P['border'] ?>;
  border-radius:20px;padding:1.75rem;
  transition:all .25s;
}
.rc:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.07);border-color:<?= $P['amber'] ?>44}
.rc-stars{color:<?= $P['amber'] ?>;font-size:.72rem;letter-spacing:.12em;margin-bottom:.9rem}
.rc-q{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-style:italic;line-height:1.75;margin-bottom:1rem;color:<?= $P['accent'] ?>}
.rc-by{font-size:.7rem;color:<?= $P['muted'] ?>}

/* ABOUT */
.about-section{background:linear-gradient(135deg,<?= $P['gradEnd'] ?>,<?= $P['gradStart'] ?>)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.about-img{border-radius:24px;overflow:hidden;height:480px;box-shadow:0 24px 64px rgba(0,0,0,.12)}
.about-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.82)}
.about-copy p{font-size:.85rem;color:<?= $P['muted'] ?>;line-height:1.95;margin-top:1.4rem}
.tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.tag{
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:<?= $P['amber'] ?>;
  background:<?= $P['glass'] ?>;
  backdrop-filter:blur(12px);
  border:1px solid <?= $P['border'] ?>;
  padding:.35rem 1rem;border-radius:50px;
}

/* CONTACT */
.contact-section{background:<?= $P['surface'] ?>}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3rem}
.info-rows{display:flex;flex-direction:column;gap:.85rem}
.info-row{
  padding:1.2rem 1.5rem;
  background:<?= $P['glass'] ?>;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid <?= $P['border'] ?>;
  border-radius:16px;transition:border-color .2s;
}
.info-row:hover{border-color:<?= $P['amber'] ?>66}
.ir-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:<?= $P['muted'] ?>;margin-bottom:.22rem}
.ir-val{font-size:.9rem;font-weight:500}
.ir-val a{color:<?= $P['accent'] ?>;text-decoration:none}
.cta-box{
  background:<?= $P['accent'] ?>;
  border-radius:24px;padding:3rem 2.5rem;text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,.15);
}
.cta-box h3{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:400;color:#fff;line-height:1.2;margin-bottom:.65rem}
.cta-box p{font-size:.8rem;color:rgba(255,255,255,.55);margin-bottom:1.75rem;line-height:1.85}
.cta-box a{
  background:<?= $P['amber'] ?>;color:#fff;
  padding:.88rem 2.25rem;border-radius:50px;
  font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;display:inline-block;
  box-shadow:0 8px 24px rgba(0,0,0,.2);transition:opacity .2s;
}
.cta-box a:hover{opacity:.85}

footer{
  border-top:1px solid <?= $P['border'] ?>;
  padding:1.75rem 6%;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.75rem;background:<?= $P['glass'] ?>;
  backdrop-filter:blur(20px);
}
.f-logo{font-family:'Cormorant Garamond',serif;font-size:.95rem;color:<?= $P['muted'] ?>}
.f-copy{font-size:.7rem;color:<?= $P['muted'] ?>}

/* SVG icons */
.svg-icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Responsive */
@media(max-width:900px){
  .hero{height:72vw;min-height:420px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .about-img{height:260px;order:-1}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gcell:first-child{grid-row:auto}
  nav .nav-links{display:none}
}
@media(max-width:580px){
  section{padding:4rem 5%}
  .svc-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .rg{grid-template-columns:1fr}
  .hero h1{font-size:2.6rem}
}
</style>
</head>
<body>

<nav>
  <?php $logoFiles = glob(__DIR__ . '/logo.*'); ?>
  <?php if (!empty($logoFiles)): ?>
    <a href="#" class="logo-img"><img src="<?= basename($logoFiles[0]) ?>?v=<?= filemtime($logoFiles[0]) ?>" alt="<?= htmlspecialchars($c['businessName']) ?>" style="height:36px;width:auto;display:block;object-fit:contain"></a>
  <?php else: ?>
    <a href="#" class="logo"><?= htmlspecialchars($c['businessName']) ?></a>
  <?php endif; ?>
  <ul class="nav-links">
    <li><a href="#servicii">Servicii</a></li>
    <li><a href="#galerie">Galerie</a></li>
    <li><a href="#recenzii">Recenzii</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <a href="#contact" class="nav-cta">Rezervă</a>
</nav>

<div class="hero">
  <div class="hero-bg"><img src="<?= htmlspecialchars($c['heroPhoto']) ?>" alt="<?= htmlspecialchars($c['businessName']) ?>"></div>
  <div class="hero-grad"></div>
  <div class="hero-content">
    <div class="glass-badge">
      <span class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
      <span><strong><?= htmlspecialchars($c['rating']) ?></strong> &middot; Top rated &icirc;n <?= htmlspecialchars(explode(',', $c['address'])[count(explode(',', $c['address']))-1]) ?></span>
    </div>
    <div class="eyebrow"><?= htmlspecialchars(ucfirst($c['vertical'] ?? '')) ?> &middot; <?= htmlspecialchars($c['address']) ?></div>
    <h1><?= nl2br(htmlspecialchars($c['heroTitle'])) ?></h1>
    <p class="hero-desc"><?= htmlspecialchars($c['heroDesc']) ?></p>
    <div class="hero-btns">
      <a href="#contact" class="btn-fill">Rezervă acum</a>
      <a href="#servicii" class="btn-ghost">Descoperă serviciile &rarr;</a>
    </div>
  </div>
</div>

<?php if (!empty($services)): ?>
<section id="servicii" style="background:<?= $P['surface'] ?>">
  <div class="s-eyebrow">Ce oferim</div>
  <h2 class="s-title">Servicii de calitate,<br>pentru fiecare client</h2>
  <div class="svc-grid">
    <?php foreach ($services as $i => $svc): ?>
    <div class="svc-card">
      <div class="svc-num">0<?= $i+1 ?></div>
      <div class="svc-icon">
        <svg class="svg-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
      </div>
      <h3><?= htmlspecialchars($svc['name']) ?></h3>
      <p><?= htmlspecialchars($svc['desc']) ?></p>
    </div>
    <?php endforeach; ?>
  </div>
</section>
<?php endif; ?>

<?php if (!empty($gallery)): ?>
<section id="galerie" class="gallery-section">
  <div class="s-eyebrow">Galerie</div>
  <h2 class="s-title">Spațiul nostru,<br>atmosfera noastră</h2>
  <div class="gallery-grid">
    <?php foreach ($gallery as $url): ?>
    <div class="gcell"><img src="<?= htmlspecialchars($url) ?>" loading="lazy" alt=""></div>
    <?php endforeach; ?>
  </div>
</section>
<?php endif; ?>

<?php if (!empty($reviews)): ?>
<section id="recenzii" class="reviews-section">
  <div class="s-eyebrow">Recenzii clienți</div>
  <h2 class="s-title">Ce spun clienții noștri</h2>
  <div class="reviews-header">
    <div class="big-score"><?= htmlspecialchars($c['rating']) ?></div>
    <div class="score-detail">
      <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <span>Rating Google</span><br>
      <span style="margin-top:.3rem;display:block"><?= htmlspecialchars($c['address']) ?></span>
    </div>
  </div>
  <div class="rg">
    <?php foreach ($reviews as $r): ?>
    <div class="rc review-card">
      <div class="rc-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <p class="rc-q">&ldquo;<?= htmlspecialchars($r['text']) ?>&rdquo;</p>
      <div class="rc-by">&mdash; <?= htmlspecialchars($r['name']) ?><?= !empty($r['ago']) ? ' &middot; ' . htmlspecialchars($r['ago']) . ' &icirc;n urmă' : '' ?></div>
    </div>
    <?php endforeach; ?>
  </div>
</section>
<?php endif; ?>

<!-- ── PANELS SECTION ─────────────────────────── -->
<section style="background:<?= $P['gradStart'] ?>;padding:5rem 6%">
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem;max-width:1200px;margin:0 auto">

    <!-- Panel 1 — Photo card -->
    <div style="position:relative;border-radius:22px;overflow:hidden;min-height:320px;background:<?= $P['glass'] ?>;border:1px solid <?= $P['border'] ?>">
      <?php $panelPhoto = $gallery[0] ?? $c['heroPhoto']; ?>
      <img src="<?= htmlspecialchars($panelPhoto) ?>" alt="<?= htmlspecialchars($c['businessName']) ?>"
        style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) brightness(.88);transition:transform .7s ease"
        onmouseover="this.style.transform='scale(1.04)'" onmouseout="this.style.transform='scale(1)'">
      <!-- gradient overlay -->
      <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.2) 55%,transparent 100%)"></div>
      <!-- content -->
      <div style="position:absolute;bottom:0;left:0;right:0;padding:1.6rem">
        <div style="font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:<?= $P['amber'] ?>;margin-bottom:.5rem">Specialitate</div>
        <div style="font-family:'Cormorant Garamond',serif;font-weight:400;font-style:italic;font-size:1.65rem;color:#fff;line-height:1.15;margin-bottom:.4rem">
          <?= htmlspecialchars($c['services'][0]['name'] ?? $c['businessName']) ?>
        </div>
        <div style="font-size:.74rem;color:rgba(255,255,255,.45);line-height:1.65">
          <?= htmlspecialchars($c['services'][0]['desc'] ?? ($c['tagline'] ?? '')) ?>
        </div>
      </div>
      <!-- top badge -->
      <div style="position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,0.45);backdrop-filter:blur(12px);border:1px solid <?= $P['border'] ?>;border-radius:50px;padding:.3rem .85rem;font-size:.6rem;color:<?= $P['amber'] ?>;font-weight:600;letter-spacing:.08em">
        <?= htmlspecialchars($c['vertical'] ?? 'Premium') ?>
      </div>
    </div>

    <!-- Panel 2 — Quote -->
    <div style="background:<?= $P['glass'] ?>;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid <?= $P['border'] ?>;border-radius:22px;padding:2rem;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden">
      <!-- Ambient glow -->
      <div style="position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:radial-gradient(circle,<?= $P['amber'] ?>18,transparent);pointer-events:none"></div>
      <!-- Quote mark -->
      <div style="font-family:'Cormorant Garamond',serif;font-weight:400;font-size:7rem;line-height:.8;color:<?= $P['amber'] ?>18;position:absolute;top:.5rem;left:1.2rem;pointer-events:none;user-select:none">"</div>

      <div style="flex:1;display:flex;align-items:center">
        <p style="font-family:'Cormorant Garamond',serif;font-weight:400;font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);color:<?= $P['accent'] ?>;line-height:1.55;position:relative;z-index:1">
          <?php
            $q = $c['aboutText1'] ?? '';
            $words = explode(' ', $q);
            echo htmlspecialchars(implode(' ', array_slice($words, 0, 25)));
            if (count($words) > 25) echo '...';
          ?>
        </p>
      </div>

      <div style="display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid <?= $P['border'] ?>">
        <div style="display:flex;align-items:center;gap:.65rem">
          <div style="width:30px;height:30px;background:<?= $P['glass'] ?>;border:1px solid <?= $P['border'] ?>;border-radius:50%;display:grid;place-items:center">
            <svg style="width:14px;height:14px;stroke:<?= $P['amber'] ?>;fill:none;stroke-width:1.8;stroke-linecap:round" viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
          </div>
          <div>
            <div style="font-size:.72rem;font-weight:500;color:<?= $P['accent'] ?>"><?= htmlspecialchars($c['businessName']) ?></div>
            <div style="font-size:.6rem;color:<?= $P['muted'] ?>;margin-top:.1rem"><?= htmlspecialchars($c['address'] ?? '') ?></div>
          </div>
        </div>
        <?php if (!empty($c['rating'])): ?>
        <div style="text-align:right">
          <div style="font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.6rem;color:<?= $P['amber'] ?>;line-height:1"><?= $c['rating'] ?><span style="font-size:.8rem;opacity:.6">★</span></div>
          <div style="font-size:.58rem;color:<?= $P['muted'] ?>;text-transform:uppercase;letter-spacing:.08em">Google</div>
        </div>
        <?php endif; ?>
      </div>
    </div>

    <!-- Panel 3 — CTA -->
    <div style="background:<?= $P['glass'] ?>;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid <?= $P['border'] ?>;border-radius:22px;padding:2rem;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden">
      <div style="position:absolute;top:-50px;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(circle,<?= $P['amber'] ?>14,transparent);pointer-events:none"></div>

      <div>
        <div style="font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:<?= $P['muted'] ?>;margin-bottom:.85rem">Contact & Rezervări</div>
        <div style="font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(1.5rem,2.5vw,2rem);color:<?= $P['accent'] ?>;line-height:1.15;margin-bottom:.8rem">
          Vino să ne<br><em>cunoaștem</em>
        </div>
        <p style="font-size:.77rem;color:<?= $P['muted'] ?>;line-height:1.8">
          <?= htmlspecialchars($c['address'] ?? '') ?><br>
          <?php
            $sch = $c['schedule'] ?? [];
            $firstDay = '';
            foreach ($sch as $day => $hours) {
              if (!empty($hours) && $hours !== 'Închis') { $firstDay = $hours; break; }
            }
            if ($firstDay) echo 'Luni–Sâmbătă: ' . htmlspecialchars($firstDay);
          ?>
        </p>
      </div>

      <div style="display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem">
        <a href="https://wa.me/<?= preg_replace('/[^0-9]/','',$c['phone'] ?? '') ?>" target="_blank"
          style="background:<?= $P['amber'] ?>;color:#fff;padding:.88rem 1.5rem;border-radius:50px;font-size:.8rem;font-weight:600;text-decoration:none;text-align:center;letter-spacing:.04em;transition:opacity .2s;display:flex;align-items:center;justify-content:center;gap:.5rem"
          onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
          <svg style="width:15px;height:15px;fill:currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M11.999 2C6.477 2 2 6.477 2 12c0 1.99.583 3.842 1.582 5.394L2 22l4.741-1.564A9.943 9.943 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2z"/></svg>
          Scrie pe WhatsApp
        </a>
        <div style="display:flex;align-items:center;justify-content:center;gap:1rem">
          <div style="display:flex;align-items:center;gap:.3rem;font-size:.67rem;color:<?= $P['muted'] ?>">
            <svg style="width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <?= htmlspecialchars($c['hours'] ?? 'Lun–Sâm 10:00–20:00') ?>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

<section class="about-section">
  <div class="about-grid">
    <div class="about-img"><img src="<?= htmlspecialchars($gallery[0] ?? $c['heroPhoto']) ?>" alt="Despre noi" loading="lazy"></div>
    <div class="about-copy">
      <div class="s-eyebrow">Povestea noastră</div>
      <h2 class="s-title"><?= htmlspecialchars($c['businessName']) ?></h2>
      <p><?= htmlspecialchars($c['aboutText1'] ?? '') ?></p>
      <p><?= htmlspecialchars($c['aboutText2'] ?? '') ?></p>
      <?php if (!empty($c['tags'])): ?>
      <div class="tags">
        <?php foreach ($c['tags'] as $tag): ?>
        <span class="tag"><?= htmlspecialchars($tag) ?></span>
        <?php endforeach; ?>
      </div>
      <?php endif; ?>
    </div>
  </div>
</section>

<section id="contact" class="contact-section">
  <div class="s-eyebrow">Contact</div>
  <h2 class="s-title">Rezervă o programare</h2>
  <div class="contact-grid">
    <div class="info-rows">
      <div class="info-row"><div class="ir-label">Telefon</div><div class="ir-val"><a href="tel:<?= preg_replace('/\s+/','',$c['phone']) ?>"><?= htmlspecialchars($c['phone']) ?></a></div></div>
      <div class="info-row"><div class="ir-label">Adresă</div><div class="ir-val"><?= htmlspecialchars($c['address']) ?></div></div>
      <div class="info-row"><div class="ir-label">Program</div><div class="ir-val"><?= htmlspecialchars($c['hours']) ?></div></div>
      <?php if (!empty($c['instagram'])): ?>
      <div class="info-row"><div class="ir-label">Instagram</div><div class="ir-val"><a href="https://instagram.com/<?= htmlspecialchars($c['instagram']) ?>" target="_blank" style="color:<?= $P['amber'] ?>">@<?= htmlspecialchars($c['instagram']) ?></a></div></div>
      <?php endif; ?>
    </div>
    <div class="cta-box">
      <h3>Te așteptăm<br>cu drag</h3>
      <p>Sună acum pentru o programare. Echipa noastră te va servi cu plăcere.</p>
      <a href="tel:<?= preg_replace('/\s+/','',$c['phone']) ?>">Sună acum</a>
    </div>
  </div>
</section>

<footer>
  <div class="f-logo"><?= htmlspecialchars($c['businessName']) ?></div>
  <div class="f-copy">&copy; <?= $year ?> <?= htmlspecialchars($c['businessName']) ?> &middot; <?= htmlspecialchars($c['address']) ?></div>
</footer>

<?php if (!empty($c['isDemo'])): ?>
<style>
.demo-bar{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:rgba(28,35,64,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.1);color:#fff;padding:.75rem 5%;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.demo-bar-text{font-size:.78rem;color:rgba(255,255,255,.72)}
.demo-bar-text strong{color:#fff}
.demo-buy{background:<?= $P['amber'] ?>;color:#fff;padding:.58rem 1.4rem;border-radius:50px;font-size:.76rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:opacity .2s}
.demo-buy:hover{opacity:.85}
.demo-price{font-size:.8rem;color:rgba(255,255,255,.45);white-space:nowrap}
</style>
<div class="demo-bar">
  <div class="demo-bar-text">Site demo creat gratuit pentru <strong><?= htmlspecialchars($c['businessName']) ?></strong> de către OZORWebFactory</div>
  <div style="display:flex;align-items:center;gap:1rem;flex-shrink:0">
    <span class="demo-price">149€ &middot; o singură plată</span>
    <a href="<?= htmlspecialchars($c['buyUrl'] ?? '#') ?>" class="demo-buy">Cumpără site-ul &rarr;</a>
  </div>
</div>
<style>footer{padding-bottom:4.5rem}</style>
<?php endif; ?>

<?php if (!empty($c['phone'])): ?>
<?php $waPhone = preg_replace('/\D/','', $c['phone']); if(substr($waPhone,0,1)!=='3') $waPhone='373'.$waPhone; $waMsg=urlencode('Bună ziua! Aș dori informații despre '.$c['businessName'].'.'); ?>
<style>
.wa-float{position:fixed;bottom:<?= !empty($c['isDemo']) ? '5.5rem' : '1.75rem' ?>;right:1.75rem;z-index:9998}
.wa-float a{width:54px;height:54px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(37,211,102,.4);transition:transform .25s,box-shadow .25s;text-decoration:none}
.wa-float a:hover{transform:scale(1.1);box-shadow:0 10px 32px rgba(37,211,102,.5)}
.wa-float svg{width:28px;height:28px;fill:#fff}
</style>
<div class="wa-float">
  <a href="https://wa.me/<?= $waPhone ?>?text=<?= $waMsg ?>" target="_blank" rel="noopener" title="WhatsApp">
    <svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
  </a>
</div>
<?php endif; ?>

</body>
</html>
