"use client";

import { useState } from "react";

const starter_prompt = `Create a browser-made motion video for [your brand or product].

OUTCOME
[Describe the one thing the viewer should understand or feel.]

AUDIENCE
[Who is this for?]

DURATION + AUDIO
[Target duration and soundtrack path, if there is one.]

STORY
[List 5–8 moments. Keep it to one connected story, not a module slideshow.]

BRAND + VISUAL INPUTS
- Complete the attached brand-context-template.md and use it as the brand source of truth.
- Read the attached browser-motion-technique-prompt-library.md as a menu of what is technically possible with HTML, CSS and JavaScript. Select only the techniques that help this story.
- Inspect any supplied product screenshots or existing pages. Preserve real terminology and recognisable product structures, but simplify them for motion.

BUILD
- Build the video as HTML, CSS and JavaScript. Do not add an animation framework unless it is genuinely necessary.
- Make the page the prototype and the frame source.
- Put every visual state on one deterministic timeline exposed as window.render_at_time(seconds).
- Also expose window.motion_duration and window.motion_ready.
- Include play, pause, restart, scrubbing and audio synchronisation.
- Use one recurring object, person or visual motif to connect the scenes.
- Prefer transitions where an outgoing shape becomes part of the next scene.
- Use a seeded generator for any random-looking motion.
- Keep text readable and hold important states long enough to understand.

WORKFLOW
1. Inspect the supplied files.
2. Create a concise scene map and timing/cue plan.
3. Build the complete interactive HTML timeline.
4. Export representative frames from the opening, middle, climax and ending; fix visual or timing issues.
5. If the goal is team sharing, stop at the polished interactive HTML page.
6. Only if an MP4 is requested, capture exact frames in a headless browser and encode them with FFmpeg.

Start by summarising the creative direction and scene map, then implement through completion.`;

const quick_prompt = `Make a short motion video for [your brand or product] in HTML, CSS and JavaScript.

Use the completed brand context template and the attached browser motion technique library as a menu of motion ideas. Tell one connected story, build it on a deterministic render_at_time(seconds) timeline, include playback and scrubbing, and review key frames before finishing. The HTML page should be polished enough to share directly with the team.`;

const process_steps = [
  {
    number: "01",
    title: "Define what you want to communicate",
    body: "Define what the viewer should understand or feel. The strongest film followed one employee from first day to payday; it did not try to explain every product screen.",
    tag: "Message + audience",
  },
  {
    number: "02",
    title: "Provide useful documents",
    body: "Supply the brand guide, real product references, a soundtrack if timing matters, and a technique library. These are guardrails and possibilities—not a rigid storyboard.",
    tag: "Brand + references + audio",
  },
  {
    number: "03",
    title: "Build one timeline",
    body: "The browser page is both the live prototype and the source of every frame. Playback, scrubbing and export all call the same exact-time renderer.",
    tag: "HTML + CSS + JavaScript",
  },
  {
    number: "04",
    title: "Review key moments",
    body: "Check a handful of key timestamps before spending time on a full render. Opening, transitions, dense scenes and the final frame reveal most issues quickly.",
    tag: "Check representative frames",
  },
  {
    number: "05",
    title: "Share the HTML or render an MP4",
    body: "For an internal audience, the interactive HTML is often the finished piece. Render an MP4 only when you need a portable upload, social cut or formal master.",
    tag: "Choose the required output",
  },
];

const techniques = [
  {
    title: "Kinetic type",
    label: "Make words behave",
    body: "Keep one sentence stem stable while a key word changes. Use scale, blur, weight, cropping and temporal echoes instead of relying on fades.",
    prompt: "Use a stable sentence stem with one changing word; animate weight, scale, blur and crop, with faint previous states as temporal echoes.",
  },
  {
    title: "Geometry continuity",
    label: "Connect the scenes",
    body: "Let a card become a phone, a shift become a clock-in control, or a circle become a portal. Reusing shape makes separate scenes feel like one journey.",
    prompt: "Design geometry-preserving transitions: the outgoing scene's main shape must transform into a meaningful object in the next scene.",
  },
  {
    title: "Product UI theatre",
    label: "Show cause and effect",
    body: "Typing, cursor travel, hover, click, active tabs, changing statuses and progressive messages make an interface understandable without narration.",
    prompt: "Treat the cursor as a character and use clear UI microstates—typing, hover, click, progress and status changes—to explain cause and effect.",
  },
  {
    title: "Generative systems",
    label: "Create complexity cheaply",
    body: "Generate repeated cards, people, shifts or particles from arrays. Use seeded variation so the result feels organic while every timestamp stays repeatable.",
    prompt: "Generate repeated DOM elements from data arrays with seeded variation in position, scale and delay so exact timestamps always reproduce the same frame.",
  },
  {
    title: "Depth + composition",
    label: "Use the whole frame",
    body: "Combine a soft atmosphere layer, a clear hero object and occasional oversized foreground elements. Perspective and partial cropping can make flat DOM feel cinematic.",
    prompt: "Compose three depth planes: soft atmosphere, primary content and an occasional oversized foreground object using perspective, blur and controlled cropping.",
  },
  {
    title: "Music-led timing",
    label: "Give motion targets",
    body: "Place small events on beats and reserve palette changes, portals and giant type for phrase boundaries. Wave the intensity instead of moving everything constantly.",
    prompt: "Place meaningful micro-events every 0.4–0.8 seconds in dense passages and reserve major transformations for clear four- or eight-bar phrase boundaries.",
  },
];

const resources = [
  {
    eyebrow: "Start here",
    title: "Starter prompt",
    body: "The full reusable prompt from this page, ready to adapt in Codex.",
    href: "/resources/microkeeper-motion-starter-prompt.txt",
    action: "Open prompt",
  },
  {
    eyebrow: "Fill this in",
    title: "Brand context template",
    body: "A neutral, original template for turning your own public brand choices into useful AI context.",
    href: "/resources/brand-context-template.md",
    action: "Open template",
  },
  {
    eyebrow: "Adapted",
    title: "Technique prompt library",
    body: "Visual techniques rewritten as practical language to add to a prompt.",
    href: "/resources/browser-motion-technique-prompt-library.md",
    action: "Open library",
  },
  {
    eyebrow: "External example",
    title: "Atlassian DESIGN.md",
    body: "A public example of detailed, machine-readable design context. Linked for reference—not copied or adapted here.",
    href: "https://atlassian.design/DESIGN.md",
    action: "View Atlassian example",
  },
  {
    eyebrow: "Original",
    title: "Reference video analysis",
    body: "The scene-by-scene visual extract that began the experiment.",
    href: "/resources/original-reference-video-visual-techniques.md",
    action: "Open original",
  },
  {
    eyebrow: "Optional production",
    title: "Edit plan + renderer",
    body: "A real timing contract and the headless-browser/FFmpeg renderer behind the second film.",
    href: "/resources/example-edit-plan.json",
    secondary_href: "/resources/example-browser-renderer.mjs",
    action: "Open edit plan",
    secondary_action: "Open renderer",
  },
  {
    eyebrow: "Download",
    title: "Complete site source",
    body: "A reusable ZIP containing the site app, both browser videos, prompts, the neutral brand template and technical examples. Add it to a repo so an LLM agent can inspect the full context.",
    href: "/downloads/microkeeper-motion-playbook-source.zip",
    action: "Download source ZIP",
    download: true,
  },
];

function CopyButton({
  text,
  label,
  className = "",
}: {
  text: string;
  label: string;
  className?: string;
}) {
  const [copied, set_copied] = useState(false);

  const copy_text = async () => {
    await navigator.clipboard.writeText(text);
    set_copied(true);
    window.setTimeout(() => set_copied(false), 1800);
  };

  return (
    <button
      className={`copy_button ${className}`}
      type="button"
      onClick={copy_text}
      aria-live="polite"
    >
      <span>{copied ? "Copied" : label}</span>
      <span aria-hidden="true">{copied ? "✓" : "↗"}</span>
    </button>
  );
}

export default function Home() {
  return (
    <main>
      <header className="site_header">
        <a className="brand_link" href="#top" aria-label="Motion playbook home">
          <span>Motion playbook</span>
        </a>
        <nav aria-label="Main navigation">
          <a href="#films">Films</a>
          <a href="#process">Process</a>
          <a href="#prompt">Prompt</a>
          <a href="#resources">Resources</a>
        </nav>
        <a className="header_cta" href="#prompt">
          Start creating
          <span aria-hidden="true">↘</span>
        </a>
      </header>

      <section className="hero" id="top">
        <div className="hero_glow hero_glow_one" />
        <div className="hero_glow hero_glow_two" />
        <div className="hero_copy">
          <p className="eyebrow">
            <span />
            A practical AI motion playbook
          </p>
          <h1>
            Make the web
            <span>move.</span>
          </h1>
          <p className="hero_lede">
            Turn a prompt, a few brand files and a soundtrack into an interactive motion video—using the same tools that make a webpage.
          </p>
          <div className="hero_actions">
            <a className="primary_button" href="#films">
              Watch the films
              <span aria-hidden="true">↓</span>
            </a>
            <CopyButton text={quick_prompt} label="Copy the short prompt" className="secondary_button" />
          </div>
        </div>

        <div className="hero_visual" aria-label="The motion video workflow">
          <div className="visual_window">
            <div className="window_bar">
              <div className="window_dots" aria-hidden="true"><span /><span /><span /></div>
              <p>motion/index.html</p>
              <span className="live_badge">Interactive</span>
            </div>
            <div className="visual_canvas">
              <p className="canvas_kicker">One connected story</p>
              <div className="canvas_words">
                <span>HIRE</span>
                <span>ROSTER</span>
                <span>TRACK</span>
                <span>PAY</span>
              </div>
              <div className="timeline_track">
                <span />
              </div>
              <div className="floating_token token_html">HTML</div>
              <div className="floating_token token_css">CSS</div>
              <div className="floating_token token_js">JS</div>
              <div className="motion_cursor" aria-hidden="true">↖</div>
            </div>
          </div>
          <div className="hero_note note_prompt">
            <span>01</span>
            <p>Describe the story</p>
          </div>
          <div className="hero_note note_timeline">
            <span>02</span>
            <p>Build one timeline</p>
          </div>
          <div className="hero_note note_share">
            <span>03</span>
            <p>Share the page</p>
          </div>
        </div>

        <div className="hero_stats" aria-label="Project summary">
          <div><strong>2</strong><span>finished films</span></div>
          <div><strong>1</strong><span>exact-time timeline</span></div>
          <div><strong>0</strong><span>motion frameworks</span></div>
          <div><strong>∞</strong><span>creative directions</span></div>
        </div>
      </section>

      <section className="section films_section" id="films">
        <div className="section_intro">
          <p className="eyebrow"><span />Two different briefs</p>
          <h2>Same simple idea.<br />Very different films.</h2>
          <p>Both pieces are live webpages. Press play, scrub the timeline and inspect the source idea in its native form.</p>
        </div>

        <article className="film_card film_story">
          <div className="film_heading">
            <div>
              <p className="film_number">Film 01 · Story-first</p>
              <h3>Hire to retire</h3>
            </div>
            <div className="film_meta">
              <span>47.5 seconds</span>
              <span>Voice + music</span>
              <span>Interactive HTML</span>
            </div>
          </div>
          <div className="film_frame">
            <iframe
              src="/videos/hire-to-retire/index.html"
              title="Microkeeper hire to retire interactive motion video"
              loading="lazy"
              allow="autoplay; fullscreen"
            />
          </div>
          <div className="film_footer">
            <p>One employee moves through onboarding, the app, rostering, clocking, timesheets, payroll and payslip delivery. Product truth is simplified into a cinematic story.</p>
            <div className="film_links">
              <a href="/videos/hire-to-retire/index.html" target="_blank" rel="noreferrer">
                Open full player <span aria-hidden="true">↗</span>
              </a>
              <a href="/videos/hire-to-retire/hire-to-retire.mp4" download>
                Download MP4 <span aria-hidden="true">↓</span>
              </a>
            </div>
          </div>
        </article>

        <article className="film_card film_tech">
          <div className="film_heading">
            <div>
              <p className="film_number">Film 02 · Technique-first</p>
              <h3>AI agents showcase</h3>
            </div>
            <div className="film_meta">
              <span>29.02 seconds</span>
              <span>Music-led</span>
              <span>1,741 frames</span>
            </div>
          </div>
          <div className="film_frame">
            <iframe
              src="/videos/ai-agents/index.html"
              title="AI agents interactive motion showcase"
              loading="lazy"
              allow="autoplay; fullscreen"
            />
          </div>
          <div className="film_footer">
            <p>A technical experiment in kinetic type, UI theatre, generated systems, CSS depth, shape continuity and beat-led pacing—all on one deterministic browser timeline.</p>
            <div className="film_links">
              <a href="/videos/ai-agents/index.html" target="_blank" rel="noreferrer">
                Open full player <span aria-hidden="true">↗</span>
              </a>
              <a href="/videos/ai-agents/agent-os-motion-showcase.mp4" download>
                Download MP4 <span aria-hidden="true">↓</span>
              </a>
            </div>
          </div>
        </article>
      </section>

      <section className="section process_section" id="process">
        <div className="process_heading">
          <div>
            <p className="eyebrow eyebrow_light"><span />How to create one</p>
            <h2>What to do.</h2>
          </div>
          <p className="process_lede">Use this sequence to go from an idea to a browser video that is ready to review or share.</p>
        </div>

        <div className="process_list">
          {process_steps.map((step) => (
            <article className="process_item" key={step.number}>
              <p className="process_number">{step.number}</p>
              <h3>{step.title}</h3>
              <p>{step.body}</p>
              <span>{step.tag}</span>
            </article>
          ))}
        </div>
      </section>

      <section className="section prompt_section" id="prompt">
        <div className="prompt_intro">
          <p className="eyebrow"><span />Copy and edit</p>
          <h2>Starting prompt.</h2>
          <p>Download the two files below, complete the brand template, attach both to your Codex task, then replace the remaining bracketed sections and add any product references.</p>
          <div className="prompt_files">
            <a href="/resources/brand-context-template.md" download>Brand template ↓</a>
            <span>+</span>
            <a href="/resources/browser-motion-technique-prompt-library.md" download>Technique library ↓</a>
          </div>
        </div>
        <div className="prompt_window">
          <div className="prompt_bar">
            <div>
              <span className="prompt_dot" />
              <p>microkeeper-motion-starter-prompt.txt</p>
            </div>
            <CopyButton text={starter_prompt} label="Copy prompt" />
          </div>
          <pre><code>{starter_prompt}</code></pre>
        </div>
      </section>

      <section className="section technique_section">
        <div className="section_intro technique_intro">
          <p className="eyebrow"><span />A menu, not a checklist</p>
          <h2>Prompt-ready<br />visual techniques.</h2>
          <p>The original reference analysis was useful because it showed what the browser could do. These versions are written to be pasted directly into a creative brief.</p>
        </div>
        <div className="technique_grid">
          {techniques.map((technique, index) => (
            <article className="technique_card" key={technique.title}>
              <div className="technique_top">
                <span>{String(index + 1).padStart(2, "0")}</span>
                <p>{technique.label}</p>
              </div>
              <h3>{technique.title}</h3>
              <p>{technique.body}</p>
              <details>
                <summary>Prompt language</summary>
                <div>
                  <p>{technique.prompt}</p>
                  <CopyButton text={technique.prompt} label="Copy line" />
                </div>
              </details>
            </article>
          ))}
        </div>
      </section>

      <section className="section brand_section">
        <div className="brand_heading">
          <p className="eyebrow"><span />The Microkeeper case study</p>
          <h2>Brand settings.</h2>
        </div>
        <div className="brand_grid">
          <article className="brand_card brand_type">
            <p>Type</p>
            <strong>Ubuntu<br /><small>+ Open Sans</small></strong>
            <span>Ubuntu for headings. Open Sans for supporting copy, captions and interface text.</span>
          </article>
          <article className="brand_card brand_colour">
            <p>Core palette</p>
            <div className="colour_row">
              <span style={{ background: "#da0813" }}><small>#da0813</small></span>
              <span style={{ background: "#2d314f" }}><small>#2d314f</small></span>
              <span style={{ background: "#c1e5eb" }}><small>#c1e5eb</small></span>
              <span style={{ background: "#5fe2f0" }}><small>#5fe2f0</small></span>
              <span style={{ background: "#f4f4f8" }}><small>#f4f4f8</small></span>
              <span style={{ background: "#ffffff" }}><small>#ffffff</small></span>
            </div>
          </article>
          <article className="brand_card brand_motion">
            <p>Digital assets</p>
            <strong>Pale-blue texture.<br />Light product surfaces.</strong>
            <span>Use the approved blue texture behind software mockups. Keep the interface and text clear.</span>
          </article>
          <article className="brand_card brand_avoid">
            <p>Use red sparingly</p>
            <ul>
              <li>Good: one key word in a hero title</li>
              <li>Good: the logo or primary warning/action</li>
              <li>Avoid: full section backgrounds</li>
              <li>Avoid: repeated labels and routine decoration</li>
            </ul>
          </article>
        </div>
      </section>

      <section className="section resources_section" id="resources">
        <div className="resources_heading">
          <div>
            <p className="eyebrow"><span />Source files</p>
            <h2>Files to use.</h2>
          </div>
          <p>Use the adapted files when writing a new brief. Keep the originals nearby when you need deeper brand or reference context.</p>
        </div>
        <div className="resource_grid">
          {resources.map((resource) => (
            <article className="resource_card" key={resource.title}>
              <p className="resource_eyebrow">{resource.eyebrow}</p>
              <h3>{resource.title}</h3>
              <p>{resource.body}</p>
              <div>
                <a
                  href={resource.href}
                  target="_blank"
                  rel="noreferrer"
                  download={"download" in resource && resource.download ? true : undefined}
                >
                  {resource.action} <span aria-hidden="true">↗</span>
                </a>
                {resource.secondary_href && (
                  <a href={resource.secondary_href} target="_blank" rel="noreferrer">
                    {resource.secondary_action} <span aria-hidden="true">↗</span>
                  </a>
                )}
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="closing_section">
        <div className="closing_mark">
          <img src="/videos/hire-to-retire/assets/dylan-wong.jpg" alt="Dylan Wong" />
        </div>
        <p>Now make yours.</p>
        <h2>Describe the story.<br /><span>Let the browser move it.</span></h2>
        <div className="closing_actions">
          <a href="#prompt">Copy the prompt <span aria-hidden="true">↑</span></a>
          <a href="#films">Replay the films <span aria-hidden="true">↑</span></a>
        </div>
      </section>

      <footer className="site_footer">
        <p>Built from the same stack it teaches: HTML, CSS and JavaScript.</p>
        <a href="#top">Back to top ↑</a>
      </footer>
    </main>
  );
}
