ksan.dev/app/[locale]/about/AboutContent.tsx

"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import {
  GitBranch,
  Lock,
  Zap,
  Sparkles,
  MapPin,
  Server,
  Globe,
  Briefcase,
  Clock,
} from "lucide-react";
import GlassCard from "@/components/ui/GlassCard";
import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
import type { Dictionary, Locale } from "@/lib/dictionaries";

const highlightIcons = [GitBranch, Lock, Zap, Sparkles];

const factIcons = [MapPin, Server, Globe, Briefcase, Clock];

interface AboutContentProps {
  locale: Locale;
  dict: Dictionary;
}

interface TextParagraph {
    type: "text";
    content: string;
}

interface LinkParagraph {
    type: "linkParagraph";
    before: string;
    linkText: string;
    href: string;
}

type ApproachParagraph = TextParagraph | LinkParagraph;

export default function AboutContent({ locale, dict }: AboutContentProps) {
  const t = dict.aboutPage;

  return (
    <>
      {/* Hero */}
      <section className="relative isolate flex min-h-[50svh] items-center overflow-hidden pt-32">
        <div className="pointer-events-none absolute inset-0 grid-bg [mask-image:radial-gradient(ellipse_at_center,#000_30%,transparent_70%)] opacity-30" />

        <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-3xl text-center">
            <motion.span
              initial={{ opacity: 0, y: -8 }}
              animate={{ opacity: 1, y: 0 }}
              className="mb-6 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300 backdrop-blur-md"
            >
              {t.badge}
            </motion.span>

            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
              className="font-display text-display-xl font-medium tracking-tight"
            >
              <span className="text-gradient-fade">{t.title}</span>
              <br />
              <span className="text-gradient-purple">{t.titleAccent}</span>
            </motion.h1>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
              className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-text-secondary sm:text-lg"
            >
              {t.subtitle}
            </motion.p>
          </div>
        </div>
      </section>

      {/* Approach + Quick facts */}
      <section className="relative w-full py-12 sm:py-16">
        <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={viewportConfig}
            variants={stagger(0.1)}
            className="grid grid-cols-1 gap-8 lg:grid-cols-3"
          >
            {/* Main text */}
            <motion.div variants={fadeUp} className="lg:col-span-2">
              <h2 className="mb-6 font-display text-3xl font-medium tracking-tight text-gradient-fade sm:text-4xl">
                {t.approachTitle}
              </h2>
              <div className="space-y-5 text-base leading-relaxed text-text-secondary">
                  {t.approachParagraphs.map((p : ApproachParagraph, i : number) => {
                      if (p.type === "text") {
                          return <p key={i}>{p.content}</p>;
                      }

                      if (p.type === "linkParagraph") {
                          return (
                              <p key={i}>
                                  {p.before}
                                  <Link
                                      href={`/${locale}${p.href}`}
                                      className="text-purple-300 underline"
                                  >
                                      {p.linkText}
                                  </Link>
                                  .
                              </p>
                          );
                      }

                      return null;
                  })}
              </div>
            </motion.div>

            {/* Quick facts */}
            <motion.div variants={fadeUp}>
              <GlassCard className="h-fit" hover={false}>
                <h3 className="mb-5 font-mono text-xs uppercase tracking-widest text-text-secondary">
                  {t.quickFactsTitle}
                </h3>
                <dl className="space-y-3.5 text-sm">
                  {t.facts.map((fact, i) => {
                    const Icon = factIcons[i] || MapPin;
                    return (
                      <div
                        key={i}
                        className="flex items-center justify-between gap-3 border-b border-border/40 pb-3 last:border-0 last:pb-0"
                      >
                        <dt className="flex items-center gap-2 text-text-secondary">
                          <Icon className="h-3.5 w-3.5 text-purple-400/60" strokeWidth={1.5} />
                          {fact.label}
                        </dt>
                        <dd className="font-mono text-text-primary">{fact.value}</dd>
                      </div>
                    );
                  })}
                </dl>
              </GlassCard>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* Highlights */}
      <section className="relative w-full py-20 sm:py-24">
        <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={viewportConfig}
            variants={stagger(0.06)}
            className="mx-auto mb-14 max-w-3xl text-center"
          >
            <motion.h2
              variants={fadeUp}
              className="font-display text-display-lg font-medium tracking-tight text-gradient-fade"
            >
              {t.highlightsTitle}
            </motion.h2>
          </motion.div>

          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={viewportConfig}
            variants={stagger(0.1)}
            className="grid grid-cols-1 gap-4 sm:grid-cols-2"
          >
            {t.highlights.map((item, i) => {
              const Icon = highlightIcons[i] || Sparkles;
              return (
                <motion.div key={i} variants={fadeUp} className="group">
                  <GlassCard className="h-full">
                    <div className="flex gap-5">
                      <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-purple-400/20 bg-purple-500/10 text-purple-300 transition-all duration-500 group-hover:border-purple-400/50 group-hover:bg-purple-500/20 group-hover:shadow-glow-sm">
                        <Icon className="h-5 w-5" strokeWidth={1.5} />
                      </div>
                      <div>
                        <h3 className="mb-2 text-lg font-medium text-text-primary">
                          {item.title}
                        </h3>
                        <p className="text-sm leading-relaxed text-text-secondary">
                          {item.description}
                        </p>
                      </div>
                    </div>
                  </GlassCard>
                </motion.div>
              );
            })}
          </motion.div>
        </div>
      </section>
    </>
  );
}