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

export const metadata: Metadata = {
  title: "Shop",
  description:
    "Fixed-price digital services from Vira.sa — websites, design, marketing, hosting setup, and business onboarding. VAT-inclusive SAR prices, clear delivery times, ordered in a click.",
  alternates: { canonical: "/shop" },
};

export default function ShopPage() {
  return (
    <>
      <PageHero
        eyebrow="The Vira shop"
        titleLines={["Fixed prices.", "Clear delivery."]}
        lede="The small jobs, productized — websites, design, marketing, hosting setup, and business onboarding at flat SAR prices with delivery times you can count on. Build a basket, send it over, and we get to work. VAT included, no surprises."
      />
      <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">
          <ShopClient />
          <Reveal className="mt-14 grid gap-6 sm:grid-cols-3">
            {[
              { k: "VAT included", v: "Every price is what your invoice reads — no add-ons at checkout." },
              { k: "Delivery you can plan around", v: "Each item shows its turnaround; rush options on request." },
              { k: "No payment here", v: "Send your basket as a request — we confirm scope and invoice properly." },
            ].map((c) => (
              <div key={c.k} className="rounded-xl border border-black/10 bg-white p-6">
                <h3 className="font-semibold text-lhi">{c.k}</h3>
                <p className="mt-2 text-[0.9rem] leading-relaxed text-lmid">{c.v}</p>
              </div>
            ))}
          </Reveal>
        </div>
      </section>
      <CTABand
        title="Bigger than a fixed-price job?"
        arabic="نبنيه لك"
        body="When the work needs discovery, architecture, or a dedicated team, our services practice takes over — same people, same standards, scoped properly."
        primaryLabel="Talk to an engineer"
      />
    </>
  );
}