// Ćevabdžinica — traditional, checker, handwritten accents
const { useState: useStateCev, useEffect: useEffectCev } = React;

function Cevabdzinica({ tweaks, onBack, lang, onLangToggle }) {
  const t = (hr, en) => (lang === 'en' ? en : hr);
  const accent = tweaks.cevAccent;
  const [scrollY, setScrollY] = useStateCev(0);

  useEffectCev(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const menuItems = [
    { name: 'Ćevapi u somunu', en: 'Ćevapi in somun', price: '7,50 €', desc: '10 kom, crveni luk, ajvar', img: 'assets/food/cevapi-somun.jpg', tag: t('KLASIKA', 'CLASSIC') },
    { name: 'Ćevapi u kajmaku', en: 'Ćevapi in kajmak', price: '9,90 €', desc: 'Gotovo kultno, domaći kajmak', img: 'assets/food/cevapi-kajmak.jpg', tag: t('HIT', 'HIT') },
    { name: 'Gurmanska pljeskavica', en: 'Gourmet pljeskavica', price: '9,50 €', desc: 'Punjena slaninom i sirom', img: 'assets/food/pljeskavica.jpg' },
    { name: 'Mali ćevapi u pola somuna', en: 'Small ćevapi, half bun', price: '5,50 €', desc: '5 kom, za brz zalogaj', img: 'assets/food/mali-cevapi.jpg' },
    { name: 'Pohana piletina', en: 'Breaded chicken', price: '8,90 €', desc: 'Pomfrit, umak po izboru', img: 'assets/food/pohana-piletina.jpg' },
    { name: 'Plata mala', en: 'Small platter', price: '14,90 €', desc: 'Za dvoje, sve s roštilja', img: 'assets/food/plata-mala.webp', tag: t('ZA 2', 'FOR 2') },
  ];

  const sides = [
    { name: 'Ajvar', price: '1,80 €', img: 'assets/food/ajvar.jpg' },
    { name: 'Kajmak', price: '2,50 €', img: 'assets/food/kajmak.jpg' },
    { name: 'Somun', price: '1,20 €', img: 'assets/food/somun.jpg' },
    { name: 'Baklava', price: '3,00 €', img: 'assets/food/baklava.jpg' },
  ];

  return (
    <div className="cev-root" style={{ '--accent': accent }}>
      <nav className="cev-nav">
        <button className="cev-back" onClick={onBack}>
          <svg width="20" height="12" viewBox="0 0 20 12"><path d="M20 6 L2 6 M8 1 L2 6 L8 11" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>
          <span>{t('natrag', 'back')}</span>
        </button>
        <div className="cev-nav-logo">
          <img src="assets/logo.png" alt="Mačak" />
          <div className="cev-nav-title">
            <div className="cev-nav-main">MAČAK</div>
            <div className="cev-nav-sub">ĆEVABDŽINICA</div>
          </div>
        </div>
        <div className="cev-nav-links">
          <a href="#meni">{t('meni', 'menu')}</a>
          <a href="#galerija">{t('galerija', 'gallery')}</a>
          <a href="#kontakt">{t('kontakt', 'contact')}</a>
          <button className="cev-lang" onClick={onLangToggle}>{lang === 'hr' ? 'EN' : 'HR'}</button>
          <a href="https://wolt.com" target="_blank" className="cev-wolt">{t('naruči', 'order')} →</a>
        </div>
      </nav>

      <div className="cev-checker-band top" />

      <section className="cev-hero">
        <div className="cev-hero-bg" style={{ transform: `translateY(${scrollY * 0.3}px)` }}>
          <img src="assets/food/cevapi-pljeskavica.jpg" alt="" />
        </div>
        <div className="cev-hero-overlay" />

        <div className="cev-hero-content">
          <div className="cev-hero-ribbon">
            <span>* ORIGINALNI SARAJEVSKI RECEPT *</span>
          </div>
          <h1 className="cev-hero-title">
            <span className="handwrite">{t('pravi', 'real')}</span>
            <span className="big">ĆEVAPI</span>
            <span className="handwrite small">{t('kod mačka', 'by mačak')}</span>
          </h1>
          <p className="cev-hero-sub">
            {t(
              'Obiteljska tradicija, domaći proizvodi, vrhunski užitak — na tanjuru od 2018.',
              'Family tradition, homemade ingredients, unbeatable flavor — since 2018.'
            )}
          </p>
          <div className="cev-hero-ctas">
            <a href="https://wolt.com" className="btn-primary">{t('naruči na Woltu', 'order on Wolt')}</a>
            <a href="#meni" className="btn-ghost">{t('pogledaj meni', 'see menu')}</a>
          </div>
        </div>

        {tweaks.catIntensity !== 'off' && (
          <div className="cev-hero-cat" dangerouslySetInnerHTML={{ __html: window.CatSVGs.peekingSide }} />
        )}
      </section>

      <section className="cev-story">
        <div className="cev-story-inner">
          <div className="cev-story-text">
            <div className="cev-section-label">
              <span className="tick">✦</span><span>{t('NAŠA PRIČA', 'OUR STORY')}</span><span className="tick">✦</span>
            </div>
            <h2>
              {t('Ćevap je ', 'A ćevap is ')}<em className="handwrite">{t('priča', 'a story')}</em>{t(', ne samo obrok.', ', not just a meal.')}
            </h2>
            <p>
              {t(
                'Krenuli smo 2018. s jednom roštiljnicom u Šibeniku i jednim ciljem — da svatko tko zagrize osjeti Sarajevo. Mljeveno miješamo svaki dan. Somun pečemo od jutra. Ajvar i kajmak spremamo po obiteljskom receptu.',
                'We started in 2018 with one grill in Šibenik and one goal — that anyone who takes a bite tastes Sarajevo. We mince the meat daily. Bake the somun every morning.'
              )}
            </p>
            <div className="cev-story-stats">
              <div><b>7</b><span>{t('godina', 'years')}</span></div>
              <div><b>4.8★</b><span>Google</span></div>
              <div><b>100%</b><span>{t('domaće', 'homemade')}</span></div>
            </div>
          </div>
          <div className="cev-story-img">
            <img src="assets/food/mali-cevapi.jpg" alt="" />
            <div className="cev-story-badge">
              <span className="handwrite">{t('kuha se', 'cooking')}</span>
              <span className="handwrite">{t('s ljubavlju', 'with love')}</span>
            </div>
          </div>
        </div>
      </section>

      {tweaks.catIntensity === 'playful' && (
        <div className="cev-cat-strip">
          <div className="cev-cat-strip-inner" style={{ transform: `translateX(${-scrollY * 0.4}px)` }}>
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="cev-paw" dangerouslySetInnerHTML={{ __html: window.CatSVGs.paw }} />
            ))}
          </div>
        </div>
      )}

      <section id="meni" className="cev-menu">
        <div className="cev-menu-header">
          <div className="cev-section-label">
            <span className="tick">✦</span><span>{t('MENI — HIGHLIGHT', 'MENU — HIGHLIGHTS')}</span><span className="tick">✦</span>
          </div>
          <h2>{t('Ono što ', 'What we ')}<em className="handwrite">{t('najviše', 'do best')}</em>{t(' radimo.', '.')}</h2>
          <p className="cev-menu-intro">
            {t('Puni meni dostupan u lokalu i na Woltu.', 'Full menu available in-house and on Wolt.')}
          </p>
        </div>

        <div className="cev-menu-grid">
          {menuItems.map((item, i) => (
            <div key={i} className="cev-menu-card">
              <div className="cev-menu-img-wrap">
                <img src={item.img} alt={item.name} loading="lazy" />
                {item.tag && <span className="cev-menu-tag">{item.tag}</span>}
              </div>
              <div className="cev-menu-info">
                <div className="cev-menu-row">
                  <h3>{t(item.name, item.en)}</h3>
                  <div className="cev-menu-dots" />
                  <span className="cev-menu-price">{item.price}</span>
                </div>
                <p>{item.desc}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="cev-sides">
          <div className="cev-sides-label"><span className="handwrite">+ dodaci</span></div>
          <div className="cev-sides-row">
            {sides.map((s, i) => (
              <div key={i} className="cev-side">
                <div className="cev-side-img"><img src={s.img} alt="" /></div>
                <div className="cev-side-name">{s.name}</div>
                <div className="cev-side-price">{s.price}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="galerija" className="cev-gallery">
        <div className="cev-section-label centered">
          <span className="tick">✦</span><span>{t('IZ LOKALA', 'FROM THE SHOP')}</span><span className="tick">✦</span>
        </div>
        <h2 className="cev-gallery-title">
          {t('Miris ', 'The smell of ')}<em className="handwrite">{t('ugljena', 'charcoal')}</em>{t(', zvuk roštilja.', ', the sound of the grill.')}
        </h2>

        <div className="cev-gallery-grid">
          <div className="gcell g1"><img src="assets/food/cevapi-kajmak.jpg" alt="" /></div>
          <div className="gcell g2"><img src="assets/food/cevapi-somun.jpg" alt="" /></div>
          <div className="gcell g3"><img src="assets/food/ajvar.jpg" alt="" /></div>
          <div className="gcell g4"><img src="assets/food/plata-mala.webp" alt="" /></div>
          <div className="gcell g5"><img src="assets/food/kajmak.jpg" alt="" /></div>
          <div className="gcell g6"><img src="assets/food/somun.jpg" alt="" /></div>
        </div>
      </section>

      <div className="cev-checker-band" />

      <section id="kontakt" className="cev-contact">
        <div className="cev-contact-inner">
          <div className="cev-contact-left">
            <div className="cev-section-label">
              <span className="tick">✦</span><span>{t('NAĐI NAS', 'FIND US')}</span><span className="tick">✦</span>
            </div>
            <h2>{t('Svrati na ', 'Drop in for a ')}<em className="handwrite">{t('ćevap', 'ćevap')}</em>.</h2>

            <div className="cev-info-block">
              <div className="cev-info-row">
                <span className="lbl">{t('ADRESA', 'ADDRESS')}</span>
                <span>Ul. Velimira Škorpika 29<br/>22000 Šibenik</span>
              </div>
              <div className="cev-info-row">
                <span className="lbl">{t('TELEFON', 'PHONE')}</span>
                <span>+385 95 577 3402</span>
              </div>
              <div className="cev-info-row">
                <span className="lbl">{t('RADNO VRIJEME', 'HOURS')}</span>
                <span>Pon–Ned<br/>10:00 – 22:00</span>
              </div>
              <div className="cev-info-row">
                <span className="lbl">{t('NARUDŽBA', 'DELIVERY')}</span>
                <span><a href="https://wolt.com" target="_blank">Wolt →</a></span>
              </div>
            </div>
          </div>

          <div className="cev-contact-right">
            <div className="cev-map">
              <iframe
                src="https://www.google.com/maps?q=Ul.+Velimira+%C5%A0korpika+29,+22000+%C5%A0ibenik&hl=hr&z=17&output=embed"
                style={{ border: 0, width: '100%', height: '100%' }}
                loading="lazy"
                title="Ćevabdžinica Mačak — Ul. Velimira Škorpika 29, Šibenik"
              />
              <div className="cev-map-pin">
                <div className="cev-map-pin-inner" style={{ background: accent }}>
                  <img src="assets/logo.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer className="cev-footer">
        <div className="cev-footer-top">
          <div className="cev-footer-logo">
            <img src="assets/logo.png" alt="" />
            <div>
              <div className="cev-footer-brand">MAČAK ĆEVABDŽINICA</div>
              <div className="cev-footer-tag handwrite">
                {t('Po originalnom sarajevskom receptu', 'The original Sarajevo recipe')}
              </div>
            </div>
          </div>
          <div className="cev-footer-nav">
            <a href="#meni">{t('meni', 'menu')}</a>
            <a href="#galerija">{t('galerija', 'gallery')}</a>
            <a href="#kontakt">{t('kontakt', 'contact')}</a>
            <a href="https://wolt.com">Wolt</a>
            <a href="#" onClick={(e) => { e.preventDefault(); onBack(); }}>{t('← restoran', '← restaurant')}</a>
          </div>
        </div>
        <div className="cev-footer-bottom">
          <span>© 2026 Mačak d.o.o. · Šibenik</span>
          <span>{t('Sva prava pridržana.', 'All rights reserved.')}</span>
        </div>
      </footer>

      {tweaks.catIntensity !== 'off' && (
        <div className="cev-corner-cat" dangerouslySetInnerHTML={{ __html: window.CatSVGs.sitting }} />
      )}
    </div>
  );
}

window.Cevabdzinica = Cevabdzinica;