<?php
/**
 * OZORWebFactory — Template 1: FULLSCREEN OVERLAY CENTRAT
 * Hero: fullscreen image background, dark overlay, centered glassmorphic content
 * Fonts: Playfair Display + Lato — luxury, immersive, cinematic
 */
$c = json_decode(file_get_contents(__DIR__ . '/config.json'), true);
$year = date('Y');

$palettes = [
  'salon'      => ['ov1'=>'rgba(20,10,5,0.72)','ov2'=>'rgba(60,25,10,0.45)','accent'=>'#E8C896','surface'=>'rgba(255,255,255,0.06)','border'=>'rgba(232,200,150,0.2)','muted'=>'rgba(255,255,255,0.55)','bg'=>'#0E0805','card'=>'rgba(255,255,255,0.05)','cardBorder'=>'rgba(255,255,255,0.1)','amber'=>'#D4A256'],
  'frizerie'   => ['ov1'=>'rgba(5,10,28,0.78)','ov2'=>'rgba(15,30,80,0.45)','accent'=>'#8AACF0','surface'=>'rgba(255,255,255,0.06)','border'=>'rgba(138,172,240,0.2)','muted'=>'rgba(255,255,255,0.55)','bg'=>'#050810','card'=>'rgba(255,255,255,0.05)','cardBorder'=>'rgba(255,255,255,0.1)','amber'=>'#6A9AE0'],
  'cafenea'    => ['ov1'=>'rgba(15,8,2,0.75)','ov2'=>'rgba(50,25,5,0.45)','accent'=>'#F0C870','surface'=>'rgba(255,255,255,0.06)','border'=>'rgba(240,200,112,0.2)','muted'=>'rgba(255,255,255,0.55)','bg'=>'#0A0602','card'=>'rgba(255,255,255,0.05)','cardBorder'=>'rgba(255,255,255,0.1)','amber'=>'#D4A840'],
  'restaurant' => ['ov1'=>'rgba(10,5,2,0.78)','ov2'=>'rgba(40,18,8,0.45)','accent'=>'#CCA878','surface'=>'rgba(255,255,255,0.06)','border'=>'rgba(204,168,120,0.2)','muted'=>'rgba(255,255,255,0.55)','bg'=>'#080402','card'=>'rgba(255,255,255,0.05)','cardBorder'=>'rgba(255,255,255,0.1)','amber'=>'#B89060'],
];
$P = $palettes[$c['vertical']] ?? $palettes['salon'];
$services = $c['services'] ?? [];
$reviews  = $c['reviews'] ?? [];
$gallery  = $c['galleryPhotos'] ?? [];
$accent   = $c['accentColor'] ?? $P['amber'];
?><!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'] ?? '') ?></title>
<meta name="description" content="<?= htmlspecialchars($c['metaDesc'] ?? '') ?>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,600&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --accent:<?= $P['accent'] ?>;--muted:<?= $P['muted'] ?>;--border:<?= $P['border'] ?>;
  --bg:<?= $P['bg'] ?>;--card:<?= $P['card'] ?>;--cardBorder:<?= $P['cardBorder'] ?>;
  --amber:<?= $accent ?>
}
body{font-family:'Lato',sans-serif;background:var(--bg);color:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}

/* NAV */
nav{position:fixed;top:0;width:100%;z-index:200;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;transition:background .4s,backdrop-filter .4s}
nav.scrolled{background:rgba(14,8,5,0.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
.logo{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:400;letter-spacing:.06em;text-decoration:none;color:#fff}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.nav-cta{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--amber);text-decoration:none;border:1px solid var(--amber);padding:.45rem 1.1rem;transition:background .2s,color .2s}
.nav-cta:hover{background:var(--amber);color:#000}

/* FULLSCREEN HERO */
.hero{position:relative;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('<?= htmlspecialchars($c['heroPhoto'] ?? '') ?>') center/cover no-repeat;filter:brightness(.6);transform:scale(1.05);transition:transform 10s ease;z-index:0}
.hero:hover .hero-bg{transform:scale(1.08)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,<?= $P['ov1'] ?>,<?= $P['ov2'] ?> 60%,rgba(8,4,2,0.9));z-index:1}
.hero-grain{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");background-size:200px 200px;z-index:2;pointer-events:none}
.hero-content{position:relative;z-index:3;padding:0 2rem;max-width:760px}
.hero-eyebrow{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:1.4rem;opacity:.9}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(3rem,6vw,6.5rem);font-weight:400;line-height:1.05;letter-spacing:-.02em;margin-bottom:1.6rem;color:#fff}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-desc{font-size:.95rem;color:rgba(255,255,255,.65);line-height:1.9;font-weight:300;margin-bottom:2.8rem;max-width:500px;margin-left:auto;margin-right:auto}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap}
.btn-gold{background:var(--amber);color:#000;padding:.9rem 2.2rem;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:opacity .2s,transform .2s;display:inline-block}
.btn-gold:hover{opacity:.88;transform:translateY(-1px)}
.btn-glass{border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.8);padding:.9rem 2.2rem;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;display:inline-block;backdrop-filter:blur(8px);transition:border-color .2s,color .2s}
.btn-glass:hover{border-color:#fff;color:#fff}
.hero-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(255,255,255,.4);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;animation:bounce 2s infinite}
.hero-scroll::after{content:'';display:block;width:1px;height:48px;background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent);margin:0 auto}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
.hero-rating{position:absolute;bottom:2.5rem;right:6%;z-index:3;background:rgba(255,255,255,0.08);backdrop-filter:blur(16px);border:1px solid var(--border);padding:.9rem 1.4rem;text-align:center}
.hero-rating strong{display:block;font-family:'Playfair Display',serif;font-size:2rem;font-weight:400;color:var(--accent);line-height:1}
.hero-rating span{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* SERVICES */
.services{padding:7rem 6%;background:var(--bg);position:relative}
.services::before{content:'';position:absolute;top:0;left:6%;right:6%;height:1px;background:linear-gradient(to right,transparent,var(--border),transparent)}
.section-header{text-align:center;margin-bottom:4rem}
.eyebrow{font-size:.63rem;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,3.5vw,3.2rem);font-weight:400;line-height:1.15;color:#fff}
.section-title em{font-style:italic;color:var(--accent)}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--border)}
.svc-card{background:var(--bg);padding:2.5rem 2rem;transition:background .25s;position:relative;overflow:hidden}
.svc-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--card),transparent);opacity:0;transition:opacity .3s}
.svc-card:hover{background:#111}
.svc-card:hover::after{opacity:1}
.svc-icon{font-size:1.6rem;margin-bottom:1rem;display:block;position:relative;z-index:1}
.svc-num{font-family:'Playfair Display',serif;font-size:.85rem;font-style:italic;color:var(--accent);opacity:.6;margin-bottom:.6rem;position:relative;z-index:1}
.svc-card h3{font-size:.9rem;font-weight:700;margin-bottom:.5rem;color:#fff;letter-spacing:.03em;position:relative;z-index:1}
.svc-card p{font-size:.8rem;color:var(--muted);line-height:1.75;position:relative;z-index:1}

/* GALLERY — fullscreen mosaic */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);height:60vh;min-height:400px}
.gcell{overflow:hidden;position:relative;background:var(--bg)}
.gcell img{width:100%;height:100%;object-fit:cover;filter:brightness(.7) saturate(.75);transition:filter .5s,transform .6s}
.gcell:hover img{filter:brightness(.95) saturate(1);transform:scale(1.06)}
.gcell-label{position:absolute;bottom:0;left:0;right:0;padding:1.2rem;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);color:rgba(255,255,255,.7);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .3s}
.gcell:hover .gcell-label{opacity:1}

/* REVIEWS */
.reviews{padding:7rem 6%;background:#0a0a0a}
.reviews-score{display:flex;align-items:center;gap:2rem;margin:1.5rem 0 3.5rem;flex-wrap:wrap}
.score-big{font-family:'Playfair Display',serif;font-size:5.5rem;font-weight:400;line-height:1;color:var(--accent)}
.score-text .stars{font-size:1rem;color:var(--accent);letter-spacing:.1em}
.score-text span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:.3rem}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:var(--border)}
.rev-card{background:#0a0a0a;padding:2rem;transition:background .25s}
.rev-card:hover{background:#111}
.rev-stars{color:var(--accent);font-size:.75rem;letter-spacing:.12em;margin-bottom:1rem}
.rev-text{font-family:'Playfair Display',serif;font-size:1.05rem;font-style:italic;line-height:1.8;margin-bottom:1.2rem;color:rgba(255,255,255,.85)}
.rev-by{font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.4)}

/* CTA */
.cta{position:relative;padding:8rem 6%;overflow:hidden;text-align:center;background:var(--bg)}
.cta-bg{position:absolute;inset:0;background:url('<?= htmlspecialchars($c['heroPhoto'] ?? '') ?>') center/cover no-repeat;filter:brightness(.15) saturate(.5);z-index:0}
.cta-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,var(--bg) 80%);z-index:1}
.cta-content{position:relative;z-index:2;max-width:600px;margin:0 auto}
.cta h2{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.5rem);font-weight:400;line-height:1.2;color:#fff;margin-bottom:1rem}
.cta h2 em{font-style:italic;color:var(--accent)}
.cta p{color:var(--muted);font-size:.9rem;margin-bottom:2.5rem;line-height:1.8}
.cta-actions{display:flex;justify-content:center;gap:1.2rem;flex-wrap:wrap}

/* CONTACT */
.contact{padding:6rem 6%;background:var(--bg);border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.contact-block h3{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:400;color:#fff;margin-bottom:1.8rem}
.info-row{display:flex;gap:1rem;align-items:flex-start;padding:.8rem 0;border-bottom:1px solid var(--border)}
.info-row:last-child{border:none}
.info-icon{color:var(--accent);font-size:1rem;margin-top:.1rem;flex-shrink:0}
.info-text{display:flex;flex-direction:column;gap:.15rem}
.info-label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.info-val{font-size:.88rem;color:rgba(255,255,255,.75)}
.info-val a{color:rgba(255,255,255,.75);text-decoration:none;transition:color .2s}
.info-val a:hover{color:var(--accent)}
.schedule-block{background:rgba(255,255,255,0.03);border:1px solid var(--border);padding:2rem}
.schedule-block h3{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:400;color:#fff;margin-bottom:1.4rem}
.sched-row{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.8rem}
.sched-row:last-child{border:none}
.day{color:rgba(255,255,255,.4)}
.time{color:rgba(255,255,255,.75);font-weight:400}

footer{padding:2rem 6%;background:#050302;color:rgba(255,255,255,.3);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.7rem;letter-spacing:.05em;border-top:1px solid var(--border)}
footer a{color:rgba(255,255,255,.3);text-decoration:none;transition:color .2s}
footer a:hover{color:var(--accent)}

@media(max-width:900px){
  .nav-links{display:none}
  .gallery{grid-template-columns:1fr 1fr;height:auto}
  .gcell{height:180px}
  .contact{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.5rem,8vw,4rem)}
}
</style>
</head>
<body>
<nav id="mainnav">
  <a class="logo" href="#"><?= htmlspecialchars($c['businessName']) ?></a>
  <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>
  <?php if(!empty($c['phone'])): ?>
  <a class="nav-cta" href="tel:<?= htmlspecialchars($c['phone']) ?>">Rezervă</a>
  <?php endif; ?>
</nav>

<section class="hero">
  <div class="hero-bg"></div>
  <div class="hero-overlay"></div>
  <div class="hero-grain"></div>
  <div class="hero-content">
    <div class="hero-eyebrow"><?= htmlspecialchars($c['tagline'] ?? 'Servicii de excelență') ?></div>
    <h1><?= htmlspecialchars($c['heroTitle'] ?? $c['businessName']) ?><br><em>cu pasiune</em></h1>
    <p class="hero-desc"><?= htmlspecialchars($c['heroDesc'] ?? '') ?></p>
    <div class="hero-actions">
      <?php if(!empty($c['phone'])): ?>
      <a class="btn-gold" href="tel:<?= htmlspecialchars($c['phone']) ?>">☎ Rezervă acum</a>
      <?php endif; ?>
      <a class="btn-glass" href="#servicii">Descoperă</a>
    </div>
  </div>
  <div class="hero-scroll">Scroll</div>
  <?php if(!empty($c['rating'])): ?>
  <div class="hero-rating">
    <strong><?= htmlspecialchars($c['rating']) ?></strong>
    <span>★ Google</span>
  </div>
  <?php endif; ?>
</section>

<section class="services" id="servicii">
  <div class="section-header">
    <div class="eyebrow">Ce oferim</div>
    <h2 class="section-title">Servicii de <em>calitate</em></h2>
  </div>
  <div class="svc-grid">
    <?php foreach($services as $i => $svc): ?>
    <div class="svc-card">
      <div class="svc-num">/ <?= str_pad($i+1,2,'0',STR_PAD_LEFT) ?></div>
      <span class="svc-icon"><?= ['◇','○','△','□','⬡'][$i % 5] ?></span>
      <h3><?= htmlspecialchars($svc['name']) ?></h3>
      <p><?= htmlspecialchars($svc['desc'] ?? '') ?></p>
    </div>
    <?php endforeach; ?>
  </div>
</section>

<?php if(!empty($gallery)): ?>
<div class="gallery" id="galerie">
  <?php foreach(array_slice($gallery,0,3) as $i => $img): ?>
  <div class="gcell">
    <img src="<?= htmlspecialchars($img) ?>" alt="Galerie">
    <div class="gcell-label"><?= htmlspecialchars($c['businessName']) ?></div>
  </div>
  <?php endforeach; ?>
</div>
<?php endif; ?>

<section class="reviews" id="recenzii">
  <div class="section-header">
    <div class="eyebrow">Recenzii clienți</div>
    <h2 class="section-title">Ce spun <em>ei</em></h2>
  </div>
  <div class="reviews-score">
    <div class="score-big"><?= htmlspecialchars($c['rating'] ?? '4.9') ?></div>
    <div class="score-text">
      <div class="stars">★★★★★</div>
      <span>Rating mediu Google</span>
    </div>
  </div>
  <div class="rev-grid">
    <?php foreach($reviews as $r): ?>
    <div class="rev-card">
      <div class="rev-stars">★★★★★</div>
      <div class="rev-text">"<?= htmlspecialchars($r['text']) ?>"</div>
      <div class="rev-by"><?= htmlspecialchars($r['name']) ?><?= !empty($r['ago']) ? ' · '.$r['ago'] : '' ?></div>
    </div>
    <?php endforeach; ?>
  </div>
</section>

<section class="cta">
  <div class="cta-bg"></div>
  <div class="cta-overlay"></div>
  <div class="cta-content">
    <h2>Rezervă-ți locul<br><em>astăzi</em></h2>
    <p>Suntem gata să te primim și să-ți oferim o experiență deosebită.<br>Contactează-ne acum.</p>
    <div class="cta-actions">
      <?php if(!empty($c['phone'])): ?>
      <a class="btn-gold" href="tel:<?= htmlspecialchars($c['phone']) ?>">☎ <?= htmlspecialchars($c['phone']) ?></a>
      <?php endif; ?>
      <?php if(!empty($c['instagram'])): ?>
      <a class="btn-glass" href="https://instagram.com/<?= htmlspecialchars($c['instagram']) ?>" target="_blank" rel="noopener">@ Instagram</a>
      <?php endif; ?>
    </div>
  </div>
</section>

<section class="contact" id="contact">
  <div class="contact-block">
    <h3>Informații de contact</h3>
    <?php if(!empty($c['phone'])): ?>
    <div class="info-row">
      <span class="info-icon">☎</span>
      <div class="info-text">
        <span class="info-label">Telefon</span>
        <span class="info-val"><a href="tel:<?= htmlspecialchars($c['phone']) ?>"><?= htmlspecialchars($c['phone']) ?></a></span>
      </div>
    </div>
    <?php endif; ?>
    <?php if(!empty($c['address'])): ?>
    <div class="info-row">
      <span class="info-icon">◈</span>
      <div class="info-text">
        <span class="info-label">Adresă</span>
        <span class="info-val"><?= htmlspecialchars($c['address']) ?></span>
      </div>
    </div>
    <?php endif; ?>
    <?php if(!empty($c['hours'])): ?>
    <div class="info-row">
      <span class="info-icon">◷</span>
      <div class="info-text">
        <span class="info-label">Program</span>
        <span class="info-val"><?= htmlspecialchars($c['hours']) ?></span>
      </div>
    </div>
    <?php endif; ?>
  </div>
  <?php $sched = $c['schedule'] ?? []; $days = ['mon'=>'Luni','tue'=>'Marți','wed'=>'Miercuri','thu'=>'Joi','fri'=>'Vineri','sat'=>'Sâmbătă','sun'=>'Duminică']; ?>
  <?php if(!empty($sched)): ?>
  <div class="schedule-block">
    <h3>Program săptămânal</h3>
    <?php foreach($days as $k=>$dn): ?>
    <div class="sched-row">
      <span class="day"><?= $dn ?></span>
      <span class="time"><?= htmlspecialchars($sched[$k] ?? 'Închis') ?></span>
    </div>
    <?php endforeach; ?>
  </div>
  <?php endif; ?>
</section>

<footer>
  <span>© <?= $year ?> <?= htmlspecialchars($c['businessName']) ?>. Toate drepturile rezervate.</span>
  <div style="display:flex;gap:1.4rem">
    <?php if(!empty($c['instagram'])): ?><a href="https://instagram.com/<?= htmlspecialchars($c['instagram']) ?>" target="_blank" rel="noopener">Instagram</a><?php endif; ?>
    <a href="#servicii">Servicii</a><a href="#contact">Contact</a>
  </div>
</footer>
<script>
const nav = document.getElementById('mainnav');
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>80)});
</script>
</body>
</html>
