import { motion } from "framer-motion";
import ProjectCard from "@/components/ProjectCard";
import LangSwitch from "@/components/LangSwitch";
import { LangProvider, useT } from "@/hooks/useLang";

const PageContent = () => {
  const t = useT();

  return (
    <div className="min-h-screen bg-background flex flex-col items-center">
      <main className="w-full max-w-[480px] px-4 py-12 sm:py-16 flex flex-col gap-10">
        {/* Lang Switch */}
        <div className="flex justify-end">
          <LangSwitch />
        </div>

        {/* Header */}
        <motion.header
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="text-center flex flex-col items-center gap-3 -mt-4"
        >
          <h1 className="font-display text-2xl sm:text-3xl font-bold tracking-tight text-foreground">
            {t.title}
          </h1>
          <p className="font-body text-sm text-muted-foreground leading-relaxed max-w-[460px]">
            {t.subtitle}
          </p>
        </motion.header>

        {/* Project Cards */}
        <div className="flex flex-col gap-6">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <ProjectCard
              emoji="🎮"
              title="GTA Games Token"
              description={t.gta.description}
              buyLabel={t.gta.buy}
              buyHref="https://gtagamescoin.com/"
              communityLabel={t.community}
              communityHref="https://t.me/+7DxZyG06v4E4Y2U5"
              buyColorClass="bg-buy-gta text-buy-gta-foreground"
            />
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
          >
            <ProjectCard
              emoji="🐸"
              title="Real Pepe Gold"
              description={t.pepe.description}
              buyLabel={t.pepe.buy}
              buyHref="https://realpepe.online/"
              communityLabel={t.community}
              communityHref="https://t.me/+C-icAfL4TpA0MjJh"
              buyColorClass="bg-buy-pepe text-buy-pepe-foreground"
            />
          </motion.div>
        </div>

        {/* Footer */}
        <motion.footer
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.6 }}
          className="text-center"
        >
          <p className="font-body text-xs text-muted-foreground">
            {t.footer}
          </p>
        </motion.footer>
      </main>
    </div>
  );
};

const Index = () => (
  <LangProvider>
    <PageContent />
  </LangProvider>
);

export default Index;