// Top ticker + nav + footer

const TICKER_ITEMS = [
  { label: "HOW TO", q: "build a 3-month emergency fund", meta: "PERSONAL · 6 MIN" },
  { label: "HOW TO", q: "read financial statements like a founder", meta: "BUSINESS · 9 MIN" },
  { label: "HOW TO", q: "negotiate a salary increase", meta: "PERSONAL · 7 MIN" },
  { label: "HOW TO", q: "price your services", meta: "BUSINESS · 8 MIN" },
  { label: "HOW TO", q: "eliminate credit card debt in 12 months", meta: "PERSONAL · 11 MIN" },
  { label: "HOW TO", q: "get approved for a business line of credit", meta: "BUSINESS · 10 MIN" },
  { label: "HOW TO", q: "start investing with $500", meta: "PERSONAL · 5 MIN" },
  { label: "HOW TO", q: "separate personal & business finances", meta: "BUSINESS · 6 MIN" },
];

function Ticker() {
  const rows = [...TICKER_ITEMS, ...TICKER_ITEMS];
  return (
    <div className="ticker">
      <div className="ticker__tag">HOW-TO FEED · LIVE</div>
      <div className="ticker__rail">
        <div className="ticker__track">
          {rows.map((t, i) => (
            <span key={i} className="ticker__item">
              <span className="ticker__q">{t.label} {t.q}</span>
              <span className="ticker__meta">{t.meta}</span>
              <span className="ticker__sep">◆</span>
            </span>
          ))}
        </div>
      </div>
      <div className="ticker__clock" id="tickerClock">—</div>
    </div>
  );
}

function Logo() {
  return (
    <a href="/" className="logo" aria-label="How To: Finance Edition">
      <span className="logo__mark" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="28" height="28">
          <rect x="1" y="1" width="22" height="22" fill="none" stroke="#013220" strokeWidth="1.5"/>
          <polyline points="3,17 8,12 12,14 16,8 21,5" fill="none" stroke="#013220" strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="miter"/>
          <circle cx="21" cy="5" r="1.7" fill="#99edc3" stroke="#013220" strokeWidth="1"/>
        </svg>
      </span>
      <span className="logo__text">
        <span className="logo__top">HOW TO:</span>
        <span className="logo__bot">FINANCE EDITION</span>
      </span>
    </a>
  );
}

function Nav({ lane, setLane }) {
  return (
    <header className="nav">
      <Logo />
      <nav className="nav__links">
        <a href="/personal/">Personal</a>
        <a href="/business/">Business</a>
        <a href="/">All Topics</a>
      </nav>
      <div className="nav__right">
        <div className="lane-toggle" role="tablist" aria-label="Choose lane">
          <button
            className={`lane-toggle__btn ${lane === "personal" ? "is-active" : ""}`}
            onClick={() => setLane("personal")}
          >
            <span className="lane-toggle__num">01</span>PERSONAL
          </button>
          <button
            className={`lane-toggle__btn ${lane === "business" ? "is-active" : ""}`}
            onClick={() => setLane("business")}
          >
            <span className="lane-toggle__num">02</span>BUSINESS
          </button>
        </div>
        <button className="nav__signin">Sign In</button>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer__top">
        <div className="footer__brand">
          <Logo />
          <p className="footer__desc">
            Part of The HowTo Network. Precise, plain-language answers for personal money and small-business finance.
          </p>
          <div className="footer__meta">
            <div><span className="k">SESSION</span><span className="v" id="fsess">—</span></div>
            <div><span className="k">VERSION</span><span className="v">2026.04</span></div>
            <div><span className="k">LANGS</span><span className="v">8</span></div>
          </div>
        </div>
        <div className="footer__col">
          <div className="footer__h">THE HOWTO NETWORK</div>
          <a href="https://thehowtonetwork.com">thehowtonetwork.com</a>
          <a href="https://howtohomeedition.com">Home Edition</a>
          <a href="https://howtofoodedition.com">Food Edition</a>
          <a href="https://howtobeautyedition.com">Beauty Edition</a>
          <a href="https://howtotraveledition.com">Travel Edition</a>
          <a href="https://howtotechedition.com">Tech Edition</a>
          <a href="https://howtofamilyedition.com">Family Edition</a>
        </div>
        <div className="footer__col">
          <div className="footer__h">LEGACY BRIDGE</div>
          <a href="https://thelegacybridge.com">thelegacybridge.com</a>
          <a href="https://theforges.app">The Forge</a>
          <a href="https://doorbase.app">DoorBase</a>
          <a href="https://thereadydocs.app">ReadyDocs</a>
          <a href="https://origencapital.co">Origen Capital</a>
        </div>
        <div className="footer__col">
          <div className="footer__h">FOLLOW</div>
          <a href="https://thehowtonetwork.com">thehowtonetwork.com</a>
        </div>
      </div>
      <div className="footer__disclaim">
        The content on HowTo Finance Edition is generated by Iris, an AI content engine, and is intended for general informational purposes only. It does not constitute financial, legal, investment, or tax advice. Always consult a licensed professional before acting on any material published here. HowTo Finance Edition and Legacy Bridge Holdings Atlanta, LLC make no representations or warranties regarding the accuracy or completeness of any content on this site.
      </div>
      <div className="footer__legal">
        <span>© 2026 Legacy Bridge Holdings Atlanta, LLC — All rights reserved.</span>
        <span className="footer__legal-right">
          <a>Disclaimer</a><a>Privacy Policy</a><a>Terms of Use</a><a>thehowtonetwork.com</a>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Ticker, Footer, Logo, TICKER_ITEMS });