// Restoran — modern, minimal, editorial
const { useState: useStateRest, useEffect: useEffectRest } = React;

function Restoran({ tweaks, onBack, lang, onLangToggle }) {
  const t = (hr, en) => (lang === 'en' ? en : hr);
  const [scrollY, setScrollY] = useStateRest(0);
  const [heroCatVisible, setHeroCatVisible] = useStateRest(true);
  const heroCatRef = React.useRef(null);
  const [formState, setFormState] = useStateRest({
    date: '', time: '19:30', guests: 2, name: '', phone: '', submitted: false,
  });
  const isDark = tweaks.restDark;

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

  useEffectRest(() => {
    const el = heroCatRef.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([entry]) => setHeroCatVisible(entry.isIntersecting),
      { threshold: 0 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [tweaks.catIntensity]);

  const dishes = [
    { name: 'Pečena svinjetina', en: 'Roast pork', price: '14,90 €', desc: 'Pire krompir, umak od majčine dušice', img: 'assets/food/pecena-svinjetina.webp' },
    { name: 'Gulaš', en: 'Goulash', price: '12,50 €', desc: 'Polagano kuhan, s knedlom', img: 'assets/food/gulas.webp' },
    { name: 'BBQ rebarca', en: 'BBQ ribs', price: '17,50 €', desc: 'Pomfrit, coleslaw, domaći BBQ', img: 'assets/food/rebarca-white.webp' },
    { name: 'Šašlik', en: 'Šašlik', price: '15,90 €', desc: 'Punjene mesne okruglice, ajvar', img: 'assets/food/saslik.webp' },
    { name: 'Mesne okruglice u siru', en: 'Cheese-stuffed meatballs', price: '13,50 €', desc: 'Sezonsko povrće, riža', img: 'assets/food/mesne-okruglice.webp' },
    { name: 'Velika plata', en: 'Grand platter', price: '48,00 €', desc: 'Za 3–4 osobe, sve s roštilja', img: 'assets/food/plata-velika.webp' },
  ];

  const submit = (e) => {
    e.preventDefault();
    setFormState(s => ({ ...s, submitted: true }));
  };

  return (
    <div className={`rest-root ${isDark ? 'dark' : 'light'}`}>
      <nav className="rest-nav">
        <button className="rest-back" onClick={onBack}>
          <svg width="18" height="10" viewBox="0 0 20 12"><path d="M20 6 L2 6 M8 1 L2 6 L8 11" stroke="currentColor" strokeWidth="1.2" fill="none"/></svg>
          <span>{t('natrag', 'back')}</span>
        </button>
        <div className="rest-brand">
          <span className="rest-brand-main">MAČAK</span>
          <span className="rest-brand-div">—</span>
          <span className="rest-brand-sub">{t('Restoran', 'Restaurant')}</span>
        </div>
        <div className="rest-nav-links">
          <a href="#menu">{t('meni', 'menu')}</a>
          <a href="#prostor">{t('prostor', 'space')}</a>
          <a href="#kontakt">{t('kontakt', 'contact')}</a>
          <button className="rest-lang" onClick={onLangToggle}>{lang === 'hr' ? 'EN' : 'HR'}</button>
          <a href="#rezervacija" className="rest-cta">{t('rezerviraj stol', 'reserve a table')}</a>
        </div>
      </nav>

      <section className="rest-hero">
        <div className="rest-hero-left">
          <div className="rest-hero-meta">
            <span>N°</span><span className="num">01</span>
            <span className="bar" />
            <span>{t('ŠIBENIK, 2024', 'ŠIBENIK, 2024')}</span>
          </div>

          <h1 className="rest-hero-title">
            <span>{t('Domaća kuhinja,', 'Home cooking,')}</span>
            <span><em>{t('podignuta', 'elevated')}</em></span>
            <span>{t('na razinu.', 'to a new level.')}</span>
          </h1>

          <p className="rest-hero-sub">
            {t(
              'Pored ćevabdžinice po kojoj nas znate, otvorili smo restoran — isti nepopustljivi standardi, širi meni, stol za cijelu obitelj.',
              'Alongside the grill house that made our name, we opened a restaurant — the same uncompromising standards, a wider menu, a table for the whole family.'
            )}
          </p>

          <div className="rest-hero-ctas">
            <a href="#rezervacija" className="rest-btn primary">{t('rezerviraj stol', 'reserve a table')}</a>
            <a href="#menu" className="rest-btn ghost">{t('pogledaj meni', 'see the menu')}</a>
          </div>

          <div className="rest-hero-stats">
            <div><b>4.7</b><span>Google</span></div>
            <div><b>10–22h</b><span>{t('svaki dan', 'every day')}</span></div>
            <div><b>22</b><span>{t('stolova', 'tables')}</span></div>
          </div>
        </div>

        <div className="rest-hero-right">
          <div className="rest-hero-img-frame" style={{ transform: `translateY(${scrollY * -0.08}px)` }}>
            <img src="assets/food/plata_velika-upscaled.webp" alt="" />
            <div className="rest-hero-img-cap">
              <span>{t('Velika plata,', 'Grand platter,')}</span>
              <span>{t('za cijeli stol', 'for the whole table')}</span>
            </div>
            {tweaks.catIntensity !== 'off' && (
              <div ref={heroCatRef} className="rest-hero-cat" dangerouslySetInnerHTML={{ __html: window.CatSVGs.lounging }} />
            )}
          </div>
        </div>
      </section>

      <div className="rest-marquee">
        <div className="rest-marquee-track">
          {Array.from({ length: 3 }).map((_, i) => (
            <span key={i}>
              <em>Mačak Restoran</em>
              <span className="sep">◆</span>
              <span>{t('Obiteljska tradicija', 'Family tradition')}</span>
              <span className="sep">◆</span>
              <em>Šibenik</em>
              <span className="sep">◆</span>
              <span>{t('Domaći proizvodi', 'Homemade ingredients')}</span>
              <span className="sep">◆</span>
            </span>
          ))}
        </div>
      </div>

      <section className="rest-feature">
        <div className="rest-feature-label"><span className="num">02</span><span>{t('PRISTUP', 'APPROACH')}</span></div>
        <div className="rest-feature-grid">
          <div className="rest-feature-text">
            <h2>{t('Priprema traje,', 'It takes time,')} <em>{t('okus ostaje.', 'the flavor stays.')}</em></h2>
            <p>
              {t(
                'Mljeveno miješamo svaki dan. Gulaš se kuha satima. Svinjetina ide u pećnicu u 7 ujutro. Nema gotovih umaka, nema prečica.',
                'Minced daily. Goulash that simmers for hours. Pork in the oven by 7am. No premade sauces, no shortcuts.'
              )}
            </p>
            <div className="rest-feature-points">
              <div><b>01</b><span>{t('Meso iz lokalnih izvora', 'Locally sourced meat')}</span></div>
              <div><b>02</b><span>{t('Domaći kruh, somun, ajvar', 'House bread, somun, ajvar')}</span></div>
              <div><b>03</b><span>{t('Sezonski prilozi', 'Seasonal sides')}</span></div>
            </div>
          </div>
          <div className="rest-feature-img"><img src="assets/food/gulas.webp" alt="" /></div>
        </div>
      </section>

      <section id="menu" className="rest-menu">
        <div className="rest-menu-head">
          <div className="rest-feature-label"><span className="num">03</span><span>{t('MENI — ODABIR', 'MENU — SELECTION')}</span></div>
          <h2>{t('Šest jela,', 'Six dishes,')}<br/><em>{t('svako provjereno.', 'each one earned.')}</em></h2>
          <p>{t('Puni meni po dolasku. Sezonski se mijenja.', 'The full menu is at the table. It changes with the season.')}</p>
        </div>

        <div className="rest-menu-list">
          {dishes.map((d, i) => (
            <div key={i} className="rest-dish">
              <div className="rest-dish-num">N° {String(i + 1).padStart(2, '0')}</div>
              <div className="rest-dish-img"><img src={d.img} alt={d.name} loading="lazy" /></div>
              <div className="rest-dish-info">
                <div className="rest-dish-title">
                  <h3>{t(d.name, d.en)}</h3>
                  <span className="rest-dish-price">{d.price}</span>
                </div>
                <p>{d.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section id="prostor" className="rest-space">
        <div className="rest-space-grid">
          <div className="rest-space-img big"><img src="assets/space/indoor-2.webp" alt="" /></div>
          <div className="rest-space-text">
            <div className="rest-feature-label"><span className="num">04</span><span>{t('PROSTOR', 'THE ROOM')}</span></div>
            <h2>{t('Stol za dvoje,', 'A table for two,')}<br/><em>{t('stol za dvadeset.', 'a table for twenty.')}</em></h2>
            <p>
              {t(
                'Svijetao prostor, drveni stolovi, tihi ugao kad trebaš ugao. Idealno za obiteljski ručak ili poslovni sastanak.',
                'A bright room, wooden tables, a quiet corner when you need one. Made for a family lunch or a working dinner.'
              )}
            </p>
          </div>
          <div className="rest-space-img"><img src="assets/food/meals-table-salads.webp" alt="" /></div>
          <div className="rest-space-img"><img src="assets/food/plata-mala.webp" alt="" /></div>
        </div>
      </section>

      <section id="rezervacija" className="rest-reserve">
        <div className="rest-reserve-inner">
          <div className="rest-reserve-left">
            <div className="rest-feature-label"><span className="num">05</span><span>{t('REZERVACIJA', 'RESERVATION')}</span></div>
            <h2>{t('Rezerviraj', 'Reserve')} <em>{t('stol.', 'your table.')}</em></h2>
            <p>
              {t(
                'Tri koraka — datum, broj ljudi, kontakt. Javit ćemo se unutar sat vremena za potvrdu.',
                "Three steps — date, party size, contact. We'll confirm within the hour."
              )}
            </p>
          </div>

          <form className="rest-reserve-form" onSubmit={submit}>
            {formState.submitted ? (
              <div className="rest-reserve-success">
                <div className="rest-reserve-check">✓</div>
                <h3>{t('Primili smo zahtjev.', 'Request received.')}</h3>
                <p>
                  {t('Javit ćemo se na ', "We'll contact you at ")}
                  <b>{formState.phone || '+385 …'}</b>
                  {t(' za potvrdu.', ' to confirm.')}
                </p>
              </div>
            ) : (
              <>
                <div className="rest-reserve-row">
                  <label>
                    <span>{t('datum', 'date')}</span>
                    <input type="date" required value={formState.date}
                           onChange={e => setFormState({ ...formState, date: e.target.value })} />
                  </label>
                  <label>
                    <span>{t('vrijeme', 'time')}</span>
                    <select value={formState.time}
                            onChange={e => setFormState({ ...formState, time: e.target.value })}>
                      {['12:00','13:00','14:00','18:00','19:00','19:30','20:00','20:30','21:00'].map(tv => (
                        <option key={tv}>{tv}</option>
                      ))}
                    </select>
                  </label>
                </div>
                <label className="guests-label">
                  <span>{t('broj gostiju', 'party size')}</span>
                  <div className="guests-stepper">
                    <button type="button" onClick={() => setFormState(s => ({ ...s, guests: Math.max(1, s.guests - 1) }))}>−</button>
                    <span>{formState.guests}</span>
                    <button type="button" onClick={() => setFormState(s => ({ ...s, guests: Math.min(12, s.guests + 1) }))}>+</button>
                  </div>
                </label>
                <label className="full">
                  <span>{t('ime', 'name')}</span>
                  <input type="text" required value={formState.name}
                         onChange={e => setFormState({ ...formState, name: e.target.value })} />
                </label>
                <label className="full">
                  <span>{t('telefon', 'phone')}</span>
                  <input type="tel" required placeholder="+385 91 …" value={formState.phone}
                         onChange={e => setFormState({ ...formState, phone: e.target.value })} />
                </label>
                <button className="rest-btn primary full" type="submit">{t('pošalji zahtjev', 'send request')}</button>
              </>
            )}
          </form>
        </div>
      </section>

      <section className="rest-map-section">
        <iframe
          className="rest-map"
          src="https://www.google.com/maps?q=43.76091089362504,15.863569523574576&hl=hr&z=18&output=embed"
          loading="lazy"
          title="Restoran Mačak — Šibenski most 4, Šibenik"
        />
      </section>

      <footer id="kontakt" className="rest-footer">
        <div className="rest-footer-grid">
          <div className="rest-footer-col">
            <h4>{t('NAĐI NAS', 'FIND US')}</h4>
            <p>Šibenski most 4<br/>22000 Šibenik<br/>
              <a href="https://www.google.com/maps?q=43.76073466799106,15.863711045852817" target="_blank">{t('otvori u kartama', 'open in maps')} →</a>
            </p>
          </div>
          <div className="rest-footer-col">
            <h4>{t('KONTAKT', 'CONTACT')}</h4>
            <p>+385 95 577 3402<br/>restoran@macak.hr</p>
          </div>
          <div className="rest-footer-col">
            <h4>{t('RADNO VRIJEME', 'HOURS')}</h4>
            <p>Pon–Ned<br/>10:00 – 22:00</p>
          </div>
          <div className="rest-footer-col">
            <h4>{t('NARUDŽBA', 'DELIVERY')}</h4>
            <p><a href="https://wolt.com" target="_blank">Wolt →</a><br/>
              <a href="#" onClick={e => { e.preventDefault(); onBack(); }}>{t('← ćevabdžinica', '← grill house')}</a>
            </p>
          </div>
        </div>

        <div className="rest-footer-brand-row">
          <div className="rest-footer-brand">
            <img src="assets/logo.png" alt="" />
            <span>MAČAK — {t('Restoran & Ćevabdžinica', 'Restaurant & Grill House')}</span>
          </div>
          <div className="rest-footer-meta">© 2026 · {t('Sva prava pridržana.', 'All rights reserved.')}</div>
        </div>
      </footer>

      {tweaks.catIntensity === 'playful' && (
        <div className={`rest-corner-cat ${heroCatVisible ? '' : 'visible'}`} dangerouslySetInnerHTML={{ __html: window.CatSVGs.peekingOver }} />
      )}
    </div>
  );
}

window.Restoran = Restoran;