// Videos placeholder page — theaiparentguide.com/videos. Lists the first four
// videos as "coming soon" until the channel launches. Uses shared LegalShell
// (nav + hero + footer) from site-chrome.jsx. Exposes window.VideosPage.
const VDS = window.AIForParentsDesignSystem_cccd50;
const { Badge: VBadge, Button: VButton } = VDS;

const V_VIDEOS = [
  { tag: "Video 1", title: "Is ChatGPT Safe for Kids?", meta: "Setup + the conversation · 10 min" },
  { tag: "Video 2", title: "The AI Conversation Every Parent Should Have", meta: "The four questions that work · 9 min" },
  { tag: "Video 3", title: "ChatGPT in 15 Minutes: The Safe Setup", meta: "Both paths, step by step · 13 min" },
  { tag: "Video 4", title: "7 AI Apps Your Kid Might Already Be Using", meta: "What they are, what to watch · 12 min" },
];

function VideoCard({ v }) {
  return (
    <div style={{ background: "var(--surface-white)", borderRadius: "var(--radius-md)", overflow: "hidden", border: "1px solid var(--line-on-cream)", boxShadow: "var(--shadow-sm)" }}>
      <div style={{ position: "relative", aspectRatio: "16/9", background: "var(--afp-navy)", overflow: "hidden" }}>
        <img src="/assets/brand/circuit-board.png" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.25 }} />
        <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
          <div style={{ padding: "6px 15px", borderRadius: "var(--radius-pill)", background: "rgba(255,255,255,0.14)", border: "1px solid var(--line-on-navy)", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "#fff" }}>Coming soon</div>
        </div>
        <div style={{ position: "absolute", top: 12, left: 12 }}><VBadge tone="navy">{v.tag}</VBadge></div>
      </div>
      <div style={{ padding: "16px 18px 18px" }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16.5, color: "var(--afp-navy)", lineHeight: 1.25 }}>{v.title}</div>
        <div style={{ fontSize: 13, color: "var(--text-secondary)", marginTop: 7 }}>{v.meta}</div>
      </div>
    </div>
  );
}

function VideosPage() {
  const { LegalShell } = window;
  return (
    <LegalShell
      active="videos"
      wide
      kicker="Coming soon"
      title="Videos are on the way."
      intro="The first four are in production — calm, plain-English walkthroughs, no panic and no TED talk. Subscribe and we'll email you the moment they go live.">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 14, marginBottom: 22 }}>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 24, color: "var(--afp-navy)", margin: 0 }}>The first four</h2>
        <VButton variant="primary" size="md" as="a" href="https://www.youtube.com/@TheAIParentGuide" target="_blank" rel="noopener">Subscribe on YouTube</VButton>
      </div>
      <div className="r-cols" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 22 }}>
        {V_VIDEOS.map((v) => <VideoCard key={v.tag} v={v} />)}
      </div>
      <p style={{ fontSize: 14.5, color: "var(--text-secondary)", marginTop: 30, textAlign: "center" }}>
        In the meantime, the <a href="/guides/" style={{ color: "var(--afp-navy)", fontWeight: 600, textDecoration: "underline", textUnderlineOffset: 2, textDecorationColor: "var(--afp-amber)" }}>free guides</a> are ready to use tonight.
      </p>
    </LegalShell>
  );
}
window.VideosPage = VideosPage;