function Home() {
  const heroRef = useRef(null);
  useScrollReveal();

  useEffect(() => {
    const fn = () => {
      const y = window.scrollY;
      if (!heroRef.current) return;
      const plate1 = heroRef.current.querySelector('.p1');
      const plate2 = heroRef.current.querySelector('.p2');
      if (plate1) plate1.style.transform = `translateY(${y * 0.12}px) scale(1.02)`;
      if (plate2) plate2.style.transform = `translateY(${y * -0.08}px)`;
    };
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);

  const IMG = window.LUCE_IMG;

  const dishes = [
    { n: '01', name: 'Tagliatelle al Tartufo', note: 'ръчно рязана яйчена паста, черен зимен трюфел, отлежало пармиджано, кафяво масло', price: '70 лв.', img: IMG.dishes.tagliatelle },
    { n: '02', name: 'Branzino in Crosta', note: 'цял средиземноморски лаврак, печен в солена кора, финализиран на масата с лимоново масло', price: '115 лв.', img: IMG.dishes.branzino },
    { n: '03', name: 'Ossobuco alla Fiorentina', note: 'бавно задушен телешки джолан, ризото с шафран, гремолата от портокал и розмарин', price: '95 лв.', img: IMG.dishes.osso },
  ];

  return (
    <div className="page-fade">
      <Nav current="index" variant="light" />

      {/* HERO */}
      <section className="h-hero" ref={heroRef}>
        <span className="h-side-l num">OSTERIA LUCE · MMXVII · ФЛОРЕНЦИЯ — СОФИЯ</span>
        <span className="h-side-r num">БР. 048 / СЕЗОН · ПРОЛЕТ 26</span>

        <div className="h-hero-text">
          <div className="h-hero-meta">
            <span className="dot"/>
            <span className="h-hero-kicker"><em>отворени тази вечер</em> · маси от 18:00</span>
          </div>
          <h1>
            Една<br/>
            <span className="italic">кухня</span> <span className="amp">&amp;</span><br/>
            един дом.
          </h1>
          <p className="h-hero-sub">
            Флорентински по произход, софийски по сърце. Семейна остерия, която празнува тосканската кухня с лека ръка, истински огън и продукти от пазара.
          </p>
          <div className="h-hero-actions">
            <a href="reservations.html" className="btn filled">Резервирай маса</a>
            <a href="tasting.html" className="btn">Дегустационното меню →</a>
          </div>
        </div>

        <div className="h-hero-art">
          <div className="h-hero-plate p1" style={{backgroundImage: `url(${IMG.hero[0]})`}}/>
          <div className="h-hero-plate p2" style={{backgroundImage: `url(${IMG.dishes.pasta})`}}/>
        </div>

        <div className="h-hero-strip">
          <div className="cell">
            <span className="k">Звезди</span>
            <span className="v"><em>★★</em> Michelin 2025</span>
          </div>
          <div className="cell">
            <span className="k">Главен готвач</span>
            <span className="v">Елена <em>Капрезе</em></span>
          </div>
          <div className="cell">
            <span className="k">Вина</span>
            <span className="v">840 <em>етикета</em></span>
          </div>
          <div className="cell">
            <span className="k">Места</span>
            <span className="v">36 <em>куверта</em></span>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <section className="h-marquee marquee">
        <div className="marquee-track">
          {Array.from({length: 6}).map((_, i) => (
            <span key={i}>Флоренция · София &nbsp;·&nbsp; Osteria Luce &nbsp;·&nbsp; кухнята <em>на светлината</em> &nbsp;·&nbsp;&nbsp;</span>
          ))}
        </div>
      </section>

      {/* STORY */}
      <section className="h-story">
        <div className="h-story-left r-in">
          <div className="h-story-num">01 — Нашият дом</div>
          <h2>Не ресторант. Един <em>дом</em> с отворена врата.</h2>
          <a href="#" className="btn">Нашата история →</a>
        </div>
        <div className="h-story-right r-in">
          <p>
            През 2017 г. готвачката Елена Капрезе напусна двузвездна кухня в Милано, за да отвори малка остерия в уличката от детството си във Флоренция. Шест маси, меню, отпечатано на вестникарска хартия, и едно-единствено правило: <strong>да готвиш, сякаш всеки гост ти е роднина.</strong>
          </p>
          <p>
            Девет години по-късно Osteria Luce е семейство от два адреса — един на Via dei Neri и един на ул. „Цар Освободител“ в София — които говорят един и същ език: огън от дърва, прясно прибрано маслинено масло, паста, точена на сутринта, и почти религиозно уважение към простотата.
          </p>
          <p>
            Не преследваме тенденции. Не сервираме ястия, които самите ние не бихме яли. Пишем менюто всеки ден на ръка, със същата писалка със синьо мастило, с която баба Капрезе водеше списъка за пазара на Сант’Амброджо.
          </p>
          <div className="h-story-sign">— Елена</div>
          <div className="h-story-img">
            <div style={{backgroundImage:`url(${IMG.chef})`}}/>
            <div style={{backgroundImage:`url(${IMG.kitchen})`}}/>
          </div>
        </div>
      </section>

      {/* DISHES */}
      <section className="h-dishes">
        <div className="h-dishes-head r-in">
          <div>
            <div className="num">02 — От кухнята</div>
            <h2>Сезонна <em>карта</em></h2>
          </div>
          <a href="menu.html" className="btn">Виж цялото меню →</a>
        </div>
        <div className="h-dishes-grid">
          {dishes.map((d, i) => (
            <a key={i} href="menu.html" className="h-dish reveal-item r-in">
              <div className="h-dish-num">{d.n}</div>
              <div className="h-dish-img" style={{backgroundImage: `url(${d.img})`}}/>
              <div className="h-dish-body">
                <div>
                  <h3>{d.name.split(' ').slice(0,-1).join(' ')} <em>{d.name.split(' ').slice(-1)[0]}</em></h3>
                  <p>{d.note}</p>
                </div>
                <div className="h-dish-price">{d.price}</div>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* QUOTE */}
      <section className="h-quote">
        <div className="num r-in">03 — Философия</div>
        <blockquote className="r-in">
          « Готвенето е <em>акт на любов</em>, дисциплиниран от времето. Светлината не се хваща — тя се чака. »
        </blockquote>
        <cite className="r-in">Елена Капрезе — Главен готвач и собственик</cite>
      </section>

      {/* PRESS */}
      <section className="h-press">
        <div className="h-press-label">Какво казват за нас</div>
        <div className="h-press-logos">
          <span>★★ Michelin</span>
          <span>Капитал</span>
          <span>Condé Nast</span>
          <span>La Repubblica</span>
          <span>Bacchus</span>
          <span>50 Best</span>
        </div>
      </section>

      {/* RES CTA */}
      <section className="h-res-cta">
        <div className="r-in">
          <div className="num" style={{opacity:0.7}}>04 — Една маса</div>
          <h2 style={{marginTop:'16px'}}>Очакваме те <em>на масата</em>.</h2>
          <p>Резервациите са отворени до 60 дни предварително. Дегустационното меню се резервира поне 48 часа преди посещението.</p>
          <a href="reservations.html" className="btn">Резервирай сега →</a>
        </div>
        <div className="h-res-art r-in" style={{backgroundImage:`url(${IMG.interior[1]})`}}>
          <div className="plate-date">
            <span>Следваща вечер</span>
            <b>Пт · 24</b>
            <span>апр — 19:30</span>
          </div>
        </div>
      </section>

      <Footer />
      <TweaksPanel />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Home/>);