function MainComponent() { const [backgroundImage, setBackgroundImage] = React.useState('../images/japan-view-1.jpg'); const [index, setIndex] = React.useState(0); const images = [ '../images/japan-view-1.jpg', '../images/japan-view-2.jpg', '../images/japan-view-3.jpg', '../images/japan-view-4.jpg' ]; React.useEffect(()=>{ const intervalId = setInterval(()=>{ setIndex((prevIndex)=>{ const nextIndex = (prevIndex + 1) % images.length; setBackgroundImage(images[nextIndex]); return nextIndex; }); }, 3000); return ()=>clearInterval(intervalId); }, []); const imageCount = `0${index + 1} / 0${images.length}`; const handlePreviousClick = ()=>{ setIndex((prevIndex)=>{ const nextIndex = (prevIndex - 1 + images.length) % images.length; setBackgroundImage(images[nextIndex]); return nextIndex; }); }; const handleNextClick = ()=>{ setIndex((prevIndex)=>{ const nextIndex = (prevIndex + 1) % images.length; setBackgroundImage(images[nextIndex]); return nextIndex; }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center px-6 py-5 bg-[rgba(0,0,0,0.8)]", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-serif text-3xl text-white", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "ARK Shelter"), /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "text-white text-lg hover:text-gray-400", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#nature", className: "text-white text-lg hover:text-gray-400", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Nature")))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow relative", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: backgroundImage, alt: `Stunning view of a Japanese landscape, scene ${index + 1}`, className: "absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ease-in-out", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-10 p-12 flex flex-col justify-between", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "self-start", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-serif text-white text-2xl bg-[rgba(0,0,0,0.5)] px-4 py-2", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, imageCount)), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-serif text-9xl text-white leading-none uppercase tracking-wider bg-[rgba(0,0,0,0.5)] px-4 py-2", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Back to nature."), /*#__PURE__*/ React.createElement("p", { className: "mt-8 text-white font-serif text-2xl", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Discover nature ", /*#__PURE__*/ React.createElement("span", { className: "underline", __source: { fileName: "", lineNumber: 60, columnNumber: 80 }, __self: this }, "Scroll for more"))), /*#__PURE__*/ React.createElement("div", { className: "self-end flex justify-between items-center w-full", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white text-3xl", onClick: handlePreviousClick, __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "⮜"), /*#__PURE__*/ React.createElement("button", { className: "text-white text-3xl", onClick: handleNextClick, __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "⮞")), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-serif text-white text-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Need more info & prices?"), /*#__PURE__*/ React.createElement("p", { className: "font-serif text-white text-lg underline mt-2", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Download our brochure now"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, ` img { animation-name: fadeIn; animation-duration: 1s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `)); }