import { useBlockProps, useInnerBlocksProps, RichText } from '@wordpress/block-editor';

export default function save({ attributes }) {
    const { heading, sectionBgColor, sectionPadding, headingColor, hideCurve, curveColor, blockId, activityStyle } = attributes;

    const isFun = activityStyle === 'fun';
    const isElegant = activityStyle === 'elegant';

    // Conditional Styles
    const defaultBgClass = isElegant ? 'bg-gray-50' : 'bg-blue-sky/10';
    const containerClass = sectionBgColor || sectionPadding !== null ? 'relative' : `py-24 ${defaultBgClass} relative`;

    const defaultHeadingClass = isElegant
        ? 'text-3xl md:text-5xl font-serif font-bold text-brand-dark text-center mb-12'
        : 'text-4xl md:text-5xl font-black text-center mb-12';

    const headingClass = headingColor ? `${defaultHeadingClass}` : `${defaultHeadingClass} ${isFun ? 'text-navy' : ''}`;

    // Spacing
    const contentSpacing = isElegant ? 'mt-0' : 'mt-12';

    const blockProps = useBlockProps.save({
        className: `block-${blockId} ${containerClass}`,
        style: {
            backgroundColor: sectionBgColor || undefined,
            paddingTop: sectionPadding !== null ? `${sectionPadding}px` : undefined,
            paddingBottom: sectionPadding !== null ? `${sectionPadding}px` : undefined,
        }
    });

    // 🔥 FIX: Grid Classes on inner container
    const innerBlocksProps = useInnerBlocksProps.save({
        className: 'grid grid-cols-1 md:grid-cols-3 gap-8'
    });

    return (
        <section {...blockProps}>
            {!hideCurve && isFun && (
                <div className="absolute top-0 left-0 w-full pointer-events-none">
                    <svg viewBox="0 0 1440 100" fill="none" className="w-full h-auto"><path d="M0 0H1440V100C1192.5 50.503 919.5 25.503 720 25.503C520.5 25.503 247.5 50.503 0 100V0Z" fill={curveColor} /></svg>
                </div>
            )}

            <div className={`awt-container mx-auto px-6 relative z-10 ${contentSpacing}`}>
                <RichText.Content tagName="h2" className={headingClass} value={heading} style={{ color: headingColor }} />

                {/* Grid Wrapper */}
                <div {...innerBlocksProps} />
            </div>
        </section>
    );
}