import type { Metadata } from "next";
import Link from "next/link";
import PageHero from "@/components/site/PageHero";
import CTABand from "@/components/site/CTABand";
import TiltCard from "@/components/motion/TiltCard";
import { Reveal } from "@/components/motion/Reveal";
import {
  sharedPlans,
  vpsPlans,
  dedicatedPlans,
  domainPrices,
  microServices,
  offers,
  hostingFaq,
  type Plan,
} from "@/lib/content/hosting";

export const metadata: Metadata = {
  title: "Hosting & Domains",
  description:
    "In-Kingdom shared hosting, managed VPS, and dedicated servers with a 99.9% SLA, 24/7 NOC at our Makkah HQ, .sa domain registration, and VAT-inclusive SAR pricing.",
  alternates: { canonical: "/hosting" },
};

function PlanCard({ plan, dark = false }: { plan: Plan; dark?: boolean }) {
  return (
    <TiltCard className="h-full" max={4}>
    <article
      className={`relative flex h-full flex-col rounded-xl border p-7 transition-transform duration-300 hover:-translate-y-1 ${
        dark
          ? plan.highlight
            ? "border-azure bg-ink-2 shadow-[0_0_60px_-20px_rgba(46,139,247,0.35)]"
            : "border-white/10 bg-ink-2"
          : plan.highlight
            ? "border-azure bg-white shadow-[0_24px_60px_-30px_rgba(20,80,184,0.35)]"
            : "border-black/10 bg-white"
      }`}
    >
      {plan.highlight && (
        <span className="absolute -top-3 left-7 rounded-full bg-azure px-3 py-1 font-[family-name:var(--font-mono)] text-[0.68rem] font-semibold uppercase tracking-[0.1em] text-[#04122B]">
          Most chosen
        </span>
      )}
      <div className="flex items-baseline justify-between">
        <h3 className={`text-[1.3rem] font-semibold ${dark ? "text-thi" : "text-lhi"}`}>
          {plan.name}
        </h3>
        <span className="ar text-ice-deep" lang="ar">
          {plan.arName}
        </span>
      </div>
      <p className={`mt-1 text-[0.88rem] ${dark ? "text-tmid" : "text-lmid"}`}>{plan.blurb}</p>
      <p className="mt-5">
        <span
          className={`font-[family-name:var(--font-mono)] text-[2.1rem] font-medium tnum ${
            dark ? "text-azure-bright" : "text-azure-deep"
          }`}
        >
          {plan.priceSar}
        </span>
        <span className={`text-[0.85rem] ${dark ? "text-tlo" : "text-llo"}`}> SAR{plan.period}</span>
      </p>
      <ul
        className={`mt-5 grid flex-1 content-start gap-2.5 border-t border-dashed pt-5 ${
          dark ? "border-white/10" : "border-black/10"
        }`}
      >
        {plan.specs.map((s) => (
          <li
            key={s}
            className={`flex items-baseline gap-2.5 text-[0.9rem] ${dark ? "text-tmid" : "text-lmid"}`}
          >
            <span className="text-[0.72rem] text-azure" aria-hidden>
              ▸
            </span>
            {s}
          </li>
        ))}
      </ul>
      <Link
        href="/contact?topic=hosting"
        className={`btn mt-6 w-full ${plan.highlight ? "btn-primary" : dark ? "btn-ghost-dark" : "btn-ghost-light"}`}
      >
        Order {plan.name}
      </Link>
    </article>
    </TiltCard>
  );
}

export default function HostingPage() {
  return (
    <>
      <PageHero
        eyebrow="Hosting & domains"
        titleLines={["Infrastructure that lives", "where your customers do."]}
        lede="Shared hosting, managed VPS, and dedicated servers from in-Kingdom points of presence in Riyadh and Jeddah — watched around the clock by our own NOC, priced in riyals with VAT included, exactly as your invoice will read."
      >
        <Reveal delay={0.4} className="mt-8 flex flex-wrap gap-x-8 gap-y-3">
          {["99.9% uptime SLA with service credits", "24/7 NOC at Makkah HQ", "Free migration on annual plans"].map(
            (t) => (
              <span
                key={t}
                className="flex items-center gap-2.5 font-[family-name:var(--font-mono)] text-[0.8rem] tracking-[0.06em] text-ice-soft"
              >
                <i
                  className="h-2 w-2 bg-azure-bright [clip-path:polygon(50%_0,100%_100%,0_100%)]"
                  aria-hidden
                />
                {t}
              </span>
            )
          )}
        </Reveal>
      </PageHero>

      {/* offers */}
      <section className="weave-panel border-b border-white/10 py-[clamp(3rem,6vw,4.5rem)]">
        <div className="mx-auto grid w-full max-w-[1280px] gap-6 px-5 md:grid-cols-2 md:px-10">
          {offers.map((o, i) => (
            <Reveal
              key={o.title}
              delay={i * 0.08}
              as="div"
              className="relative overflow-hidden rounded-xl border border-ice/30 bg-gradient-to-br from-navy to-ink-2 p-7"
            >
              <span className="absolute right-5 top-5 rounded-full border border-ice/40 px-3 py-1 font-[family-name:var(--font-mono)] text-[0.68rem] uppercase tracking-[0.1em] text-ice">
                {o.tag}
              </span>
              <p className="ar pr-32 text-left text-lg font-medium text-ice" lang="ar">
                {o.ar}
              </p>
              <h2 className="mt-1 text-2xl font-semibold text-thi">{o.title}</h2>
              <p className="mt-3 max-w-[64ch] text-[0.95rem] leading-relaxed text-tmid">{o.body}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* shared */}
      <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>
            <p className="eyebrow">Shared hosting</p>
            <h2 className="mt-4 text-[clamp(1.9rem,3.2vw,2.8rem)] font-semibold text-lhi">
              Serious websites, simple bills.
            </h2>
          </Reveal>
          <div className="mt-10 grid gap-6 md:grid-cols-3">
            {sharedPlans.map((p, i) => (
              <Reveal key={p.name} delay={i * 0.07} as="div">
                <PlanCard plan={p} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* vps */}
      <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">Managed VPS</p>
            <h2 className="mt-4 max-w-[720px] text-[clamp(1.9rem,3.2vw,2.8rem)] font-semibold text-thi">
              Your server, our 3 a.m. problem.
            </h2>
            <p className="mt-4 max-w-[62ch] text-tmid">
              Every managed VPS includes weekly patching, 24/7 monitoring with 15-minute critical
              response, daily off-site backups, and the Faster-or-Free tuning promise.
            </p>
          </Reveal>
          <div className="mt-10 grid gap-6 md:grid-cols-3">
            {vpsPlans.map((p, i) => (
              <Reveal key={p.name} delay={i * 0.07} as="div">
                <PlanCard plan={p} dark />
              </Reveal>
            ))}
          </div>
          <div className="mt-10 grid gap-6 md:grid-cols-2">
            {dedicatedPlans.map((p, i) => (
              <Reveal key={p.name} delay={i * 0.07} as="div">
                <PlanCard plan={p} dark />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* domains + micro-services */}
      <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">Domains</p>
              <h2 className="mt-4 text-[clamp(1.7rem,2.8vw,2.4rem)] font-semibold text-lhi">
                Your name, on Saudi soil.
              </h2>
            </Reveal>
            <Reveal delay={0.1} className="mt-8 overflow-x-auto rounded-xl border border-black/10 bg-white">
              <table className="w-full min-w-[420px] text-left text-[0.95rem]">
                <thead>
                  <tr className="border-b border-black/10 font-[family-name:var(--font-mono)] text-[0.72rem] uppercase tracking-[0.14em] text-llo">
                    <th className="px-6 py-4 font-medium">Extension</th>
                    <th className="px-6 py-4 font-medium">Per year</th>
                    <th className="px-6 py-4 font-medium">Notes</th>
                  </tr>
                </thead>
                <tbody>
                  {domainPrices.map((d) => (
                    <tr key={d.tld} className="border-b border-black/5 last:border-0">
                      <td className="px-6 py-3.5 font-[family-name:var(--font-mono)] font-medium text-lhi">
                        {d.tld}
                      </td>
                      <td className="px-6 py-3.5 text-azure-deep tnum">SAR {d.priceSar}</td>
                      <td className="px-6 py-3.5 text-[0.85rem] text-lmid">{d.note}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Reveal>
          </div>

          <div>
            <Reveal>
              <p className="eyebrow">One-off services</p>
              <h2 className="mt-4 text-[clamp(1.7rem,2.8vw,2.4rem)] font-semibold text-lhi">
                Small jobs, fixed prices.
              </h2>
            </Reveal>
            <Reveal delay={0.1} className="mt-8 grid gap-3">
              {microServices.map((m) => (
                <div
                  key={m.name}
                  className="flex items-center justify-between gap-4 rounded-lg border border-black/10 bg-white px-6 py-4"
                >
                  <span className="text-[0.95rem] text-lmid">{m.name}</span>
                  <span className="shrink-0 font-[family-name:var(--font-mono)] font-medium text-azure-deep tnum">
                    {m.priceSar === 0 ? (m.note ?? "Free") : `SAR ${m.priceSar}`}
                  </span>
                </div>
              ))}
            </Reveal>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="weave-panel border-t border-white/10 py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <Reveal>
            <p className="eyebrow">Hosting FAQ</p>
            <h2 className="mt-4 text-[clamp(1.9rem,3.2vw,2.8rem)] font-semibold text-thi">
              The fine print, in plain language.
            </h2>
          </Reveal>
          <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {hostingFaq.map((f, i) => (
              <Reveal
                key={f.q}
                delay={(i % 3) * 0.07}
                as="div"
                className="rounded-xl border border-white/10 bg-ink-2 p-7"
              >
                <h3 className="text-[1.05rem] font-semibold text-thi">{f.q}</h3>
                <p className="mt-3 text-[0.93rem] leading-relaxed text-tmid">{f.a}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <CTABand
        title="Moving an estate, not just a site?"
        arabic="ننقلها معك"
        body="Forty workloads or four hundred — our cloud practice plans the migration, our NOC runs the destination. One team, one SLA, no finger-pointing."
        primaryLabel="Plan my migration"
      />
    </>
  );
}