function Venue() {
  return (
    <section className="block" id="venue" data-screen-label="Venue">
      <div className="page">
        <div className="section-head">
          <div className="kicker">03 · ¿Cómo llegar?</div>
          <h2>Edificio<br/>Circular Universe<span style={{color:'var(--accent)'}}>.</span></h2>
          <div className="aside">
            Parking disponible en el propio edificio.
          </div>
        </div>

        <div className="venue">
          <div>
            <div className="venue-addr">
              C/ Valdegastea 2
              <small>26006 · Logroño, La Rioja</small>
            </div>

            <dl className="venue-contact">
              <dt>Email</dt>
              <dd><a href={`mailto:${EVENT.email}`}>{EVENT.email}</a></dd>
              <dt>Teléfono</dt>
              <dd><a href={`tel:+34${EVENT.phone.replace(/\s/g,'')}`}>{EVENT.phone}</a></dd>
              <dt>Horario</dt>
              <dd>Apertura 9:30h · Inicio 10:00h</dd>
            </dl>

            <div style={{display:'flex', gap: 10}}>
              <a className="btn btn-primary" href={EVENT.mapsUrl} target="_blank" rel="noreferrer">
                Google Maps <span className="arrow">↗</span>
              </a>
              <a className="btn btn-ghost" href="https://maps.apple.com/?q=Valdegastea+2+Logrono" target="_blank" rel="noreferrer">
                Apple Maps
              </a>
            </div>
          </div>

          <div className="venue-visual" aria-hidden="true">
            {/* Stylized map based on the real location — roundabout at Av. Francia × C/ Valdegastea × C/ Rosa Chacel */}
            <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
              <defs>
                <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
                  <path d="M 24 0 L 0 0 0 24" fill="none" stroke="#e3e2da" strokeWidth="0.5"/>
                </pattern>
              </defs>

              {/* base */}
              <rect width="400" height="300" fill="#f6f5f1"/>
              <rect width="400" height="300" fill="url(#grid)"/>

              {/* Park / green area bottom right */}
              <path d="M 235 245 Q 260 240 285 260 L 310 295 L 220 295 Z" fill="#e4ead8" stroke="#d2d9c3" strokeWidth="0.5"/>

              {/* River / stream sketched top-left */}
              <path d="M 0 40 Q 60 25 120 50 T 230 40" stroke="#c7e3ee" strokeWidth="6" fill="none" strokeLinecap="round"/>

              {/* Av. Francia — vertical curved road on right */}
              <path d="M 285 -10 L 280 180 Q 280 215 255 225 L 200 240" stroke="#b9b8ad" strokeWidth="22" fill="none" strokeLinecap="round"/>
              <path d="M 285 -10 L 280 180 Q 280 215 255 225 L 200 240" stroke="#ecebe5" strokeWidth="17" fill="none" strokeLinecap="round"/>

              {/* C/ Valdegastea — horizontal road on the left/middle leading to the roundabout */}
              <path d="M -10 220 L 225 225" stroke="#b9b8ad" strokeWidth="20" fill="none" strokeLinecap="round"/>
              <path d="M -10 220 L 225 225" stroke="#ecebe5" strokeWidth="15" fill="none" strokeLinecap="round"/>

              {/* C/ Rosa Chacel — going right from roundabout */}
              <path d="M 245 245 L 400 260" stroke="#b9b8ad" strokeWidth="18" fill="none" strokeLinecap="round"/>
              <path d="M 245 245 L 400 260" stroke="#ecebe5" strokeWidth="13" fill="none" strokeLinecap="round"/>

              {/* C/ Salamanca — heading down from roundabout */}
              <path d="M 220 245 L 205 310" stroke="#b9b8ad" strokeWidth="16" fill="none" strokeLinecap="round"/>
              <path d="M 220 245 L 205 310" stroke="#ecebe5" strokeWidth="11" fill="none" strokeLinecap="round"/>

              {/* Roundabout */}
              <circle cx="232" cy="232" r="16" fill="#b9b8ad"/>
              <circle cx="232" cy="232" r="11" fill="#ecebe5"/>
              <circle cx="232" cy="232" r="5" fill="#e4ead8"/>

              {/* Urban blocks bottom-left (small buildings) */}
              <rect x="15" y="240" width="26" height="22" fill="#e6e5dd" stroke="#d1d0c3" strokeWidth="0.5"/>
              <rect x="46" y="240" width="30" height="22" fill="#e6e5dd" stroke="#d1d0c3" strokeWidth="0.5"/>
              <rect x="82" y="240" width="22" height="22" fill="#e6e5dd" stroke="#d1d0c3" strokeWidth="0.5"/>
              <rect x="110" y="240" width="28" height="22" fill="#e6e5dd" stroke="#d1d0c3" strokeWidth="0.5"/>
              <rect x="15" y="268" width="40" height="28" fill="#e6e5dd" stroke="#d1d0c3" strokeWidth="0.5"/>
              <rect x="60" y="268" width="36" height="28" fill="#e6e5dd" stroke="#d1d0c3" strokeWidth="0.5"/>
              <rect x="100" y="268" width="44" height="28" fill="#e6e5dd" stroke="#d1d0c3" strokeWidth="0.5"/>

              {/* Large block right side (other property across Av. Francia) */}
              <rect x="310" y="170" width="90" height="70" fill="#e6e5dd" stroke="#d1d0c3" strokeWidth="0.5"/>

              {/* Small outlier building up top */}
              <rect x="192" y="65" width="22" height="22" fill="#e6e5dd" stroke="#d1d0c3" strokeWidth="0.5"/>

              {/* THE building — Circular Universe, square block centered */}
              <rect x="140" y="95" width="110" height="110" fill="#ecebe5" stroke="#c1c0b5" strokeWidth="1"/>
              <rect x="140" y="95" width="110" height="110" fill="url(#grid)" opacity="0.6"/>

              {/* street labels — with soft pill backgrounds so they read on any surface */}
              <g fontFamily="Inter, sans-serif" fontWeight="500" fontSize="10" letterSpacing="0.3">
                {/* Valdegastea */}
                <rect x="55" y="207" width="92" height="16" rx="8" fill="#ffffff" opacity="0.9"/>
                <text x="101" y="218" fill="#5a5a82" textAnchor="middle">C/ Valdegastea</text>

                {/* Av. Francia — rotated, horizontal pill */}
                <g transform="translate(297 120) rotate(90)">
                  <rect x="-38" y="-8" width="76" height="16" rx="8" fill="#ffffff" opacity="0.9"/>
                  <text x="0" y="3" fill="#5a5a82" textAnchor="middle">Av. Francia</text>
                </g>

                {/* Rosa Chacel */}
                <rect x="305" y="275" width="92" height="16" rx="8" fill="#ffffff" opacity="0.9"/>
                <text x="351" y="286" fill="#5a5a82" textAnchor="middle">C/ Rosa Chacel</text>

                {/* Salamanca */}
                <g transform="translate(190 288) rotate(-78)">
                  <rect x="-42" y="-8" width="84" height="16" rx="8" fill="#ffffff" opacity="0.9"/>
                  <text x="0" y="3" fill="#5a5a82" textAnchor="middle">C/ Salamanca</text>
                </g>
              </g>
            </svg>

            <div className="venue-pin" style={{left: '48.75%', top: '50%'}}>
              <div className="label">Edificio Circular Universe</div>
              <div className="dot"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Venue = Venue;