import type { Metadata } from "next";
import PageHero from "@/components/site/PageHero";
import CTABand from "@/components/site/CTABand";
import Marquee from "@/components/site/Marquee";
import { Reveal } from "@/components/motion/Reveal";
import { aboutNumbers, values, engagementModels, complianceChips } from "@/lib/content/company";

export const metadata: Metadata = {
  title: "About",
  description:
    "Vira.sa is a Makkah-headquartered technology house with branches in Jeddah, Riyadh, and Dammam: 60+ engineers and architects, a 24/7 NOC & SOC, bilingual delivery, and structured knowledge transfer in every engagement.",
  alternates: { canonical: "/about" },
};

const TIMELINE = [
  {
    year: "2017",
    title: "Founded in Makkah",
    body: "Three engineers, one conviction: the Kingdom's enterprises deserved a partner that could design, build, and run — not just one of the three.",
  },
  {
    year: "2019",
    title: "The NOC goes live",
    body: "Our 24/7 network operations center opens at the Makkah headquarters, and managed hosting becomes a practice with an SLA, not a side business.",
  },
  {
    year: "2021",
    title: "Security becomes a discipline",
    body: "The NCA's controls reshape the market. We build a compliance-first security practice and a SOC with Saudi-resident log retention.",
  },
  {
    year: "2023",
    title: "Sixty engineers, twelve industries",
    body: "Banking cores, hospital groups, municipal portals, national fleets — the portfolio starts reading like a cross-section of the Saudi economy.",
  },
  {
    year: "2026",
    title: "Building for the AI decade",
    body: "Arabic-first NLP, governed data platforms, and in-Kingdom AI deployments — engineered with the same discipline as everything before them.",
  },
];

export default function AboutPage() {
  return (
    <>
      <PageHero
        eyebrow="Who we are"
        titleLines={["A Saudi technology house", "with global standards."]}
        lede="Vira.sa was founded in Makkah on a simple observation: the Kingdom's most ambitious organizations were buying strategy from one vendor, software from another, and operations from a third — and owning the gaps themselves. We built one firm that closes them."
      />

      {/* numbers */}
      <section className="weave-panel border-b border-white/10">
        <div className="mx-auto grid w-full max-w-[1280px] grid-cols-2 lg:grid-cols-4">
          {aboutNumbers.map((n, i) => (
            <div
              key={n.label}
              className={`border-white/10 px-5 py-8 md:px-10 ${i > 0 ? "border-l max-lg:odd:border-l-0" : ""} ${
                i >= 2 ? "max-lg:border-t" : ""
              }`}
            >
              <div className="font-[family-name:var(--font-mono)] text-[clamp(1.7rem,2.6vw,2.3rem)] font-medium leading-tight text-azure-bright tnum">
                {n.value}
              </div>
              <div className="mt-1.5 text-[0.88rem] text-tlo">{n.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* narrative + values */}
      <section className="weave-light on-light py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto grid w-full max-w-[1280px] gap-14 px-5 md:px-10 lg:grid-cols-[1.1fr_1fr]">
          <div className="max-w-[64ch]">
            <Reveal>
              <p className="eyebrow">The idea</p>
              <h2 className="mt-4 text-[clamp(1.9rem,3.2vw,2.8rem)] font-semibold text-lhi">
                One room. Whiteboard to production.
              </h2>
              <p className="mt-5 text-[1.02rem] leading-[1.75] text-lmid">
                We closed the vendor gaps by building one firm that carries a project from first
                sketch to production and then runs it: architects and engineers in the same room, a
                24/7 operations center down the hall, and delivery in both Arabic and English as
                standard.
              </p>
              <p className="mt-4 text-[1.02rem] leading-[1.75] text-lmid">
                And because we build Saudi capability rather than dependency, every engagement ends
                with structured knowledge transfer to your own team — documentation, pairing, and a
                handover your engineers sign off on, not a zip file.
              </p>
            </Reveal>
          </div>
          <ul className="grid content-start gap-6">
            {values.map((v, i) => (
              <Reveal
                key={v.title}
                delay={i * 0.07}
                as="li"
                className="flex gap-4 rounded-xl border border-black/10 bg-white p-6"
              >
                <i
                  className="mt-1.5 h-3 w-3 shrink-0 bg-ice-deep [clip-path:polygon(50%_0,100%_100%,0_100%)]"
                  aria-hidden
                />
                <div>
                  <b className="block font-semibold text-lhi">{v.title}</b>
                  <span className="text-[0.95rem] text-lmid">{v.body}</span>
                </div>
              </Reveal>
            ))}
          </ul>
        </div>
      </section>

      {/* timeline */}
      <section className="weave-dark py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <Reveal>
            <p className="eyebrow">The thread so far</p>
            <h2 className="mt-4 text-[clamp(1.9rem,3.2vw,2.8rem)] font-semibold text-thi">
              Nine years, woven year by year.
            </h2>
          </Reveal>
          <div className="mt-14 grid gap-0 border-l border-white/10 md:ml-3">
            {TIMELINE.map((t, i) => (
              <Reveal
                key={t.year}
                delay={i * 0.05}
                as="div"
                className="relative pb-12 pl-8 last:pb-0 md:pl-12"
              >
                <span
                  className="absolute -left-[7px] top-1 h-3.5 w-3.5 rotate-45 border-2 border-azure bg-ink"
                  aria-hidden
                />
                <span className="font-[family-name:var(--font-mono)] text-[0.8rem] tracking-[0.14em] text-ice">
                  {t.year}
                </span>
                <h3 className="mt-1.5 text-xl font-semibold text-thi">{t.title}</h3>
                <p className="mt-2 max-w-[60ch] text-[0.97rem] leading-relaxed text-tmid">{t.body}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <Marquee />

      {/* engagement + compliance */}
      <section className="weave-light on-light py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto grid w-full max-w-[1280px] gap-14 px-5 md:px-10 lg:grid-cols-2">
          <div>
            <Reveal>
              <p className="eyebrow">Ways to work with us</p>
              <h2 className="mt-4 text-[clamp(1.7rem,2.8vw,2.4rem)] font-semibold text-lhi">
                Four doors into the same team.
              </h2>
            </Reveal>
            <div className="mt-8 grid gap-4">
              {engagementModels.map((m, i) => (
                <Reveal
                  key={m.title}
                  delay={i * 0.06}
                  as="div"
                  className="rounded-xl border border-black/10 bg-white p-6"
                >
                  <b className="font-semibold text-lhi">{m.title}</b>
                  <span className="text-[0.95rem] text-lmid"> — {m.body}</span>
                </Reveal>
              ))}
            </div>
          </div>
          <div>
            <Reveal>
              <p className="eyebrow">Frameworks we deliver against</p>
              <h2 className="mt-4 text-[clamp(1.7rem,2.8vw,2.4rem)] font-semibold text-lhi">
                Compliance as a habit.
              </h2>
            </Reveal>
            <div className="mt-8 grid gap-3">
              {complianceChips.map((c) => (
                <Reveal
                  key={c}
                  as="div"
                  className="flex items-center gap-3 rounded-lg border border-black/10 bg-white px-5 py-4 font-[family-name:var(--font-mono)] text-[0.85rem] text-lmid"
                >
                  <i
                    className="h-2 w-2 shrink-0 bg-azure-deep [clip-path:polygon(50%_0,100%_100%,0_100%)]"
                    aria-hidden
                  />
                  {c}
                </Reveal>
              ))}
              <Reveal as="div">
                <p className="mt-2 text-[0.85rem] leading-relaxed text-llo">
                  Team certifications span AWS, Azure, Kubernetes, CISSP, OSCP, and PMP — forty-plus
                  held across the engineering group and audited annually.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <CTABand
        title="Meet the team behind the thread."
        arabic="أهلاً بك"
        body="Coffee in Makkah, Jeddah, Riyadh, or Dammam — or a call anywhere. Bring a hard problem and Bring a hard problem and we'll bring the people who would actually work on it."
        primaryLabel="Book an introduction"
      />
    </>
  );
}