// Landing — split reveal; overlay slides outward, title grows on hover
const { useState, useEffect, useRef } = React;

function Landing({ tweaks, onNavigate, lang, onLangToggle }) {
  const [hovered, setHovered] = useState(null);

  const t = (hr, en) => (lang === 'en' ? en : hr);

  const SidePanel = ({ side, bgImg, title, titleEn, subtitle, subtitleEn, accent }) => {
    const isHovered = hovered === side;

    // Overlay slides OUT to its own edge (cev -> left, rest -> right)
    const overlayShift = isHovered
      ? (side === 'cev' ? 'translateX(-100%)' : 'translateX(100%)')
      : 'translateX(0)';

    return (
      <div
        className={`side-panel side-${side} ${isHovered ? 'hovered' : ''}`}
        onMouseEnter={() => setHovered(side)}
        onMouseLeave={() => setHovered(null)}
        onClick={() => onNavigate(side)}
      >
        <div className="panel-img" style={{ backgroundImage: `url(${bgImg})` }} />
        <div className="panel-overlay" style={{ transform: overlayShift }} />

        <div className={`panel-title-wrap side-${side}`}>
          <div className="panel-eyebrow" style={{ color: accent }}>
            {t(side === 'cev' ? 'od 2018' : 'novo 2024', side === 'cev' ? 'since 2018' : 'new 2024')}
          </div>
          <h1 className={`panel-title title-${side}`}>
            {t(title, titleEn)}
          </h1>
          <div className="panel-sub">{t(subtitle, subtitleEn)}</div>
          <div className={`panel-cta ${isHovered ? 'visible' : ''}`}>
            <span>{t('uđi', 'enter')}</span>
            <svg width="28" height="12" viewBox="0 0 28 12"><path d="M0 6 L22 6 M16 1 L22 6 L16 11" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>
          </div>
        </div>

        {tweaks.catIntensity !== 'off' && (
          <div className={`panel-cat side-${side} ${isHovered ? 'peek' : ''}`}
               dangerouslySetInnerHTML={{ __html: window.CatSVGs[side === 'cev' ? 'peekingSide' : 'sitting'] }} />
        )}
      </div>
    );
  };

  return (
    <div className={`landing-root intensity-${tweaks.catIntensity}`}>
      <header className="landing-header">
        <div className="header-left">
          <span className="loc">ŠIBENIK · HR</span>
        </div>
        <div className="header-right">
          <button className="lang-btn" onClick={onLangToggle}>
            <span className={lang === 'hr' ? 'on' : ''}>HR</span>
            <span className="divider">/</span>
            <span className={lang === 'en' ? 'on' : ''}>EN</span>
          </button>
        </div>
      </header>

      <main className="split">
        <SidePanel
          side="cev"
          bgImg="assets/food/cevapi-pljeskavica.jpg"
          title="Ćevabdžinica"
          titleEn="Grill House"
          subtitle="Po originalnom sarajevskom receptu — od 2018."
          subtitleEn="The original Sarajevo recipe — since 2018."
          accent={tweaks.cevAccent}
        />

        <div className="center-medallion">
          <div className="medallion-ring" style={{ '--ring': tweaks.cevAccent }}>
            <img src="assets/logo.png" alt="Mačak" />
          </div>
          <div className="medallion-caption">
            <div className="line" /><span>MAČAK</span><div className="line" />
          </div>
          <div className="medallion-sub">{t('ODABERI STRANU', 'CHOOSE A SIDE')}</div>
        </div>

        <SidePanel
          side="rest"
          bgImg="assets/food/meals-table-salads-upscaled.webp"
          title="Restoran"
          titleEn="Restaurant"
          subtitle="Nova adresa. Domaća kuhinja, podignuta razina."
          subtitleEn="A new address. Home cooking, elevated."
          accent="#1a1a1a"
        />
      </main>

      <footer className="landing-footer">
        <div className="landing-footer-side side-cev">
          <span className="lbl">{t('ĆEVABDŽINICA', 'GRILL HOUSE')}</span>
          <span>Ul. Velimira Škorpika 29 · Šibenik</span>
        </div>
        <div className="landing-footer-center">
          <span>+385 95 577 3402</span>
          <span className="dot">·</span>
          <span>{t('Svaki dan 10–22h', 'Every day 10–22h')}</span>
        </div>
        <div className="landing-footer-side side-rest">
          <span className="lbl">{t('RESTORAN', 'RESTAURANT')}</span>
          <span>Šibenski most 4 · Šibenik</span>
        </div>
      </footer>
    </div>
  );
}

window.Landing = Landing;