"use client";

import { useEffect, useState } from "react";
import { TopBar } from "@/components/ui/TopBar";
import { GlassCard } from "@/components/ui/GlassCard";
import { Skeleton } from "@/components/ui/Skeleton";
import { fetchCmsPage, AboutContent } from "@/lib/data/cms";
import { useSettings } from "@/lib/data/settings-provider";
import { useTranslation } from "@/lib/i18n/LanguageProvider";


export default function AboutPage() {
  const { t, language } = useTranslation();
  const { settings } = useSettings();
  const [content, setContent] = useState<AboutContent | null>(null);

  useEffect(() => {
    let active = true;
    setContent(null);
    fetchCmsPage<AboutContent>("about", language).then(
      (result) => active && setContent(result)
    );
    return () => {
      active = false;
    };
  }, [language]);

  return (
    <div className="flex flex-1 flex-col">
      <TopBar title={t("about.title")} />

      <div className="flex flex-1 flex-col gap-6 px-4 pb-8 pt-4">
        <div className="flex flex-col items-center gap-3 text-center">
          <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-gradient-to-br from-gold-bright to-gold-dim font-display text-2xl font-bold text-ink shadow-glow-gold">
            S
          </div>
          <div>
            <h1 className="font-display text-lg font-semibold">{settings.businessName}</h1>
            {content ? (
              <p className="mt-1 text-sm text-muted">{content.intro}</p>
            ) : (
              <Skeleton className="mt-2 h-10 w-64" />
            )}
          </div>
        </div>

        <div>
          <p className="mb-3 text-sm font-medium text-muted">{t("about.howItWorks")}</p>
          <div className="flex flex-col gap-3">
            {content ? (
              content.steps.map((step, i) => (
                <GlassCard key={step.title} className="flex items-start gap-3">
                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-gold/15 font-display text-sm font-bold text-gold-dim dark:text-gold-bright">
                    {i + 1}
                  </span>
                  <div>
                    <p className="text-sm font-semibold">{step.title}</p>
                    <p className="mt-0.5 text-xs text-muted">{step.desc}</p>
                  </div>
                </GlassCard>
              ))
            ) : (
              <>
                <Skeleton className="h-16 w-full !rounded-4xl" />
                <Skeleton className="h-16 w-full !rounded-4xl" />
                <Skeleton className="h-16 w-full !rounded-4xl" />
              </>
            )}
          </div>
        </div>

        <GlassCard className="flex flex-col gap-1 text-center">
          <p className="text-xs text-muted">{t("about.questions")}</p>
          <p className="text-sm font-semibold">{settings.supportEmail}</p>
        </GlassCard>

        <p className="pb-2 text-center text-xs text-muted">{settings.businessName} &middot; v{settings.appVersion}</p>
      </div>
    </div>
  );
}