modern-cms 1.0.0

package/template/apps/web/components/renderer/sections/BeforeAfter.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { MoveHorizontal } from "lucide-react";
+import { CmsImage } from "../CmsImage";
+import type { SectionProps } from "./types";
+
+// A pointer-drag reveal slider: the "before" image sits on top, clipped to `percent`
+// width, so dragging the handle reveals more/less of the "after" image underneath.
+// Simpler cousin of BuilderCanvasNode's resize handles — one axis, no unit juggling.
+export function BeforeAfter({ node }: SectionProps) {
+  const beforeImage = (node.props.beforeImage as string) || "";
+  const afterImage = (node.props.afterImage as string) || "";
+  const beforeLabel = (node.props.beforeLabel as string) || "Before";
+  const afterLabel = (node.props.afterLabel as string) || "After";
+  const [percent, setPercent] = useState(50);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => setContainerWidth(entries[0].contentRect.width));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const updateFromClientX = useCallback((clientX: number) => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const next = ((clientX - rect.left) / rect.width) * 100;
+    setPercent(Math.max(0, Math.min(100, next)));
+  }, []);
+
+  if (!beforeImage || !afterImage) {
+    return (
+      <div className="h-48 flex items-center justify-center bg-slate-100 text-slate-400 text-sm rounded-lg">
+        Add a before and an after image
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative w-full aspect-video rounded-lg overflow-hidden select-none touch-none"
+      onPointerDown={(e) => {
+        dragging.current = true;
+        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+        updateFromClientX(e.clientX);
+      }}
+      onPointerMove={(e) => {
+        if (dragging.current) updateFromClientX(e.clientX);
+      }}
+      onPointerUp={() => {
+        dragging.current = false;
+      }}
+    >
+      <CmsImage src={afterImage} alt={afterLabel} fill className="object-cover" />
+      <div className="absolute inset-0 overflow-hidden" style={{ width: `${percent}%` }}>
+        <div className="relative h-full" style={{ width: containerWidth || "100%" }}>
+          <CmsImage src={beforeImage} alt={beforeLabel} fill className="object-cover" />
+        </div>
+      </div>
+      <div className="absolute inset-y-0 bg-white/80 w-0.5 pointer-events-none" style={{ left: `${percent}%` }}>
+        <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-slate-700">
+          <MoveHorizontal size={16} />
+        </span>
+      </div>
+      <span className="absolute top-3 left-3 text-xs font-semibold bg-black/50 text-white px-2 py-1 rounded">{beforeLabel}</span>
+      <span className="absolute top-3 right-3 text-xs font-semibold bg-black/50 text-white px-2 py-1 rounded">{afterLabel}</span>
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/Button.tsx

@@ -0,0 +1,42 @@
+import clsx from "clsx";
+
+const SIZE_CLASSES = {
+  sm: "px-4 py-1.5 text-xs",
+  md: "px-6 py-3 text-sm",
+  lg: "px-8 py-4 text-base",
+} as const;
+
+export function Button({
+  text,
+  href,
+  variant = "primary",
+  border = "default",
+  size = "md",
+}: {
+  text: string;
+  href: string;
+  variant?: "primary" | "secondary" | "outline" | "text";
+  /** Overrides the variant's implicit border — "default" leaves the variant's own
+   * border behavior alone (outline gets one, primary/secondary don't). */
+  border?: "default" | "none" | "solid";
+  size?: "sm" | "md" | "lg";
+}) {
+  const showBorder = border === "solid" || (border === "default" && variant === "outline");
+
+  return (
+    <a
+      href={href}
+      className={clsx(
+        "inline-flex items-center justify-center font-semibold transition-opacity hover:opacity-90",
+        SIZE_CLASSES[size] ?? SIZE_CLASSES.md,
+        variant === "primary" && "bg-theme-primary text-white rounded-lg",
+        variant === "secondary" && "bg-theme-secondary text-white rounded-lg",
+        variant === "outline" && "rounded-lg",
+        variant === "text" && "rounded-none bg-transparent",
+        showBorder && "border-2 border-current"
+      )}
+    >
+      {text}
+    </a>
+  );
+}

package/template/apps/web/components/renderer/sections/ButtonGroup.tsx

@@ -0,0 +1,22 @@
+import { Button } from "./Button";
+import type { SectionProps } from "./types";
+
+type ButtonItem = {
+  text: string;
+  href: string;
+  variant?: "primary" | "secondary" | "outline";
+  border?: "default" | "none" | "solid";
+  size?: "sm" | "md" | "lg";
+};
+
+export function ButtonGroup({ node }: SectionProps) {
+  const buttons = (node.props.buttons as ButtonItem[]) ?? [];
+
+  return (
+    <div className="flex flex-wrap gap-4 justify-center">
+      {buttons.map((btn, i) => (
+        <Button key={i} text={btn.text} href={btn.href} variant={btn.variant} border={btn.border} size={btn.size} />
+      ))}
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/CardGrid.tsx

@@ -0,0 +1,66 @@
+import { ArrowRight } from "lucide-react";
+import { IconRenderer } from "@/components/builder/IconRenderer";
+import { CmsImage } from "../CmsImage";
+import type { SectionProps } from "./types";
+
+type Card = { image?: string; icon?: string; title: string; excerpt?: string; buttonText?: string; href: string };
+
+export function CardGrid({ node }: SectionProps) {
+  const heading = node.props.heading as string;
+  const cards = (node.props.cards as Card[]) ?? [];
+  const columns = Math.max(1, Math.min(4, Number(node.props.columns) || 3));
+  const imageHeight = (node.props.imageHeight as string) || "160px";
+
+  return (
+    <div>
+      {heading && <h2 className="text-2xl md:text-3xl font-bold mb-8 text-center">{heading}</h2>}
+      {cards.length === 0 ? (
+        <div className="h-32 flex items-center justify-center bg-slate-100 text-slate-400 text-sm rounded-lg">
+          No cards added yet
+        </div>
+      ) : (
+        <div className="grid gap-6" style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
+          {cards.map((card, i) =>
+            card.image ? (
+              <a
+                key={i}
+                href={card.href || "#"}
+                className="flex flex-col rounded-lg border overflow-hidden bg-white hover:shadow-md transition-shadow"
+              >
+                <div className="relative w-full" style={{ height: imageHeight }}>
+                  <CmsImage src={card.image} alt={card.title} fill className="object-cover" sizes={`(max-width: 768px) 100vw, ${Math.round(100 / columns)}vw`} />
+                </div>
+                <div className="flex flex-col gap-2 p-4 flex-1">
+                  <h3 className="font-semibold">{card.title}</h3>
+                  {card.excerpt && <p className="text-sm opacity-75 flex-1">{card.excerpt}</p>}
+                  {card.buttonText && (
+                    <span className="inline-flex items-center gap-1 text-sm font-medium text-theme-primary mt-auto">
+                      {card.buttonText} <ArrowRight size={14} />
+                    </span>
+                  )}
+                </div>
+              </a>
+            ) : (
+              // No image — a lighter, icon-led tile (or plain text if no icon either),
+              // rather than a placeholder gray box that implies a missing asset.
+              <a key={i} href={card.href || "#"} className="flex flex-col items-center text-center gap-2 px-2 py-4 group">
+                {card.icon && (
+                  <span className="w-14 h-14 rounded-full bg-theme-primary/10 text-theme-primary flex items-center justify-center mb-1 group-hover:bg-theme-primary/20 transition-colors">
+                    <IconRenderer name={card.icon} size={24} />
+                  </span>
+                )}
+                <h3 className="font-semibold">{card.title}</h3>
+                {card.excerpt && <p className="text-sm opacity-75">{card.excerpt}</p>}
+                {card.buttonText && (
+                  <span className="inline-flex items-center gap-1 text-sm font-medium text-theme-primary mt-1">
+                    {card.buttonText} <ArrowRight size={14} />
+                  </span>
+                )}
+              </a>
+            )
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/CollectionList.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ArrowRight } from "lucide-react";
+import type { CollectionItemSummary } from "@pgcms/shared";
+import { CmsImage } from "../CmsImage";
+import type { SectionProps } from "./types";
+
+/** Card grid over a collection's published items — the dynamic sibling of the static
+ * Card Grid block. Point it at a collection slug and it stays current as items are
+ * published, newest first, each card linking to /{collection}/{item}. */
+export function CollectionList({ node }: SectionProps) {
+  const collectionSlug = (node.props.collectionSlug as string) || "";
+  const columns = Math.max(1, Math.min(4, Number(node.props.columns) || 3));
+  const limit = Math.max(1, Math.min(50, Number(node.props.limit) || 6));
+  const showExcerpt = node.props.showExcerpt !== false;
+  const showDate = node.props.showDate !== false;
+
+  const [items, setItems] = useState<CollectionItemSummary[] | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    if (!collectionSlug) return;
+    fetch(`/api/collections/public/${collectionSlug}/items?limit=${limit}`)
+      .then((res) => (res.ok ? res.json() : Promise.reject(res.status)))
+      .then(setItems)
+      .catch(() => setError(true));
+  }, [collectionSlug, limit]);
+
+  if (!collectionSlug) {
+    return (
+      <div className="h-24 flex items-center justify-center bg-slate-100 text-slate-400 text-sm rounded-lg">
+        Set a collection slug in the Inspector (e.g. &quot;blog&quot;)
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="h-24 flex items-center justify-center bg-slate-100 text-slate-400 text-sm rounded-lg">
+        Collection &quot;{collectionSlug}&quot; not found
+      </div>
+    );
+  }
+  if (items === null) {
+    return <div className="h-24 animate-pulse bg-slate-100 rounded-lg" />;
+  }
+  if (items.length === 0) {
+    return (
+      <div className="h-24 flex items-center justify-center bg-slate-100 text-slate-400 text-sm rounded-lg">
+        No published items in &quot;{collectionSlug}&quot; yet
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-6" style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
+      {items.map((item) => (
+        <a
+          key={item.slug}
+          href={`/${collectionSlug}/${item.slug}`}
+          className="flex flex-col rounded-lg border overflow-hidden bg-white hover:shadow-md transition-shadow"
+        >
+          {item.coverImage ? (
+            <div className="relative w-full h-40">
+              <CmsImage src={item.coverImage} alt={item.title} fill className="object-cover" sizes={`(max-width: 768px) 100vw, ${Math.round(100 / columns)}vw`} />
+            </div>
+          ) : (
+            <div className="w-full h-40 bg-slate-100" />
+          )}
+          <div className="flex flex-col gap-2 p-4 flex-1">
+            {showDate && item.publishedAt && (
+              <span className="text-xs opacity-60">{new Date(item.publishedAt).toLocaleDateString()}</span>
+            )}
+            <h3 className="font-semibold">{item.title}</h3>
+            {showExcerpt && item.excerpt && <p className="text-sm opacity-75 flex-1">{item.excerpt}</p>}
+            <span className="inline-flex items-center gap-1 text-sm font-medium text-theme-primary mt-auto">
+              Read more <ArrowRight size={14} />
+            </span>
+          </div>
+        </a>
+      ))}
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/Column.tsx

@@ -0,0 +1,26 @@
+import type { CSSProperties } from "react";
+import type { SectionProps } from "./types";
+import { withContentLinks } from "./ContentLinks";
+
+export function Column({ node, children }: SectionProps) {
+  const links = node.props.links as { label?: string; href: string }[];
+  // Falls back to the parent Container's cascaded choice (--pgcms-container-* custom
+  // properties set in Container.tsx) whenever this column hasn't set its own explicit
+  // alignment — same pattern as GridCell falling back to its parent Grid.
+  const justifyContent =
+    node.style.justifyContent === "between"
+      ? "space-between"
+      : node.style.justifyContent || "var(--pgcms-container-justify-content, start)";
+  const alignItems = node.style.alignItems || "var(--pgcms-container-align-items, stretch)";
+
+  const content = (
+    <div
+      className="flex flex-col gap-4 min-h-[40px] h-full"
+      style={{ justifyContent, alignItems } as CSSProperties}
+    >
+      {children}
+    </div>
+  );
+
+  return withContentLinks(links, content, "block h-full");
+}

package/template/apps/web/components/renderer/sections/ContactForm.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import type { SectionProps } from "./types";
+
+type FormFieldDef = { key: string; label: string; fieldType: "text" | "email" | "tel" | "textarea"; required?: boolean };
+
+export function ContactForm({ node }: SectionProps) {
+  const heading = node.props.heading as string;
+  const subheading = node.props.subheading as string;
+  const formName = (node.props.formName as string) || "Contact";
+  const fields = (node.props.fields as FormFieldDef[]) ?? [];
+  const submitButtonText = (node.props.submitButtonText as string) || "Send";
+  const successMessage = (node.props.successMessage as string) || "Thanks — we'll be in touch.";
+
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [status, setStatus] = useState<"idle" | "submitting" | "done" | "error">("idle");
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setStatus("submitting");
+    const form = e.currentTarget;
+    const hp = (form.elements.namedItem("_hp") as HTMLInputElement | null)?.value ?? "";
+    try {
+      const res = await fetch("/api/forms/submit", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          formName,
+          pageSlug: window.location.pathname,
+          data: values,
+          _hp: hp,
+        }),
+      });
+      if (!res.ok) throw new Error("submit failed");
+      setStatus("done");
+      setValues({});
+    } catch {
+      setStatus("error");
+    }
+  }
+
+  if (status === "done") {
+    return (
+      <div className="text-center">
+        <p className="text-lg">{successMessage}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {heading && <h2 className="text-2xl md:text-3xl font-bold mb-2 text-center">{heading}</h2>}
+      {subheading && <p className="text-center opacity-80 mb-6">{subheading}</p>}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {/* Honeypot — hidden from users, bots often fill it */}
+        <input type="text" name="_hp" tabIndex={-1} autoComplete="off" className="hidden" aria-hidden="true" />
+        {fields.map((field) => (
+          <div key={field.key} className="space-y-1">
+            <label className="text-sm font-medium block">
+              {field.label}
+              {field.required && <span className="text-red-500"> *</span>}
+            </label>
+            {field.fieldType === "textarea" ? (
+              <textarea
+                required={field.required}
+                value={values[field.key] ?? ""}
+                onChange={(e) => setValues((v) => ({ ...v, [field.key]: e.target.value }))}
+                rows={4}
+                className="w-full border rounded-md px-3 py-2 text-sm text-slate-900 bg-white"
+              />
+            ) : (
+              <input
+                type={field.fieldType}
+                required={field.required}
+                value={values[field.key] ?? ""}
+                onChange={(e) => setValues((v) => ({ ...v, [field.key]: e.target.value }))}
+                className="w-full border rounded-md px-3 py-2 text-sm text-slate-900 bg-white"
+              />
+            )}
+          </div>
+        ))}
+        {status === "error" && (
+          <p className="text-sm text-red-500">Something went wrong sending your message — please try again.</p>
+        )}
+        <button
+          type="submit"
+          disabled={status === "submitting"}
+          className="w-full bg-theme-primary text-white rounded-md py-2.5 font-semibold hover:opacity-90 disabled:opacity-50"
+        >
+          {status === "submitting" ? "Sending..." : submitButtonText}
+        </button>
+      </form>
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/Container.tsx

@@ -0,0 +1,44 @@
+import type { CSSProperties } from "react";
+import type { SectionProps } from "./types";
+import { withContentLinks } from "./ContentLinks";
+
+export function Container({ node, children }: SectionProps) {
+  const gap = (node.props.gap as string) || "24px";
+  const links = node.props.links as { label?: string; href: string }[];
+
+  // Each column drives its own grid track width via style.columnWidth (set by dragging
+  // its resize handle) — unset means "share remaining space equally" (1fr), same as a
+  // plain repeat(N, 1fr) grid would give every column before any of them are resized.
+  const gridTemplateColumns = node.children.map((c) => c.style.columnWidth || "minmax(0, 1fr)").join(" ");
+
+  const alignItems = node.style.alignItems || undefined;
+  const justifyContent = node.style.justifyContent === "between" ? "space-between" : node.style.justifyContent || undefined;
+
+  const grid = (
+    <div
+      className="grid"
+      style={
+        {
+          gridTemplateColumns,
+          gap,
+          // Governs how each column's own track sizes/sits within the row (only visible
+          // when a column is shorter than the row, i.e. alignItems isn't "stretch").
+          alignItems,
+          justifyContent,
+          // The same choice ALSO cascades into every column's own inner content
+          // alignment (see Column.tsx) via inherited CSS custom properties, exactly
+          // like Grid → GridCell — so choosing an alignment once on the Container
+          // applies uniformly instead of requiring each column configured individually.
+          // A column can still override just itself from its own Style tab. Defaults
+          // match the pre-existing unset look (full-width content, top-anchored).
+          "--pgcms-container-align-items": alignItems ?? "stretch",
+          "--pgcms-container-justify-content": justifyContent ?? "start",
+        } as CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+
+  return withContentLinks(links, grid, "block");
+}

package/template/apps/web/components/renderer/sections/ContentLinks.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+
+type ContentLink = { label?: string; href: string };
+
+/**
+ * Shared rendering rule for Container/Column's "links" field: exactly one link makes
+ * the whole block clickable (wrap `children` in it); two or more can't — a block can't
+ * be two different links at once — so they render as a small link list appended below
+ * instead. Zero links renders `children` unchanged.
+ */
+export function withContentLinks(links: ContentLink[] | undefined, children: React.ReactNode, wrapperClassName: string) {
+  const list = (links ?? []).filter((l) => l.href);
+
+  if (list.length === 1) {
+    return (
+      <Link href={list[0].href} className={wrapperClassName}>
+        {children}
+      </Link>
+    );
+  }
+
+  if (list.length > 1) {
+    return (
+      <>
+        {children}
+        <div className="flex flex-wrap gap-4 mt-4">
+          {list.map((link, i) => (
+            <Link key={i} href={link.href} className="text-sm font-medium underline underline-offset-2 hover:opacity-70">
+              {link.label || link.href}
+            </Link>
+          ))}
+        </div>
+      </>
+    );
+  }
+
+  return children;
+}

package/template/apps/web/components/renderer/sections/Countdown.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "./Button";
+import type { SectionProps } from "./types";
+
+function getTimeLeft(targetDate: string) {
+  const diff = new Date(targetDate).getTime() - Date.now();
+  if (diff <= 0) return null;
+  return {
+    days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+    hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
+    minutes: Math.floor((diff / (1000 * 60)) % 60),
+    seconds: Math.floor((diff / 1000) % 60),
+  };
+}
+
+export function Countdown({ node }: SectionProps) {
+  const { heading, targetDate, expiredText, buttonText, buttonHref } = node.props as Record<string, string>;
+  const [timeLeft, setTimeLeft] = useState<ReturnType<typeof getTimeLeft>>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    if (!targetDate) return;
+    setTimeLeft(getTimeLeft(targetDate));
+    const id = setInterval(() => setTimeLeft(getTimeLeft(targetDate)), 1000);
+    return () => clearInterval(id);
+  }, [targetDate]);
+
+  const units = timeLeft
+    ? [
+        { value: timeLeft.days, label: "Days" },
+        { value: timeLeft.hours, label: "Hours" },
+        { value: timeLeft.minutes, label: "Minutes" },
+        { value: timeLeft.seconds, label: "Seconds" },
+      ]
+    : [];
+
+  return (
+    <div className="flex flex-col items-center gap-6">
+      {heading && <h2 className="text-2xl md:text-3xl font-bold">{heading}</h2>}
+      {/* Avoid an SSR/CSR mismatch on the live countdown digits — render nothing on the
+          server, then the real countdown once mounted client-side. */}
+      {mounted && (
+        <>
+          {timeLeft ? (
+            <div className="flex flex-wrap items-center justify-center gap-4">
+              {units.map((unit) => (
+                <div
+                  key={unit.label}
+                  className="flex flex-col items-center justify-center bg-white/10 rounded-lg px-5 py-4 min-w-[84px]"
+                >
+                  <span className="text-3xl md:text-4xl font-bold tabular-nums">
+                    {String(unit.value).padStart(2, "0")}
+                  </span>
+                  <span className="text-xs uppercase tracking-wide opacity-75 mt-1">{unit.label}</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-lg opacity-90">{expiredText}</p>
+          )}
+        </>
+      )}
+      {buttonText && <Button text={buttonText} href={buttonHref || "#"} variant="primary" />}
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/Cta.tsx

@@ -0,0 +1,15 @@
+import { Button } from "./Button";
+import type { SectionProps } from "./types";
+
+export function Cta({ node, children }: SectionProps) {
+  const { heading, subheading, buttonText, buttonHref } = node.props as Record<string, string>;
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      {heading && <h2 className="text-3xl font-bold">{heading}</h2>}
+      {subheading && <p className="text-lg opacity-90">{subheading}</p>}
+      {buttonText && <Button text={buttonText} href={buttonHref || "#"} variant="secondary" />}
+      {children && <div className="w-full">{children}</div>}
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/Divider.tsx

@@ -0,0 +1,26 @@
+import type { CSSProperties } from "react";
+import type { SectionProps } from "./types";
+
+export function Divider({ node }: SectionProps) {
+  const lineStyle = (node.props.lineStyle as string) || "solid";
+  const thickness = (node.props.thickness as string) || "1px";
+  const color = (node.props.color as string) || "#e2e8f0";
+  const width = (node.props.width as string) || "100%";
+
+  return (
+    <div className="flex justify-center">
+      <hr
+        style={
+          {
+            width,
+            border: "none",
+            borderTopWidth: thickness,
+            borderTopStyle: lineStyle,
+            borderTopColor: color,
+            margin: 0,
+          } as CSSProperties
+        }
+      />
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/EmbedBlock.tsx

@@ -0,0 +1,43 @@
+import type { SectionProps } from "./types";
+
+export function EmbedBlock({ node }: SectionProps) {
+  const mode = (node.props.mode as string) || "iframe";
+  const url = (node.props.url as string) ?? "";
+  const html = (node.props.html as string) ?? "";
+  const height = (node.props.height as string) || "400px";
+  const title = (node.props.title as string) || "Embedded content";
+
+  if (mode === "html" && html) {
+    return (
+      <div
+        className="w-full overflow-auto"
+        style={{ minHeight: height }}
+        // Sandboxed custom HTML — scripts run in an isolated iframe-like context via srcdoc
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    );
+  }
+
+  if (!url) {
+    return (
+      <div
+        className="flex items-center justify-center bg-slate-100 text-slate-400 text-sm rounded-lg"
+        style={{ height }}
+      >
+        No embed URL configured
+      </div>
+    );
+  }
+
+  return (
+    <iframe
+      src={url}
+      title={title}
+      className="w-full border-0 rounded-lg"
+      style={{ height }}
+      loading="lazy"
+      sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+      referrerPolicy="no-referrer-when-downgrade"
+    />
+  );
+}