// ------------------------------------------------------------------------
//  components/SubscribeModal.js - SunScope Extra upsell popup.
//
//  Replaces the old inline pro-prompt box. Shown when a free user taps a
//  locked day, profile, or feature. Presents the upsell copy plus Subscribe /
//  Restore / Manage links. Easy to dismiss: ×, backdrop click, or Esc.
//
//  Reuses the .welcome-* overlay/card styling. Purely presentational - the
//  open/close state is proPromptDay in useAppState, dismissed via onClose.
//
//  Props:
//    title       - upsell heading (e.g. "Hiking is part of SunScope Extra")
//    detail      - supporting paragraph
//    onClose     - dismiss the prompt (clears proPromptDay)
//    openRestore - opens the "Already subscribed?" restore modal
// ------------------------------------------------------------------------

import { h } from '../../vendor/preact.js';
import { useEffect } from '../../vendor/preact-hooks.js';
import htm from '../../vendor/htm.js';
import { Wordmark } from './Wordmark.js';

const html = htm.bind(h);

const SUBSCRIBE_URL = 'https://buy.stripe.com/9B63cw7vl8k15Ei9DQd7q00';
const MANAGE_URL    = 'https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00';

export function SubscribeModal({ title, detail, onClose, openRestore }) {
  // Dismiss on Esc.
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);

  const secondaryLink = {
    fontFamily: 'Manrope, sans-serif',
    fontWeight: 700,
    fontSize: '10px',
    textTransform: 'uppercase',
    letterSpacing: '0.07em',
    textDecoration: 'none',
    background: 'none',
    border: 'none',
    cursor: 'pointer',
  };

  return html`
    <div class="welcome-overlay" onClick=${onClose}>
      <div class="welcome-card" role="dialog" aria-modal="true" aria-labelledby="subscribe-title"
        onClick=${(e) => e.stopPropagation()} style=${{ maxWidth: '440px' }}>
        <button class="welcome-close" aria-label="Close" onClick=${onClose}>×</button>
        <div class="welcome-head">
          <${Wordmark} />
          <div style=${{
            fontFamily: 'Manrope, sans-serif',
            fontWeight: 600,
            fontSize: '11px',
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
            color: '#7a5c2a',
            marginTop: '10px',
          }}>See the world the way your skin does.</div>
        </div>
        <h2 class="welcome-title" id="subscribe-title" style=${{ textAlign: 'center', fontSize: '1.3rem', marginBottom: '10px' }}>
          <span aria-hidden="true">🔒</span> ${title}
        </h2>
        <p class="welcome-intro">${detail}</p>
        <div style=${{
          fontFamily: 'Manrope, sans-serif',
          fontWeight: 700,
          fontSize: '11px',
          textTransform: 'uppercase',
          letterSpacing: '0.07em',
          color: '#c8922a',
          textAlign: 'center',
          marginBottom: '18px',
        }}>£2 / month  ·  cancel any time</div>
        <a class="welcome-cta" href=${SUBSCRIBE_URL} target="_blank" rel="noopener noreferrer"
          style=${{ textDecoration: 'none', textAlign: 'center', marginBottom: '16px' }}>
          Subscribe — £2/month
        </a>
        <div style=${{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
          <button
            type="button"
            onClick=${() => { onClose(); openRestore(); }}
            style=${{
              ...secondaryLink,
              color: '#c8922a',
              borderBottom: '1px solid rgba(200,146,42,0.4)',
              padding: '0 0 1px',
            }}
          >Already subscribed? Restore access →</button>
          <a href=${MANAGE_URL} target="_blank" rel="noopener noreferrer"
            style=${{
              ...secondaryLink,
              color: '#b09870',
              borderBottom: '1px solid rgba(176,152,112,0.4)',
              paddingBottom: '1px',
            }}
          >Manage or cancel subscription →</a>
        </div>
      </div>
    </div>`;
}