import { For } from "solid-js";
import { PeachMark } from "../components/PeachMark";
import { silenceProNudge, snoozeProNudge } from "../../shared/pro-nudge";

const PRO_HIGHLIGHTS = [
  ["Peach Sync", "Encrypted, peer-to-peer, across every device"],
  ["Peach Codex", "Your whole vault, restorable from paper"],
  ["Passkeys", "Zero-knowledge WebAuthn, built in"],
  ["Duress vault", "A convincing decoy under coercion"],
] as const;

export function ProNudgeView(props: { onSeePro: () => void; onDismiss: () => void }) {
  async function dismiss(record: () => Promise<void>) {
    await record().catch(() => {
      // Best effort: a storage failure only means the nudge may return sooner.
    });
    props.onDismiss();
  }

  return (
    <section class="peach-pro-nudge peach-theme" aria-labelledby="pro-nudge-title">
      <div class="peach-pro-nudge-inner">
        <PeachMark class="peach-pro-nudge-mark" />
        <p class="peach-pro-eyebrow">PEACH PRO · $39 ONCE</p>
        <h1 id="pro-nudge-title" class="peach-pro-headline">
          Peach stays free.<br />Pro keeps it <em>growing.</em>
        </h1>
        <p class="peach-pro-subtitle">
          No subscription, no account. One purchase supports an independent
          password manager and unlocks the extras, forever.
        </p>

        <ol class="peach-pro-nudge-list">
          <For each={PRO_HIGHLIGHTS}>
            {([name, description], index) => (
              <li class="peach-pro-nudge-item">
                <span class="peach-pro-grid-num">{String(index() + 1).padStart(2, "0")}</span>
                <span class="peach-pro-grid-name">{name}</span>
                <span class="peach-pro-grid-desc">{description}</span>
              </li>
            )}
          </For>
        </ol>

        <div class="peach-pro-nudge-actions">
          <button type="button" class="peach-pro-upgrade-cta" onClick={props.onSeePro}>
            See Peach Pro
          </button>
          <div class="peach-pro-nudge-dismissals">
            <button type="button" class="peach-pro-nudge-quiet" onClick={() => void dismiss(snoozeProNudge)}>
              Remind me in 90 days
            </button>
            <span aria-hidden="true">·</span>
            <button type="button" class="peach-pro-nudge-quiet" onClick={() => void dismiss(silenceProNudge)}>
              Don't show again
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}