<?php
declare(strict_types=1);

session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST' && ($_POST['action'] ?? '') === 'staging_login') {
    $email = trim($_POST['email'] ?? 'demo@silocloud.dev');
    $name = trim($_POST['name'] ?? 'SiloCloud User');

    if ($email === '') $email = 'demo@silocloud.dev';
    if ($name === '') $name = explode('@', $email)[0] ?: 'SiloCloud User';

    $uid = 'usr_' . substr(hash('sha256', strtolower($email)), 0, 20);

    $_SESSION['silo_customer'] = true;
    $_SESSION['silo_customer_user'] = [
        'customer_id' => 0,
        'customer_uid' => $uid,
        'email' => $email,
        'display_name' => $name,
        'plan' => 'staging',
        'avatar_path' => ''
    ];

    $_SESSION['silocloud_user'] = [
        'uid' => $uid,
        'name' => $name,
        'email' => $email,
        'avatar' => ''
    ];

    session_write_close();
    header('Location: /silocloud/welcome.php');
    exit;
}
?>
<!doctype html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="/silocloud/assets/images/cloud.png?v=20260605">
<link rel="shortcut icon" type="image/png" href="/silocloud/assets/images/cloud.png?v=20260605">
<meta charset="utf-8">
<title>SiloCloud</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root{
  --red:#d71920;
  --orange:#f47b20;
  --blue:#1c5fd4;
  --dark:#060b12;
  --panel:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.14);
  --text:#f8fafc;
  --muted:rgba(248,250,252,.68);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 18% 20%, rgba(28,95,212,.26), transparent 34%),
    radial-gradient(circle at 80% 75%, rgba(247,123,32,.2), transparent 34%),
    linear-gradient(135deg,#04070d,#07111d 52%,#0b1524);
  color:var(--text);
  overflow:hidden;
}
.bg-grid{
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 85%);
  pointer-events:none;
}
.top{
  position:relative;
  z-index:2;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 34px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:950;
  letter-spacing:-.5px;
}
.brand-logo{width:42px;height:42px;object-fit:contain}
.mark{
  width:38px;
  height:38px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--red),var(--orange),var(--blue));
  display:grid;
  place-items:center;
  box-shadow:0 18px 46px rgba(215,25,32,.22);
}
.nav{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav a,.login-btn{
  color:white;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  opacity:.85;
}
.login-btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  border-radius:999px;
  padding:10px 16px;
  cursor:pointer;
}
.login-btn.primary{
  background:#fff;
  color:#08111d;
}
.hero{
  position:relative;
  z-index:2;
  min-height:calc(100vh - 76px);
  display:grid;
  place-items:center;
  padding:28px;
}
.hero-inner{
  width:min(980px,94vw);
  text-align:center;
}
.kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:999px;
  padding:8px 12px;
  color:var(--muted);
  font-size:13px;
  margin-bottom:24px;
}
h1{
  font-size:clamp(44px,7vw,82px);
  line-height:.94;
  letter-spacing:-4px;
  margin:0 0 20px;
}
p.lead{
  width:min(720px,94vw);
  margin:0 auto 28px;
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
}
.search-shell{
  width:min(780px,94vw);
  margin:0 auto;
  border:1px solid var(--line);
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(18px);
  border-radius:24px;
  padding:14px;
  box-shadow:0 28px 90px rgba(0,0,0,.34);
}
.search-row{
  display:flex;
  gap:10px;
}
.search-row input{
  flex:1;
  height:56px;
  border:0;
  outline:0;
  border-radius:16px;
  padding:0 18px;
  font-size:16px;
}
.search-row button{
  width:150px;
  border:0;
  border-radius:16px;
  color:white;
  background:linear-gradient(135deg,var(--red),var(--orange));
  font-weight:950;
  cursor:pointer;
}
.ai-hint{
  margin-top:12px;
  text-align:left;
  color:var(--muted);
  font-size:13px;
  padding:0 6px;
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:24px auto 0;
  width:min(780px,94vw);
}
.card{
  text-align:left;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:18px;
  padding:16px;
}
.card strong{display:block;margin-bottom:6px}
.card span{color:var(--muted);font-size:13px;line-height:1.4}
.modal{
  position:fixed;
  inset:0;
  z-index:20;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.48);
  backdrop-filter:blur(8px);
}
.modal.open{display:grid}
.login-card{
  width:min(420px,92vw);
  border:1px solid var(--line);
  background:#0b1320;
  border-radius:22px;
  padding:24px;
  box-shadow:0 30px 100px rgba(0,0,0,.45);
}
.login-card h2{margin:0 0 8px}
.login-card p{color:var(--muted);line-height:1.45;margin:0 0 18px}
.login-card input{
  width:100%;
  height:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:white;
  padding:0 12px;
  margin:7px 0;
}
.login-card button{
  width:100%;
  height:48px;
  border:0;
  border-radius:12px;
  margin-top:10px;
  background:linear-gradient(135deg,var(--red),var(--orange),var(--blue));
  color:white;
  font-weight:950;
  cursor:pointer;
}
.close{
  float:right;
  border:0!important;
  width:auto!important;
  height:auto!important;
  background:transparent!important;
  color:white!important;
  font-size:22px;
  margin:0!important;
}
.transition{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  place-items:center;
  background:#050910;
  color:white;
}
.transition.on{display:grid}
.loader{
  text-align:center;
}
.loader .orb{
  width:72px;
  height:72px;
  border-radius:22px;
  margin:0 auto 18px;
  background:linear-gradient(135deg,var(--red),var(--orange),var(--blue));
  animation:pulse 1s ease infinite alternate;
}
@keyframes pulse{to{transform:scale(1.08);filter:brightness(1.25)}}
@media(max-width:760px){
  .nav a{display:none}
  .cards{grid-template-columns:1fr}
  .search-row{flex-direction:column}
  .search-row button{width:100%;height:50px}
}

.brand-logo{
  width:190px;
  height:auto;
  object-fit:contain;
  display:block;
}
.loader-logo{
  width:190px;
  height:auto;
  object-fit:contain;
  animation:pulse 1s ease infinite alternate;
  margin:0 auto 18px;
  display:block;
}

.public-empty-brand{
  width:190px;
  min-height:42px;
}

.hero-logo{
  width:min(320px,72vw);
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto 28px;
}

.top{
  pointer-events:none;
}

.nav{
  pointer-events:auto;
}

@media(max-width:760px){
  .public-empty-brand{width:120px}
  .hero-logo{width:min(260px,78vw);margin-bottom:20px}
}
</style>
</head>
<body>
<div class="bg-grid"></div>

<header class="top">
  <div class="brand public-empty-brand"></div><nav class="nav">
    <a href="#platform">Platform</a>
    <a href="#appliances">Appliances</a>
    <a href="#ai">AI Search</a>
    <button class="login-btn" onclick="openLogin()">Sign In</button>
    <button class="login-btn primary" onclick="openLogin()">Create Account</button>
  </nav>
</header>

<main class="hero">
  <section class="hero-inner">
    <img class="hero-logo" src="/silocloud/assets/images/silocloud-logo.png" alt="SiloCloud">
    <div class="kicker">Public AI search · private cloud workspace</div>
    <h1>Search, ask, work, and launch from one cloud.</h1>
    <p class="lead">
      SiloCloud starts as a public service tool. Search, ask the AI assistant,
      and explore curated information. Sign in to make the workspace your own.
    </p>

    <div class="search-shell">
      <div class="search-row">
        <input id="searchInput" placeholder="Search SiloCloud or ask the AI assistant...">
        <button onclick="demoSearch()">Search</button>
      </div>
      <div class="ai-hint" id="aiHint">
        Try: “What can I do with SiloCloudOS?” or “Show me SiloTalk, SiloDrive, and SiloWallet.”
      </div>
    </div>

    <div class="cards">
      <div class="card"><strong>SiloCloudOS</strong><span>Your private workspace after sign in.</span></div>
      <div class="card"><strong>Silo Appliances</strong><span>Subscribe to deeper tools like SiloTalk, SiloDrive, SiloWallet, and SiloTV.</span></div>
      <div class="card"><strong>AI Guidance</strong><span>Use AI search to understand the platform before creating your account.</span></div>
    </div>
  </section>
</main>

<div class="modal" id="loginModal">
  <form class="login-card" method="post" onsubmit="showTransition()">
    <button type="button" class="close" onclick="closeLogin()">×</button>
    <h2>Enter SiloCloud</h2>
    <p>Staging access is click-through so the user journey can be tested before security hardening.</p>
    <input name="name" placeholder="Display name" value="Lael Alexander">
    <input name="email" type="email" placeholder="Email" value="laelalexander@gmail.com">
    <input name="password" type="text" placeholder="Password exposed for staging" value="12345678">
    <input type="hidden" name="action" value="staging_login">
    <button>Continue to SiloCloud</button>
  </form>
</div>

<div class="transition" id="transition">
  <div class="loader">
    <img class="loader-logo" src="/silocloud/assets/images/silocloud.png" alt="SiloCloud">
    <h2>Opening SiloCloud</h2>
    <p>Preparing your workspace.</p>
  </div>
</div>

<script>
function openLogin(){document.getElementById('loginModal').classList.add('open')}
function closeLogin(){document.getElementById('loginModal').classList.remove('open')}
function showTransition(){document.getElementById('transition').classList.add('on')}
function demoSearch(){
  const q=document.getElementById('searchInput').value.trim();
  document.getElementById('aiHint').innerText = q
    ? 'AI Preview: SiloCloud can help you search, work, store files, message, use wallet tools, and discover Silo appliances after sign in.'
    : 'Enter a question or search term to preview SiloCloud AI search.';
}
</script>
</body>
</html>
