import type { Metadata } from "next";
import PageHero from "@/components/site/PageHero";
import ProductGrid from "@/components/site/ProductGrid";
import FlagshipShowcase from "@/components/site/FlagshipShowcase";
import CTABand from "@/components/site/CTABand";
import { Reveal } from "@/components/motion/Reveal";

export const metadata: Metadata = {
  title: "Products",
  description:
    "Vira's flagship hospitality suite — MiftahInn hotel PMS and GuestKey digital concierge — plus a catalog of ready-to-deploy Saudi software: ZATCA POS, NPHIES clinic management, Arabic-first commerce, and more.",
  alternates: { canonical: "/products" },
};

export default function ProductsPage() {
  return (
    <>
      <PageHero
        eyebrow="Products"
        titleLines={["Ready to ship.", "Ready to deploy."]}
        lede="Production-hardened software we license once and tailor to you — from our flagship hospitality suite to a catalog of Saudi-ready systems. Each built for the real integrations that matter here: ZATCA e-invoicing, NPHIES claims, Shomoos, mada and BNPL, Nafath identity."
      />

      {/* flagship suite — most prominent */}
      <section className="weave-dark border-b border-white/10 py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <FlagshipShowcase />
        </div>
      </section>

      {/* ready-to-deploy catalog */}
      <section className="weave-light on-light py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <Reveal className="mb-10">
            <p className="eyebrow">Ready-to-deploy catalog</p>
            <h2 className="mt-4 max-w-[18em] text-[clamp(1.9rem,3.2vw,2.8rem)] font-semibold text-lhi">
              Licensed once, live within a day.
            </h2>
            <p className="mt-4 max-w-[64ch] text-lmid">
              Twelve productized platforms across the sectors Saudi businesses run — pick one,
              we brand it, configure your workflows, and deploy it in-Kingdom.
            </p>
          </Reveal>
          <ProductGrid />
          <Reveal className="mt-14 rounded-xl border border-black/10 bg-white p-7">
            <div className="flex flex-wrap items-center justify-between gap-6">
              <div className="max-w-[60ch]">
                <h2 className="text-xl font-semibold text-lhi">
                  Every product ships with a delivery, not a download.
                </h2>
                <p className="mt-2 text-[0.95rem] leading-relaxed text-lmid">
                  Installation in your environment (or on our managed hosting), your branding and
                  workflows configured, your team trained, and a 12-month support window with
                  updates. Customization beyond configuration is scoped as engineering time at
                  transparent day rates.
                </p>
              </div>
              <p className="font-[family-name:var(--font-mono)] text-[0.78rem] uppercase tracking-[0.14em] text-llo">
                License → Install → Configure → Train → Support
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      <CTABand
        title="Need it tailored beyond recognition?"
        arabic="نبنيه لك"
        body="Our products are starting points. When your requirements outgrow configuration, the same engineers who built the product extend it — or our custom software practice builds yours from first principles."
        primaryLabel="Talk product fit"
      />
    </>
  );
}