import Image from "next/image";
import Link from "next/link";
import { JsonLd } from "@/components/json-ld";
import { ProjectCard } from "@/components/project-card";
import { SectionHeading } from "@/components/section-heading";
import { SiteShell } from "@/components/site-shell";
import {
  getBasePath,
  getDirection,
  getResumePath,
  portfolioContent,
  resumeFile,
  sharedProfile,
  type Language,
} from "@/data/portfolio";
import { getHomeStructuredData } from "@/data/seo";

export function HomePage({ language }: { language: Language }) {
  const dir = getDirection(language);
  const t = portfolioContent[language];
  const founderName = language === "ar" ? sharedProfile.founderNameAr : sharedProfile.founderNameEn;
  const address = language === "ar" ? sharedProfile.addressAr : sharedProfile.address;
  const structuredData = getHomeStructuredData(language);
  const heroImageAlt =
    language === "ar"
      ? "لوحة بورتفوليو لمجمع إعلامي ومبنى التلفزيون"
      : "Portfolio board for Media Complex and TV Building";
  const basePath = getBasePath(language);
  const resumePath = getResumePath(language);
  const hasResume = resumeFile.available;
  const contactCards = [
    {
      kind: "phone",
      label: t.ui.phone,
      value: sharedProfile.phone,
      href: `tel:${sharedProfile.phone.replace(/\s+/g, "")}`,
    },
    {
      kind: "whatsapp",
      label: t.ui.whatsapp,
      value: sharedProfile.phone,
      href: sharedProfile.whatsappHref,
    },
    {
      kind: "email",
      label: t.ui.email,
      value: sharedProfile.email,
      href: `mailto:${sharedProfile.email}`,
      wide: true,
    },
    { kind: "location", label: t.ui.basedIn, value: address, href: sharedProfile.locationHref },
    { kind: "facebook", label: t.ui.facebook, value: sharedProfile.facebook, href: sharedProfile.facebookHref },
  ];
  const hasWideContactCard = contactCards.some((item) => item.wide);

  return (
    <SiteShell language={language}>
      <JsonLd data={structuredData} />
      <div className="top-wash pointer-events-none absolute inset-x-0 top-0 h-[720px]" />

      <main className="site-container flex flex-col gap-12 py-6 md:gap-14 md:py-8 lg:gap-16 lg:py-10">
        <section className="grid gap-5">
          <div className="grid gap-8 lg:grid-cols-[0.92fr_1.08fr] lg:items-stretch">
            <div className="section-shell hero-shell hero-glow line-frame h-full">
              <div className="section-padding hero-panel editorial-grid flex h-full flex-col justify-center">
                <p className="section-kicker">{t.ui.editorialPortfolio}</p>
                <h1
                  className={`type-hero-title hero-title mt-6 max-w-4xl text-[var(--color-ink)] ${
                    language === "en" ? "type-hero-title-latin" : ""
                  }`}
                >
                  {founderName}
                </h1>

                <div className="hero-copy-stack mt-8 max-w-2xl">
                  <p className="type-body-responsive uppercase tracking-[0.18em] text-[var(--color-muted)]">
                    {t.ui.architectureEngineer}
                  </p>
                  <p className="type-body-responsive text-[var(--color-muted)]">
                    {t.hero.subtitle} . {t.hero.supportingLine}
                  </p>
                  <p className="type-body-responsive max-w-xl text-[var(--color-muted)]">
                    {t.hero.intro}
                  </p>
                </div>

                <div className={`hero-action-group flex flex-wrap gap-4 ${dir === "rtl" ? "justify-start" : ""}`}>
                  <Link href={`${basePath}#projects`} className="button-primary hero-action-link">
                    {t.ui.viewProjects}
                  </Link>
                  {hasResume ? (
                    <Link href={resumeFile.href} className="button-secondary hero-action-link" download>
                      {t.ui.downloadCv}
                    </Link>
                  ) : (
                    <Link href={resumePath} className="button-secondary hero-action-link">
                      {t.ui.onlineResume}
                    </Link>
                  )}
                </div>
              </div>
            </div>

            <div className="image-frame h-full">
              <div className="relative aspect-[5/6] overflow-hidden rounded-[28px]">
                <Image
                  src={sharedProfile.heroImage}
                  alt={heroImageAlt}
                  fill
                  priority
                  sizes="(max-width: 1024px) 100vw, 52vw"
                  className="object-cover saturate-[1.05] brightness-[0.96]"
                />
              </div>
            </div>
          </div>

          <div className="grid gap-5 md:grid-cols-2">
            <div className="soft-card content-stack-default">
              <p className="eyebrow-note">{t.ui.profile}</p>
              <p className="type-card-title-small display-face text-[var(--color-ink)]">
                {t.hero.profileBlurb}
              </p>
            </div>
            <div className="gradient-card content-stack-default">
              <p className="eyebrow-note">{t.hero.featuredProjectTitle}</p>
              <p className="type-card-title display-face text-[var(--color-ink)]">
                {t.featured.projects[0]?.location ?? address}
              </p>
              <p className="type-body text-[var(--color-muted)]">{t.hero.featuredProjectText}</p>
            </div>
          </div>
        </section>

        <section id="about" className="grid gap-8 lg:grid-cols-[1.05fr_0.95fr]">
          <div className="section-shell">
            <div className="section-padding">
              <SectionHeading
                eyebrow={t.ui.navAbout}
                title={t.about.title}
                description={t.about.description}
              />

              <div className="content-stack-relaxed type-body-editorial mt-8 max-w-2xl text-[var(--color-muted)]">
                {t.about.paragraphs.map((paragraph) => (
                  <p key={paragraph}>{paragraph}</p>
                ))}
              </div>

            </div>
          </div>

          <div id="philosophy" className="grid gap-5 scroll-mt-28">
            <div className="gradient-card content-stack-default">
              <p className="eyebrow-note">{t.ui.designPhilosophy}</p>
              <p className="type-card-title display-face text-[var(--color-ink)]">
                "{t.philosophy.quote}"
              </p>
            </div>

            <div className="soft-card content-stack-default">
              <p className="eyebrow-note">{t.ui.materialsMood}</p>
              <p className="type-body-editorial text-[var(--color-muted)]">{t.philosophy.body}</p>

              <div className="flex flex-wrap gap-3">
                {t.philosophy.tags.map((item) => (
                  <span
                    key={item}
                    className="type-chip surface-chip px-4 py-2 font-medium text-[var(--color-ink)]"
                  >
                    {item}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="grid gap-8 lg:grid-cols-[0.88fr_1.12fr]">
          <div className="section-shell">
            <div className="section-padding">
              <SectionHeading
                eyebrow={t.ui.sectors}
                title={t.sectors.title}
                description={t.sectors.description}
              />
            </div>
          </div>

          <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
            {t.sectors.categories.map((category, index) => (
              <article key={category} className="soft-card content-stack-relaxed min-h-[190px]">
                <p className="eyebrow-note">{String(index + 1).padStart(2, "0")}</p>
                <h3 className="type-card-title text-[var(--color-ink)]">{category}</h3>
              </article>
            ))}
          </div>
        </section>

        <section id="projects" className="space-y-8 scroll-mt-28 md:space-y-10">
          <SectionHeading
            eyebrow={t.ui.featuredProjects}
            title={t.featured.title}
            description={t.featured.description}
          />

          <div className="space-y-10">
            {t.featured.projects.map((project, index) => (
              <ProjectCard
                key={project.id}
                project={project}
                reverse={index % 2 === 1}
                priority={index < 2}
                labels={{ year: t.ui.year, area: t.ui.area, role: t.ui.role, fullSheet: t.ui.viewFullSheet }}
              />
            ))}
          </div>
        </section>

        <section id="awards" className="section-shell scroll-mt-28">
          <div className="section-padding">
            <div className="grid gap-10 lg:grid-cols-[0.82fr_1.18fr]">
              <SectionHeading
                eyebrow={t.ui.awards}
                title={t.awards.title}
                description={t.awards.description}
              />

              <div className="grid gap-4">
                {t.awards.items.map((award, index) => (
                  <article
                    key={`${award.year}-${award.title}`}
                    className="surface-card content-stack-default rounded-[24px] p-5"
                  >
                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                      <p className="eyebrow-note">{String(index + 1).padStart(2, "0")}</p>
                      <p className="type-label font-semibold text-[var(--color-blue-400)]">{award.year}</p>
                    </div>
                    <h3 className="type-card-title-small text-[var(--color-ink)]">{award.title}</h3>
                    <p className="type-body text-[var(--color-muted)]">{award.description}</p>
                  </article>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="grid gap-8 lg:grid-cols-[1.02fr_0.98fr]">
          <div className="section-shell">
            <div className="section-padding">
              <SectionHeading
                eyebrow={t.ui.craft}
                title={t.craft.title}
                description={t.craft.description}
              />

              <div className="mt-10 grid gap-6 md:grid-cols-2">
                <div className="content-stack-default">
                  <p className="eyebrow-note">{t.ui.coreSkills}</p>
                  <div className="flex flex-wrap gap-3">
                    {t.craft.skills.map((skill) => (
                      <span
                        key={skill}
                        className="type-chip surface-chip px-4 py-2 font-medium text-[var(--color-ink)]"
                      >
                        {skill}
                      </span>
                    ))}
                  </div>
                </div>

                <div className="content-stack-default">
                  <p className="eyebrow-note">{t.ui.software}</p>
                  <div className="flex flex-wrap gap-3">
                    {t.craft.software.map((tool) => (
                      <span
                        key={tool}
                        className="type-chip surface-chip-alt px-4 py-2 font-medium text-[var(--color-ink)]"
                      >
                        {tool}
                      </span>
                    ))}
                  </div>
                </div>
              </div>

              <div className="mt-10 editorial-rule" />

              <div className="mt-10 grid gap-6 md:grid-cols-2">
                <div className="space-y-4">
                  <p className="eyebrow-note">{t.ui.documentation}</p>
                  <p className="type-body text-[var(--color-muted)]">{t.craft.documentationText}</p>
                </div>
                <div className="space-y-4">
                  <p className="eyebrow-note">{t.ui.visualization}</p>
                  <p className="type-body text-[var(--color-muted)]">{t.craft.visualizationText}</p>
                </div>
              </div>
            </div>
          </div>

          <div className="grid gap-5">
            {t.craft.additionalProjects.map((project) => (
              <article key={project.title} className="gradient-card content-stack-default">
                <p className="eyebrow-note">{project.year}</p>
                <h3 className="type-card-title text-[var(--color-ink)]">{project.title}</h3>
                <p className="type-body text-[var(--color-muted)]">{project.type}</p>
                <p className="type-label-wide font-semibold text-[var(--color-ink)]">
                  {project.location}
                </p>
              </article>
            ))}
          </div>
        </section>

        <section className="section-shell">
          <div className="section-padding grid gap-8 lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
            <div>
              <SectionHeading
                eyebrow={t.ui.onlineResume}
                title={t.resume.title}
                description={t.resume.description}
              />
            </div>

            <div className="grid gap-5 sm:grid-cols-2">
              <Link href={resumePath} className="soft-card content-stack-default block">
                <p className="eyebrow-note">{t.ui.onlineResume}</p>
                <p className="type-card-title display-face text-[var(--color-ink)]">
                  {t.ui.viewFullResume}
                </p>
              </Link>
              {hasResume ? (
                <Link href={resumeFile.href} className="gradient-card content-stack-default block" download>
                  <p className="eyebrow-note">{t.ui.pdfDownload}</p>
                  <p className="type-card-title display-face text-[var(--color-ink)]">
                    {t.ui.downloadCv}
                  </p>
                </Link>
              ) : (
                <div className="gradient-card content-stack-default">
                  <p className="eyebrow-note">{t.ui.pdfDownload}</p>
                  <p className="type-card-title display-face text-[var(--color-ink)]">
                    {t.ui.downloadCv}
                  </p>
                  <p className="type-body text-[var(--color-muted)]">{t.ui.resumeUnavailable}</p>
                </div>
              )}
            </div>
          </div>
        </section>

        <section className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
          {t.metrics.map((metric) => (
            <article key={metric.label} className="soft-card content-stack-default text-center">
              <p className="type-metric display-face text-[var(--color-ink)]">{metric.value}</p>
              <p className="type-label-wide text-[var(--color-muted)]">
                {metric.label}
              </p>
            </article>
          ))}
        </section>

        <section id="contact" className="section-shell hero-glow scroll-mt-28">
          <div className="section-padding grid gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(460px,0.78fr)] lg:items-start">
            <div className="contact-copy">
              <p className="section-kicker">{t.ui.contact}</p>
              <h2 className="contact-title">
                {t.ui.letsCreate}
              </h2>
              <p className="contact-description">
                {t.ui.availableFor}
              </p>
              <div className="mt-8 max-w-xl">
                <div className="editorial-rule" />
              </div>
            </div>

            <div className="grid min-w-full gap-4 md:grid-cols-2 lg:min-w-[460px]">
              {contactCards.map((item, index) => {
                const shouldSpan =
                  item.wide || (!hasWideContactCard && contactCards.length % 2 === 1 && index === contactCards.length - 1);
                const isEmail = item.kind === "email";
                const isPhoneValue = item.kind === "phone" || item.kind === "whatsapp";
                const isLtrValue = isEmail || isPhoneValue;
                const content = (
                  <div className="contact-card-copy">
                    <p className="contact-label text-[var(--color-muted)]">{item.label}</p>
                    <p
                      dir={isLtrValue ? "ltr" : undefined}
                      className={`contact-value break-words font-semibold text-[var(--color-ink)] ${
                        isEmail ? "contact-value-email" : ""
                      } ${isPhoneValue ? "contact-value-ltr" : ""}`}
                    >
                      {item.value}
                    </p>
                  </div>
                );
                const cardClass =
                  `contact-card ${shouldSpan ? "md:col-span-2" : ""}`;

                return item.href ? (
                  <Link key={item.label} href={item.href} className={cardClass}>
                    {content}
                  </Link>
                ) : (
                  <div key={item.label} className={cardClass}>
                    {content}
                  </div>
                );
              })}
            </div>
          </div>
        </section>
      </main>
    </SiteShell>
  );
}