function Venue() {
  return (
    <section className="block" id="donde">
      <div className="page">
        <div className="section-head">
          <div className="kicker">05 · Dónde</div>
          <h2>
            #LaPlaza
            <br />
            Circular Universe<span className="accent">.</span>
          </h2>
          <div className="aside">
            En Logroño, no en Madrid. Aparcamiento en la puerta.
          </div>
        </div>

        <div className="venue">
          <div className="venue-info">
            <div className="venue-addr">
              {EVENT.address}
              <small>{EVENT.city}</small>
            </div>

            <dl className="venue-contact">
              <dt>Fecha</dt>
              <dd>{EVENT.dateLabel}</dd>
              <dt>Hora</dt>
              <dd>{EVENT.timeRange}</dd>
              <dt>Teléfono</dt>
              <dd>
                <a href={`tel:${EVENT.phoneTel}`}>{EVENT.phone}</a>
              </dd>
              <dt>Email</dt>
              <dd>
                <a href={`mailto:${EVENT.email}`}>{EVENT.email}</a>
              </dd>
            </dl>

            <div className="venue-actions">
              <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">
            {/* Mapa estilizado de la rotonda Av. Francia × C/ Valdegastea × C/ Rosa Chacel */}
            <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
              <defs>
                <pattern id="vgrid" width="24" height="24" patternUnits="userSpaceOnUse">
                  <path d="M 24 0 L 0 0 0 24" fill="none" stroke="#e3e0d9" strokeWidth="0.5" />
                </pattern>
              </defs>

              <rect width="400" height="300" fill="#ffffff" />
              <rect width="400" height="300" fill="url(#vgrid)" />

              {/* Zona verde */}
              <path
                d="M 235 245 Q 260 240 285 260 L 310 295 L 220 295 Z"
                fill="#e6ecda"
                stroke="#d4dcc5"
                strokeWidth="0.5"
              />

              {/* Río */}
              <path
                d="M 0 40 Q 60 25 120 50 T 230 40"
                stroke="#cfe6ef"
                strokeWidth="6"
                fill="none"
                strokeLinecap="round"
              />

              {/* Av. Francia */}
              <path
                d="M 285 -10 L 280 180 Q 280 215 255 225 L 200 240"
                stroke="#d6d2ca"
                strokeWidth="22"
                fill="none"
                strokeLinecap="round"
              />
              <path
                d="M 285 -10 L 280 180 Q 280 215 255 225 L 200 240"
                stroke="#f3f1ec"
                strokeWidth="17"
                fill="none"
                strokeLinecap="round"
              />

              {/* C/ Valdegastea */}
              <path d="M -10 220 L 225 225" stroke="#d6d2ca" strokeWidth="20" fill="none" strokeLinecap="round" />
              <path d="M -10 220 L 225 225" stroke="#f3f1ec" strokeWidth="15" fill="none" strokeLinecap="round" />

              {/* C/ Rosa Chacel */}
              <path d="M 245 245 L 400 260" stroke="#d6d2ca" strokeWidth="18" fill="none" strokeLinecap="round" />
              <path d="M 245 245 L 400 260" stroke="#f3f1ec" strokeWidth="13" fill="none" strokeLinecap="round" />

              <path d="M 220 245 L 205 310" stroke="#d6d2ca" strokeWidth="16" fill="none" strokeLinecap="round" />
              <path d="M 220 245 L 205 310" stroke="#f3f1ec" strokeWidth="11" fill="none" strokeLinecap="round" />

              {/* Rotonda */}
              <circle cx="232" cy="232" r="16" fill="#d6d2ca" />
              <circle cx="232" cy="232" r="11" fill="#f3f1ec" />
              <circle cx="232" cy="232" r="5" fill="#e6ecda" />

              {/* Manzanas */}
              <g fill="#edeae4" stroke="#ddd9d2" strokeWidth="0.5">
                <rect x="15" y="240" width="26" height="22" />
                <rect x="46" y="240" width="30" height="22" />
                <rect x="82" y="240" width="22" height="22" />
                <rect x="110" y="240" width="28" height="22" />
                <rect x="15" y="268" width="40" height="28" />
                <rect x="60" y="268" width="36" height="28" />
                <rect x="100" y="268" width="44" height="28" />
                <rect x="310" y="170" width="90" height="70" />
                <rect x="192" y="65" width="22" height="22" />
              </g>

              {/* El edificio */}
              <rect x="140" y="95" width="110" height="110" fill="#f3f1ec" stroke="#c6c1b8" strokeWidth="1" />
              <rect x="140" y="95" width="110" height="110" fill="url(#vgrid)" opacity="0.6" />

              <g fontFamily="Inter, sans-serif" fontWeight="500" fontSize="10" letterSpacing="0.3">
                <rect x="55" y="207" width="92" height="16" rx="8" fill="#ffffff" opacity="0.9" />
                <text x="101" y="218" fill="#756b66" textAnchor="middle">
                  C/ Valdegastea
                </text>

                <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="#756b66" textAnchor="middle">
                    Av. Francia
                  </text>
                </g>

                <rect x="305" y="275" width="92" height="16" rx="8" fill="#ffffff" opacity="0.9" />
                <text x="351" y="286" fill="#756b66" textAnchor="middle">
                  C/ Rosa Chacel
                </text>
              </g>
            </svg>

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

function Footer() {
  return (
    <footer className="site">
      <div className="page footer-inner">
        <div className="footer-brand">
          <img src="assets/skai_black.svg" alt="SKAI" />
          <span className="mono">un producto de Solverkey</span>
        </div>
        <nav className="footer-links">
          <a href={`tel:${EVENT.phoneTel}`}>{EVENT.phone}</a>
          <a href={`mailto:${EVENT.email}`}>{EVENT.email}</a>
          <a href={EVENT.productUrl} target="_blank" rel="noreferrer">
            holasoyskai.com
          </a>
          <a href="/privacidad">Privacidad</a>
        </nav>
      </div>
      <div className="page footer-legal mono">
        © 2026 Solverkey · SKAI LIVE '26 · Logroño, La Rioja
      </div>
    </footer>
  );
}

window.Venue = Venue;
window.Footer = Footer;