js/components/ContentSection.js

// ContentSection.js - Reusable content section container
// Provides consistent frosted glass styling across all content sections

/**
 * Wraps content in a frosted glass container
 * @param {string} id - Section ID
 * @param {string} content - Inner HTML content
 * @param {object} options - Additional options
 * @returns {string} HTML string for the section
 */
export function renderContentSection(id, content, options = {}) {
    const {
        className = 'mb-16',
        opacity = '90', // Increased from 40% to 90% for better readability
        blur = 'sm',    // sm, md, lg
        padding = 'p-6 md:p-10'
    } = options;

    return `
        <section id="${id}" class="${className} relative z-20 px-4 sm:px-6 lg:px-8">
            <div class="bg-white/${opacity} backdrop-blur-${blur} shadow-md rounded-lg ${padding} w-full border border-gray-200" style="max-width: min(90%, 1400px); margin: 0 auto;">
                ${content}
            </div>
        </section>
    `;
}

/**
 * Creates the standard "Role of Openness" callout box
 * @param {string} text - The openness text content
 * @returns {string} HTML string for the callout
 */
export function renderOpennessCallout(text) {
    if (!text) return '';
    
    return `
        <div class="px-4 sm:px-6 py-5 bg-gradient-to-r from-orange-50/95 to-yellow-50/95 backdrop-blur-sm border-l-4 border-orange-400 rounded-r-lg mb-8">
            <p class="font-bold text-orange-900 mb-3 text-lg">🤗 The Role of Openness</p>
            <p class="text-orange-800 italic leading-relaxed">${text}</p>
        </div>
    `;
}