{#
# Contact Hero / "Contact us Today" section
# Light background, two-line heading (second word in gold), paragraph, two CTAs.
#
# Usage with block (from Page Builder / entry):
#   {% include 'components/contact-hero.twig' with { block: block } %}
# Standalone (defaults):
#   {% include 'components/contact-hero.twig' %}
# With custom vars:
#   {% include 'components/contact-hero.twig' with { topLabel: 'Get in Touch', heading: 'Contact us Today', subheading: '...', bookUrl: '/book', phoneNumber: '07834 258 596' } %}
#}
{% set topLabel = block is defined ? (block.topLabel ?? block.plainText2 ?? null) : (topLabel ?? null) %}
{% set heading = block is defined ? (block.ctaHeading ?? block.heading ?? block.plainText ?? null) : (heading ?? null) %}
{% set subheading = block is defined ? (block.ctaDescription ?? block.subheading ?? block.textArea ?? null) : (subheading ?? null) %}
{% set bookUrl = bookUrl ?? null %}
{% set bookText = block is defined ? (block.ctaButtonText ?? block.linkText ?? null) : (bookText ?? null) %}
{% set phoneNumber = block is defined ? (block.phoneNumber ?? null) : (phoneNumber ?? null) %}
{% if block is defined and block.ctaButtonUrl is defined and block.ctaButtonUrl %}
    {% set urlRaw = block.ctaButtonUrl %}
    {% if urlRaw.one is defined %}
        {% set ctaEntry = urlRaw.one() %}
        {% if ctaEntry %}{% set bookUrl = ctaEntry.urlAddress ?? ctaEntry.buttonUrl ?? ctaEntry.url ?? bookUrl %}{% endif %}
    {% elseif urlRaw.url is defined %}
        {% set bookUrl = urlRaw.url %}
    {% else %}
        {% set bookUrl = urlRaw|string %}
    {% endif %}
{% endif %}

{% set hasContactHeroContent = topLabel or heading or subheading or (bookText and bookUrl) or phoneNumber %}
{% if hasContactHeroContent %}
<section class="section-luxury bg-cream relative overflow-hidden bg-pattern-luxury">
    <div class="container-default relative">
        <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 %}
            {% set parts = heading|split(' ') %}
            {% if parts|length > 1 %}
                <h1 class="text-navy font-heading text-4xl md:text-5xl lg:text-6xl font-normal leading-tight max-w-4xl mx-auto text-center">
                    {{ parts|slice(0, -1)|join(' ') }} <span class="text-gold">{{ parts|last }}</span>
                </h1>
            {% else %}
                <h1 class="text-navy font-heading text-4xl md:text-5xl lg:text-6xl font-normal leading-tight max-w-4xl mx-auto text-center">{{ heading }}</h1>
            {% endif %}
            {% endif %}
            {% if subheading %}
                <p class="max-w-2xl mx-auto mt-6 text-lg text-charcoal-light leading-relaxed text-center font-body">
                    {{ subheading }}
                </p>
            {% endif %}
            {% if (bookText and bookUrl) or phoneNumber %}
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mt-10">
                {% if bookText and bookUrl %}
                <a href="{{ bookUrl }}" class="btn-gold-lg inline-flex items-center justify-center group">
                    <span>{{ bookText }}</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>
                {% endif %}
                {% if phoneNumber %}
                <a href="tel:{{ phoneNumber|replace({' ': '', '-': '', '(': '', ')': ''}) }}" class="btn-outline inline-flex items-center justify-center group">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" stroke-width="2" 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>
                    <span>{{ phoneNumber }}</span>
                </a>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</section>
{% endif %}