<?php
// /gateway/public/index.php — Premium public homepage (no admin links, no sensitive info) + Live QR Demo
declare(strict_types=1);

// Static brand/base (no helpers). Update if needed:
$brand   = 'Hostbit Gateway';
$baseUrl = 'https://gateway.hostbit.cloud';

// Optional: Quiet DB ping (page never breaks if this fails)
$dbOk = true;
try {
  @require_once __DIR__ . '/../app/db.php';
  if (function_exists('pdo')) {
    pdo()->query('SELECT 1')->fetchColumn();
  } else {
    $dbOk = false;
  }
} catch (Throwable $e) {
  $dbOk = false;
  @file_put_contents(__DIR__.'/../logs/gateway.log',
    '['.date('Y-m-d H:i:s').'] homepage db ping fail: '.$e->getMessage()."\n", FILE_APPEND);
}

$statusText  = $dbOk ? 'Operational' : 'Degraded';
$statusColor = $dbOk ? '#16a34a' : '#f59e0b';

// Demo data (SAFE placeholders):
$demo = [
  'BTC' => [
    'address' => 'bc1qexampledemobtcaddress000000000000000000',
    'amount'  => '0.001234',
    // BIP21: bitcoin:<addr>?amount=...
    'uri'     => null,
  ],
  'USDT' => [
    // Tron T-address (TRC20 USDT receive)
    'address' => 'TVjsExampleTronAddress0000000000000000000',
    'amount'  => '12.50',
    // TRC20 wallet-apps usually accept trc20:<addr>?amount=... or tron:<addr>
    // For QR we’ll encode a simple label with address & amount that your pay page parses.
    'uri'     => null,
  ],
];
// Prebuild URIs (simple & widely compatible):
$demo['BTC']['uri']  = 'bitcoin:'.$demo['BTC']['address'].'?amount='.$demo['BTC']['amount'];
// For USDT-TRC20: many wallets support tron:<address> and show amount on screen; we’ll append amount as query
$demo['USDT']['uri'] = 'tron:'.$demo['USDT']['address'].'?amount='.$demo['USDT']['amount'];
?>
<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= htmlspecialchars($brand) ?></title>
<meta name="description" content="Minimal, self-hosted crypto payment gateway for BTC & USDT-TRC20">

<style>
  /* -------- Theme & Base -------- */
  :root{
    --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#9aa4b2; --bd:#1f2a3a;
    --accent:#2563eb; --accent-2:#16a34a; --warn:#f59e0b; --link:#7ab4ff; --shadow:rgba(2,8,23,.35);
  }
  html[data-theme="light"]{
    --bg:#f7f8fb; --card:#ffffff; --fg:#0c1829; --muted:#5e7187; --bd:#e6ebf2;
    --accent:#2763ea; --accent-2:#12a150; --warn:#b7791f; --link:#245edc; --shadow:rgba(0,0,0,.08);
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
  a{color:var(--link);text-decoration:none}
  img{display:block;max-width:100%;height:auto}

  /* -------- Layout -------- */
  .container{max-width:1180px;margin:0 auto;padding:20px}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .brand{display:flex;align-items:center;gap:10px}
  .brand img{height:30px;width:auto;opacity:0;transform:translateY(6px);animation:logoFade .6s ease .1s forwards}
  .brand strong{font-weight:700;letter-spacing:.2px}
  @keyframes logoFade{to{opacity:1;transform:none}}

  .nav-actions{display:flex;align-items:center;gap:10px}
  .btn{display:inline-flex;align-items:center;gap:.55rem;padding:.65rem .95rem;border-radius:12px;border:1px solid var(--bd);
       background:var(--card);color:var(--fg);text-decoration:none;box-shadow:0 8px 24px var(--shadow);transition:.2s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .btn.ghost{background:transparent;border-color:var(--bd);box-shadow:none}
  .btn.flat{box-shadow:none}
  .btn.small{padding:.5rem .7rem;border-radius:10px}

  /* Status pill */
  .status{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--bd);background:var(--card);font-size:12px;color:var(--muted)}
  .dot{width:9px;height:9px;border-radius:50%}

  /* -------- Hero -------- */
  .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center;margin-top:26px}
  .hero .lead{color:var(--muted);max-width:700px}
  .h1{font-size:38px;line-height:1.2;margin:.3rem 0 .6rem}
  .hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
  .hero-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:16px}

  /* -------- Features -------- */
  .features{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px}
  .card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:18px;box-shadow:0 10px 26px var(--shadow)}
  .k{font-size:12px;color:var(--muted)}
  .v{font-weight:700;margin:6px 0 8px}
  .list{display:grid;gap:10px}
  .li{display:flex;align-items:flex-start;gap:10px}
  .tick{width:18px;height:18px;border-radius:6px;background:rgba(37,99,235,.15);display:grid;place-items:center;flex:0 0 18px}
  html[data-theme="light"] .tick{background:rgba(39,99,234,.12)}
  .tick i{width:10px;height:10px;border:2px solid var(--accent-2);border-left:0;border-top:0;transform:rotate(45deg);margin-top:-2px}

  /* -------- QR Demo -------- */
  .qr-wrap{display:flex;gap:12px;align-items:center}
  .qr-box{width:128px;height:128px;border-radius:14px;border:1px dashed var(--bd);display:grid;place-items:center;overflow:hidden;background:#0a1323}
  html[data-theme="light"] .qr-box{background:#f1f5fd}
  .qr-meta{display:grid;gap:6px}
  .mono{font-family:ui-monospace, Menlo, Consolas, monospace; word-break:break-all}
  .select{appearance:none;padding:.45rem .7rem;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--fg)}
  .row{display:flex;flex-wrap:wrap;gap:8px}
  .copy-note{font-size:12px;color:var(--muted)}

  /* -------- Dev CTA -------- */
  .dev-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;margin-top:20px}

  /* -------- Footer -------- */
  footer{color:var(--muted);font-size:13px;margin:28px 0;text-align:center}

  /* -------- Responsive -------- */
  .mobile-only{display:none}
  @media (max-width:900px){
    .hero{grid-template-columns:1fr}
    .mobile-only{display:block}
  }
</style>

<script>
  // ---- Theme toggle with localStorage (default: dark) ----
  (function(){
    try{
      const saved = localStorage.getItem('hb-theme');
      if(saved==='light' || saved==='dark') document.documentElement.setAttribute('data-theme', saved);
    }catch(e){}
  })();
  function toggleTheme(){
    const html = document.documentElement;
    const next = html.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
    html.setAttribute('data-theme', next);
    try{ localStorage.setItem('hb-theme', next); }catch(e){}
  }

  // ---- Live QR Demo (uses existing /qr.php endpoint with logo overlay) ----
  const DEMO = {
    BTC: {
      address: "<?= htmlspecialchars($demo['BTC']['address']) ?>",
      amount:  "<?= htmlspecialchars($demo['BTC']['amount']) ?>",
      uri:     "<?= htmlspecialchars($demo['BTC']['uri']) ?>",
      decimals: 8
    },
    USDT: {
      address: "<?= htmlspecialchars($demo['USDT']['address']) ?>",
      amount:  "<?= htmlspecialchars($demo['USDT']['amount']) ?>",
      uri:     "<?= htmlspecialchars($demo['USDT']['uri']) ?>",
      decimals: 2
    }
  };

  function fmt(n, d){ try{ return Number(n).toFixed(d); }catch(e){ return n; } }

  function setCurrency(cur){
    const data = DEMO[cur];
    // QR image: /qr.php?data=<uri>&size=256&logo=1 (your qr.php should support these)
    const img = document.getElementById('qrImg');
    const enc = encodeURIComponent(data.uri);
    img.src = `/qr.php?data=${enc}&size=256&logo=1`;

    // Texts
    document.getElementById('curLabel').textContent = cur;
    document.getElementById('amt').textContent = fmt(data.amount, data.decimals) + ' ' + (cur==='BTC'?'BTC':'USDT');
    document.getElementById('addr').textContent = data.address;

    // Copy handlers update dataset
    document.getElementById('copyAmount').dataset.copy = fmt(data.amount, data.decimals);
    document.getElementById('copyAddress').dataset.copy = data.address;
  }

  function copyFrom(btnId){
    const el = document.getElementById(btnId);
    const v = el.dataset.copy || '';
    if (!v) return;
    navigator.clipboard.writeText(v).then(()=>{
      el.textContent = 'Copied!';
      setTimeout(()=>{ el.textContent = el.dataset.label || 'Copy'; }, 900);
    });
  }

  document.addEventListener('DOMContentLoaded', function(){
    // default currency = BTC
    setCurrency('BTC');
    // dropdown change
    const sel = document.getElementById('currency');
    sel.addEventListener('change', (e)=> setCurrency(e.target.value));
  });
</script>
</head>

<body>
  <div class="container">
    <!-- Topbar -->
    <div class="topbar">
      <div class="brand">
        <img src="/assets/img/logo.png" alt="logo" onerror="this.style.display='none'">
        <strong><?= htmlspecialchars($brand) ?></strong>
      </div>
      <div class="nav-actions">
        <span class="status" aria-label="System status">
          <span class="dot" style="background:<?= $statusColor ?>"></span>
          <span><?= htmlspecialchars($statusText) ?></span>
        </span>
        <button class="btn flat" type="button" onclick="toggleTheme()" aria-label="Toggle theme">🌓 Theme</button>
        <a class="btn" href="/user/login.php">User Panel</a>
      </div>
    </div>

    <!-- Hero -->
    <section class="hero">
      <div>
        <div class="status mobile-only" style="border-radius:10px;margin-bottom:8px">Self-hosted • Non-custodial</div>
        <h1 class="h1">
          Minimal Crypto Payments — <span style="color:#6ea8ff">BTC</span> & <span style="color:#62d99a">USDT-TRC20</span>
        </h1>
        <p class="lead">
          A production-ready gateway that never stores private keys. Assign pre-generated addresses, verify via public APIs,
          charge configurable fees, and deliver smooth QR checkout with your brand at the center.
        </p>
        <div class="hero-cta">
          <a class="btn primary" href="/api/integration.html" target="_blank" rel="noopener">Integration Guide</a>
          <a class="btn ghost" href="/pay.php?invoice_id=DEMO" target="_blank" rel="noopener">View Demo Pay Page</a>
        </div>
      </div>

      <!-- Live QR Demo Card -->
      <div class="hero-card" aria-label="Checkout Live Demo">
        <div class="row" style="justify-content:space-between;align-items:center;margin-bottom:8px">
          <div class="k">Checkout Live Demo</div>
          <select class="select" id="currency" aria-label="Select currency">
            <option value="BTC">BTC (on-chain)</option>
            <option value="USDT">USDT-TRC20</option>
          </select>
        </div>
        <div class="qr-wrap">
          <div class="qr-box">
            <!-- Your qr.php should overlay logo at center when logo=1 -->
            <img id="qrImg" alt="Payment QR" width="128" height="128" src="" />
          </div>
          <div class="qr-meta">
            <div class="v">Send <span id="amt" class="mono">0</span> <span id="curLabel">BTC</span></div>
            <div class="k mono" id="addr">address</div>
            <div class="row">
              <button id="copyAmount" class="btn small flat" type="button" data-label="Copy Amount" data-copy="" onclick="copyFrom('copyAmount')">Copy Amount</button>
              <button id="copyAddress" class="btn small flat" type="button" data-label="Copy Address" data-copy="" onclick="copyFrom('copyAddress')">Copy Address</button>
            </div>
            <div class="copy-note">Scan QR in your wallet app • Demo only</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Features -->
    <section class="features">
      <div class="card">
        <div class="k">Payments</div>
        <div class="v">BTC (on-chain) &amp; USDT-TRC20</div>
        <div class="list">
          <div class="li"><span class="tick"><i></i></span><div>Address pool assignment (no private keys on server)</div></div>
          <div class="li"><span class="tick"><i></i></span><div>Blockstream &amp; TronScan verification</div></div>
          <div class="li"><span class="tick"><i></i></span><div>1 confirmation (configurable)</div></div>
        </div>
      </div>

      <div class="card">
        <div class="k">Checkout &amp; UX</div>
        <div class="v">Branded QR with center logo</div>
        <div class="list">
          <div class="li"><span class="tick"><i></i></span><div>Instant QR + Copy buttons (amount, address, memo)</div></div>
          <div class="li"><span class="tick"><i></i></span><div>PDF receipt after confirmation</div></div>
          <div class="li"><span class="tick"><i></i></span><div>Mobile-friendly responsive UI</div></div>
        </div>
      </div>

      <div class="card">
        <div class="k">Control &amp; Security</div>
        <div class="v">Simple yet Secure</div>
        <div class="list">
          <div class="li"><span class="tick"><i></i></span><div>Configurable gateway fee &amp; affiliate rules</div></div>
          <div class="li"><span class="tick"><i></i></span><div>Webhooks on paid/confirmed</div></div>
          <div class="li"><span class="tick"><i></i></span><div>No sensitive details on public pages</div></div>
        </div>
      </div>
    </section>

    <!-- Developer CTA -->
    <section class="card dev-cta">
      <div>
        <div class="v" style="font-size:16px">Developers</div>
        <div class="k" style="margin-top:4px">Simple JSON endpoints, sample cURL &amp; webhook format</div>
      </div>
      <div style="display:flex;gap:10px">
        <a class="btn primary" href="/api/integration.html" target="_blank" rel="noopener">Open Docs</a>
        <a class="btn" href="/user/login.php">Go to User Panel</a>
      </div>
    </section>

    <footer>© <?= date('Y') ?> <?= htmlspecialchars($brand) ?>. All rights reserved.</footer>
  </div>
</body>
</html>