"use client";

import { useParams } from "next/navigation";
import { getMasterclassBySlug, getAllMasterclasses, Masterclass } from "@/data/masterclasses";
import Link from "next/link";
import { useEffect, useState } from "react";
import { FaHourglassHalf, FaBookOpen, FaGraduationCap, FaQuestionCircle, FaPenSquare, FaComments, FaChartBar, FaSyncAlt, FaPencilAlt, FaGlobe, FaBroadcastTower, FaHeadphones, FaMapMarkedAlt, FaHeadset, FaNewspaper, FaChartLine, FaEnvelope, FaHome, FaKey, FaCompactDisc, FaCog, FaEdit, FaThumbsUp, FaCommentDots, FaEye, FaSearch, FaLightbulb, FaSearchPlus, FaPlusSquare, FaCogs, FaLayerGroup, FaEnvelopeOpen, FaExpand, FaFileAlt, FaCalendarAlt, FaRecycle, FaTrophy, FaCompass, FaUserEdit } from "react-icons/fa";

export default function MasterclassSlugPage() {
    const params = useParams();
    const [masterclass, setMasterclass] = useState<Masterclass | null>(null);
    const [loading, setLoading] = useState(true);
    const [isHovered, setIsHovered] = useState(false);
    const [prevNext, setPrevNext] = useState<{ prev: Masterclass | null; next: Masterclass | null }>({
        prev: null,
        next: null
    });

    useEffect(() => {
        if (params?.slug) {
            setLoading(true);
            const slugValue = typeof params.slug === "string" ? params.slug : params.slug[0];
            const data = getMasterclassBySlug(slugValue);
            setMasterclass(data || null);
            if (data) {
                const allMasterclasses = getAllMasterclasses();
                const currentIndex = allMasterclasses.findIndex(m => m.slug === slugValue);
                setPrevNext({
                    prev: currentIndex > 0 ? allMasterclasses[currentIndex - 1] : null,
                    next: currentIndex < allMasterclasses.length - 1 ? allMasterclasses[currentIndex + 1] : null
                });
            }
            setLoading(false);
        }
    }, [params, params?.slug]);

    const renderIcon = (iconName: string) => {
        switch (iconName) {
            case "FaHourglassHalf": return <FaHourglassHalf />;
            case "FaBookOpen": return <FaBookOpen />;
            case "FaGraduationCap": return <FaGraduationCap />;
            case "FaQuestionCircle": return <FaQuestionCircle />;
            case "FaPenSquare": return <FaPenSquare />;
            case "FaComments": return <FaComments />;
            case "FaChartBar": return <FaChartBar />;
            case "FaSyncAlt": return <FaSyncAlt />;
            case "FaPencilAlt": return <FaPencilAlt />;
            case "FaGlobe": return <FaGlobe />;
            case "FaBroadcastTower": return <FaBroadcastTower />;
            case "FaHeadphones": return <FaHeadphones />;
            case "FaMapMarkedAlt": return <FaMapMarkedAlt />;
            case "FaHeadset": return <FaHeadset />;
            case "FaNewspaper": return <FaNewspaper />;
            case "FaChartLine": return <FaChartLine />;
            case "FaEnvelope": return <FaEnvelope />;
            case "FaHome": return <FaHome />;
            case "FaKey": return <FaKey />;
            case "FaCompactDisc": return <FaCompactDisc />;
            case "FaCog": return <FaCog />;
            case "FaEdit": return <FaEdit />;
            case "FaThumbsUp": return <FaThumbsUp />;
            case "FaCommentDots": return <FaCommentDots />;
            case "FaEye": return <FaEye />;
            case "FaSearch": return <FaSearch />;
            case "FaLightbulb": return <FaLightbulb />;
            case "FaSearchPlus": return <FaSearchPlus />;
            case "FaPlusSquare": return <FaPlusSquare />;
            case "FaCogs": return <FaCogs />;
            case "FaLayerGroup": return <FaLayerGroup />;
            case "FaEnvelopeOpen": return <FaEnvelopeOpen />;
            case "FaExpand": return <FaExpand />;
            case "FaFileAlt": return <FaFileAlt />;
            case "FaCalendarAlt": return <FaCalendarAlt />;
            case "FaRecycle": return <FaRecycle />;
            case "FaTrophy": return <FaTrophy />;
            case "FaCompass": return <FaCompass />;
            case "FaUserEdit": return <FaUserEdit />;
            default: return <FaHourglassHalf />;
        }
    };

    if (loading) {
        return (
            <div className="min-h-screen flex items-center justify-center">
                <h1 className="text-3xl">Loading...</h1>
            </div>
        );
    }

    if (!masterclass) {
        const slug = typeof params?.slug === 'string' ? params.slug : params?.slug?.[0] || 'unknown';
        return (
            <div className="min-h-screen flex items-center justify-center bg-white">
                <div className="text-center p-8">
                    <h1 className="text-4xl font-bold mb-4 text-[#0F1B43]">Masterclass Not Found</h1>
                    <p className="text-xl mb-6 text-[#5D6371]">The masterclass "{slug}" could not be found.</p>
                    <Link href="/offerings/masterclass" className="inline-block bg-[#b53855] text-white px-8 py-3 rounded-lg hover:bg-[#a03147] transition-colors no-underline font-bold">
                        Back to Masterclass
                    </Link>
                </div>
            </div>
        );
    }

    return (
        <>
            <div className="min-h-screen bg-white">
                {/* SVG Gradient Definition */}
                <svg width="0" height="0" style={{ position: 'absolute' }}>
                    <defs>
                        <linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="20%" stopColor="rgb(15, 27, 67)" />
                            <stop offset="80%" stopColor="rgb(188, 11, 134)" />
                        </linearGradient>
                    </defs>
                </svg>

                <style jsx global>{`
                    /* ── Icon helpers ── */
                    .icon-with-gradient { width: 60px; height: 60px; display: inline-block; }
                    .icon-with-gradient svg { width: 100%; height: 100%; fill: url(#iconGradient); stroke-width: 0.5; }
                    .icon-with-gradient-small { width: 50px; height: 50px; display: inline-block; }
                    .icon-with-gradient-small svg { width: 100%; height: 100%; fill: url(#iconGradient); stroke-width: 0.5; }

                    /* ── Content wrapper ── */
                    .content-wrapper {
                        max-width: 1400px;
                        margin: 0 auto;
                        padding: 0 5.5%;
                        box-sizing: border-box;
                    }
                    @media (max-width: 1200px) { .content-wrapper { padding: 0 4.5%; } }
                    @media (max-width: 767px)  { .content-wrapper { padding: 0 20px; } }

                    /* ══════════════════════════════════════
                       HERO — identical to structured page
                       bottom: -60px  |  padding: 45px 85px
                       font-size: 38px  |  max-width: 85%
                    ══════════════════════════════════════ */
                    .hero-section {
                        margin-top: 105px;
                        margin-bottom: 60px;
                        position: relative;
                    }
                    .hero-bg {
                        min-height: 500px;
                        height: 80vh;
                        width: 100%;
                    }
                    .hero-title-badge {
                        position: absolute;
                        bottom: -60px;
                        left: 0;
                        right: 0;
                        z-index: 10;
                    }
                    .hero-title-inner {
                        background: linear-gradient(-90deg, #b53855, #62c0e2);
                        padding: 45px 85px;
                        border-radius: 10px 15px 0 0;
                        display: inline-block;
                        max-width: 85%;
                    }
                    .hero-title-inner h1 {
                        color: #fff;
                        font-size: 38px;
                        font-weight: 700;
                        margin: 0;
                        font-family: Helvetica, Arial, sans-serif;
                        line-height: 1.3;
                        word-wrap: break-word;
                        overflow-wrap: break-word;
                        white-space: normal;
                    }
                    /* ── Hero title box: position stays bottom:-60px, only size scales ── */
                    @media (max-width: 1024px) {
                        .hero-bg { min-height: 380px; height: 60vh; }
                        .hero-title-inner { padding: 35px 50px; max-width: 90%; }
                        .hero-title-inner h1 { font-size: 30px; }
                    }
                    @media (max-width: 767px) {
                        .hero-section { margin-bottom: 30px; }
                        .hero-bg { min-height: 340px; height: 75vw; }
                        .hero-title-badge { bottom: -30px; }
                        .hero-title-inner { padding: 22px 28px; max-width: 80%; width: auto; display: inline-block; border-radius: 8px 10px 0 0; }
                        .hero-title-inner h1 { font-size: 20px; }
                    }
                    @media (max-width: 480px) {
                        .hero-section { margin-bottom: 25px; }
                        .hero-bg { min-height: 300px; height: 78vw; }
                        .hero-title-badge { bottom: -25px; }
                        .hero-title-inner { padding: 16px 20px; max-width: 85%; width: auto; display: inline-block; }
                        .hero-title-inner h1 { font-size: 16px; }
                    }
                    /* ── END HERO ── */

                    /* ── Register button ── */
                    .register-section { padding-top: 50px; padding-bottom: 15px; }
                    @media (max-width: 767px) {
                        .register-section { padding-top: 30px; padding-bottom: 10px; }
                    }

                    /* ── Description ── */
                    .description-section { padding-top: 50px; padding-bottom: 30px; }
                    @media (max-width: 1024px) {
                        .description-section p { font-size: 16px !important; }
                        .description-section p:first-child { font-size: 18px !important; }
                    }
                    @media (max-width: 767px) {
                        .description-section { padding-top: 30px; padding-bottom: 20px; }
                        .description-section p { font-size: 15px !important; }
                        .description-section p:first-child { font-size: 16px !important; }
                    }

                    /* ── Takeaways grid ── */
                    .takeaways-grid {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 40px;
                    }
                    @media (max-width: 1024px) {
                        .takeaways-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
                        .takeaways-grid .col-start-2 { grid-column: auto; }
                    }
                    @media (max-width: 600px) {
                        .takeaways-grid { grid-template-columns: 1fr; gap: 18px; }
                        .takeaways-grid .col-start-2 { grid-column: auto; }
                    }
                    .takeaways-heading { font-size: 38px; }
                    @media (max-width: 1024px) { .takeaways-heading { font-size: 28px !important; } }
                    @media (max-width: 767px)  { .takeaways-heading { font-size: 22px !important; } }

                    /* ── Topics grid ── */
                    .topics-grid {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 30px;
                    }
                    @media (max-width: 1024px) { .topics-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
                    @media (max-width: 600px)  { .topics-grid { grid-template-columns: 1fr; gap: 16px; } }

                    /* ── Two-col sections ── */
                    .two-col-grid {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 80px;
                        align-items: start;
                    }
                    @media (max-width: 900px) {
                        .two-col-grid { grid-template-columns: 1fr; gap: 36px; }
                        .two-col-grid .order-first-mobile { order: -1; }
                    }
                    @media (max-width: 767px) { .two-col-grid { gap: 24px; } }

                    .section-heading {
                        font-size: 38px;
                        font-weight: 700;
                        font-family: Helvetica, Arial, sans-serif;
                        color: #0F1B43;
                        margin-bottom: 4px;
                    }
                    @media (max-width: 1024px) { .section-heading { font-size: 28px !important; } }
                    @media (max-width: 767px)  { .section-heading { font-size: 22px !important; } }

                    .section-list li {
                        font-family: Helvetica, Arial, sans-serif;
                        font-size: 18px;
                        color: #5D6371;
                        line-height: 1.8;
                        letter-spacing: 0.01em;
                        word-wrap: break-word;
                        overflow-wrap: break-word;
                    }
                    @media (max-width: 1024px) { .section-list li { font-size: 16px !important; } }
                    @media (max-width: 767px)  { .section-list li { font-size: 15px !important; } }

                    /* ── Card padding ── */
                    @media (max-width: 1024px) {
                        .takeaway-card { padding: 32px 24px !important; }
                        .topic-card   { padding: 28px 20px !important; }
                    }
                    @media (max-width: 767px) {
                        .takeaway-card { padding: 24px 18px !important; }
                        .topic-card   { padding: 20px 14px !important; }
                    }

                    /* ── Brochure ── */
                    .brochure-box {
                        background-color: #0f1b43;
                        border-radius: 10px;
                        padding: 60px 40px;
                        box-sizing: border-box;
                    }
                    @media (max-width: 767px) { .brochure-box { padding: 36px 20px; } }

                    .brochure-heading { font-size: 35px; }
                    @media (max-width: 1024px) { .brochure-heading { font-size: 28px !important; } }
                    @media (max-width: 767px)  { .brochure-heading { font-size: 22px !important; } }

                    .brochure-form {
                        display: flex;
                        align-items: flex-end;
                        gap: 16px;
                        justify-content: center;
                        flex-wrap: wrap;
                    }
                    .brochure-form > div { flex: 1 1 0; max-width: 250px; min-width: 200px; }
                    @media (max-width: 1024px) { .brochure-form > div { max-width: 100%; min-width: 160px; } }
                    @media (max-width: 767px) {
                        .brochure-form { flex-direction: column; align-items: stretch; }
                        .brochure-form > div,
                        .brochure-form > button { max-width: 100%; min-width: unset; width: 100%; }
                    }

                    /* ── Nav ── */
                    .nav-section { padding: 70px 0; border-top: 1px solid #e5e7eb; background-color: #f9fafb; }
                    @media (max-width: 767px) { .nav-section { padding: 40px 0; } }

                    .nav-flex { display: flex; align-items: center; justify-content: space-between; }
                    .nav-title { font-size: 16px; font-weight: 500; color: #000; font-family: Helvetica, Arial, sans-serif; }
                    @media (max-width: 600px) { .nav-title { font-size: 13px; } .nav-flex { gap: 8px; } }
                    @media (max-width: 400px) {
                        .nav-title { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
                    }
                `}</style>

                {/* ===== HERO BANNER ===== */}
                <section className="hero-section">
                    <div
                        className="hero-bg"
                        style={{ background: `url('${masterclass.image}') center 20% / cover no-repeat` }}
                    />
                    <div className="content-wrapper hero-title-badge">
                        <div className="hero-title-inner">
                            <h1>{masterclass.title}</h1>
                        </div>
                    </div>
                </section>

                {/* ===== REGISTER BUTTON ===== */}
                {masterclass.id === 1 && (
                    <section className="register-section">
                        <div className="content-wrapper">
                            <Link
                                href={`/offerings/masterclass/${masterclass.slug}/register`}
                                className="inline-flex items-center gap-2 rounded-[4px] no-underline transition-all duration-300"
                                onMouseEnter={() => setIsHovered(true)}
                                onMouseLeave={() => setIsHovered(false)}
                                style={{
                                    background: isHovered ? '#62c0e2' : '#b53855',
                                    color: '#ffffff',
                                    padding: '22px 46px',
                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                    textTransform: 'uppercase',
                                    letterSpacing: '0.1em',
                                    fontSize: '18px',
                                    fontWeight: '500',
                                    lineHeight: '18px'
                                }}
                            >
                                <span style={{ color: '#ffffff' }}>REGISTER NOW</span>
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: '6px' }}>
                                    <path d="M9 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-6-6z" />
                                    <path d="M9 2v6h6" />
                                    <line x1="8" y1="13" x2="16" y2="13" />
                                    <line x1="8" y1="17" x2="16" y2="17" />
                                    <line x1="8" y1="9" x2="10" y2="9" />
                                </svg>
                            </Link>
                        </div>
                    </section>
                )}

                {/* ===== DESCRIPTION SECTION ===== */}
                <section className="description-section">
                    <div className="content-wrapper">
                        {(masterclass.detailDescription || masterclass.description)?.split('\n\n').map((paragraph, index, arr) => (
                            <p
                                key={index}
                                style={{
                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                    fontSize: index === 0 ? '20px' : '18px',
                                    fontWeight: index === 0 ? 700 : 400,
                                    lineHeight: '1.8',
                                    color: '#5D6371',
                                    marginBottom: index === arr.length - 1 ? '0' : '20px',
                                    wordWrap: 'break-word',
                                    overflowWrap: 'break-word',
                                    letterSpacing: '0.01em'
                                }}
                            >
                                {paragraph}
                            </p>
                        ))}
                    </div>
                </section>

                {/* ===== TAKEAWAYS SECTION ===== */}
                {masterclass.takeaways && masterclass.takeaways.length > 0 && (
                    <section style={{ padding: '25px 0' }}>
                        <div className="content-wrapper">
                            <h2
                                className="takeaways-heading text-center font-bold text-[#0F1B43] mb-[4px]"
                                style={{ fontFamily: 'Helvetica, Arial, sans-serif' }}
                            >
                                What are the major takeaways?
                            </h2>
                            <div className="w-[200px] mx-auto mb-[50px]" style={{ borderBottom: '2px dotted #b53855' }} />

                            <div className="takeaways-grid">
                                {masterclass.takeaways!.filter(Boolean).map((takeaway, index) => {
                                    const totalCards = masterclass.takeaways!.length;
                                    const isLastCard = index === totalCards - 1;
                                    const isOddTotal = totalCards % 2 !== 0;
                                    const shouldCenter = isLastCard && isOddTotal && totalCards % 3 === 1;
                                    return (
                                        <div
                                            key={`takeaway-${index}`}
                                            className={`takeaway-card text-center rounded-[10px] bg-white ${shouldCenter ? 'col-start-2' : ''}`}
                                            style={{ padding: '40px 30px', boxShadow: '0 25px 70px rgba(0,0,0,0.07)' }}
                                        >
                                            <div className="mb-[25px] flex items-center justify-center">
                                                <div className="icon-with-gradient">{renderIcon(takeaway.icon)}</div>
                                            </div>
                                            <h3 style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontSize: '15px', fontWeight: 700, color: '#181B31', margin: '0px 0px 15px', lineHeight: '1.4' }}>
                                                {takeaway.title}
                                            </h3>
                                            {takeaway.description && (
                                                <p style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontSize: '16px', color: '#5D6371', lineHeight: '1.5em', margin: 0 }}>
                                                    {takeaway.description}
                                                </p>
                                            )}
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    </section>
                )}

                {/* ===== TOPICS SECTION ===== */}
                {masterclass.topics && masterclass.topics.length > 0 && (
                    <section style={{ padding: '40px 0' }}>
                        <div className="content-wrapper">
                            <div className="topics-grid">
                                {masterclass.topics!.filter(Boolean).map((topic, index) => (
                                    <div
                                        key={`topic-${index}`}
                                        className="topic-card text-center rounded-[10px] bg-white"
                                        style={{ padding: '35px 25px', boxShadow: '0 10px 40px rgba(0,0,0,0.05)' }}
                                    >
                                        <div className="mb-[20px] flex items-center justify-center">
                                            <div className="icon-with-gradient-small">{renderIcon(topic.icon)}</div>
                                        </div>
                                        <h3 style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontSize: '15px', fontWeight: 400, color: '#5D6371', margin: '0', lineHeight: '1.5' }}>
                                            {topic.title}
                                        </h3>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </section>
                )}

                {/* ===== WHAT TO EXPECT SECTION ===== */}
                {masterclass.sessionContent && masterclass.sessionContent.length > 0 && (
                    <section style={{ padding: '30px 0', background: '#fff' }}>
                        <div className="content-wrapper">
                            <div className="two-col-grid">
                                <div>
                                    <h2 className="section-heading">What can you expect from the session?</h2>
                                    <div className="w-[150px] mb-[40px]" style={{ borderBottom: '2px dotted #b53855' }} />
                                    <ol className="section-list" style={{ listStyleType: 'decimal', listStylePosition: 'outside', marginLeft: '25px', paddingLeft: '0', marginBottom: '0', marginTop: '0' }}>
                                        {masterclass.sessionContent!.filter(Boolean).map((item, index) => (
                                            <li key={`session-${index}`}>{item}</li>
                                        ))}
                                    </ol>
                                </div>
                                <div className="relative">
                                    <img
                                        src={masterclass.detailImage || "/images/masterclass/Adani-connex02.jpg"}
                                        alt="Masterclass session"
                                        className="w-full h-auto rounded-lg"
                                    />
                                </div>
                            </div>
                        </div>
                    </section>
                )}

                {/* ===== WHO SHOULD ATTEND SECTION ===== */}
                {masterclass.whoShouldAttend && masterclass.whoShouldAttend.length > 0 && (
                    <section style={{ padding: '30px 0', background: '#fff' }}>
                        <div className="content-wrapper">
                            <div className="two-col-grid">
                                <div className="order-first-mobile">
                                    <img
                                        src="/images/masterclass/who-attend-questions.jpg"
                                        alt="Who should attend"
                                        className="w-full h-auto rounded-lg"
                                    />
                                </div>
                                <div>
                                    <h2 className="section-heading">Who should attend?</h2>
                                    <div className="w-[150px] mb-[40px]" style={{ borderBottom: '2px dotted #b53855' }} />
                                    <ol className="section-list" style={{ listStyleType: 'decimal', listStylePosition: 'outside', marginLeft: '25px', paddingLeft: '0', marginBottom: '0', marginTop: '0' }}>
                                        {masterclass.whoShouldAttend!.filter(Boolean).map((item, index) => (
                                            <li key={`attend-${index}`}>{item}</li>
                                        ))}
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </section>
                )}

                {/* ===== DOWNLOAD BROCHURE SECTION ===== */}
                {masterclass.id !== 1 && (
                    <section style={{ padding: '40px 0' }}>
                        <div className="content-wrapper">
                            <div className="brochure-box">
                                <h2
                                    className="brochure-heading"
                                    style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 700, color: '#FFFFFF', textAlign: 'center', marginBottom: '10px' }}
                                >
                                    Download Our Brochure
                                </h2>
                                <div style={{ width: '120px', margin: '0 auto 30px', borderBottom: '3px solid #F2994A' }} />
                                <form className="brochure-form">
                                    {[
                                        { label: 'Your name', type: 'text' },
                                        { label: 'Your email', type: 'email' },
                                        { label: 'Contact no', type: 'tel' },
                                    ].map(({ label, type }) => (
                                        <div key={label}>
                                            <label style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontSize: '16px', color: '#FFFFFF', display: 'block', marginBottom: '8px' }}>
                                                {label}
                                            </label>
                                            <input
                                                type={type}
                                                style={{ fontFamily: 'Helvetica, Arial, sans-serif', width: '100%', padding: '16px', borderRadius: '4px', border: '0', outline: 'none', height: '50px', boxSizing: 'border-box' }}
                                            />
                                        </div>
                                    ))}
                                    <button
                                        type="submit"
                                        style={{ backgroundColor: '#0EC4F2', color: '#FFFFFF', fontFamily: 'Helvetica, Arial, sans-serif', fontSize: '18px', fontWeight: 600, padding: '0 48px', height: '50px', borderRadius: '4px', border: 'none', cursor: 'pointer', transition: 'opacity 0.3s' }}
                                        onMouseEnter={(e) => e.currentTarget.style.opacity = '0.9'}
                                        onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
                                    >
                                        Submit
                                    </button>
                                </form>
                            </div>
                        </div>
                    </section>
                )}

                {/* ===== NAVIGATION SECTION ===== */}
                <section className="nav-section">
                    <div className="content-wrapper">
                        <div className="nav-flex">
                            {prevNext.prev ? (
                                <Link
                                    href={`/offerings/masterclass/${prevNext.prev.slug}`}
                                    style={{ display: 'flex', alignItems: 'center', gap: '12px', textDecoration: 'none', transition: 'opacity 0.3s' }}
                                    onMouseEnter={(e) => e.currentTarget.style.opacity = '0.7'}
                                    onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
                                >
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: '#000', flexShrink: 0 }}>
                                        <polyline points="15 18 9 12 15 6" />
                                    </svg>
                                    <div>
                                        <div style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontSize: '13px', color: '#9CA3AF', marginBottom: '4px' }}>Previous</div>
                                        <div className="nav-title">{prevNext.prev.title}</div>
                                    </div>
                                </Link>
                            ) : <div />}

                            <Link href="/offerings/masterclass" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#000', textDecoration: 'none', flexShrink: 0 }}>
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style={{ transition: 'transform 0.3s' }}
                                    onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.3)'}
                                    onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
                                    <circle cx="5" cy="5" r="1.5" /><circle cx="12" cy="5" r="1.5" /><circle cx="19" cy="5" r="1.5" />
                                    <circle cx="5" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="19" cy="12" r="1.5" />
                                    <circle cx="5" cy="19" r="1.5" /><circle cx="12" cy="19" r="1.5" /><circle cx="19" cy="19" r="1.5" />
                                </svg>
                            </Link>

                            {prevNext.next ? (
                                <Link
                                    href={`/offerings/masterclass/${prevNext.next.slug}`}
                                    style={{ display: 'flex', alignItems: 'center', gap: '12px', textDecoration: 'none', transition: 'opacity 0.3s' }}
                                    onMouseEnter={(e) => e.currentTarget.style.opacity = '0.7'}
                                    onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
                                >
                                    <div style={{ textAlign: 'right' }}>
                                        <div style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontSize: '13px', color: '#9CA3AF', marginBottom: '4px' }}>Next</div>
                                        <div className="nav-title">{prevNext.next.title}</div>
                                    </div>
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: '#000', flexShrink: 0 }}>
                                        <polyline points="9 18 15 12 9 6" />
                                    </svg>
                                </Link>
                            ) : <div />}
                        </div>
                    </div>
                </section>

                {/* ===== FOOTER BAR ===== */}
                <div style={{ height: '15px', backgroundColor: '#CF87B0' }} />
            </div>
        </>
    );
}