// Milfers · Footer · big CTA + grid
const MAPS_DIR_URL = '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';

// Parsea "Lunes · cerrado" → { day: 'Lunes', time: 'cerrado' }
function parseHour(str) {
  const i = str.indexOf(' · ');
  if (i === -1) return { day: str, time: '' };
  return { day: str.slice(0, i), time: str.slice(i + 3) };
}

function Footer() {
  const hrs = [
    window.t('footer.mon'),
    window.t('footer.tue'),
    window.t('footer.fri'),
    window.t('footer.sat'),
    window.t('footer.sun'),
  ].map(parseHour);

  return (
    <footer className="mf-footer">
      <div className="mf-footer-cta">
        <div className="mf-footer-burst mf-footer-burst--tl" aria-hidden="true"><i className="bg bg--burst-tl"></i></div>
        <div className="mf-footer-burst mf-footer-burst--br" aria-hidden="true"><i className="bg bg--burst-tl"></i></div>
        <span className="ed-sec-title"><span className="n">·</span>&nbsp;{window.t('footer.eyebrow')}&nbsp;<span className="dot">·</span></span>
        <div className="mf-footer-marker">{window.t('footer.marker')}</div>
        <h2 className="mf-footer-cta-title" dangerouslySetInnerHTML={{__html: window.t('footer.ctaTitle')}} />
        <div className="mf-footer-claim">
          <span className="claim-display">Dry Aged</span>
          <span className="claim-marker">Serious Burgers</span>
        </div>
        <div className="mf-footer-modes" aria-hidden="true">
          <span className="mode"><i className="bg bg--burger"></i><span>{window.t('footer.modeSala')}</span></span>
          <span className="mode-sep">·</span>
          <span className="mode"><i className="bg bg--bag"></i><span>{window.t('footer.modeTake')}</span></span>
          <span className="mode-sep">·</span>
          <span className="mode"><i className="bg bg--scooter"></i><span>{window.t('footer.modeDelivery')}</span></span>
        </div>
      </div>

      <div className="mf-footer-main">
        {/* Columna marca */}
        <div className="mf-footer-brand">
          <a href="#" className="mf-footer-logo" aria-label="Milfers Burgers">
            <span className="mf-logo-tagline mf-footer-tagline" aria-hidden="true">burgers</span>
            <img src="assets/wordmark-milfers.svg" alt="Milfers" />
          </a>
          <p className="mf-footer-tag">{window.t('footer.tag')}</p>
        </div>

        {/* Columna visita */}
        <div className="mf-footer-col">
          <h4 className="mf-footer-col-title">{window.t('footer.visit')}</h4>
          <dl className="mf-footer-dl">
            <div className="mf-footer-dl-row">
              <dt>Dirección</dt>
              <dd>C/ Carles Cervera, 8<br/>46004 Valencia · Ruzafa</dd>
            </div>
            <div className="mf-footer-dl-row">
              <dt>Metro</dt>
              <dd>{window.t('footer.metroVal')}</dd>
            </div>
            <div className="mf-footer-dl-row">
              <dt>Tel</dt>
              <dd>+34 633 131 549</dd>
            </div>
          </dl>
          <a className="mf-footer-link-btn" href={MAPS_DIR_URL} target="_blank" rel="noreferrer">{window.t('footer.howto')}</a>
        </div>

        {/* Columna horario */}
        <div className="mf-footer-col">
          <h4 className="mf-footer-col-title">{window.t('footer.hours')}</h4>
          <dl className="mf-footer-dl mf-footer-schedule">
            {hrs.map((h, i) => (
              <div key={i} className={'mf-footer-dl-row' + (h.time === 'cerrado' || h.time === 'tancat' || h.time === 'closed' ? ' is-closed' : '')}>
                <dt>{h.day}</dt>
                <dd>{h.time}</dd>
              </div>
            ))}
          </dl>
        </div>

        {/* Columna redes */}
        <div className="mf-footer-col">
          <h4 className="mf-footer-col-title">{window.t('footer.follow')}</h4>
          <dl className="mf-footer-dl">
            <div className="mf-footer-dl-row">
              <dt>IG</dt>
              <dd><a href="https://instagram.com/milfersburgers" target="_blank" rel="noreferrer">@milfersburgers</a></dd>
            </div>
            <div className="mf-footer-dl-row">
              <dt>Reservas</dt>
              <dd><a href="https://www.thefork.es/restaurante/milfers-r793958" target="_blank" rel="noreferrer">TheFork</a></dd>
            </div>
            <div className="mf-footer-dl-row">
              <dt>Maps</dt>
              <dd><a href={MAPS_DIR_URL} target="_blank" rel="noreferrer">{window.t('footer.maps')}</a></dd>
            </div>
            <div className="mf-footer-dl-row">
              <dt>Email</dt>
              <dd><a className="e-mail" data-u="info" data-d="milfersburgers" data-t="com" data-show="addr" href="#">{window.t('footer.email')}</a></dd>
            </div>
          </dl>
        </div>
      </div>

      <div className="mf-footer-bottom">
        <span>© {new Date().getFullYear()} Milfers · Valencia</span>
        <span className="legal-links">
          <button type="button" className="legal-trigger" data-legal-open="aviso">{window.t('footer.legalNotice')}</button>
          <button type="button" className="legal-trigger" data-legal-open="privacidad">{window.t('footer.privacy')}</button>
          <button type="button" className="legal-trigger" data-legal-open="cookies">{window.t('footer.cookies')}</button>
        </span>
      </div>
    </footer>
  );
}

window.Footer = Footer;