<?php
/**
 * Shared page chrome for the demo (neutral / unbranded).
 * bb_head($title, $subtitle) opens the page; bb_foot() closes it.
 */
function bb_head(string $title, string $subtitle = ''): void { ?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= htmlspecialchars($title) ?> — API Integration Demo</title>
<style>
    :root{--ink:#0f172a;--mut:#64748b;--brd:#e2e8f0;--bg:#f1f5f9;--card:#fff;
          --accent:#4f46e5;--accent-d:#4338ca;--ok:#059669;--err:#dc2626;--code:#0b1220;}
    *{box-sizing:border-box;}
    body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);
         color:var(--ink);margin:0;padding:40px 20px;line-height:1.6;}
    .wrap{max-width:640px;margin:0 auto;}
    .masthead{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
    .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#4f46e5,#0ea5e9);
          display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;}
    .masthead h1{font-size:1.15rem;margin:0;font-weight:700;}
    .masthead .tag{font-size:.72rem;color:var(--mut);border:1px solid var(--brd);border-radius:20px;
                   padding:2px 10px;margin-left:auto;font-weight:600;}
    .lead{color:var(--mut);margin:0 0 24px;font-size:.95rem;}
    .card{background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:28px;
          box-shadow:0 6px 24px rgba(15,23,42,.05);margin-bottom:20px;}
    h2{font-size:1.15rem;margin:0 0 4px;}
    .hint{color:var(--mut);font-size:.9rem;margin:0 0 18px;}
    label{display:block;font-weight:600;font-size:.85rem;margin:16px 0 6px;}
    input[type=text],input[type=number],textarea{width:100%;padding:12px 14px;border:1px solid var(--brd);
         border-radius:10px;font:inherit;font-size:.95rem;background:#fff;}
    textarea{min-height:78px;resize:vertical;}
    .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
    .chk{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.9rem;font-weight:600;}
    .chk input{width:auto;}
    .btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:11px;
         padding:14px 26px;font:inherit;font-weight:700;font-size:.98rem;cursor:pointer;
         text-decoration:none;transition:.15s;}
    .btn:hover{background:var(--accent-d);}
    .btn.block{width:100%;text-align:center;}
    .btn:disabled{opacity:.5;cursor:not-allowed;}
    .btn.ghost{background:#fff;color:var(--mut);border:1px solid var(--brd);}
    .muted-link{color:var(--mut);font-size:.85rem;text-decoration:none;}
    .steps{counter-reset:s;list-style:none;margin:0;padding:0;}
    .steps li{counter-increment:s;position:relative;padding:10px 0 10px 40px;color:var(--mut);font-size:.92rem;}
    .steps li:before{content:counter(s);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:50%;
         background:#eef2ff;color:var(--accent);font-weight:700;font-size:.8rem;display:flex;
         align-items:center;justify-content:center;}
    .steps li strong{color:var(--ink);}
    .status{display:flex;align-items:center;gap:10px;font-size:.92rem;}
    .dot{width:9px;height:9px;border-radius:50%;flex:none;}
    .dot.on{background:var(--ok);} .dot.off{background:#cbd5e1;}
    .kv{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:.9rem;margin-top:14px;}
    .kv .k{color:var(--mut);font-weight:600;}
    .kv .v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;word-break:break-all;}
    code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eef2f7;padding:2px 6px;
         border-radius:5px;font-size:.85em;}
    pre{background:var(--code);color:#e2e8f0;border-radius:10px;padding:14px 16px;overflow-x:auto;
        font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.55;}
    .msg{margin-top:16px;padding:13px 15px;border-radius:10px;font-size:.9rem;display:none;}
    .msg.ok{background:#ecfdf5;color:#065f46;display:block;}
    .msg.err{background:#fef2f2;color:#991b1b;display:block;}
    .progress{height:9px;background:var(--brd);border-radius:6px;overflow:hidden;margin-top:18px;display:none;}
    .progress>div{height:100%;width:0;background:var(--accent);transition:width .2s;}
    .drop{border:2px dashed var(--brd);border-radius:12px;padding:26px;text-align:center;color:var(--mut);
          cursor:pointer;background:#f8fafc;transition:.15s;}
    .drop.hl{border-color:var(--accent);background:#eef2ff;color:var(--accent);}
    .drop strong{color:var(--ink);}
    footer{color:var(--mut);font-size:.8rem;text-align:center;margin-top:8px;}
    footer a{color:var(--mut);}
</style>
</head>
<body>
<div class="wrap">
    <div class="masthead">
        <div class="logo">▲</div>
        <h1>API Integration Demo</h1>
        <span class="tag">reference example</span>
    </div>
    <?php if ($subtitle): ?><p class="lead"><?= htmlspecialchars($subtitle) ?></p><?php endif; ?>
<?php }

function bb_foot(): void { ?>
    <footer>A minimal, unbranded reference. Replace the placeholder branding and wire the token
    store into your own user accounts for production.</footer>
</div>
</body>
</html>
<?php }
