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

<section
    id="schedule"
    class="section schedule-section"
    aria-labelledby="schedule-heading"
>
    <div class="container">
        <h2 id="schedule-heading" class="section-title">Let's Talk</h2>
        <p class="schedule-text">Ready to discuss your project?</p>
        <a
            href="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_medium=schedule_section_cta"
            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="schedule section"
        >
            Schedule a 30-minute intro call
            <ExternalLinkIcon aria-label="Opens in new tab" size={17} />
        </a>
    </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: 100%;
    }

    .btn {
        margin: 0 auto;
    }
</style>
