function Visit() {
  const today = new Date().getDay(); // 0 = Sunday
  const idxMap = [6,0,1,2,3,4,5]; // Map Sun-Sat to Mon-Sun index
  const todayIdx = idxMap[today];

  return (
    <section className="bean-sec visit-section" id="visitanos">
      <Sparkle size={36} style={{ top: '8%', right: '8%' }} color="var(--orange)" />
      <Sparkle size={28} style={{ bottom: '10%', left: '4%', transform: 'rotate(15deg)' }} color="var(--orange)" />

      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>⟢ Pásate</div>
            <h2>Nos encuentras<br/>en Zaragoza.</h2>
          </div>
          <p style={{ maxWidth: 380, fontSize: 17, lineHeight: 1.4 }}>
            Local pequeño, barra grande. Hay mesa para teletrabajo y barra para charlar con quien tira el café.
          </p>
        </div>

        <div className="visit-grid">
          <div className="visit-card">
            <h3>Horarios</h3>
            <div className="address-block">
              <div className="eyebrow">Tostadas hasta</div>
              <div className="street" style={{ fontFamily: 'var(--display)', fontSize: 32, lineHeight: 1 }}>13:00</div>
            </div>
            <div className="hours-table">
              {HOURS.map((h, i) => (
                <div className={'hours-row ' + (i === todayIdx ? 'today' : '')} key={i}>
                  <div className="day">{h.day}</div>
                  <div className="time">{h.time}</div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 8 }}>
              <a className="btn btn-dark" href="https://www.instagram.com/beancoffeezgz/" target="_blank" rel="noopener noreferrer">
                <IconInstagram size={16} color="var(--cream)" /> @beancoffeezgz
              </a>
            </div>
          </div>

          <div>
            <div className="visit-card" style={{ padding: 28, marginBottom: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>Dirección</div>
              <div className="address-block">
                <div className="street" style={{ fontFamily: 'var(--display)', fontSize: 40, lineHeight: 1, letterSpacing: '-0.01em' }}>
                  Bean Coffee
                </div>
                <div style={{ fontSize: 16, fontWeight: 500 }}>
                  Avda. Poetisa María Zambrano, 16<br/>
                  50018 Zaragoza
                </div>
              </div>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <a className="btn btn-primary" href="https://maps.app.goo.gl/urVJx2mhKgg6ehys5" target="_blank" rel="noopener noreferrer">
                  <IconPin size={16} color="var(--cream-3)" /> Google Maps
                </a>
                <a className="btn" href="https://maps.app.goo.gl/urVJx2mhKgg6ehys5" target="_blank" rel="noopener noreferrer">
                  <IconPin size={16} /> Cómo llegar
                </a>
              </div>
            </div>

            <div className="map-card">
              <svg className="map-illustration" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
                {/* Stylized street grid map */}
                <rect width="400" height="400" fill="var(--matcha)" />
                {/* Park block */}
                <rect x="50" y="60" width="120" height="80" fill="#638340" stroke="var(--ink)" strokeWidth="3" />
                <rect x="250" y="240" width="100" height="100" fill="#638340" stroke="var(--ink)" strokeWidth="3" />
                {/* Building blocks */}
                <rect x="200" y="60" width="150" height="120" fill="var(--cream-3)" stroke="var(--ink)" strokeWidth="3" />
                <rect x="50" y="180" width="120" height="100" fill="var(--cream-3)" stroke="var(--ink)" strokeWidth="3" />
                <rect x="50" y="300" width="170" height="80" fill="var(--cream-3)" stroke="var(--ink)" strokeWidth="3" />
                {/* Streets — render automatically by gaps */}
                {/* Center building (Bean) */}
                <rect x="190" y="195" width="50" height="40" fill="var(--orange)" stroke="var(--ink)" strokeWidth="3" />
                {/* Tree dots */}
                <circle cx="90" cy="100" r="10" fill="var(--cream-3)" stroke="var(--ink)" strokeWidth="2" />
                <circle cx="130" cy="100" r="10" fill="var(--cream-3)" stroke="var(--ink)" strokeWidth="2" />
                <circle cx="290" cy="290" r="10" fill="var(--cream-3)" stroke="var(--ink)" strokeWidth="2" />
                <circle cx="320" cy="290" r="10" fill="var(--cream-3)" stroke="var(--ink)" strokeWidth="2" />
                {/* River */}
                <path d="M0 30 Q 100 50, 200 30 T 400 40 L 400 0 L 0 0 Z" fill="#a0c4d8" stroke="var(--ink)" strokeWidth="3" />
                {/* Street labels */}
                <text x="200" y="190" fontFamily="JetBrains Mono" fontWeight="700" fontSize="8" fill="var(--ink)" textAnchor="middle">AV. POETISA MARÍA ZAMBRANO</text>
                <text x="20" y="230" fontFamily="JetBrains Mono" fontWeight="700" fontSize="8" fill="var(--ink)" transform="rotate(-90 20 230)">PARQUE GOYA</text>
              </svg>
              <div className="map-pin">
                <div className="map-pin-body">
                  <IconBean size={32} color="var(--cream-3)" />
                </div>
              </div>
              <div style={{
                position: 'absolute',
                bottom: 16, left: 16,
                background: 'var(--cream-3)',
                border: 'var(--border-thin)',
                borderRadius: 999,
                padding: '6px 14px',
                fontFamily: 'var(--mono)',
                fontSize: 11,
                fontWeight: 700,
              }}>
                ESTAMOS AQUÍ ↓
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Visit });