import { useEffect, useState } from "react";
import { Nav } from "./components/Nav";
import { Hero } from "./components/Hero";
import { FlavorSelector } from "./components/FlavorSelector";
import { Story } from "./components/Story";
import { Faq } from "./components/Faq";
import { Footer } from "./components/Footer";
import type { BrandData, ProductsData } from "./types";

export function App() {
  const [products, setProducts] = useState<ProductsData | null>(null);
  const [brand, setBrand] = useState<BrandData | null>(null);

  useEffect(() => {
    Promise.all([
      fetch("/data/products.json").then((res) => res.json() as Promise<ProductsData>),
      fetch("/data/brand.json").then((res) => res.json() as Promise<BrandData>),
    ]).then(([productsData, brandData]) => {
      setProducts(productsData);
      setBrand(brandData);
    });
  }, []);

  if (!products || !brand) {
    return null;
  }

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <FlavorSelector products={products.products} />
        <Story />
        <Faq />
      </main>
      <Footer brand={brand} />
    </>
  );
}