<script lang="ts">
    import ExternalLinkIcon from './Icon/ExternalLink.svelte';

    const {
        title,
        subtitle,
        bookingLinkTitle,
        bookingLinkUrl = 'https://cal.mifi.ventures/the-mifi/30min',
        showEmailLink = false,
        showServicesLink = false,
        sectionId = 'contact',
        headingId = 'contact-heading',
    }: {
        title: string;
        subtitle: string;
        bookingLinkTitle: string;
        bookingLinkUrl?: string;
        showEmailLink?: boolean;
        showServicesLink?: boolean;
        sectionId?: string;
        headingId?: string;
    } = $props();
</script>

<section id={sectionId} class="section schedule-section" aria-labelledby={headingId}>
    <div class="container">
        <h2 id={headingId} class="section-title">{title}</h2>
        <p class="schedule-text">{subtitle}</p>
        <div class="cta-group">
            <a
                href={bookingLinkUrl}
                class="btn btn-primary icon-button"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Schedule a 30-minute intro call (opens in new tab)"
                data-umami-event="schedule call"
                data-umami-event-location="contact section"
            >
                {bookingLinkTitle}
                <ExternalLinkIcon aria-label="Opens in new tab" size={17} />
            </a>
            {#if showEmailLink}
                <a
                    href="mailto:hello@mifi.ventures"
                    class="btn btn-secondary"
                    data-umami-event="email"
                    data-umami-event-location="contact section"
                >
                    Email me
                </a>
            {/if}
            {#if showServicesLink}
                <a
                    href="/services"
                    class="btn btn-secondary"
                    data-umami-event="view services"
                    data-umami-event-location="contact section"
                >
                    View services
                </a>
            {/if}
        </div>
    </div>
</section>

<style>
    .schedule-section {
        text-align: center;
        background-color: var(--color-bg-subtle);
    }

    .schedule-text {
        margin-bottom: var(--space-lg);
        font-size: var(--font-size-large);
        font-weight: var(--font-weight-normal);
        color: var(--color-text-secondary);
        line-height: var(--line-height-relaxed);
        max-width: var(--max-text-width);
        margin-left: auto;
        margin-right: auto;
    }

    .cta-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
        justify-content: center;
        align-items: center;
    }

    @media (max-width: 768px) {
        .cta-group {
            flex-direction: column;
            width: 100%;
        }
    }
</style>
