( function ( wp ) {
	'use strict';

	var __                = wp.i18n.__;
	var el                = wp.element.createElement;
	var Fragment          = wp.element.Fragment;
	var InspectorControls = wp.blockEditor.InspectorControls;
	var PanelBody         = wp.components.PanelBody;
	var TextControl       = wp.components.TextControl;

	wp.blocks.registerBlockType( 'ambassadorhub/ambassadors', {
		edit: function ( props ) {
			var attrs      = props.attributes;
			var set        = props.setAttributes;
			var blockProps = wp.blockEditor.useBlockProps();

			return el(
				Fragment,
				null,
				el( InspectorControls, null,
					el( PanelBody, { title: __( 'Display', 'ambassadorhub' ), initialOpen: true },
						el( TextControl, {
							label:    __( 'Title', 'ambassadorhub' ),
							value:    attrs.title || '',
							help:     __( 'Optional heading shown above the team member grid.', 'ambassadorhub' ),
							onChange: function ( v ) { set( { title: v } ); },
						} )
					)
				),
				el( 'div', blockProps,
					attrs.title
						? el( 'h2', { style: { margin: '0 0 8px', fontSize: '1.25em' } }, attrs.title )
						: null,
					el(
						'div',
						{ style: { padding: '16px', background: '#f0f0f1', border: '1px solid #ddd', textAlign: 'center' } },
						__( 'Team Members — renders on the frontend for team fundraiser pages.', 'ambassadorhub' )
					)
				)
			);
		},
		save: function () {
			return null;
		},
	} );
} )( window.wp );
