MyKeyser/index.php

<?php
require_once __DIR__.'/includes/boot.php';
$pageTitle='Discover Keyser WV — The Friendliest City in the U.S.A.';
$activeNav='home';
$alerts=qall("SELECT a.*,b.name bname,b.id bid,b.slug bslug FROM alerts a JOIN businesses b ON b.id=a.business_id WHERE a.is_active=1 ORDER BY a.created_at DESC LIMIT 5");
$featured=qall("SELECT b.*,c.name cat,c.icon cat_icon,COALESCE(AVG(r.rating),0) avg,COUNT(r.id) rcnt FROM businesses b JOIN categories c ON c.id=b.category_id LEFT JOIN reviews r ON r.business_id=b.id WHERE b.is_active=1 AND b.is_featured=1 GROUP BY b.id ORDER BY avg DESC,rcnt DESC LIMIT 6");
$totalBiz=(int)qval("SELECT COUNT(*) FROM businesses WHERE is_active=1");
$upevts=qall("SELECT * FROM events WHERE status='approved' AND event_date>=date('now') ORDER BY is_featured DESC,event_date ASC LIMIT 3");
include __DIR__.'/includes/header.php';
?>
<section class="hero">
  <div class="hero-bg"></div>
  <div class="hero-stars"></div>
  <div class="hero-mtns">
    <svg viewBox="0 0 1440 300" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
      <polygon points="0,300 0,180 80,120 160,160 240,80 330,138 420,58 520,118 630,38 740,98 850,18 960,88 1060,28 1160,108 1260,48 1380,128 1440,78 1440,300" fill="#0a0f18" opacity=".9"/>
      <polygon points="0,300 0,222 100,170 200,200 310,140 430,188 560,128 680,168 800,100 920,158 1030,108 1140,158 1250,118 1380,175 1440,145 1440,300" fill="#0d1520" opacity=".96"/>
      <polygon points="0,300 0,260 140,232 280,252 420,212 560,242 700,202 840,235 980,197 1120,228 1260,205 1440,225 1440,300" fill="#111c2c"/>
      <g opacity=".28" stroke="#c9a84c" stroke-width="1.5" fill="none">
        <line x1="850" y1="20" x2="850" y2="72"/><line x1="850" y1="20" x2="833" y2="8"/><line x1="850" y1="20" x2="867" y2="8"/><line x1="850" y1="20" x2="850" y2="5"/>
        <line x1="903" y1="30" x2="903" y2="82"/><line x1="903" y1="30" x2="886" y2="18"/><line x1="903" y1="30" x2="920" y2="18"/><line x1="903" y1="30" x2="903" y2="15"/>
        <line x1="958" y1="42" x2="958" y2="94"/><line x1="958" y1="42" x2="941" y2="30"/><line x1="958" y1="42" x2="975" y2="30"/><line x1="958" y1="42" x2="958" y2="27"/>
      </g>
    </svg>
  </div>
  <div class="hero-content">
    <div class="hero-eyebrow">⛰ MINERAL COUNTY · EASTERN PANHANDLE · WEST VIRGINIA</div>
    <h1 class="hero-h1">DISCOVER<span class="gld">KEYSER</span></h1>
    <div class="hero-sub">NORTH BRANCH POTOMAC RIVER · FOUNDED 1874</div>
    <div class="hero-rule"></div>
    <p class="hero-desc">Where Appalachian heritage meets mountain beauty. County seat of Mineral County — 3 hours from Washington D.C., a world away from ordinary.</p>
    <div class="hero-actions">
      <a href="/directory.php" class="btn btn-primary">Explore Businesses</a>
      <a href="/attractions.php" class="btn btn-outline">Attractions &amp; Activities</a>
    </div>
  </div>
</section>

<div class="stats-strip">
  <div class="stats-inner">
    <?php foreach([['1874','Founded'],['809 ft','Elevation'],['~4,800','Population'],['132','Wind Turbines'],['1901','PSC Founded'],[$totalBiz,'Businesses Listed']] as [$n,$l]): ?>
    <div class="stat"><div class="stat-n"><?=e($n)?></div><div class="stat-l"><?=e($l)?></div></div>
    <?php endforeach; ?>
  </div>
</div>

<?php if($alerts): ?>
<div class="alert-strip">
  <div class="alert-strip-inner">
    <div class="eyebrow" style="margin-bottom:.65rem">📢 LOCAL BUSINESS NEWS &amp; UPDATES</div>
    <?php foreach($alerts as $a): ?>
    <div class="alert-item a-<?=e($a['type'])?>">
      <div class="alert-ico"><?=alertIcon($a['type'] ?? '')?></div>
      <div>
        <div class="alert-title"><?=e($a['title'])?></div>
        <div class="alert-body"><?=e($a['body'])?></div>
        <div class="alert-meta">From <a href="/business.php?slug=<?=e($a['bslug'])?>"><?=e($a['bname'])?></a> &middot; <?=ago($a['created_at'] ?? '')?></div>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
</div>
<?php endif; ?>

<div class="section">
  <div style="margin-bottom:2rem">
    <div class="eyebrow">⭐A LITTLE SPOTLIGHT</div>
    <h2 class="sec-title">Featured</h2>
    <div class="sec-rule"></div>
  </div>
  <div class="g3">
    <?php foreach($featured as $b): ?>
    <a href="/business.php?slug=<?=e($b['slug'])?>" style="text-decoration:none">
      <div class="biz-card">
        <div class="biz-card-top">
          <div class="cat-badge"><?=e($b['cat_icon'].' '.$b['cat'])?></div>
          <?php if($b['is_featured']): ?><span class="featured-badge" style="float:right">★ FEATURED</span><?php endif; ?>
          <div class="biz-name"><?=e($b['name'])?></div>
          <?php if($b['subcategory']): ?><div class="biz-sub"><?=e($b['subcategory'])?></div><?php endif; ?>
        </div>
        <div class="biz-card-body">
          <div class="biz-desc"><?=e($b['description'])?></div>
          <div class="biz-meta">
            <?php if($b['address']): ?><div class="biz-meta-row"><span class="biz-meta-icon">📍</span><?=e($b['address'])?></div><?php endif; ?>
            <?php if($b['phone']): ?><div class="biz-meta-row"><span class="biz-meta-icon">📞</span><?=e($b['phone'])?></div><?php endif; ?>
          </div>
        </div>
        <div class="biz-card-foot">
          <div class="flex-row" style="gap:.4rem">
            <?=starDisplay((float)$b['avg'])?>
            <span class="rat-score"><?=number_format((float)$b['avg'],1)?></span>
            <span class="rat-cnt">(<?=$b['rcnt']?>)</span>
          </div>
          <span style="color:var(--gold);font-size:.76rem;font-family:'Oswald',sans-serif">VIEW →</span>
        </div>
      </div>
    </a>
    <?php endforeach; ?>
  </div>
  <div style="text-align:center;margin-top:2rem">
    <a href="/directory.php" class="btn btn-outline">Browse Full Directory (<?=$totalBiz?> Businesses)</a>
  </div>
</div>

<div style="background:var(--bg2);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);padding:4rem 1.5rem">
  <div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center">
    <div>
      <div class="eyebrow">OUR HISTORY</div>
      <h2 class="sec-title" style="margin-bottom:1rem">A City with Deep Mountain Roots</h2>
      <div class="prose">
        <p>Originally called <strong>Paddy Town</strong> after Irish settler Patrick McCarty, then New Creek, Keyser took its name in 1874 — honoring William Keyser, Vice President of the Baltimore &amp; Ohio Railroad whose line transformed the region in 1842.</p>
        <p>Today Keyser is home to <strong>Potomac State College of WVU</strong> (est. 1901 on historic Civil War Fort Fuller), WVU Medicine Potomac Valley Hospital, and a vibrant downtown community rich with Appalachian culture on the banks of the North Branch Potomac River.</p>
        <p>Mineral County is part of the <strong>Appalachian Forest National Heritage Area</strong> — over 500 square miles of forested beauty where American history lives on in every ridge and hollow.</p>
      </div>
      <a href="/about.php" class="btn btn-outline" style="margin-top:1rem">Learn More About Keyser</a>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
      <?php foreach([['🏛️','HISTORIC','National Register of Historic Places sites'],['🎓','EDUCATION','Potomac State College of WVU since 1901'],['🌊','OUTDOORS','Kayaking &amp; fishing the North Branch'],['💨','WIND ENERGY','132 turbines on the Allegheny Front']] as [$ic,$lbl,$val]): ?>
      <div style="background:var(--bg3);border:1px solid var(--bdr);border-radius:6px;padding:1.2rem;text-align:center">
        <div style="font-size:2rem;margin-bottom:.45rem"><?=$ic?></div>
        <div style="font-family:'Oswald',sans-serif;font-size:.66rem;letter-spacing:.2em;color:var(--gold)"><?=$lbl?></div>
        <div style="color:var(--text);margin-top:.25rem;font-size:.88rem"><?=$val?></div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>

<?php if($upevts): ?>
<div class="section">
  <div style="margin-bottom:2rem">
    <div class="eyebrow">📅 WHAT'S HAPPENING</div>
    <h2 class="sec-title">Upcoming Events</h2>
    <div class="sec-rule"></div>
  </div>
  <?php foreach($upevts as $ev): ?>
  <div class="evt-card">
    <div class="evt-date-box">
      <div class="evt-mon"><?=strtoupper(date('M',strtotime($ev['event_date'])))?></div>
      <div class="evt-day"><?=date('j',strtotime($ev['event_date']))?></div>
      <div class="evt-yr"><?=date('Y',strtotime($ev['event_date']))?></div>
    </div>
    <div class="evt-body">
      <div class="evt-title"><?=e($ev['title'])?><?php if($ev['is_featured']): ?> <span class="featured-badge" style="margin-left:.5rem">★ FEATURED</span><?php endif; ?></div>
      <div class="evt-meta">
        <?php if($ev['venue']): ?><span>📍 <?=e($ev['venue'])?></span><?php endif; ?>
        <?php if($ev['event_time']): ?><span>🕐 <?=e($ev['event_time'])?></span><?php endif; ?>
        <span>💰 <?=e($ev['cost'])?></span>
      </div>
      <div class="evt-desc"><?=e(substr($ev['description'],0,180)).(strlen($ev['description'])>180?'…':'')?></div>
    </div>
  </div>
  <?php endforeach; ?>
  <div style="text-align:center;margin-top:1.5rem">
    <a href="/events.php" class="btn btn-outline">All Events</a>
    <a href="/events.php?submit=1" class="btn btn-secondary" style="margin-left:.75rem">Submit an Event</a>
  </div>
</div>
<?php endif; ?>

<div style="padding:4rem 1.5rem;text-align:center;max-width:560px;margin:0 auto">
  <div class="eyebrow">JOIN THE COMMUNITY</div>
  <h2 style="font-size:2rem;margin:.5rem 0 1rem">Own a Business in Keyser?</h2>
  <p style="color:var(--text-m);margin-bottom:2rem;line-height:1.85">Create an account to manage your listing, post alerts, add menus, and connect with the Keyser community.</p>
  <div class="flex-row" style="justify-content:center">
    <?php if(!authed()): ?>
    <a href="/register.php" class="btn btn-primary">Create Account</a>
    <a href="/login.php" class="btn btn-outline">Login</a>
    <?php else: ?>
    <a href="/dashboard.php" class="btn btn-primary">My Dashboard</a>
    <?php endif; ?>
  </div>
</div>
<?php include __DIR__.'/includes/footer.php'; ?>