<div class="block-editor-inserter__header">
    <div class="block-editor-inserter__tabs">
        <button class="inserter-tab active">Blocks</button>
        <button class="inserter-tab">Patterns</button>
        <button class="inserter-tab">Media</button>
    </div>
    <button class="inserter-close" aria-label="Close">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
    </button>
</div>

<!-- ======== BLOCKS PANEL ======== -->
<div id="blocks-panel" class="tab-panel active">
    <div class="block-editor-inserter__search">
        <input type="search" placeholder="Search" class="components-text-control__input">
    </div>
    <div class="block-editor-inserter__results">
    <div class="block-editor-inserter__all-blocks">

        <!-- TEXT BLOCKS -->
        <div class="block-editor-inserter__panel-header"><h2 class="block-editor-inserter__panel-title">Text</h2></div>
        <div class="block-editor-inserter__panel-content">
            <div class="block-editor-block-types-list">
                <button class="block-editor-block-types-list__item" data-type="paragraph"><span class="block-editor-block-types-list__item-icon"><i class="fas fa-paragraph"></i></span><span class="block-editor-block-types-list__item-title">Paragraph</span></button>
                <button class="block-editor-block-types-list__item" data-type="header"><span class="block-editor-block-types-list__item-icon"><i class="fas fa-heading"></i></span><span class="block-editor-block-types-list__item-title">Heading</span></button>
                <button class="block-editor-block-types-list__item" data-type="list"><span class="block-editor-block-types-list__item-icon"><i class="fas fa-list-ul"></i></span><span class="block-editor-block-types-list__item-title">List</span></button>
                <button class="block-editor-block-types-list__item" data-type="quote"><span class="block-editor-block-types-list__item-icon"><i class="fas fa-quote-right"></i></span><span class="block-editor-block-types-list__item-title">Quote</span></button>
                <button class="block-editor-block-types-list__item" data-type="code"><span class="block-editor-block-types-list__item-icon"><i class="fas fa-code"></i></span><span class="block-editor-block-types-list__item-title">Code</span></button>
                <button class="block-editor-block-types-list__item" data-type="table"><span class="block-editor-block-types-list__item-icon"><i class="fas fa-table"></i></span><span class="block-editor-block-types-list__item-title">Table</span></button>
                <button class="block-editor-block-types-list__item" data-type="preformatted"><span class="block-editor-block-types-list__item-icon"><i class="fas fa-file-code"></i></span><span class="block-editor-block-types-list__item-title">Preformatted</span></button>
                <button class="block-editor-block-types-list__item" data-type="pullquote"><span class="block-editor-block-types-list__item-icon"><i class="fas fa-quote-left"></i></span><span class="block-editor-block-types-list__item-title">Pullquote</span></button>
                <button class="block-editor-block-types-list__item" data-type="verse"><span class="block-editor-block-types-list__item-icon"><i class="fas fa-feather-alt"></i></span><span class="block-editor-block-types-list__item-title">Verse</span></button>
                <button class="block-editor-block-types-list__item" data-type="details"><span class="block-editor-block-types-list__item-icon"><i class="fas fa-chevron-down"></i></span><span class="block-editor-block-types-list__item-title">Details</span></button>
                <button class="block-editor-block-types-list__item" data-type="classic"><span class="block-editor-block-types-list__item-icon"><i class="fas fa-keyboard"></i></span><span class="block-editor-block-types-list__item-title">Classic</span></button>
            </div>
        </div>

        <!-- MEDIA BLOCKS -->
        <div class="block-editor-inserter__panel-header"><h2 class="block-editor-inserter__panel-title">Media</h2></div>
        <div class="block-editor-inserter__panel-content">
            <div class="block-editor-block-types-list" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;">
                <button class="block-editor-block-types-list__item" data-type="image" style="flex-direction: column; text-align: center; height: auto; padding: 12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin-right: 0; margin-bottom: 8px;"><i class="far fa-image"></i></span><span class="block-editor-block-types-list__item-title">Image</span></button>
                <button class="block-editor-block-types-list__item" data-type="gallery" style="flex-direction: column; text-align: center; height: auto; padding: 12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin-right: 0; margin-bottom: 8px;"><i class="fas fa-images"></i></span><span class="block-editor-block-types-list__item-title">Gallery</span></button>
                <button class="block-editor-block-types-list__item" data-type="audio" style="flex-direction: column; text-align: center; height: auto; padding: 12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin-right: 0; margin-bottom: 8px;"><i class="fas fa-music"></i></span><span class="block-editor-block-types-list__item-title">Audio</span></button>
                <button class="block-editor-block-types-list__item" data-type="cover" style="flex-direction: column; text-align: center; height: auto; padding: 12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin-right: 0; margin-bottom: 8px;"><i class="far fa-caret-square-down"></i></span><span class="block-editor-block-types-list__item-title">Cover</span></button>
                <button class="block-editor-block-types-list__item" data-type="file" style="flex-direction: column; text-align: center; height: auto; padding: 12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin-right: 0; margin-bottom: 8px;"><i class="far fa-file-alt"></i></span><span class="block-editor-block-types-list__item-title">File</span></button>
                <button class="block-editor-block-types-list__item" data-type="media-text" style="flex-direction: column; text-align: center; height: auto; padding: 12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin-right: 0; margin-bottom: 8px;"><i class="fas fa-photo-video"></i></span><span class="block-editor-block-types-list__item-title">Media & Text</span></button>
                <button class="block-editor-block-types-list__item" data-type="video" style="flex-direction: column; text-align: center; height: auto; padding: 12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin-right: 0; margin-bottom: 8px;"><i class="fas fa-video"></i></span><span class="block-editor-block-types-list__item-title">Video</span></button>
            </div>
        </div>

        <!-- DESIGN BLOCKS -->
        <div class="block-editor-inserter__panel-header"><h2 class="block-editor-inserter__panel-title">Design</h2></div>
        <div class="block-editor-inserter__panel-content">
            <div class="block-editor-block-types-list" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;">
                <button class="block-editor-block-types-list__item" data-type="button" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-stop"></i></span><span class="block-editor-block-types-list__item-title">Buttons</span></button>
                <button class="block-editor-block-types-list__item" data-type="columns" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-columns"></i></span><span class="block-editor-block-types-list__item-title">Columns</span></button>
                <button class="block-editor-block-types-list__item" data-type="group" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-object-group"></i></span><span class="block-editor-block-types-list__item-title">Group</span></button>
                <button class="block-editor-block-types-list__item" data-type="row" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-grip-lines"></i></span><span class="block-editor-block-types-list__item-title">Row</span></button>
                <button class="block-editor-block-types-list__item" data-type="stack" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-layer-group"></i></span><span class="block-editor-block-types-list__item-title">Stack</span></button>
                <button class="block-editor-block-types-list__item" data-type="grid" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-th"></i></span><span class="block-editor-block-types-list__item-title">Grid</span></button>
                <button class="block-editor-block-types-list__item" data-type="delimiter" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-minus"></i></span><span class="block-editor-block-types-list__item-title">Page Break</span></button>
                <button class="block-editor-block-types-list__item" data-type="separator" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-arrows-alt-h"></i></span><span class="block-editor-block-types-list__item-title">Separator</span></button>
                <button class="block-editor-block-types-list__item" data-type="spacer" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-arrows-alt-v"></i></span><span class="block-editor-block-types-list__item-title">Spacer</span></button>
                <button class="block-editor-block-types-list__item" data-type="more" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-ellipsis-h"></i></span><span class="block-editor-block-types-list__item-title">More</span></button>
            </div>
        </div>

        <!-- WIDGETS -->
        <div class="block-editor-inserter__panel-header"><h2 class="block-editor-inserter__panel-title">Widgets</h2></div>
        <div class="block-editor-inserter__panel-content">
            <div class="block-editor-block-types-list" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;">
                <button class="block-editor-block-types-list__item" data-type="archives" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-archive"></i></span><span class="block-editor-block-types-list__item-title">Archives</span></button>
                <button class="block-editor-block-types-list__item" data-type="calendar" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-calendar-alt"></i></span><span class="block-editor-block-types-list__item-title">Calendar</span></button>
                <button class="block-editor-block-types-list__item" data-type="categories" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-th-list"></i></span><span class="block-editor-block-types-list__item-title">Cat. List</span></button>
                <button class="block-editor-block-types-list__item" data-type="raw" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-html5"></i></span><span class="block-editor-block-types-list__item-title">Custom HTML</span></button>
                <button class="block-editor-block-types-list__item" data-type="latest-posts" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-list-ul"></i></span><span class="block-editor-block-types-list__item-title">Latest Posts</span></button>
                <button class="block-editor-block-types-list__item" data-type="search" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-search"></i></span><span class="block-editor-block-types-list__item-title">Search</span></button>
                <button class="block-editor-block-types-list__item" data-type="shortcode" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-code"></i></span><span class="block-editor-block-types-list__item-title">Shortcode</span></button>
                <button class="block-editor-block-types-list__item" data-type="social" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-share-alt"></i></span><span class="block-editor-block-types-list__item-title">Social Icons</span></button>
                <button class="block-editor-block-types-list__item" data-type="terms-list" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-th-large"></i></span><span class="block-editor-block-types-list__item-title">Terms List</span></button>
                <button class="block-editor-block-types-list__item" data-type="latest-comments" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-comments"></i></span><span class="block-editor-block-types-list__item-title">Latest Comments</span></button>
                <button class="block-editor-block-types-list__item" data-type="page-list" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-file-alt"></i></span><span class="block-editor-block-types-list__item-title">Page List</span></button>
                <button class="block-editor-block-types-list__item" data-type="rss" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-rss"></i></span><span class="block-editor-block-types-list__item-title">RSS</span></button>
                <button class="block-editor-block-types-list__item" data-type="tag-cloud" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-tags"></i></span><span class="block-editor-block-types-list__item-title">Tag Cloud</span></button>
            </div>
        </div>

        <!-- THEME -->
        <div class="block-editor-inserter__panel-header"><h2 class="block-editor-inserter__panel-title">Theme</h2></div>
        <div class="block-editor-inserter__panel-content">
            <div class="block-editor-block-types-list" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;">
                <button class="block-editor-block-types-list__item" data-type="navigation" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-compass"></i></span><span class="block-editor-block-types-list__item-title">Navigation</span></button>
                <button class="block-editor-block-types-list__item" data-type="site-logo" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-mountain"></i></span><span class="block-editor-block-types-list__item-title">Site Logo</span></button>
                <button class="block-editor-block-types-list__item" data-type="site-title" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-heading"></i></span><span class="block-editor-block-types-list__item-title">Site Title</span></button>
                <button class="block-editor-block-types-list__item" data-type="site-tagline" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-minus"></i></span><span class="block-editor-block-types-list__item-title">Site Tagline</span></button>
                <button class="block-editor-block-types-list__item" data-type="query-loop" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-infinity"></i></span><span class="block-editor-block-types-list__item-title">Query Loop</span></button>
                <button class="block-editor-block-types-list__item" data-type="avatar" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-user-circle"></i></span><span class="block-editor-block-types-list__item-title">Avatar</span></button>
                <button class="block-editor-block-types-list__item" data-type="post-title" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-font"></i></span><span class="block-editor-block-types-list__item-title">Title</span></button>
                <button class="block-editor-block-types-list__item" data-type="post-excerpt" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-align-left"></i></span><span class="block-editor-block-types-list__item-title">Excerpt</span></button>
                <button class="block-editor-block-types-list__item" data-type="featured-image" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="far fa-image"></i></span><span class="block-editor-block-types-list__item-title">Featured Image</span></button>
                <button class="block-editor-block-types-list__item" data-type="author" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-user-alt"></i></span><span class="block-editor-block-types-list__item-title">Author</span></button>
                <button class="block-editor-block-types-list__item" data-type="author-name" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-user"></i></span><span class="block-editor-block-types-list__item-title">Author Name</span></button>
                <button class="block-editor-block-types-list__item" data-type="post-date" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="far fa-calendar"></i></span><span class="block-editor-block-types-list__item-title">Date</span></button>
                <button class="block-editor-block-types-list__item" data-type="modified-date" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-calendar-check"></i></span><span class="block-editor-block-types-list__item-title">Modified Date</span></button>
                <button class="block-editor-block-types-list__item" data-type="post-categories" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-folder"></i></span><span class="block-editor-block-types-list__item-title">Categories</span></button>
                <button class="block-editor-block-types-list__item" data-type="post-tags" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fas fa-tag"></i></span><span class="block-editor-block-types-list__item-title">Tags</span></button>
            </div>
        </div>

        <!-- EMBEDS -->
        <div class="block-editor-inserter__panel-header"><h2 class="block-editor-inserter__panel-title">Embeds</h2></div>
        <div class="block-editor-inserter__panel-content">
            <div class="block-editor-block-types-list" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;">
                <button class="block-editor-block-types-list__item" data-type="embed-youtube" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-youtube"></i></span><span class="block-editor-block-types-list__item-title">YouTube</span></button>
                <button class="block-editor-block-types-list__item" data-type="embed-twitter" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-twitter"></i></span><span class="block-editor-block-types-list__item-title">Twitter</span></button>
                <button class="block-editor-block-types-list__item" data-type="embed-wordpress" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-wordpress"></i></span><span class="block-editor-block-types-list__item-title">WordPress</span></button>
                <button class="block-editor-block-types-list__item" data-type="embed-spotify" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-spotify"></i></span><span class="block-editor-block-types-list__item-title">Spotify</span></button>
                <button class="block-editor-block-types-list__item" data-type="embed-soundcloud" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-soundcloud"></i></span><span class="block-editor-block-types-list__item-title">SoundCloud</span></button>
                <button class="block-editor-block-types-list__item" data-type="embed-flickr" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-flickr"></i></span><span class="block-editor-block-types-list__item-title">Flickr</span></button>
                <button class="block-editor-block-types-list__item" data-type="embed-vimeo" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-vimeo-v"></i></span><span class="block-editor-block-types-list__item-title">Vimeo</span></button>
                <button class="block-editor-block-types-list__item" data-type="embed-reddit" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-reddit"></i></span><span class="block-editor-block-types-list__item-title">Reddit</span></button>
                <button class="block-editor-block-types-list__item" data-type="embed-tiktok" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-tiktok"></i></span><span class="block-editor-block-types-list__item-title">TikTok</span></button>
                <button class="block-editor-block-types-list__item" data-type="embed-instagram" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-instagram"></i></span><span class="block-editor-block-types-list__item-title">Instagram</span></button>
                <button class="block-editor-block-types-list__item" data-type="embed-facebook" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-facebook"></i></span><span class="block-editor-block-types-list__item-title">Facebook</span></button>
                <button class="block-editor-block-types-list__item" data-type="embed-pinterest" style="flex-direction:column; text-align:center; height:auto; padding:12px 0;"><span class="block-editor-block-types-list__item-icon" style="margin:0 0 8px 0;"><i class="fab fa-pinterest"></i></span><span class="block-editor-block-types-list__item-title">Pinterest</span></button>
            </div>
        </div>

    </div>
    </div>
</div>

<!-- ======== PATTERNS PANEL ======== -->
<div id="patterns-panel" class="tab-panel">
    <div class="block-editor-inserter__search">
        <input type="search" placeholder="Search patterns" class="components-text-control__input" id="patterns-search" oninput="filterPatterns(this.value)">
    </div>
    <div class="block-editor-inserter__results">
        <div class="block-editor-inserter__panel-header" style="margin-top:12px;">
            <h2 class="block-editor-inserter__panel-title">Featured</h2>
        </div>
        <div class="patterns-grid">
            <div class="pattern-item" data-pattern="hero" data-label="hero pattern">
                <strong>🏆 Hero Section</strong>
                <small>Large heading + paragraph intro</small>
            </div>
            <div class="pattern-item" data-pattern="two-col" data-label="two column">
                <strong>📐 Two Column Layout</strong>
                <small>Two paragraphs with separator</small>
            </div>
            <div class="pattern-item" data-pattern="cta" data-label="call to action cta">
                <strong>📣 Call to Action</strong>
                <small>Heading + persuasive paragraph</small>
            </div>
            <div class="pattern-item" data-pattern="quote-block" data-label="quote testimonial">
                <strong>💬 Quote / Testimonial</strong>
                <small>Styled block quote</small>
            </div>
            <div class="pattern-item" data-pattern="numbered-list" data-label="numbered list steps">
                <strong>📋 Numbered Steps</strong>
                <small>Ordered list with 3 items</small>
            </div>
        </div>
    </div>
</div>

<!-- ======== MEDIA PANEL ======== -->
<div id="media-panel" class="tab-panel">
    <div class="block-editor-inserter__results" style="padding-top: 16px;">
        <div class="media-panel-content">
            <div class="media-upload-area" id="media-upload-area">
                <i class="fas fa-cloud-upload-alt"></i>
                <p><strong>Click to upload</strong> or drag & drop</p>
                <p>PNG, JPG, GIF up to 10MB</p>
                <input type="file" id="media-file-input" multiple accept="image/*">
            </div>
            <div id="media-preview-list"></div>
        </div>
    </div>
</div>

<script>
function filterPatterns(query) {
    query = query.toLowerCase();
    document.querySelectorAll('#patterns-panel .pattern-item').forEach(item => {
        const label = item.getAttribute('data-label') || '';
        const text = item.innerText.toLowerCase();
        item.style.display = (!query || text.includes(query) || label.includes(query)) ? '' : 'none';
    });
}
</script>
