"use client";

import AssessmentCard from "@/components/AssessmentCard";
import { assessments } from "@/data/assessments";

export default function AssessmentsPage() {
    return (
        <>
            <style jsx>{`
                /* ── Content wrapper ── */
                .cw {
                    max-width: 1400px;
                    margin: 0 auto;
                    padding: 0 5.5%;
                    box-sizing: border-box;
                }
                @media (max-width: 1200px) { .cw { padding: 0 4.5%; } }
                @media (max-width: 767px)  { .cw { padding: 0 20px; } }

                /* ── Hero — position UNCHANGED: bottom -60px ── */
                .hero-section {
                    position: relative;
                    margin-top: 105px;
                    margin-bottom: 60px;
                }
                .hero-banner {
                    background: url('/images/assessment-header.jpg') center center / cover no-repeat;
                    height: 60vh;
                    min-height: 450px;
                    max-height: 600px;
                    width: 100%;
                }
                .hero-badge {
                    position: absolute;
                    bottom: -60px;
                    left: 0;
                    right: 0;
                    z-index: 10;
                }
                .hero-badge-inner {
                    background: linear-gradient(-90deg, #b53855 0%, #62c0e2 100%);
                    border-radius: 12px 12px 0 0;
                    padding: 45px 85px;
                    display: inline-block;
                    max-width: 85%;
                }
                .hero-title {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 38px;
                    font-weight: 700;
                    color: #ffffff;
                    margin: 0;
                    line-height: 1.3;
                    white-space: normal;
                    word-wrap: break-word;
                }

                /* Scale title box — bottom stays -60px on desktop/tablet */
                @media (max-width: 1024px) {
                    .hero-banner { min-height: 380px; height: 55vh; }
                    .hero-badge-inner { padding: 35px 50px; max-width: 90%; }
                    .hero-title { font-size: 30px; }
                }
                @media (max-width: 767px) {
                    .hero-section { margin-bottom: 30px; }
                    .hero-banner { min-height: 340px; height: 75vw; }
                    .hero-badge { bottom: -30px; }
                    .hero-badge-inner { padding: 22px 28px; max-width: 95%; border-radius: 8px 10px 0 0; }
                    .hero-title { font-size: 20px; }
                }
                @media (max-width: 480px) {
                    .hero-section { margin-bottom: 25px; }
                    .hero-banner { min-height: 300px; height: 78vw; }
                    .hero-badge { bottom: -25px; }
                    .hero-badge-inner { padding: 16px 20px; max-width: 96%; }
                    .hero-title { font-size: 16px; }
                }

                /* ── Cards section ── */
                .cards-section {
                    padding-top: 30px;
                    padding-bottom: 60px;
                }
                @media (max-width: 767px) { .cards-section { padding-top: 20px; } }

                .assessment-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 32px 48px;
                }
                @media (max-width: 1200px) { .assessment-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 40px; } }
                @media (max-width: 600px)  { .assessment-grid { grid-template-columns: 1fr; gap: 24px; } }
                @media (max-width: 767px)  { .cards-section { padding-bottom: 40px; } }
            `}</style>

            <div className="min-h-screen bg-white">
                {/* ===== HERO SECTION ===== */}
                <section className="hero-section">
                    <div className="hero-banner" />
                    <div className="cw hero-badge">
                        <div className="hero-badge-inner">
                            <h1 className="hero-title">Assessments</h1>
                        </div>
                    </div>
                </section>

                {/* ===== CARDS SECTION ===== */}
                <section className="cards-section">
                    <div className="cw">
                        <div className="assessment-grid">
                            {assessments.map((assessment) => (
                                <AssessmentCard key={assessment.id} assessment={assessment} />
                            ))}
                        </div>
                    </div>
                </section>
            </div>
        </>
    );
}