<script>
    import Row from "$lib/Row.svelte"
    import Col from "$lib/Col.svelte"
    import Button from "$lib/Button.svelte"

    function openCroa () {
        window.open("croa/");
    }

</script>

<div class="hero">
    <Col gap="2rem" align="center" justify="center">
        <div class="hero-content">
            <h1 class="title">Welcome to Goupiliot</h1>
            <p class="subtitle">
                Here you can find Celeste's personal website, as well as Ysa's, 
                and SweetCheeseCrepes, where Celeste goes nuts...
            </p>
            <Row gap="1rem" justify="center" wrap={true}>
                <Button action={openCroa} label="Celeste's Portfolio" --button-color=var(--secondary)></Button>
                <Button action={() => console.log("don't exist yet")} label="Ysa's Portfolio" --button-color=var(--secondary)></Button>
                <Button action= {() => console.log("don't exist yet")} label="SweetCheeseCrepes"--button-color=var(--secondary)></Button>
            </Row>
        </div>
    </Col>

</div>

<style>
    .hero {
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .hero-content {
        max-width: 800px;
        text-align: center;
    }

    .title {
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 700;
        margin-bottom: 1rem;
        background: linear-gradient(135deg, var(--accent), var(--accent-light, var(--primary))); 
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .subtitle {
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.6;
        margin-bottom: 2rem;
        color: var(--text);
    }
</style>
