<?php
/** @var \Magento\Framework\Escaper $escaper */
/** @var \Hyva\Theme\Model\ViewModelRegistry $viewModels */
/** @var \Hyva\Theme\ViewModel\Modal $modalViewModel */
$modalViewModel = $viewModels->require(\Hyva\Theme\ViewModel\Modal::class);

$facebook = $this->getViewFileUrl('images/facebook.svg');
$twitter = $this->getViewFileUrl('images/twitter.svg');
$linkedin = $this->getViewFileUrl('images/linkedin.svg');
?>
<div x-data="hyvaModal">
    <div @click="show" aria-haspopup="dialog" class="cursor-pointer rounded-2xl">
        <svg width="54" height="51" viewBox="0 0 54 51" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="0.295166" width="53.6906" height="51" rx="7" fill="#36363A"/>
            <path d="M34.1207 14.1431L13.0237 26.7145L34.1207 38.1431" stroke="white" stroke-width="3"/>
            <ellipse cx="34.1222" cy="14.1429" rx="5.13171" ry="5.14286" fill="white"/>
            <ellipse cx="12.4542" cy="26.7141" rx="5.13171" ry="5.14286" fill="white"/>
            <ellipse cx="34.1222" cy="36.9998" rx="5.13171" ry="5.14286" fill="white"/>
        </svg>
    </div>

    <?= $modalViewModel->createModal()->withContent(<<<END_OF_CONTENT
        <div class="relative p-6 text-center space-y-6">

            <!-- Close (×) button -->
            <button @click="hide" class="absolute top-2 right-2 text-gray-600 hover:text-black text-xl font-bold leading-none">
                &times;
            </button>

            <!-- Title -->
            <div id="the-label" class="text-xl font-semibold">
                {$escaper->escapeHtml(__('Share This Page'))}
            </div>

            <!-- Social Icons -->
            <div class="flex justify-center gap-6 items-center">
                <a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" title="Facebook" class="hover:opacity-80">
                    <img src="{$facebook}" alt="Facebook" class="w-8 h-8 rounded" />
                </a>
                <a href="https://twitter.com/intent/tweet?url=" target="_blank" title="Twitter" class="hover:opacity-80">
                    <img src="{$twitter}" alt="Twitter" class="w-8 h-8 rounded" />
                </a>
                <a href="https://www.linkedin.com/sharing/share-offsite/?url=" target="_blank" title="LinkedIn" class="hover:opacity-80">
                    <img src="{$linkedin}" alt="LinkedIn" class="w-8 h-8 rounded" />
                </a>
                <a href="mailto:?subject=Check this out&body=Link: " title="Email" class="hover:opacity-80">
                    <x-icon name="envelope" class="w-8 h-8" />
                </a>
            </div>

        </div>
    END_OF_CONTENT
    )
        ->withAriaLabelledby('the-label')
        ->addDialogClass('border', 'border-10', 'border-blue-800', 'items-center', 'justify-center', 'p-4')
    ?>
</div>
