import type { Metadata } from "next";
import { PageIntro, SiteShell, StatusNote } from "../_components/SiteShell";

export const metadata: Metadata = {
  title: "Product demo",
  description: "Watch SmartCut64 open media, navigate by frame, apply cuts, preview the kept programme and prepare a validated smart-render export.",
};

export default function DemoPage() {
  return <SiteShell>
    <PageIntro eyebrow="Product demonstration" title="A complete precision-cut workflow in one minute"><p>This demonstration uses synthetic, original test media. It shows the real SmartCut64 interface and describes which stages copy compressed packets and which stages encode a cut boundary.</p></PageIntro>
    <div className="section"><div className="content-wide">
      <div className="demo-stage">
        <video controls preload="metadata" poster="/demo/smartcut64-demo-poster.png">
          <source src="/demo/smartcut64-overview.mp4" type="video/mp4" />
          <track kind="captions" src="/demo/smartcut64-overview.vtt" srcLang="en" label="English" default />
          Your browser does not support embedded MP4 video. <a href="/demo/smartcut64-overview.mp4">Download the demonstration</a>.
        </video>
      </div>
      <p className="demo-caption">Approximately one minute · 1280×720 H.264/AAC MP4 · captions are embedded in the video</p>
      <div className="demo-points">
        <article><h2>1. Navigate exactly</h2><p>Centred single-frame thumbnails, decoded dB waveform, chapters and frame/time controls all follow the indexed source model.</p></article>
        <article><h2>2. Cut and preview</h2><p>Green means kept, red means removed. Preview Your Edits skips removed ranges during navigation and playback.</p></article>
        <article><h2>3. Export transparently</h2><p>Smart render repairs unsafe boundary pictures, copies reusable interior GOPs, and validates the completed destination.</p></article>
      </div>
      <StatusNote>Exact copy, smart-render and hardware options depend on the source codec, requested container and stream combination. See the <a href="/formats">operation-by-operation format matrix</a>.</StatusNote>
    </div></div>
  </SiteShell>;
}
