#!/usr/bin/env bash
set -euo pipefail

SITE_ROOT="/var/www/html/silostreamdeck.com"
INDEX="$SITE_ROOT/index.php"
ASSET_DIR="$SITE_ROOT/assets/images"
STAMP="$(date +%Y%m%d-%H%M%S)"
LOGO_URL="https://silocloud.dev/silocloud/assets/images/streamdeck_logo.png"

echo "== SiloStreamDeck Homepage Rebuild =="
echo "Site root: $SITE_ROOT"

if [[ ! -d "$SITE_ROOT" ]]; then
  echo "ERROR: Missing site root: $SITE_ROOT" >&2
  exit 1
fi

mkdir -p "$ASSET_DIR"

if [[ -f "$INDEX" ]]; then
  cp "$INDEX" "$INDEX.bak.homepage-rebuild.$STAMP"
  echo "Backup created: $INDEX.bak.homepage-rebuild.$STAMP"
fi

cp "assets/images/silostreamdeck-production-suite.png" "$ASSET_DIR/silostreamdeck-production-suite.png"
cp "assets/images/silostreamdeck-studio-ui.png" "$ASSET_DIR/silostreamdeck-studio-ui.png"

cat > "$INDEX" <<'PHP'
<?php
$logoUrl = 'https://silocloud.dev/silocloud/assets/images/streamdeck_logo.png';
$downloadPage = 'https://silocloud.dev/silocloud/downloads/silostreamdeck/';
$dashboardPage = '/login.php';
$signupPage = '/signup.php';
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SiloStreamDeck | Live Production, Streaming & Studio Control</title>
  <meta name="description" content="SiloStreamDeck is a professional production platform for livestreaming, multiview monitoring, source switching, audio control, podcasting, and studio operations.">
  <link rel="icon" type="image/png" href="<?= htmlspecialchars($logoUrl, ENT_QUOTES, 'UTF-8') ?>">
  <link rel="shortcut icon" type="image/png" href="<?= htmlspecialchars($logoUrl, ENT_QUOTES, 'UTF-8') ?>">
  <link rel="apple-touch-icon" href="<?= htmlspecialchars($logoUrl, ENT_QUOTES, 'UTF-8') ?>">
  <style>
    :root{
      --bg:#070b12;--bg2:#101720;--panel:#111820;--line:#253141;--text:#f8fafc;--muted:#9aa7b8;--red:#e50914;--red2:#ff3340;--white:#ffffff;--soft:#f4f6f9;
    }
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
    a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
    .topbar{height:92px;background:#fff;border-bottom:1px solid #dfe4eb;display:flex;align-items:center;position:sticky;top:0;z-index:20}.topbar .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}.brand img{height:68px;width:auto}.nav{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:900;color:#07101c}.nav a{opacity:.95}.nav a:hover{color:var(--red)}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:14px 20px;font-weight:950;border:1px solid rgba(255,255,255,.2);box-shadow:none}.btn-red{background:linear-gradient(135deg,var(--red),#b90010);color:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(229,9,20,.28)}.btn-dark{background:#101720;color:#fff;border-color:#304052}.btn-light{background:#fff;color:#07101c;border-color:#d5dde7}.btn-ghost{background:transparent;color:#fff;border-color:#4a586b}
    .hero{position:relative;overflow:hidden;background:radial-gradient(circle at 78% 18%,rgba(229,9,20,.22),transparent 34%),linear-gradient(135deg,#07101c 0%,#0b111a 52%,#050609 100%);padding:76px 0 74px}.hero-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:54px;align-items:center}.eyebrow{color:#ff3340;text-transform:uppercase;letter-spacing:.17em;font-size:13px;font-weight:1000;margin-bottom:18px}.hero h1{font-size:60px;line-height:.96;margin:0 0 24px;letter-spacing:-.055em}.lead{font-size:20px;line-height:1.6;color:#d9e4f2;margin:0 0 30px;max-width:670px}.actions{display:flex;gap:14px;flex-wrap:wrap}.hero-card{border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.06);padding:12px;box-shadow:0 30px 90px rgba(0,0,0,.42)}.hero-card img{border-radius:14px}.caption{display:flex;justify-content:space-between;gap:12px;color:#b9c5d3;font-size:12px;padding:10px 4px 0}.caption strong{color:#fff}
    .strip{background:#fff;color:#07101c;padding:28px 0;border-bottom:1px solid #e4e8ee}.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.metric{border-left:4px solid var(--red);padding:4px 0 4px 14px}.metric strong{display:block;font-size:22px}.metric span{font-size:13px;color:#5f6b79;font-weight:800}
    section{padding:76px 0}.light{background:#f5f7fb;color:#07101c}.dark{background:#090e16}.section-head{max-width:820px;margin-bottom:34px}.section-head h2{font-size:42px;line-height:1.05;margin:0 0 12px;letter-spacing:-.035em}.section-head p{margin:0;color:#5f6b79;font-size:18px;line-height:1.6}.dark .section-head p{color:#a8b4c4}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid #dfe5ee;border-radius:16px;padding:24px;box-shadow:0 18px 45px rgba(10,15,25,.06)}.card h3{margin:0 0 10px;font-size:20px}.card p{margin:0;color:#5f6b79;line-height:1.55}.dark .card{background:#111820;border-color:#273242}.dark .card p{color:#a8b4c4}
    .showcase{display:grid;grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:center}.showcase-img{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 90px rgba(0,0,0,.35)}.checklist{display:grid;gap:12px;margin-top:24px}.check{display:flex;gap:12px;align-items:flex-start;color:#dce7f5}.check:before{content:'✓';display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-weight:1000;flex:0 0 auto}
    .flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.step{background:#101720;border:1px solid #2c3848;border-radius:16px;padding:18px;color:#fff}.step b{display:block;color:#ff3340;margin-bottom:8px}.step span{color:#a8b4c4;font-size:14px;line-height:1.5}
    .cta{background:linear-gradient(135deg,#111820,#070b12);border-top:1px solid #253141;border-bottom:1px solid #253141;text-align:center}.cta h2{font-size:44px;margin:0 0 14px}.cta p{color:#b9c5d3;font-size:18px;max-width:760px;margin:0 auto 28px;line-height:1.6}
    footer{background:#05070b;color:#9aa7b8;padding:26px 0;font-size:13px}.footer-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
    @media(max-width:980px){.nav{display:none}.hero-grid,.showcase{grid-template-columns:1fr}.hero h1{font-size:46px}.strip-grid,.grid,.flow{grid-template-columns:1fr 1fr}.brand img{height:58px}}
    @media(max-width:640px){.hero{padding:54px 0}.hero h1{font-size:38px}.lead{font-size:17px}.strip-grid,.grid,.flow{grid-template-columns:1fr}.actions .btn{width:100%}.topbar{height:78px}.brand img{height:50px}.section-head h2,.cta h2{font-size:34px}}
  </style>
</head>
<body>
  <header class="topbar">
    <div class="wrap">
      <a class="brand" href="/" aria-label="SiloStreamDeck Home"><img src="<?= htmlspecialchars($logoUrl, ENT_QUOTES, 'UTF-8') ?>" alt="SiloStreamDeck"></a>
      <nav class="nav" aria-label="Primary Navigation">
        <a href="#features">Features</a>
        <a href="#workflow">Workflow</a>
        <a href="#modules">Modules</a>
        <a href="<?= htmlspecialchars($dashboardPage, ENT_QUOTES, 'UTF-8') ?>" class="btn btn-light">Customer Login</a>
        <a href="<?= htmlspecialchars($signupPage, ENT_QUOTES, 'UTF-8') ?>" class="btn btn-red">Create Account</a>
      </nav>
    </div>
  </header>

  <main>
    <section class="hero">
      <div class="wrap hero-grid">
        <div>
          <div class="eyebrow">Live Production · Streaming · Studio Control</div>
          <h1>Produce, monitor, switch, and stream from one professional control surface.</h1>
          <p class="lead">SiloStreamDeck gives production teams a unified workspace for multiview monitoring, source control, podcast production, audio mixing, scene switching, and livestream output.</p>
          <div class="actions">
            <a class="btn btn-red" href="<?= htmlspecialchars($signupPage, ENT_QUOTES, 'UTF-8') ?>">Create Customer Account</a>
            <a class="btn btn-ghost" href="<?= htmlspecialchars($downloadPage, ENT_QUOTES, 'UTF-8') ?>">Download Windows Package</a>
          </div>
        </div>
        <div class="hero-card">
          <img src="/assets/images/silostreamdeck-production-suite.png" alt="SiloStreamDeck production suite with multiview, control deck, audio mixer, laptop, and product packaging">
          <div class="caption"><span><strong>Production Suite</strong> · Multiview, deck, mixer, output</span><span>Built for live operators</span></div>
        </div>
      </div>
    </section>

    <div class="strip">
      <div class="wrap strip-grid">
        <div class="metric"><strong>Multiview</strong><span>Preview and program monitoring</span></div>
        <div class="metric"><strong>Control Deck</strong><span>Scenes, sources, macros</span></div>
        <div class="metric"><strong>Audio</strong><span>Mixer and live monitoring</span></div>
        <div class="metric"><strong>Output</strong><span>Recording and livestream delivery</span></div>
      </div>
    </div>

    <section id="features" class="light">
      <div class="wrap">
        <div class="section-head">
          <h2>A production platform, not just a download page.</h2>
          <p>Use SiloStreamDeck to run live events, podcasts, church services, classroom broadcasts, corporate streams, sports productions, and creator studios.</p>
        </div>
        <div class="grid">
          <article class="card"><h3>Live Production Control</h3><p>Switch camera sources, launch scenes, trigger graphics, start recording, and manage stream actions from one operator surface.</p></article>
          <article class="card"><h3>Multiview Monitoring</h3><p>Monitor preview, program, source feeds, audio meters, and confidence views for live production decisions.</p></article>
          <article class="card"><h3>Podcast & Studio Mode</h3><p>Manage microphones, cameras, guests, overlays, lower thirds, intro clips, bumbers, and session media for podcast production.</p></article>
          <article class="card"><h3>Audio Workstation</h3><p>Route and monitor host mics, guest audio, background music, program audio, and output levels.</p></article>
          <article class="card"><h3>Media & Overlays</h3><p>Upload clips, manage overlays, add lower thirds, activate social bars, and organize production media.</p></article>
          <article class="card"><h3>Appliance Runtime</h3><p>Deploy SiloStreamDeck as a customer-installable runtime for desktop, rack, studio, and appliance workflows.</p></article>
        </div>
      </div>
    </section>

    <section id="workflow" class="dark">
      <div class="wrap showcase">
        <div>
          <div class="eyebrow">Studio / Podcast Workflow</div>
          <div class="section-head">
            <h2>Built for creators and production teams who need real control.</h2>
            <p>Bring cameras, microphones, clips, overlays, scenes, and stream output into a single operating view.</p>
          </div>
          <div class="checklist">
            <div class="check">Host and guest mic monitoring with live level status.</div>
            <div class="check">Camera, screen share, background music, and source grouping.</div>
            <div class="check">Overlay, lower third, bumper, and media clip control.</div>
            <div class="check">Stream status, scene transitions, shortcuts, recording, and mute controls.</div>
          </div>
        </div>
        <div class="showcase-img"><img src="/assets/images/silostreamdeck-studio-ui.png" alt="SiloStreamDeck Studio interface for recording, streaming, and podcast production"></div>
      </div>
    </section>

    <section id="modules" class="light">
      <div class="wrap">
        <div class="section-head">
          <h2>Core SiloStreamDeck modules.</h2>
          <p>Each module is production-oriented and can later interconnect with SiloBroadcast, SiloPodcast, and SiloArray without confusing the product ownership.</p>
        </div>
        <div class="flow">
          <div class="step"><b>01 Sources</b><span>Cameras, mics, media, browser sources, screen share, remote feeds.</span></div>
          <div class="step"><b>02 Control</b><span>Deck actions, macros, scene switching, production shortcuts.</span></div>
          <div class="step"><b>03 Monitor</b><span>Multiview, program, preview, audio meters, confidence views.</span></div>
          <div class="step"><b>04 Produce</b><span>Podcast mode, studio mode, overlays, lower thirds, media playback.</span></div>
          <div class="step"><b>05 Output</b><span>Record, stream, publish, export, or hand off to SiloBroadcast/SiloArray.</span></div>
        </div>
      </div>
    </section>

    <section class="cta">
      <div class="wrap">
        <h2>Start producing with SiloStreamDeck.</h2>
        <p>Use the customer account portal to access the production runtime, downloads, studio tools, and deployment workflow.</p>
        <div class="actions" style="justify-content:center">
          <a class="btn btn-red" href="<?= htmlspecialchars($signupPage, ENT_QUOTES, 'UTF-8') ?>">Create Account</a>
          <a class="btn btn-ghost" href="<?= htmlspecialchars($dashboardPage, ENT_QUOTES, 'UTF-8') ?>">Customer Login</a>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="wrap footer-row">
      <span>© <?= date('Y') ?> SiloStreamDeck. Live Production, Streaming & Studio Control.</span>
      <span>Production Deck · Multiview · Audio · Podcast · Studio Output</span>
    </div>
  </footer>
</body>
</html>
PHP

php -l "$INDEX"

if command -v systemctl >/dev/null 2>&1; then
  systemctl reload nginx || true
fi

echo
echo "DONE. Homepage rebuilt."
echo "Verify: https://silostreamdeck.com/"
echo "Backup: $INDEX.bak.homepage-rebuild.$STAMP"
