/* Welcome routing modal — first-touch audience splitter */

const WelcomeModal = ({ onClose }) => {
  const [hover, setHover] = React.useState(null);

  const overlay = {
    position: 'fixed', inset: 0, zIndex: 1000,
    background: 'rgba(20,20,20,0.78)',
    backdropFilter: 'blur(8px)',
    WebkitBackdropFilter: 'blur(8px)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: 24,
    animation: 'wm-fade 280ms ease',
  };
  const sheet = {
    width: 'min(960px, 100%)',
    background: '#fff',
    border: '1px solid #ddd',
    boxShadow: '0 30px 80px rgba(0,0,0,0.35)',
    overflow: 'hidden',
    animation: 'wm-rise 320ms cubic-bezier(.2,.8,.2,1)',
    fontFamily: 'var(--f-body)',
  };
  const head = {
    padding: '24px 32px',
    borderBottom: '1px solid #eee',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    background: '#202020',
    color: 'white',
  };
  const headLeft = {
    fontFamily: 'var(--f-mono)',
    fontSize: 11,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    color: 'var(--tmrw-orange)',
    display: 'flex',
    alignItems: 'center',
    gap: 12,
  };
  const dot = { width: 8, height: 8, background: 'var(--tmrw-orange)', borderRadius: 999, animation: 'wm-pulse 1.5s ease infinite' };
  const closeBtn = {
    background: 'transparent',
    color: 'rgba(255,255,255,0.6)',
    border: 'none',
    fontFamily: 'var(--f-mono)',
    fontSize: 11,
    letterSpacing: '0.1em',
    textTransform: 'uppercase',
    cursor: 'pointer',
    padding: '6px 10px',
  };
  const title = {
    fontFamily: 'var(--f-display)',
    fontSize: 36,
    fontWeight: 600,
    letterSpacing: '-0.025em',
    lineHeight: 1.05,
    color: '#202020',
    padding: '40px 32px 8px',
    margin: 0,
    textWrap: 'balance',
  };
  const sub = {
    padding: '0 32px 32px',
    fontSize: 15.5,
    color: '#555',
    maxWidth: '60ch',
  };
  const grid = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1px solid #eee' };
  const cardBase = (active) => ({
    padding: '40px 32px 36px',
    cursor: 'pointer',
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    background: active ? 'var(--tmrw-orange)' : 'white',
    color: active ? 'white' : '#202020',
    transition: 'background 200ms ease, color 200ms ease',
    borderRight: '1px solid #eee',
    position: 'relative',
    minHeight: 280,
  });
  const num = (active) => ({
    fontFamily: 'var(--f-mono)',
    fontSize: 11,
    letterSpacing: '0.12em',
    color: active ? 'rgba(255,255,255,0.85)' : 'var(--tmrw-orange)',
  });
  const cardH = {
    fontFamily: 'var(--f-display)',
    fontSize: 26,
    fontWeight: 600,
    letterSpacing: '-0.02em',
    lineHeight: 1.15,
    margin: 0,
  };
  const cardP = (active) => ({
    fontSize: 14.5,
    lineHeight: 1.55,
    color: active ? 'rgba(255,255,255,0.92)' : '#555',
    margin: 0,
  });
  const cta = (active) => ({
    marginTop: 'auto',
    paddingTop: 24,
    fontFamily: 'var(--f-mono)',
    fontSize: 11,
    letterSpacing: '0.1em',
    textTransform: 'uppercase',
    color: active ? 'white' : 'var(--tmrw-orange)',
    display: 'flex', alignItems: 'center', gap: 10,
  });

  const skipRow = {
    padding: '20px 32px',
    background: '#fafafa',
    borderTop: '1px solid #eee',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    fontFamily: 'var(--f-mono)',
    fontSize: 11,
    letterSpacing: '0.1em',
    textTransform: 'uppercase',
    color: '#828282',
  };
  const skipLink = { color: '#202020', textDecoration: 'underline', cursor: 'pointer', background: 'none', border: 'none', font: 'inherit', letterSpacing: 'inherit', textTransform: 'inherit' };

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow || '';
    };
  }, [onClose]);

  return (
    <div style={overlay} onClick={onClose} role="dialog" aria-modal="true" aria-labelledby="wm-title">
      <style>{`
        @keyframes wm-fade { from { opacity: 0 } to { opacity: 1 } }
        @keyframes wm-rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
        @keyframes wm-pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.6); opacity: 0.55 } }
        .wm-card:hover .wm-arrow { transform: translateX(6px); }
        .wm-arrow { transition: transform 220ms ease; display: inline-block; }
      `}</style>
      <div style={sheet} onClick={(e) => e.stopPropagation()}>
        <div style={head}>
          <div style={headLeft}>
            <span style={dot}></span>
            <span>● Welcome to TMRW · pick your track</span>
          </div>
          <button style={closeBtn} onClick={onClose} aria-label="Close">Close ✕</button>
        </div>

        <h2 id="wm-title" style={title}>Are you a broker, or shopping for coverage?</h2>
        <p style={sub}>Two different products, two different pages. Tell us once and we'll route you to the right place.</p>

        <div style={grid}>
          <a
            href="brokers.html"
            className="wm-card"
            style={cardBase(hover === 'broker')}
            onMouseEnter={() => setHover('broker')}
            onMouseLeave={() => setHover(null)}
            onClick={() => { try { localStorage.setItem('tmrw_track', 'broker'); } catch(e){} }}
          >
            <span style={num(hover === 'broker')}>● 01 / FOR BROKERS</span>
            <h3 style={cardH}>I'm an independent broker.</h3>
            <p style={cardP(hover === 'broker')}>I'd like to monetize the marketplace clients I currently send to Healthcare.gov for free. Show me the referral program.</p>
            <span style={cta(hover === 'broker')}>See referral program <span className="wm-arrow">→</span></span>
          </a>

          <a
            href="individuals.html"
            className="wm-card"
            style={{...cardBase(hover === 'individual'), borderRight: 'none'}}
            onMouseEnter={() => setHover('individual')}
            onMouseLeave={() => setHover(null)}
            onClick={() => { try { localStorage.setItem('tmrw_track', 'individual'); } catch(e){} }}
          >
            <span style={num(hover === 'individual')}>● 02 / FOR YOU</span>
            <h3 style={cardH}>I'm shopping for coverage.</h3>
            <p style={cardP(hover === 'individual')}>I'm self-employed, 1099, freelance, or running a small company — and I want a real plan comparison from a human.</p>
            <span style={cta(hover === 'individual')}>See plans + pricing <span className="wm-arrow">→</span></span>
          </a>
        </div>

        <div style={skipRow}>
          <span>Employer with 2–200+ staff? <a href="employers.html" style={{color:'var(--tmrw-orange)', textDecoration:'underline'}}>Go to employers →</a></span>
          <button style={skipLink} onClick={onClose}>Skip · just browse</button>
        </div>
      </div>
    </div>
  );
};

const WelcomeGate = ({ force = false }) => {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    if (force) { setOpen(true); return; }
    let seen = false;
    try { seen = !!localStorage.getItem('tmrw_track') || !!sessionStorage.getItem('tmrw_welcome_dismissed'); } catch (e) {}
    if (!seen) {
      const t = setTimeout(() => setOpen(true), 600);
      return () => clearTimeout(t);
    }
  }, [force]);

  const close = () => {
    try { sessionStorage.setItem('tmrw_welcome_dismissed', '1'); } catch (e) {}
    setOpen(false);
  };

  if (!open) return null;
  return <WelcomeModal onClose={close} />;
};

window.WelcomeModal = WelcomeModal;
window.WelcomeGate = WelcomeGate;