import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Reveal, LineReveal } from "@/components/motion/Reveal";
import ServiceIcon from "@/components/site/ServiceIcon";
import TiltCard from "@/components/motion/TiltCard";
import DataGlobe from "@/components/three/DataGlobe";
import CTABand from "@/components/site/CTABand";
import { flagships, getFlagship } from "@/lib/content/flagships";

export function generateStaticParams() {
  return flagships.map((f) => ({ slug: f.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const f = getFlagship(slug);
  if (!f) return {};
  return {
    title: `${f.name} — ${f.tagline}`,
    description: f.summary,
    alternates: { canonical: `/products/${f.slug}` },
  };
}

export default async function FlagshipPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const f = getFlagship(slug);
  if (!f) notFound();
  const other = flagships.find((x) => x.slug !== f.slug)!;

  return (
    <>
      {/* hero */}
      <section className="weave-dark relative overflow-clip pb-14 pt-40 md:pb-20 md:pt-48">
        <div
          className="pointer-events-none absolute -right-[8%] -top-[20%] h-[55vw] max-h-[720px] w-[55vw] max-w-[720px] rounded-full opacity-30 blur-[90px]"
          style={{ background: `radial-gradient(circle, ${f.accent}88, transparent 65%)` }}
          aria-hidden
        />
        <DataGlobe className="absolute -right-[6%] top-1/2 hidden h-[520px] w-[520px] -translate-y-1/2 opacity-70 lg:block" />
        <div className="pointer-events-none absolute inset-y-0 right-0 hidden w-[46%] bg-[linear-gradient(90deg,rgba(3,13,31,0.9),transparent_40%)] lg:block" aria-hidden />
        <div className="relative mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <Reveal>
            <div className="flex flex-wrap items-center gap-3">
              <span className="rounded-full border border-azure/40 bg-azure/10 px-3.5 py-1 font-[family-name:var(--font-mono)] text-[0.7rem] uppercase tracking-[0.16em] text-azure-bright">
                Flagship product
              </span>
              <a
                href={`https://${f.domain}`}
                target="_blank"
                rel="noopener noreferrer"
                className="font-[family-name:var(--font-mono)] text-[0.78rem] tracking-[0.08em] text-tlo hover:text-ice"
              >
                {f.domain} ↗
              </a>
            </div>
          </Reveal>
          <h1 className="mt-6 max-w-[14em] text-[clamp(2.6rem,5.4vw,4.4rem)] font-[650] leading-[1.03] tracking-[-0.02em] text-thi">
            <LineReveal lines={[f.name, <span key="t" style={{ color: f.accent }}>{f.tagline}</span>]} />
          </h1>
          <Reveal delay={0.28}>
            <p className="mt-6 max-w-[60ch] text-[clamp(1.05rem,1.45vw,1.25rem)] leading-relaxed text-tmid">
              {f.heroLede}
            </p>
          </Reveal>
          <Reveal delay={0.4} className="mt-9 flex flex-wrap gap-4">
            <Link href={`/contact?product=${f.slug}`} className="btn btn-primary">
              Book a demo <span className="arrow" aria-hidden>→</span>
            </Link>
            <Link href={`/products/${other.slug}`} className="btn btn-ghost-dark">
              See {other.name}
            </Link>
          </Reveal>
        </div>
        <div className="sadu-rule absolute inset-x-0 bottom-0" aria-hidden />
      </section>

      {/* highlights band */}
      <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">
          {f.highlights.map((h, i) => (
            <div key={h.v} className={`px-5 py-8 md:px-10 ${i > 0 ? "border-white/10 lg:border-l" : ""} ${i % 2 === 1 ? "border-l border-white/10 lg:border-l" : ""} ${i >= 2 ? "border-t border-white/10 lg:border-t-0" : ""}`}>
              <div className="font-[family-name:var(--font-mono)] text-[1.7rem] font-medium leading-tight tnum" style={{ color: f.accent }}>
                {h.k}
              </div>
              <div className="mt-1.5 text-[0.85rem] text-tlo">{h.v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* narrative */}
      <section className="weave-light on-light py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto w-full max-w-[1000px] px-5 md:px-10">
          {f.sections.map((sec, i) => (
            <Reveal key={sec.heading} delay={i === 0 ? 0 : 0.05} className={i > 0 ? "mt-14" : ""}>
              <h2 className="max-w-[20ch] text-[clamp(1.5rem,2.6vw,2.2rem)] font-semibold text-lhi">{sec.heading}</h2>
              <p className="mt-4 max-w-[68ch] text-[1.02rem] leading-[1.75] text-lmid">{sec.body}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* modules */}
      <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">Inside {f.name}</p>
            <h2 className="mt-4 text-[clamp(1.9rem,3.2vw,2.8rem)] font-semibold text-thi">
              {f.slug === "miftah-inn" ? "Twelve connected modules." : "One hub, every department."}
            </h2>
          </Reveal>
          <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {f.modules.map((m, i) => (
              <Reveal key={m.name} delay={(i % 3) * 0.06} as="div">
                <TiltCard className="h-full" max={5}>
                  <div className="flex h-full flex-col rounded-xl border border-white/10 bg-ink-2 p-6">
                    <span style={{ color: f.accent }}>
                      <ServiceIcon name={m.icon} className="h-9 w-9" />
                    </span>
                    <h3 className="mt-4 text-[1.05rem] font-semibold text-thi">{m.name}</h3>
                    <p className="mt-2 text-[0.9rem] leading-relaxed text-tmid">{m.body}</p>
                  </div>
                </TiltCard>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* audience + faq */}
      <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-[0.8fr_1.2fr]">
          <div>
            <Reveal>
              <p className="eyebrow">Who it's for</p>
              <h2 className="mt-4 text-[clamp(1.7rem,2.8vw,2.4rem)] font-semibold text-lhi">Built for the properties you run.</h2>
              <ul className="mt-6 grid gap-3">
                {f.audience.map((a) => (
                  <li key={a} className="flex items-baseline gap-3 text-[0.98rem] text-lmid">
                    <i className="h-2.5 w-2.5 shrink-0 translate-y-[1px] bg-azure-deep [clip-path:polygon(50%_0,100%_100%,0_100%)]" aria-hidden />
                    {a}
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>
          <div>
            <Reveal>
              <p className="eyebrow">Questions</p>
              <h2 className="mt-4 text-[clamp(1.7rem,2.8vw,2.4rem)] font-semibold text-lhi">Good to know.</h2>
            </Reveal>
            <div className="mt-6 grid gap-4">
              {f.faq.map((q, i) => (
                <Reveal key={q.q} delay={i * 0.06} as="div" className="rounded-xl border border-black/10 bg-white p-6">
                  <h3 className="text-[1.02rem] font-semibold text-lhi">{q.q}</h3>
                  <p className="mt-2 text-[0.93rem] leading-relaxed text-lmid">{q.a}</p>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CTABand
        title={`Bring ${f.name} to your property.`}
        arabic="جاهز خلال يوم"
        body={`See ${f.name} on a live property day, get a tailored rollout plan, and go live fast — ${f.slug === "miftah-inn" ? "most hotels within a single business day" : "in days, not quarters"}. Run it alone or with the full suite.`}
        primaryLabel="Book a demo"
        primaryHref={`/contact?product=${f.slug}`}
      />
    </>
  );
}