// welcome.jsx — "We saw you here" thank-you flow

// ─────────────────────────────────────────────────────────────
// "We saw you here" thank-you / soft hello flow
// Triggers ~30s after first visit (localStorage'd) — never twice.
// ─────────────────────────────────────────────────────────────
const WELCOME_KEY = 'mumc.welcome.v1';

function useWelcomeFlow(delayMs = 30000) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    try {
      const seen = localStorage.getItem(WELCOME_KEY);
      if (seen) return;
    } catch (e) {}
    const t = setTimeout(() => setOpen(true), delayMs);
    return () => clearTimeout(t);
  }, [delayMs]);

  const dismiss = (record = true) => {
    if (record) {
      try { localStorage.setItem(WELCOME_KEY, JSON.stringify({ at: Date.now() })); } catch (e) {}
    }
    setOpen(false);
  };
  return { open, dismiss };
}

function WelcomeCard({ theme, onClose }) {
  const [step, setStep] = React.useState(0); // 0 = hello, 1 = name, 2 = response
  const [name, setName] = React.useState('');
  const [reason, setReason] = React.useState('');

  const submit = () => {
    try {
      localStorage.setItem(WELCOME_KEY, JSON.stringify({ at: Date.now(), name, reason }));
    } catch (e) {}
    setStep(2);
    setTimeout(() => onClose(false), 3200);
  };

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 195,
      background: 'rgba(20,16,10,0.7)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'flex-end',
      animation: 'fadein 0.5s both',
    }}>
      <div style={{
        width: '100%', background: theme.paper,
        borderTop: `2px solid ${theme.gold}`,
        padding: '24px 22px 26px',
        animation: 'welcomeRise 0.6s 0.1s both',
        position: 'relative',
      }}>
        <style>{`
          @keyframes welcomeRise {
            from { transform: translateY(60px); opacity: 0; }
            to   { transform: translateY(0); opacity: 1; }
          }
        `}</style>

        {/* dismissable close */}
        <button onClick={() => onClose(true)} style={{
          position: 'absolute', top: 8, right: 8,
          background: 'transparent', border: 'none', color: theme.inkMute,
          fontSize: 18, cursor: 'pointer', padding: 6, lineHeight: 1,
        }}>×</button>

        {/* ornament */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 12 }}>
          <svg width="46" height="22" viewBox="0 0 46 22" fill="none">
            <path d="M2 11 L18 11" stroke={theme.gold} strokeWidth="0.8"/>
            <path d="M28 11 L44 11" stroke={theme.gold} strokeWidth="0.8"/>
            <path d="M23 4 L23 18 M16 11 L30 11" stroke={theme.gold} strokeWidth="1.2" strokeLinecap="round"/>
          </svg>
        </div>

        {step === 0 && (
          <>
            <div style={{
              fontFamily: theme.fonts.display, fontStyle: 'italic',
              fontSize: 24, color: theme.ink, lineHeight: 1.2, marginBottom: 8, textAlign: 'center',
            }}>
              We're glad you stopped by.
            </div>
            <div style={{
              fontFamily: theme.fonts.body, fontSize: 14,
              color: theme.inkSoft, lineHeight: 1.5, marginBottom: 18, textAlign: 'center',
            }}>
              May we know your name?<br/>
              <span style={{ ...smallCaps(theme, 9), color: theme.inkMute, letterSpacing: '0.18em' }}>
                — Pastor Jonathan
              </span>
            </div>

            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => onClose(true)} style={{
                flex: 1, padding: '13px 14px', background: 'transparent', color: theme.inkSoft,
                border: `1px solid ${theme.rule}`, cursor: 'pointer',
                fontFamily: theme.fonts.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
              }}>Just looking</button>
              <button onClick={() => setStep(1)} style={{
                flex: 1.4, padding: '13px 14px', background: theme.ink, color: theme.paper,
                border: 'none', cursor: 'pointer',
                fontFamily: theme.fonts.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
              }}>Say hello</button>
            </div>
          </>
        )}

        {step === 1 && (
          <>
            <div style={{ fontFamily: theme.fonts.display, fontStyle: 'italic', fontSize: 22, color: theme.ink, marginBottom: 14, textAlign: 'center' }}>
              How may we greet you?
            </div>
            <input
              autoFocus
              type="text" placeholder="Your name"
              value={name} onChange={e => setName(e.target.value)}
              style={{
                width: '100%', padding: '12px 14px', background: theme.bgAlt,
                border: `1px solid ${theme.rule}`, fontFamily: theme.fonts.display,
                fontSize: 18, color: theme.ink, marginBottom: 10, outline: 'none',
              }}/>
            <select value={reason} onChange={e => setReason(e.target.value)} style={{
              width: '100%', padding: '12px 14px', background: theme.bgAlt,
              border: `1px solid ${theme.rule}`, fontFamily: theme.fonts.body,
              fontSize: 14, color: theme.ink, marginBottom: 14, outline: 'none',
            }}>
              <option value="">What brings you to our pages?</option>
              <option value="visiting">I'd like to visit a service</option>
              <option value="returning">Returning after a long while</option>
              <option value="prayer">I'd like prayer</option>
              <option value="watching">Watching online</option>
              <option value="curious">Just curious</option>
            </select>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => onClose(true)} style={{
                flex: 1, padding: '12px 14px', background: 'transparent', color: theme.inkSoft,
                border: `1px solid ${theme.rule}`, cursor: 'pointer',
                fontFamily: theme.fonts.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
              }}>Not now</button>
              <button onClick={submit} disabled={!name.trim()} style={{
                flex: 1.4, padding: '12px 14px',
                background: name.trim() ? theme.ink : theme.rule,
                color: name.trim() ? theme.paper : theme.inkMute,
                border: 'none', cursor: name.trim() ? 'pointer' : 'default',
                fontFamily: theme.fonts.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
              }}>Send</button>
            </div>
            <div style={{ fontFamily: theme.fonts.body, fontStyle: 'italic', fontSize: 11, color: theme.inkMute, marginTop: 10, textAlign: 'center' }}>
              Stays on your phone unless you send.
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <div style={{
              fontFamily: theme.fonts.display, fontStyle: 'italic',
              fontSize: 26, color: theme.ink, lineHeight: 1.2, marginBottom: 8, textAlign: 'center',
              animation: 'fadein 0.6s both',
            }}>
              Peace be with you, {name.split(' ')[0]}.
            </div>
            <div style={{
              fontFamily: theme.fonts.body, fontStyle: 'italic', fontSize: 13,
              color: theme.inkSoft, lineHeight: 1.5, textAlign: 'center', marginBottom: 8,
              animation: 'fadein 0.6s 0.3s both',
            }}>
              We'll watch for you on Sunday.
            </div>
            <div style={{ ...smallCaps(theme, 9), color: theme.gold, textAlign: 'center', animation: 'fadein 0.6s 0.6s both' }}>
              † &nbsp; ANCIENT FAITH · OPEN DOORS · ABUNDANT LIFE &nbsp; †
            </div>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { useWelcomeFlow, WelcomeCard, WELCOME_KEY });