( function ( blocks, blockEditor, components, element, i18n ) {
	'use strict';

	var __               = i18n.__;
	var el               = element.createElement;
	var registerBlockType = blocks.registerBlockType;
	var InspectorControls = blockEditor.InspectorControls;
	var useBlockProps    = blockEditor.useBlockProps;
	var PanelBody        = components.PanelBody;
	var RangeControl     = components.RangeControl;
	var ToggleControl    = components.ToggleControl;

	function Edit( props ) {
		var attributes    = props.attributes;
		var setAttributes = props.setAttributes;
		var blockProps    = useBlockProps( { style: { padding: 0 } } );

		var mapPreview = el( 'div', {
			style: {
				position:     'relative',
				height:       attributes.height + 'px',
				borderRadius: attributes.rounded ? '12px' : '0',
				overflow:     'hidden',
				background:   '#E8E0D5',
				userSelect:   'none',
			}
		},
			// Road grid
			el( 'div', { style: {
				position: 'absolute', inset: 0,
				backgroundImage: [
					'linear-gradient(rgba(255,255,255,.6) 2px, transparent 2px)',
					'linear-gradient(90deg, rgba(255,255,255,.6) 2px, transparent 2px)',
					'linear-gradient(rgba(200,185,160,.25) 1px, transparent 1px)',
					'linear-gradient(90deg, rgba(200,185,160,.25) 1px, transparent 1px)',
				].join( ',' ),
				backgroundSize: '100px 100px, 100px 100px, 25px 25px, 25px 25px',
			} } ),
			// Buildings
			el( 'div', { style: { position:'absolute', top:'17%',  left:'8%',   width:'72px', height:'46px', background:'#C9BFA8', borderRadius:'3px' } } ),
			el( 'div', { style: { position:'absolute', top:'14%',  right:'11%', width:'92px', height:'56px', background:'#C9BFA8', borderRadius:'3px' } } ),
			el( 'div', { style: { position:'absolute', bottom:'36%',left:'21%', width:'56px', height:'40px', background:'#C9BFA8', borderRadius:'3px' } } ),
			el( 'div', { style: { position:'absolute', top:'52%',  right:'28%', width:'66px', height:'44px', background:'#C9BFA8', borderRadius:'3px' } } ),
			// Park
			el( 'div', { style: { position:'absolute', bottom:'12%',right:'7%', width:'82px', height:'62px', background:'#C8E6C9', borderRadius:'5px' } } ),
			// Map pin (Google-style)
			el( 'div', {
				style: {
					position: 'absolute', top: '50%', left: '50%',
					transform: 'translate(-50%, -100%)',
					zIndex: 2,
					filter: 'drop-shadow(0 3px 6px rgba(0,0,0,.35))',
				}
			},
				el( 'svg', { width: 34, height: 46, viewBox: '0 0 36 48', fill: 'none' },
					el( 'path', { d: 'M18 0C8.059 0 0 8.059 0 18c0 13.5 18 30 18 30S36 31.5 36 18C36 8.059 27.941 0 18 0z', fill: '#EA4335' } ),
					el( 'circle', { cx: 18, cy: 18, r: 7, fill: '#fff' } )
				)
			),
			// Info card overlay
			attributes.showCard
				? el( 'div', {
					style: {
						position: 'absolute', bottom: '24px', left: '16px',
						background: '#fff', borderRadius: '12px',
						padding: '14px 18px',
						boxShadow: '0 6px 24px rgba(15,23,42,.18)',
						maxWidth: '210px', zIndex: 10, fontFamily: 'inherit',
					}
				},
					el( 'p', { style: { margin: '0', fontSize: '13px', fontWeight: 700, color: '#0F172A' } },
						__( 'Your Facility', 'playard' )
					),
					attributes.showAddress
						? el( 'div', { style: { display:'flex', alignItems:'flex-start', gap:'6px', marginTop:'7px' } },
							el( 'svg', { width:13, height:13, fill:'none', viewBox:'0 0 24 24', stroke:'#3B82F6', strokeWidth:2, style:{flexShrink:0,marginTop:'1px'} },
								el( 'path', { strokeLinecap:'round', strokeLinejoin:'round', d:'M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z' } ),
								el( 'path', { strokeLinecap:'round', strokeLinejoin:'round', d:'M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z' } )
							),
							el( 'p', { style: { margin:0, fontSize:'11px', color:'#64748B', lineHeight:1.4 } },
								__( '123 Sport Street, City', 'playard' )
							)
						)
						: null,
					attributes.showPhone
						? el( 'div', { style: { display:'flex', alignItems:'center', gap:'6px', marginTop:'7px' } },
							el( 'svg', { width:13, height:13, fill:'none', viewBox:'0 0 24 24', stroke:'#3B82F6', strokeWidth:2, style:{flexShrink:0} },
								el( 'path', { strokeLinecap:'round', strokeLinejoin:'round', d:'M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z' } )
							),
							el( 'p', { style: { margin:0, fontSize:'12px', color:'#3B82F6', fontWeight:600 } },
								'+1 234 567 890'
							)
						)
						: null
				)
				: null,
			// Directions button
			el( 'div', {
				style: {
					position: 'absolute', bottom: '24px', right: '16px',
					background: '#0F172A', color: '#fff',
					fontSize: '12px', fontWeight: 600,
					padding: '9px 14px', borderRadius: '8px',
					zIndex: 10, display: 'flex', alignItems: 'center', gap: '5px',
					whiteSpace: 'nowrap',
				}
			},
				el( 'svg', { width:13, height:13, fill:'none', viewBox:'0 0 24 24', stroke:'currentColor', strokeWidth:2.5 },
					el( 'path', { strokeLinecap:'round', strokeLinejoin:'round', d:'M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z' } )
				),
				__( 'Directions', 'playard' )
			),
			// Editor badge
			el( 'div', {
				style: {
					position: 'absolute', top: '10px', right: '10px',
					background: 'rgba(0,0,0,.45)', color: '#fff',
					fontSize: '10px', padding: '3px 8px', borderRadius: '4px',
					zIndex: 10, letterSpacing: '.02em',
				}
			}, __( 'Map Preview', 'playard' ) )
		);

		return el(
			'div', blockProps,

			el( InspectorControls, {},
				el( PanelBody, { title: __( 'Map Settings', 'playard' ), initialOpen: true },
					el( RangeControl, {
						label:    __( 'Height (px)', 'playard' ),
						value:    attributes.height,
						onChange: function (v) { setAttributes( { height: v } ); },
						min: 200, max: 700, step: 20,
					} ),
					el( RangeControl, {
						label:    __( 'Zoom level', 'playard' ),
						value:    attributes.zoom,
						onChange: function (v) { setAttributes( { zoom: v } ); },
						min: 10, max: 20,
					} ),
					el( ToggleControl, {
						label:    __( 'Rounded corners', 'playard' ),
						checked:  attributes.rounded,
						onChange: function (v) { setAttributes( { rounded: v } ); },
					} )
				),
				el( PanelBody, { title: __( 'Info Card', 'playard' ), initialOpen: true },
					el( ToggleControl, {
						label:    __( 'Show info card overlay', 'playard' ),
						checked:  attributes.showCard,
						onChange: function (v) { setAttributes( { showCard: v } ); },
					} ),
					attributes.showCard
						? el( ToggleControl, {
							label:    __( 'Show address', 'playard' ),
							checked:  attributes.showAddress,
							onChange: function (v) { setAttributes( { showAddress: v } ); },
						} )
						: null,
					attributes.showCard
						? el( ToggleControl, {
							label:    __( 'Show phone', 'playard' ),
							checked:  attributes.showPhone,
							onChange: function (v) { setAttributes( { showPhone: v } ); },
						} )
						: null
				)
			),

			mapPreview
		);
	}

	registerBlockType( 'playard/facility-map', {
		edit: Edit,
		save: function () { return null; },
	} );

} (
	window.wp.blocks,
	window.wp.blockEditor,
	window.wp.components,
	window.wp.element,
	window.wp.i18n
) );
