/* motifs.jsx — small reusable SVG marks for La Signora */

// ── Maiolica tile background (used both inline and as CSS var) ──
// Geometric 4-fold symmetric tile, simple shapes only.
const TILE_SVG = `
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'>
  <g fill='none' stroke='%23B5482B' stroke-width='1.4'>
    <!-- outer frame -->
    <rect x='6' y='6' width='208' height='208' />
    <!-- diamond -->
    <path d='M110 18 L202 110 L110 202 L18 110 Z' />
    <!-- inner diamond -->
    <path d='M110 46 L174 110 L110 174 L46 110 Z' />
    <!-- small inner square -->
    <rect x='80' y='80' width='60' height='60' transform='rotate(45 110 110)' />
    <!-- corner quarter circles -->
    <path d='M6 6 A36 36 0 0 1 42 42' />
    <path d='M214 6 A36 36 0 0 0 178 42' />
    <path d='M6 214 A36 36 0 0 0 42 178' />
    <path d='M214 214 A36 36 0 0 1 178 178' />
    <!-- cross -->
    <line x1='110' y1='6' x2='110' y2='214' />
    <line x1='6' y1='110' x2='214' y2='110' />
  </g>
  <g fill='%235C6B33'>
    <circle cx='110' cy='110' r='5'/>
    <circle cx='42' cy='42' r='3'/>
    <circle cx='178' cy='42' r='3'/>
    <circle cx='42' cy='178' r='3'/>
    <circle cx='178' cy='178' r='3'/>
  </g>
  <g fill='%23E0A638'>
    <circle cx='110' cy='30' r='3'/>
    <circle cx='110' cy='190' r='3'/>
    <circle cx='30' cy='110' r='3'/>
    <circle cx='190' cy='110' r='3'/>
  </g>
</svg>`;

// Inject tile background as a CSS variable so any element can pick it up
document.documentElement.style.setProperty(
  '--tile-bg',
  `url("data:image/svg+xml;utf8,${TILE_SVG.replace(/\n\s*/g, '')}")`
);

// ── Decorative divider — three diamonds with hairlines ──
function Divider({ style }) {
  return (
    <div className="divider" style={style}>
      <span className="line"></span>
      <svg width="56" height="14" viewBox="0 0 56 14" fill="none" aria-hidden="true">
        <rect x="2.5" y="2.5" width="9" height="9" transform="rotate(45 7 7)" stroke="currentColor" />
        <rect x="22.5" y="1.5" width="11" height="11" transform="rotate(45 28 7)" fill="currentColor" />
        <rect x="44.5" y="2.5" width="9" height="9" transform="rotate(45 49 7)" stroke="currentColor" />
      </svg>
      <span className="line"></span>
    </div>
  );
}

// ── Arancino "stamp" — circular maiolica-style emblem in flavor color ──
// Three palettes for the three flavors.
function ArancinoStamp({ palette }) {
  const [outer, inner, dot] = palette;
  return (
    <svg className="glyph" viewBox="0 0 96 96" fill="none" aria-hidden="true">
      <circle cx="48" cy="48" r="46" fill={outer} opacity="0.12" />
      <circle cx="48" cy="48" r="46" stroke={outer} strokeWidth="1" />
      <circle cx="48" cy="48" r="36" stroke={outer} strokeWidth="1" />
      <path d="M48 14 L82 48 L48 82 L14 48 Z" stroke={inner} strokeWidth="1.2" />
      <path d="M48 26 L70 48 L48 70 L26 48 Z" fill={outer} opacity="0.18" />
      <circle cx="48" cy="48" r="6" fill={dot} />
      <circle cx="48" cy="14" r="2.5" fill={inner} />
      <circle cx="48" cy="82" r="2.5" fill={inner} />
      <circle cx="14" cy="48" r="2.5" fill={inner} />
      <circle cx="82" cy="48" r="2.5" fill={inner} />
    </svg>
  );
}

// ── Lemon icon — circle with a hint of leaf ──
function LemonIcon({ size = 56, color = "var(--saffron)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 56 56" fill="none" aria-hidden="true">
      <ellipse cx="28" cy="32" rx="18" ry="16" fill={color} opacity="0.18" />
      <ellipse cx="28" cy="32" rx="18" ry="16" stroke={color} strokeWidth="1.4" />
      <circle cx="28" cy="32" r="4" fill={color} opacity="0.55" />
      <path d="M28 16 L34 8" stroke="var(--olive)" strokeWidth="1.6" strokeLinecap="round" />
      <ellipse cx="36" cy="10" rx="6" ry="3" fill="var(--olive)" transform="rotate(-25 36 10)" opacity="0.7" />
    </svg>
  );
}

// ── Cone / triangle simple mark ──
function TriangleMark({ size = 24, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M12 3 L21 21 L3 21 Z" stroke={color} strokeWidth="1.4" strokeLinejoin="round" />
    </svg>
  );
}

// ── Pin icon for location ──
function PinIcon({ size = 22, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <path d="M11 1.5 C6.5 1.5 3 5 3 9.5 C3 15 11 20.5 11 20.5 C11 20.5 19 15 19 9.5 C19 5 15.5 1.5 11 1.5 Z" stroke={color} strokeWidth="1.4" strokeLinejoin="round" />
      <circle cx="11" cy="9" r="3" stroke={color} strokeWidth="1.4" />
    </svg>
  );
}

function ClockIcon({ size = 22, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <circle cx="11" cy="11" r="9" stroke={color} strokeWidth="1.4" />
      <path d="M11 6 V11 L14.5 13" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function PhoneIcon({ size = 22, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <rect x="6" y="2" width="10" height="18" rx="2" stroke={color} strokeWidth="1.4" />
      <line x1="9" y1="17" x2="13" y2="17" stroke={color} strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  );
}

function IgIcon({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <rect x="2.5" y="2.5" width="17" height="17" rx="5" stroke={color} strokeWidth="1.4" />
      <circle cx="11" cy="11" r="4.2" stroke={color} strokeWidth="1.4" />
      <circle cx="16" cy="6" r="1.1" fill={color} />
    </svg>
  );
}

function FbIcon({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <rect x="2.5" y="2.5" width="17" height="17" rx="5" stroke={color} strokeWidth="1.4" />
      <path d="M13.2 7.2h-1.3c-.9 0-1.4.5-1.4 1.4v1.5h2.5l-.4 2.5h-2.1v5.4" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function TikTokIcon({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <path d="M11.6 3.2v9.9a2.9 2.9 0 1 1-2.4-2.85" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M11.6 3.2c.25 2.05 1.75 3.55 3.8 3.7" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function MailIcon({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <rect x="3" y="5" width="16" height="12" rx="2.5" stroke={color} strokeWidth="1.4" />
      <path d="M4 7.2l7 4.6 7-4.6" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ── External-link arrow — matches the site's thin-line icon set ──
function ExternalArrowIcon({ size = 13, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" style={{ display: 'inline-block', verticalAlign: 'middle' }} aria-hidden="true">
      <path d="M4 10 L10 4" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
      <path d="M5 4 H10 V9" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ── Tap/ripple icon — hints that a card is interactive ──
function TapIcon({ size = 20, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <circle cx="11" cy="11" r="2.6" fill={color} />
      <circle cx="11" cy="11" r="6.5" stroke={color} strokeWidth="1.3" opacity="0.55" />
      <circle cx="11" cy="11" r="10" stroke={color} strokeWidth="1.1" opacity="0.28" />
    </svg>
  );
}

// ── Cross-section of an arancino — concentric "blobs" with callout lines ──
// Pure concentric circles + a hand-drawn-feeling outer wobble done with stroke-dasharray.
function ArancinoCrossSection() {
  return (
    <svg className="cross-section" viewBox="0 0 520 540" fill="none" aria-hidden="true">
      {/* drop shadow */}
      <ellipse cx="260" cy="490" rx="180" ry="14" fill="#000" opacity="0.25" />

      {/* outer crispy shell */}
      <circle cx="260" cy="240" r="200" fill="#C99749" />
      <circle cx="260" cy="240" r="200" stroke="#8C341E" strokeWidth="2" opacity="0.55" />
      {/* breadcrumb texture: tiny dots */}
      <g fill="#8C341E" opacity="0.45">
        {Array.from({ length: 80 }).map((_, i) => {
          const a = (i / 80) * Math.PI * 2 + (i % 3) * 0.7;
          const r = 184 + (i % 5) * 3;
          const x = 260 + Math.cos(a) * r;
          const y = 240 + Math.sin(a) * r;
          return <circle key={i} cx={x} cy={y} r={1.6} />;
        })}
      </g>
      <g fill="#E0A638" opacity="0.55">
        {Array.from({ length: 60 }).map((_, i) => {
          const a = (i / 60) * Math.PI * 2 + 0.3;
          const r = 170 + (i % 4) * 5;
          const x = 260 + Math.cos(a) * r;
          const y = 240 + Math.sin(a) * r;
          return <circle key={`s${i}`} cx={x} cy={y} r={1.4} />;
        })}
      </g>

      {/* rice ring */}
      <circle cx="260" cy="240" r="155" fill="#F5EBD7" />
      <circle cx="260" cy="240" r="155" stroke="#8C341E" strokeWidth="1" opacity="0.35" />
      {/* rice grains: tiny ellipses */}
      <g fill="#E6D2A9" stroke="#B5482B" strokeWidth="0.4" opacity="0.85">
        {Array.from({ length: 110 }).map((_, i) => {
          // distribute in a ring
          const a = Math.random() * Math.PI * 2;
          const seed = (i * 1.3) % 1;
          const r = 90 + seed * 60;
          const x = 260 + Math.cos(a) * r;
          const y = 240 + Math.sin(a) * r;
          const rot = (a * 180) / Math.PI;
          return <ellipse key={`g${i}`} cx={x} cy={y} rx="5" ry="2.2" transform={`rotate(${rot} ${x} ${y})`} />;
        })}
      </g>

      {/* meat sauce filling */}
      <circle cx="260" cy="240" r="80" fill="#8C341E" />
      <circle cx="260" cy="240" r="80" stroke="#2A1810" strokeWidth="1.5" opacity="0.5" />
      {/* texture in filling */}
      <g fill="#B5482B">
        <circle cx="240" cy="220" r="6" />
        <circle cx="280" cy="230" r="4" />
        <circle cx="250" cy="260" r="5" />
        <circle cx="290" cy="260" r="3.5" />
        <circle cx="265" cy="280" r="4" />
        <circle cx="230" cy="245" r="3" />
      </g>
      <g fill="#5C6B33">
        <ellipse cx="245" cy="225" rx="4" ry="2" />
        <ellipse cx="285" cy="245" rx="3" ry="1.6" />
        <ellipse cx="260" cy="265" rx="3.5" ry="1.8" />
      </g>

      {/* callout lines + labels */}
      <g stroke="#E0A638" strokeWidth="1.2" fill="none">
        <line x1="430" y1="120" x2="380" y2="170" />
        <line x1="450" y1="240" x2="420" y2="240" />
        <line x1="430" y1="360" x2="380" y2="310" />
        <line x1="90"  y1="200" x2="160" y2="220" />
      </g>
      <g fill="#E0A638" stroke="#E0A638" strokeWidth="1">
        <circle cx="380" cy="170" r="3" />
        <circle cx="420" cy="240" r="3" />
        <circle cx="380" cy="310" r="3" />
        <circle cx="160" cy="220" r="3" />
      </g>
      <g fill="#F5EBD7" fontFamily="DM Serif Display, serif" fontStyle="italic">
        <text x="438" y="116" fontSize="18">la crosta</text>
        <text x="438" y="134" fontSize="11" fontStyle="normal" letterSpacing="2">CRUST</text>

        <text x="458" y="236" fontSize="18">il riso</text>
        <text x="458" y="254" fontSize="11" fontStyle="normal" letterSpacing="2">RICE</text>

        <text x="438" y="356" fontSize="18">il ripieno</text>
        <text x="438" y="374" fontSize="11" fontStyle="normal" letterSpacing="2">FILLING</text>

        <text x="20"  y="196" fontSize="18">la forma</text>
        <text x="20"  y="214" fontSize="11" fontStyle="normal" letterSpacing="2">SHAPED</text>
        <text x="20"  y="228" fontSize="11" fontStyle="normal" letterSpacing="2">BY HAND</text>
      </g>
    </svg>
  );
}

// ── Stylized illustrated maps — one scene per location ──
// Each scene is a hand-composed SVG that roughly reflects the real area
// (street axis, landmark park, nearest water). They are illustrations,
// not cartography.

function MapChrome({ tag, region, pin, children }) {
  return (
    <svg viewBox="0 0 600 460" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }} aria-hidden="true">
      <defs>
        <pattern id={`river-${region.replace(/\W/g, '')}`} x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
          <rect width="20" height="20" fill="#A8C0B5" />
          <path d="M0 10 Q 5 6 10 10 T 20 10" stroke="#7FA294" strokeWidth="1" fill="none" opacity="0.7" />
        </pattern>
      </defs>
      <rect width="600" height="460" fill="#EFE0C3" />
      {children}
      {/* top-left region label */}
      <text x="20" y="40" fontFamily="DM Serif Display, serif" fontSize="20" fill="#2A1810" fontStyle="italic">{tag}</text>
      <text x="20" y="58" fontFamily="Lora, serif" fontSize="11" letterSpacing="3" fill="#4A2F22">{region}</text>
      {/* pin */}
      <g transform={`translate(${pin.x} ${pin.y})`}>
        <circle cx="0" cy="0" r="46" fill={pin.color} opacity="0.15">
          <animate attributeName="r" values="36;52;36" dur="3s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0.25;0.05;0.25" dur="3s" repeatCount="indefinite" />
        </circle>
        <circle cx="0" cy="0" r="30" fill={pin.color} opacity="0.25" />
        <path d="M0 -22 C-12 -22 -20 -12 -20 0 C-20 14 0 28 0 28 C0 28 20 14 20 0 C20 -12 12 -22 0 -22 Z" fill={pin.color} stroke={pin.shadow} strokeWidth="1.4" />
        <circle cx="0" cy="-2" r="6" fill="#F5EBD7" />
        <g transform={`translate(0 ${pin.labelOffsetY ?? 60})`}>
          <text textAnchor="middle" fontFamily="DM Serif Display, serif" fontStyle="italic" fontSize="22" fill="#2A1810">{pin.label}</text>
          <text y="18" textAnchor="middle" fontFamily="Lora, serif" fontSize="10" letterSpacing="3" fill="#4A2F22">{pin.sub}</text>
        </g>
      </g>
      {/* compass */}
      <g transform="translate(545 60)">
        <circle r="20" fill="#F5EBD7" stroke="#8C341E" />
        <path d="M0 -14 L4 0 L0 14 L-4 0 Z" fill="#B5482B" />
        <text x="0" y="-22" textAnchor="middle" fontSize="9" fontFamily="Lora, serif" letterSpacing="2" fill="#2A1810">N</text>
      </g>
    </svg>
  );
}

function MapCart() {
  // St. Johns, Portland — Cathedral Park sits SE of the cart (six blocks).
  // Willamette curls along the south + east edge; St. Johns Bridge crosses
  // from the south-west. Pin is centered in the frame.
  const river = "url(#river-PORTLANDOR)";
  return (
    <MapChrome
      tag="St. Johns" region="PORTLAND, OR"
      pin={{ x: 300, y: 200, label: 'La Signora', sub: 'CATHEDRAL PARK FOOD CARTS', color: '#B5482B', shadow: '#8C341E' }}
    >
      {/* Willamette River — fills the south-east corner */}
      <path d="M -20 460 L -20 430 Q 120 400 260 420 Q 400 440 520 400 Q 600 380 640 360 L 640 460 Z" fill={river} opacity="0.85" />
      {/* Cathedral Park — south-east of pin */}
      <path d="M390 310 Q 470 296 520 326 Q 548 360 510 395 Q 430 412 388 388 Q 358 358 390 310 Z" fill="#A6B57A" opacity="0.85" />
      <text x="455" y="362" textAnchor="middle" fontFamily="Lora, serif" fontSize="11" letterSpacing="2" fill="#3F4A21">CATHEDRAL</text>
      <text x="455" y="376" textAnchor="middle" fontFamily="Lora, serif" fontSize="11" letterSpacing="2" fill="#3F4A21">PARK</text>
      {/* streets */}
      <g stroke="#D9C28E" strokeWidth="2" opacity="0.7">
        <line x1="0" y1="110" x2="600" y2="110" />
        <line x1="0" y1="160" x2="600" y2="160" />
        <line x1="0" y1="260" x2="600" y2="260" />
        <line x1="100" y1="0" x2="100" y2="460" />
        <line x1="200" y1="0" x2="200" y2="460" />
        <line x1="420" y1="0" x2="420" y2="460" />
      </g>
      {/* street labels — kept away from pin block */}
      <text x="540" y="100" fontFamily="Caveat, cursive" fontSize="20" fill="#5C6B33" textAnchor="end">N. St. Louise Ave.</text>
      <text x="60" y="100" fontFamily="Caveat, cursive" fontSize="18" fill="#7C8C5E">N. Burlington</text>
      <text x="120" y="445" fontFamily="Caveat, cursive" fontSize="20" fill="#5C6B33">Willamette River</text>
      {/* St. Johns Bridge — arc crossing the river at south-west */}
      <path d="M -10 430 Q 110 350 250 392" stroke="#B5482B" strokeWidth="2.6" fill="none" opacity="0.55" />
      <g stroke="#B5482B" strokeWidth="1" opacity="0.4">
        <line x1="60" y1="395" x2="60" y2="425" />
        <line x1="110" y1="372" x2="110" y2="415" />
        <line x1="170" y1="372" x2="170" y2="410" />
        <line x1="220" y1="385" x2="220" y2="408" />
      </g>
      <text x="30" y="345" fontFamily="Caveat, cursive" fontSize="15" fill="#8C341E" opacity="0.9">St. Johns Bridge</text>
    </MapChrome>
  );
}

function MapMarket() {
  // Downtown Vancouver — Esther Short Park bordered by W 6th/8th and Columbia/Esther.
  // Columbia River runs east-west along the south. I-5 is the eastern edge.
  const river = "url(#river-VANCOUVERWA)";
  return (
    <MapChrome
      tag="Downtown" region="VANCOUVER, WA"
      pin={{ x: 310, y: 240, label: 'La Signora', sub: 'FARMERS MARKET · ESTHER SHORT PARK', color: '#E0A638', shadow: '#B07A2D', labelOffsetY: 64 }}
    >
      {/* Columbia River — horizontal band along the bottom */}
      <rect x="0" y="380" width="600" height="80" fill={river} opacity="0.85" />
      {/* dense downtown grid — numbered streets W→E, named streets N→S */}
      <g stroke="#D9C28E" strokeWidth="2" opacity="0.7">
        {/* horizontal: W 5th .. W 9th */}
        <line x1="0" y1="100" x2="600" y2="100" />
        <line x1="0" y1="160" x2="600" y2="160" />
        <line x1="0" y1="220" x2="600" y2="220" />
        <line x1="0" y1="290" x2="600" y2="290" />
        <line x1="0" y1="345" x2="600" y2="345" />
        {/* vertical: Esther, Columbia, Washington */}
        <line x1="160" y1="0" x2="160" y2="380" />
        <line x1="260" y1="0" x2="260" y2="380" />
        <line x1="370" y1="0" x2="370" y2="380" />
        <line x1="480" y1="0" x2="480" y2="380" />
      </g>
      {/* I-5 — thick highway band on the right with dashed center stripe */}
      <rect x="540" y="0" width="22" height="380" fill="#E8D6A9" opacity="0.85" />
      <line x1="551" y1="0" x2="551" y2="380" stroke="#B07A2D" strokeWidth="1.2" strokeDasharray="6 6" />
      <text transform="translate(566 120) rotate(90)" fontFamily="Caveat, cursive" fontSize="20" fill="#8C341E">Interstate 5</text>
      {/* Esther Short Park — a downtown block, between W 6th–8th and Esther/Columbia */}
      <rect x="262" y="162" width="106" height="126" fill="#A6B57A" opacity="0.85" />
      <text x="315" y="218" textAnchor="middle" fontFamily="Lora, serif" fontSize="10" letterSpacing="2" fill="#3F4A21">ESTHER SHORT</text>
      <text x="315" y="232" textAnchor="middle" fontFamily="Lora, serif" fontSize="10" letterSpacing="2" fill="#3F4A21">PARK</text>
      {/* street labels */}
      <text transform="translate(252 80) rotate(-90)" fontFamily="Caveat, cursive" fontSize="22" fill="#5C6B33">Esther St.</text>
      <text transform="translate(155 100) rotate(-90)" fontFamily="Caveat, cursive" fontSize="18" fill="#7C8C5E">Columbia St.</text>
      <text x="40" y="92" fontFamily="Caveat, cursive" fontSize="18" fill="#7C8C5E">W 5th St.</text>
      <text x="40" y="152" fontFamily="Caveat, cursive" fontSize="18" fill="#7C8C5E">W 6th St.</text>
      <text x="40" y="282" fontFamily="Caveat, cursive" fontSize="18" fill="#7C8C5E">W 8th St.</text>
      <text x="120" y="425" fontFamily="Caveat, cursive" fontSize="22" fill="#5C6B33">Columbia River</text>
    </MapChrome>
  );
}

function MapCafe() {
  // Downtown Gresham — NE Burnside is the major east-west thoroughfare.
  // Main City Park is south-east of downtown. Mt Hood looms east.
  return (
    <MapChrome
      tag="Downtown" region="GRESHAM, OR"
      pin={{ x: 290, y: 175, label: 'Simply Coffee', sub: '488 NE BURNSIDE RD', color: '#5C6B33', shadow: '#3F4A21' }}
    >
      {/* Mt Hood silhouette — distant east */}
      <g opacity="0.32">
        <path d="M380 110 L420 60 L450 88 L490 30 L530 80 L580 50 L610 110 L610 130 L380 130 Z" fill="#8C341E" />
        <path d="M468 50 L478 64 L490 30 L490 30 L498 64 L508 52 L520 70 L498 64 L490 50 Z" fill="#F5EBD7" />
        <text x="490" y="46" textAnchor="middle" fontFamily="Caveat, cursive" fontSize="16" fill="#5C6B33">Mt Hood</text>
      </g>
      {/* perpendicular side streets — thin grid */}
      <g stroke="#D9C28E" strokeWidth="2" opacity="0.7">
        <line x1="80" y1="0" x2="80" y2="460" />
        <line x1="170" y1="0" x2="170" y2="460" />
        <line x1="260" y1="0" x2="260" y2="460" />
        <line x1="350" y1="0" x2="350" y2="460" />
        <line x1="440" y1="0" x2="440" y2="460" />
        <line x1="520" y1="0" x2="520" y2="460" />
        <line x1="0" y1="100" x2="600" y2="100" />
        <line x1="0" y1="290" x2="600" y2="290" />
        <line x1="0" y1="360" x2="600" y2="360" />
      </g>
      {/* NE Burnside Rd — thick horizontal arterial */}
      <rect x="0" y="205" width="600" height="38" fill="#E8D6A9" opacity="0.92" />
      <line x1="0" y1="224" x2="600" y2="224" stroke="#B07A2D" strokeWidth="1.2" strokeDasharray="10 8" />
      <text x="540" y="200" textAnchor="end" fontFamily="Caveat, cursive" fontSize="22" fill="#5C6B33">NE Burnside Rd.</text>
      {/* Main City Park — south-east of downtown */}
      <path d="M270 305 Q 360 295 420 320 Q 450 350 410 385 Q 320 400 280 370 Q 250 340 270 305 Z" fill="#A6B57A" opacity="0.85" />
      <text x="345" y="355" textAnchor="middle" fontFamily="Lora, serif" fontSize="10" letterSpacing="2" fill="#3F4A21">MAIN CITY PARK</text>
      {/* Johnson Creek — meandering thin line near bottom */}
      <path d="M-10 425 Q 100 415 200 428 T 400 418 T 620 430" stroke="#7FA294" strokeWidth="3" fill="none" opacity="0.85" />
      <path d="M-10 425 Q 100 415 200 428 T 400 418 T 620 430" stroke="#A8C0B5" strokeWidth="1.2" fill="none" opacity="0.9" />
      <text x="40" y="450" fontFamily="Caveat, cursive" fontSize="18" fill="#5C6B33">Johnson Creek</text>
      {/* street labels — perpendicular to Burnside */}
      <text transform="translate(82 100) rotate(-90)" fontFamily="Caveat, cursive" fontSize="16" fill="#7C8C5E">NE Roberts</text>
      <text transform="translate(352 100) rotate(-90)" fontFamily="Caveat, cursive" fontSize="16" fill="#7C8C5E">NE 4th St.</text>
    </MapChrome>
  );
}

function StylizedMap({ data }) {
  const scene = data?.scene || 'cart';
  if (scene === 'market') return <MapMarket />;
  if (scene === 'cafe')   return <MapCafe />;
  return <MapCart />;
}

Object.assign(window, {
  Divider, ArancinoStamp, LemonIcon, TriangleMark, PinIcon, ClockIcon, PhoneIcon, IgIcon,
  ArancinoCrossSection, StylizedMap
});
