// Main Latma app: routing + product modal

function App() {
  const [route, setRoute] = React.useState(() => {
    const hash = (window.location.hash || '#home').replace('#', '');
    const valid = ['home', 'historia', 'produtos', 'contato'];
    return valid.includes(hash) ? hash : 'home';
  });
  const [activeProduct, setActiveProduct] = React.useState(null);

  React.useEffect(() => {
    const onHashChange = () => {
      const hash = (window.location.hash || '#home').replace('#', '');
      const valid = ['home', 'historia', 'produtos', 'contato'];
      if (valid.includes(hash)) setRoute(hash);
    };
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

  const navigate = (r) => {
    setRoute(r);
    window.location.hash = r;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const showProduct = (p) => setActiveProduct(p);
  const closeProduct = () => setActiveProduct(null);

  React.useEffect(() => {
    if (activeProduct) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [activeProduct]);

  let pageEl;
  if (route === 'historia') pageEl = <HistoriaPage />;
  else if (route === 'produtos') pageEl = <ProdutosPage onProductClick={showProduct} />;
  else if (route === 'contato') pageEl = <ContatoPage />;
  else pageEl = <HomePage onNavigate={navigate} onProductClick={showProduct} />;

  return (
    <>
      <Nav route={route} onNavigate={navigate} />
      <main key={route} data-screen-label={`Latma · ${route}`}>
        {pageEl}
      </main>
      <Footer onNavigate={navigate} />

      {activeProduct && (
        <div className="modal-back" onClick={closeProduct}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <button className="modal-close" onClick={closeProduct} aria-label="Fechar">
              <CloseIcon size={18} />
            </button>
            <div className="modal-img" style={{ background: activeProduct.cardColor }}>
              <img src={activeProduct.img} alt={activeProduct.name} />
            </div>
            <div className="modal-body">
              <div className="tag">★ Latma · {activeProduct.weight}</div>
              <h2>{activeProduct.name}</h2>
              <p className="desc">{activeProduct.desc}</p>
              <div className="modal-specs">
                {Object.entries(activeProduct.specs).map(([k, v]) => (
                  <div className="modal-spec" key={k}>
                    <div className="label">{k}</div>
                    <div className="value">{v}</div>
                  </div>
                ))}
              </div>
              <div className="modal-ingredients">
                <h4>Ingredientes</h4>
                <p>{activeProduct.ingredientes}</p>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

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