// Milfers · Hero · editorial 2-col with real photo, dual-typeface claim & spinning seal
function Hero() {
  return (
    <section className="mf-hero" id="inicio">
      {/* EDIT: stronger ambient — gradient + dim layer to ensure copy reads on photo */}
      <div className="mf-hero-ambient" aria-hidden="true"></div>
      <div className="mf-hero-photo-bg" aria-hidden="true"></div>
      <div className="mf-hero-photo-veil" aria-hidden="true"></div>

      <div className="mf-hero-inner">
        <div className="mf-hero-grid">
          <div className="mf-hero-l">
            {/* EDIT: eyebrow updated to bistroburger / ruzafa / valencia */}
            <span className="ed-sec-title">
              <span className="n">1.</span>&nbsp;<span dangerouslySetInnerHTML={{__html: window.t('hero.eyebrow')}} />
            </span>

            {/* EDIT: brand claim with two typefaces — display + manuscrita marker */}
            <div className="mf-hero-claim">
              <span className="claim-display">Dry Aged</span>
              <span className="claim-marker">Serious Burgers</span>
            </div>

            {/* removed: redundant marker */}

            {/* EDIT: restored previous headline */}
            <h1 className="mf-hero-title">
              <span className="word" dangerouslySetInnerHTML={{__html: window.t('hero.title')}} />
            </h1>

            {/* EDIT: subtitle rewritten */}
            <p className="mf-hero-sub" dangerouslySetInnerHTML={{__html: window.t('hero.sub')}} />

            {/* EDIT: 3 CTAs — Reservar (primary), Take away (secondary), Ver carta (tertiary link) */}
            <div className="mf-hero-ctas">
              <button className="mf-hero-cta-primary" data-open-reserva type="button">
                <i className="bg bg--burger mf-cta-ico" aria-hidden="true"></i>
                {window.t('hero.ctaReserve')} <span className="arr">→</span>
              </button>
              <a className="mf-hero-cta-secondary" href="https://milfersburgers.com/pide" target="_blank" rel="noreferrer">
                <i className="bg bg--scooter mf-cta-ico" aria-hidden="true"></i>
                {window.t('hero.ctaTakeaway')} <span className="arr">→</span>
              </a>
              <a className="mf-hero-cta-tertiary" href="#" data-open-carta>
                <span className="mf-hero-cta-tertiary-arr" aria-hidden="true">→</span>
                <span className="mf-hero-cta-tertiary-t">{window.t('hero.ctaMenu')}</span>
                <span className="mf-hero-cta-tertiary-meta">{window.t('hero.ctaMenuMeta')}</span>
              </a>
            </div>
          </div>

          <div className="mf-hero-r" aria-hidden="true">
            {/* EDIT: real photo replaces SVG illustration; secondary photo for collage */}
            <div className="mf-hero-photo"></div>
            <div className="mf-hero-photo-mask"></div>

            {/* EDIT: brand 35-days seal — inner 35 fixed, outer ring "días de maduración" rotates */}
            <div className="mf-hero-seal">
              <img src={window.MF_SEAL_SRC} alt="" />
            </div>

            {/* EDIT: cursive Milfers stamp overlay — top-left of collage */}
            <div className="mf-hero-stamp" aria-hidden="true">
              <i className="bg bg--stamp"></i>
            </div>

            <div className="mf-hero-tag" dangerouslySetInnerHTML={{__html: window.t('hero.tag')}} />
          </div>
        </div>
      </div>
    </section>
  );
}

// Minimal editorial burger illustration — kept for menu cards fallback
function BurgerArt({ compact = false }) {
  return (
    <svg viewBox="0 0 280 240" xmlns="http://www.w3.org/2000/svg" fill="none">
      <path d="M40 90 C 40 48, 90 28, 140 28 C 190 28, 240 48, 240 90 L 40 90 Z" fill="#C78A4E"/>
      <path d="M40 90 C 40 48, 90 28, 140 28 C 190 28, 240 48, 240 90" stroke="#7a4b1e" strokeWidth="1.5" fill="none" opacity="0.35"/>
      <ellipse cx="90" cy="58" rx="3.5" ry="2" fill="#F1F2F2" opacity="0.85"/>
      <ellipse cx="125" cy="46" rx="3.5" ry="2" fill="#F1F2F2" opacity="0.85"/>
      <ellipse cx="160" cy="54" rx="3.5" ry="2" fill="#F1F2F2" opacity="0.85"/>
      <ellipse cx="195" cy="62" rx="3.5" ry="2" fill="#F1F2F2" opacity="0.85"/>
      <ellipse cx="75" cy="76" rx="3" ry="1.8" fill="#F1F2F2" opacity="0.7"/>
      <ellipse cx="210" cy="78" rx="3" ry="1.8" fill="#F1F2F2" opacity="0.7"/>
      <path d="M32 98 Q 50 88, 70 98 T 110 96 T 150 98 T 190 96 T 230 98 T 248 94 L 248 112 L 32 112 Z" fill="#6B8E4E"/>
      <path d="M32 104 Q 60 112, 90 102 T 140 108 T 190 104 T 248 110" stroke="#4a6835" strokeWidth="1" fill="none" opacity="0.4"/>
      <path d="M30 110 L 250 110 L 244 128 Q 220 132, 180 128 T 120 130 T 60 128 L 36 130 Z" fill="#E8B84A"/>
      <rect x="28" y="125" width="224" height="38" rx="4" fill="#3E1D12"/>
      <path d="M30 130 Q 60 126, 90 132 T 150 130 T 210 132 T 250 128" stroke="#7a3a20" strokeWidth="1.2" fill="none" opacity="0.6"/>
      <ellipse cx="140" cy="166" rx="108" ry="10" fill="#C24A3D"/>
      <ellipse cx="140" cy="166" rx="96" ry="6" fill="#A03829" opacity="0.6"/>
      <path d="M30 172 L 250 172 Q 240 210, 140 214 Q 40 210, 30 172 Z" fill="#A66A2E"/>
      <path d="M30 172 L 250 172" stroke="#7a4b1e" strokeWidth="1.2" opacity="0.35"/>
    </svg>
  );
}

window.Hero = Hero;
window.BurgerArt = BurgerArt;