// Milfers · Reserva section · info izquierda + iframe TheFork derecha
const LASTAPP_URL = 'https://widget.thefork.com/b776f821-119a-4eaf-a004-190bb4b5c494';

function ReservaSection() {
  return (
    <section className="mf-reserva" id="reserva">
      <div className="mf-reserva-inner">
        <div className="mf-reserva-grid">
          <div className="mf-reserva-l reveal">
            <span className="ed-sec-title">
              <span className="n">6.</span>&nbsp;<span dangerouslySetInnerHTML={{__html: window.t('reserva.eyebrow')}} />
            </span>
            <h2 className="mf-reserva-title" dangerouslySetInnerHTML={{__html: window.t('reserva.title')}} />
            <p className="mf-reserva-sub">{window.t('reserva.sub')}</p>
            <ul className="mf-reserva-info">
              <li><strong>{window.t('reserva.address')}</strong><span>C/ Carles Cervera, 8 · 46004 Valencia · Ruzafa<a className="mf-reserva-maplink" href="https://www.google.com/maps/dir//Milfers+Burgers+%7C+Hamburguesas+Valencia,+C%2F+de+Carles+Cervera,+8,+Ensanche,+46004+Val%C3%A8ncia,+Valencia,+Espa%C3%B1a/@39.4631463,-0.3750012,16z/data=!4m17!1m7!3m6!1s0xd6049c84c912389:0xce4a4982900a9255!2sMilfers+Burgers+%7C+Hamburguesas+Valencia!8m2!3d39.4631422!4d-0.3724263!16s%2Fg%2F11kb9gxdg3!4m8!1m0!1m5!1m1!1s0xd6049c84c912389:0xce4a4982900a9255!2m2!1d-0.3724263!2d39.4631422!3e2" target="_blank" rel="noreferrer">{window.t('reserva.howto')} <span className="arr">→</span></a></span></li>
              <li>
                <strong>{window.t('reserva.hours')}</strong>
                <span className="mf-hours">
                  <span>{window.t('reserva.mon')}</span><span>{window.t('reserva.monVal')}</span>
                  <span>{window.t('reserva.tue')}</span><span>19:00–23:00</span>
                  <span>{window.t('reserva.wed')}</span><span>19:00–00:30</span>
                  <span>{window.t('reserva.fri')}</span><span>13:30–16:00 · 19:00–00:30</span>
                  <span>{window.t('reserva.sun')}</span><span>13:30–16:00 · 19:00–23:00</span>
                </span>
              </li>
              <li><strong>{window.t('reserva.phone')}</strong><span>+34 633 131 549</span></li>
              <li><strong>{window.t('reserva.metro')}</strong><span>{window.t('reserva.metroVal')}</span></li>
              <li><strong>{window.t('reserva.capacity')}</strong><span>{window.t('reserva.capacityVal')}</span></li>
            </ul>
          </div>

          <div className="mf-reserva-r reveal delay-2">
            <div className="mf-reserva-frame">
              <div className="mf-reserva-frame-head">
                <span className="t">{window.t('reserva.frameTitle')}</span>
                <span className="step" dangerouslySetInnerHTML={{__html: window.t('reserva.frameStep')}} />
              </div>
              <iframe
                className="mf-reserva-iframe"
                src={LASTAPP_URL}
                title={window.t('reserva.iframeTitle')}
                loading="lazy"
                allow="payment *"
              />
              <p className="mf-reserva-fine">
                {window.t('reserva.fine')} <a href={LASTAPP_URL} target="_blank" rel="noreferrer">{window.t('reserva.fineLink')}</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ReservaSection = ReservaSection;