"use client";

/**
 * Same-origin demo surface for the preview picker (local try-out).
 * Loaded in the Preview tab when no dev preview URL exists yet.
 */
import Script from "next/script";

export default function PreviewTargetDemoPage() {
  return (
    <div
      style={{
        minHeight: "100vh",
        padding: 28,
        fontFamily: "ui-sans-serif, system-ui, sans-serif",
        background: "linear-gradient(165deg, #fafafa 0%, #f4f4f5 100%)",
        color: "#18181b",
      }}
    >
      <Script src="/vibn-preview-bridge.js" strategy="afterInteractive" />
      <div style={{ maxWidth: 560, margin: "0 auto" }}>
        <p style={{ fontSize: 12, color: "#71717a", marginBottom: 16 }}>
          Local demo — turn on <strong>Select</strong> in chat, then click a highlighted element.
        </p>
        <h1 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 8 }}>
          Sample product UI
        </h1>
        <p style={{ fontSize: 14, color: "#52525b", marginBottom: 28 }}>
          Hero headline and mock CTAs for testing the preview→chat bridge.
        </p>
        <div
          style={{
            padding: 24,
            borderRadius: 14,
            background: "#fff",
            border: "1px solid #e4e4e7",
            boxShadow: "0 8px 30px rgba(0,0,0,0.06)",
          }}
        >
          <div id="demo-hero-title" style={{ fontSize: 18, fontWeight: 600, marginBottom: 12 }}>
            Ship faster with Vibn
          </div>
          <p style={{ fontSize: 14, color: "#71717a", marginBottom: 20 }}>
            This whole card is clickable as one element; buttons below are separate targets.
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <button
              type="button"
              className="demo-primary-cta"
              style={{
                padding: "10px 18px",
                borderRadius: 8,
                border: "none",
                background: "#4f46e5",
                color: "#fff",
                fontWeight: 600,
                fontSize: 14,
                cursor: "pointer",
              }}
            >
              Get started
            </button>
            <button
              type="button"
              style={{
                padding: "10px 18px",
                borderRadius: 8,
                border: "1px solid #e4e4e7",
                background: "#fafafa",
                fontWeight: 500,
                fontSize: 14,
                cursor: "pointer",
              }}
            >
              Book a demo
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
