{#
# Location & Contact Component
# Sophisticated layout with map and contact information
#
# Usage: {% include 'components/location-contact.twig' with { block: block } %}
#}

{# Get field values from block – no defaults; only show fields that have content #}
{% set topLabel = block.topLabel is defined and block.topLabel|length ? block.topLabel : null %}
{% set heading = block.heading is defined and block.heading|length ? block.heading : null %}
{% set locationAddress = block.locationAddress is defined and block.locationAddress|length ? block.locationAddress : null %}
{% set openingHours = block.openingHours is defined and block.openingHours|length ? block.openingHours : null %}
{% set phoneNumber = block.phoneNumber is defined and block.phoneNumber|length ? block.phoneNumber : null %}
{% set email = block.email is defined and block.email|length ? block.email : null %}
{% set mapUrlRaw = block.mapEmbedUrl ?? null %}
{% set mapEmbedUrl = null %}
{% if mapUrlRaw %}
    {% set mapStr = mapUrlRaw.url is defined ? mapUrlRaw.url : (mapUrlRaw|string) %}
    {% if mapStr is not empty and ('embed' in mapStr|lower or 'google.com/maps/embed' in mapStr|lower) %}
        {% set mapEmbedUrl = mapStr %}
    {% endif %}
{% endif %}

{% set ctaButtonUrlRaw = block.ctaButtonUrl ?? null %}
{% set ctaButtonUrl = null %}
{% set ctaEntry = null %}
{% set ctaButtonText = null %}

{% if ctaButtonUrlRaw %}
    {% if ctaButtonUrlRaw.one is defined %}
        {% set ctaEntry = ctaButtonUrlRaw.one() %}
        {% if ctaEntry %}
            {% set ctaButtonUrl = ctaEntry.urlAddress ?? ctaEntry.buttonUrl ?? ctaEntry.url ?? null %}
            {% set ctaButtonText = ctaEntry.linkText ?? ctaEntry.buttonText ?? ctaEntry.title ?? null %}
        {% endif %}
    {% elseif ctaButtonUrlRaw.url is defined %}
        {% set ctaButtonUrl = ctaButtonUrlRaw.url %}
    {% else %}
        {% set ctaButtonUrl = ctaButtonUrlRaw|string %}
    {% endif %}
{% endif %}
{% if block.linkText is defined and block.linkText|length %}
    {% set ctaButtonText = block.linkText %}
{% elseif block.ctaButtonText is defined and block.ctaButtonText|length %}
    {% set ctaButtonText = block.ctaButtonText %}
{% endif %}

{% set hasLocationContent = topLabel or heading or locationAddress or openingHours or phoneNumber or email or mapEmbedUrl or (ctaButtonText and ctaButtonUrl) %}
{% if hasLocationContent %}
<section class="section-luxury bg-cream relative overflow-hidden bg-pattern-luxury">
    <div class="container-default relative">
        {% if topLabel or heading %}
        <div class="section-heading">
            {% if topLabel %}
            <div class="flex items-center justify-center gap-4 mb-6">
                <div class="w-12 h-px bg-gold"></div>
                <p class="text-gold tracking-widest text-2xl font-medium font-body">{{ topLabel }}</p>
                <div class="w-12 h-px bg-gold"></div>
            </div>
            {% endif %}
            {% if heading %}
            <h2 class="text-navy">{{ heading }}</h2>
            {% endif %}
        </div>
        {% endif %}
        
        <div class="grid lg:grid-cols-5 gap-12">
            <div class="lg:col-span-2 space-y-5">
                {% if locationAddress %}
                <div class="card-luxury-sm p-7 flex items-start gap-5">
                    <div class="icon-wrapper-gold flex-shrink-0">
                        <svg class="w-6 h-6 text-gold" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="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 1115 0z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-navy font-semibold mb-2">Location</h3>
                        <p class="text-charcoal-light text-sm leading-relaxed">
                            {{ locationAddress|raw }}
                        </p>
                    </div>
                </div>
                {% endif %}
                {% if openingHours %}
                <div class="card-luxury-sm p-7 flex items-start gap-5">
                    <div class="icon-wrapper-gold flex-shrink-0">
                        <svg class="w-6 h-6 text-gold" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-navy font-semibold mb-2">Opening Hours</h3>
                        <div class="text-charcoal-light text-sm space-y-1">
                            {{ openingHours|raw|nl2br }}
                        </div>
                    </div>
                </div>
                {% endif %}
                {% if phoneNumber or email %}
                <div class="card-luxury-sm p-7 flex items-start gap-5">
                    <div class="icon-wrapper-gold flex-shrink-0">
                        <svg class="w-6 h-6 text-gold" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.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 01-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 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-navy font-semibold mb-2">Get In Touch</h3>
                        <div class="text-charcoal-light text-sm space-y-1">
                            {% if phoneNumber %}<p><a href="tel:{{ phoneNumber|replace({' ': '', '-': '', '(': '', ')': ''}) }}" class="hover:text-gold transition-colors">{{ phoneNumber }}</a></p>{% endif %}
                            {% if email %}<p><a href="mailto:{{ email }}" class="hover:text-gold transition-colors">Email Us</a></p>{% endif %}
                        </div>
                    </div>
                </div>
                {% endif %}
                {% if ctaButtonText and ctaButtonUrl %}
                <div class="pt-4">
                    <a href="{{ ctaButtonUrl }}" class="btn-gold-lg w-full flex items-center justify-center group">
                        <span>{{ ctaButtonText }}</span>
                        <svg class="w-5 h-5 ml-3 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                        </svg>
                    </a>
                </div>
                {% endif %}
            </div>
            
            {% if mapEmbedUrl %}
            <div class="lg:col-span-3">
                <div class="rounded-3xl overflow-hidden shadow-luxury h-full min-h-[450px] relative">
                    <iframe 
                        src="{{ mapEmbedUrl }}" 
                        width="100%" 
                        height="100%" 
                        style="border:0; min-height: 450px;" 
                        allowfullscreen="" 
                        loading="lazy"
                        class="grayscale-[20%] hover:grayscale-0 transition-all duration-700"
                        title="Map showing clinic location"
                    ></iframe>
                    <!-- Gold accent corners -->
                    <div class="absolute top-0 left-0 w-16 h-16 border-t-2 border-l-2 border-gold pointer-events-none"></div>
                    <div class="absolute bottom-0 right-0 w-16 h-16 border-b-2 border-r-2 border-gold pointer-events-none"></div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</section>
{% endif %}