// App.js
import React from "react";
import { Container, Row, Col, Button } from "react-bootstrap";

const App = () => {
const scrollToSection = (sectionId) => {
	const section = document.getElementById(sectionId);
	section.scrollIntoView({ behavior: "smooth" });
};

const buttonHoverStyle = {
	backgroundColor: "lightgreen",
	borderColor: "#007bff",
	border: "none",
	padding: "10px",
	display: "block",
	width: "max-width",
	margin: "auto",
	color: "white"
};

return (
	<Container fluid>
	<Row id="homePage"
		className="justify-content-center align-items-center 
					bg-primary text-white"
		style={{ minHeight: "99vh" }}>
		<Col className="text-center">
		<h1 className="text-success">GeeksforGeeks</h1>
		<p>A computer science portal</p>
		<Button variant="primary"
				className="mt-4"
				style={buttonHoverStyle}
				onClick={() => scrollToSection("section1")}>
			Section 1
		</Button>
		</Col>
	</Row>
	<Row id="section1"
			className="justify-content-center align-items-center"
			style={{ minHeight: "100vh", 
					backgroundColor: "gray", 
					padding: "10px" }}>
		<Col className="text-center">
		<h2>Section One</h2>
		<p>
			JavaScript is a lightweight, cross-platform, single-threaded, and
			interpreted compiled programming language. It is also known as the
			scripting language for webpages. It is well-known for the
			development of web pages, and many non-browser environments 
			also use it.
		</p>
		<Button variant="primary"
				className="mt-4"
				style={buttonHoverStyle}
				onClick={() => scrollToSection("section2")}>
			Scroll to First page
		</Button>
		</Col>
	</Row>
	<Row id="section2"
			className="justify-content-center align-items-center"
			style={{ minHeight: "100vh", 
					backgroundColor: "pink", 
					padding: "10px" }}>
		<Col className="text-center">
		<h2>Section Two</h2>
		<p>
			ReactJS is a declarative, efficient, and flexible JavaScript 
			library for building user interfaces. It is an open-source,
			component-based front-end library that is responsible 
			only for the view layer of the application.
		</p>
		<Button variant="primary"
				className="mt-4"
				style={buttonHoverStyle}
				onClick={() => scrollToSection("homePage")}>
			Scroll to First page
		</Button>
		</Col>
	</Row>
	</Container>
);
};

export default App;