import * as React from "react";
import { makeStyles } from "@fluentui/react-components";
import "../style.css";

const useStyles = makeStyles({
  root: {
	minHeight: "100vh",
  },
});

const App: React.FC = () => {
	const styles = useStyles();

	return (
		<div className={styles.root}>
			<h2 className="headerTitle center">About Businessmap Add-In</h2>
			<div className="messageBar">
				<div className="messageBar-text">
					<p>Welcome to the Businessmap Add-In! Streamline your project management by creating task cards directly
						from your Outlook emails with our powerful Office Add-in.
						This tool offers two key features to enhance your workflow:</p>
					<p><b>Add Card (default board)</b>: Quickly convert emails into task cards on a predefined board. This
						feature allows you to create a card in a
						selected board, workflow, column, and lane set up during installation. You can also assign a default
						owner, ensuring consistent task management and
						reducing setup time.</p>
					<p><b>Add Card (custom board)</b>: For more detailed management, customize card creation by specifying
						the board, workflow, column, lane, and owner.
						This flexibility is ideal for handling multiple projects or assigning tasks to different team
						members directly from your emails.</p>
					<p><b>New to Businessmap?</b> <a href="https://businessmap.io" rel="noopener noreferrer" className="mbLink"
							target="_blank">Sign up now</a> to start managing your projects more effectively.</p>
					<p><b>Version:</b> 3.0</p>
				</div>
			</div>
		</div>
	);
};

export default App;