import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import { caseStudies, type CaseStudy, type WorkPlatform } from "@/lib/home-content";
import ScrollReveal from "@/components/ScrollReveal";
import SectionBackdrop from "@/components/ui/SectionBackdrop";
import SectionHeader, { Highlight } from "@/components/ui/SectionHeader";

/** Hard limit: the portfolio never shows more than 6 applications. */
const products = caseStudies.slice(0, 6);

export default function SelectedWork() {
  return (
    <section id="work" className="relative scroll-mt-24 overflow-x-clip py-20 sm:py-24 lg:py-28">
      <SectionBackdrop glow="right" />

      <div className="container">
        <SectionHeader
          eyebrow="Selected Work"
          title={
            <>
              <Highlight>Mobile products</Highlight> built for the real world.
            </>
          }
          description="Explore mobile applications designed, developed and continuously improved by our product team."
        />

        <ul className="mt-14 grid gap-6 md:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-8">
          {products.map((study, i) => (
            <li key={study.title}>
              <ScrollReveal delay={i * 90} variant="scale" className="h-full">
                <ProductCard study={study} />
              </ScrollReveal>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/** Monogram stands in for the app icon until a real one is supplied. */
function Logo({ study }: { study: CaseStudy }) {
  return (
    <span
      aria-hidden="true"
      className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-linear-to-br from-accent to-accent-600 font-display text-sm font-bold text-white shadow-[0_8px_18px_-8px_rgba(0,148,238,0.6)]"
    >
      {study.monogram}
    </span>
  );
}

/** Opens the application; `productUrl` when configured, otherwise "#" until the real link is added. */
function ProductLink({ study, className = "" }: { study: CaseStudy; className?: string }) {
  const external = Boolean(study.productUrl);
  const props = external ? { target: "_blank", rel: "noopener noreferrer" as const } : {};
  return (
    <Link href={study.productUrl ?? "#"} {...props} className={className}>
      Open Application
      <ArrowUpRight
        className="h-4 w-4 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 motion-reduce:transition-none"
        aria-hidden
      />
    </Link>
  );
}

/** Store buttons render only when real URLs are configured. */
function StoreLinks({ study }: { study: CaseStudy }) {
  if (!study.appStoreUrl && !study.googlePlayUrl) return null;
  return (
    <div className="mt-4 flex flex-wrap gap-2">
      {study.appStoreUrl && (
        <a
          href={study.appStoreUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="rounded-lg border border-slate-200 bg-[#0F172A] px-3 py-1.5 text-xs font-semibold text-white"
        >
          App Store
        </a>
      )}
      {study.googlePlayUrl && (
        <a
          href={study.googlePlayUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="rounded-lg border border-slate-200 bg-[#0F172A] px-3 py-1.5 text-xs font-semibold text-white"
        >
          Google Play
        </a>
      )}
    </div>
  );
}

/** CSS smartphone frame. Shows the real screenshot when `study.image` is set, otherwise a neutral placeholder screen. */
function Phone({
  study,
  platform,
  className = "",
}: {
  study: CaseStudy;
  platform: WorkPlatform;
  className?: string;
}) {
  return (
    <div
      className={`relative aspect-[9/19] overflow-hidden rounded-[1.6rem] border-[5px] border-[#0F172A] bg-[#0F172A] shadow-[0_24px_48px_-20px_rgba(15,23,42,0.55)] ${className}`}
    >
      <div className="absolute inset-0 overflow-hidden rounded-[1.2rem] bg-linear-to-b from-accent-100 via-accent-50 to-white">
        {study.image ? (
          <Image
            src={study.image}
            alt={`${study.title} — app screenshot`}
            fill
            sizes="180px"
            className="object-cover object-top"
          />
        ) : (
          <div aria-hidden="true" className="flex h-full flex-col items-center justify-center gap-2 px-3 text-center">
            <span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-linear-to-br from-accent to-accent-600 font-display text-base font-bold text-white shadow-[0_10px_20px_-10px_rgba(0,148,238,0.7)]">
              {study.monogram}
            </span>
            <span className="text-[10px] font-semibold uppercase tracking-wider text-ink-400">App screenshot</span>
          </div>
        )}
      </div>
      {/* Notch (iOS) / punch-hole camera (Android) */}
      {platform === "iOS" ? (
        <span aria-hidden="true" className="absolute left-1/2 top-1 h-2 w-1/4 -translate-x-1/2 rounded-full bg-[#0F172A]" />
      ) : (
        <span aria-hidden="true" className="absolute left-1/2 top-1.5 h-1.5 w-1.5 -translate-x-1/2 rounded-full bg-[#0F172A]" />
      )}
    </div>
  );
}

/** Light-blue product surface with one phone per platform, centered and clipped inside the card. */
function MobileProductVisual({ study }: { study: CaseStudy }) {
  const [first, second] = study.platforms;
  return (
    <div className="relative h-[17.5rem] overflow-hidden bg-linear-to-br from-accent-50 via-white to-accent-100/60">
      <div className="absolute inset-0 flex items-end justify-center transition-transform duration-500 ease-out group-hover:-translate-y-2 motion-reduce:transition-none motion-reduce:group-hover:transform-none">
        {second ? (
          <>
            <Phone study={study} platform={first} className="z-10 w-32 translate-y-8" />
            <Phone study={study} platform={second} className="-ml-6 w-28 translate-y-16 opacity-95" />
          </>
        ) : (
          <Phone study={study} platform={first} className="w-36 translate-y-8" />
        )}
      </div>
    </div>
  );
}

function ProductCard({ study }: { study: CaseStudy }) {
  return (
    <article className="group flex h-full flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-card transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-accent-200 hover:shadow-[0_26px_56px_-26px_rgba(0,148,238,0.4)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div className="border-b border-slate-200">
        <MobileProductVisual study={study} />
      </div>

      <div className="flex flex-1 flex-col p-6">
        <div className="flex items-center gap-3">
          <Logo study={study} />
          <h3 className="font-display text-lg font-semibold tracking-tight text-[#0F172A]">{study.title}</h3>
        </div>
        <p className="mt-4 flex-1 text-[0.95rem] leading-[1.7] text-ink-300">{study.description}</p>
        <StoreLinks study={study} />
        <ProductLink
          study={study}
          className="mt-4 inline-flex min-h-10 w-fit items-center gap-1.5 rounded-md text-sm font-semibold text-accent-600 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
        />
      </div>
    </article>
  );
}