/* Shared chrome — Switchboard nav + footer used across all pages.
   Nav adapts based on the visitor's chosen audience track (set by WelcomeGate / page visit).
   No member portal — TMRW does not run one publicly. */

const TRACK_LABELS = { broker: 'Broker', individual: 'Individual', employer: 'Employer' };

const SBNav = ({ active }) => {
  const [track, setTrack] = React.useState('broker');
  React.useEffect(() => {
    try { setTrack(localStorage.getItem('tmrw_track') || 'broker'); } catch (e) {}
  }, []);

  // Nav reorders so the visitor's chosen track is featured first.
  // Brokers track sees only Brokers + Insights + About (broker-only).
  // Individuals see Individuals + Employers + Insights + About.
  // Employers see Employers + Individuals + Insights + About.
  const orders = {
    broker:     [['brokers', 'For Brokers'], ['insights', 'Insights'], ['about', 'About']],
    individual: [['individuals', 'Plans'], ['employers', 'Employers'], ['insights', 'Insights'], ['about', 'About']],
    employer:   [['employers', 'For Employers'], ['individuals', 'Individuals'], ['insights', 'Insights'], ['about', 'About']],
  };
  const items = orders[track] || orders.broker;
  const ctaLabel =
    track === 'broker' ? 'Apply to refer'
    : track === 'employer' ? 'Book a benefits audit'
    : 'Get a plan comparison';

  return (
    <nav className="sb-nav">
      <a href="index.html" aria-label="TMRW Benefits — home">
        <img src="assets/logo.svg" alt="TMRW Benefits" className="tmrw-logo tmrw-logo--lg logo" />
      </a>
      <div className="links" role="navigation">
        {items.map(([key, label]) => (
          <a key={key} href={`${key}.html`} className={active === key ? 'active' : ''}>{label}</a>
        ))}
        <span style={{
          fontFamily: 'var(--f-mono)',
          fontSize: 11,
          letterSpacing: '0.1em',
          textTransform: 'uppercase',
          color: 'var(--tmrw-orange)',
          paddingLeft: 18,
          borderLeft: '1px solid rgba(255,255,255,0.12)',
        }} title="Switch your track">
          ● {TRACK_LABELS[track] || 'Visitor'} view
        </span>
        <button
          onClick={() => { try { localStorage.removeItem('tmrw_track'); sessionStorage.removeItem('tmrw_welcome_dismissed'); } catch(e){} location.href = 'index.html'; }}
          style={{
            background: 'transparent',
            color: 'rgba(255,255,255,0.5)',
            border: 'none',
            font: 'inherit',
            fontFamily: 'var(--f-mono)',
            fontSize: 11,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            cursor: 'pointer',
          }}
          aria-label="Switch audience track"
        >
          (switch)
        </button>
      </div>
      <a href="contact.html" className="cta" style={{textDecoration:'none'}}>{ctaLabel}</a>
    </nav>
  );
};

const SBFooter = () => (
  <footer className="sb-footer">
    <div className="ftr-top">
      <div className="ftr-brand">
        <img src="assets/logo.svg" alt="TMRW Benefits" className="tmrw-logo tmrw-logo--lg logo" />
        <p>A health insurance brokerage and a commissioned alternative to the ACA marketplace for independent brokers. New York metro HQ, licensed nationwide.</p>
        <div className="tel">
          <span>Direct line</span>
          <strong>646-634-0799</strong>
          <span>jesse@tmrwbenefits.com</span>
        </div>
      </div>
      <div>
        <h4>Audiences</h4>
        <ul>
          <li><a href="brokers.html">Brokers</a></li>
          <li><a href="individuals.html">Individuals</a></li>
          <li><a href="employers.html">Employers</a></li>
        </ul>
      </div>
      <div>
        <h4>Insights</h4>
        <ul>
          <li><a href="insights.html">All articles</a></li>
          <li><a href="insights.html">For brokers</a></li>
          <li><a href="insights.html">For employers</a></li>
        </ul>
      </div>
      <div>
        <h4>Compare</h4>
        <ul>
          <li><a href="individuals.html">Marketplace vs Private</a></li>
          <li><a href="employers.html">Funding models</a></li>
          <li><a href="brokers.html">TMRW vs other platforms</a></li>
        </ul>
      </div>
      <div>
        <h4>Company</h4>
        <ul>
          <li><a href="about.html">About Jesse</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li><a href="brokers.html">Broker referrals</a></li>
        </ul>
      </div>
    </div>
    <div className="ftr-bottom">
      <span>© 2026 TMRW Benefits · Licensed nationwide · Last reviewed 2026·05·06</span>
      <span>Author: Jesse, Principal Broker</span>
    </div>
  </footer>
);

/* JSON-LD schema injector. Pass an array of plain objects; they get stringified into <script type="application/ld+json">. */
const SBSchema = ({ blocks = [] }) => {
  React.useEffect(() => {
    const els = blocks.map((b) => {
      const s = document.createElement('script');
      s.type = 'application/ld+json';
      s.text = JSON.stringify(b);
      document.head.appendChild(s);
      return s;
    });
    return () => els.forEach(el => el.remove());
  }, [blocks]);
  return null;
};

window.SBNav = SBNav;
window.SBFooter = SBFooter;
window.SBSchema = SBSchema;