@sarimarcus/content-sites-ui 0.14.0 → 0.15.0

package/src/affiliate/AffiliateComparisonTable.astro

@@ -0,0 +1,212 @@
+---
+/**
+ * AffiliateComparisonTable — side-by-side comparison of a few monetised options, each row ending in a CTA. Rows come
+ * from the caller; an external row's link is sponsored unless `sponsored: false`. A real table from md up, stacked
+ * cards below (exactly one is in the DOM per viewport); with no row carrying a link the CTA column is dropped. The
+ * disclosure arrives through the `disclosure` slot, below the table.
+ */
+import Icon from '../primitives/Icon.astro';
+import Badge from '../primitives/Badge.astro';
+import type { ComparisonRow, ComparisonTableLabels } from './types';
+
+interface Props {
+  rows: ComparisonRow[];
+  title?: string;
+  titleTag?: 'p' | 'h2' | 'h3';
+  nameLabel?: string;
+  priceLabel?: string;
+  featureLabel?: string;
+  placement?: string;
+  labels?: ComparisonTableLabels;
+  class?: string;
+}
+
+const {
+  rows = [],
+  title,
+  titleTag = 'p',
+  nameLabel = 'Option',
+  priceLabel = 'Price',
+  featureLabel = 'Highlight',
+  placement = 'comparison-table',
+  labels = {},
+  class: className = '',
+} = Astro.props;
+
+const {
+  caption = 'Comparison of options',
+  ctaColumn = 'Book or view',
+  externalCta = 'Check availability',
+  internalCta = 'View details',
+  externalAria = (cta: string, name: string) => `${cta}: ${name} (opens in a new tab)`,
+  internalAria = (cta: string, name: string) => `${cta}: ${name}`,
+  rated = (rating: number, count?: number) => `Rated ${rating} out of 5${count ? ` from ${count} reviews` : ''}`,
+} = labels;
+
+const captionText = title ?? caption;
+const TitleTag = titleTag;
+const hasAnyCta = rows.some((row) => row.href);
+
+const ctaBase =
+  'inline-flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2';
+const ctaAffiliate = `${ctaBase} bg-accent-strong text-primary-foreground hover:bg-accent`;
+const ctaInternal = `${ctaBase} border border-border bg-muted/40 text-foreground hover:bg-muted/70`;
+
+const defaultCta = (external: boolean) => (external ? externalCta : internalCta);
+---
+
+{rows.length > 0 && (
+  <div class:list={['not-prose my-8', className]}>
+    {title && (
+      <TitleTag class="mb-4 font-display text-lg font-semibold text-foreground">{title}</TitleTag>
+    )}
+
+    {/* md and up: a real table */}
+    <div class="hidden overflow-x-auto md:block">
+      <table class="w-full border-collapse overflow-hidden rounded-lg border border-border bg-card text-sm">
+        <caption class="sr-only">{captionText}</caption>
+        <thead>
+          <tr class="bg-muted/60">
+            <th scope="col" class="border-b border-border px-4 py-3 text-left font-semibold text-foreground">{nameLabel}</th>
+            <th scope="col" class="border-b border-border px-4 py-3 text-left font-semibold text-foreground">{priceLabel}</th>
+            <th scope="col" class="border-b border-border px-4 py-3 text-left font-semibold text-foreground">{featureLabel}</th>
+            {hasAnyCta && (
+              <th scope="col" class="border-b border-border px-4 py-3 text-right font-semibold text-foreground">
+                <span class="sr-only">{ctaColumn}</span>
+              </th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => {
+            const external = row.external !== false;
+            const rel = row.sponsored === false ? 'noopener noreferrer' : 'sponsored noopener noreferrer';
+            const cta = row.cta ?? defaultCta(external);
+            return (
+              <tr class={i % 2 === 1 ? 'bg-muted/20' : ''}>
+                <th scope="row" class="border-b border-border px-4 py-3 text-left align-top font-normal last:border-b-0">
+                  <span class="block font-display font-semibold text-foreground">{row.name}</span>
+                  {row.subtitle && (
+                    <span class="mt-0.5 block text-xs text-muted-foreground">{row.subtitle}</span>
+                  )}
+                  {row.badge && (
+                    <Badge tone="accent" size="sm" lines={2} class="mt-1.5 max-w-[26ch]">{row.badge}</Badge>
+                  )}
+                  {typeof row.rating === 'number' && (
+                    <span class="mt-1.5 flex items-center gap-1 text-xs text-muted-foreground" role="img" aria-label={rated(row.rating, row.ratingCount)}>
+                      <Icon name="star" filled class="h-3.5 w-3.5 text-accent" />
+                      <span class="font-medium text-foreground">{row.rating.toFixed(1)}</span>
+                      {row.ratingCount && <span>({row.ratingCount})</span>}
+                    </span>
+                  )}
+                </th>
+                <td class="border-b border-border px-4 py-3 align-top text-muted-foreground last:border-b-0">
+                  {/* a price can carry a long sourcing caveat */}
+                  <span class="line-clamp-3">{row.price}</span>
+                </td>
+                <td class="border-b border-border px-4 py-3 align-top leading-relaxed text-muted-foreground last:border-b-0">
+                  <span class="line-clamp-2">{row.keyFeature}</span>
+                </td>
+                {hasAnyCta && (
+                <td class="border-b border-border px-4 py-3 text-right align-top last:border-b-0">
+                  {row.href ? (
+                    external ? (
+                      <a
+                        href={row.href}
+                        target="_blank"
+                        rel={rel}
+                        data-track-event="affiliate_click"
+                        data-track-cta-id={row.trackId}
+                        data-track-cta-placement={placement}
+                        class={ctaAffiliate}
+                        aria-label={externalAria(cta, row.name)}
+                      >
+                        {cta}
+                        <Icon name="arrow-up-right" class="h-4 w-4" />
+                      </a>
+                    ) : (
+                      <a href={row.href} class={ctaInternal} aria-label={internalAria(cta, row.name)}>
+                        {cta}
+                        <Icon name="arrow-right" class="h-4 w-4" />
+                      </a>
+                    )
+                  ) : (
+                    <span class="text-muted-foreground" aria-hidden="true">—</span>
+                  )}
+                </td>
+                )}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+
+    {/* below md: stacked cards */}
+    <ul class="space-y-4 md:hidden">
+      {rows.map((row) => {
+        const external = row.external !== false;
+        const rel = row.sponsored === false ? 'noopener noreferrer' : 'sponsored noopener noreferrer';
+        const cta = row.cta ?? defaultCta(external);
+        return (
+          <li class="rounded-xl border border-border bg-card p-4">
+            {/* the badge gets its own line so a long label never squeezes the name */}
+            <div class="min-w-0">
+              <p class="font-display font-semibold text-foreground">{row.name}</p>
+              {row.subtitle && <p class="mt-0.5 text-sm text-muted-foreground">{row.subtitle}</p>}
+            </div>
+            {row.badge && (
+              <Badge tone="accent" size="sm" lines={2} class="mt-1.5">{row.badge}</Badge>
+            )}
+
+            {typeof row.rating === 'number' && (
+              <p class="mt-2 flex items-center gap-1 text-xs text-muted-foreground" role="img" aria-label={rated(row.rating, row.ratingCount)}>
+                <Icon name="star" filled class="h-3.5 w-3.5 text-accent" />
+                <span class="font-medium text-foreground">{row.rating.toFixed(1)}</span>
+                {row.ratingCount && <span>({row.ratingCount})</span>}
+              </p>
+            )}
+
+            <dl class="mt-3 space-y-2 text-sm">
+              <div class="flex justify-between gap-4">
+                <dt class="shrink-0 text-muted-foreground">{priceLabel}</dt>
+                <dd class="min-w-0 text-right font-medium text-foreground line-clamp-3">{row.price}</dd>
+              </div>
+              <div class="flex justify-between gap-4">
+                <dt class="shrink-0 text-muted-foreground">{featureLabel}</dt>
+                <dd class="min-w-0 text-right text-foreground line-clamp-2">{row.keyFeature}</dd>
+              </div>
+            </dl>
+
+            {row.href && (
+              <div class="mt-4">
+                {external ? (
+                  <a
+                    href={row.href}
+                    target="_blank"
+                    rel={rel}
+                    data-track-event="affiliate_click"
+                    data-track-cta-id={row.trackId}
+                    data-track-cta-placement={placement}
+                    class={`${ctaAffiliate} w-full`}
+                    aria-label={externalAria(cta, row.name)}
+                  >
+                    {cta}
+                    <Icon name="arrow-up-right" class="h-4 w-4" />
+                  </a>
+                ) : (
+                  <a href={row.href} class={`${ctaInternal} w-full`} aria-label={internalAria(cta, row.name)}>
+                    {cta}
+                    <Icon name="arrow-right" class="h-4 w-4" />
+                  </a>
+                )}
+              </div>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+
+    <slot name="disclosure" />
+  </div>
+)}

package/src/affiliate/AffiliateDisclosure.astro

@@ -0,0 +1,31 @@
+---
+/**
+ * AffiliateDisclosure — the one-line affiliate disclosure. The text is the site's: `texts` maps each provider key
+ * to its sentence and `provider` is required, so a surface can never fall back to another provider's wording. An
+ * unknown or empty key throws at build time.
+ */
+interface Props {
+  provider: string;
+  texts: Record<string, string>;
+  baseClass?: string;
+  class?: string;
+}
+
+const {
+  provider,
+  texts,
+  baseClass = 'text-xs leading-relaxed text-muted-foreground mt-4',
+  class: className,
+} = Astro.props;
+
+const text = provider ? texts?.[provider] : undefined;
+if (!text) {
+  throw new Error(
+    `AffiliateDisclosure: no disclosure text for provider "${provider}" (known: ${Object.keys(texts ?? {}).join(', ') || 'none'}).`,
+  );
+}
+---
+
+<p class:list={[baseClass, className]}>
+  {text}
+</p>

package/src/affiliate/AffiliateLink.astro

@@ -0,0 +1,46 @@
+---
+/**
+ * AffiliateLink — an inline affiliate text link with the external-link glyph. `href` arrives finished (tagged by the
+ * site); `rel` defaults to the sponsored relation every affiliate link must carry, so a caller passes another value
+ * only for a classified non-affiliate link. `productId` adds the product dimension when the site has one.
+ */
+interface Props {
+  href: string;
+  provider: string;
+  placement: string;
+  productId?: string;
+  rel?: string;
+  class?: string;
+}
+
+const { href, provider, placement, productId, rel = 'sponsored noopener', class: className } = Astro.props;
+---
+
+<a
+  href={href}
+  target="_blank"
+  rel={rel}
+  data-track-event="affiliate_click"
+  data-track-affiliate-provider={provider}
+  data-track-affiliate-product-id={productId}
+  data-track-affiliate-placement={placement}
+  class:list={[
+    "inline-flex items-center gap-0.5 underline decoration-dotted underline-offset-2 hover:decoration-solid transition-all",
+    className,
+  ]}
+>
+  <slot />
+  <svg
+    class="w-3 h-3 inline-block"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    aria-hidden="true"
+  >
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+    ></path>
+    <polyline points="15 3 21 3 21 9"></polyline>
+    <line x1="10" y1="14" x2="21" y2="3"></line>
+  </svg>
+</a>

package/src/affiliate/AmazonProductCard.astro

@@ -0,0 +1,101 @@
+---
+/**
+ * AmazonProductCard — the whole card is one sponsored link; the CTA is a styled span (anchors must not nest).
+ * `href` arrives finished (the site builds the store URL and its tag). Catalogue rules: no price and no review
+ * count, and no hotlinked product image — without a local `image` the card shows a category icon.
+ */
+import Badge from '../primitives/Badge.astro';
+import Icon from '../primitives/Icon.astro';
+import { templateLine } from './templateText';
+
+interface Props {
+  href: string;
+  asin: string;
+  title: string;
+  subtitle?: string;
+  reason: string;
+  image?: string;
+  imageAlt?: string;
+  category?: 'book' | 'gear' | 'photography' | 'gourmet';
+  badge?: string;
+  placement?: string;
+  ctaLabel?: string;
+  class?: string;
+}
+
+const {
+  href,
+  asin,
+  title,
+  subtitle,
+  reason,
+  image,
+  imageAlt,
+  category = 'book',
+  badge,
+  placement = 'card',
+  ctaLabel = 'View on Amazon',
+  class: className,
+} = Astro.props;
+
+const categoryIcon: Record<string, string> = {
+  book: 'book-open',
+  gear: 'luggage',
+  photography: 'camera',
+  gourmet: 'utensils',
+};
+const placeholderIcon = categoryIcon[category] ?? 'book-open';
+---
+
+<a
+  href={href}
+  target="_blank"
+  rel="sponsored noopener"
+  data-track-event="affiliate_click"
+  data-track-affiliate-provider="amazon"
+  data-track-affiliate-product-id={asin}
+  data-track-affiliate-placement={placement}
+  class:list={[
+    "group relative bg-card rounded-xl overflow-hidden card-lift border border-border flex flex-col h-full no-underline text-inherit focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+    className,
+  ]}
+>
+  {badge && (
+    <Badge tone="custom" toneClass="bg-accent text-accent-foreground" size="sm" lines={0} class="absolute top-3 left-3 z-10 pointer-events-none !px-2.5 !py-1 !font-semibold">
+      {badge}
+    </Badge>
+  )}
+
+  <div class="relative h-44 sm:h-48 overflow-hidden shrink-0 bg-muted flex items-center justify-center">
+    {image ? (
+      <img
+        src={image}
+        alt={imageAlt ?? title}
+        width="320"
+        height="192"
+        loading="lazy"
+        decoding="async"
+        class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105"
+      />
+    ) : (
+      <Icon name={placeholderIcon} class="w-12 h-12 text-muted-foreground/40" />
+    )}
+  </div>
+
+  <div class="p-4 sm:p-5 flex flex-col flex-1">
+    <h3 class="text-lg font-semibold text-card-foreground leading-tight font-display">
+      {title}
+    </h3>
+    {subtitle && <p class="text-sm text-muted-foreground mt-0.5">{subtitle}</p>}
+    <p class="text-base text-muted-foreground line-clamp-2 mt-2 mb-4">
+      {reason}
+    </p>
+
+    <div class="mt-auto">
+      <span
+        class="flex items-center justify-center gap-2 w-full py-2.5 px-4 bg-primary text-primary-foreground font-medium rounded-lg group-hover:bg-primary/90 group-active:bg-primary/80 transition-colors"
+      ><Fragment set:html={templateLine(ctaLabel)} /><Icon name="arrow-up-right" class="w-4 h-4" />
+      </span>
+    </div>
+  </div>
+</a>

package/src/affiliate/AmazonProductSection.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * AmazonProductSection — a grid of AmazonProductCards, capped at 4. Renders nothing unless `enabled` and there are
+ * products. Each product carries its finished `href`; the disclosure arrives through the `disclosure` slot.
+ */
+import AmazonProductCard from './AmazonProductCard.astro';
+
+interface Product {
+  href: string;
+  asin: string;
+  title: string;
+  subtitle?: string;
+  reason: string;
+  image?: string;
+  imageAlt?: string;
+  category?: 'book' | 'gear' | 'photography' | 'gourmet';
+  badge?: string;
+}
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  products: Product[];
+  maxCards?: number;
+  enabled?: boolean;
+  ctaLabel?: string;
+  id?: string;
+  class?: string;
+}
+
+const {
+  title = "Recommended reading",
+  subtitle,
+  products,
+  maxCards,
+  enabled = true,
+  ctaLabel,
+  id,
+  class: className,
+} = Astro.props;
+
+const cappedMax = Math.min(maxCards ?? 4, 4);
+const visibleProducts = enabled ? [...(products ?? [])].slice(0, cappedMax) : [];
+
+const gridClasses: Record<number, string> = {
+  1: "grid grid-cols-1 max-w-md mx-auto",
+  2: "grid gap-6 grid-cols-1 sm:grid-cols-2",
+  3: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+
+const gridClass = gridClasses[visibleProducts.length] || gridClasses[4];
+---
+
+{
+  visibleProducts.length > 0 && (
+    <section id={id} class:list={["py-12 bg-muted/30 border-t border-border", className]}>
+      <div class="max-w-shell mx-auto px-4 sm:px-6 lg:px-8">
+        <div class:list={["flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1", subtitle ? "mb-2" : "mb-8"]}>
+          <h2 class="text-3xl sm:text-4xl font-normal font-display">{title}</h2>
+          <slot name="disclosure" />
+        </div>
+        {subtitle && <p class="text-sm text-muted-foreground mb-8">{subtitle}</p>}
+        <div class={gridClass}>
+          {visibleProducts.map((product) => (
+            <AmazonProductCard {...product} ctaLabel={ctaLabel} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/affiliate/HotelAffiliateCTA.astro

@@ -0,0 +1,175 @@
+---
+/**
+ * HotelAffiliateCTA — the per-property booking block (`section`) or a lone booking button (`button`). The site
+ * resolves `href`; `isSearchFallback` says it is a search for this property rather than its booking page, which
+ * softens the wording and adds the free-to-search line. The un-monetised official site is a quiet text link.
+ *
+ * `priceCompactMax`: a price longer than this renders as a plain line instead of the "from X / night" numerals.
+ * `priceNoteSlot`: the block carries a place for `priceNote` (a sourcing caveat under the subhead).
+ * `officialSiteTrackId` adds outbound-click tracking to the official-site link. `placement` overrides both default
+ * analytics placements, for a page that renders the block more than once. Copy defaults are English, built from
+ * `entityNoun`; the disclosure arrives through the `disclosure` slot.
+ */
+import { isBadgeLength } from '../primitives/badgeText';
+import type { HotelCtaLabels } from './types';
+import { templateLine } from './templateText';
+
+
+interface Props {
+  name: string;
+  href: string;
+  isSearchFallback: boolean;
+  variant?: 'section' | 'button';
+  entityNoun?: string;
+  trackId?: string;
+  placement?: string;
+  priceText?: string | null;
+  priceCompactMax?: number;
+  priceNoteSlot?: boolean;
+  priceNote?: string | null;
+  rating?: number;
+  ratingCount?: number;
+  ratingSource?: string;
+  website?: string;
+  officialSiteTrackId?: string;
+  labels?: HotelCtaLabels;
+  panelClass?: string;
+  class?: string;
+}
+
+const {
+  name,
+  href,
+  isSearchFallback,
+  variant = 'section',
+  entityNoun = 'hotel',
+  trackId = 'hotel-affiliate-cta',
+  placement,
+  priceText = null,
+  priceCompactMax,
+  priceNoteSlot = false,
+  priceNote = null,
+  rating,
+  ratingCount,
+  ratingSource,
+  website,
+  officialSiteTrackId,
+  labels = {},
+  panelClass = 'border-secondary/20 bg-secondary/5',
+  class: className,
+} = Astro.props;
+
+const {
+  headline = (n: string) => `Find the best rate for ${n}`,
+  bookCta = `Book this ${entityNoun}`,
+  searchCta = 'Check prices & availability',
+  bookSubhead = 'Check current availability and rates.',
+  searchSubhead = `Search current prices and availability for this ${entityNoun}.`,
+  from = 'from ',
+  perNight = ' / night',
+  reviews = (n: string) => `(${n} reviews)`,
+  ratingOn = (s: string) => `on ${s}`,
+  freeToSearch = 'Free to search · No sign-up needed',
+  officialSite = `Visit the ${entityNoun}'s official site`,
+} = labels;
+
+const ctaLabel = isSearchFallback ? searchCta : bookCta;
+const subhead = isSearchFallback ? searchSubhead : bookSubhead;
+const priceIsCompact = priceCompactMax === undefined || isBadgeLength(priceText, priceCompactMax);
+const note = priceNoteSlot ? priceNote : null;
+
+const ctaClasses =
+  'group flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary';
+---
+
+{variant === 'button' ? (
+  <a
+    href={href}
+    target="_blank"
+    rel="sponsored noopener noreferrer"
+    data-track-event="affiliate_click"
+    data-track-cta-id={trackId}
+    data-track-cta-placement={placement ?? 'above-fold'}
+    class:list={[ctaClasses, 'sm:w-auto', className]}
+  >
+    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M2 4v16M2 8h18a2 2 0 0 1 2 2v10M2 17h20M6 8V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </svg>
+    <span>{ctaLabel}</span>
+    <svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M5 12h14M13 6l6 6-6 6" />
+    </svg>
+  </a>
+) : (
+  <div class:list={["rounded-xl border", panelClass, "p-6", className]}>
+    <p class="font-display text-lg font-semibold text-foreground">{headline(name)}</p>
+    <p class="mt-1 text-sm text-muted-foreground">{subhead}</p>{priceNoteSlot && ' '}{note && (
+      <p class="mt-3 text-sm leading-snug text-muted-foreground">{note}</p>
+    )}
+
+    {(priceText || rating) && (
+      <div class="mt-4 flex flex-wrap items-baseline gap-x-5 gap-y-2">
+        {priceText && (
+          priceIsCompact ? (
+            <p class="text-foreground">
+              <span class="text-sm text-muted-foreground">{from}</span>
+              <span class="text-2xl font-semibold">{priceText}</span>
+              <span class="text-sm text-muted-foreground">{perNight}</span>
+            </p>
+          ) : (
+            <p class="text-base font-medium text-foreground leading-snug">{priceText}</p>
+          )
+        )}
+        {rating && (
+          <span class="inline-flex items-center gap-1.5 text-sm">
+            <svg class="h-4 w-4 text-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+            </svg>
+            <span class="font-semibold text-foreground">{rating.toFixed(1)}</span>
+            {ratingCount ? (
+              <span class="text-muted-foreground">{reviews(ratingCount.toLocaleString())}</span>
+            ) : ratingSource ? (
+              <span class="text-muted-foreground">{ratingOn(ratingSource)}</span>
+            ) : null}
+          </span>
+        )}
+      </div>
+    )}
+
+    <a
+      href={href}
+      target="_blank"
+      rel="sponsored noopener noreferrer"
+      data-track-event="affiliate_click"
+      data-track-cta-id={trackId}
+      data-track-cta-placement={placement ?? 'book-section'}
+      class:list={[ctaClasses, 'mt-4']}
+    >
+      <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M2 4v16M2 8h18a2 2 0 0 1 2 2v10M2 17h20M6 8V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+      </svg>
+      <span>{ctaLabel}</span>
+      <svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M5 12h14M13 6l6 6-6 6" />
+      </svg>
+    </a>
+
+    {isSearchFallback && (
+      <p class="mt-2 text-center text-xs text-muted-foreground"><Fragment set:html={templateLine(freeToSearch)} /></p>
+    )}
+
+    <div class="mt-4 flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+      {website && (
+        <a
+          href={website}
+          target="_blank"
+          rel="noopener noreferrer"
+          data-track-event={officialSiteTrackId ? 'outbound_click' : undefined}
+          data-track-link-id={officialSiteTrackId}
+          class="text-sm text-muted-foreground underline-offset-2 hover:text-primary hover:underline"
+        ><Fragment set:html={templateLine(officialSite)} /></a>
+      )}
+      <slot name="disclosure" />
+    </div>
+  </div>
+)}