import type { Metadata } from "next";
import { SiteChrome } from "@/components/SiteChrome";
import { aboutContent } from "@/data/site";

export const metadata: Metadata = {
  title: "درباره ی اک | اُک",
  description: aboutContent.intro,
};

export default function AboutPage() {
  return (
    <SiteChrome eyebrow="درباره ی اک">
      <main className="page-main">
        <section className="page-hero">
          <p className="page-kicker" lang="en" dir="ltr">
            {aboutContent.titleEn}
          </p>
          <h2 className="page-title">{aboutContent.title}</h2>
          <p className="page-lead">{aboutContent.intro}</p>
        </section>

        <section className="page-block" aria-label="داستان اک">
          {aboutContent.story.map((paragraph) => (
            <p key={paragraph} className="page-text">
              {paragraph}
            </p>
          ))}
        </section>

        <section className="about-highlights" aria-label="ویژگی‌ها">
          {aboutContent.highlights.map((item, index) => (
            <article
              key={item.title}
              className="about-highlight"
              style={{ animationDelay: `${index * 80}ms` }}
            >
              <h3>{item.title}</h3>
              <p>{item.text}</p>
            </article>
          ))}
        </section>
      </main>
    </SiteChrome>
  );
}
