const DD = window.DuologueDesignSystem_a613c9;

/* 90-second demo page: the video is the hero (played with Plyr), then the shared FAQ and
   CTA sections. The video and its poster are self-hosted under /assets/video/. */
const DEMO_VIDEO = "/assets/video/duologue-demo.mp4";
const DEMO_POSTER = "/assets/video/duologue-demo-poster.jpg?v=2";

/* Chapter starts, in seconds. They also become markers on the Plyr progress bar. */
const DEMO_CHAPTERS = [
  { t: 0, title: "Why selling got harder" },
  { t: 16, title: "Their org, their role, their problem" },
  { t: 35, title: "When their world changes" },
  { t: 43, title: "Research on every account" },
  { t: 56, title: "Show up before the problem does" },
  { t: 66, title: "Bring the whole buying group in" },
  { t: 77, title: "Bring your team in to close" }
];

const clock = s => Math.floor(s / 60) + ":" + String(Math.floor(s % 60)).padStart(2, "0");

const chapterAt = time => {
  let i = 0;
  DEMO_CHAPTERS.forEach((c, n) => { if (time >= c.t) i = n; });
  return i;
};

/* Plyr takes over the <video> it is given and wraps it in its own markup, so this
   component renders once and never re-renders (memo, no props that change). */
const DemoPlayer = React.memo(function DemoPlayer({ onReady, onChapter }) {
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    if (!window.Plyr || !videoRef.current) return;
    const player = new window.Plyr(videoRef.current, {
      iconUrl: "https://unpkg.com/plyr@3.8.4/dist/plyr.svg",
      controls: ["play-large", "play", "progress", "current-time", "duration", "mute", "volume", "settings", "pip", "fullscreen"],
      settings: ["speed"],
      speed: { selected: 1, options: [0.75, 1, 1.25, 1.5, 2] },
      markers: { enabled: true, points: DEMO_CHAPTERS.slice(1).map(c => ({ time: c.t, label: c.title })) },
      tooltips: { controls: true, seek: true },
      keyboard: { focused: true, global: false },
      ratio: "16:9"
    });
    player.on("timeupdate", () => onChapter(chapterAt(player.currentTime)));
    player.on("play", () => { window.dataLayer && window.dataLayer.push({ event: "demo_video_play" }); });
    onReady(player);
    return () => player.destroy();
  }, []);
  return (
    <div className="du-demo-player">
      <video ref={videoRef} playsInline preload="metadata" poster={DEMO_POSTER} aria-label="Duologue 90-second product demo">
        <source src={DEMO_VIDEO} type="video/mp4" />
      </video>
    </div>
  );
});

function DemoScreen() {
  const { Eyebrow } = DD;
  const { FaqSection, CtaBlock } = window;
  const playerRef = React.useRef(null);
  const [chapter, setChapter] = React.useState(0);
  const [started, setStarted] = React.useState(false);
  const onReady = React.useCallback(p => {
    playerRef.current = p;
    p.on("playing", () => setStarted(true));
  }, []);

  const jump = c => {
    const p = playerRef.current;
    if (!p) return;
    p.currentTime = c.t;
    p.play();
    setChapter(DEMO_CHAPTERS.indexOf(c));
  };

  return <>
    <section className="du-demo-hero" style={{ position: "relative", overflow: "hidden", background: "var(--surface-page)" }}>
      {/* Same faint square grid as the home hero, plus a brand glow behind the player */}
      <span aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: "linear-gradient(to right, rgba(9,72,182,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(9,72,182,.06) 1px, transparent 1px)",
        backgroundSize: "46px 46px",
        WebkitMaskImage: "radial-gradient(120% 88% at 50% 2%, #000 30%, transparent 76%)",
        maskImage: "radial-gradient(120% 88% at 50% 2%, #000 30%, transparent 76%)"
      }} />
      <span aria-hidden="true" className="du-demo-glow" />

      <div className="du-container" style={{ position: "relative", paddingTop: "clamp(48px,7vw,96px)", paddingBottom: "var(--section-py)" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 22, maxWidth: 880, marginInline: "auto" }}>
          <Eyebrow bullets="both" tone="brand">90-second demo</Eyebrow>
          <h1 className="du-demo-title">AI is changing how your customers work, every day</h1>
          {/* One sentence per line on desktop (see .du-demo-lead); flows as a paragraph on phones */}
          <p className="du-demo-lead">
            <span>Your outbound should evolve before they do.</span>{" "}
            <span>Breaking through needs clarity today, more than ever.</span>{" "}
            <span>See how Duologue gives you that clarity on every account, in 90 seconds.</span>
          </p>
        </div>

        <div className="du-demo-frame">
          <DemoPlayer onReady={onReady} onChapter={setChapter} />
        </div>

        <div className="du-demo-chapters" role="list" aria-label="Chapters">
          {DEMO_CHAPTERS.map((c, i) => (
            <button key={c.t} type="button" role="listitem" onClick={() => jump(c)}
              className={"du-demo-chapter" + (started && i === chapter ? " is-active" : "")}
              aria-label={"Play from " + clock(c.t) + ": " + c.title}>
              <span className="du-demo-chapter-time">{clock(c.t)}</span>
              <span className="du-demo-chapter-title">{c.title}</span>
            </button>
          ))}
        </div>
      </div>
    </section>

    <FaqSection />

    <CtaBlock />
  </>;
}
window.DemoScreen = DemoScreen;