import Link from "next/link";
import { Reveal } from "@/components/motion/Reveal";
import TiltCard from "@/components/motion/TiltCard";
import { flagships } from "@/lib/content/flagships";

function SuiteMark({ slug }: { slug: string }) {
  // distinct emblem per product: MiftahInn = key, GuestKey = scan/QR
  if (slug === "miftah-inn") {
    return (
      <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-11 w-11" aria-hidden>
        <circle cx="17" cy="17" r="8" />
        <path d="M22.5 22.5 L38 38" />
        <path d="M33 33 l4 -4 M28 28 l4 -4" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-11 w-11" aria-hidden>
      <path d="M8 14 V9 a1 1 0 0 1 1 -1 h5 M40 14 V9 a1 1 0 0 0 -1 -1 h-5 M8 34 v5 a1 1 0 0 0 1 1 h5 M40 34 v5 a1 1 0 0 1 -1 1 h-5" />
      <path d="M15 18 h4 v4 h-4 z M29 18 h4 v4 h-4 z M15 26 h4 v4 h-4 z M27 28 h6 M29 24 v6" />
    </svg>
  );
}

export default function FlagshipShowcase({ light = false }: { light?: boolean }) {
  return (
    <div>
      <Reveal>
        <div className="inline-flex items-center gap-2.5 rounded-full border border-azure/40 bg-azure/10 px-4 py-1.5">
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-azure-bright opacity-75" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-azure-bright" />
          </span>
          <span className="font-[family-name:var(--font-mono)] text-[0.72rem] uppercase tracking-[0.16em] text-azure-bright">
            Flagship hospitality suite
          </span>
        </div>
        <h2 className={`mt-5 max-w-[18em] text-[clamp(1.9rem,3.6vw,3rem)] font-semibold ${light ? "text-lhi" : "text-thi"}`}>
          Two products that run a hotel end to end — and talk to each other.
        </h2>
        <p className={`mt-4 max-w-[64ch] text-[1.02rem] leading-relaxed ${light ? "text-lmid" : "text-tmid"}`}>
          <b className={light ? "text-lhi" : "text-thi"}>MiftahInn</b> runs the back of house — the full
          hotel PMS — while <b className={light ? "text-lhi" : "text-thi"}>GuestKey</b> runs the front,
          the guests&apos; digital concierge. Joined by the GuestKey bridge, and Makkah-ready for Hajj
          and Umrah season.
        </p>
      </Reveal>

      <div className="mt-10 grid gap-6 lg:grid-cols-2">
        {flagships.map((f, i) => (
          <Reveal key={f.slug} delay={i * 0.1} as="div">
            <TiltCard className="h-full" max={5}>
              <Link
                href={`/products/${f.slug}`}
                className="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-navy to-ink-2 p-8"
              >
                <div
                  className="pointer-events-none absolute -right-16 -top-16 h-52 w-52 rounded-full opacity-25 blur-2xl transition-opacity duration-500 group-hover:opacity-45"
                  style={{ background: `radial-gradient(circle, ${f.accent}, transparent 65%)` }}
                  aria-hidden
                />
                <div className="relative flex items-start justify-between">
                  <span style={{ color: f.accent }}>
                    <SuiteMark slug={f.slug} />
                  </span>
                  <span className="font-[family-name:var(--font-mono)] text-[0.72rem] tracking-[0.1em] text-tlo">
                    {f.domain}
                  </span>
                </div>
                <h3 className="relative mt-6 text-2xl font-semibold text-thi">{f.name}</h3>
                <p className="relative mt-1 font-[family-name:var(--font-mono)] text-[0.72rem] uppercase tracking-[0.14em]" style={{ color: f.accent }}>
                  {f.role}
                </p>
                <p className="relative mt-4 flex-1 text-[0.96rem] leading-relaxed text-tmid">{f.summary}</p>
                <div className="relative mt-6 flex flex-wrap gap-2">
                  {f.highlights.slice(0, 3).map((h) => (
                    <span key={h.v} className="rounded-full border border-white/15 px-3 py-1 text-[0.78rem] text-tmid">
                      <b className="font-semibold text-thi">{h.k}</b> {h.v}
                    </span>
                  ))}
                </div>
                <span className="relative mt-6 inline-flex items-center gap-2 text-[0.92rem] font-semibold" style={{ color: f.accent }}>
                  Explore {f.name}
                  <span className="transition-transform duration-200 group-hover:translate-x-1" aria-hidden>→</span>
                </span>
              </Link>
            </TiltCard>
          </Reveal>
        ))}
      </div>

      {/* bridge line */}
      <Reveal delay={0.2}>
        <div className={`mt-6 flex items-center justify-center gap-3 font-[family-name:var(--font-mono)] text-[0.78rem] tracking-[0.12em] ${light ? "text-llo" : "text-tlo"}`}>
          <span className="h-px w-12 bg-current opacity-40" aria-hidden />
          MIFTAHINN ⇄ GUESTKEY BRIDGE
          <span className="h-px w-12 bg-current opacity-40" aria-hidden />
        </div>
      </Reveal>
    </div>
  );
}