import "./App.scss";
import TopMenu from "./TopMenu";
import "./index.css";

import BannerImage1 from "./assets/banner1.jpg";
import PhilosophyBanner from "./PhilosophyBanner";
import IngredientBanner from "./IngredientBanner";
import SmallBanner from "./SmallBanner";

import MenuBannerImage from "./assets/main_img_01.jpg";
import ShopBannerImage from "./assets/main_img_02.jpg";
import OwnerBanner from "./OwnerBanner";
import MoreInfo from "./MoreInfo";

function App() {
  return (
    <>
      <TopMenu />

      <div
        className="banner-image"
        style={{
          backgroundImage: `url(${BannerImage1})`,
        }}
      ></div>

      <article className="content">
        <iframe
          className="youtube-ad"
          width="100%"
          height="100%"
          src="https://www.youtube.com/embed/c6bPiFPfeZI?rel=0"
          title="YouTube video player"
          frameBorder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerPolicy="strict-origin-when-cross-origin"
          allowFullScreen
        />
        <div className="wrapper1">
          <SmallBanner
            image={MenuBannerImage}
            title={["가격 이상의 가치가 담긴 ", "다양한 메뉴를 확인해 보세요"]}
            linkText="한솥 메뉴"
          />
          <SmallBanner
            image={ShopBannerImage}
            title={[
              "갓 지은 한끼가 기다리고 있는 ",
              "가까운 한솥 매장을 찾아보세요",
            ]}
            linkText="주변점포찾기"
          />
        </div>
        <OwnerBanner />
        <PhilosophyBanner />
        <IngredientBanner />
        <MoreInfo />
        <footer>
          바닥글을 넣기: 그런데 이미지 너무 많고 오래걸려 placeholder 로 대체
        </footer>
      </article>
    </>
  );
}

export default App;