"use client";

import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { BackToHomeButton } from "@/components/back-to-home-button";
import { SiteFooter } from "@/components/site-footer";

const fadeUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
};

export function AboutAnimated({
  title,
  subtitle,
  content,
}: {
  title: string;
  subtitle: string;
  content: string;
}) {
  return (
    <div className="flex-1 flex flex-col">
      {/* Hero — staggered fade-up */}
      <section className="border-b bg-surface">
        <div className="container mx-auto px-4 py-16 max-w-3xl text-center">
          <motion.h1
            className="text-4xl font-bold tracking-tight text-foreground"
            initial={fadeUp.initial}
            animate={fadeUp.animate}
            transition={{ duration: 0.5, ease: "easeOut" }}
          >
            {title}
          </motion.h1>
          <motion.p
            className="mt-3 text-muted-foreground text-lg"
            initial={fadeUp.initial}
            animate={fadeUp.animate}
            transition={{ duration: 0.5, delay: 0.15, ease: "easeOut" }}
          >
            {subtitle}
          </motion.p>
        </div>
      </section>

      {/* Content card — fade-up with delay */}
      <section className="flex-1 container mx-auto px-4 py-12 max-w-3xl">
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.25, ease: "easeOut" }}
        >
          <Card className="overflow-hidden bg-card">
            <CardContent className="p-8 md:p-10">
              <div className="text-lg leading-relaxed text-foreground/90 whitespace-pre-wrap text-right [&>p]:mb-4 [&>p:last-child]:mb-0">
                {content}
              </div>
            </CardContent>
          </Card>
        </motion.div>

        <BackToHomeButton />
      </section>
      <SiteFooter />
    </div>
  );
}