<script lang="ts">
import { _ } from "svelte-i18n";
import { Button } from "$lib/components/ui/button";
import { Card, CardContent } from "$lib/components/ui/card";
import Meta from "$lib/components/meta/meta.svelte";
import PeonyBackground from "$lib/components/background/peony-background.svelte";

const { data } = $props();

const stats = [
	{
		icon: "icon-[ri--user-heart-line]",
		value: data.stats.viewers_count,
		label: $_("about.stats.members"),
	},
	{
		icon: "icon-[ri--video-on-line]",
		value: data.stats.videos_count,
		label: $_("about.stats.videos"),
	},
	{
		icon: "icon-[ri--star-line]",
		value: data.stats.models_count,
		label: $_("about.stats.models"),
	},
	{
		icon: "icon-[ri--award-line]",
		value: $_("about.stats.yearsFormatted", { values: { years: 5 } }),
		label: $_("about.stats.experience"),
	},
];

const team = [
	{
		name: $_("about.team.sebastian.name"),
		role: $_("about.team.sebastian.role"),
		image: $_("about.team.sebastian.image"),
		bio: $_("about.team.sebastian.bio"),
	},
	{
		name: $_("about.team.valknar.name"),
		role: $_("about.team.valknar.role"),
		image: $_("about.team.valknar.image"),
		bio: $_("about.team.valknar.bio"),
	},
];

const values = [
	{
		icon: "icon-[ri--heart-line]",
		title: $_("about.values.authentic_expression.title"),
		description: $_("about.values.authentic_expression.description"),
	},
	{
		icon: "icon-[ri--shield-line]",
		title: $_("about.values.safety_respect.title"),
		description: $_("about.values.safety_respect.description"),
	},
	{
		icon: "icon-[ri--star-line]",
		title: $_("about.values.artistic_excellence.title"),
		description: $_("about.values.artistic_excellence.description"),
	},
	{
		icon: "icon-[ri--user-heart-line]",
		title: $_("about.values.community_first.title"),
		description: $_("about.values.community_first.description"),
	},
];
</script>

<Meta title={$_("about.title")} description={$_("about.subtitle")} />

<div
    class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
>
    <PeonyBackground />

    <!-- Hero Section -->
    <section class="relative py-20 overflow-hidden">
        <div
            class="absolute inset-0 bg-gradient-to-br from-primary/10 via-accent/5 to-background"
        ></div>
        <div class="relative container mx-auto px-4 text-center">
            <div class="max-w-5xl mx-auto">
                <h1
                    class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
                >
                    {$_("about.title")}
                </h1>
                <p
                    class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
                >
                    {$_("about.subtitle")}
                </p>
                <div class="flex justify-center">
                    <Button
                        size="lg"
                        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
                        href="/signup">{$_("about.join_community")}</Button
                    >
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-16 bg-card/30">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                {#each stats as stat (stat.icon)}
                    <div class="text-center">
                        <div
                            class="w-16 h-16 bg-gradient-to-br from-primary/20 to-accent/20 rounded-full flex items-center justify-center mx-auto mb-4"
                        >
                            <span class={stat.icon + " w-8 h-8 text-primary"}></span>
                        </div>
                        <div class="text-3xl font-bold text-primary mb-2">{stat.value}</div>
                        <div class="text-muted-foreground">{stat.label}</div>
                    </div>
                {/each}
            </div>
        </div>
    </section>

    <!-- Our Story Section -->
    <section class="py-20">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">
                        {$_("about.story.title")}
                    </h2>
                    <p class="text-lg text-muted-foreground">
                        {$_("about.story.subtitle")}
                    </p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="space-y-6">
                        <p class="text-muted-foreground leading-relaxed text-lg">
                            {$_("about.story.description_part1")}
                        </p>
                        <p class="text-muted-foreground leading-relaxed text-lg">
                            {$_("about.story.description_part2")}
                        </p>
                        <p class="text-muted-foreground leading-relaxed text-lg">
                            {$_("about.story.description_part3")}
                        </p>
                    </div>
                    <div class="relative">
                        <img
                            src="/img/babes.jpg"
                            alt="Our story"
                            class="w-full object-cover rounded-2xl shadow-2xl"
                        />
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-primary/20 to-transparent rounded-2xl"
                        ></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Values Section -->
    <section class="py-20 bg-card/30">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">
                    {$_("about.values.title")}
                </h2>
                <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
                    {$_("about.values.subtitle")}
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                {#each values as value (value.title)}
                    <Card
                        class="bg-gradient-to-br from-card to-card/50 border-primary/20 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300"
                    >
                        <CardContent class="p-6">
                            <div class="flex items-start gap-4">
                                <div
                                    class="w-12 h-12 bg-gradient-to-br from-primary/20 to-accent/20 rounded-full flex items-center justify-center flex-shrink-0"
                                >
                                    <span class={value.icon + " w-6 h-6 text-primary"}></span>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-lg mb-2">{value.title}</h3>
                                    <p class="text-muted-foreground leading-relaxed">
                                        {value.description}
                                    </p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                {/each}
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="py-20">
        <div class="container mx-auto px-4 max-w-xl">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">
                    {$_("about.team.title")}
                </h2>
                <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
                    {$_("about.team.subtitle")}
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                {#each team as member (member.name)}
                    <Card
                        class="bg-gradient-to-br from-card to-card/50 border-primary/20 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-2"
                    >
                        <CardContent class="p-6 text-center">
                            <img
                                src={member.image}
                                alt={member.name}
                                class="w-24 h-24 rounded-full mx-auto mb-4 object-cover ring-4 ring-primary/20"
                            />
                            <h3 class="font-semibold text-lg mb-1">{member.name}</h3>
                            <p class="text-primary text-sm mb-3">{member.role}</p>
                            <p class="text-muted-foreground text-sm leading-relaxed">
                                {member.bio}
                            </p>
                        </CardContent>
                    </Card>
                {/each}
            </div>
        </div>
    </section>

    <!-- Mission Section -->
    <section class="py-20 bg-gradient-to-r from-primary/10 via-accent/10 to-primary/10">
        <div class="container mx-auto px-4 text-center">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-3xl md:text-4xl font-bold mb-6">
                    {$_("about.mission.title")}
                </h2>
                <p class="text-xl text-muted-foreground mb-8 leading-relaxed">
                    {$_("about.mission.description")}
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <Button
                        size="lg"
                        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
                        href="/signup">{$_("about.mission.cta_creator")}</Button
                    >

                    <Button
                        variant="outline"
                        size="lg"
                        class="border-primary/50 hover:bg-primary/10"
                        href="/signup">{$_("about.mission.cta_community")}</Button
                    >
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="py-20">
        <div class="container mx-auto px-4">
            <div class="max-w-2xl mx-auto text-center">
                <h2 class="text-3xl md:text-4xl font-bold mb-6">
                    {$_("about.contact.title")}
                </h2>
                <p class="text-lg text-muted-foreground mb-8">
                    {$_("about.contact.description")}
                </p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Card class="bg-gradient-to-br from-card to-card/50 border-primary/20">
                        <CardContent class="p-6 text-center">
                            <h3 class="font-semibold mb-2">
                                {$_("about.contact.general.title")}
                            </h3>
                            <p class="text-muted-foreground text-sm mb-4">
                                {$_("about.contact.general.description")}
                            </p>
                            <a
                                href="mailto:{$_('about.contact.general.mailto')}"
                                class="text-primary hover:underline"
                                >{$_("about.contact.general.mailto")}</a
                            >
                        </CardContent>
                    </Card>
                    <Card class="bg-gradient-to-br from-card to-card/50 border-primary/20">
                        <CardContent class="p-6 text-center">
                            <h3 class="font-semibold mb-2">
                                {$_("about.contact.creators.title")}
                            </h3>
                            <p class="text-muted-foreground text-sm mb-4">
                                {$_("about.contact.creators.description")}
                            </p>
                            <a
                                href="mailto:{$_('about.contact.creators.mailto')}"
                                class="text-primary hover:underline"
                                >{$_("about.contact.creators.mailto")}</a
                            >
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    </section>
</div>
