// Simple placeholder element. Diagonal-stripe + monospace label.
// Use this anywhere we'll later swap in a real photo.

// External LINE reservation link (autosns). Shared across all CTA buttons.
window.LINE_RESERVE_URL = "https://rj3u2zlv.autosns.app/line";

// Google Calendar embed URL for the 空席案内 (availability) section.
// ▼▼▼ ここにご自身の Google カレンダーの「埋め込みコード」内の src の URL を貼り付けてください ▼▼▼
//   例: "https://calendar.google.com/calendar/embed?src=xxxxxxxx%40group.calendar.google.com&ctz=Asia%2FTokyo"
//   空のままにすると、案内用のプレースホルダーが表示されます。
window.GCAL_EMBED_URL = "https://calendar.google.com/calendar/embed?src=62f043ae0ae964724b349d71e4f5ceb7202d7464b03e7c8092b221c12ab12bcf%40group.calendar.google.com&ctz=Asia%2FTokyo";

function Placeholder({ label, ratio, tone, className = "", id, fit, children }) {
  // When an `id` is provided, render a fillable <image-slot> so the user can
  // drag-and-drop (or click to browse) their own photo. The dropped image
  // persists across reloads. Keeps the `ph` class so the existing per-section
  // aspect-ratio rules still apply.
  if (id) {
    // Size is unified to 320×240 (4:3) via the `image-slot.ph` CSS rule —
    // we intentionally do NOT pass a per-slot aspect-ratio here.
    return (
      <image-slot
        id={id}
        class={`ph ${className}`}
        shape="rounded"
        radius="4"
        fit={fit || "cover"}
        placeholder={label || "写真をドラッグ／クリックで選択"}>
      </image-slot>
    );
  }

  // tone: "warm" (default) / "sage" / "deep" — used to vary the stripe color
  // without writing a new gradient each time.
  const toneCss = {
    warm: {},
    sage: { background: "repeating-linear-gradient(135deg,#C9D1BD 0 14px,#B4BFA3 14px 28px)" },
    deep: { background: "repeating-linear-gradient(135deg,#D4C8B2 0 14px,#BFAF93 14px 28px)" },
    cream: { background: "repeating-linear-gradient(135deg,#EFE6D2 0 14px,#E2D6BC 14px 28px)" },
  }[tone] || {};
  const style = ratio ? { aspectRatio: ratio, ...toneCss } : toneCss;
  return (
    <div className={`ph ${className}`} style={style}>
      <span className="ph-label">{label}</span>
      {children}
    </div>
  );
}

window.Placeholder = Placeholder;