/* global React, useApp, Photo, Icon, DishCard, DishModal, MENU, COMBOS, REVIEWS, PHOTO */
const { useState: useStateH } = React;

function Home() {
  const { nav } = useApp();
  const [dish, setDish] = useStateH(null);

  return (
    <main className="page minimal-page">
      {/* MINIMAL HERO */}
      <section className="minimal-hero">
        <div className="wrap minimal-hero-wrap">
          <h1 className="minimal-title">
            O sabor de <br/>uma pausa bem feita.
          </h1>
          <p className="minimal-subtitle">
            Sanduíches artesanais direto da chapa em Búzios.
          </p>
          <div className="minimal-actions">
            <button className="btn btn-pine btn-lg" onClick={() => nav("/cardapio")}>
              Ver cardápio
            </button>
            <span className="minimal-meta">aberto · ~30 min</span>
          </div>
        </div>
      </section>

      {/* SINGLE HIGHLIGHT IMAGE (minimalist) */}
      <section className="minimal-highlight">
        <div className="wrap">
          <div className="minimal-image-wrapper">
             <img src={MENU[0].image} alt={MENU[0].name} loading="eager" />
          </div>
        </div>
      </section>

      {/* FAVORITES */}
      <section className="minimal-section">
        <div className="wrap">
          <div className="minimal-section-head">
            <h2>Nossos Clássicos</h2>
            <button className="btn btn-ghost btn-sm" onClick={() => nav("/cardapio")}>
              Cardápio completo <Icon name="arrow" size={15} />
            </button>
          </div>
          <div className="menu-grid">
            {MENU.slice(0, 3).map((d) => <DishCard key={d.id} dish={d} onOpen={setDish} />)}
          </div>
        </div>
      </section>

      {/* REVIEWS - Text only */}
      <section className="minimal-section minimal-reviews">
        <div className="wrap">
           <div className="minimal-section-head">
             <h2>O que dizem</h2>
           </div>
           <div className="reviews-strip">
            {REVIEWS.slice(0, 3).map((r) => (
              <div className="review-minimal" key={r.name}>
                <p>"{r.text}"</p>
                <span className="meta"><b>{r.name}</b>, {r.area}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {dish && <DishModal dish={dish} onClose={() => setDish(null)} />}
    </main>
  );
}
Object.assign(window, { Home });