import type { Metadata } from "next";

import { AboutHeroImage } from "@/components/about/about-hero-image";
import { GlassCard } from "@/components/shared/glass-card";
import { InstagramNetworkSection } from "@/components/social/instagram-network-section";
import { ButtonLink } from "@/components/ui/button-link";
import { supportLinks } from "@/lib/constants/site";
import { getSiteSettings } from "@/lib/cms/server";
import { buildCmsPageMetadata } from "@/lib/seo/page-metadata";

export const revalidate = 120;

export async function generateMetadata(): Promise<Metadata> {
  return buildCmsPageMetadata(
    "about",
    "About",
    "Fitness coach with 1.3M+ followers and 5,000+ client transformations — personalized training, nutrition, and sustainable results.",
    "/about",
  );
}

const SECTIONS = [
  {
    title: "Who I Am",
    items: [
      "A fitness coach with 1.3M+ social media followers",
      "5,000+ successful client transformations worldwide",
      "Specializing in personalized training and nutrition coaching.",
    ],
    variant: "default" as const,
  },
  {
    title: "My Track Record",
    items: [
      "Proven results across multiple transformation categories",
      "Real clients with real results (not cherry-picked cases)",
    ],
    variant: "default" as const,
  },
  {
    title: "What I Do",
    items: [
      "Design personalized training programs tailored to your goals",
      "Create customized nutrition strategies that fit your lifestyle",
      "Provide ongoing accountability and support throughout your journey",
      "Build sustainable habits that last beyond the coaching period.",
    ],
    variant: "gold" as const,
  },
  {
    title: "My Philosophy",
    items: [
      "No one-size-fits-all approach",
      "Evidence-based training principles combined with personalized coaching",
      "Focus on consistency over perfection",
      "Results come from sustainable habits, not quick fixes",
    ],
    variant: "default" as const,
  },
  {
    title: "Who I Work Best With",
    items: [
      "Busy professionals looking for real transformation",
      "Anyone serious about sustainable lifestyle change",
      "Clients ready to invest in their health and fitness",
      "People who want accountability and expert guidance",
    ],
    variant: "blue" as const,
  },
  {
    title: "Why Choose Me",
    items: [
      "5,000+ transformations prove my methods work",
      "1.3M+ followers trust my expertise and Value Addition",
      "Personalized attention to every client's unique needs",
      "Commitment to your long-term success, not just short-term results",
    ],
    variant: "default" as const,
  },
  {
    title: "What You'll Get",
    items: [
      "Customized workout plan based on your goals and lifestyle",
      "Customised diet plan according to your preferences",
      "Regular progress tracking and adjustments according to your comfort",
      "Direct support and accountability from me",
      "Knowledge and tools to maintain results independently",
    ],
    variant: "gold" as const,
  },
] as const;

export default async function AboutPage() {
  const settings = await getSiteSettings();
  const heroSrc = settings.aboutHeroImage.trim();
  return (
    <>
      <div className="ds-container ds-section max-w-4xl scroll-mt-28">
        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-primary">About</p>
        <h1 className="font-display mt-4 scroll-mt-24 text-4xl leading-tight tracking-tight sm:text-5xl lg:text-6xl">
          {settings.name}
        </h1>
        <p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted-foreground">
          Fitness coach with a global audience and thousands of transformations behind me — here to
          deliver training and nutrition that fits your life, not a generic template.
        </p>

        <AboutHeroImage src={heroSrc} alt="Training focus" />

        <div className="mt-16 flex flex-col gap-8">
          {SECTIONS.map((section) => (
            <GlassCard key={section.title} variant={section.variant}>
              <h2 className="font-display text-2xl tracking-wide">{section.title}</h2>
              <ul className="mt-5 space-y-3 text-sm leading-relaxed text-muted-foreground">
                {section.items.map((item) => (
                  <li key={item} className="flex gap-3">
                    <span className="mt-0.5 shrink-0 text-primary">•</span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </GlassCard>
          ))}
        </div>

        <div className="mt-14 flex flex-wrap justify-center gap-4">
          <ButtonLink href="/programs" className="rounded-full px-10 py-6">
            View programs
          </ButtonLink>
          <ButtonLink
            href={supportLinks.whatsapp}
            target="_blank"
            rel="noopener noreferrer"
            variant="outline"
            className="rounded-full px-10 py-6"
          >
            WhatsApp
          </ButtonLink>
        </div>
      </div>

      <InstagramNetworkSection id="instagram" />
    </>
  );
}