Editorial Press Row

"use client";

import { cn, useInView, useReducedMotion, type BlockCopy } from "@pax-sh/blocks";

export interface SocialProofEditorialProps {
  copy?: BlockCopy;
  className?: string;
}

const DEFAULT_COPY: BlockCopy = {
  eyebrow: "In the press",
  title: "Read by the people who write about this.",
};

const CITATIONS = [
  {
    publication: "The Build Log",
    excerpt: "The rare developer tool that treats an incident like a story with an ending.",
    date: "March 2026",
  },
  {
    publication: "Terminal Weekly",
    excerpt: "Setup took our reviewer eleven minutes, and we timed it twice to be sure.",
    date: "February 2026",
  },
  {
    publication: "Stack Notes",
    excerpt:
      "A pricing page with no asterisks. We checked the footer for the catch. There is none.",
    date: "January 2026",
  },
  {
    publication: "The Deploy",
    excerpt: "Quietly became the default recommendation in three of our last four team surveys.",
    date: "December 2025",
  },
];

/**
 * Press mentions set like a broadsheet citations column: publication name
 * in small caps, a one-line excerpt, and hairline rules between entries.
 * Fully static under reduced motion; otherwise a quiet fade on first view.
 */
export function SocialProofEditorial({
  copy = DEFAULT_COPY,
  className,
}: SocialProofEditorialProps) {
  const reduced = useReducedMotion();
  const [ref, inView] = useInView<HTMLDivElement>({ threshold: 0.2 });
  const settled = reduced || inView;

  const enter = (step: number) =>
    reduced
      ? undefined
      : ({
          opacity: settled ? 1 : 0,
          transition: `opacity 0.6s ease ${step * 0.08}s`,
        } as const);

  return (
    <section
      className={cn(
        "bg-[var(--pax-paper,#f6f2ea)] px-6 py-20 text-[var(--pax-ink,#12110f)] md:px-10 md:py-28",
        className,
      )}
      data-pax-asset="block-social-proof-editorial-15"
    >
      <div ref={ref} className="mx-auto grid max-w-6xl grid-cols-1 gap-10 md:grid-cols-[1fr_2fr]">
        <div style={enter(0)}>
          {copy.eyebrow ? (
            <p className="m-0 text-xs font-medium uppercase tracking-[0.22em] text-[var(--pax-mute,#6b645c)]">
              {copy.eyebrow}
            </p>
          ) : null}
          <h2 className="mt-4 text-2xl font-semibold leading-tight tracking-tight [text-wrap:balance] md:text-3xl">
            {copy.title}
          </h2>
        </div>

        <ul className="m-0 list-none divide-y divide-[var(--pax-border,rgba(18,17,15,0.12))] border-y border-[var(--pax-border,rgba(18,17,15,0.12))] p-0">
          {CITATIONS.map((citation, i) => (
            <li key={citation.publication} className="py-6" style={enter(1 + i)}>
              <div className="flex items-baseline justify-between gap-4">
                <p className="m-0 text-sm font-bold uppercase tracking-[0.18em]">
                  {citation.publication}
                </p>
                <p className="m-0 shrink-0 text-xs tabular-nums text-[var(--pax-mute,#6b645c)]">
                  {citation.date}
                </p>
              </div>
              <p className="m-0 mt-2 text-base leading-relaxed text-[var(--pax-mute,#6b645c)]">
                &ldquo;{citation.excerpt}&rdquo;
              </p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}