// PHAROS — layout chrome: Utility strip, Nav, SectionHead, Footer
const { useState, useEffect, useContext, createContext } = React;

const LangCtx = createContext({ t: window.I18N.ua, lang: "ua", setLang: () => {} });
window.LangCtx = LangCtx;

// ---------- Top utility strip ----------
function Utility({ lang }) {
  const { t } = useContext(LangCtx);
  const fmtTime = () => {
    const d = new Date();
    const opts = { hour: "2-digit", minute: "2-digit", hour12: false };
    return {
      ry: d.toLocaleTimeString("en-GB", { ...opts, timeZone: "Asia/Riyadh" }),
      va: d.toLocaleTimeString("en-GB", { ...opts, timeZone: "Europe/Madrid" }),
      ky: d.toLocaleTimeString("en-GB", { ...opts, timeZone: "Europe/Kyiv" }),
    };
  };
  const [time, setTime] = useState(fmtTime);
  useEffect(() => {
    const id = setInterval(() => setTime(fmtTime()), 30 * 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="utility" role="complementary" aria-label={t.ui.utility_label}>
      <div className="utility-inner">
        <div className="utility-row" aria-label={t.ui.times_label}>
          <span><abbr title="Riyadh">RYD</abbr> · <time>{time.ry}</time></span>
          <span><abbr title="Valencia">VLC</abbr> · <time>{time.va}</time></span>
          <span><abbr title="Kyiv">KYV</abbr> · <time>{time.ky}</time></span>
        </div>
        <div className="utility-row">
          <span>{t.ui.threshold}</span>
        </div>
      </div>
    </div>
  );
}
window.Utility = Utility;

// ---------- Nav ----------
function Nav({ lang, setLang }) {
  const { t } = useContext(LangCtx);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const items = [
    ["#approach", t.nav.approach],
    ["#industries", t.nav.industries],
    ["#team", t.nav.team],
    ["#cases", t.nav.cases],
    ["#contact", t.nav.contact],
  ];
  return (
    <header className="nav" role="banner">
      <div className="nav-inner">
        <a href="#top" className="brand" aria-label="Pharos Advisory — home" onClick={() => setMenuOpen(false)}>
          <span className="brand-mark" aria-hidden="true">P</span>
          <span className="brand-word">Pharos Advisory</span>
        </a>
        <nav className="nav-links" aria-label={t.ui.nav_primary}>
          {items.map(([href, label]) => <a key={href} href={href}>{label}</a>)}
        </nav>
        <div className="lang-switch" role="group" aria-label={t.ui.lang_select}>
          <button type="button" onClick={() => setLang("ua")} className={lang === "ua" ? "is-on" : ""} aria-pressed={lang === "ua"} aria-label="Українська" lang="uk">UA</button>
          <span aria-hidden="true">/</span>
          <button type="button" onClick={() => setLang("en")} className={lang === "en" ? "is-on" : ""} aria-pressed={lang === "en"} aria-label="English" lang="en">EN</button>
        </div>
        <button
          type="button"
          className="nav-burger"
          aria-expanded={menuOpen}
          aria-controls="nav-mobile"
          aria-label={menuOpen ? t.ui.menu_close : t.ui.menu_open}
          onClick={() => setMenuOpen(o => !o)}
        >
          <span className="nav-burger-bars" aria-hidden="true"><span /></span>
        </button>
      </div>
      <nav
        id="nav-mobile"
        className={`nav-mobile ${menuOpen ? "is-open" : ""}`}
        aria-label={t.ui.nav_mobile}
        aria-hidden={!menuOpen}
      >
        {items.map(([href, label]) => (
          <a key={href} href={href} onClick={() => setMenuOpen(false)}>
            <span>{label}</span>
            <span className="arrow" aria-hidden="true">→</span>
          </a>
        ))}
      </nav>
    </header>
  );
}
window.Nav = Nav;

// ---------- Section header (shared) ----------
function SectionHead({ index, eyebrow, h2, lede }) {
  const { t } = useContext(LangCtx);
  return (
    <div className="sec-head">
      <div className="sec-head-meta">
        <span className="mono">{t.section_no[index - 1]}</span>
        <span className="mono mono--dim">{eyebrow}</span>
      </div>
      <div>
        <Reveal as="h2" className="sec-h2">{h2}</Reveal>
        {lede && <Reveal delay={120} as="p" className="sec-lede">{lede}</Reveal>}
      </div>
    </div>
  );
}
window.SectionHead = SectionHead;

// ---------- Footer ----------
function Footer({ brand, lang, setLang }) {
  const { t } = useContext(LangCtx);
  return (
    <footer className="footer" role="contentinfo">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="brand" aria-label="Pharos Advisory">
              <span className="brand-mark" aria-hidden="true">P</span>
              <span className="brand-word">Pharos Advisory</span>
            </div>
            <div className="footer-tag">{t.footer.tag}</div>
          </div>
          <div className="footer-addrs">
            {t.footer.addr.map(([city, line], i) => (
              <div className="footer-addr" key={i}>
                <div className="footer-addr-name">{city}</div>
                <div>{line}</div>
              </div>
            ))}
          </div>
          <nav className="footer-links" aria-label={t.ui.nav_footer}>
            <a href="mailto:hello@pharos-advisory.org">hello@pharos-advisory.org</a>
            <a href="#" rel="external">{t.footer.linkedin}</a>
            <div className="lang-switch lang-switch--footer" role="group" aria-label={t.ui.lang_select}>
              <button type="button" onClick={() => setLang("ua")} className={lang === "ua" ? "is-on" : ""} aria-pressed={lang === "ua"} aria-label="Українська" lang="uk">UA</button>
              <span aria-hidden="true">/</span>
              <button type="button" onClick={() => setLang("en")} className={lang === "en" ? "is-on" : ""} aria-pressed={lang === "en"} aria-label="English" lang="en">EN</button>
            </div>
          </nav>
        </div>
        <div className="footer-disclosure">
          <p>{t.footer.disclosure}</p>
          <p>{t.footer.licence}</p>
        </div>
        <div className="footer-legal mono">
          <span>{t.footer.legal}</span>
          <nav className="footer-legal-links" aria-label={t.ui.nav_legal}>
            <a href="privacy.html">{t.footer.privacy}</a>
            <a href="terms.html">{t.footer.terms}</a>
          </nav>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;