<?php
/**
 * Cosmic Signal — About
 * https://cosmicsignal.org/about.php
 */
declare(strict_types=1);

$config = require __DIR__ . '/../config/db.php';
$umami = $config['site']['umami'] ?? [];
$utcNow = gmdate('Y-m-d H:i:s');
?>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About — Cosmic Signal</title>
    <meta name="description" content="The manifesto and mission of Cosmic Signal: anti-clickbait astronomy, peer-reviewed astrophysics, and zero hype.">
    <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=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
    
    <?php if (!empty($umami['website_id'])): ?>
    <script defer src="<?= htmlspecialchars($umami['script'] ?? 'https://farol.rogerle.com/farol') ?>" data-website-id="<?= htmlspecialchars($umami['website_id']) ?>"></script>
    <?php endif; ?>

    <style>
        :root, html[data-theme="dark"] {
            --bg-void: #07090e;
            --bg-panel: #0d1118;
            --border: #1d2636;
            --border-highlight: #2c3a52;
            --text-primary: #e6edf5;
            --text-muted: #8d9ba8;
            --text-dim: #546274;
            --signal-cyan: #38bdf8;
            --signal-glow: rgba(56, 189, 248, 0.15);
            --lime-nominal: #4ade80;
            --bg-telemetry: rgba(13, 17, 24, 0.92);
            --telemetry-border: #1d2636;
            --telemetry-text: #8d9ba8;
            --telemetry-val: #e6edf5;
            --font-serif: 'Instrument Serif', Georgia, serif;
            --font-sans: 'Inter', -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
            --grid-line: rgba(56, 189, 248, 0.03);
        }

        html[data-theme="light"] {
            --bg-void: #f8fafc;
            --bg-panel: #ffffff;
            --border: #cbd5e1;
            --border-highlight: #94a3b8;
            --text-primary: #0f172a;
            --text-muted: #475569;
            --text-dim: #64748b;
            --signal-cyan: #0284c7;
            --signal-glow: rgba(2, 132, 199, 0.08);
            --lime-nominal: #15803d;
            --bg-telemetry: rgba(255, 255, 255, 0.96);
            --telemetry-border: #cbd5e1;
            --telemetry-text: #475569;
            --telemetry-val: #0f172a;
            --grid-line: rgba(0, 0, 0, 0.04);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            background-color: var(--bg-void);
            color: var(--text-primary);
            font-family: var(--font-sans);
            font-size: 14.5px;
            line-height: 1.7;
            min-height: 100vh;
            background-image: 
                radial-gradient(ellipse 90% 50% at 50% 0%, var(--signal-glow), transparent 70%),
                repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 24px),
                repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 24px);
            background-attachment: fixed;
            -webkit-font-smoothing: antialiased;
        }

        a { color: var(--signal-cyan); text-decoration: none; }
        a:hover { text-decoration: underline; }

        .telemetry-bar {
            position: sticky;
            top: 0;
            z-index: 100;
            background: var(--bg-telemetry);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--telemetry-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 9px 24px;
            font-family: var(--font-mono);
            font-size: 11px;
        }

        .telemetry-left, .telemetry-right {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .btn-theme {
            background: var(--bg-panel);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-family: var(--font-mono);
            font-size: 11px;
        }

        .container {
            max-width: 840px;
            margin: 0 auto;
            padding: 48px 24px 90px;
        }

        .back-link {
            font-family: var(--font-mono);
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 24px;
        }

        h1 {
            font-family: var(--font-serif);
            font-size: clamp(36px, 5vw, 56px);
            font-weight: 400;
            line-height: 1.1;
            margin-bottom: 20px;
            letter-spacing: -0.02em;
        }

        h1 em {
            font-style: italic;
            color: var(--signal-cyan);
        }

        .lead {
            font-size: 18px;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 36px;
            border-left: 3px solid var(--signal-cyan);
            padding-left: 18px;
        }

        .card {
            background: var(--bg-panel);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 28px 30px;
            margin-bottom: 24px;
        }

        h2 {
            font-family: var(--font-serif);
            font-size: 24px;
            font-weight: 400;
            margin-bottom: 12px;
            color: var(--text-primary);
        }

        p { margin-bottom: 14px; color: var(--text-muted); }
        p:last-child { margin-bottom: 0; }

        ul { margin-left: 20px; margin-bottom: 14px; color: var(--text-muted); }
        li { margin-bottom: 6px; }

        footer {
            margin-top: 60px;
            padding-top: 24px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: var(--font-mono);
            font-size: 11.5px;
            color: var(--text-dim);
            flex-wrap: wrap;
            gap: 12px;
        }
    </style>
</head>
<body>

    <header class="telemetry-bar">
        <div class="telemetry-left">
            <span>STATION: <a href="/" style="font-weight:600;">COSMICSIGNAL.ORG</a></span>
            <span style="color:var(--text-dim)">·</span>
            <span>ABOUT & MANIFESTO</span>
        </div>
        <div class="telemetry-right">
            <button class="btn-theme" id="themeBtn" type="button">☀️ LIGHT</button>
        </div>
    </header>

    <div class="container">
        <a href="/" class="back-link">← Return to Observatory Wire</a>

        <h1>The Universe is Whispering.<br>We Filter the <em>Noise.</em></h1>

        <p class="lead">
            Cosmic Signal is an independent, non-commercial space observatory and astrophysics wire built to solve a simple modern problem: the sensationalist degradation of science reporting.
        </p>

        <div class="card">
            <h2>Why Cosmic Signal Exists</h2>
            <p>
                Every week, genuine breakthroughs in astrophysics—a spectroscopic absorption dip, a subtle gravitational wave chirp, or a calibration of standard candles—are flattened by algorithmic clickbait into headlines claiming scientists have found "alien oceans" or "broken physics forever."
            </p>
            <p>
                Real science is vastly more interesting than clickbait. It lives in the precision of the measurements, the error bars, the sigma levels of significance, and the ongoing debates between competing models.
            </p>
            <p>
                Cosmic Signal cuts through the hyperbole by answering two questions for every discovery:
            </p>
            <ul>
                <li><strong>What Was Observed?</strong> The concrete, empirical facts reported in peer-reviewed papers and mission telemetry.</li>
                <li><strong>The Reality Check:</strong> What the observation actually means, what it does <em>not</em> prove, and how it fits into the broader consensus.</li>
            </ul>
        </div>

        <div class="card">
            <h2>Our Principles</h2>
            <ul>
                <li><strong>Primary Sources Only:</strong> We track arXiv preprints, Nature Astronomy, Astrophysical Journal, NASA/JPL telemetry, ESA, and ESO releases.</li>
                <li><strong>Zero Commercial Incentives:</strong> No ads, no affiliate links, no sponsored content, no tracking surveillance.</li>
                <li><strong>Respect for the Craft:</strong> Fast, lightweight, self-hosted web software built with clean vanilla code.</li>
            </ul>
        </div>

        <div class="card">
            <h2>Infrastructure</h2>
            <p>
                Cosmic Signal is hosted on independent infrastructure by <a href="https://rogerle.com" target="_blank" rel="noopener">RogerLe.com</a>. It is powered by MariaDB and clean PHP, designed to run smoothly on any connection from a fiber desk to a campsite in the mountains.
            </p>
        </div>

        <footer>
            <div>Hosted by <a href="https://rogerle.com" target="_blank" rel="noopener">RogerLe.com</a></div>
            <nav style="display:flex;gap:14px;">
                <a href="/">Home</a>
                <a href="/terms">Terms</a>
                <a href="/privacy">Privacy</a>
            </nav>
        </footer>
    </div>

    <script>
        const themeBtn = document.getElementById('themeBtn');
        const currentTheme = localStorage.getItem('cs-theme') || 'dark';
        document.documentElement.setAttribute('data-theme', currentTheme);
        themeBtn.textContent = currentTheme === 'dark' ? '☀️ LIGHT' : '🌙 DARK';

        themeBtn.addEventListener('click', () => {
            const active = document.documentElement.getAttribute('data-theme');
            const next = active === 'dark' ? 'light' : 'dark';
            document.documentElement.setAttribute('data-theme', next);
            localStorage.setItem('cs-theme', next);
            themeBtn.textContent = next === 'dark' ? '☀️ LIGHT' : '🌙 DARK';
        });
    </script>
</body>
</html>
