spb/company-atlas

1import { ArrowUpRight, ExternalLink, GitCompareArrows } from 'lucide-react';2import Link from 'next/link';3import { Chip, CompanyTierBadge, CountryChip, StatusBadge } from '@/components/ui/badges';4import { LiveAgo } from '@/components/ui/live';5import { countryName } from '@/lib/countries';6import { fmtInt, fmtPct, plural } from '@/lib/format';7import { descriptionOf, logoCandidates, socialsOf } from '@/lib/profile';8import { routes } from '@/lib/site';9import type { CompanyDetail } from '@/lib/types';10import { CompanyLogo } from './company-logo';11import { DescriptionAttribution } from './profile-panels';12import { WatchButton } from './watch-button';1314/**15 * Company identity block: logo (profile logo → icon → monogram), name + legal name + legal form, domain / listing chips,16 * HQ, founded, employees (sourced count when known, else the stated band), industries, attributed description, socials,17 * watch + compare. Everything shown comes from the card or its enrichment profile — nothing is inferred here.18 */19export function CompanyHeader({ c }: { c: CompanyDetail }) {20  const p = c.profile ?? null;21  const desc = descriptionOf(c);22  const socials = socialsOf(p);23  const founded = p?.founded_year ?? c.founded_year;24  const hqCity = p?.hq?.city ?? c.hq_city;25  const hqRegion = p?.hq?.region ?? c.hq_region;26  const ticker = p?.ticker ?? c.ticker;27  const exchange = p?.exchange ?? c.exchange;28  const isPublic = p?.public_company || c.public_company;29  const legalLine = [c.legal_name && c.legal_name !== c.display_name ? c.legal_name : null, p?.legal_form].filter(Boolean).join(' · ');30  return (31    <div className="pb-4 pt-5 md:pt-8" data-company-header>32      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">33        <div className="flex min-w-0 gap-3 md:gap-4">34          <CompanyLogo name={c.display_name} candidates={logoCandidates(c)} size={64} priority rounded="lg" className="mt-1 md:mt-1.5" />35          <div className="min-w-0 flex-1">36            <div className="eyebrow flex flex-wrap items-center gap-2">37              <span>Company</span>38              <CompanyTierBadge tier={c.tier} />39              {c.status !== 'ACTIVE' && <StatusBadge status={c.status} />}40            </div>41            <h1 className="display mt-1.5 text-[28px] md:text-[40px]">{c.display_name}</h1>42            {legalLine && <p className="mt-1 text-[13px] text-ink-3">{legalLine}</p>}43            <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1.5 text-sm text-ink-2">44              <a href={p?.official_website ?? c.website} target="_blank" rel="noopener noreferrer" className="mono inline-flex h-6 items-center gap-1 rounded-[3px] border border-rule px-1.5 text-xs text-ink-2 hover:border-rule-strong hover:text-accent">45                {c.canonical_domain} <ExternalLink className="size-3" aria-hidden />46              </a>47              {isPublic && ticker && (48                <Chip tone="outline" className="mono h-6 font-normal text-ink-2" title="Listed company — ticker and exchange as recorded">49                  {ticker}50                  {exchange ? <span className="text-ink-3">· {exchange}</span> : null}51                </Chip>52              )}53              <span className="inline-flex items-center gap-1.5">54                <CountryChip code={c.country} name={countryName(c.country)} />55                {hqCity && (56                  <span>57                    {hqCity}58                    {hqRegion ? `, ${hqRegion}` : ''}59                  </span>60                )}61              </span>62              {founded && <span className="tnum">est. {founded}</span>}63              {typeof p?.employees === 'number' ? (64                <span className="tnum">65                  {fmtInt(p.employees)} employees{p.employees_year ? ` (${p.employees_year})` : ''}66                </span>67              ) : (68                c.employees_band && <span className="tnum">{c.employees_band} employees (stated)</span>69              )}70            </div>71            <div className="mt-2 flex flex-wrap gap-1.5">72              {c.industries.map((i) => (73                <Link key={i} href={routes.industry(i)}>74                  <Chip tone="neutral" className="hover:bg-surface-3">75                    {i.replace(/-/g, ' ')}76                  </Chip>77                </Link>78              ))}79            </div>80            {desc && (81              <div className="mt-3 max-w-2xl">82                <p className="text-[15px] leading-relaxed text-ink-2">{desc.text}</p>83                <DescriptionAttribution c={c} className="mt-1" />84              </div>85            )}86            {socials.length > 0 && (87              <ul className="mt-3 flex flex-wrap gap-1.5" aria-label="Official social profiles" data-socials>88                {socials.map((s) => (89                  <li key={s.key}>90                    <a href={s.url} target="_blank" rel="noopener nofollow noreferrer" className="inline-flex h-7 items-center gap-1 rounded-[3px] border border-rule px-2 text-[12px] text-ink-2 hover:border-rule-strong hover:text-ink" title={s.url}>91                      {s.label} <ArrowUpRight className="size-3 text-ink-3" aria-hidden />92                    </a>93                  </li>94                ))}95              </ul>96            )}97          </div>98        </div>99        <div className="flex shrink-0 flex-wrap items-center gap-2 md:flex-col md:items-end">100          <div className="flex gap-2">101            <WatchButton slug={c.slug} name={c.display_name} />102            <Link href={routes.compare([c.slug])} className="btn">103              <GitCompareArrows className="size-4" aria-hidden /> Compare104            </Link>105          </div>106          <p className="text-xs text-ink-3">107            last observed <LiveAgo at={c.last_observed_at} tick={30000} />108          </p>109        </div>110      </div>111    </div>112  );113}114115/** "32 active sensors · 18,420 observations · 786 historical changes · 249 structured events · historical coverage 94 %" */116export function DensityStrip({ c }: { c: CompanyDetail }) {117  const parts: string[] = [118    `${fmtInt(c.counts.sensors)} active ${plural(c.counts.sensors, 'sensor')}`,119    `${fmtInt(c.counts.observations)} ${plural(c.counts.observations, 'observation')}`,120    `${fmtInt(c.counts.changes)} historical ${plural(c.counts.changes, 'change')}`,121    `${fmtInt(c.counts.events)} structured ${plural(c.counts.events, 'event')}`,122  ];123  if (c.coverage?.historical_coverage !== null && c.coverage?.historical_coverage !== undefined) parts.push(`historical coverage ${fmtPct(c.coverage.historical_coverage, 0)}`);124  if (c.coverage?.first_observed_at) parts.push(`observed since ${new Date(c.coverage.first_observed_at).toISOString().slice(0, 10)}`);125  return (126    <p className="tnum border-y border-rule py-2 text-xs text-ink-2" data-density-strip>127      {parts.map((p, i) => (128        <span key={p}>129          {i > 0 && <span className="mx-1.5 text-ink-3">·</span>}130          {p}131        </span>132      ))}133    </p>134  );135}136