<!doctype html>

<html lang="nl">

<head>

  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <title>Red Carpet</title>

  <link rel="stylesheet" href="/style.css" />

</head>

<body>

  <div class="wrap">


    <!-- TOPBAR -->

    <div class="topbar">

      <div class="brand">

        <!-- Klein vierkant logo -->

        <img src="/logo.png" alt="Red Carpet logo" />

        <span>Red Carpet</span>

      </div>

    </div>


    <!-- LOGIN -->

    <div class="grid">

      <div class="card">

        <h1>Sign in</h1>

        <p>Log in om verder te gaan.</p>


        <label class="label">Email</label>

        <input class="input" id="email" placeholder="email" />


        <label class="label">Password</label>

        <input class="input" id="password" type="password" placeholder="password" />


        <div style="margin-top:14px;">

          <button class="btn primary" onclick="doLogin()">Login</button>

        </div>


        <pre class="pre" id="out"></pre>

      </div>

    </div>

  </div>


<script>

const API = "https://shy-bird-9a3ctumba4u-api.timz05life.workers.dev";


async function doLogin(){

  const email = document.getElementById("email").value;

  const password = document.getElementById("password").value;

  const out = document.getElementById("out");

  out.textContent = "Logging in...";


  try {

    const r = await fetch(API + "/auth/login", {

      method: "POST",

      headers: { "Content-Type":"application/json" },

      body: JSON.stringify({ email, password })

    });


    const data = await r.json();

    if(!r.ok) throw new Error(data.error || "Login failed");


    // 🔐 token opslaan

    localStorage.setItem("token", data.token);


    // ✅ DIRECT naar watch pagina

    window.location.href = "/watch.html";


  } catch(e){

    out.textContent = e.message;

  }

}

</script>

</body>

</html>