<?php
  /** demo_upload_welcome_standalone.php */
  $title = 'Image Upload Demo – Welcome';
  // Demo credentials (edit to suit your environment)
  $demo_user = 'demo';
  $demo_pass = 'demo';
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title><?= htmlspecialchars($title) ?></title>
  <meta name="description" content="Try the MPMS Image Upload Demo: secure share links, mobile-friendly uploads, and status tracking." />
  <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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: { primary: { DEFAULT: '#0B2B4C' }, accent: { DEFAULT: '#FF7A00' } },
          boxShadow: { glow: '0 0 0 2px rgba(255,122,0,0.2), 0 8px 30px rgba(0,0,0,0.25)' }
        }
      }
    }
  </script>
  <style>
    :root { color-scheme: light dark; }
    body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
  </style>
</head>
<body class="bg-slate-50 text-slate-900 antialiased">

<!-- Hero / Banner -->
<section class="relative overflow-hidden">
  <div class="absolute inset-0 -z-10 bg-gradient-to-br from-primary/5 via-white to-accent/5"></div>
  <div class="max-w-5xl mx-auto px-4 py-14 md:py-20">
    <div class="flex items-start gap-4">
      <div class="h-12 w-12 rounded-2xl bg-primary/10 grid place-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6 text-primary"><path fill="currentColor" d="M4 5a2 2 0 0 1 2-2h8l6 6v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm11 1v4h4l-4-4Z"/></svg>
      </div>
      <div>
        <h1 class="text-3xl md:text-4xl font-extrabold">Image Upload Demo</h1>
        <p class="mt-2 text-slate-600 max-w-2xl">A simple portal that lets customers upload photos to a secure share. Use the demo credentials below to try it.</p>
        <div class="mt-4 flex flex-wrap gap-2 text-xs">
          <span class="inline-flex items-center gap-2 rounded-full bg-white border border-slate-200 px-3 py-1"><span class="h-1.5 w-1.5 rounded-full bg-green-500"></span>Mobile‑friendly</span>
          <span class="inline-flex items-center gap-2 rounded-full bg-white border border-slate-200 px-3 py-1"><span class="h-1.5 w-1.5 rounded-full bg-blue-500"></span>Drag & Drop</span>
          <span class="inline-flex items-center gap-2 rounded-full bg-white border border-slate-200 px-3 py-1"><span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span>Status tracking</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Credentials & Actions -->
<section class="bg-white">
  <div class="max-w-5xl mx-auto px-4 pb-10">
    <div class="grid lg:grid-cols-5 gap-6 items-stretch">
      <!-- Login details card -->
      <div class="lg:col-span-3 rounded-2xl border border-slate-200 bg-slate-50 p-6">
        <h2 class="text-lg font-semibold">Demo login details</h2>
        <div class="mt-4 grid sm:grid-cols-2 gap-4">
          <div class="rounded-xl bg-white border border-slate-200 p-4">
            <div class="text-xs uppercase tracking-wider text-slate-500">Username</div>
            <div class="mt-1 font-mono select-all break-all" id="demoUser"><?= htmlspecialchars($demo_user) ?></div>
            <button class="mt-3 text-xs inline-flex items-center gap-1 px-2 py-1 rounded-lg border border-slate-300 hover:border-primary/60" data-copy="#demoUser">Copy</button>
          </div>
          <div class="rounded-xl bg-white border border-slate-200 p-4">
            <div class="text-xs uppercase tracking-wider text-slate-500">Password</div>
            <div class="mt-1 font-mono select-all" id="demoPass"><?= htmlspecialchars($demo_pass) ?></div>
            <button class="mt-3 text-xs inline-flex items-center gap-1 px-2 py-1 rounded-lg border border-slate-300 hover:border-primary/60" data-copy="#demoPass">Copy</button>
          </div>
        </div>
        <p class="mt-3 text-xs text-slate-500">Change these at the top of this file if you want different credentials.</p>
        <div class="mt-6 flex flex-wrap gap-3">
          <a href="/vp-demo/admin" class="px-5 py-3 rounded-xl bg-primary text-white hover:opacity-90 shadow-glow">Open demo portal</a>
        </div>
      </div>

      <!-- How it works -->
      <div class="lg:col-span-2 rounded-2xl border border-slate-200 p-6">
        <h3 class="font-semibold">How it works</h3>
        <ol class="mt-3 space-y-2 text-slate-700 list-decimal pl-5">
          <li>Log in with the demo details above.</li>
          <li>Select or drag photos, then upload.</li>
          <li>Files save to your uploads directory; the request moves to <span class="font-medium">submitted</span>.</li>
        </ol>
        <div class="mt-4 text-sm text-slate-600">
          Status flow: <span class="inline-flex items-center px-2 py-0.5 rounded-lg bg-slate-100 border border-slate-200">pending</span>
          → <span class="inline-flex items-center px-2 py-0.5 rounded-lg bg-green-100 border border-green-200">submitted</span>
          → <span class="inline-flex items-center px-2 py-0.5 rounded-lg bg-amber-100 border border-amber-200">expired</span>
          / <span class="inline-flex items-center px-2 py-0.5 rounded-lg bg-slate-100 border border-slate-200">closed</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Notes / FAQ -->
<section class="bg-slate-50">
  <div class="max-w-5xl mx-auto px-4 py-10 md:py-14">
    <div class="grid md:grid-cols-3 gap-6">
      <div class="rounded-2xl bg-white border border-slate-200 p-6">
        <h4 class="font-semibold">Admin tools</h4>
        <p class="mt-2 text-sm text-slate-700">Admins can add/remove photos from an existing share and see audit notes for each action.</p>
      </div>
      <div class="rounded-2xl bg-white border border-slate-200 p-6">
        <h4 class="font-semibold">Security</h4>
        <p class="mt-2 text-sm text-slate-700">Each share uses a tokenised link with expiry. Only the holder can upload to that request.</p>
      </div>
      <div class="rounded-2xl bg-white border border-slate-200 p-6">
        <h4 class="font-semibold">Good to know</h4>
        <ul class="mt-2 space-y-1.5 text-sm text-slate-700 list-disc pl-5">
          <li>Demo is for testing only — avoid real personal data.</li>
          <li>Large images are accepted; very slow connections may take longer.</li>
          <li>Contact us if you’d like this white‑labelled.</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- Footer (lightweight, inline) -->
<footer class="bg-white border-t border-slate-200">
  <div class="max-w-5xl mx-auto px-4 py-8 text-sm text-slate-600">
    © <span id="year"></span> MPMS — Image Upload Demo
  </div>
</footer>

<script>
  // Year
  document.getElementById('year').textContent = new Date().getFullYear();
  // Copy buttons
  document.querySelectorAll('[data-copy]').forEach(btn => {
    btn.addEventListener('click', () => {
      const sel = btn.getAttribute('data-copy');
      const el = document.querySelector(sel);
      if (!el) return;
      const text = el.textContent.trim();
      navigator.clipboard.writeText(text).then(() => {
        const orig = btn.textContent;
        btn.textContent = 'Copied!';
        setTimeout(() => (btn.textContent = orig), 1200);
      });
    });
  });
</script>
</body>
</html>
