<?php
//Developer: CORE TECH WEB DESIGN
$page_title = "Service Unavailablw - SoftBillsHub - Virtual Numbers, Social Media Growth, Airtime, Data & Bill Payments";
$page_description = "Your one-stop platform for virtual number verification, social media growth (followers, likes, comments), airtime & data top-up, cable TV subscriptions, and electricity bill payments. Fast, secure, and affordable.";
include('../include/header.php');
$url=$site_data['web_url'];
?>

<style>
.err-section{min-height:80vh;display:flex;align-items:center;padding:5rem 2rem;}
.err-wrap{max-width:800px;margin:0 auto;text-align:center;}
.err-ico-ring{width:110px;height:110px;margin:0 auto 2rem;border-radius:50%;background:rgba(249,115,22,.08);border:2px solid rgba(249,115,22,.22);display:flex;align-items:center;justify-content:center;animation:float 3.5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px) rotate(5deg)}}
.err-code{font-size:clamp(5rem,14vw,10rem);font-weight:900;background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:1rem;}
.err-title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;letter-spacing:-.04em;color:var(--text);margin-bottom:1rem;}
.err-msg{font-size:1rem;line-height:1.8;color:var(--text2);max-width:560px;margin:0 auto 2.5rem;}
.err-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:3rem;}
.eb-p{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;background:var(--g);color:#000;border-radius:12px;font-size:.875rem;font-weight:700;transition:all .25s;box-shadow:0 4px 20px var(--g-glow);}
.eb-p:hover{background:var(--g2);transform:translateY(-2px);}
.eb-o{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;background:var(--surface);color:var(--text);border:1.5px solid var(--border2);border-radius:12px;font-size:.875rem;font-weight:600;transition:all .25s;cursor:pointer;font-family:inherit;}
.eb-o:hover{border-color:var(--g);color:var(--g);transform:translateY(-2px);}
.info-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.5rem 2rem;max-width:520px;margin:0 auto 2.5rem;text-align:left;}
.info-box h3{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.75rem;}
.info-box p{font-size:.8rem;color:var(--text2);line-height:1.7;margin-bottom:.5rem;}
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.25);border-radius:20px;font-size:.75rem;font-weight:700;color:#f97316;margin-top:.75rem;}
.countdown-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;background:rgba(31,208,112,.08);border:1px solid rgba(31,208,112,.2);border-radius:20px;font-size:.75rem;font-weight:700;color:var(--g);margin-top:.5rem;}
.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;max-width:700px;margin:0 auto;}
.hc{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.5rem;text-align:center;transition:all .3s;}
.hc:hover{transform:translateY(-4px);border-color:rgba(31,208,112,.2);box-shadow:0 12px 35px var(--shadow);}
.hc-ico{width:44px;height:44px;background:rgba(31,208,112,.08);border:1px solid rgba(31,208,112,.15);border-radius:11px;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;}
.hc h4{font-size:.875rem;font-weight:700;color:var(--text);margin-bottom:.375rem;}
.hc p{font-size:.775rem;color:var(--text3);margin-bottom:.75rem;line-height:1.6;}
.hc a{font-size:.775rem;color:var(--g);font-weight:700;}
@media(max-width:480px){.err-btns{flex-direction:column;align-items:stretch;}.eb-p,.eb-o{justify-content:center;}}
</style>
<div class="err-section">
  <div class="err-wrap">
    <div class="err-ico-ring"><svg width="48" height="48" fill="none" stroke="#f97316" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
    <div class="err-code">503</div>
    <h1 class="err-title">Service Unavailable</h1>
    <p class="err-msg">We're currently performing scheduled maintenance or experiencing a temporary service disruption. We'll be back online shortly. Thank you for your patience!</p>
    <div class="err-btns">
      <a href="<?php echo $url;?>/" class="eb-p"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg> Try Homepage</a>
      <button onclick="location.reload()" class="eb-o" id="refreshBtn"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> <span id="btnTxt">Refresh Page</span></button>
    </div>
    <div class="info-box"><h3>What's happening?</h3><p>Our service is temporarily unavailable due to scheduled maintenance or server updates. We're working hard to restore full service as quickly as possible.</p><div class="status-badge"><svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Under Maintenance</div><div class="countdown-badge" id="countdown"></div></div>
    <div class="help-grid">
      <div class="hc"><div class="hc-ico"><svg width="20" height="20" fill="none" stroke="var(--g)" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg></div><h4>Telegram</h4><p>Get instant notifications and status updates</p><a href="https://t.me/coretechwebdesign" target="_blank">Join Channel →</a></div>
      <div class="hc"><div class="hc-ico"><svg width="20" height="20" fill="none" stroke="var(--g)" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg></div><h4>WhatsApp</h4><p>Contact us directly via WhatsApp</p><a href="https://wa.me/2349065236144" target="_blank">Chat Now →</a></div>
      <div class="hc"><div class="hc-ico"><svg width="20" height="20" fill="none" stroke="var(--g)" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><h4>Email Updates</h4><p>Subscribe for maintenance notifications</p><a href="<?php echo $url;?>/contact">Contact Us →</a></div>
    </div>
  </div>
</div>
<script>
var secs=60;
function tick(){secs--;if(secs<=0){location.reload();return;}document.getElementById('countdown').textContent='Auto-refresh in '+secs+'s';document.getElementById('btnTxt').textContent='Refresh ('+secs+'s)';}
document.getElementById('countdown').textContent='Auto-refresh in '+secs+'s';
setInterval(tick,1000);
</script>
<?php include('../include/footer.php'); ?>
