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

<header id="header" class="hero">
    <div class="container">
        <Logo />
        <h2 class="headline">Hands-On Product Architecture for Early-Stage SaaS</h2>
        <p class="subhead">
            I help SaaS teams ship quickly without creating frontend debt, architectural
            drift, or technical complexity that slows iteration later.
        </p>
        <p class="supporting">
            Mike Fitzpatrick — product architect and senior software engineer
        </p>
        <div class="cta-group">
            <a
                href="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=hero"
                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="hero"
            >
                Schedule a 30-minute intro call
                <ExternalLinkIcon aria-label="Opens in new tab" size={17} />
            </a>
            <a
                href="/services"
                class="btn btn-secondary"
                data-umami-event="view services"
                data-umami-event-location="hero"
            >
                View services
            </a>
        </div>
    </div>
</header>

<style>
    .hero {
        padding: var(--space-xxxl) 0 var(--space-xxl) 0;
        text-align: center;
        background-color: var(--color-bg);
        border-bottom: 1px solid var(--color-border);

        @media (max-width: 768px) {
            padding: var(--space-xxl) 0 var(--space-xl) 0;
        }

        @media (max-width: 480px) {
            padding: var(--space-xl) 0 var(--space-lg) 0;
        }
    }

    .headline {
        margin-bottom: var(--space-lg);
        font-family: var(--font-family-heading);
        font-size: var(--font-size-xxl);
        font-weight: var(--font-weight-bold);
        letter-spacing: -0.03em;
        color: var(--color-text);
        line-height: var(--line-height-heading);

        @media (max-width: 768px) {
            font-size: var(--font-size-xl);
        }
    }

    .subhead {
        max-width: var(--max-narrow-width);
        margin: 0 auto var(--space-md) auto;
        font-size: var(--font-size-large);
        font-weight: var(--font-weight-normal);
        color: var(--color-text-secondary);
        line-height: var(--line-height-relaxed);
    }

    .supporting {
        margin: 0 auto var(--space-xl) auto;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-tertiary);
    }

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

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