Bookra/apps/frontend/src/routes/about-route.tsx

import { A } from "@solidjs/router";
import { useI18n } from "../providers/i18n-provider";
import { BookraCharacter } from "../components/bookra-character";
import { Card, CardContent, CardHeader, CardTitle } from "../components/ui";

export function AboutRoute() {
  const i18n = useI18n();

  const values = [
    {
      pose: "educate" as const,
      title: i18n.t("about.values.simple.title"),
      description: i18n.t("about.values.simple.desc"),
    },
    {
      pose: "happy_note" as const,
      title: i18n.t("about.values.reliable.title"),
      description: i18n.t("about.values.reliable.desc"),
    },
    {
      pose: "flag" as const,
      title: i18n.t("about.values.local.title"),
      description: i18n.t("about.values.local.desc"),
    },
  ];

  return (
    <div class="animate-fade-in">
      {/* Hero Section */}
      <section class="relative pt-16 pb-12 lg:pt-24 lg:pb-16 overflow-hidden">
        <div class="section-container">
          <div class="max-w-3xl mx-auto text-center">
            <div class="flex justify-center mb-8">
              <BookraCharacter pose="hello" size="lg" animate={true} />
            </div>
            <h1 class="text-display-xl font-semibold text-ink mb-6 tracking-tight">
              {i18n.t("about.title")}
            </h1>
            <p class="text-lg lg:text-xl text-ink-muted leading-relaxed">
              {i18n.t("about.subtitle")}
            </p>
          </div>
        </div>
      </section>

      {/* Story Section */}
      <section class="py-16 lg:py-24 bg-canvas-subtle/30">
        <div class="section-container">
          <div class="max-w-3xl mx-auto">
            <h2 class="text-display-md font-semibold text-ink mb-8 text-center">
              {i18n.t("about.story.title")}
            </h2>
            <div class="space-y-6 text-ink-muted leading-relaxed text-lg">
              <p>{i18n.t("about.story.p1")}</p>
              <p>{i18n.t("about.story.p2")}</p>
              <p>{i18n.t("about.story.p3")}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Values Section */}
      <section class="py-16 lg:py-24">
        <div class="section-container">
          <div class="max-w-2xl mx-auto text-center mb-12">
            <h2 class="text-display-md font-semibold text-ink mb-4">
              {i18n.t("about.values.title")}
            </h2>
            <p class="text-lg text-ink-muted">
              {i18n.t("about.values.subtitle")}
            </p>
          </div>
          <div class="grid md:grid-cols-3 gap-6 lg:gap-8 max-w-4xl mx-auto">
            {values.map((value) => (
              <Card class="surface-elevated">
                <CardHeader>
                  <div class="mb-4 flex justify-center">
                    <BookraCharacter pose={value.pose} size="sm" animate={true} />
                  </div>
                  <CardTitle>{value.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p class="text-ink-muted">{value.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Team/Mascot Section */}
      <section class="py-16 lg:py-24 bg-canvas-subtle/30">
        <div class="section-container">
          <div class="max-w-3xl mx-auto text-center">
            <div class="flex justify-center mb-8">
              <BookraCharacter pose="laptop" size="xl" animate={true} />
            </div>
            <h2 class="text-display-md font-semibold text-ink mb-4">
              {i18n.t("about.team.title")}
            </h2>
            <p class="text-lg text-ink-muted mb-8">
              {i18n.t("about.team.subtitle")}
            </p>
            <A
              href="/contact"
              class="btn-primary inline-flex items-center gap-2"
            >
              {i18n.t("about.cta")}
            </A>
          </div>
        </div>
      </section>
    </div>
  );
}