// ===========================================================
// Shared SVG icon set — line icons, やさしいテイスト
// ===========================================================
const Icon = ({ name, size = 18, stroke = 1.6, color = "currentColor" }) => {
  const props = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: color,
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round",
  };
  switch (name) {
    case "leaf":
      return (
        <svg {...props}>
          <path d="M4 20c0-9 7-15 16-15-1 9-6 15-15 15Z" />
          <path d="M4 20c4-4 7-7 12-11" />
        </svg>
      );
    case "search":
      return (
        <svg {...props}>
          <circle cx="11" cy="11" r="7" />
          <path d="m20 20-3.5-3.5" />
        </svg>
      );
    case "mail":
      return (
        <svg {...props}>
          <rect x="3" y="5" width="18" height="14" rx="2.5" />
          <path d="m4 7 8 6 8-6" />
        </svg>
      );
    case "menu":
      return (
        <svg {...props}>
          <path d="M4 7h16M4 12h16M4 17h16" />
        </svg>
      );
    case "arrow":
      return (
        <svg {...props}>
          <path d="M5 12h14M13 6l6 6-6 6" />
        </svg>
      );
    case "chevron":
      return (
        <svg {...props}>
          <path d="m9 6 6 6-6 6" />
        </svg>
      );
    case "clock":
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="9" />
          <path d="M12 7v5l3 2" />
        </svg>
      );
    case "calendar":
      return (
        <svg {...props}>
          <rect x="3.5" y="5" width="17" height="15" rx="2" />
          <path d="M3.5 10h17M8 3v4M16 3v4" />
        </svg>
      );
    case "tag":
      return (
        <svg {...props}>
          <path d="M3 12V4h8l10 10-8 8L3 12Z" />
          <circle cx="7.5" cy="7.5" r="1.2" />
        </svg>
      );
    case "heart":
      return (
        <svg {...props}>
          <path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z" />
        </svg>
      );
    case "bookmark":
      return (
        <svg {...props}>
          <path d="M6 3h12v18l-6-4-6 4V3Z" />
        </svg>
      );
    case "twitter":
      return (
        <svg {...props}>
          <path d="M4 4l7 9-7 7h2l6-6 4.5 6H21l-7.5-10L20.5 4H18.5l-5.5 5.5L9 4H4Z" />
        </svg>
      );
    case "ig":
      return (
        <svg {...props}>
          <rect x="3.5" y="3.5" width="17" height="17" rx="4.5" />
          <circle cx="12" cy="12" r="4" />
          <circle cx="17" cy="7" r="0.6" fill={color} />
        </svg>
      );
    case "note":
      return (
        <svg {...props}>
          <rect x="4" y="3" width="16" height="18" rx="2.5" />
          <path d="M8 8h8M8 12h8M8 16h5" />
        </svg>
      );
    case "rss":
      return (
        <svg {...props}>
          <path d="M5 5a14 14 0 0 1 14 14M5 11a8 8 0 0 1 8 8" />
          <circle cx="6" cy="18" r="1.4" fill={color} stroke="none" />
        </svg>
      );
    case "user":
      return (
        <svg {...props}>
          <circle cx="12" cy="8.5" r="4" />
          <path d="M4 20c1.5-3.5 4.5-5.5 8-5.5s6.5 2 8 5.5" />
        </svg>
      );
    case "eye":
      return (
        <svg {...props}>
          <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
          <circle cx="12" cy="12" r="3" />
        </svg>
      );
    case "comment":
      return (
        <svg {...props}>
          <path d="M4 5h16v11H9l-5 4V5Z" />
        </svg>
      );
    case "sparkle":
      return (
        <svg {...props}>
          <path d="M12 4v6M12 14v6M4 12h6M14 12h6" />
        </svg>
      );
    default:
      return null;
  }
};

// ===========================================================
// ImageSlot — drag&drop fillable image (uses <image-slot> WC)
//   Preview: warm gradient + soft "natural light" feel.
// ===========================================================
const TONE_GRADIENTS = {
  // warm window-light feel: top-left highlight, warm green/peach tone
  sage:  "radial-gradient(ellipse at 20% 18%, #ffffffcc 0%, transparent 45%), radial-gradient(ellipse at 78% 92%, #c5d6b8 0%, transparent 55%), linear-gradient(155deg, #e9efe2 0%, #d8e3cc 60%, #b8c9a8 100%)",
  rose:  "radial-gradient(ellipse at 22% 18%, #ffffffd0 0%, transparent 45%), radial-gradient(ellipse at 80% 90%, #d9adad 0%, transparent 55%), linear-gradient(155deg, #f3e0e0 0%, #ebcdcd 60%, #d4a8a8 100%)",
  blue:  "radial-gradient(ellipse at 20% 18%, #ffffffcc 0%, transparent 45%), radial-gradient(ellipse at 80% 92%, #a8bccd 0%, transparent 55%), linear-gradient(155deg, #dde7ee 0%, #c8d6e2 60%, #a4b8c8 100%)",
  cream: "radial-gradient(ellipse at 22% 18%, #ffffffd0 0%, transparent 45%), radial-gradient(ellipse at 80% 90%, #d6c298 0%, transparent 55%), linear-gradient(155deg, #f1ebde 0%, #e3d6b6 60%, #c8b58c 100%)",
  lilac: "radial-gradient(ellipse at 22% 18%, #ffffffd0 0%, transparent 45%), radial-gradient(ellipse at 80% 90%, #b8aac8 0%, transparent 55%), linear-gradient(155deg, #e7e3ee 0%, #d6cee2 60%, #b8aac8 100%)",
};

const Placeholder = ({
  label = "image",
  ratio = "16/10",
  tone = "sage",
  rounded = 14,
  shape,
  id,
  className = "",
  style = {},
}) => {
  const grad = TONE_GRADIENTS[tone] || TONE_GRADIENTS.sage;
  // Random softly-positioned faint dots to simulate bokeh/light particles
  const slotId = id || `slot-${tone}-${(label||"x").replace(/\s+/g,"-").toLowerCase()}`;
  return (
    <image-slot
      id={slotId}
      class={"img-slot " + className}
      placeholder={label}
      shape={shape || (rounded >= 999 ? "circle" : "rounded")}
      radius={rounded >= 999 ? undefined : rounded}
      style={{
        display: "block",
        aspectRatio: ratio,
        width: "100%",
        borderRadius: rounded >= 999 ? "50%" : rounded + "px",
        background: grad,
        position: "relative",
        overflow: "hidden",
        ...style,
      }}
    >
      <span className="img-slot-bokeh" style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background:
          "radial-gradient(circle at 12% 22%, rgba(255,255,255,.55) 0 4px, transparent 5px)," +
          "radial-gradient(circle at 28% 14%, rgba(255,255,255,.4) 0 3px, transparent 4px)," +
          "radial-gradient(circle at 88% 30%, rgba(255,255,255,.35) 0 6px, transparent 8px)," +
          "radial-gradient(circle at 70% 78%, rgba(255,255,255,.3) 0 5px, transparent 7px)",
      }}></span>
      <span className="img-slot-caption" style={{
        position: "absolute", left: 10, bottom: 10,
        fontFamily: "ui-monospace, 'JetBrains Mono', monospace",
        fontSize: 10, letterSpacing: ".06em",
        color: "rgba(255,255,255,.92)",
        background: "rgba(60,72,55,.42)",
        backdropFilter: "blur(2px)",
        padding: "3px 8px", borderRadius: 6,
      }}>
        {label}
      </span>
    </image-slot>
  );
};

// ===========================================================
// Category chip — colored variant
// ===========================================================
const CATEGORY_STYLE = {
  "転職前の準備":    { bg: "#e7efe1", fg: "#557047", dot: "#7ea372" },
  "マインド・不安":  { bg: "#f3e0e0", fg: "#a06b6b", dot: "#c98c8c" },
  "実践編":         { bg: "#dde7ee", fg: "#5d7a93", dot: "#7ea0bf" },
  "面接対策":       { bg: "#ece4d6", fg: "#8a7445", dot: "#b89863" },
  "履歴書":         { bg: "#e7e3ee", fg: "#76699a", dot: "#9588bb" },
  "業界研究":       { bg: "#dfe9e6", fg: "#557570", dot: "#7c9c97" },
};
const Chip = ({ label, size = "sm" }) => {
  const s = CATEGORY_STYLE[label] || CATEGORY_STYLE["転職前の準備"];
  return (
    <span className={"chip chip-" + size} style={{
      background: s.bg, color: s.fg,
    }}>
      <span className="chip-dot" style={{ background: s.dot }}></span>
      {label}
    </span>
  );
};

// ===========================================================
// Article meta (date / read / views)
// ===========================================================
const Meta = ({ date, read, views }) => (
  <div className="meta">
    <span className="meta-item"><Icon name="calendar" size={13} /> {date}</span>
    <span className="meta-dot"></span>
    <span className="meta-item"><Icon name="clock" size={13} /> {read}分で読める</span>
    {views != null && <>
      <span className="meta-dot"></span>
      <span className="meta-item"><Icon name="eye" size={13} /> {views.toLocaleString()}</span>
    </>}
  </div>
);

Object.assign(window, { Icon, Placeholder, Chip, Meta, CATEGORY_STYLE });