1import { For, Show } from "solid-js";23export const PEACH_PRO_PURCHASE_URL =4 "https://buy.polar.sh/polar_cl_IXSFIPojx67rcOTksn8LkH5mnU3osPHtYqBIl1eyuIz";56const SYNC_FEATURES = [7 ["01", "Peach Sync", "Encrypted sync across every paired device"],8 ["02", "One-time purchase", "$39 once · yours forever"],9 ["03", "One shared key", "Pro transfers during authenticated pairing"],10] as const;1112export interface PairingProRequiredProps {13 onRetry(): void;14 15 onOpenPro?(): void;16}171819export function PairingProRequired(props: PairingProRequiredProps) {20 return (21 <section class="peach-pair-pro-required" aria-labelledby="pair-pro-title">22 <p class="peach-pro-eyebrow">PEACH PRO · SYNC</p>23 <h2 id="pair-pro-title" class="peach-pro-headline">24 Pair freely.<br />Sync with <em>Pro.</em>25 </h2>26 <p class="peach-pro-subtitle">27 Pairing can start from any device, but at least one of these two28 devices needs a valid Peach Pro license before the pairing can finish.29 No vault or device record was added.30 </p>3132 <div class="peach-pro-grid peach-pair-pro-grid">33 <For each={SYNC_FEATURES}>34 {([number, name, description]) => (35 <div class="peach-pro-grid-item peach-pro-grid-item--wide">36 <span class="peach-pro-grid-num">{number}</span>37 <span class="peach-pro-grid-name">{name}</span>38 <span class="peach-pro-grid-desc">{description}</span>39 </div>40 )}41 </For>42 </div>4344 <div class="peach-pro-upgrade-actions">45 <Show46 when={props.onOpenPro}47 fallback={48 <a49 href={PEACH_PRO_PURCHASE_URL}50 target="_blank"51 rel="noopener noreferrer"52 class="peach-pro-upgrade-cta"53 >54 Get Peach Pro55 </a>56 }57 >58 <button59 type="button"60 class="peach-pro-upgrade-cta peach-pair-pro-button"61 onClick={() => props.onOpenPro?.()}62 >63 Open Peach Pro64 </button>65 </Show>66 <button67 type="button"68 class="peach-btn peach-btn--ghost peach-btn--md"69 onClick={props.onRetry}70 >71 Try another device72 </button>73 </div>74 </section>75 );76}