gracesalmoun/components/resume-page-content.tsx

import Link from "next/link";
import { SectionHeading } from "@/components/section-heading";
import { SiteShell } from "@/components/site-shell";
import { portfolioContent, resumeFile, sharedProfile, type Language } from "@/data/portfolio";

export function ResumePageContent({ language }: { language: Language }) {
  const t = portfolioContent[language];
  const brandName = language === "ar" ? sharedProfile.brandNameAr : sharedProfile.brandNameEn;
  const address = language === "ar" ? sharedProfile.addressAr : sharedProfile.address;
  const hasResume = resumeFile.available;

  return (
    <SiteShell language={language}>
      <main className="site-container flex flex-col gap-10 py-8 md:py-10 lg:gap-12 lg:py-12">
        <section className="section-shell hero-glow">
          <div className="section-padding grid gap-8 lg:grid-cols-[1fr_auto] lg:items-end">
            <div>
              <p className="section-kicker">{t.ui.onlineResume}</p>
              <h1 className="type-page-title mt-4 max-w-4xl text-[var(--color-ink)]">
                {brandName}
              </h1>
              <p className="type-body-responsive mt-4 uppercase tracking-[0.18em] text-[var(--color-muted)]">
                {t.ui.architectureEngineer}
              </p>
              <p className="type-body-responsive mt-6 max-w-2xl text-[var(--color-muted)]">
                {t.resume.resumeIntro}
              </p>
            </div>

            <div className="flex flex-wrap gap-4">
              {hasResume ? (
                <Link href={resumeFile.href} className="button-primary" download>
                  {t.ui.downloadCv}
                </Link>
              ) : (
                <p className="notice-card max-w-xs">
                  {t.ui.resumeUnavailable}
                </p>
              )}
              <Link href={`/${language}`} className="button-secondary">
                {t.ui.backToPortfolio}
              </Link>
            </div>
          </div>
        </section>

        <section className="grid gap-10 lg:grid-cols-[0.82fr_1.18fr]">
          <section className="section-shell">
            <div className="section-padding">
              <SectionHeading
                eyebrow={t.ui.profile}
                title={t.ui.summary}
                description={t.resume.onlineResumeDescription}
              />

              <div className="type-body-editorial mt-8 space-y-4 text-[var(--color-muted)]">
                <p>{t.about.description}</p>
                <p>{t.resume.profileParagraph}</p>
              </div>

              <dl className="type-chip mt-8 grid gap-4 text-[var(--color-muted)]">
                <div className="surface-card rounded-[22px] p-5">
                  <dt className="type-label-wide">{t.ui.phone}</dt>
                  <dd dir="ltr" className="type-body data-ltr mt-2 font-semibold text-[var(--color-ink)]">
                    {sharedProfile.phone}
                  </dd>
                </div>
                <div className="surface-card-alt rounded-[22px] p-5">
                  <dt className="type-label-wide">{t.ui.email}</dt>
                  <dd dir="ltr" className="type-body data-ltr mt-2 font-semibold text-[var(--color-ink)]">
                    {sharedProfile.email}
                  </dd>
                </div>
                <div className="surface-card rounded-[22px] p-5">
                  <dt className="type-label-wide">{t.ui.links}</dt>
                  <dd className="type-body mt-2 space-y-2 font-semibold text-[var(--color-ink)]">
                    <p>{address}</p>
                    <p>Facebook: {sharedProfile.facebook}</p>
                  </dd>
                </div>
              </dl>
            </div>
          </section>

          <section className="section-shell">
            <div className="section-padding">
              <SectionHeading
                eyebrow={t.ui.experience}
                title={t.ui.professionalTimeline}
                description={t.resume.experienceDescription}
              />

              <div className="mt-10 space-y-5">
                {t.resume.experience.map((item) => (
                  <article
                    key={`${item.period}-${item.role}`}
                    className="resume-timeline-card"
                  >
                    <p className="type-label-wide text-[var(--color-muted)]">
                      {item.period}
                    </p>
                    <h2 className="type-card-title-small mt-3 text-[var(--color-ink)]">{item.role}</h2>
                    <p className="type-body mt-3 text-[var(--color-muted)]">{item.detail}</p>
                  </article>
                ))}
              </div>
            </div>
          </section>
        </section>

        <section className="grid gap-10 lg:grid-cols-2">
          <section className="section-shell">
            <div className="section-padding">
              <SectionHeading
                eyebrow={t.ui.education}
                title={t.resume.education.degree}
                description={`${t.resume.education.school} - ${t.resume.education.location}`}
              />
            </div>
          </section>

          <section className="section-shell">
            <div className="section-padding">
              <SectionHeading
                eyebrow={t.ui.coreSkills}
                title={t.ui.designDelivery}
                description={t.resume.designDeliveryDescription}
              />
              <div className="mt-8 flex flex-wrap gap-3">
                {t.craft.skills.map((skill) => (
                  <span
                    key={skill}
                    className="type-chip surface-chip px-4 py-3 font-semibold text-[var(--color-ink)]"
                  >
                    {skill}
                  </span>
                ))}
              </div>
            </div>
          </section>
        </section>

        <section className="section-shell">
          <div className="section-padding">
            <SectionHeading
              eyebrow={t.ui.software}
              title={t.ui.productionTools}
              description={t.resume.productionToolsDescription}
            />

            <div className="mt-8 flex flex-wrap gap-3">
              {t.craft.software.map((tool) => (
                <span
                  key={tool}
                  className="type-chip surface-chip-alt px-4 py-3 font-semibold text-[var(--color-ink)]"
                >
                  {tool}
                </span>
              ))}
            </div>
          </div>
        </section>
      </main>
    </SiteShell>
  );
}