import Link from "next/link";

export default function Hero() {
    return (
        <>
            {/* Spacer */}
            <div className="hero-spacer" />

            <section className="nyra-hero-section">
                <div className="nyra-hero-aspect">
                    <div className="nyra-hero-inner">
                        <div className="nyra-hero-inner-wrap">
                            <div className="nyra-hero-content">
                                <h1 className="nyra-hero-title">
                                    We Are In The Business Of
                                    <br />
                                    <span className="nyra-bold">Building Leadership<span className="nyra-potential-break"> </span>Potential</span>
                                </h1>

                                <Link
                                    href="/about-us"
                                    className="inline-block"
                                    aria-label="Learn more about us"
                                >
                                    <img
                                        src="/header_knowmore_button.png"
                                        alt="Know More"
                                        width={280}
                                        height={79}
                                        className="nyra-hero-btn-img"
                                    />
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <style>{`
                html, body {
                    overflow-x: hidden;
                    width: 100%;
                }

                .hero-spacer {
                    width: 100%;
                    height: 105px;
                    flex-shrink: 0;
                }

                .nyra-hero-section {
                    display: block;
                    width: 100vw !important;
                    position: relative;
                    left: 50%;
                    margin-left: -50vw;
                    margin-right: -50vw;
                    overflow: hidden;
                    z-index: 0;
                }

                .nyra-hero-aspect {
                    position: relative;
                    width: 100%;
                    min-height: 520px;
                    aspect-ratio: 16 / 7;
                    background-color: #2f3746;
                    background-image: url('/nyraleadership.jpg');
                    background-size: cover;
                    background-position: center 22%;
                    background-repeat: no-repeat;
                }

                .nyra-hero-aspect::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: rgba(47,55,70,0.70);
                    z-index: 1;
                }

                .nyra-hero-inner {
                    position: absolute;
                    inset: 0;
                    z-index: 10;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    box-sizing: border-box;
                }

                .nyra-hero-inner-wrap {
                    max-width: 1140px;
                    width: 100%;
                    margin: 0 auto;
                    padding: 0 24px;
                    box-sizing: border-box;
                }

                .nyra-hero-content {
                    width: 100%;
                    max-width: 700px;
                    box-sizing: border-box;
                }

                .nyra-hero-title {
                    color: #FFFFFF;
                    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                    font-weight: 300;
                    font-size: 44px;
                    line-height: 1.35;
                    letter-spacing: 0.01em;
                    margin: 0 0 40px 0;
                    padding: 0;
                    word-break: keep-all;
                    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
                }

                .nyra-bold { 
                    font-weight: 600;
                }

                .nyra-potential-break {
                    display: inline;
                }

                .nyra-hero-btn-img {
                    width: 280px;
                    max-width: 100%;
                    height: auto;
                    display: block;
                    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
                }

                @media (max-width: 1100px) {
                    .nyra-hero-title { font-size: 38px; }
                }

                @media (max-width: 900px) {
                    .nyra-hero-title { font-size: 32px; }
                    .nyra-hero-btn-img { width: 230px; }
                }

                @media (max-width: 768px) {
                    .hero-spacer { height: 75px; }
                    .nyra-hero-aspect {
                        aspect-ratio: unset;
                        min-height: 420px;
                    }
                    .nyra-hero-title {
                        font-size: 26px;
                        margin-bottom: 28px;
                    }
                    .nyra-hero-btn-img { width: 200px; }
                    .nyra-potential-break {
                        display: block;
                    }
                }

                @media (max-width: 480px) {
                    .hero-spacer { height: 65px; }
                    .nyra-hero-aspect { min-height: 360px; }
                    .nyra-hero-title {
                        font-size: 20px;
                        margin-bottom: 20px;
                    }
                    .nyra-hero-btn-img { width: 170px; }
                }

                @media (max-width: 360px) {
                    .nyra-hero-aspect { min-height: 320px; }
                    .nyra-hero-title { font-size: 16px; }
                    .nyra-hero-btn-img { width: 145px; }
                }
            `}</style>
        </>
    );
}