<?php
/**
 * BangPost Frontend — Web UI for the content creation pipeline.
 * Deploy at: https://aptum.fun/bangpost/
 */

$SCRIPT_DIR     = __DIR__ . '/scripts';
$BANGPOST_SCRIPT = $SCRIPT_DIR . '/bangpost.js';
$OUTPUT_FILE    = __DIR__ . '/final_post.txt';

$topics  = ['crypto','ai','tech','web3','defi','culture','markets','general'];
$presets = [
  'starplatinum' => [
    'name'  => 'StarPlatinum',
    'emoji' => '⭐',
    'short' => 'Casual crypto insider tone',
    'desc'  => 'Informal, engaging, crypto insider. @StarPlatinum_ style.',
  ],
  'builder' => [
    'name'  => 'Builder',
    'emoji' => '🔧',
    'short' => 'Technical & builder-focused',
    'desc'  => 'Casual, lowercase, technical. Hook → insight → CTA.',
  ],
  'analyst' => [
    'name'  => 'Analyst',
    'emoji' => '📊',
    'short' => 'Data-driven with clear takeaways',
    'desc'  => 'Data-driven, precise. Claim → evidence → takeaway.',
  ],
  'shitposter' => [
    'name'  => 'Shitposter',
    'emoji' => '😈',
    'short' => 'Dry humor & absurdist takes',
    'desc'  => 'Dry humor, absurdist. Setup → punchline.',
  ],
  'thread-lord' => [
    'name'  => 'Thread Lord',
    'emoji' => '🧵',
    'short' => 'Structured educational threads',
    'desc'  => 'Educational, structured. Hook → points → conclusion.',
  ],
  'hot-take' => [
    'name'  => 'Hot Take',
    'emoji' => '🔥',
    'short' => 'Bold & contrarian opinions',
    'desc'  => 'Bold, contrarian. Bold claim → reasoning → mic drop.',
  ],
];

$result      = null;
$error       = null;
$pipelineLog = null;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $prompt = trim($_POST['prompt'] ?? '');
  $topic  = trim($_POST['topic']  ?? 'crypto');
  $preset = trim($_POST['preset'] ?? 'starplatinum');

  if (empty($prompt)) {
    $error = 'Please enter what you want the post to be about.';
  } elseif (!in_array($topic, $topics)) {
    $error = 'Invalid topic selected.';
  } elseif (!isset($presets[$preset])) {
    $error = 'Invalid style selected.';
  } else {
    $cmd = "node " . escapeshellarg($BANGPOST_SCRIPT)
         . " --prompt " . escapeshellarg($prompt)
         . " --topic "  . escapeshellarg($topic)
         . " --preset " . escapeshellarg($preset)
         . " --output " . escapeshellarg($OUTPUT_FILE)
         . " --verbose 2>&1";

    $pipelineLog = shell_exec($cmd);

    if (file_exists($OUTPUT_FILE)) {
      $result = trim(file_get_contents($OUTPUT_FILE));
    }

    if (empty($result)) {
      $error = 'Something went wrong generating your post. Please try again.';
    }
  }
}

$charCount   = $result ? strlen($result) : 0;
$overLimit   = $charCount > 280;
$selectedPre = $_POST['preset'] ?? 'starplatinum';
$selectedTop = $_POST['topic']  ?? 'crypto';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>BangPost — Write X Posts with AI · Aptum</title>
<meta name="description" content="Write high-quality X posts in seconds. Choose your style, describe your topic, and let the AI do the rest.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap" rel="stylesheet">
<style>
/* ═══════════════════════════════
   TOKENS
═══════════════════════════════ */
:root {
  --bg0:     #ECEEF2;
  --bg1:     #E4E7EC;
  --bg2:     #FFFFFF;
  --bg3:     #F5F6F9;
  --border:  rgba(10,12,16,0.14);
  --border2: rgba(10,12,16,0.22);
  --border3: rgba(10,12,16,0.36);
  --border4: rgba(10,12,16,0.55);
  --ink:     #090B0F;
  --ink2:    rgba(9,11,15,0.88);
  --ink3:    rgba(9,11,15,0.65);
  --ink4:    rgba(9,11,15,0.42);
  --ink5:    rgba(9,11,15,0.18);
  --green:   #0A7A3E;
  --green-bg:rgba(10,122,62,0.08);
  --red:     #B91C1C;
  --red-bg:  rgba(185,28,28,0.08);
  --mono:    'IBM Plex Mono', monospace;
  --sans:    'IBM Plex Sans', sans-serif;
  --display: 'Syne', sans-serif;
  --safe-b:  env(safe-area-inset-bottom, 0px);
  --safe-t:  env(safe-area-inset-top, 0px);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin    { to{transform:rotate(360deg)} }

/* ═══════════════════════════════
   DESKTOP
═══════════════════════════════ */
#desktop { display:block; }
#mobile  { display:none;  }

body {
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content:''; position:fixed; inset:0; z-index:9000;
  background: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(10,12,16,0.007) 3px,rgba(10,12,16,0.007) 4px);
  pointer-events:none;
}
body::after {
  content:''; position:fixed; inset:0; z-index:0;
  background-image: linear-gradient(rgba(10,12,16,0.06) 1px,transparent 1px), linear-gradient(90deg,rgba(10,12,16,0.06) 1px,transparent 1px);
  background-size: 40px 40px;
  pointer-events:none;
}

/* Cursor */
#cursor { position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%,-50%); }
#cursor-inner { width:7px; height:7px; background:var(--ink); border-radius:50%; transition:width .15s,height .15s; }
#cursor-cross-h { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:22px; height:1px; background:rgba(10,12,16,0.35); }
#cursor-cross-v { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1px; height:22px; background:rgba(10,12,16,0.35); }
body:has(a:hover) #cursor-inner,
body:has(button:hover) #cursor-inner,
body:has(textarea:hover) #cursor-inner,
body:has(select:hover) #cursor-inner,
body:has(input:hover) #cursor-inner { width:14px; height:14px; }

/* Status bar */
.t-statusbar {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:30px; background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; padding:0 16px;
}
.t-sb-left { display:flex; align-items:center; flex:1; }
.t-sb-cell {
  display:flex; align-items:center; gap:8px;
  padding:0 16px; height:30px;
  border-right:1px solid rgba(255,255,255,0.1);
  font-size:10.5px; letter-spacing:0.08em;
  color:rgba(255,255,255,0.5); white-space:nowrap;
}
.t-sb-cell:first-child { border-left:1px solid rgba(255,255,255,0.1); }
.t-sb-cell .lbl { color:rgba(255,255,255,0.38); font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; }
.t-sb-cell .val { color:rgba(255,255,255,0.92); font-weight:600; font-size:11px; }
.t-sb-dot { width:6px; height:6px; border-radius:50%; background:#4ade80; animation:pulse 2.4s ease-in-out infinite; box-shadow:0 0 6px rgba(74,222,128,0.6); flex-shrink:0; }
.t-sb-time { font-size:10.5px; color:rgba(255,255,255,0.42); letter-spacing:0.1em; font-variant-numeric:tabular-nums; padding:0 16px; }

/* Navbar */
.t-navbar {
  position:fixed; top:30px; left:0; right:0; z-index:499;
  height:48px; background:var(--bg2);
  border-bottom:2px solid var(--border3);
  display:flex; align-items:stretch;
  box-shadow:0 2px 12px rgba(10,12,16,0.07);
}
.t-nav-logo {
  display:flex; align-items:center; padding:0 22px;
  border-right:2px solid var(--border3);
  font-family:var(--display); font-size:16px; font-weight:800;
  letter-spacing:0.14em; color:var(--ink); gap:10px; cursor:none;
}
.t-nav-logo-tag {
  font-family:var(--mono); font-size:10px; font-weight:600;
  color:var(--bg2); letter-spacing:0.12em;
  background:var(--ink); padding:2px 8px;
}
.t-nav-center {
  display:flex; align-items:center; padding:0 22px;
  font-family:var(--sans); font-size:13px; color:var(--ink3); font-weight:500;
  flex:1;
}
.t-nav-center strong { color:var(--ink); font-weight:700; margin-right:6px; }
.t-nav-right { display:flex; align-items:center; margin-left:auto; }
.t-nav-link {
  display:flex; align-items:center; gap:7px;
  padding:0 18px; height:48px;
  font-size:10.5px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink3);
  border-left:1px solid var(--border);
  transition:color .15s, background .15s; cursor:none;
}
.t-nav-link:hover { color:var(--ink); background:var(--bg3); }

/* ── Shell — below fixed status+nav ── */
.t-shell {
  position:relative; z-index:1;
  padding-top:78px;
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* ── 3-column page grid: left nav | main | right sidebar ── */
.t-page {
  flex:1;
  display:grid;
  grid-template-columns:160px 1fr 300px;
  width:100%;
  border-top:1px solid var(--border2);
}

/* ── Left sidebar navigation ── */
.t-leftnav {
  border-right:2px solid var(--border3);
  background:var(--bg2);
  display:flex; flex-direction:column;
  position:sticky; top:78px;
  height:calc(100vh - 78px);
  overflow-y:auto;
}
.t-leftnav-hd {
  padding:11px 14px; border-bottom:2px solid var(--border3);
  font-size:9px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink4); font-weight:700; background:var(--bg1); flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
}
.t-leftnav-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border-bottom:1px solid var(--border);
  font-size:11px; color:var(--ink3); font-weight:500;
  background:none; border-left:3px solid transparent;
  cursor:none; text-align:left; transition:background .12s, color .12s;
  text-decoration:none; width:100%; font-family:var(--mono);
}
.t-leftnav-link:hover { background:var(--bg3); color:var(--ink2); }
.t-leftnav-link.active { color:var(--ink); font-weight:700; border-left-color:var(--ink); background:var(--bg3); }
.t-leftnav-arr { font-size:11px; color:var(--ink4); }
.t-leftnav-section { padding:12px 14px; border-bottom:1px solid var(--border2); }
.t-leftnav-section-hd { font-size:8.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink4); font-weight:700; margin-bottom:8px; }
.t-leftnav-stat { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--border); }
.t-leftnav-stat:last-child { border-bottom:none; }
.t-leftnav-stat-k { font-size:10px; color:var(--ink3); font-weight:500; }
.t-leftnav-stat-v { font-size:10.5px; color:var(--ink2); font-weight:700; }
.t-leftnav-stat-v.green { color:var(--green); }

/* ── Main content column ── */
.t-main { padding:28px 32px; display:flex; flex-direction:column; min-width:0; }

/* ── Right sidebar ── */
.t-sidebar {
  border-left:2px solid var(--border3);
  background:var(--bg2);
  display:flex; flex-direction:column;
  position:sticky; top:78px;
  height:calc(100vh - 78px);
  overflow-y:auto;
}
.t-sidebar::-webkit-scrollbar { width:4px; }
.t-sidebar::-webkit-scrollbar-track { background:var(--bg1); }
.t-sidebar::-webkit-scrollbar-thumb { background:var(--border3); }

/* Sidebar sections */
.t-sb-section { border-bottom:1px solid var(--border2); }
.t-sb-section-hd {
  padding:12px 18px; background:var(--bg1);
  font-size:9.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--ink4); font-weight:700;
  border-bottom:1px solid var(--border);
}
.t-sb-body { padding:16px 18px; }
.t-sb-stat { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); }
.t-sb-stat:last-child { border-bottom:none; }
.t-sb-stat-k { font-size:11px; color:var(--ink3); font-weight:500; }
.t-sb-stat-v { font-size:11.5px; color:var(--ink2); font-weight:700; }
.t-sb-stat-v.green { color:var(--green); }

/* Output card in sidebar */
.t-output-card {
  margin:14px; padding:18px;
  background:var(--bg3); border:1px solid var(--border2);
  border-left:3px solid var(--green);
  animation:fadeUp .4s ease;
}
.t-output-card.error-card { border-left-color:var(--red); background:var(--red-bg); }
.t-output-lbl {
  font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:700; margin-bottom:12px;
}
.t-output-lbl.success { color:var(--green); }
.t-output-lbl.error   { color:var(--red); }
.t-output-text {
  font-family:var(--sans); font-size:14px; color:var(--ink); line-height:1.75;
  white-space:pre-wrap; word-wrap:break-word; margin-bottom:14px;
}
.t-output-error-text {
  font-family:var(--mono); font-size:12px; color:var(--red);
  line-height:1.6; margin-bottom:14px;
}
.t-output-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; border-top:1px solid var(--border);
}
.t-char-badge {
  font-size:10px; font-weight:700; letter-spacing:0.06em;
  padding:3px 9px; background:var(--green-bg); color:var(--green); border:1px solid rgba(10,122,62,0.2);
}
.t-char-badge.over { background:var(--red-bg); color:var(--red); border-color:rgba(185,28,28,0.2); }
.t-copy-btn {
  font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  padding:7px 14px; background:var(--bg2); color:var(--ink2);
  border:1px solid var(--border2); cursor:none;
  transition:all .15s;
}
.t-copy-btn:hover { background:var(--ink); color:var(--bg2); border-color:var(--ink); }
.t-copy-btn.copied { background:var(--green); color:var(--bg2); border-color:var(--green); }

/* Log toggle */
.t-log-row { margin-top:12px; }
.t-log-btn {
  font-size:10px; color:var(--ink4); background:none; border:none;
  cursor:none; display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; padding:0; transition:color .15s;
}
.t-log-btn:hover { color:var(--ink2); }
.t-log-arr { transition:transform .2s; }
.t-log-btn.open .t-log-arr { transform:rotate(180deg); }
.t-log-body {
  display:none; margin-top:10px; padding:12px;
  background:var(--bg1); border:1px solid var(--border2);
  font-size:10.5px; color:var(--ink3); line-height:1.6;
  white-space:pre-wrap; max-height:220px; overflow-y:auto;
}
.t-log-body.open { display:block; }

/* ── HERO ── */
.t-hero {
  background:var(--bg2); border:2px solid var(--border3);
  padding:28px 32px 24px; margin-bottom:20px;
  position:relative; overflow:hidden;
  box-shadow:0 2px 16px rgba(10,12,16,0.06);
  animation:fadeUp .5s ease;
}
.t-hero-wm {
  position:absolute; right:-8px; top:-20px;
  font-family:var(--display); font-weight:800; font-size:110px;
  line-height:1; color:rgba(10,12,16,0.03);
  pointer-events:none; user-select:none; letter-spacing:-0.04em;
}
.t-tag-row { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.t-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase;
  padding:3px 10px; border:1px solid var(--border2); color:var(--ink3); font-weight:600;
}
.t-tag.live { border-color:var(--green); color:var(--green); background:var(--green-bg); font-weight:700; }
.t-tag-dot { width:5px; height:5px; border-radius:50%; background:currentColor; animation:pulse 2s infinite; }
.t-hero-title {
  font-family:var(--display); font-weight:800;
  font-size:clamp(28px,3.5vw,40px);
  line-height:1; letter-spacing:-0.025em; color:var(--ink); margin-bottom:8px;
}
.t-hero-sub {
  font-family:var(--sans); font-size:14px; color:var(--ink3);
  font-weight:500; max-width:520px; line-height:1.65;
}

/* ── FORM SECTIONS ── */
.t-section {
  background:var(--bg2); border:2px solid var(--border3);
  margin-bottom:16px;
  box-shadow:0 2px 12px rgba(10,12,16,0.05);
  animation:fadeUp .5s ease both;
}
.t-section:nth-child(2) { animation-delay:.05s; }
.t-section:nth-child(3) { animation-delay:.10s; }
.t-section:nth-child(4) { animation-delay:.15s; }
.t-section-hd {
  padding:14px 24px; border-bottom:1px solid var(--border2);
  display:flex; align-items:center; gap:12px; background:var(--bg1);
}
.t-section-hd-num {
  font-size:10px; color:var(--ink4); letter-spacing:0.1em; font-weight:700;
  border:1px solid var(--border2); padding:2px 8px; background:var(--bg3);
}
.t-section-hd-pipe { color:var(--border3); font-size:14px; }
.t-section-hd-title { font-size:12px; color:var(--ink); letter-spacing:0.1em; text-transform:uppercase; font-weight:700; }
.t-section-hd-sub { font-family:var(--sans); font-size:12px; color:var(--ink3); font-weight:500; }
.t-section-body { padding:22px 24px; }

/* Field label */
.f-label {
  display:block; font-family:var(--sans); font-size:13px;
  font-weight:600; color:var(--ink2); margin-bottom:8px;
}
.f-hint {
  display:block; font-family:var(--sans); font-size:12px;
  color:var(--ink4); margin-bottom:10px; line-height:1.5;
}

/* Textarea */
.f-textarea {
  width:100%; padding:16px; background:var(--bg3);
  border:1px solid var(--border2); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.65;
  outline:none; resize:vertical; min-height:130px;
  border-radius:0; cursor:none;
  transition:border-color .15s, background .15s;
}
.f-textarea::placeholder { color:var(--ink4); font-style:italic; }
.f-textarea:focus { background:var(--bg2); border-color:var(--border4); }

/* Select */
.f-select-wrap { position:relative; }
.f-select-wrap::after {
  content:'▼'; position:absolute; right:14px; top:50%;
  transform:translateY(-50%); font-size:9px; color:var(--ink4); pointer-events:none;
}
.f-select {
  width:100%; padding:13px 36px 13px 16px;
  background:var(--bg3); border:1px solid var(--border2); color:var(--ink);
  font-family:var(--sans); font-size:14px;
  outline:none; appearance:none; cursor:none;
  transition:border-color .15s, background .15s;
}
.f-select:focus { background:var(--bg2); border-color:var(--border4); }

/* Two-col grid */
.f-two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* Preset picker (visual) */
.f-presets {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:4px;
}
.f-preset-btn {
  display:flex; flex-direction:column; align-items:flex-start;
  padding:14px; border:1px solid var(--border2);
  background:var(--bg3); cursor:none;
  transition:border-color .15s, background .15s;
  gap:4px; text-align:left;
}
.f-preset-btn:hover { background:var(--bg2); border-color:var(--border3); }
.f-preset-btn.selected { border-color:var(--ink); border-width:2px; background:var(--bg2); }
.f-preset-emoji { font-size:20px; line-height:1; margin-bottom:2px; }
.f-preset-name { font-family:var(--sans); font-size:12px; font-weight:700; color:var(--ink); }
.f-preset-short { font-family:var(--sans); font-size:10.5px; color:var(--ink3); font-weight:500; line-height:1.4; }
.f-preset-btn.selected .f-preset-short { color:var(--ink2); }
/* Hidden radio */
.f-preset-radio { position:absolute; opacity:0; pointer-events:none; }

/* Char counter */
.f-char-row { display:flex; justify-content:flex-end; margin-top:6px; }
.f-char-hint { font-size:11px; color:var(--ink4); font-weight:600; transition:color .2s; }
.f-char-hint.warn { color:#B45309; }
.f-char-hint.over { color:var(--red); font-weight:700; }

/* Submit */
.t-submit {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:20px 24px;
  background:var(--ink); color:var(--bg2);
  border:none; cursor:none; font-family:var(--mono);
  font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  transition:background .15s; position:relative; overflow:hidden;
}
.t-submit:hover { background:#22252E; }
.t-submit:disabled { opacity:.65; pointer-events:none; }
.t-submit-l { display:flex; align-items:center; gap:12px; }
.t-submit-pulse {
  width:8px; height:8px; background:#4ade80; border-radius:50%;
  display:none; box-shadow:0 0 8px rgba(74,222,128,0.7);
}
.t-submit.loading .t-submit-pulse { display:block; animation:pulse 1s infinite; }
.t-submit.loading .t-submit-arr { display:none; }
.t-submit.loading .t-submit-txt { opacity:.8; }

/* ── DESKTOP CALLOUT BELOW FORM ── */
.t-callout {
  padding:16px 22px; border-left:3px solid var(--border3);
  background:var(--bg3); border:1px solid var(--border);
  border-left:3px solid var(--border3);
  font-family:var(--sans); font-size:12px; color:var(--ink3); line-height:1.65;
  margin-top:8px;
}
.t-callout strong { color:var(--ink2); font-weight:600; }

/* Tape — full-width inside shell, above the 3-col grid */
.t-tape {
  border-bottom:2px solid var(--border3);
  background:var(--bg1); overflow:hidden; height:30px;
  display:flex; align-items:center;
  flex-shrink:0;
}
.t-tape-track {
  display:flex; white-space:nowrap;
  animation:tapeScroll 26s linear infinite;
}
.t-tape-item {
  display:flex; align-items:center; gap:8px;
  padding:0 20px; border-right:1px solid var(--border);
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink3); height:30px; font-weight:600;
}
.t-tape-item .sym { color:var(--ink); font-weight:800; }
.t-tape-item .gr  { color:var(--green); font-weight:700; }
@keyframes tapeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Footer */
.t-footer {
  height:34px; background:var(--ink);
  border-top:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; padding:0 16px;
  position:relative; z-index:1;
}
.t-footer-cell {
  display:flex; align-items:center; gap:8px; padding:0 16px; height:34px;
  border-right:1px solid rgba(255,255,255,0.08);
  font-size:10px; letter-spacing:0.08em; color:rgba(255,255,255,0.4);
}
.t-footer-cell:first-child { border-left:1px solid rgba(255,255,255,0.08); }
.t-footer-cell a { color:rgba(255,255,255,0.55); font-weight:600; transition:color .15s; }
.t-footer-cell a:hover { color:rgba(255,255,255,0.9); }
.t-footer-r { margin-left:auto; display:flex; align-items:center; }

/* ═══════════════════════════════
   MOBILE STYLES
═══════════════════════════════ */
@media (pointer:coarse),(max-width:779px) {
  :root {
    --m-bg:    #080A0F;
    --m-glass: rgba(255,255,255,0.058);
    --m-g2:    rgba(255,255,255,0.036);
    --m-gb:    rgba(255,255,255,0.12);
    --m-gb2:   rgba(255,255,255,0.07);
    --m-ink:   #FFFFFF;
    --m-ink2:  rgba(255,255,255,0.75);
    --m-ink3:  rgba(255,255,255,0.45);
    --m-ink4:  rgba(255,255,255,0.24);
    --m-green: #34D399;
    --m-gdim:  rgba(52,211,153,0.12);
    --m-red:   #F87171;
    --m-rdim:  rgba(248,113,113,0.12);
  }
  body   { background:var(--m-bg); color:var(--m-ink); cursor:auto; scrollbar-width:none; }
  body::-webkit-scrollbar { display:none; }
  body::before,body::after { display:none; }
  #cursor  { display:none; }
  #desktop { display:none; }
  #mobile  { display:block; }

  /* Orbs */
  .m-orb { position:fixed; border-radius:50%; pointer-events:none; z-index:0; }
  .m-orb-1 { width:500px; height:500px; top:-120px; left:-180px; background:radial-gradient(circle,rgba(139,92,246,0.22) 0%,transparent 68%); animation:mOrb 18s ease-in-out infinite; }
  .m-orb-2 { width:380px; height:380px; bottom:20%; right:-90px; background:radial-gradient(circle,rgba(6,182,212,0.17) 0%,transparent 68%); animation:mOrb 24s ease-in-out infinite reverse; }
  .m-orb-3 { width:300px; height:300px; top:55%; left:5%; background:radial-gradient(circle,rgba(25,55,100,0.14) 0%,transparent 68%); animation:mOrb 21s ease-in-out infinite 5s; }
  @keyframes mOrb { 0%,100%{transform:translateY(0) scale(1)} 40%{transform:translateY(-26px) scale(1.04)} 70%{transform:translateY(14px) scale(0.97)} }
  @keyframes mBreathe { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(52,211,153,0.5)} 50%{opacity:.65;box-shadow:0 0 0 5px rgba(52,211,153,0)} }
  @keyframes mIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

  /* Glassmorphism helpers */
  .m-glass {
    background:var(--m-glass);
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    border:1px solid var(--m-gb); border-radius:20px;
    position:relative; overflow:hidden;
  }
  .m-glass::before {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(140deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.01) 55%,transparent 100%);
    pointer-events:none;
  }

  /* Top nav */
  .m-topnav {
    position:fixed; top:0; left:0; right:0; z-index:200;
    height:calc(58px + var(--safe-t)); padding:var(--safe-t) 18px 0;
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(8,10,15,0.88);
    backdrop-filter:blur(32px) saturate(180%);
    -webkit-backdrop-filter:blur(32px) saturate(180%);
    border-bottom:1px solid var(--m-gb2);
  }
  .m-topnav-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:17px; letter-spacing:0.12em; color:var(--m-ink); }
  .m-topnav-pill {
    display:flex; align-items:center; gap:7px;
    padding:6px 14px; border-radius:100px;
    background:var(--m-glass); border:1px solid var(--m-gb);
    font-size:11px; letter-spacing:0.08em; color:var(--m-ink2);
  }
  .m-live-dot { width:6px; height:6px; background:var(--m-green); border-radius:50%; animation:mBreathe 2.5s ease-in-out infinite; flex-shrink:0; }

  /* Bottom nav */
  .m-botnav {
    position:fixed; bottom:0; left:0; right:0; z-index:200;
    padding:10px 16px calc(var(--safe-b) + 8px);
    background:rgba(8,10,15,0.94);
    backdrop-filter:blur(40px) saturate(200%);
    -webkit-backdrop-filter:blur(40px) saturate(200%);
    border-top:1px solid var(--m-gb2);
  }
  .m-botnav-inner { display:flex; justify-content:space-around; align-items:center; max-width:440px; margin:0 auto; }
  .m-botnav-btn {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 14px; border-radius:12px; min-width:52px;
    background:transparent; border:none; color:var(--m-ink4);
    -webkit-tap-highlight-color:transparent; transition:color .2s, background .2s;
    cursor:pointer; text-decoration:none;
  }
  .m-botnav-btn.active { color:var(--m-ink); background:rgba(255,255,255,0.07); }
  .m-botnav-btn svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .m-botnav-lbl { font-size:9px; letter-spacing:0.1em; text-transform:uppercase; font-family:'IBM Plex Mono',monospace; }

  /* Shell & scroll */
  .m-shell {
    position:relative; z-index:1;
    padding-top:calc(58px + var(--safe-t));
    padding-bottom:calc(var(--safe-b) + 78px);
    min-height:100dvh; min-height:100vh;
  }
  .m-pad { padding:0 16px 10px; max-width:480px; margin:0 auto; }

  /* Hero */
  .m-hero { padding-top:28px; padding-bottom:10px; }
  .m-hero-kicker {
    display:flex; align-items:center; gap:10px;
    font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--m-ink4); margin-bottom:18px;
  }
  .m-kline { flex:1; height:1px; background:var(--m-gb); max-width:36px; }
  .m-hero-title {
    font-family:'Syne',sans-serif; font-weight:800;
    font-size:clamp(40px,11vw,60px); line-height:0.95;
    letter-spacing:-0.03em; color:var(--m-ink); margin-bottom:6px;
  }
  .m-hero-out { display:block; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,0.5); }
  .m-hero-sub { font-size:14px; color:var(--m-ink3); line-height:1.65; margin-bottom:28px; font-family:'IBM Plex Sans',sans-serif; font-weight:400; }

  /* Result card */
  .m-result { padding:20px; margin-bottom:18px; animation:mIn .35s ease; }
  .m-result-lbl { font-size:10px; text-transform:uppercase; letter-spacing:0.14em; font-weight:700; margin-bottom:14px; }
  .m-result-lbl.ok  { color:var(--m-green); }
  .m-result-lbl.err { color:var(--m-red); }
  .m-result-text { font-family:'IBM Plex Sans',sans-serif; font-size:15px; color:var(--m-ink); white-space:pre-wrap; word-wrap:break-word; line-height:1.75; }
  .m-result-error { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--m-red); line-height:1.6; }
  .m-result-foot {
    display:flex; align-items:center; justify-content:space-between;
    margin-top:18px; padding-top:16px; border-top:1px solid var(--m-gb2);
  }
  .m-char-pill {
    font-size:10px; font-family:'IBM Plex Mono',monospace; font-weight:700;
    padding:4px 10px; border-radius:100px;
    background:var(--m-gdim); color:var(--m-green); border:1px solid rgba(52,211,153,0.2);
  }
  .m-char-pill.over { background:var(--m-rdim); color:var(--m-red); border-color:rgba(248,113,113,0.2); }
  .m-copy-btn {
    padding:9px 18px; border-radius:12px;
    background:var(--m-g2); border:1px solid var(--m-gb2);
    font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--m-ink2); font-family:'IBM Plex Mono',monospace;
    -webkit-tap-highlight-color:transparent; transition:background .14s; cursor:pointer;
  }
  .m-copy-btn:active { background:var(--m-glass); }
  .m-copy-btn.copied { color:var(--m-green); }

  /* Steps */
  .m-step { padding:18px; margin-bottom:14px; animation:mIn .4s ease both; }
  .m-step:nth-child(1) { animation-delay:.05s; }
  .m-step:nth-child(2) { animation-delay:.10s; }
  .m-step:nth-child(3) { animation-delay:.15s; }
  .m-step-num {
    font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--m-ink4); font-weight:700; margin-bottom:12px;
    display:flex; align-items:center; gap:8px;
  }
  .m-step-num-badge {
    width:20px; height:20px; border-radius:50%;
    background:var(--m-glass); border:1px solid var(--m-gb2);
    display:flex; align-items:center; justify-content:center;
    font-size:9px; color:var(--m-ink3); font-weight:700;
  }
  .m-step-lbl { font-family:'IBM Plex Sans',sans-serif; font-size:14px; font-weight:700; color:var(--m-ink); margin-bottom:4px; }
  .m-step-hint { font-family:'IBM Plex Sans',sans-serif; font-size:12.5px; color:var(--m-ink3); margin-bottom:14px; line-height:1.5; }

  /* Mobile textarea & select */
  .m-textarea {
    width:100%; min-height:120px; resize:vertical;
    background:var(--m-g2); border:1px solid var(--m-gb2); border-radius:16px;
    padding:16px; color:var(--m-ink);
    font-family:'IBM Plex Sans',sans-serif; font-size:15px; line-height:1.6;
    outline:none; -webkit-appearance:none; cursor:auto;
  }
  .m-textarea::placeholder { color:var(--m-ink4); font-style:italic; }
  .m-textarea:focus { border-color:var(--m-gb); }
  .m-select-wrap { position:relative; }
  .m-select-wrap::after { content:'▼'; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:9px; color:var(--m-ink4); pointer-events:none; }
  .m-select {
    width:100%; padding:14px 40px 14px 16px;
    background:var(--m-g2); border:1px solid var(--m-gb2); border-radius:16px;
    color:var(--m-ink); font-family:'IBM Plex Sans',sans-serif; font-size:15px;
    outline:none; -webkit-appearance:none; cursor:auto;
  }

  /* Mobile preset grid */
  .m-presets { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
  .m-preset-btn {
    display:flex; flex-direction:column; align-items:flex-start; gap:3px;
    padding:14px; border-radius:16px;
    background:var(--m-g2); border:1px solid var(--m-gb2);
    -webkit-tap-highlight-color:transparent; cursor:pointer; text-align:left;
    transition:background .15s, border-color .15s;
  }
  .m-preset-btn:active { background:var(--m-glass); }
  .m-preset-btn.selected {
    background:var(--m-glass); border-color:var(--m-gb);
    box-shadow:inset 0 0 0 1px var(--m-gb);
  }
  .m-preset-emoji { font-size:22px; line-height:1; margin-bottom:3px; }
  .m-preset-name { font-family:'Syne',sans-serif; font-size:13px; font-weight:800; color:var(--m-ink); }
  .m-preset-short { font-family:'IBM Plex Sans',sans-serif; font-size:11px; color:var(--m-ink3); line-height:1.4; }

  /* Mobile char counter */
  .m-char-row { display:flex; justify-content:flex-end; margin-top:8px; }
  .m-char-hint { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--m-ink4); font-weight:600; }
  .m-char-hint.warn { color:#F59E0B; }
  .m-char-hint.over { color:var(--m-red); font-weight:700; }

  /* Mobile submit */
  .m-submit {
    width:100%; padding:20px 22px; border-radius:20px;
    background:var(--m-ink); color:#fff;
    font-family:'Syne',sans-serif; font-weight:800; font-size:15px;
    letter-spacing:0.1em; text-transform:uppercase; border:none;
    display:flex; align-items:center; justify-content:space-between;
    -webkit-tap-highlight-color:transparent; cursor:pointer;
    transition:opacity .14s; margin-bottom:14px;
    position:relative; overflow:hidden;
  }
  .m-submit::before { content:''; position:absolute; top:0; left:0; right:0; height:50%; background:linear-gradient(to bottom,rgba(255,255,255,0.1),transparent); border-radius:20px 20px 0 0; pointer-events:none; }
  .m-submit:active { opacity:.85; }
  .m-submit:disabled { opacity:.6; }
  .m-submit-ico { font-size:22px; opacity:0.7; }

  /* Mobile callout */
  .m-note {
    padding:14px 16px; border-radius:14px;
    background:var(--m-g2); border:1px solid var(--m-gb2);
    font-family:'IBM Plex Sans',sans-serif; font-size:12.5px;
    color:var(--m-ink3); line-height:1.65; margin-bottom:16px;
  }
  .m-note strong { color:var(--m-ink2); }
}

@media (pointer:fine) and (min-width:780px) {
  #mobile  { display:none; }
  #desktop { display:block; }
}
</style>
</head>
<body>

<div id="cursor">
  <div id="cursor-cross-h"></div>
  <div id="cursor-cross-v"></div>
  <div id="cursor-inner"></div>
</div>

<!-- ═══════════════════════════════════════
     DESKTOP
═══════════════════════════════════════ -->
<div id="desktop">

  <!-- STATUS BAR -->
  <div class="t-statusbar">
    <div class="t-sb-left">
      <div class="t-sb-cell">
        <div class="t-sb-dot"></div>
        <span style="color:rgba(255,255,255,0.9);font-weight:700;font-size:11px;letter-spacing:0.1em;">PIPELINE ACTIVE</span>
      </div>
      <div class="t-sb-cell"><span class="lbl">MODEL</span><span class="val">NVIDIA NIM</span></div>
      <div class="t-sb-cell"><span class="lbl">STYLES</span><span class="val" style="color:#4ade80;"><?= count($presets) ?> LOADED</span></div>
      <div class="t-sb-cell"><span class="lbl">NETWORK</span><span class="val" style="color:#4ade80;">BASE L2</span></div>
    </div>
    <div class="t-sb-right">
      <div class="t-sb-time" id="termTime">--:--:-- UTC</div>
    </div>
  </div>

  <!-- NAVBAR -->
  <nav class="t-navbar">
    <a href="https://aptum.fun/" class="t-nav-logo">APTUM <span class="t-nav-logo-tag">$A</span></a>
    <div class="t-nav-center">
      <strong>BangPost</strong> — Write X posts with AI in seconds
    </div>
    <div class="t-nav-right">
      <a href="https://aptum.fun/" class="t-nav-link">← Back to Aptum</a>
      <a href="https://x.com/aptum_" target="_blank" rel="noopener" class="t-nav-link">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.73-8.835L1.254 2.25H8.08l4.258 5.63 5.906-5.63z"/></svg>
        Twitter
      </a>
    </div>
  </nav>

  <!-- SHELL wraps tape + 3-col grid -->
  <div class="t-shell">

    <!-- TICKER TAPE — full width -->
    <div class="t-tape">
      <div class="t-tape-track">
        <div class="t-tape-item"><span class="sym">BP</span><span>BANGPOST ENGINE</span></div>
        <div class="t-tape-item">STYLE <span class="gr">6 PRESETS</span></div>
        <div class="t-tape-item">RESEARCH <span class="gr">LIVE ●</span></div>
        <div class="t-tape-item">QA <span class="gr">STRICT ✓</span></div>
        <div class="t-tape-item">MAX CHARS <span>280</span></div>
        <div class="t-tape-item">AVG TIME <span>30–60S</span></div>
        <div class="t-tape-item">MODEL <span>NVIDIA NIM</span></div>
        <div class="t-tape-item">NETWORK <span>BASE L2</span></div>
        <div class="t-tape-item"><span class="sym">BP</span><span>BANGPOST ENGINE</span></div>
        <div class="t-tape-item">STYLE <span class="gr">6 PRESETS</span></div>
        <div class="t-tape-item">RESEARCH <span class="gr">LIVE ●</span></div>
        <div class="t-tape-item">QA <span class="gr">STRICT ✓</span></div>
        <div class="t-tape-item">MAX CHARS <span>280</span></div>
        <div class="t-tape-item">AVG TIME <span>30–60S</span></div>
        <div class="t-tape-item">MODEL <span>NVIDIA NIM</span></div>
        <div class="t-tape-item">NETWORK <span>BASE L2</span></div>
      </div>
    </div>

    <!-- 3-COLUMN GRID -->
    <div class="t-page">

      <!-- LEFT NAV SIDEBAR -->
      <div class="t-leftnav">
        <div class="t-leftnav-hd"><span>NAVIGATION</span><span style="color:var(--ink5)">▸</span></div>
        <button class="t-leftnav-link active"><span>Write a Post</span><span class="t-leftnav-arr">›</span></button>
        <a href="https://aptum.fun/" class="t-leftnav-link"><span>← Aptum Home</span><span class="t-leftnav-arr">›</span></a>
        <a href="https://aptum.fun/aptum_whitepaper.php" class="t-leftnav-link"><span>Whitepaper</span><span class="t-leftnav-arr">›</span></a>
        <a href="https://x.com/aptum_" target="_blank" rel="noopener" class="t-leftnav-link"><span>X / Twitter</span><span class="t-leftnav-arr">›</span></a>
        <a href="https://t.me/aptum" target="_blank" rel="noopener" class="t-leftnav-link"><span>Telegram</span><span class="t-leftnav-arr">›</span></a>

        <div class="t-leftnav-section">
          <div class="t-leftnav-section-hd">PIPELINE INFO</div>
          <div class="t-leftnav-stat"><span class="t-leftnav-stat-k">Model</span><span class="t-leftnav-stat-v">NIM</span></div>
          <div class="t-leftnav-stat"><span class="t-leftnav-stat-k">Styles</span><span class="t-leftnav-stat-v green">6 ✓</span></div>
          <div class="t-leftnav-stat"><span class="t-leftnav-stat-k">Max chars</span><span class="t-leftnav-stat-v">280</span></div>
          <div class="t-leftnav-stat"><span class="t-leftnav-stat-k">Avg time</span><span class="t-leftnav-stat-v">30–60s</span></div>
          <div class="t-leftnav-stat"><span class="t-leftnav-stat-k">Research</span><span class="t-leftnav-stat-v green">Live ●</span></div>
        </div>
      </div>

      <!-- MAIN CONTENT -->
      <div class="t-main">

        <!-- HERO -->
        <div class="t-hero">
          <div class="t-hero-wm">BP</div>
          <div class="t-tag-row">
            <span class="t-tag live"><span class="t-tag-dot"></span>READY TO WRITE</span>
            <span class="t-tag">6 STYLES</span>
            <span class="t-tag">LIVE RESEARCH</span>
            <span class="t-tag">MAX 280 CHARS</span>
          </div>
          <div class="t-hero-title">Write your next X post</div>
          <div class="t-hero-sub">Tell the AI what to write about, pick a style that matches your voice, and get a ready-to-post tweet in under a minute.</div>
        </div>

      <!-- FORM -->
      <form method="POST" id="bangForm">

        <!-- STEP 1: WHAT TO WRITE ABOUT -->
        <div class="t-section">
          <div class="t-section-hd">
            <span class="t-section-hd-num">01</span>
            <span class="t-section-hd-pipe">|</span>
            <span class="t-section-hd-title">What's the post about?</span>
            <span class="t-section-hd-sub">Describe the topic, news, or idea</span>
          </div>
          <div class="t-section-body">
            <label class="f-label" for="prompt">Describe it in plain English</label>
            <span class="f-hint">Be specific — the more detail you give, the better the output. You can mention a specific event, a stat, a hot take, or just a general theme.</span>
            <textarea
              class="f-textarea" name="prompt" id="prompt" required
              placeholder="e.g. The Fed just held rates again. Why this is actually bullish for crypto long-term..."
            ><?= htmlspecialchars($_POST['prompt'] ?? '') ?></textarea>
            <div class="f-char-row">
              <span class="f-char-hint" id="promptCharHint">0 chars</span>
            </div>
          </div>
        </div>

        <!-- STEP 2: TOPIC -->
        <div class="t-section">
          <div class="t-section-hd">
            <span class="t-section-hd-num">02</span>
            <span class="t-section-hd-pipe">|</span>
            <span class="t-section-hd-title">Pick a Topic</span>
            <span class="t-section-hd-sub">Helps the AI research relevant context</span>
          </div>
          <div class="t-section-body">
            <label class="f-label" for="topic">Topic area</label>
            <div class="f-select-wrap" style="max-width:300px;">
              <select class="f-select" name="topic" id="topic">
                <?php foreach ($topics as $t): ?>
                <option value="<?= $t ?>" <?= ($t === $selectedTop) ? 'selected' : '' ?>>
                  <?= ucfirst($t) ?>
                </option>
                <?php endforeach; ?>
              </select>
            </div>
          </div>
        </div>

        <!-- STEP 3: STYLE/PRESET -->
        <div class="t-section">
          <div class="t-section-hd">
            <span class="t-section-hd-num">03</span>
            <span class="t-section-hd-pipe">|</span>
            <span class="t-section-hd-title">Choose your style</span>
            <span class="t-section-hd-sub">How should the post sound?</span>
          </div>
          <div class="t-section-body">
            <label class="f-label">Pick a writing style</label>
            <span class="f-hint">Each style changes the tone, structure, and personality of the post.</span>
            <div class="f-presets" id="presetGrid">
              <?php foreach ($presets as $key => $p): ?>
              <label class="f-preset-btn <?= ($key === $selectedPre) ? 'selected' : '' ?>" id="dpcard-<?= $key ?>">
                <input class="f-preset-radio" type="radio" name="preset" value="<?= $key ?>" <?= ($key === $selectedPre) ? 'checked' : '' ?> onchange="selectPreset('<?= $key ?>')">
                <div class="f-preset-emoji"><?= $p['emoji'] ?></div>
                <div class="f-preset-name"><?= $p['name'] ?></div>
                <div class="f-preset-short"><?= $p['short'] ?></div>
              </label>
              <?php endforeach; ?>
            </div>
          </div>
        </div>

        <!-- SUBMIT -->
        <button type="submit" class="t-submit" id="submitBtn">
          <div class="t-submit-l">
            <div class="t-submit-pulse"></div>
            <span class="t-submit-txt">Generate my post</span>
          </div>
          <svg class="t-submit-arr" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </button>

      </form>

      <div class="t-callout">
        <strong>Takes 30–60 seconds.</strong> The AI researches your topic in real time before writing. If the result is over 280 characters, it means the QA pass didn't trim it — just shorten it manually before posting.
      </div>

    </div><!-- /t-main -->

      <!-- RIGHT SIDEBAR -->
    <div class="t-sidebar">

      <!-- Output -->
      <div class="t-sb-section" style="border-bottom:2px solid var(--border3);">
        <div class="t-sb-section-hd">YOUR OUTPUT</div>

        <?php if ($result): ?>
        <div class="t-output-card">
          <div class="t-output-lbl success">✓ Ready to post</div>
          <div class="t-output-text" id="resultText"><?= htmlspecialchars($result) ?></div>
          <div class="t-output-foot">
            <span class="t-char-badge <?= $overLimit ? 'over' : '' ?>">
              <?= $charCount ?> / 280 chars <?= $overLimit ? '⚠ over' : '✓' ?>
            </span>
            <button class="t-copy-btn" onclick="dCopy(this)" type="button">Copy post</button>
          </div>
          <?php if ($pipelineLog): ?>
          <div class="t-log-row">
            <button class="t-log-btn" onclick="toggleLog(this)" type="button">
              <svg class="t-log-arr" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
              View pipeline log
            </button>
            <div class="t-log-body"><?= htmlspecialchars($pipelineLog) ?></div>
          </div>
          <?php endif; ?>
        </div>

        <?php elseif ($error): ?>
        <div class="t-output-card error-card">
          <div class="t-output-lbl error">Something went wrong</div>
          <div class="t-output-error-text"><?= htmlspecialchars($error) ?></div>
          <?php if ($pipelineLog): ?>
          <div class="t-log-row" style="margin-top:10px;">
            <button class="t-log-btn" onclick="toggleLog(this)" type="button">
              <svg class="t-log-arr" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
              View error log
            </button>
            <div class="t-log-body"><?= htmlspecialchars($pipelineLog) ?></div>
          </div>
          <?php endif; ?>
        </div>

        <?php else: ?>
        <div style="padding:28px 18px; text-align:center; color:var(--ink4);">
          <div style="font-size:28px; margin-bottom:12px;">✍️</div>
          <div style="font-family:var(--sans); font-size:13px; color:var(--ink3); line-height:1.6;">
            Fill in the form and hit <strong style="color:var(--ink2);">Generate</strong> — your post will appear here.
          </div>
        </div>
        <?php endif; ?>
      </div>

      <!-- How it works -->
      <div class="t-sb-section">
        <div class="t-sb-section-hd">HOW IT WORKS</div>
        <div class="t-sb-body">
          <div class="t-sb-stat">
            <span class="t-sb-stat-k">① Describe topic</span>
            <span class="t-sb-stat-v" style="color:var(--ink4); font-size:10px;">Step 1</span>
          </div>
          <div class="t-sb-stat">
            <span class="t-sb-stat-k">② Pick style</span>
            <span class="t-sb-stat-v" style="color:var(--ink4); font-size:10px;">Step 2–3</span>
          </div>
          <div class="t-sb-stat">
            <span class="t-sb-stat-k">③ AI researches &amp; writes</span>
            <span class="t-sb-stat-v" style="color:var(--ink4); font-size:10px;">30–60s</span>
          </div>
          <div class="t-sb-stat">
            <span class="t-sb-stat-k">④ Copy &amp; post on X</span>
            <span class="t-sb-stat-v green">Done ✓</span>
          </div>
        </div>
      </div>

      <!-- Style guide -->
      <div class="t-sb-section">
        <div class="t-sb-section-hd">STYLE GUIDE</div>
        <div style="padding:0;">
          <?php foreach ($presets as $key => $p): ?>
          <div style="padding:10px 18px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:10px;" id="scard-<?= $key ?>">
            <span style="font-size:16px; flex-shrink:0; margin-top:1px;"><?= $p['emoji'] ?></span>
            <div>
              <div style="font-size:12px; font-weight:700; color:var(--ink2); margin-bottom:2px;"><?= $p['name'] ?></div>
              <div style="font-family:var(--sans); font-size:11px; color:var(--ink3); line-height:1.4; font-weight:500;"><?= $p['desc'] ?></div>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>

    </div><!-- /t-sidebar -->

    </div><!-- /t-page -->
  </div><!-- /t-shell -->

  <div class="t-footer">
    <div class="t-footer-cell"><a href="https://aptum.fun/">APTUM</a></div>
    <div class="t-footer-cell"><span>BANGPOST ENGINE</span></div>
    <div class="t-footer-r">
      <div class="t-footer-cell"><a href="https://x.com/aptum_" target="_blank">X / Twitter</a></div>
      <div class="t-footer-cell"><a href="https://t.me/aptum" target="_blank">Telegram</a></div>
    </div>
  </div>

</div><!-- /desktop -->

<!-- ═══════════════════════════════════════
     MOBILE
═══════════════════════════════════════ -->
<div id="mobile">
  <div class="m-orb m-orb-1"></div>
  <div class="m-orb m-orb-2"></div>
  <div class="m-orb m-orb-3"></div>

  <!-- TOP NAV -->
  <nav class="m-topnav">
    <span class="m-topnav-logo">BANGPOST</span>
    <div class="m-topnav-pill"><div class="m-live-dot"></div>AI Ready</div>
  </nav>

  <div class="m-shell">
    <div class="m-pad">

      <!-- HERO -->
      <div class="m-hero">
        <div class="m-hero-kicker"><div class="m-kline"></div>APTUM · AI POST WRITER<div class="m-kline"></div></div>
        <h1 class="m-hero-title">Write<br><span class="m-hero-out">X Posts.</span></h1>
        <p class="m-hero-sub">Describe a topic, pick a style, and get a ready-to-post tweet in seconds.</p>
      </div>

      <!-- RESULT / ERROR -->
      <?php if ($result): ?>
      <div class="m-result m-glass">
        <div class="m-result-lbl ok">✓ Your post is ready</div>
        <div class="m-result-text" id="m-resultText"><?= htmlspecialchars($result) ?></div>
        <div class="m-result-foot">
          <span class="m-char-pill <?= $overLimit ? 'over' : '' ?>"><?= $charCount ?> / 280</span>
          <button class="m-copy-btn" onclick="mCopy(this)" type="button">Copy post</button>
        </div>
      </div>
      <?php endif; ?>

      <?php if ($error): ?>
      <div class="m-result m-glass" style="border-color:rgba(248,113,113,0.25);">
        <div class="m-result-lbl err">Something went wrong</div>
        <div class="m-result-error"><?= htmlspecialchars($error) ?></div>
      </div>
      <?php endif; ?>

      <!-- FORM -->
      <form method="POST" id="m-bangForm">

        <!-- STEP 1 -->
        <div class="m-step m-glass">
          <div class="m-step-num">
            <div class="m-step-num-badge">1</div>
            WHAT TO WRITE ABOUT
          </div>
          <div class="m-step-lbl">Describe your topic</div>
          <div class="m-step-hint">Be specific — news, hot take, event, or idea.</div>
          <textarea class="m-textarea" name="prompt" id="m-prompt" required
            placeholder="e.g. Fed held rates again. Why this is secretly bullish for crypto..."
          ><?= htmlspecialchars($_POST['prompt'] ?? '') ?></textarea>
          <div class="m-char-row">
            <span class="m-char-hint" id="m-promptCharHint">0 chars</span>
          </div>
        </div>

        <!-- STEP 2 -->
        <div class="m-step m-glass">
          <div class="m-step-num">
            <div class="m-step-num-badge">2</div>
            TOPIC AREA
          </div>
          <div class="m-step-lbl">Pick a topic</div>
          <div class="m-step-hint">Helps the AI find relevant context.</div>
          <div class="m-select-wrap">
            <select class="m-select" name="topic">
              <?php foreach ($topics as $t): ?>
              <option style="background:#080A0F;" value="<?= $t ?>" <?= ($t === $selectedTop) ? 'selected' : '' ?>><?= ucfirst($t) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
        </div>

        <!-- STEP 3 -->
        <div class="m-step m-glass">
          <div class="m-step-num">
            <div class="m-step-num-badge">3</div>
            WRITING STYLE
          </div>
          <div class="m-step-lbl">How should it sound?</div>
          <div class="m-step-hint">Pick the style that fits your voice.</div>
          <div class="m-presets" id="m-presetGrid">
            <?php foreach ($presets as $key => $p): ?>
            <label class="m-preset-btn <?= ($key === $selectedPre) ? 'selected' : '' ?>" id="mpcard-<?= $key ?>">
              <input class="f-preset-radio" type="radio" name="preset" value="<?= $key ?>" <?= ($key === $selectedPre) ? 'checked' : '' ?> onchange="mSelectPreset('<?= $key ?>')">
              <div class="m-preset-emoji"><?= $p['emoji'] ?></div>
              <div class="m-preset-name"><?= $p['name'] ?></div>
              <div class="m-preset-short"><?= $p['short'] ?></div>
            </label>
            <?php endforeach; ?>
          </div>
        </div>

        <!-- SUBMIT -->
        <button type="submit" class="m-submit" id="m-submitBtn">
          <span class="m-submit-txt">Generate my post</span>
          <span class="m-submit-ico">✍️</span>
        </button>

        <div class="m-note">
          <strong>Takes 30–60 seconds.</strong> The AI researches your topic in real time before writing. Your result will appear at the top of the page.
        </div>

      </form>

    </div>
  </div>

  <!-- BOTTOM NAV -->
  <nav class="m-botnav">
    <div class="m-botnav-inner">
      <a href="https://aptum.fun/" class="m-botnav-btn">
        <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        <span class="m-botnav-lbl">Aptum</span>
      </a>
      <a href="https://x.com/aptum_" target="_blank" rel="noopener" class="m-botnav-btn">
        <svg viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.73-8.835L1.254 2.25H8.08l4.258 5.63 5.906-5.63z"/></svg>
        <span class="m-botnav-lbl">Twitter</span>
      </a>
      <a href="https://t.me/aptum" target="_blank" rel="noopener" class="m-botnav-btn">
        <svg viewBox="0 0 24 24"><path d="M21.19 2.044a1.7 1.7 0 0 0-1.636-.172L2.717 8.963a1.726 1.726 0 0 0 .148 3.271l3.834 1.17 1.584 5.037a.97.97 0 0 0 .726.667.978.978 0 0 0 .887-.293l2.282-2.333 4.42 3.299a1.707 1.707 0 0 0 2.631-1.056L22 3.793a1.714 1.714 0 0 0-.81-1.749z"/></svg>
        <span class="m-botnav-lbl">Telegram</span>
      </a>
    </div>
  </nav>

</div><!-- /mobile -->

<script>
/* ─── UTC clock ─── */
(function tick() {
  const el = document.getElementById('termTime');
  if (el) {
    const p = n => String(n).padStart(2,'0');
    const d = new Date();
    el.textContent = `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}:${p(d.getUTCSeconds())} UTC`;
  }
  setTimeout(tick, 1000);
})();

/* ─── Custom cursor ─── */
const cur = document.getElementById('cursor');
if (cur) {
  document.addEventListener('mousemove', e => {
    cur.style.left = e.clientX + 'px';
    cur.style.top  = e.clientY + 'px';
  });
}

/* ─── Desktop: prompt char counter ─── */
const dPrompt = document.getElementById('prompt');
const dHint   = document.getElementById('promptCharHint');
if (dPrompt && dHint) {
  function updateDHint() {
    const n = dPrompt.value.length;
    dHint.textContent = n + ' chars';
    dHint.className = 'f-char-hint' + (n > 500 ? ' warn' : '');
  }
  dPrompt.addEventListener('input', updateDHint);
  updateDHint();
}

/* ─── Mobile: prompt char counter ─── */
const mPrompt = document.getElementById('m-prompt');
const mHint   = document.getElementById('m-promptCharHint');
if (mPrompt && mHint) {
  function updateMHint() {
    const n = mPrompt.value.length;
    mHint.textContent = n + ' chars';
    mHint.className = 'm-char-hint' + (n > 500 ? ' warn' : '');
  }
  mPrompt.addEventListener('input', updateMHint);
  updateMHint();
}

/* ─── Desktop: preset card highlight ─── */
function selectPreset(key) {
  document.querySelectorAll('.f-preset-btn').forEach(el => el.classList.remove('selected'));
  const c = document.getElementById('dpcard-' + key);
  if (c) c.classList.add('selected');
}

/* ─── Mobile: preset card highlight ─── */
function mSelectPreset(key) {
  document.querySelectorAll('.m-preset-btn').forEach(el => el.classList.remove('selected'));
  const c = document.getElementById('mpcard-' + key);
  if (c) c.classList.add('selected');
}

/* ─── Desktop: submit loading state ─── */
const dForm = document.getElementById('bangForm');
if (dForm) {
  dForm.addEventListener('submit', () => {
    const btn = document.getElementById('submitBtn');
    btn.classList.add('loading');
    btn.disabled = true;
    btn.querySelector('.t-submit-txt').textContent = 'Generating… (30–60s)';
  });
}

/* ─── Mobile: submit loading state ─── */
const mForm = document.getElementById('m-bangForm');
if (mForm) {
  mForm.addEventListener('submit', () => {
    const btn = document.getElementById('m-submitBtn');
    btn.disabled = true;
    btn.querySelector('.m-submit-txt').textContent = 'Generating…';
    btn.querySelector('.m-submit-ico').textContent = '⏳';
  });
}

/* ─── Desktop: copy ─── */
function dCopy(btn) {
  const t = document.getElementById('resultText')?.textContent;
  if (!t) return;
  navigator.clipboard.writeText(t.trim()).then(() => {
    btn.classList.add('copied');
    btn.textContent = 'Copied ✓';
    setTimeout(() => { btn.classList.remove('copied'); btn.textContent = 'Copy post'; }, 2400);
  });
}

/* ─── Mobile: copy ─── */
function mCopy(btn) {
  const t = document.getElementById('m-resultText')?.textContent;
  if (!t) return;
  navigator.clipboard.writeText(t.trim()).then(() => {
    btn.classList.add('copied');
    btn.textContent = 'Copied ✓';
    setTimeout(() => { btn.classList.remove('copied'); btn.textContent = 'Copy post'; }, 2400);
  });
}

/* ─── Log toggle (desktop) ─── */
function toggleLog(btn) {
  btn.classList.toggle('open');
  btn.nextElementSibling?.classList.toggle('open');
}

/* ─── Scroll-reveal on desktop sections ─── */
if (window.matchMedia('(pointer:fine)').matches) {
  const io = new IntersectionObserver(entries => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        e.target.style.opacity = '1';
        e.target.style.transform = 'translateY(0)';
      }
    });
  }, { threshold: 0.08 });
  document.querySelectorAll('.t-section').forEach(el => {
    el.style.opacity = '0';
    el.style.transform = 'translateY(12px)';
    el.style.transition = 'opacity .45s ease, transform .45s ease';
    io.observe(el);
  });
}
</script>
</body>
</html>