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

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. Yours forever.</p>

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

        <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>
  );
}