<?php
/**
 * Fadelux Child Theme — Footer
 * Dark navy footer with editorial column layout, newsletter signup, and social icons
 */
/** @var \Magento\Framework\Escaper $escaper */
?>

<footer class="page-footer" style="background-color: #1A1A2E; color: rgba(245,240,235,0.75);">

    <!-- Newsletter ribbon -->
    <div style="background: linear-gradient(90deg, #C8A97E 0%, #E2CBA8 50%, #C8A97E 100%);
                padding: 2rem clamp(1.5rem,5vw,5rem); display: flex; align-items: center;
                justify-content: space-between; flex-wrap: wrap; gap: 1.5rem;">
        <div>
            <p style="font-family: 'Playfair Display',serif; font-size: 1.375rem; font-weight: 600;
                      color: #0A0A0A; margin: 0 0 0.25rem; letter-spacing: -0.01em;">
                <?= __('Rimani aggiornato sulle ultime novità') ?>
            </p>
            <p style="font-size: 0.8125rem; color: rgba(10,10,10,0.65); margin: 0;">
                <?= __('Offerte esclusive e nuovi arrivi direttamente nella tua inbox') ?>
            </p>
        </div>
        <form class="footer-newsletter-form"
              action="<?= $block->getUrl('newsletter/subscriber/new') ?>"
              method="post"
              style="display:flex; border: 1.5px solid rgba(10,10,10,0.2); border-radius:4px;
                     overflow:hidden; min-width: 320px; background: rgba(255,255,255,0.35);">
            <?= $block->getBlockHtml('formkey') ?>
            <input type="email" name="email" required
                   placeholder="<?= $escaper->escapeHtmlAttr(__('La tua email')) ?>"
                   style="background:transparent; border:none; padding:0.75rem 1rem;
                          font-size:0.875rem; color:#0A0A0A; flex:1; min-width:0;
                          font-family:'Inter',sans-serif;"
                   aria-label="<?= $escaper->escapeHtmlAttr(__('Email per newsletter')) ?>" />
            <button type="submit"
                    style="background-color:#1A1A2E; color:#F5F0EB; border:none;
                           padding:0.75rem 1.25rem; font-size:0.7rem; font-weight:700;
                           letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
                           font-family:'Inter',sans-serif; flex-shrink:0; transition:background 200ms ease;">
                <?= __('Iscriviti') ?>
            </button>
        </form>
    </div>

    <!-- Main footer columns -->
    <div class="footer-col-mains" style="display:grid; grid-template-columns: 1.5fr repeat(3, 1fr);
                gap:3rem; padding:4rem clamp(1.5rem,5vw,5rem) 3rem;">

        <!-- Brand column -->
        <div>
            <a href="<?= $block->getBaseUrl() ?>" style="display:inline-block; margin-bottom:1.25rem;">
                <img src="<?= $block->getUrl().'media/logo/stores/1/logo.png' ?>"
                     alt="Fadelux"
                     style="height:38px; width:auto; filter: brightness(0) invert(1); opacity:0.85;"
                     onerror="this.style.display='none'; this.nextSibling.style.display='block';" />
                <span style="display:none; font-family:'Playfair Display',serif; font-size:1.5rem;
                             font-weight:600; color:#F5F0EB; letter-spacing:-0.02em;">Fadelux</span>
            </a>
            <p style="font-size:0.875rem; line-height:1.7; color:rgba(245,240,235,0.6); max-width:26ch; margin:0 0 1.5rem;">
                <?= __("Shop Online che nasce nel Gennaio 2017 per volontà dell'Amministratore Delegato del gruppo Musmar Srl, società operante in Italia e all'Estero dal 1979 con la vendita di Brand Fashion Sport Internazionali di massimo spessore ubicata a Rimini in Viale Amerigo Vespucci 135.") ?>
            </p>
            <!-- Social icons -->
            <div style="display:flex; gap:0.75rem;">
                <a href="https://www.facebook.com/profile.php?id=61575707203869" target="_blank" rel="noopener"
                   aria-label="Facebook"
                   style="width:36px; height:36px; border:1px solid rgba(255,255,255,0.15);
                          border-radius:50%; display:flex; align-items:center; justify-content:center;
                          color:rgba(245,240,235,0.65); transition:border-color 200ms ease, color 200ms ease;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                    </svg>
                </a>
                <a href="https://www.instagram.com/fadelux.it/" target="_blank" rel="noopener"
                   aria-label="Instagram"
                   style="width:36px; height:36px; border:1px solid rgba(255,255,255,0.15);
                          border-radius:50%; display:flex; align-items:center; justify-content:center;
                          color:rgba(245,240,235,0.65); transition:border-color 200ms ease, color 200ms ease;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"
                         stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                        <circle cx="12" cy="12" r="4"/>
                        <circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/>
                    </svg>
                </a>
            </div>
        </div>

        <!-- Navigazione -->
        <div>
            <h4 style="font-family:'Inter',sans-serif; font-size:0.65rem; font-weight:700;
                       letter-spacing:0.2em; text-transform:uppercase; color:#C8A97E; margin:0 0 1rem;">
                <?= __('Get in Touch') ?>
            </h4>
            <div class="space-y-6">

				<!-- Address -->
				<div class="flex items-start gap-4">
					<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
							 viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
							<path stroke-linecap="round" stroke-linejoin="round"
								  d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/>
							<path stroke-linecap="round" stroke-linejoin="round"
								  d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
						</svg>
					</div>

					<div>
						<p class="text-gray-600">
							Viale Amerigo Vespucci 135 47921 Rimini
						</p>
					</div>
				</div>

				<!-- Phone -->
				<div class="flex items-start gap-4">
					<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
							 viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
							<path stroke-linecap="round" stroke-linejoin="round"
								  d="M3 5a2 2 0 012-2h3.28a1 1 0 01.95.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.128a11.042 11.042 0 005.516 5.516l1.128-2.257a1 1 0 011.21-.502l4.493 1.498A1 1 0 0121 15.72V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
						</svg>
					</div>

					<div>
						<p class="text-gray-600">
							<a href="tel:+393285388427" class="hover:text-primary">
								+39 328 5388427
							</a><br>
							WhatsApp:
							<a href="https://wa.me/393285388427" class="hover:text-primary">
								+39 328 5388427
							</a>
						</p>
					</div>
				</div>

				<!-- Email -->
				<div class="flex items-start gap-4">
					<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
							 viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
							<path stroke-linecap="round" stroke-linejoin="round"
								  d="M3 8l9 6 9-6M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
						</svg>
					</div>

					<div>
						<p>
							<a href="mailto:info@fadelux.it" class="text-primary hover:underline">
								info@fadelux.it
							</a>
						</p>
					</div>
				</div>

				<!-- Opening Hours -->
				<div class="flex items-start gap-4">
					<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
							 viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
							<circle cx="12" cy="12" r="9"></circle>
							<path stroke-linecap="round" stroke-linejoin="round"
								  d="M12 7v5l3 3"/>
						</svg>
					</div>

					<div>
						<p class="text-gray-600">
							Lun–Ven: 10:00–12:00<br>
							16:00–18:00
						</p>
					</div>
				</div>

			</div>
        </div>

        <!-- Assistenza -->
        <div>
            <h4 style="font-family:'Inter',sans-serif; font-size:0.65rem; font-weight:700;
                       letter-spacing:0.2em; text-transform:uppercase; color:#C8A97E; margin:0 0 1rem;">
                <?= __('Assistenza') ?>
            </h4>
            <nav>
                <a href="<?= $block->getUrl('customer/account') ?>" style="display:block; color:rgba(245,240,235,0.65);
                   font-size:0.875rem; line-height:2.3; transition:color 200ms ease;"><?= __('Il mio account') ?></a>
                <a href="<?= $block->getUrl('sales/order/history') ?>" style="display:block; color:rgba(245,240,235,0.65);
                   font-size:0.875rem; line-height:2.3; transition:color 200ms ease;"><?= __('I miei ordini') ?></a>
                <a href="<?= $block->getUrl('contact') ?>" style="display:block; color:rgba(245,240,235,0.65);
                   font-size:0.875rem; line-height:2.3; transition:color 200ms ease;"><?= __('Contattaci') ?></a>
                <a href="<?= $block->getUrl('wishlist') ?>" style="display:block; color:rgba(245,240,235,0.65);
                   font-size:0.875rem; line-height:2.3; transition:color 200ms ease;">
                    <?= __('Lista dei desideri') ?>
                </a>
            </nav>
        </div>

        <!-- Informazioni -->
        <div>
            <h4 style="font-family:'Inter',sans-serif; font-size:0.65rem; font-weight:700;
                       letter-spacing:0.2em; text-transform:uppercase; color:#C8A97E; margin:0 0 1rem;">
                <?= __('Informazioni') ?>
            </h4>
            <nav>
                <a href="<?= $block->getUrl('chi-siamo') ?>" style="display:block; color:rgba(245,240,235,0.65);
                   font-size:0.875rem; line-height:2.3; transition:color 200ms ease;"><?= __('Chi Siamo') ?></a>
				<a href="<?= $block->getUrl('assistenza-clienti') ?>" style="display:block; color:rgba(245,240,235,0.65);
                   font-size:0.875rem; line-height:2.3; transition:color 200ms ease;"><?= __('Assistenza Clienti') ?></a>
                <a href="<?= $block->getUrl('condizioni-di-vendita') ?>" style="display:block; color:rgba(245,240,235,0.65);
                   font-size:0.875rem; line-height:2.3; transition:color 200ms ease;"><?= __('Termini e Condizioni di vendita') ?></a>
                <a href="<?= $block->getUrl('resi-e-rimborsi') ?>" style="display:block; color:rgba(245,240,235,0.65);
                   font-size:0.875rem; line-height:2.3; transition:color 200ms ease;"><?= __('Resi e Rimborsi') ?></a>
                <a href="<?= $block->getUrl('tipi-di-pagamenti') ?>" style="display:block; color:rgba(245,240,235,0.65);
                   font-size:0.875rem; line-height:2.3; transition:color 200ms ease;"><?= __('Tipi di pagamento') ?></a>
				<a href="<?= $block->getUrl('metodi-di-consegna') ?>" style="display:block; color:rgba(245,240,235,0.65);
                   font-size:0.875rem; line-height:2.3; transition:color 200ms ease;"><?= __('Metodi di consegna') ?></a>
				
            </nav>
        </div>
    </div>

    <!-- Footer bottom bar -->
    <div style="border-top: 1px solid rgba(255,255,255,0.08);
                padding: 1.5rem clamp(1.5rem,5vw,5rem);
                display:flex; align-items:center; justify-content:space-between;
                flex-wrap:wrap; gap:1rem; font-size:0.75rem; color:rgba(245,240,235,0.38);">
        <span><?= __('© ' . date('Y') . ' Musmar Srl VAT number 04047720406') ?></span>
        <div style="display:flex; align-items:center; gap:0.5rem;">
            <!-- Payment method icons (text fallback) -->
            <span style="font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase;">
               <img src="<?= $block->getUrl().'media/wysiwyg/payments/payment-footer.png' ?>"
                     alt="Fadelux"
                     style="height:100px; width:auto; opacity:0.85;"
                     onerror="this.style.display='none'; this.nextSibling.style.display='block';" /> 
            </span> 
        </div>
    </div>
</footer>
