<script setup lang="ts">
import AppLayout from "@/layouts/AppLayout.vue";
import SectionContainer from "@/components/dredgy/SectionContainer.vue";
import SectionTitle from "@/components/dredgy/SectionTitle.vue";
import ProfileCard from "@/components/ProfileCard.vue";

defineOptions({
    layout: AppLayout
})
</script>

<template>
    <section class="about about-us" id="about-us">
        <div class="about-decorations">
            <div class="about-decoration about-decoration-1"></div>
            <div class="about-decoration about-decoration-2"></div>
            <div class="about-decoration about-decoration-3"></div>
        </div>

        <SectionContainer>
            <div v-show-on-intersect="'fade-up'" class="about-content">
                <SectionTitle title="Meet" gradient="The Team" subtitle="Dr Edgy was started by friends who can't get enough of adventuring and who enjoy the thrill of planning and sharing their experiences." />
                <div class="company-blurb" v-show-on-intersect="{type:'fade-up'}">
                    <p>

                    </p>
                </div>

                <div class="profiles">
                    <ProfileCard
                        photoSide="left"
                        name="Joshua Dredge"
                        position="Founder & Guide"
                        slide="left"
                        photo="/img/staff/josh_dredge.jpg"
                        blurb="Josh has been travelling since he was an infant, and has no plans to stop! He loves the act of discovery and is always going to places that he can't find an information on! He has a particular penchant for China, Central Asia and anywhere with a desert.
                        His background is in bartending, small-business management, wine logistics and software development; but made the move to guiding so that he's not tied down! He can't wait to introduce you to new and exciting places!"
                    />
                </div>
                <div class="profiles">
                    <ProfileCard
                        slide="right"
                        photoSide="right"
                        name="Dr Rainbow Yuan"
                        position="Founder & Tour Designer (China)"
                        photo="/img/staff/rainbow_yuan.jpg"
                        blurb="Born and raised in Dongguan, China, Rainbow earned her doctorate of education and has taught widely across China, Malaysia, Thailand and even
                        at Kim il-Sung university in North Korea! She's of Hakka descent and is fluent in English, Mandarin and Cantonese. Rainbow has travelled far and wide
                        and is always eager to share her knowledge and experiences with you."
                    />
                </div>
            </div>
        </SectionContainer>
    </section>
</template>

<style scoped>
/* Company blurb */
.company-blurb {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-blurb p {
    color: var(--muted-foreground);
    font-size: 1.08rem;
    line-height: 1.7;
    max-width: 70ch;
    text-align: center;
}

/* Base "About" styling to match the Home page aesthetic */
.about {
    position: relative;
    padding: 5rem 0;
    background: var(--background);
    overflow: hidden;
    min-height: 90dvh;
}

.about-decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.about-decoration {
    position: absolute;
    opacity: 0.05;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.about-decoration-1 {
    top: 2rem;
    right: 2rem;
    width: 100px;
    height: 100px;
    background: var(--gradient-adventure);
}

.about-decoration-2 {
    bottom: 3rem;
    left: 3rem;
    width: 80px;
    height: 80px;
    background: var(--gradient-accent);
}

.about-decoration-3 {
    top: 50%;
    right: 5rem;
    width: 6px;
    height: 100px;
    background: var(--gradient-adventure);
}

/* Profiles layout */
.profiles {
    display: grid;
    gap: 2.5rem;
    margin-top: 3rem;
}

/* Mobile tweaks */

</style>
