<!doctype html>
<html lang="en">
<head>
    <title><?= !empty($title) ? $title . ' - ' . site_config("site_title", "author") : site_config("site_title", "author") ?></title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="author" content="<?= esc(site_config('site_description', 'author')) ?>">
    <meta name="description" content="<?= esc(site_config('site_description', 'Site desc')) ?>">
    <meta name="theme-color" content="#050816">
    <meta name="keywords" content="<?= esc(site_config('site_keywords', "keywords")) ?>">
    <meta property="og:type" content="website">
    <meta property="og:title" content="<?= !empty($title) ? $title . ' - ' . site_config("site_title", "author") : site_config("site_title", "author") ?>">
    <meta property="og:description" content="<?= esc(site_config('site_description', 'Site desc')) ?>">
    <meta property="og:image" content="<?= $og_image ?? get_logo() ?>">
    <meta property="og:url" content="<?= current_url(true) ?>">
    <link rel="icon" type="image/png" href="<?= get_logo(true) ?>">
    <link rel="canonical" href="<?= base_url() ?>">
    <link rel="stylesheet" href="<?= base_url('public/assets/css/home.css') ?>?v=<?= time() ?>">
    <script src="https://cdn.tailwindcss.com"></script>
    <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=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
    function scrollToSection(id) {
      const target = document.querySelector(id);
      if (target) {
        const container = target.querySelector('.container') || target;
        const navHeight = document.getElementById('mainNav')?.offsetHeight || 75;
        const targetPos = container.getBoundingClientRect().top + window.pageYOffset - navHeight;
        window.scrollTo({ top: targetPos, behavior: 'smooth' });
        document.getElementById('navMobile')?.classList.remove('open');
      } else {
        if (id === '#hero') {
          window.location.href = '<?= base_url() ?>';
        } else {
          window.location.href = '<?= base_url() ?>' + id;
        }
      }
    }

    function toggleFaq(btn) {
      const item = btn.closest('.fq');
      const answer = item.querySelector('.fq-a');
      const wasOpen = item.classList.contains('open') || item.classList.contains('active');

      document.querySelectorAll('.fq').forEach(f => {
        f.classList.remove('open', 'active');
      });

      if (!wasOpen) {
        item.classList.add('open', 'active');
      }
    }
    </script>
</head>
<body>

<nav id="mainNav" class="fixed w-full top-0 z-[999] bg-[#050816]/90 backdrop-blur-md border-b border-white/10 transition-all duration-300">
  <div class="container mx-auto px-4 md:px-6 h-20 flex items-center justify-between">
    <!-- Logo -->
    <a href="<?= base_url(); ?>" class="flex-shrink-0 flex items-center">
      <img src="<?= get_logo() ?>" alt="<?= site_config('site_name') ?>" class="h-10 md:h-12 w-auto object-contain">
    </a>

    <!-- Desktop Navigation -->
    <div class="hidden md:flex items-center gap-8">
      <a href="<?= base_url() ?>" class="text-sm font-medium text-gray-300 hover:text-white transition-colors <?= (url_is('/') || url_is('')) ? 'text-white' : '' ?>">Home</a>
      <a href="<?= base_url('pricing') ?>" class="text-sm font-medium text-gray-300 hover:text-white transition-colors <?= url_is('pricing') ? 'text-white' : '' ?>">Price</a>
      <a href="<?= base_url('developers') ?>" class="text-sm font-medium text-gray-300 hover:text-white transition-colors <?= url_is('developers') ? 'text-white' : '' ?>">Developer Docs</a>
    </div>

    <!-- Desktop Buttons -->
    <div class="hidden md:flex items-center gap-4">
      <?php if (session('uid')) { ?>
        <a href="<?= base_url('user/dashboard') ?>" class="inline-flex items-center justify-center px-6 py-2.5 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition-colors shadow-lg shadow-indigo-500/30">Dashboard</a>
      <?php } else { ?>
        <a href="#" onclick="openAuth('login');return false" class="inline-flex items-center justify-center px-5 py-2.5 text-sm font-medium text-gray-300 hover:text-white transition-colors">Login</a>
        <a href="#" onclick="openAuth('signup');return false" class="inline-flex items-center justify-center px-6 py-2.5 rounded-full bg-white text-black hover:bg-gray-100 text-sm font-bold transition-colors">Register</a>
      <?php } ?>
    </div>

    <!-- Mobile Menu Toggle -->
    <button id="navToggle" onclick="document.getElementById('navMobile').classList.toggle('-translate-y-full')" class="md:hidden text-white p-2">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
    </button>
  </div>

  <!-- Mobile Menu -->
  <div id="navMobile" class="absolute top-0 left-0 w-full bg-[#050816] border-b border-white/10 p-6 flex flex-col gap-6 -translate-y-full transition-transform duration-300 z-[-1] md:hidden">
    <div class="flex justify-end">
      <button onclick="document.getElementById('navMobile').classList.add('-translate-y-full')" class="text-white p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>
    <a href="<?= base_url() ?>" class="text-lg font-medium text-white">Home</a>
    <a href="<?= base_url('pricing') ?>" class="text-lg font-medium text-white">Price</a>
    <a href="<?= base_url('developers') ?>" class="text-lg font-medium text-white">Developer Docs</a>
    <div class="flex flex-col gap-3 mt-4 pt-4 border-t border-white/10">
      <?php if (session('uid')) { ?>
        <a href="<?= base_url('user/dashboard') ?>" class="w-full text-center px-5 py-3 rounded-xl bg-indigo-600 text-white font-semibold">Dashboard</a>
      <?php } else { ?>
        <a href="#" onclick="openAuth('login');document.getElementById('navMobile').classList.add('-translate-y-full');return false" class="w-full text-center px-5 py-3 rounded-xl border border-white/20 text-white font-medium">Login</a>
        <a href="#" onclick="openAuth('signup');document.getElementById('navMobile').classList.add('-translate-y-full');return false" class="w-full text-center px-5 py-3 rounded-xl bg-white text-black font-bold">Register</a>
      <?php } ?>
    </div>
  </div>
</nav>


<?= view($view); ?>

<footer class="bg-[#030610] border-t border-white/5 py-12 mt-20">
  <div class="container mx-auto px-4 md:px-6">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-8 mb-10">
      <!-- Brand & Socials -->
      <div>
        <a href="<?= base_url(); ?>" class="inline-block mb-4">
          <img src="<?= get_logo() ?>" alt="<?= site_config('site_name') ?>" class="h-8 md:h-10 object-contain">
        </a>
        <p class="text-sm text-gray-400 leading-relaxed mb-6 max-w-sm">
          <?= esc(site_config('site_description')) ?>
        </p>
        <div class="flex items-center gap-3">
          <?php if (site_config('social_facebook_link') && site_config('social_facebook_link') !== '#') : ?>
            <a href="<?= site_config('social_facebook_link') ?>" target="_blank" class="w-9 h-9 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-all"><i class="fab fa-facebook-f"></i></a>
          <?php endif; ?>
          <?php if (site_config('social_twitter_link') && site_config('social_twitter_link') !== '#') : ?>
            <a href="<?= site_config('social_twitter_link') ?>" target="_blank" class="w-9 h-9 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-all"><i class="fab fa-x-twitter"></i></a>
          <?php endif; ?>
          <?php if (site_config('social_youtube_link') && site_config('social_youtube_link') !== '#') : ?>
            <a href="<?= site_config('social_youtube_link') ?>" target="_blank" class="w-9 h-9 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-all"><i class="fab fa-youtube"></i></a>
          <?php endif; ?>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h4 class="text-xs font-bold uppercase tracking-wider text-white mb-4">Quick Links</h4>
        <div class="flex flex-col gap-3">
          <a href="<?= base_url() ?>" class="text-sm text-gray-400 hover:text-white transition-colors">Home</a>
          <a href="<?= base_url('pricing') ?>" class="text-sm text-gray-400 hover:text-white transition-colors">Price</a>
          <a href="<?= base_url('developers') ?>" class="text-sm text-gray-400 hover:text-white transition-colors">Developer Docs</a>
        </div>
      </div>

      <!-- Contact -->
      <div>
        <h4 class="text-xs font-bold uppercase tracking-wider text-white mb-4">Contact Info</h4>
        <div class="flex flex-col gap-4">
          <a href="mailto:<?= site_config('contact_email') ?>" class="flex items-center gap-3 text-sm text-gray-400 hover:text-white transition-colors">
            <div class="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400"><i class="fas fa-envelope"></i></div>
            <?= site_config('contact_email') ?>
          </a>
          <a href="https://wa.me/<?= preg_replace('/[^0-9]/', '', site_config('contact_tel')) ?>" target="_blank" class="flex items-center gap-3 text-sm text-gray-400 hover:text-white transition-colors">
            <div class="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center text-green-400"><i class="fab fa-whatsapp"></i></div>
            <?= site_config('contact_tel') ?>
          </a>
        </div>
      </div>
    </div>

    <!-- Divider & Bottom -->
    <div class="pt-6 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-4">
      <p class="text-sm text-gray-500">Copyright &copy; <?= date('Y') ?> <?= esc(get_option('site_name', 'Ekhoni Digital')) ?>. All rights reserved.</p>
      
      <div class="flex items-center gap-2 px-4 py-1.5 rounded-full bg-green-500/10 border border-green-500/20">
        <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
        <span class="text-xs font-medium text-green-400"><?= get_option('footer_status_text', 'All Systems Operational') ?></span>
      </div>
    </div>
  </div>
</footer>

<script>
// Navbar scroll
window.addEventListener('scroll',()=>document.getElementById('mainNav').classList.toggle('scrolled',scrollY>40));

// Mobile menu
document.getElementById('navToggle')?.addEventListener('click',()=>document.getElementById('navMobile').classList.add('open'));
document.getElementById('navClose')?.addEventListener('click',()=>document.getElementById('navMobile').classList.remove('open'));

// Global scroll logic handled in head

// Active nav on scroll
const sections=document.querySelectorAll('section[id]');
const navLinks=document.querySelectorAll('.nav-menu .nav-link');
if (sections.length > 1) {
  window.addEventListener('scroll',()=>{
    let cur='';
    sections.forEach(s=>{if(scrollY>=s.offsetTop-200)cur=s.getAttribute('id')});
    if (cur) {
      navLinks.forEach(l=>{
        l.classList.remove('active');
        const onclick = l.getAttribute('onclick') || '';
        if(onclick.includes('#'+cur)) l.classList.add('active');
      });
    }
  });
}

// FAQ Toggle handled in head via onclick

// Scroll Reveal (Intersection Observer)
const revealEls=document.querySelectorAll('.reveal:not(.hero .reveal)');
revealEls.forEach(el=>el.classList.add('reveal-init'));
const ro=new IntersectionObserver((entries)=>{
  entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible');ro.unobserve(e.target)}})
},{threshold:0.05,rootMargin:'0px 0px -10px 0px'});
revealEls.forEach(el=>ro.observe(el));

// Counter animation
function animC(){document.querySelectorAll('[data-c]').forEach(el=>{const t=+el.dataset.c,s=el.dataset.s||'';let c=0;const step=t/50,tm=setInterval(()=>{c+=step;if(c>=t){c=t;clearInterval(tm)}el.textContent=Math.floor(c).toLocaleString()+s},25)})}
const so=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){animC();so.unobserve(x.target)}}),{threshold:.2});
const ss=document.querySelector('.stats');if(ss)so.observe(ss);
</script>

<?php if (!session('uid')) : ?>
<!-- Auth Modal Overlay -->
<div class="auth-overlay" id="authOverlay" onclick="if(event.target===this)closeAuth()">
  <div class="auth-modal">
    <button class="auth-modal-close" onclick="closeAuth()">&times;</button>
    <div id="authMsg" class="auth-msg"></div>

    <!-- LOGIN FORM -->
    <div id="authLogin">
      <h2>Welcome Back</h2>
      <div class="auth-sub">Sign in to your <?= site_config('site_name','Ekhoni Digital') ?> account</div>
      <?php if(get_option('google_login',0)==1): ?>
      <a href="<?= base_url('auth/google_process') ?>" class="auth-google">
        <svg width="18" height="18" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>
        Continue with Google
      </a>
      <div class="auth-divider">or sign in with email</div>
      <?php endif; ?>
      <form id="loginForm" onsubmit="submitAuth(event,'login')">
        <div class="auth-field">
          <label class="auth-label">Email Address</label>
          <input class="auth-input" type="email" name="email" placeholder="you@example.com" required>
        </div>
        <div class="auth-field">
          <label class="auth-label">Password</label>
          <div class="pw-wrap">
            <input class="auth-input" type="password" name="password" id="mPw" placeholder="Enter password" required>
            <button type="button" class="pw-toggle" onclick="var p=document.getElementById('mPw');p.type=p.type==='password'?'text':'password'"><i class="fas fa-eye"></i></button>
          </div>
        </div>
        <div class="auth-row">
          <label><input type="checkbox" name="remember"> Remember me</label>
          <a onclick="switchAuth('reset')" style="cursor:pointer">Forgot Password?</a>
        </div>
        <button type="submit" class="auth-submit" id="loginBtn">Sign In</button>
      </form>
      <div class="auth-footer">Don't have an account? <a onclick="switchAuth('signup')">Create Account</a></div>
    </div>

    <!-- SIGNUP FORM -->
    <div id="authSignup" style="display:none">
      <h2>Create Account</h2>
      <div class="auth-sub">Join <?= get_option('site_name','Ekhoni Digital') ?> today</div>
      <?php if(get_option('google_login',0)==1): ?>
      <a href="<?= base_url('auth/google_process') ?>" class="auth-google">
        <svg width="18" height="18" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>
        Continue with Google
      </a>
      <div class="auth-divider">or create with email</div>
      <?php endif; ?>
      <form id="signupForm" onsubmit="submitAuth(event,'signup')">
        <div class="auth-field" style="margin-top:14px"><label class="auth-label">Full Name</label><input class="auth-input" type="text" name="full_name" placeholder="John Doe" required></div>
        <div class="auth-field" style="margin-top:14px"><label class="auth-label">Email</label><input class="auth-input" type="email" name="email" placeholder="you@example.com" required></div>
        <div class="auth-field" style="margin-top:14px"><label class="auth-label">Phone</label><input class="auth-input" type="number" name="phone" placeholder="+880 1XXXXXXXXX" required></div>
        <div class="auth-field" style="margin-top:14px"><label class="auth-label">Password</label><input class="auth-input" type="password" name="password" placeholder="Min 8 chars" required></div>
        <div class="auth-row" style="margin-top:14px"><label><input type="checkbox" name="agree" required> I agree to <a href="<?= base_url('terms-condition') ?>" target="_blank">Terms</a></label></div>
        <button type="submit" class="auth-submit" id="signupBtn" style="margin-top:14px">Create Account</button>
      </form>
      <div class="auth-footer">Already have an account? <a onclick="switchAuth('login')">Sign In</a></div>
    </div>

    <!-- PASSWORD RESET FORM -->
    <div id="authReset" style="display:none">
      <h2>Reset Password</h2>
      <div class="auth-sub" id="resetSub">Enter your email and we will send a reset link</div>
      <form id="resetForm" onsubmit="submitAuth(event,'reset')">
        <div class="auth-field" id="resetEmailField">
          <label class="auth-label">Email Address</label>
          <input class="auth-input" type="email" name="email" id="resetEmail" placeholder="you@example.com" required>
        </div>
        <button type="submit" class="auth-submit" id="resetBtn" style="margin-top:14px">Send Reset Link</button>
      </form>
      <div class="auth-footer">Remember your password? <a onclick="switchAuth('login')">Sign In</a></div>
      <div class="auth-footer" style="margin-top:8px">Don't have an account? <a onclick="switchAuth('signup')">Create Account</a></div>
    </div>
  </div>
</div>

<script>
var AUTH_URLS={login:'<?= base_url('sign-in') ?>',signup:'<?= base_url('sign-up') ?>',reset:'<?= base_url('password-reset') ?>'};
var AUTH_LABELS={login:'Sign In',signup:'Create Account',reset:'Send Reset Link'};
var AUTH_LOADING={login:'Signing in...',signup:'Creating...',reset:'Sending...'};
var csrfName='<?= csrf_token() ?>';
var csrfHash='<?= csrf_hash() ?>';
function openAuth(type){
  document.getElementById('authMsg').className='auth-msg';
  document.getElementById('authMsg').textContent='';
  document.getElementById('authLogin').style.display=type==='login'?'':'none';
  document.getElementById('authSignup').style.display=type==='signup'?'':'none';
  document.getElementById('authReset').style.display=type==='reset'?'':'none';
  document.getElementById('authOverlay').classList.add('active');
  document.body.style.overflow='hidden';
}
function closeAuth(){
  document.getElementById('authOverlay').classList.remove('active');
  document.body.style.overflow='';
}
function switchAuth(type){
  document.getElementById('authMsg').className='auth-msg';
  document.getElementById('authMsg').textContent='';
  document.getElementById('authLogin').style.display=type==='login'?'':'none';
  document.getElementById('authSignup').style.display=type==='signup'?'':'none';
  document.getElementById('authReset').style.display=type==='reset'?'':'none';
}
function submitAuth(e,type){
  e.preventDefault();
  var form=e.target,btn=form.querySelector('.auth-submit'),msg=document.getElementById('authMsg');
  btn.textContent=AUTH_LOADING[type]||'Processing...';
  btn.style.opacity='.7';
  var fd=new FormData(form);
  /* CSRF Token Fix */
  fd.set(csrfName, csrfHash);
  fetch(AUTH_URLS[type],{method:'POST',body:new URLSearchParams(fd),headers:{'X-Requested-With':'XMLHttpRequest'}}).then(r=>{
    return r.text();
  }).then(t=>{
    btn.style.opacity='1';
    btn.textContent=AUTH_LABELS[type]||'Submit';
    try{
      var j=JSON.parse(t);
      if(j.csrf_hash) {
        csrfHash = j.csrf_hash;
      }
      if(j.status==='success'){
        msg.className='auth-msg success';msg.textContent=j.message||'Success!';
        setTimeout(()=>{window.location.href=j.redirect||'<?= base_url('user/dashboard') ?>'},800);
      } else {
        msg.className='auth-msg error';msg.innerHTML=j.message||'Something went wrong';
      }
    }catch(ex){
      console.error('Auth parse error:', ex, 'Response:', t);
      msg.className='auth-msg error';msg.textContent='Something went wrong. Please try again.';
    }
  }).catch((err)=>{
    console.error('Auth network error:', err);
    btn.style.opacity='1';btn.textContent=AUTH_LABELS[type]||'Submit';
    msg.className='auth-msg error';msg.textContent='Network error. Please try again.';
  });
}
document.addEventListener('keydown',e=>{if(e.key==='Escape')closeAuth()});
/* Auto-open auth modal based on URL query parameters (?auth=login or ?auth=signup) */
document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const authType = urlParams.get('auth');
  if (authType === 'login' || authType === 'signup' || authType === 'reset') {
    if (typeof openAuth === 'function') {
      setTimeout(() => openAuth(authType), 150);
    }
  }
});
</script>
<?php endif; ?>

<?php if (get_option('enable_notification_popup') == 1 && get_cookie('home_popup') != 1) : ?>
<?php set_cookie("home_popup", "1", 180); ?>
<div style="position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.75);backdrop-filter:blur(6px)" id="popM">
  <div style="background:var(--bg2);border:1px solid var(--glass-b);border-radius:18px;max-width:460px;width:92%;padding:36px">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px"><h3 style="font-size:17px">ðŸ“¢ Announcement</h3><button onclick="document.getElementById('popM').remove()" style="background:0;border:0;color:#fff;font-size:28px;cursor:pointer">&times;</button></div>
    <div style="color:var(--t2);font-size:14px;line-height:1.8"><?= get_option('notification_popup_content') ?></div>
  </div>
</div>
<?php endif; ?>
<?php echo htmlspecialchars_decode(get_option('embed_javascript', ''), ENT_QUOTES); ?>
</body>
</html>

