// Lumen physical product — framed scale model with glowing amber route
function LumenFrame({ accent = "#e9a54a" }) {
  // Frame: matte black with brushed metal inner bezel
  // Inside: top-down view of city blocks (subtle), with a glowing route
  const W = 460, H = 360;
  const pad = 28;
  const innerX = pad, innerY = pad;
  const innerW = W - pad * 2, innerH = H - pad * 2;

  // generate small blocks in a grid (top-down)
  const cols = 14, rows = 11;
  const cellW = innerW / cols;
  const cellH = innerH / rows;

  const heightFor = (x, y) => {
    const s = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
    return s - Math.floor(s);
  };

  const blocks = [];
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      const r = heightFor(x, y);
      if (r > 0.15) {
        const bw = cellW * (0.55 + r * 0.35);
        const bh = cellH * (0.55 + heightFor(x + 7, y + 3) * 0.35);
        blocks.push({
          x: innerX + x * cellW + (cellW - bw) / 2,
          y: innerY + y * cellH + (cellH - bh) / 2,
          w: bw,
          h: bh,
          shade: 0.08 + r * 0.12,
        });
      }
    }
  }

  // route path through specific cells (centers of cells)
  const routeCells = [
    [2, 8], [3, 8], [4, 8], [4, 7], [4, 6], [5, 6], [6, 6], [7, 6],
    [7, 5], [7, 4], [8, 4], [9, 4], [10, 4], [10, 3], [10, 2],
  ];
  const routeD = routeCells.map(([cx, cy], i) => {
    const px = innerX + cx * cellW + cellW / 2;
    const py = innerY + cy * cellH + cellH / 2;
    return `${i === 0 ? "M" : "L"}${px.toFixed(1)},${py.toFixed(1)}`;
  }).join(" ");

  // memory marker (start of route — a heart-ish small dot)
  const [mx, my] = [innerX + 2 * cellW + cellW / 2, innerY + 8 * cellH + cellH / 2];

  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: "100%", maxHeight: 380 }}>
      <defs>
        <linearGradient id="lf-frame" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#2a2622" />
          <stop offset="50%" stopColor="#1a1612" />
          <stop offset="100%" stopColor="#0c0a08" />
        </linearGradient>
        <linearGradient id="lf-bezel" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#3a342c" />
          <stop offset="50%" stopColor="#1c1814" />
          <stop offset="100%" stopColor="#3a342c" />
        </linearGradient>
        <radialGradient id="lf-amber-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={accent} stopOpacity="0.55" />
          <stop offset="100%" stopColor={accent} stopOpacity="0" />
        </radialGradient>
        <filter id="lf-glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2.5" result="b" />
          <feMerge>
            <feMergeNode in="b" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
        <filter id="lf-glow-soft" x="-100%" y="-100%" width="300%" height="300%">
          <feGaussianBlur stdDeviation="10" />
        </filter>
        <pattern id="lf-brushed" x="0" y="0" width="2" height="2" patternUnits="userSpaceOnUse">
          <rect width="2" height="2" fill="#2a2622" />
          <line x1="0" y1="0" x2="2" y2="0" stroke="#3a342c" strokeWidth="0.4" />
        </pattern>
      </defs>

      {/* outer frame */}
      <rect x="0" y="0" width={W} height={H} fill="url(#lf-frame)" />
      <rect x="4" y="4" width={W - 8} height={H - 8} fill="none" stroke="#000" strokeWidth="0.5" opacity="0.6" />

      {/* inner bezel — brushed metal */}
      <rect x={pad - 8} y={pad - 8} width={innerW + 16} height={innerH + 16} fill="url(#lf-brushed)" />
      <rect x={pad - 8} y={pad - 8} width={innerW + 16} height={innerH + 16} fill="none" stroke="#000" strokeWidth="0.5" />

      {/* inset model area (matte black) */}
      <rect x={innerX} y={innerY} width={innerW} height={innerH} fill="#06060a" />
      <rect x={innerX} y={innerY} width={innerW} height={innerH} fill="none" stroke="#1a1a1e" strokeWidth="0.5" />

      {/* faint street grid inside model */}
      <g stroke="#14141a" strokeWidth="0.3" opacity="0.7">
        {Array.from({ length: cols + 1 }).map((_, i) => (
          <line key={`gv${i}`} x1={innerX + i * cellW} y1={innerY} x2={innerX + i * cellW} y2={innerY + innerH} />
        ))}
        {Array.from({ length: rows + 1 }).map((_, i) => (
          <line key={`gh${i}`} x1={innerX} y1={innerY + i * cellH} x2={innerX + innerW} y2={innerY + i * cellH} />
        ))}
      </g>

      {/* tiny blocks (the city), with subtle drop shadow */}
      <g>
        {blocks.map((b, i) => (
          <g key={i}>
            <rect x={b.x + 0.6} y={b.y + 0.8} width={b.w} height={b.h} fill="#000" opacity="0.6" />
            <rect x={b.x} y={b.y} width={b.w} height={b.h} fill={`rgba(255,255,255,${b.shade})`} />
            <rect x={b.x} y={b.y} width={b.w} height={b.h * 0.35} fill={`rgba(255,255,255,${b.shade * 1.4})`} />
          </g>
        ))}
      </g>

      {/* amber soft glow under route */}
      <g filter="url(#lf-glow-soft)" opacity="0.9">
        <path d={routeD} stroke={accent} strokeWidth="22" fill="none" strokeLinecap="round" strokeLinejoin="round" opacity="0.5" />
      </g>

      {/* the glowing route */}
      <g filter="url(#lf-glow)">
        <path d={routeD} stroke={accent} strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round">
          <animate attributeName="opacity" from="0.85" to="1" dur="2.2s" repeatCount="indefinite" />
        </path>
        <path d={routeD} stroke="#fff8e8" strokeWidth="0.7" fill="none" strokeLinecap="round" strokeLinejoin="round" opacity="0.85" />
      </g>

      {/* memory marker — pulsing dot at route start */}
      <g filter="url(#lf-glow)">
        <circle cx={mx} cy={my} r="3" fill="#fff" />
        <circle cx={mx} cy={my} r="6" fill="none" stroke={accent} strokeWidth="1" opacity="0.7">
          <animate attributeName="r" from="3" to="14" dur="2.2s" repeatCount="indefinite" />
          <animate attributeName="opacity" from="0.9" to="0" dur="2.2s" repeatCount="indefinite" />
        </circle>
      </g>

      {/* engraved nameplate at bottom of frame */}
      <g>
        <rect x={W / 2 - 80} y={H - 22} width="160" height="14" fill="none" />
        <text x={W / 2} y={H - 11} textAnchor="middle" fontFamily="Geist, sans-serif" fontSize="7" letterSpacing="0.32em" fill="#7a6f5e">
          ROTTERDAM · 51.9244° N
        </text>
      </g>

      {/* subtle highlight on top edge of frame */}
      <rect x="4" y="4" width={W - 8} height="1.5" fill="rgba(255,255,255,0.06)" />
    </svg>
  );
}
window.LumenFrame = LumenFrame;