`src/components/ClaimExamples.tsx`

84 lines
/**
 * ClaimExamples — proof-of-concept cards shown on /submit (claimmyaddress
 * homepage). Demonstrates what a claimed address looks like BEFORE the user
 * is asked to add one. Closes the R5 UX critique that the submit form opened
 * with an empty/error feel and undersold the product against flagship/bubbe.
 *
 * Each card: hero image + address + year built + (films / permits / owners).
 * Links to /address/[slug] so the user can see the full record.
 */
import Link from 'next/link';
import { getClaimExampleAddresses } from '@/lib/db';

export async function ClaimExamples() {
  // R6 fix: 2 cards (was 4) — gives each card breathing room so the fact list
  // and address title are legible at first scroll. Density was hurting the
  // value-prop demonstration.
  const examples = await getClaimExampleAddresses(2);
  if (!examples.length) return null;

  return (
    <section className="bg-[#fdf9ee] border-y-2 border-[#c9292e] py-10 md:py-12">
      <div className="max-w-6xl mx-auto px-6">
        <span className="inline-block bg-[#c9292e] text-white px-3 py-1 text-[10px] font-mono tracking-[0.25em] uppercase mb-4">
          On file
        </span>
        <h2 className="font-mono uppercase text-xl md:text-2xl tracking-tight text-[#1a1a1a] font-bold mb-2 max-w-3xl">
          Here&apos;s what a claimed address looks like.
        </h2>
        <p className="font-sans text-sm text-[#1a1a1a]/70 mb-8 max-w-2xl">
          Every record below is built from public sources — assessor data,
          building permits, FilmLA permits, archival photographs. Add your
          own address below and we&apos;ll do the same for it.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
          {examples.map(ex => (
            <Link
              key={ex.slug}
              href={`/address/${encodeURIComponent(ex.slug)}`}
              className="block bg-white relative ce-card transition group grid grid-cols-[120px_1fr] md:grid-cols-[150px_1fr]"
              title={`${ex.title}${ex.year_built ? ` (built ${ex.year_built})` : ''}`}
            >
              {ex.hero_image && /^https?:\/\//i.test(ex.hero_image) && (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                  src={ex.hero_image}
                  alt={ex.title}
                  loading="eager"
                  className="block w-full h-full object-cover aspect-[4/5]"
                />
              )}
              <div className="px-5 py-5 flex flex-col">
                <p className="font-sans font-bold text-base md:text-lg text-[#1a1a1a] group-hover:text-[#c9292e] transition leading-snug">
                  {ex.title}
                </p>
                <p className="font-mono text-[10px] uppercase tracking-[0.15em] text-[#1a1a1a]/55 mt-1">
                  {ex.city ?? '—'}
                  {ex.year_built ? ` · built ${ex.year_built}` : ''}
                </p>
                <ul className="mt-4 space-y-1.5 text-[12px] md:text-[13px] font-mono text-[#1a1a1a]/80">
                  {ex.films_count > 0 && (
                    <li>· {ex.films_count} film{ex.films_count === 1 ? '' : 's'} on record</li>
                  )}
                  {ex.permits_count > 0 && (
                    <li>· {ex.permits_count} permit{ex.permits_count === 1 ? '' : 's'} filed</li>
                  )}
                  {ex.owners_count > 0 && (
                    <li>· {ex.owners_count} association{ex.owners_count === 1 ? '' : 's'}</li>
                  )}
                  {ex.property_type && <li>· {ex.property_type.toLowerCase()}</li>}
                </ul>
                <p className="mt-auto pt-4 font-mono text-[10px] uppercase tracking-[0.18em] text-[#c9292e] group-hover:translate-x-1 transition">
                  See full record →
                </p>
              </div>
            </Link>
          ))}
        </div>
      </div>
      <style>{`.ce-card { box-shadow: 0 1px 0 rgba(0,0,0,0.08); transition: transform 180ms ease, box-shadow 180ms ease; } .ce-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -10px rgba(201,41,46,0.45), 0 1px 0 rgba(0,0,0,0.08); }`}</style>
    </section>
  );
}