// Crown Heights "compass" — a concentric-rings walkability map.
// 770 anchors the center; rings at 1, 5, 10, 15 minutes show how
// genuinely walkable the neighborhood is. Dyra homes + the spots
// guests actually use (shuls, mikvaos, markets, food, transit) are
// placed by walking minute and bearing. Editorial type, no fake
// satellite imagery — just honest geometry and clear hierarchy.

function CrownHeightsLedger({ p, serif, hebFont }) {
  const paper = p.card || '#f5efe3';
  const line = p.line || '#d9cfba';
  const ink = p.ink || '#2a241c';
  const muted = p.muted || '#6b5e47';
  const accent = p.accent || '#b8532a';

  // Map geometry — 4 concentric rings around 770.
  // angle is in degrees (0 = east, 90 = north / up, 180 = west, 270 = south)
  // r is "minutes from 770" — used both as ring distance AND label.
  // Bearings roughly mirror real Crown Heights geography but the goal is
  // legibility, not GPS accuracy.
  const dyraHomes = [
    { name: 'The 770',         sub: '4BR · across from 770', r: 0.6, a: 75,  m: 1 },
    { name: 'Empire Suite',    sub: '3BR · Empire Blvd',     r: 4.2, a: 240, m: 4 },
    { name: 'Kingston House',  sub: '2BR · Kingston Ave',    r: 3.6, a: 195, m: 4 },
    { name: 'President Pl',    sub: '3BR · simcha-ready',    r: 5.4, a: 145, m: 5 },
    { name: 'Crown Studio',    sub: '1BR · for couples',     r: 2.8, a: 35,  m: 3 },
    { name: 'Brooklyn Ave',    sub: '4BR · family wing',     r: 6.4, a: 290, m: 6 },
  ];

  const spots = [
    // Anchor institutions (close in)
    { name: '770',                  cat: 'shul',    r: 0,    a: 0,    m: 0  },
    { name: 'Oholei Torah',         cat: 'school',  r: 1.4,  a: 130,  m: 1  },
    { name: 'Mikvah Mei Menachem',  cat: 'mikvah',  r: 3.5,  a: 100,  m: 4  },
    { name: 'Mikvah Chaya Mushka',  cat: 'mikvah',  r: 4.2,  a: 60,   m: 5  },
    { name: "Kahan's Bakery",       cat: 'food',    r: 2.6,  a: 220,  m: 3  },
    { name: 'Chadash Pizza',        cat: 'food',    r: 2.8,  a: 25,   m: 3  },
    { name: "Izzy's Smokehouse",    cat: 'food',    r: 3.0,  a: 320,  m: 3  },
    { name: 'Kol Tuv Groceries',    cat: 'market',  r: 4.0,  a: 200,  m: 4  },
    { name: 'Empire Kosher',        cat: 'market',  r: 4.6,  a: 250,  m: 5  },
    { name: "Raskin's Fish",        cat: 'market',  r: 4.7,  a: 165,  m: 5  },
    // Mid ring
    { name: 'Cong. Lubavitch',      cat: 'shul',    r: 1.2,  a: 105,  m: 1  },
    { name: 'Beth Rivkah',          cat: 'school',  r: 5.6,  a: 50,   m: 6  },
    { name: 'Bobover Shteible',     cat: 'shul',    r: 5.5,  a: 285,  m: 6  },
    { name: 'Crown Heights Wine',   cat: 'market',  r: 4.8,  a: 305,  m: 5  },
    { name: 'Kingston Ave (3)',     cat: 'transit', r: 4.5,  a: 175,  m: 5  },
    { name: 'Brower Park',          cat: 'park',    r: 6.5,  a: 340,  m: 7  },
    // Outer ring
    { name: 'Empire Shteible',      cat: 'shul',    r: 7.6,  a: 215,  m: 8  },
    { name: "Albert's Bakery",      cat: 'food',    r: 8.4,  a: 350,  m: 9  },
    { name: 'Lincoln Terrace Park', cat: 'park',    r: 8.6,  a: 15,   m: 9  },
    { name: 'Kingston–Throop (A/C)',cat: 'transit', r: 11.5, a: 270,  m: 12 },
    { name: 'Grand Army Plaza',     cat: 'transit', r: 13.2, a: 165,  m: 14 },
  ];

  const catStyle = {
    shul:    { stroke: accent, fill: accent,    label: 'Shul' },
    mikvah:  { stroke: '#6f8a5a', fill: '#6f8a5a', label: 'Mikvah' },
    school:  { stroke: '#8a6a3d', fill: '#8a6a3d', label: 'School' },
    market:  { stroke: '#3d6e8a', fill: '#3d6e8a', label: 'Market' },
    food:    { stroke: '#c08a3d', fill: '#c08a3d', label: 'Food' },
    transit: { stroke: '#6b5e47', fill: '#6b5e47', label: 'Transit' },
    park:    { stroke: '#5a7a4a', fill: '#5a7a4a', label: 'Park' },
  };

  // SVG geometry — the chart is 720×720, 770 is at the origin (centered).
  // We use minutes-from-770 directly as polar radius (px = minutes × 24),
  // so a 15-min ring sits at r=360px. That fills the frame with breathing room.
  const PX_PER_MIN = 22;
  const rings = [1, 5, 10, 15];
  const polar = (r, a) => {
    const rad = (a * Math.PI) / 180;
    return { x: r * PX_PER_MIN * Math.cos(rad), y: -r * PX_PER_MIN * Math.sin(rad) };
  };

  return (
    <div style={{
      position: 'relative',
      background: paper,
      border: `1px solid ${line}`,
      borderRadius: 12,
      overflow: 'hidden',
    }}>
      {/* Header band */}
      <div style={{
        padding: '32px 48px 24px',
        borderBottom: `1px solid ${line}`,
        display: 'grid',
        gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'end',
        gap: 32,
      }}>
        <div>
          <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted, marginBottom: 6 }}>
            The Neighborhood
          </div>
          <div style={{ fontFamily: serif, fontSize: 34, lineHeight: 1.05, fontWeight: 400, color: ink, letterSpacing: '-0.02em' }}>
            Everything within<br/>walking distance.
          </div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: serif, fontStyle: 'italic', fontSize: 18, color: ink, lineHeight: 1.4, maxWidth: 360 }}>
            Crown Heights is small on purpose. Every Dyra home, every shul, every mikvah, every market — measured honestly, in minutes on foot.
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 10, letterSpacing: '0.18em', color: muted, marginBottom: 4 }}>
            FIG. 01 · DYRA HOMES + KEY SPOTS
          </div>
          <div style={{ fontFamily: hebFont, fontSize: 18, color: accent, direction: 'rtl' }}>
            הכל ברגל
          </div>
        </div>
      </div>

      {/* Body — chart on left, legend/key on right */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 280px',
        gap: 0,
      }}>
        {/* The chart */}
        <div style={{
          padding: '32px 24px',
          borderRight: `1px solid ${line}`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <svg viewBox="-380 -380 760 760" style={{ width: '100%', maxWidth: 720, height: 'auto', display: 'block' }}>
            <defs>
              {/* Subtle paper-warmth radial behind the rings */}
              <radialGradient id="dyra-compass-bg" cx="0" cy="0" r="0.6">
                <stop offset="0%" stopColor={accent} stopOpacity="0.06"/>
                <stop offset="80%" stopColor={accent} stopOpacity="0"/>
              </radialGradient>
            </defs>
            <circle cx="0" cy="0" r="360" fill="url(#dyra-compass-bg)"/>

            {/* Compass cardinals — N E S W as faint type */}
            {[
              { x: 0,    y: -350, t: 'N' },
              { x: 350,  y: 4,    t: 'E' },
              { x: 0,    y: 358,  t: 'S' },
              { x: -350, y: 4,    t: 'W' },
            ].map(c => (
              <text key={c.t} x={c.x} y={c.y} textAnchor="middle"
                fontFamily="ui-monospace, Menlo, monospace" fontSize="11" fill={muted}
                letterSpacing="0.18em" opacity="0.7">{c.t}</text>
            ))}

            {/* Rings — 1, 5, 10, 15 min */}
            {rings.map(r => (
              <g key={r}>
                <circle cx="0" cy="0" r={r * PX_PER_MIN}
                  fill="none" stroke={line}
                  strokeWidth="1"
                  strokeDasharray={r === 15 ? '0' : '3 5'}/>
                {/* Ring label — top */}
                <text x="0" y={-r * PX_PER_MIN + 4} textAnchor="middle"
                  fontFamily="ui-monospace, Menlo, monospace" fontSize="9.5"
                  fill={muted} letterSpacing="0.16em"
                  style={{ paintOrder: 'stroke', stroke: paper, strokeWidth: 4, strokeLinejoin: 'round' }}>
                  {r} MIN
                </text>
              </g>
            ))}

            {/* Cross-hair through 770 */}
            <line x1="-360" y1="0" x2="360" y2="0" stroke={line} strokeWidth="0.5" strokeDasharray="2 4" opacity="0.6"/>
            <line x1="0" y1="-360" x2="0" y2="360" stroke={line} strokeWidth="0.5" strokeDasharray="2 4" opacity="0.6"/>

            {/* Spots — small dots */}
            {spots.filter(s => s.r > 0).map((s, i) => {
              const { x, y } = polar(s.r, s.a);
              const cs = catStyle[s.cat];
              // Stagger label position so they don't collide with the dot
              const labelOffset = s.r < 5 ? 9 : 11;
              const labelAnchor = x > 8 ? 'start' : x < -8 ? 'end' : 'middle';
              const labelY = y + (y < -5 ? -6 : y > 5 ? 14 : 4);
              const labelX = x + (labelAnchor === 'start' ? labelOffset : labelAnchor === 'end' ? -labelOffset : 0);
              return (
                <g key={i}>
                  <circle cx={x} cy={y} r="3.4" fill={cs.fill} stroke={paper} strokeWidth="1.5"/>
                  <text x={labelX} y={labelY} textAnchor={labelAnchor}
                    fontFamily={serif} fontSize="11.5" fill={ink}
                    style={{ paintOrder: 'stroke', stroke: paper, strokeWidth: 3.5, strokeLinejoin: 'round' }}>
                    {s.name}
                  </text>
                </g>
              );
            })}

            {/* Dyra homes — distinct: filled square with serif name */}
            {dyraHomes.map((h, i) => {
              const { x, y } = polar(h.r, h.a);
              const labelAnchor = x > 8 ? 'start' : x < -8 ? 'end' : 'middle';
              const labelOffset = 14;
              const labelX = x + (labelAnchor === 'start' ? labelOffset : labelAnchor === 'end' ? -labelOffset : 0);
              return (
                <g key={i}>
                  {/* Halo — soft accent ring around home markers */}
                  <circle cx={x} cy={y} r="11" fill={accent} opacity="0.12"/>
                  <rect x={x - 5} y={y - 5} width="10" height="10"
                    fill={paper} stroke={accent} strokeWidth="2"
                    transform={`rotate(45 ${x} ${y})`}/>
                  <text x={labelX} y={y + 4} textAnchor={labelAnchor}
                    fontFamily={serif} fontSize="13" fontWeight="500" fill={ink} fontStyle="italic"
                    style={{ paintOrder: 'stroke', stroke: paper, strokeWidth: 4, strokeLinejoin: 'round' }}>
                    {h.name}
                  </text>
                  <text x={labelX} y={y + 18} textAnchor={labelAnchor}
                    fontFamily="ui-monospace, Menlo, monospace" fontSize="8.5" fill={muted}
                    letterSpacing="0.12em"
                    style={{ paintOrder: 'stroke', stroke: paper, strokeWidth: 3, strokeLinejoin: 'round' }}>
                    {h.m} MIN · {h.sub.split(' · ')[0].toUpperCase()}
                  </text>
                </g>
              );
            })}

            {/* 770 anchor — last so it's on top */}
            <g>
              <circle cx="0" cy="0" r="22" fill={accent}/>
              <circle cx="0" cy="0" r="22" fill="none" stroke={paper} strokeWidth="2"/>
              <text x="0" y="5" textAnchor="middle"
                fontFamily={serif} fontSize="16" fontWeight="500" fill={paper} letterSpacing="-0.02em">770</text>
            </g>
          </svg>
        </div>

        {/* Legend / key */}
        <div style={{ padding: '32px 28px', display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: muted, marginBottom: 12 }}>
              On the map
            </div>

            {/* 770 */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: `1px solid ${line}` }}>
              <div style={{
                width: 28, height: 28, borderRadius: 999, background: accent, color: paper,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: serif, fontSize: 11, fontWeight: 500, flexShrink: 0,
              }}>770</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontFamily: serif, fontSize: 15, color: ink, lineHeight: 1.2 }}>Beis Chayeinu</div>
                <div style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 9, color: muted, letterSpacing: '0.14em', marginTop: 2 }}>
                  THE ANCHOR · ALL DISTANCES FROM HERE
                </div>
              </div>
            </div>

            {/* Dyra homes */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: `1px solid ${line}` }}>
              <div style={{ width: 28, display: 'flex', justifyContent: 'center', flexShrink: 0 }}>
                <div style={{
                  width: 12, height: 12, transform: 'rotate(45deg)',
                  background: paper, border: `2px solid ${accent}`,
                }}/>
              </div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontFamily: serif, fontSize: 15, fontStyle: 'italic', color: ink, lineHeight: 1.2 }}>
                  Dyra homes <span style={{ color: muted, fontStyle: 'normal', fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11 }}>· {dyraHomes.length}</span>
                </div>
                <div style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 9, color: muted, letterSpacing: '0.14em', marginTop: 2 }}>
                  ALL WITHIN A 7-MIN WALK
                </div>
              </div>
            </div>

            {/* Categories */}
            {Object.entries(catStyle).map(([k, v]) => (
              <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0', borderBottom: `1px dashed ${line}` }}>
                <div style={{ width: 28, display: 'flex', justifyContent: 'center', flexShrink: 0 }}>
                  <div style={{
                    width: 10, height: 10, borderRadius: 999,
                    background: v.fill, border: `1.5px solid ${paper}`,
                    boxShadow: `0 0 0 1px ${v.stroke}`,
                  }}/>
                </div>
                <div style={{ fontFamily: serif, fontSize: 14, color: ink, flex: 1 }}>{v.label}</div>
                <div style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 10, color: muted }}>
                  {spots.filter(s => s.cat === k && s.r > 0).length}
                </div>
              </div>
            ))}
          </div>

          {/* Stat block */}
          <div style={{
            background: '#fff7e8',
            border: `1px solid ${line}`,
            borderRadius: 8,
            padding: '18px 20px',
          }}>
            <div style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 9.5, letterSpacing: '0.18em', color: accent, marginBottom: 8 }}>
              BY THE NUMBERS
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <LedgerStat n="6" l="Dyra homes" serif={serif} ink={ink} muted={muted}/>
              <LedgerStat n="<7" l="min to 770" serif={serif} ink={ink} muted={muted}/>
              <LedgerStat n="3" l="mikvaos" serif={serif} ink={ink} muted={muted}/>
              <LedgerStat n="11" l="kosher spots" serif={serif} ink={ink} muted={muted}/>
            </div>
          </div>
        </div>
      </div>

      {/* Footer band */}
      <div style={{
        padding: '16px 48px',
        borderTop: `1px solid ${line}`,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        fontSize: 11,
        fontFamily: 'ui-monospace, Menlo, monospace',
        letterSpacing: '0.16em',
        color: muted,
      }}>
        <span>CROWN HEIGHTS · BROOKLYN</span>
        <span style={{ fontFamily: serif, fontStyle: 'italic', fontSize: 13, letterSpacing: 'normal', color: muted, textTransform: 'none' }}>
          Walking minutes measured from 770. Bearings approximate; the warmth is real.
        </span>
        <span>FIG. 01</span>
      </div>
    </div>
  );
}

function LedgerStat({ n, l, serif, ink, muted }) {
  return (
    <div>
      <div style={{ fontFamily: serif, fontSize: 28, fontWeight: 500, color: ink, lineHeight: 1, letterSpacing: '-0.02em' }}>{n}</div>
      <div style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 9, color: muted, letterSpacing: '0.14em', marginTop: 4, textTransform: 'uppercase' }}>{l}</div>
    </div>
  );
}

window.CrownHeightsLedger = CrownHeightsLedger;