import { assessments } from "@/data/assessments";
import { notFound } from "next/navigation";

export default async function AssessmentDetailPage({
    params,
}: {
    params: Promise<{ slug: string }>;
}) {
    const { slug } = await params;
    const assessment = assessments.find((a) => a.id === slug);

    if (!assessment) {
        console.log('Assessment not found for slug:', slug);
        console.log('Available assessment ids:', assessments.map(a => a.id));
        notFound();
    }

    switch (assessment.id) {
        case "communication-acumen": return <CommunicationAcumenContent assessment={assessment} />;
        case "accidental-diminisher": return <AccidentalDiminisherContent assessment={assessment} />;
        case "conflict-management": return <ConflictManagementContent assessment={assessment} />;
        case "delegation-quotient": return <DelegationQuotientContent assessment={assessment} />;
        case "leadership-styles": return <LeadershipStylesContent assessment={assessment} />;
        case "listening-quotient": return <ListeningQuotientContent assessment={assessment} />;
        case "mentoring-acumen": return <MentoringAcumenContent assessment={assessment} />;
        case "influence-currency": return <InfluenceCurrencyContent assessment={assessment} />;
        case "social-style": return <SocialStyleContent assessment={assessment} />;
        case "trust-building-index": return <TrustBuildingContent assessment={assessment} />;
        default:
            console.log('No matching component for:', assessment.id);
            notFound();
    }
}

/* ─────────────────────────────────────────────
   SHARED STYLES (injected once via a wrapper)
───────────────────────────────────────────── */
function AssessmentStyles() {
    return (
        <style>{`
            /* ── Content wrapper ── */
            .a-cw {
                max-width: 1400px;
                margin: 0 auto;
                padding: 0 5.5%;
                box-sizing: border-box;
            }
            @media (max-width: 1200px) { .a-cw { padding: 0 4.5%; } }
            @media (max-width: 767px)  { .a-cw { padding: 0 20px; } }

            /* ── Hero — position UNCHANGED: bottom -60px ── */
            .a-hero {
                position: relative;
                margin-top: 105px;
                margin-bottom: 60px;
            }
            .a-hero-banner {
                height: 60vh;
                min-height: 500px;
                width: 100%;
                background-size: cover;
                background-position: center;
            }
            .a-hero-badge {
                position: absolute;
                bottom: -60px;
                left: 0;
                right: 0;
                z-index: 10;
            }
            .a-hero-badge-inner {
                display: inline-block;
                border-radius: 10px 15px 0 0;
                padding: 45px 85px;
                max-width: 85%;
                background: linear-gradient(to right, #62c0e2, #b53855);
            }
            .a-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) {
                .a-hero-banner { min-height: 380px; height: 55vh; }
                .a-hero-badge-inner { padding: 35px 50px; max-width: 90%; }
                .a-hero-title { font-size: 30px; }
            }
            @media (max-width: 767px) {
                .a-hero { margin-bottom: 30px; }
                .a-hero-banner { min-height: 340px; height: 75vw; }
                .a-hero-badge { bottom: -30px; }
                .a-hero-badge-inner { padding: 22px 28px; max-width: 95%; border-radius: 8px 10px 0 0; }
                .a-hero-title { font-size: 20px; }
            }
            @media (max-width: 480px) {
                .a-hero { margin-bottom: 25px; }
                .a-hero-banner { min-height: 300px; height: 78vw; }
                .a-hero-badge { bottom: -25px; }
                .a-hero-badge-inner { padding: 16px 20px; max-width: 96%; }
                .a-hero-title { font-size: 16px; }
            }

            /* ── Content section ── */
            .a-section {
                background: #fff;
                padding-top: 60px;
                padding-bottom: 80px;
            }
            @media (max-width: 1024px) { .a-section { padding-top: 40px; padding-bottom: 56px; } }
            @media (max-width: 767px)  { .a-section { padding-top: 28px; padding-bottom: 40px; } }

            /* ── Typography ── */
            .a-heading {
                font-size: 25px;
                font-weight: 700;
                color: #181B31;
                margin-bottom: 12.5px;
            }
            .a-body {
                font-size: 18px;
                line-height: 1.8;
                color: #5D6371;
                margin-bottom: 50px;
            }
            .a-list {
                list-style-type: disc;
                padding-left: 20px;
                font-size: 18px;
                color: #5D6371;
                margin-bottom: 50px;
            }
            .a-list li { margin-bottom: 8px; }
            .a-card-title {
                font-size: 25px;
                font-weight: 700;
                color: #181B31;
            }
            .a-cta-title {
                font-size: 21.6px;
                font-weight: 700;
                color: #181B31;
                margin-bottom: 20px;
            }

            @media (max-width: 1024px) {
                .a-heading    { font-size: 22px; }
                .a-body       { font-size: 16px; margin-bottom: 36px; }
                .a-list       { font-size: 16px; margin-bottom: 36px; }
                .a-card-title { font-size: 20px; }
                .a-cta-title  { font-size: 18px; }
            }
            @media (max-width: 767px) {
                .a-heading    { font-size: 18px; }
                .a-body       { font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
                .a-list       { font-size: 15px; margin-bottom: 24px; }
                .a-card-title { font-size: 17px; }
                .a-cta-title  { font-size: 16px; }
            }

            /* ── Icon grid ── */
            .a-icon-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 40px;
                margin-bottom: 80px;
            }
            @media (max-width: 1024px) { .a-icon-grid { gap: 28px; margin-bottom: 56px; } }
            @media (max-width: 767px)  { .a-icon-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; } }

            .a-icon-img {
                display: block;
                margin: 0 auto 20px;
                max-width: 160px;
                width: 100%;
            }
            @media (max-width: 767px) { .a-icon-img { max-width: 120px; } }
        `}</style>
    );
}

/* ─────────────────────────────────────────────
   SHARED HERO COMPONENT
───────────────────────────────────────────── */
function AssessmentHero({ image, title }: { image: string; title: string }) {
    return (
        <section className="a-hero">
            <div className="a-hero-banner" style={{ backgroundImage: `url(${image})` }} />
            <div className="a-cw a-hero-badge">
                <div className="a-hero-badge-inner">
                    <h1 className="a-hero-title">{title}</h1>
                </div>
            </div>
        </section>
    );
}

/* ─────────────────────────────────────────────
   SHARED ICON CARD GRID
───────────────────────────────────────────── */
function IconGrid({ items }: { items: { img: string; alt: string; title: string }[] }) {
    return (
        <div className="a-icon-grid">
            {items.map((item, i) => (
                <div key={i} style={{ textAlign: 'center' }}>
                    <img src={item.img} alt={item.alt} className="a-icon-img" />
                    <h5 className="a-card-title">{item.title}</h5>
                </div>
            ))}
        </div>
    );
}

/* ─────────────────────────────────────────────
   SHARED CTA / ADD TO CART
───────────────────────────────────────────── */
function AddToCart({ title }: { title: string }) {
    return (
        <div style={{ textAlign: 'center' }}>
            <h3 className="a-cta-title">{title}</h3>
            <button
                type="button"
                className="rounded-md bg-gradient-to-r from-[#62c0e2] to-[#b53855] px-[30px] py-[15px] text-[17px] font-semibold transition-opacity hover:opacity-90 border-0"
                style={{ color: '#FFFFFF' }}
            >
                Add to cart
            </button>
        </div>
    );
}

// ===================================================================
// Communication Acumen
// ===================================================================
function CommunicationAcumenContent({ assessment }: { assessment: any }) {
    return (
        <>
            <AssessmentStyles />
            <AssessmentHero image="/images/communication-acumen.jpg" title={assessment.title} />

            <section className="a-section">
                <div className="a-cw">
                    <h2 className="a-heading">{assessment.title}: Find out your dissemination capabilities!</h2>

                    <p className="a-body">
                        Communication abilities are imperative in the corporate world to pave a sustainable growth path. Our Communication Acumen assessment is carefully curated to single-out your unique learning needs, taking into consideration various parameters and criterions to holistically analyze an individual's language proficiency, and suggest a diagnostic action-plan needed to upgrade and enhance your skillset.
                    </p>

                    <IconGrid items={[
                        { img: "/images/icons/commacu-1.jpg", alt: "Raise self-awareness", title: "Raise your self-awareness" },
                        { img: "/images/icons/commacu-2.jpg", alt: "Enhance skillset", title: "Enhance your skillset" },
                        { img: "/images/icons/commacu-3.jpg", alt: "Connect better", title: "Connect better with your team" },
                    ]} />

                    <AddToCart title={assessment.title} />
                </div>
            </section>
        </>
    );
}

// ===================================================================
// Accidental Diminisher
// ===================================================================
function AccidentalDiminisherContent({ assessment }: { assessment: any }) {
    return (
        <>
            <AssessmentStyles />
            <AssessmentHero image="/images/accidental-diminisher.jpg" title="Accidental Diminisher Assessment" />

            <section className="a-section">
                <div className="a-cw">
                    <p className="a-body">
                        Leadership is about empowering others, but sometimes, even with the best intentions, leaders unintentionally diminish their team's potential. Our Accidental Diminisher Assessment is designed to help identify behaviors that may be limiting team growth and effectiveness. By analyzing key leadership patterns, this assessment provides a diagnostic action plan to help leaders shift from diminishing to multiplying their team's potential.
                    </p>

                    <ul className="a-list">
                        <li>Raise your self-awareness</li>
                        <li>Enhance your leadership impact</li>
                        <li>Empower your team more effectively</li>
                    </ul>

                    <AddToCart title="Accidental Diminisher Assessment" />
                </div>
            </section>
        </>
    );
}

// ===================================================================
// Conflict Management
// ===================================================================
function ConflictManagementContent({ assessment }: { assessment: any }) {
    return (
        <>
            <AssessmentStyles />
            <AssessmentHero image="/images/conflict-management.jpg" title="Conflict Management Assessment" />

            <section className="a-section">
                <div className="a-cw">
                    <p className="a-body">
                        Conflict is inevitable in any workplace, but how you manage it determines team cohesion and productivity. Our Conflict Management Assessment evaluates your approach to conflict resolution, uncovering strengths and areas for growth. By identifying key conflict-handling styles, this assessment provides actionable insights to enhance collaboration and drive resolution.
                    </p>

                    <IconGrid items={[
                        { img: "/images/icons/conflict-1.jpg", alt: "Understand conflict style", title: "Understand your conflict style" },
                        { img: "/images/icons/conflict-2.jpg", alt: "Develop strategies", title: "Develop effective resolution strategies" },
                        { img: "/images/icons/conflict.jpg", alt: "Improve relationships", title: "Improve workplace relationships" },
                    ]} />

                    <AddToCart title="Conflict Management Assessment" />
                </div>
            </section>
        </>
    );
}

// ===================================================================
// Delegation Quotient
// ===================================================================
function DelegationQuotientContent({ assessment }: { assessment: any }) {
    return (
        <>
            <AssessmentStyles />
            <AssessmentHero image="/images/delegation.jpg" title="Delegation Quotient" />

            <section className="a-section">
                <div className="a-cw">
                    <p className="a-body">
                        Effective delegation is the hallmark of strong leadership, yet many struggle to strike the right balance. Our Delegation Quotient Assessment analyzes how well you delegate tasks, identifying opportunities to improve efficiency, trust, and team development. Based on your results, a custom action plan will help refine your delegation skills for maximum impact.
                    </p>

                    <IconGrid items={[
                        { img: "/images/icons/delegation1.jpg", alt: "Increase delegation effectiveness", title: "Increase your delegation effectiveness" },
                        { img: "/images/icons/delegation2.jpg", alt: "Empower team", title: "Empower your team for better results" },
                        { img: "/images/icons/delegation3.jpg", alt: "Optimize time management", title: "Optimize time management and productivity" },
                    ]} />

                    <AddToCart title="Delegation Quotient Assessment" />
                </div>
            </section>
        </>
    );
}

// ===================================================================
// Leadership Styles
// ===================================================================
function LeadershipStylesContent({ assessment }: { assessment: any }) {
    return (
        <>
            <AssessmentStyles />
            <AssessmentHero image="/images/leadership-styles.jpg" title="Leadership Styles Assessment" />

            <section className="a-section">
                <div className="a-cw">
                    <p className="a-body">
                        Every leader has a unique approach, but understanding your leadership style is key to adapting and influencing effectively. Our Leadership Styles Assessment explores your leadership tendencies and strengths, offering insights into how they impact your team and organizational culture. A detailed action plan will guide you in leveraging your style for optimal leadership success.
                    </p>

                    <IconGrid items={[
                        { img: "/images/icons/leadership1.jpg", alt: "Discover strengths", title: "Discover your leadership strengths" },
                        { img: "/images/icons/leadership2.jpg", alt: "Adapt style", title: "Adapt your style to different situations" },
                        { img: "/images/icons/leadership3.jpg", alt: "Maximize engagement", title: "Maximize team engagement and performance" },
                    ]} />

                    <AddToCart title="Leadership Styles Assessment" />
                </div>
            </section>
        </>
    );
}

// ===================================================================
// Listening Quotient
// ===================================================================
function ListeningQuotientContent({ assessment }: { assessment: any }) {
    return (
        <>
            <AssessmentStyles />
            <AssessmentHero image="/images/listening.jpg" title="Listening Quotient Assessment" />

            <section className="a-section">
                <div className="a-cw">
                    <p className="a-body">
                        Listening is a critical but often overlooked leadership skill. Our Listening Quotient Assessment helps you evaluate your listening effectiveness, pinpointing areas for improvement. By identifying barriers to active listening, this assessment provides a personalized roadmap to becoming a more attentive and impactful communicator.
                    </p>

                    <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '80px' }}>
                        <div style={{ textAlign: 'center' }}>
                            <img src="/images/icons/listening1.jpg" alt="Enhance listening skills" className="a-icon-img" />
                            <h5 className="a-card-title">Enhance your listening skills</h5>
                        </div>
                    </div>

                    <AddToCart title="Listening Quotient Assessment" />
                </div>
            </section>
        </>
    );
}

// ===================================================================
// Mentoring Acumen
// ===================================================================
function MentoringAcumenContent({ assessment }: { assessment: any }) {
    return (
        <>
            <AssessmentStyles />
            <AssessmentHero image="/images/mentoring.jpg" title="Mentoring Acumen Assessment" />

            <section className="a-section">
                <div className="a-cw">
                    <p className="a-body">
                        Great leaders develop others through mentorship. Our Mentoring Acumen Assessment evaluates your mentoring approach, identifying strengths and areas for improvement. With insights into how effectively you guide, support, and inspire others, this assessment provides a structured plan to elevate your mentoring impact.
                    </p>

                    <IconGrid items={[
                        { img: "/images/icons/mentoring1.jpg", alt: "Refine mentoring approach", title: "Refine your mentoring approach" },
                        { img: "/images/icons/mentoring2.jpg", alt: "Develop relationships", title: "Develop stronger professional relationships" },
                        { img: "/images/icons/mentoring3.jpg", alt: "Nurture talent", title: "Enhance your ability to nurture talent" },
                    ]} />

                    <AddToCart title="Mentoring Acumen Assessment" />
                </div>
            </section>
        </>
    );
}

// ===================================================================
// Influence Currency
// ===================================================================
function InfluenceCurrencyContent({ assessment }: { assessment: any }) {
    return (
        <>
            <AssessmentStyles />
            <AssessmentHero image="/images/influence.jpg" title="Influencing Currency Assessment" />

            <section className="a-section">
                <div className="a-cw">
                    <p className="a-body">
                        Influence is a key driver of leadership success. Our Influence Currency Assessment evaluates how you build trust, credibility, and persuasion power in professional settings. By uncovering your influence strengths and gaps, this assessment delivers a tailored roadmap to help you enhance your impact and effectiveness.
                    </p>

                    <IconGrid items={[
                        { img: "/images/icons/influence1.jpg", alt: "Understand influence potential", title: "Understand your influence potential" },
                        { img: "/images/icons/influence2.jpg", alt: "Build credibility", title: "Build credibility and trust in leadership" },
                        { img: "/images/icons/influence3.jpg", alt: "Enhance persuasion", title: "Enhance persuasion and negotiation skills" },
                    ]} />

                    <AddToCart title="Influencing Currency Assessment" />
                </div>
            </section>
        </>
    );
}

// ===================================================================
// Social Style
// ===================================================================
function SocialStyleContent({ assessment }: { assessment: any }) {
    return (
        <>
            <AssessmentStyles />
            <AssessmentHero image="/images/social-style.jpg" title="Social Style Assessment" />

            <section className="a-section">
                <div className="a-cw">
                    <p className="a-body">
                        Your social style influences how you communicate and collaborate with others. Our Social Style Assessment analyzes your interpersonal tendencies, helping you understand how your style impacts relationships and team dynamics. This assessment provides key insights and action steps to enhance adaptability and workplace interactions.
                    </p>

                    <ul className="a-list">
                        <li>Identify your dominant social style</li>
                        <li>Improve interpersonal communication</li>
                        <li>Strengthen collaboration and influence</li>
                    </ul>

                    <AddToCart title="Social Style Assessment" />
                </div>
            </section>
        </>
    );
}

// ===================================================================
// Trust Building Index
// ===================================================================
function TrustBuildingContent({ assessment }: { assessment: any }) {
    return (
        <>
            <AssessmentStyles />
            <AssessmentHero image="/images/trust-building.jpg" title="Trust Building Index – TBI" />

            <section className="a-section">
                <div className="a-cw">
                    <p className="a-body">
                        Trust is the foundation of all effective relationships and high-performing teams. Our Trust Building Index (TBI) evaluates your ability to create, maintain, and restore trust in professional relationships. This comprehensive evaluation measures your credibility, reliability, intimacy, and self-orientation to help you become a more trustworthy leader and team member.
                    </p>

                    <IconGrid items={[
                        { img: "/images/icons/tbi-1.png", alt: "Build trust", title: "Build strong trust foundations" },
                        { img: "/images/icons/tbi-2.png", alt: "Enhance credibility", title: "Enhance your credibility" },
                        { img: "/images/icons/tbi-3.png", alt: "Strengthen relationships", title: "Strengthen team relationships" },
                    ]} />

                    <AddToCart title="Trust Building Index – TBI" />
                </div>
            </section>
        </>
    );
}