// intro-banner.jsx — top-of-screen lightweight intro for first-time visitors
// Shows once per session (localStorage flag), auto-dismisses after 8s, has a
// 'Learn more' that opens a slim about-overlay. Slides down from top, never
// blocks content. aria-live="polite", manual dismiss with ESC + close button.

function IntroBanner({ accent }) {
  const { t } = useT();
  const [visible, setVisible] = React.useState(false);
  const [aboutOpen, setAboutOpen] = React.useState(false);

  React.useEffect(() => {
    try {
      if (sessionStorage.getItem('ruu.intro.dismissed') === '1') return;
    } catch (e) {}
    // Defer until first paint settles so the slide-down feels intentional
    const t1 = setTimeout(() => setVisible(true), 900);
    return () => clearTimeout(t1);
  }, []);

  React.useEffect(() => {
    if (!visible) return;
    // Auto-dismiss after 8s unless the user opened the about panel
    const t1 = setTimeout(() => { if (!aboutOpen) dismiss(); }, 8000);
    function onKey(e) { if (e.key === 'Escape') { setAboutOpen(false); dismiss(); } }
    document.addEventListener('keydown', onKey);
    return () => { clearTimeout(t1); document.removeEventListener('keydown', onKey); };
  }, [visible, aboutOpen]);

  function dismiss() {
    try { sessionStorage.setItem('ruu.intro.dismissed', '1'); } catch (e) {}
    setVisible(false);
    setAboutOpen(false);
  }

  if (!visible) return null;

  return (
    <>
      {/* Top banner — slim slide-down */}
      <div
        role="status"
        aria-live="polite"
        style={{
          position: 'fixed', top: 0, left: 0, right: 0, zIndex: 90,
          background: 'var(--ink)', color: 'var(--paper)',
          borderBottom: '2px solid ' + accent,
          padding: '10px 18px',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
          fontFamily: 'var(--sans)', fontSize: 13,
          animation: 'ruu-banner-down .45s cubic-bezier(.3,1.2,.4,1) both',
          boxShadow: '0 8px 24px rgba(0,0,0,.12)',
        }}>
        <span style={{ display: 'inline-flex', width: 22, height: 22, borderRadius: '50%', background: accent, color: 'var(--ink)', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontSize: 13, flexShrink: 0 }}>r</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, maxWidth: 760 }}>
          <strong style={{ fontWeight: 600 }}>{t('intro.banner.brand')}</strong>
          <span style={{ opacity: .85 }}>{t('intro.banner.body')}</span>
        </span>
        <button
          onClick={() => setAboutOpen(true)}
          style={{
            background: accent, color: 'var(--ink)', border: 0,
            padding: '6px 12px', borderRadius: 6, cursor: 'pointer',
            fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 700,
            letterSpacing: '0.04em', textTransform: 'uppercase', flexShrink: 0,
          }}>{t('intro.banner.more')}</button>
        <button
          onClick={dismiss}
          aria-label={t('intro.banner.dismiss')}
          style={{
            background: 'transparent', color: 'rgba(245,243,236,.65)', border: 0,
            cursor: 'pointer', padding: 4, marginLeft: 4, flexShrink: 0,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
          </svg>
        </button>
      </div>

      {/* About overlay — opens from the banner */}
      {aboutOpen && (
        <div role="dialog" aria-modal="true" onClick={dismiss} style={{
          position: 'fixed', inset: 0, zIndex: 100,
          background: 'rgba(20,22,18,.55)', backdropFilter: 'blur(4px)',
          display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
          padding: '70px 18px 24px',
          animation: 'ruu-fade-up .25s ease-out',
        }}>
          <div onClick={(e) => e.stopPropagation()} style={{
            background: 'var(--paper)', color: 'var(--ink)',
            border: '2px solid var(--ink)', borderRadius: 16,
            boxShadow: '6px 6px 0 var(--ink)',
            maxWidth: 540, width: '100%', padding: '28px 28px 22px',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
              <span className="stamp" style={{ background: accent, borderColor: 'var(--ink)' }}>{t('intro.about.kicker')}</span>
              <button onClick={dismiss} aria-label={t('intro.banner.dismiss')} style={{
                width: 32, height: 32, borderRadius: 8, border: '2px solid var(--ink)',
                background: 'var(--paper)', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
              </button>
            </div>
            <h2 className="serif" style={{ fontSize: 32, lineHeight: 1.05, letterSpacing: '-0.022em', margin: '0 0 12px' }}>
              {t('intro.about.title.a')} <span className="ital hl">{t('intro.about.title.hl')}</span>
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)', margin: '0 0 16px' }}>
              {t('intro.about.body.p1')}
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)', margin: '0 0 20px' }}>
              {t('intro.about.body.p2')}
            </p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <button onClick={() => { dismiss(); navigate('/start'); }} className="btn btn-accent" style={{ padding: '12px 18px', minHeight: 48 }}>
                <span>{t('intro.about.cta.primary')}</span><span className="arrow">→</span>
              </button>
              <button onClick={() => { dismiss(); navigate('/tools'); }} style={{
                background: 'transparent', color: 'var(--ink)', border: '2px solid var(--ink)',
                padding: '12px 18px', borderRadius: 10, cursor: 'pointer',
                fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 500, minHeight: 48,
              }}>
                {t('intro.about.cta.secondary')}
              </button>
            </div>
            <div className="mono" style={{ marginTop: 18, paddingTop: 14, borderTop: '1px dashed var(--rule)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>
              {t('intro.about.footer')}
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { IntroBanner });