js/cards/HomeAreaCard.js

// HomeAreaCard.js - Area card component for homepage
import { areasData } from '../data/areas.js';

export function createHomeAreaCard(id, title, description, openness, subAreas, image, imagePosition = 'left', imageAttribution = null, altText = null) {
    const flexDirection = imagePosition === 'left' ? 'lg:flex-row' : 'lg:flex-row-reverse';
    
    const subAreasList = subAreas.map(area => `<li>${area}</li>`).join('');
    
    // Use provided alt text or fallback to title
    const imgAlt = altText || title;
    
    // Create attribution text if provided
    const attribution = imageAttribution ? 
        `<p class="text-xs text-gray-500 mt-2 text-center">${imageAttribution}</p>` : '';
    
    return `
        <div id="${id}" class="bg-white rounded-lg shadow-sm overflow-hidden" style="min-height: 300px;">
            <div class="flex flex-col ${flexDirection}">
                <div class="lg:w-2/3 p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-4">${title}</h2>
                    <p class="text-gray-700 mb-6">${description}</p>
                    
                    ${openness ? `
                    <div class="mb-6 px-6 pt-4 pb-6 bg-gradient-to-r from-orange-50 to-yellow-50 border-l-4 border-orange-300 rounded-r-lg">
                        <p class="font-bold text-orange-900 mb-3">The Role of Openness</p>
                        <p class="text-orange-800 italic leading-relaxed">${openness}</p>
                    </div>
                    ` : ''}

                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Sub-areas</h3>
                        <ul class="list-disc list-inside text-gray-700 space-y-1">
                            ${subAreasList}
                        </ul>
                    </div>
                </div>
                <div class="lg:w-1/3 bg-gray-100">
                    <div class="h-full flex flex-col items-center justify-center p-8">
                        <img src="images/${image}" alt="${imgAlt}" class="max-w-full max-h-full object-contain">
                        ${attribution}
                    </div>
                </div>
            </div>
        </div>
    `;
}