import React, { ReactElement, useEffect } from "react";
import { Link } from "react-router-dom";
import { Card, Container, Row, Col } from "react-bootstrap";
import SectionDataLogo from "../images/home_data_icon.svg";
import SectionReportsLogo from "../images/home_reports_icon.svg";
import useMatomo from "../matomo/UseMatomo";

function Landing(): ReactElement {
    const { trackPageView } = useMatomo();

    useEffect(() => {
        trackPageView({ documentTitle: "GEANT Compendium Landing Page" });
    }, [trackPageView]);

    return (
        <Container className="py-5 grey-container">
            <Row>
                <div className="center-text">
                    <h1 className="geant-header">THE GÉANT COMPENDIUM OF NRENS</h1>

                    <div className="wordwrap pt-4">
                        <p style={{ textAlign: "left", fontSize: "20px" }}>
                            Each year GÉANT invites European National Research and Eduction Networks to
                            fill in a questionnaire asking about their network, their organisation,
                            standards and policies, connected users, and the services they offer their
                            users. This Compendium of responses is an authoritative reference source
                            for anyone with an interest in the development of research and education
                            networking in Europe and beyond. No two NRENs are identical, with great
                            diversity in their structures, funding, size, and focus.
                        </p>
                        <p style={{ textAlign: "left", fontSize: "20px" }}>
                            The GÉANT Compendium of NRENs Report is published annually, using both
                            data from the Compendium from other sources, including surveys and
                            studies carried out within different teams within GÉANT and the NREN
                            community. The Report gives a broad overview of the European NREN
                            landscape, identifying developments and trends.

                        </p>
                        <p style={{ textAlign: "left", fontSize: "20px" }}>
                            Compendium Data, the responses from the NRENs, are made available to be
                            viewed and downloaded. Graphs, charts, and tables can be customised to
                            show as many or few NRENs as required, across different years. These
                            can be downloaded as images or in PDF form.
                        </p>
                    </div>

                </div>
            </Row>
            <Row>
                <Col>
                    <Container
                        style={{ backgroundColor: "white" }}
                        className="rounded-border"
                    >
                        <Row className="justify-content-md-center">
                            <Col align={"center"}>

                                <Card border='light' style={{ width: "18rem" }}>
                                    <Link to="/data" className="link-text" >
                                        <Card.Img src={SectionDataLogo} />
                                        <Card.Body>
                                            <Card.Title>Compendium Data</Card.Title>
                                            <Card.Text>
                                                <span>Statistical representation of the annual Compendium Survey data is available here</span>
                                            </Card.Text>
                                        </Card.Body>
                                    </Link>
                                </Card>

                            </Col>
                            <Col align={"center"}>
                                <Card border='light' style={{ width: "18rem" }}>
                                    <a href="https://resources.geant.org/geant-compendia/" className="link-text" target="_blank" rel="noreferrer">
                                        <Card.Img src={SectionReportsLogo} />
                                        <Card.Body>
                                            <Card.Title>Compendium Reports</Card.Title>
                                            <Card.Text>
                                                A GÉANT Compendium Report is published annually, drawing
                                                on data from the Compendium Survey filled in by NRENs,
                                                complemented by information from other surveys
                                            </Card.Text>
                                        </Card.Body>
                                    </a>
                                </Card>
                            </Col>
                        </Row>
                    </Container>
                </Col>
            </Row>
        </Container >
    );
}

export default Landing;