// Reusable components for Stoneglass

// ───────────────────────────── BookCard ─────────────────────────────
// Editorial book-cover placeholder. Renders an aged paper rectangle
// with the title typeset on it; tasteful, not trying to copy the real cover.
const BookCard = ({ title, author, year, tag, variant = "ink", tilt = 0, w = 240 }) => {
  const h = Math.round(w * 1.5);

  const palettes = {
    ink:   { bg: "#1f1a16", fg: "#e7d9bb", rule: "#a89576" },
    leaf:  { bg: "#1e2a23", fg: "#dfe6d3", rule: "#9bb19b" },
    rust:  { bg: "#5a2a1f", fg: "#f0e1c8", rule: "#d8b482" },
    bone:  { bg: "#e9dfc8", fg: "#1a1612", rule: "#7a3b2e" },
  };
  const p = palettes[variant] || palettes.ink;

  return (
    <div
      className="bookcard"
      style={{
        width: w,
        height: h,
        background: p.bg,
        color: p.fg,
        boxShadow:
          "0 1px 0 rgba(0,0,0,0.05), 0 22px 38px -20px rgba(0,0,0,0.45), 0 8px 16px -8px rgba(0,0,0,0.3)",
        transform: `rotate(${tilt}deg)`,
        padding: "26px 22px 22px",
        display: "flex",
        flexDirection: "column",
        position: "relative",
        fontFamily: "var(--font-display)",
        transition: "transform 0.4s ease",
        flexShrink: 0,
      }}
    >
      {/* Top rule */}
      <div style={{ borderTop: `1px solid ${p.rule}`, paddingTop: 10 }}>
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 9,
            letterSpacing: "0.22em",
            textTransform: "uppercase",
            color: p.rule,
            opacity: 0.85,
          }}
        >
          {tag || "Stoneglass Editions"}
        </div>
      </div>

      {/* Title */}
      <div style={{ marginTop: "auto", marginBottom: "auto", textAlign: "center" }}>
        <div
          style={{
            fontSize: w * 0.135,
            fontWeight: 500,
            lineHeight: 1.05,
            letterSpacing: "-0.01em",
            fontStyle: "italic",
          }}
        >
          {title}
        </div>
        <div
          style={{
            marginTop: 14,
            height: 1,
            width: 28,
            background: p.rule,
            marginLeft: "auto",
            marginRight: "auto",
            opacity: 0.7,
          }}
        />
        <div
          style={{
            marginTop: 12,
            fontSize: 12,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            fontFamily: "var(--font-body)",
            fontWeight: 400,
            opacity: 0.85,
          }}
        >
          {author}
        </div>
      </div>

      {/* Footer */}
      <div
        style={{
          borderTop: `1px solid ${p.rule}`,
          paddingTop: 8,
          display: "flex",
          justifyContent: "space-between",
          fontFamily: "var(--font-mono)",
          fontSize: 9,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: p.rule,
          opacity: 0.85,
        }}
      >
        <span>№ {year}</span>
        <span>Restored</span>
      </div>

      {/* Subtle vignette */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          pointerEvents: "none",
          background:
            "radial-gradient(circle at 30% 20%, rgba(255,255,255,0.04), transparent 60%), radial-gradient(circle at 80% 90%, rgba(0,0,0,0.18), transparent 60%)",
        }}
      />
    </div>
  );
};

// ───────────────────────────── MapPlate ─────────────────────────────
// Antiquarian-style map fragment. Built from simple grid lines + dots.
const MapPlate = ({ city, year, w = 340, h = 260, tone = "sepia" }) => {
  const tones = {
    sepia: { bg: "#e8dcc0", line: "#6b4f33", strong: "#3a2a1c", accent: "#7a3b2e" },
    ink:   { bg: "#1c1814", line: "#7a6a52", strong: "#e7d9bb", accent: "#c4a576" },
    olive: { bg: "#d8d4bf", line: "#4a5240", strong: "#1f2a1a", accent: "#5a6a3a" },
  };
  const t = tones[tone] || tones.sepia;

  // Pseudo-random but seed-stable layout per city name
  const seed = (city || "x").split("").reduce((a, c) => a + c.charCodeAt(0), 0);
  const rand = (i) => {
    const x = Math.sin(seed * 9301 + i * 49297) * 233280;
    return x - Math.floor(x);
  };

  // Build a grid of "streets" as diagonals/horizontals
  const lines = [];
  // horizontals
  for (let i = 1; i < 12; i++) {
    const y = (h / 12) * i + (rand(i) - 0.5) * 6;
    lines.push(<line key={`h${i}`} x1="0" y1={y} x2={w} y2={y} stroke={t.line} strokeWidth="0.6" opacity="0.55" />);
  }
  // verticals
  for (let i = 1; i < 14; i++) {
    const x = (w / 14) * i + (rand(i + 50) - 0.5) * 6;
    lines.push(<line key={`v${i}`} x1={x} y1="0" x2={x} y2={h} stroke={t.line} strokeWidth="0.6" opacity="0.55" />);
  }
  // diagonals (a few "avenues")
  for (let i = 0; i < 3; i++) {
    const offset = rand(i + 100) * w;
    lines.push(<line key={`d${i}`} x1={offset} y1="0" x2={offset + h * 0.6} y2={h} stroke={t.strong} strokeWidth="0.9" opacity="0.7" />);
  }

  // a "river" as a thicker curve
  const ry1 = rand(7) * h * 0.4;
  const ry2 = h * 0.6 + rand(8) * h * 0.3;
  const riverPath = `M -10 ${ry1} C ${w * 0.3} ${ry1 + 30}, ${w * 0.6} ${ry2 - 50}, ${w + 10} ${ry2}`;

  // dots for "blocks" / landmarks
  const dots = [];
  for (let i = 0; i < 14; i++) {
    const cx = rand(i + 200) * w;
    const cy = rand(i + 300) * h;
    dots.push(<circle key={`dot${i}`} cx={cx} cy={cy} r={1.2} fill={t.strong} opacity="0.55" />);
  }

  return (
    <div
      className="mapplate"
      style={{
        width: w,
        height: h,
        background: t.bg,
        position: "relative",
        overflow: "hidden",
        boxShadow:
          "0 1px 0 rgba(0,0,0,0.06), 0 24px 40px -22px rgba(0,0,0,0.4), 0 8px 16px -10px rgba(0,0,0,0.25)",
        flexShrink: 0,
      }}
    >
      <svg viewBox={`0 0 ${w} ${h}`} style={{ position: "absolute", inset: 0 }}>
        {/* compass tick marks around edge */}
        <g opacity="0.4">
          {[...Array(40)].map((_, i) => {
            const x = (w / 40) * i;
            return <line key={`tt${i}`} x1={x} y1="0" x2={x} y2={i % 5 === 0 ? 8 : 4} stroke={t.line} strokeWidth="0.5" />;
          })}
        </g>
        {lines}
        <path d={riverPath} stroke={t.accent} strokeWidth="3" fill="none" opacity="0.85" />
        <path d={riverPath} stroke={t.bg} strokeWidth="1" fill="none" opacity="0.9" />
        {dots}
        {/* compass rose, simple */}
        <g transform={`translate(${w - 38} ${h - 38})`} opacity="0.8">
          <circle r="14" fill="none" stroke={t.strong} strokeWidth="0.6" />
          <line x1="0" y1="-14" x2="0" y2="14" stroke={t.strong} strokeWidth="0.6" />
          <line x1="-14" y1="0" x2="14" y2="0" stroke={t.strong} strokeWidth="0.6" />
          <polygon points="0,-14 -3,0 0,4 3,0" fill={t.strong} />
          <text x="0" y="-18" fontSize="7" fontFamily="serif" fill={t.strong} textAnchor="middle">N</text>
        </g>
      </svg>

      {/* Cartouche */}
      <div
        style={{
          position: "absolute",
          left: 16,
          bottom: 16,
          padding: "10px 14px",
          background: t.bg,
          border: `1px solid ${t.line}`,
          fontFamily: "var(--font-display)",
        }}
      >
        <div style={{ fontStyle: "italic", fontSize: 22, color: t.strong, lineHeight: 1 }}>{city}</div>
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 9,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: t.strong,
            opacity: 0.75,
            marginTop: 4,
          }}
        >
          Plate № {year}
        </div>
      </div>

      {/* paper aging overlay */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          pointerEvents: "none",
          background:
            "radial-gradient(circle at 80% 20%, rgba(120,80,40,0.15), transparent 60%), radial-gradient(circle at 10% 90%, rgba(60,40,20,0.18), transparent 55%)",
        }}
      />
    </div>
  );
};

// ───────────────────────────── Marker (initialed S) ─────────────────────────────
const Monogram = ({ size = 36, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" style={{ display: "block" }}>
    <circle cx="20" cy="20" r="19" fill="none" stroke={color} strokeWidth="0.8" opacity="0.6" />
    <text
      x="20"
      y="27"
      textAnchor="middle"
      fontFamily="Cormorant Garamond, serif"
      fontStyle="italic"
      fontWeight="500"
      fontSize="22"
      fill={color}
    >
      S
    </text>
  </svg>
);

Object.assign(window, { BookCard, MapPlate, Monogram });