/* Inland Empire lander — page chrome: TopBar, Header, StickyCallBar, ExitModal */

function TopBar() {
  return (
    <div style={{ background: 'var(--ink)', color: '#fff' }}>
      <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 28, height: 38, flexWrap: 'wrap', overflow: 'hidden' }} className="topbar">
        {[
          ['radio', 'As heard on SoCal radio'],
          ['star', '149 Google reviews · 5.0'],
          ['shield-check', 'No fee unless we win'],
          ['clock', 'Answering 24/7'],
        ].map(([ic, tx], i) => (
          <span key={i} className={i > 1 ? 'topbar-hide' : ''} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 600, fontSize: 12, letterSpacing: '.1em', whiteSpace: 'nowrap' }}>
            <i data-lucide={ic} style={{ width: 15, height: 15, color: 'var(--red)', fill: ic === 'star' ? 'var(--red)' : 'none' }}></i>{tx}
          </span>
        ))}
      </Container>
    </div>
  );
}

function Header({ onForm }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', f); return () => window.removeEventListener('scroll', f);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50, background: 'rgba(255,255,255,.98)',
      backdropFilter: 'blur(6px)', borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      boxShadow: scrolled ? '0 4px 18px rgba(14,14,14,.08)' : 'none', transition: 'box-shadow .2s, border-color .2s',
    }}>
      <Container style={{ display: 'flex', alignItems: 'center', gap: 20, height: 72 }}>
        <a href="#top" style={{ cursor: 'pointer', display: 'flex', flexShrink: 0 }}>
          <img src="assets/logo-primary.webp" alt="1-800-HURT-123 · Attorney Big Al" style={{ height: 34 }} />
        </a>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 16 }}>
          <a href={`tel:${TEL}`} className="header-phone" style={{ textDecoration: 'none', textAlign: 'right', lineHeight: 1 }}>
            <span style={{ display: 'block', fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontSize: 11, letterSpacing: '.12em', color: 'var(--fg3)', marginBottom: 3 }}>Call 24/7 · Free</span>
            <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--ink)', whiteSpace: 'nowrap' }}>{PHONE}</span>
          </a>
          <button onClick={onForm} className="header-cta" style={{
            background: 'var(--red)', color: '#fff', border: 'none', cursor: 'pointer', borderRadius: 4,
            padding: '13px 22px', fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700,
            fontSize: 14, letterSpacing: '.05em', display: 'inline-flex', alignItems: 'center', gap: 9, boxShadow: 'var(--shadow-red)',
          }}>
            <i data-lucide="file-text" style={{ width: 17, height: 17 }}></i>Free Case Review
          </button>
          <a href={`tel:${TEL}`} className="header-call-mobile" style={{
            display: 'none', background: 'var(--red)', color: '#fff', borderRadius: 999, width: 46, height: 46,
            alignItems: 'center', justifyContent: 'center', textDecoration: 'none', boxShadow: 'var(--shadow-red)',
          }}>
            <i data-lucide="phone-call" style={{ width: 20, height: 20 }}></i>
          </a>
        </div>
      </Container>
    </header>
  );
}

function StickyCallBar({ onForm }) {
  return (
    <div className="sticky-call" style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 60, background: 'var(--ink)',
      display: 'none', alignItems: 'stretch', gap: 0, boxShadow: '0 -6px 22px rgba(0,0,0,.3)',
    }}>
      <a href={`tel:${TEL}`} style={{
        flex: 1, background: 'var(--red)', color: '#fff', textDecoration: 'none',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, padding: '15px 10px',
        fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700, fontSize: 16, letterSpacing: '.04em',
      }}>
        <i data-lucide="phone-call" style={{ width: 20, height: 20 }}></i>Call Now
      </a>
      <button onClick={onForm} style={{
        flex: 1, background: 'var(--ink)', color: '#fff', border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, padding: '15px 10px',
        fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700, fontSize: 16, letterSpacing: '.04em',
      }}>
        <i data-lucide="file-text" style={{ width: 19, height: 19, color: 'var(--red)' }}></i>Free Review
      </button>
    </div>
  );
}

function ExitModal() {
  const [open, setOpen] = useState(false);
  const fired = useRef(false);
  useEffect(() => {
    if (sessionStorage.getItem('ie_exit_seen')) { fired.current = true; return; }
    const onLeave = (e) => {
      if (fired.current) return;
      if (e.clientY <= 0) { fired.current = true; setOpen(true); sessionStorage.setItem('ie_exit_seen', '1'); }
    };
    document.addEventListener('mouseout', onLeave);
    return () => document.removeEventListener('mouseout', onLeave);
  }, []);
  if (!open) return null;
  return (
    <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(0,0,0,.78)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: 'var(--ink)', color: '#fff', borderRadius: 10, maxWidth: 480, width: '100%', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', position: 'relative' }}>
        <button onClick={() => setOpen(false)} style={{ position: 'absolute', top: 14, right: 14, background: 'transparent', border: 'none', color: 'var(--fg-on-dark-2)', cursor: 'pointer' }}>
          <i data-lucide="x" style={{ width: 24, height: 24 }}></i>
        </button>
        <div style={{ height: 6, background: 'var(--red)' }}></div>
        <div style={{ padding: '40px 38px 38px', textAlign: 'center' }}>
          <Eyebrow style={{ justifyContent: 'center' }}>Before you go</Eyebrow>
          <h3 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2rem,6vw,2.8rem)', lineHeight: .92, margin: '14px 0 12px' }}>
            Don't talk to<br />insurance first.
          </h3>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.55, color: 'var(--fg-on-dark-2)', maxWidth: 360, margin: '0 auto 26px' }}>
            One phone call protects your claim. Free, confidential, and no fee unless we win your case.
          </p>
          <PhoneButton block big sub="Talk to us now · 24/7" />
          <button onClick={() => setOpen(false)} style={{ marginTop: 18, background: 'transparent', border: 'none', color: 'var(--fg3)', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 14, textDecoration: 'underline' }}>
            No thanks, I'll handle it myself
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TopBar, Header, StickyCallBar, ExitModal });