<script lang="ts">
  import { _ } from "svelte-i18n";
  import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card";
  import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
  import { Separator } from "$lib/components/ui/separator";
  import SexyBackground from "$lib/components/background/background.svelte";
  import Meta from "$lib/components/meta/meta.svelte";
  import en from "$lib/i18n/locales/en";

  const legal = en.legal;

  let activeTab = $state("privacy");
</script>

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

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

  <div class="container mx-auto py-20 relative px-4">
    <div class="max-w-4xl mx-auto">
      <!-- Header -->
      <div class="text-center mb-12">
        <h1
          class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
        >
          {$_("legal.title")}
        </h1>
        <p class="text-lg text-muted-foreground">
          {$_("legal.description")}
        </p>
      </div>

      <!-- Legal Tabs -->
      <Tabs bind:value={activeTab} class="w-full">
        <TabsList class="h-auto grid w-full grid-cols-1 md:grid-cols-4 mb-8">
          <TabsTrigger value="privacy" class="flex items-center gap-2">
            <span class="icon-[ri--shield-line] w-4 h-4"></span>
            {legal.privacy.title}
          </TabsTrigger>
          <TabsTrigger value="terms" class="flex items-center gap-2">
            <span class="icon-[ri--file-list-3-line] w-4 h-4"></span>
            {legal.terms.title}
          </TabsTrigger>
          <TabsTrigger value="community" class="flex items-center gap-2">
            <span class="icon-[ri--eye-line] w-4 h-4"></span>
            {legal.community.title}
          </TabsTrigger>
          <TabsTrigger value="cookies" class="flex items-center gap-2">
            <span class="icon-[ri--cake-3-line] w-4 h-4"></span>
            {legal.cookie.title}
          </TabsTrigger>
        </TabsList>

        <!-- Privacy Policy -->
        <TabsContent value="privacy">
          <Card class="bg-gradient-to-br from-card to-card/50 border-primary/20">
            <CardHeader>
              <CardTitle class="flex items-center gap-2">
                <span class="icon-[ri--shield-line] w-5 h-5 text-primary"></span>
                {legal.privacy.title}
              </CardTitle>
              <p class="text-muted-foreground">{legal.privacy.last_updated}</p>
            </CardHeader>
            <CardContent class="space-y-6">
              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.privacy.information.title}</h3>
                <div class="space-y-3 text-muted-foreground">
                  {#each legal.privacy.information.items as item (item.label)}
                    <p><strong>{item.label}:</strong> {item.text}</p>
                  {/each}
                </div>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.privacy.information_use.title}</h3>
                <div class="space-y-3 text-muted-foreground">
                  <p>{legal.privacy.information_use.subtitle}</p>
                  <ul class="list-disc pl-6 space-y-1">
                    {#each legal.privacy.information_use.items as item (item)}
                      <li>{item}</li>
                    {/each}
                  </ul>
                </div>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">
                  {legal.privacy.information_sharing.title}
                </h3>
                <div class="space-y-3 text-muted-foreground">
                  <p>{legal.privacy.information_sharing.subtitle}</p>
                  <ul class="list-disc pl-6 space-y-1">
                    {#each legal.privacy.information_sharing.items as item (item)}
                      <li>{item}</li>
                    {/each}
                  </ul>
                </div>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.privacy.security.title}</h3>
                <p class="text-muted-foreground">{legal.privacy.security.text}</p>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.privacy.rights.title}</h3>
                <div class="space-y-3 text-muted-foreground">
                  <p>{legal.privacy.rights.subtitle}</p>
                  <ul class="list-disc pl-6 space-y-1">
                    {#each legal.privacy.rights.items as item (item)}
                      <li>{item}</li>
                    {/each}
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <!-- Terms of Service -->
        <TabsContent value="terms">
          <Card class="bg-gradient-to-br from-card to-card/50 border-primary/20">
            <CardHeader>
              <CardTitle class="flex items-center gap-2">
                <span class="icon-[ri--file-list-3-line] w-5 h-5 text-primary"></span>
                {legal.terms.title}
              </CardTitle>
              <p class="text-muted-foreground">{legal.terms.last_updated}</p>
            </CardHeader>
            <CardContent class="space-y-6">
              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.terms.acceptance.title}</h3>
                <p class="text-muted-foreground">{legal.terms.acceptance.text}</p>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.terms.age.title}</h3>
                <p class="text-muted-foreground">{legal.terms.age.text}</p>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.terms.accounts.title}</h3>
                <div class="space-y-3 text-muted-foreground">
                  <p>{legal.terms.accounts.subtitle}</p>
                  <ul class="list-disc pl-6 space-y-1">
                    {#each legal.terms.accounts.items as item (item)}
                      <li>{item}</li>
                    {/each}
                  </ul>
                </div>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.terms.content.title}</h3>
                <div class="space-y-3 text-muted-foreground">
                  <p>{legal.terms.content.subtitle}</p>
                  <ul class="list-disc pl-6 space-y-1">
                    {#each legal.terms.content.items as item (item)}
                      <li>{item}</li>
                    {/each}
                  </ul>
                </div>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.terms.payment.title}</h3>
                <div class="space-y-3 text-muted-foreground">
                  <p>{legal.terms.payment.subtitle}</p>
                  <ul class="list-disc pl-6 space-y-1">
                    {#each legal.terms.payment.items as item (item)}
                      <li>{item}</li>
                    {/each}
                  </ul>
                </div>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.terms.termination.title}</h3>
                <p class="text-muted-foreground">{legal.terms.termination.text}</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <!-- Community Guidelines -->
        <TabsContent value="community">
          <Card class="bg-gradient-to-br from-card to-card/50 border-primary/20">
            <CardHeader>
              <CardTitle class="flex items-center gap-2">
                <span class="icon-[ri--eye-line] w-5 h-5 text-primary"></span>
                {legal.community.title}
              </CardTitle>
              <p class="text-muted-foreground">{legal.community.description}</p>
            </CardHeader>
            <CardContent class="space-y-6">
              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.community.values.title}</h3>
                <p class="text-muted-foreground">{legal.community.values.text}</p>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.community.respect.title}</h3>
                <ul class="list-disc pl-6 space-y-1 text-muted-foreground">
                  {#each legal.community.respect.items as item (item)}
                    <li>{item}</li>
                  {/each}
                </ul>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.community.standards.title}</h3>
                <ul class="list-disc pl-6 space-y-1 text-muted-foreground">
                  {#each legal.community.standards.items as item (item)}
                    <li>{item}</li>
                  {/each}
                </ul>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.community.interaction.title}</h3>
                <ul class="list-disc pl-6 space-y-1 text-muted-foreground">
                  {#each legal.community.interaction.items as item (item)}
                    <li>{item}</li>
                  {/each}
                </ul>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.community.enforcement.title}</h3>
                <p class="text-muted-foreground">{legal.community.enforcement.text}</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <!-- Cookie Policy -->
        <TabsContent value="cookies">
          <Card class="bg-gradient-to-br from-card to-card/50 border-primary/20">
            <CardHeader>
              <CardTitle class="flex items-center gap-2">
                <span class="icon-[ri--cake-3-line] w-5 h-5 text-primary"></span>
                {legal.cookie.title}
              </CardTitle>
              <p class="text-muted-foreground">{legal.cookie.description}</p>
            </CardHeader>
            <CardContent class="space-y-6">
              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.cookie.what.title}</h3>
                <p class="text-muted-foreground">{legal.cookie.what.text}</p>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.cookie.types.title}</h3>
                <div class="space-y-4">
                  <div>
                    <h4 class="font-medium mb-2">{legal.cookie.types.essential.title}</h4>
                    <p class="text-muted-foreground text-sm">{legal.cookie.types.essential.text}</p>
                  </div>
                </div>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.cookie.managing.title}</h3>
                <div class="space-y-3 text-muted-foreground">
                  <p>{legal.cookie.managing.subtitle}</p>
                  <ul class="list-disc pl-6 space-y-1">
                    {#each legal.cookie.managing.items as item (item)}
                      <li>{item}</li>
                    {/each}
                  </ul>
                  <p>{legal.cookie.managing.note}</p>
                </div>
              </div>

              <Separator />

              <div>
                <h3 class="text-lg font-semibold mb-3">{legal.cookie.third_party.title}</h3>
                <p class="text-muted-foreground">{legal.cookie.third_party.text}</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      <!-- Contact Information -->
      <Card class="mt-8 bg-gradient-to-br from-card to-card/50 border-primary/20">
        <CardContent class="p-6 text-center">
          <h3 class="font-semibold mb-2">{legal.questions}</h3>
          <p class="text-muted-foreground mb-4">{legal.questions_description}</p>
          <a href="mailto:{legal.questions_email}" class="text-primary hover:underline"
            >{legal.questions_email}</a
          >
        </CardContent>
      </Card>
    </div>
  </div>
</div>
