function Visita() {
  const t = useT();
  const { endereco } = DATA_SHARED;

  return (
    <section id="visita" style={{
      padding: '140px 0', background: 'var(--bg-alt)',
      borderTop: '1px solid var(--line)',
    }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>{t.visita.eyebrow}</div>
            <h2 className="title-font">
              {t.visita.title1}<br/>
              <span style={{ color: 'var(--accent)', fontStyle: 'italic' }}>{t.visita.title2}</span>
            </h2>
          </div>
          <p className="lede">{t.visita.lede}</p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr',
          gap: 60, alignItems: 'stretch',
        }} className="vis-grid">

          <div style={{ position: 'relative', minHeight: 520 }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'var(--paper)',
              border: '1px solid var(--line)',
              overflow: 'hidden',
            }}>
              <svg viewBox="0 0 600 520" style={{ width: '100%', height: '100%', display: 'block' }}>
                <defs>
                  <pattern id="p" width="20" height="20" patternUnits="userSpaceOnUse">
                    <path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--line)" strokeWidth="0.5"/>
                  </pattern>
                </defs>
                <rect width="600" height="520" fill="url(#p)"/>
                <path d="M 0 260 L 600 240" stroke="var(--ink-soft)" strokeWidth="22" opacity="0.18"/>
                <path d="M 280 0 L 310 520" stroke="var(--ink-soft)" strokeWidth="14" opacity="0.18"/>
                <path d="M 100 80 L 560 180" stroke="var(--ink-soft)" strokeWidth="10" opacity="0.14"/>
                <path d="M 50 420 L 520 460" stroke="var(--ink-soft)" strokeWidth="10" opacity="0.14"/>
                <text x="40" y="255" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2" fill="var(--ink-soft)">GARRATT LANE</text>
                <text x="320" y="60" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.5" fill="var(--ink-soft)">MAGDALEN RD</text>
                <text x="60" y="410" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.5" fill="var(--ink-soft)">EARLSFIELD STN</text>
                <circle cx="300" cy="250" r="36" fill="var(--accent)" opacity="0.15"/>
                <circle cx="300" cy="250" r="12" fill="var(--accent)"/>
                <circle cx="300" cy="250" r="4" fill="var(--cream)"/>
              </svg>
            </div>
            <div style={{
              position: 'absolute', bottom: 20, left: 20,
              background: 'var(--cream)', border: '1px solid var(--line)',
              padding: '14px 18px', maxWidth: 260,
            }}>
              <div className="mono" style={{
                fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--accent)', marginBottom: 6,
              }}>Trem de Minas</div>
              <div style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.4 }}>
                {endereco.rua}<br/>{endereco.bairro} · {endereco.cidade}
              </div>
            </div>
          </div>

          <div>
            <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 24, marginBottom: 40 }}>
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--accent)', marginBottom: 20,
              }}>{t.visita.horariosTitle}</div>
              {t.visita.horarios.map(h => (
                <div key={h.dia} style={{
                  display: 'flex', justifyContent: 'space-between',
                  padding: '12px 0', borderBottom: '1px dashed var(--line)',
                  fontSize: 15,
                }}>
                  <span style={{ color: 'var(--ink)' }}>{h.dia}</span>
                  <span className="mono" style={{
                    color: h.h === t.visita.fechado ? 'var(--muted)' : 'var(--ink)',
                    fontStyle: h.h === t.visita.fechado ? 'italic' : 'normal',
                  }}>{h.h}</span>
                </div>
              ))}
            </div>

            <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 24, marginBottom: 40 }}>
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--accent)', marginBottom: 20,
              }}>{t.visita.contatoTitle}</div>
              <div style={{ display: 'grid', gap: 16, fontSize: 15 }}>
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 4 }}>WhatsApp</div>
                  <a href={DATA_SHARED.whatsapp} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink)', textDecoration: 'none', borderBottom: '1px solid var(--line)', paddingBottom: 2 }}>
                    {t.visita.whatsappLabel || 'Falar no WhatsApp →'}
                  </a>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 4 }}>{t.visita.email}</div>
                  {endereco.email}
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 4 }}>{t.visita.trem}</div>
                  {t.visita.trainLabel}
                </div>
              </div>
            </div>

            <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 24 }}>
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--accent)', marginBottom: 20,
              }}>{t.visita.chegarTitle}</div>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-soft)' }}>
                {t.visita.chegarTxt}
              </p>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .vis-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.Visita = Visita;