/* CIRG website — shared UI: header, footer, cookie banner, helpers. Exported to window. */

/* Font Awesome 6 (Free, Solid + Brands) — the design system's icon vocabulary.
   Map the lucide names used across the content onto FA glyph classes. */
const FA_ICONS = {
  "arrow-right": "fa-solid fa-arrow-right", "arrow-up-right": "fa-solid fa-arrow-up-right-from-square",
  "atom": "fa-solid fa-atom", "bar-chart-3": "fa-solid fa-chart-column", "bot": "fa-solid fa-robot",
  "box": "fa-solid fa-box", "briefcase": "fa-solid fa-briefcase", "building-2": "fa-solid fa-building",
  "calendar": "fa-solid fa-calendar", "calendar-range": "fa-solid fa-calendar-days", "check": "fa-solid fa-check",
  "check-circle-2": "fa-solid fa-circle-check", "chevron-down": "fa-solid fa-chevron-down",
  "chevron-right": "fa-solid fa-chevron-right", "circle-dot": "fa-solid fa-circle-dot", "compass": "fa-solid fa-compass",
  "cookie": "fa-solid fa-cookie-bite", "cpu": "fa-solid fa-microchip", "door-open": "fa-solid fa-door-open",
  "download": "fa-solid fa-download", "eye": "fa-solid fa-eye", "facebook": "fa-brands fa-facebook-f",
  "file-bar-chart": "fa-solid fa-file-lines", "file-check-2": "fa-solid fa-file-circle-check",
  "file-text": "fa-solid fa-file-lines", "flag": "fa-solid fa-flag", "gift": "fa-solid fa-gift",
  "globe": "fa-solid fa-globe", "graduation-cap": "fa-solid fa-graduation-cap", "hammer": "fa-solid fa-hammer",
  "hand-heart": "fa-solid fa-hand-holding-heart", "handshake": "fa-solid fa-handshake",
  "hard-hat": "fa-solid fa-helmet-safety", "heart": "fa-solid fa-heart", "heart-handshake": "fa-solid fa-handshake-angle",
  "home": "fa-solid fa-house", "info": "fa-solid fa-circle-info", "layers": "fa-solid fa-layer-group",
  "lightbulb": "fa-solid fa-lightbulb", "line-chart": "fa-solid fa-chart-line", "linkedin": "fa-brands fa-linkedin-in",
  "lock": "fa-solid fa-lock", "log-in": "fa-solid fa-right-to-bracket", "mail": "fa-solid fa-envelope",
  "map-pin": "fa-solid fa-location-dot", "megaphone": "fa-solid fa-bullhorn", "menu": "fa-solid fa-bars",
  "network": "fa-solid fa-diagram-project", "newspaper": "fa-solid fa-newspaper", "folder-kanban": "fa-solid fa-table-columns",
  "phone": "fa-solid fa-phone", "pie-chart": "fa-solid fa-chart-pie", "rocket": "fa-solid fa-rocket",
  "rotate-ccw": "fa-solid fa-rotate-left", "scale": "fa-solid fa-scale-balanced", "scroll-text": "fa-solid fa-scroll",
  "search": "fa-solid fa-magnifying-glass", "send": "fa-brands fa-telegram", "settings": "fa-solid fa-gear",
  "shield": "fa-solid fa-shield-halved", "shield-check": "fa-solid fa-shield-halved",
  "sparkles": "fa-solid fa-wand-magic-sparkles", "sprout": "fa-solid fa-seedling", "store": "fa-solid fa-store",
  "target": "fa-solid fa-bullseye", "text-quote": "fa-solid fa-quote-left", "trending-up": "fa-solid fa-arrow-trend-up",
  "underline": "fa-solid fa-underline", "user": "fa-solid fa-user", "user-check": "fa-solid fa-user-check",
  "users": "fa-solid fa-users", "wallet": "fa-solid fa-wallet", "wrench": "fa-solid fa-wrench",
  "x": "fa-solid fa-xmark", "youtube": "fa-brands fa-youtube", "accessibility": "fa-solid fa-universal-access",
};

function Icon({ name, size = 20, color, style, className }) {
  const fa = FA_ICONS[name] || ("fa-solid fa-" + name);
  return <i className={(className ? className + " " : "") + fa} aria-hidden="true"
    style={{ fontSize: size, width: "1em", height: "1em", lineHeight: 1, color, display: "inline-flex", alignItems: "center", justifyContent: "center", ...style }}></i>;
}

const ACCENT = {
  blue:   { soft: "var(--color-bg-soft-blue)",   fg: "var(--color-action-blue)" },
  amber:  { soft: "var(--color-donate-soft)",    fg: "var(--color-donate)" },
  teal:   { soft: "var(--color-volunteer-soft)", fg: "var(--color-volunteer)" },
  violet: { soft: "var(--color-knowledge-soft)", fg: "var(--color-knowledge)" },
};

function LangSwitch({ lang, setLang }) {
  return (
    <div className="lang" role="group" aria-label="Language / Мова">
      <button className={lang === "uk" ? "on" : ""} aria-pressed={lang === "uk"} onClick={() => setLang("uk")} lang="uk">UA</button>
      <button className={lang === "en" ? "on" : ""} aria-pressed={lang === "en"} onClick={() => setLang("en")} lang="en">EN</button>
    </div>
  );
}

function MegaDropdown({ t, go, close, onEnter, onLeave }) {
  return (
    <div className="dropdown dd-mega" onMouseEnter={onEnter} onMouseLeave={onLeave}>
      <div className="dd-grid">
        {t.directions.items.map((d) => {
          const a = ACCENT[d.accent] || ACCENT.blue;
          return (
            <button key={d.n} className="dd-entry" onClick={() => { close(); go("directions"); }}>
              <span className="dd-ic" style={{ background: a.soft, color: a.fg }}><Icon name={d.icon} size={18} /></span>
              <span className="dd-txt"><span className="dd-title">{d.title}</span><span className="dd-sub">{d.who}</span></span>
            </button>
          );
        })}
      </div>
      <button className="dd-foot" onClick={() => { close(); go("directions"); }}>{t.directions.intro.title}<Icon name="arrow-right" size={15} /></button>
    </div>
  );
}

function ListDropdown({ items, route, go, close, onEnter, onLeave }) {
  return (
    <div className="dropdown dd-list" onMouseEnter={onEnter} onMouseLeave={onLeave}>
      <div className="dd-rows">
        {items.map(([id, title, icon]) => (
          <button key={id} className={"dd-entry" + (route === id ? " active" : "")} aria-current={route === id ? "page" : undefined} onClick={() => { close(); go(id); }}>
            <span className="dd-ic" style={{ background: ACCENT.blue.soft, color: ACCENT.blue.fg }}><Icon name={icon} size={17} /></span>
            <span className="dd-txt"><span className="dd-title">{title}</span></span>
          </button>
        ))}
      </div>
    </div>
  );
}

function NavMenu({ t, route, go, items, className, lang }) {
  const [openId, setOpenId] = React.useState(null);
  const timer = React.useRef(null);
  const show = (id) => { clearTimeout(timer.current); setOpenId(id); };
  const hide = () => { timer.current = setTimeout(() => setOpenId(null), 160); };
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [openId]);
  const groupActive = (g) => {
    if (route === g.id) return true;
    if (g.mega && route === "directions") return true;
    if (g.items) return g.items.some((it) => it[0] === route);
    return false;
  };
  return (
    <nav className={className} aria-label={lang === "en" ? "Main navigation" : "Основна навігація"}>
      {items.map((n) => {
        const hasDD = n.mega || (n.items && n.items.length);
        if (!hasDD) {
          return <button key={n.id} className={"hdr-link" + (route === n.id ? " active" : "")} aria-current={route === n.id ? "page" : undefined} onClick={() => go(n.id)}>{n.label}</button>;
        }
        const open = openId === n.id;
        const close = () => setOpenId(null);
        return (
          <div key={n.id} className="hdr-item" onMouseEnter={() => show(n.id)} onMouseLeave={hide}>
            <button className={"hdr-link has-dd" + (groupActive(n) ? " active" : "") + (open ? " open" : "")} aria-expanded={open} aria-haspopup="true" onClick={() => (open ? close() : show(n.id))}>
              {n.label}<Icon name="chevron-down" size={15} className="dd-caret" />
            </button>
            {open ? (n.mega
              ? <MegaDropdown t={t} go={go} close={close} onEnter={() => show(n.id)} onLeave={hide} />
              : <ListDropdown items={n.items} route={route} go={go} close={close} onEnter={() => show(n.id)} onLeave={hide} />
            ) : null}
          </div>
        );
      })}
    </nav>
  );
}

function SiteHeader({ t, lang, setLang, route, go, onBurger, navLayout = "grouped", headerCtas = "full", sticky = true }) {
  const logo = lang === "en" ? "assets/logo-cirg-en.png" : "assets/logo-cirg-ua.png";
  const row = navLayout === "row";
  return (
    <header className={"hdr" + (row ? " hdr-tworow" : "")} style={{ position: sticky ? undefined : "static" }}>
      <div className="container hdr-in">
        <button className="hdr-logo" onClick={() => go("home")} aria-label="ЦІРГ / CIRG — home">
          <img src={logo} alt="ЦІРГ — Центр інноваційного розвитку громад" />
        </button>
        {!row ? <NavMenu t={t} route={route} go={go} items={t.navGroups} className="hdr-nav" lang={lang} /> : <span style={{ flex: 1 }} />}
        <div className="hdr-right">
          <LangSwitch lang={lang} setLang={setLang} />
          {headerCtas !== "compact" ? <button className="btn btn-secondary btn-sm hdr-cta-desktop" onClick={() => go("partners")}>{t.cta.partner}</button> : null}
          <button className="btn btn-donate btn-sm hdr-cta-desktop" onClick={() => go("donate")}>{t.cta.support}</button>
          <button className="hdr-burger" aria-label={t.ui.menu} onClick={onBurger}><Icon name="menu" /></button>
        </div>
      </div>
      {row ? (
        <div className="hdr-row2">
          <div className="container">
            <NavMenu t={t} route={route} go={go} items={t.nav} className="hdr-nav hdr-nav-row" lang={lang} />
          </div>
        </div>
      ) : null}
    </header>
  );
}

function MobileDrawer({ t, lang, setLang, route, go, onClose, navLayout = "grouped" }) {
  const grouped = navLayout !== "row";
  const findGroup = () => {
    if (!grouped) return null;
    const g = t.navGroups.find((gr) => gr.items && gr.items.some((it) => it[0] === route));
    return g ? g.id : null;
  };
  const [openId, setOpenId] = React.useState(findGroup);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, []);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [openId]);
  const logo = lang === "en" ? "assets/logo-cirg-en.png" : "assets/logo-cirg-ua.png";

  const go2 = (id) => { go(id); onClose(); };

  return (
    <div className="drawer-scrim" onClick={onClose}>
      <div className="drawer" role="dialog" aria-modal="true" aria-label={t.ui.menu} onClick={(e) => e.stopPropagation()}>
        <div className="drawer-top">
          <img src={logo} alt="ЦІРГ" />
          <button className="drawer-close" aria-label={t.ui.close} onClick={onClose}><Icon name="x" /></button>
        </div>
        <nav className="drawer-nav" aria-label={lang === "en" ? "Main navigation" : "Основна навігація"}>
          {grouped ? t.navGroups.map((g) => {
            const hasItems = g.items && g.items.length;
            if (!hasItems) {
              const active = route === g.id || (g.mega && route === "directions");
              return <button key={g.id} className={active ? "active" : ""} aria-current={active ? "page" : undefined} onClick={() => go2(g.mega ? "directions" : g.id)}>{g.label}</button>;
            }
            const open = openId === g.id;
            const groupActive = g.items.some((it) => it[0] === route);
            return (
              <div key={g.id} className="drawer-group">
                <button className={"drawer-acc" + (open ? " open" : "") + (groupActive ? " active" : "")} aria-expanded={open} onClick={() => setOpenId(open ? null : g.id)}>
                  <span>{g.label}</span><Icon name="chevron-down" size={18} className="acc-caret" />
                </button>
                {open ? (
                  <div className="drawer-sub">
                    {g.items.map(([id, title, icon]) => (
                      <button key={id} className={route === id ? "active" : ""} aria-current={route === id ? "page" : undefined} onClick={() => go2(id)}>
                        <Icon name={icon} size={16} />{title}
                      </button>
                    ))}
                  </div>
                ) : null}
              </div>
            );
          }) : t.nav.map((n) => (
            <button key={n.id} className={route === n.id ? "active" : ""} aria-current={route === n.id ? "page" : undefined} onClick={() => go2(n.id)}>{n.label}</button>
          ))}
        </nav>
        <div className="drawer-cta">
          <LangSwitch lang={lang} setLang={setLang} />
          <button className="btn btn-primary" onClick={() => go2("partners")}>{t.cta.partner}</button>
          <button className="btn btn-donate" onClick={() => go2("donate")}>{t.cta.support}</button>
        </div>
      </div>
    </div>
  );
}

function SectionHead({ eyebrow, title, lead, center, icon = "circle-dot" }) {
  return (
    <div className={"section-head" + (center ? " center" : "")}>
      {eyebrow ? <div className="eyebrow"><Icon name={icon} size={14} />{eyebrow}</div> : null}
      <h2 style={{ marginTop: eyebrow ? 14 : 0 }}>{title}</h2>
      {lead ? <p className="lead" style={{ marginBottom: 0 }}>{lead}</p> : null}
    </div>
  );
}

function PageIntro({ t, crumb, eyebrow, title, lead, go, backTo, backLabel }) {
  return (
    <section className="page-intro section-sm">
      <div className="container">
        <div className="crumb">
          <button onClick={() => go("home")}>{t.ui.breadcrumbHome}</button> / {backTo ? <><button onClick={() => go(backTo)}>{backLabel}</button> / </> : null}<b>{crumb}</b>
        </div>
        {eyebrow ? <div className="eyebrow"><Icon name="circle-dot" size={14} />{eyebrow}</div> : null}
        <h1 style={{ marginTop: 12, fontSize: "var(--fs-h1)", maxWidth: 900 }}>{title}</h1>
        {lead ? <p className="lead" style={{ maxWidth: 760, marginBottom: 0 }}>{lead}</p> : null}
      </div>
    </section>
  );
}

function Notice({ text, tone, icon = "info" }) {
  return (
    <div className={"notice" + (tone ? " " + tone : "")} role="note">
      <span className="ic"><Icon name={icon} size={20} /></span>
      <p>{text}</p>
    </div>
  );
}

function EmptyState({ icon = "inbox", text }) {
  return (
    <div className="card empty-state">
      <span className="ic"><Icon name={icon} size={28} /></span>
      <p style={{ margin: 0, fontSize: 15.5 }}>{text}</p>
    </div>
  );
}

function CardCover({ t, id, label, h = 168, shape = "rounded" }) {
  return (
    <div className="card-cover" style={{ height: h }}>
      <image-slot id={id} shape={shape} placeholder={label || t.ui.imageSlot} style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
    </div>
  );
}

function ComingSoon({ t, label, go, lead, body }) {
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={label} eyebrow={t.comingSoon.eyebrow} title={label} lead={lead || t.placeholders.generic} />
      <section className="section">
        <div className="container">
          <div className="card empty-state">
            <span className="ic"><Icon name="hammer" size={28} /></span>
            <h3 style={{ fontWeight: 500, marginBottom: 8 }}>{t.comingSoon.title}</h3>
            <p style={{ marginBottom: 0 }}>{body || t.comingSoon.body}</p>
          </div>
        </div>
      </section>
    </main>
  );
}

function SiteFooter({ t, lang, go }) {
  const logo = lang === "en" ? "assets/logo-cirg-en-light.png" : "assets/logo-cirg-ua-light.png";
  return (
    <footer className="ftr">
      <div className="container">
        <div className="ftr-top">
          <div className="ftr-brand">
            <img src={logo} alt="ЦІРГ" />
            <p className="ftr-desc">{t.footer.desc}</p>
          </div>
          {t.footer.cols.map((c) => (
            <div key={c.h}>
              <h5>{c.h}</h5>
              <ul>{c.links.map((l, i) => <li key={i}><button className="flink" onClick={() => go(l[0])}>{l[1]}</button></li>)}</ul>
            </div>
          ))}
          <div>
            <h5>{t.footer.contactsH}</h5>
            <ul>
              <li><a href={"mailto:" + t.footer.email}>{t.footer.email}</a></li>
              <li><a href={"tel:" + t.footer.tel}>{t.footer.phone}</a></li>
              <li style={{ color: "var(--color-text-on-dark-muted)" }}>{t.footer.addr}</li>
            </ul>
            <div className="ftr-soc" style={{ marginTop: 16 }}>
              <a role="link" tabIndex="0" aria-label="Facebook"><Icon name="facebook" size={18} /></a>
              <a role="link" tabIndex="0" aria-label="LinkedIn"><Icon name="linkedin" size={18} /></a>
              <a role="link" tabIndex="0" aria-label="Telegram"><Icon name="send" size={18} /></a>
              <a role="link" tabIndex="0" aria-label="YouTube"><Icon name="youtube" size={18} /></a>
            </div>
          </div>
        </div>
        <div className="ftr-bottom">
          <span>{t.footer.rights}</span>
          <div className="ftr-legal">
            {t.footer.legal.map((l, i) => <button key={i} onClick={() => go(l[0])}>{l[1]}</button>)}
          </div>
        </div>
      </div>
    </footer>
  );
}

function AnnouncementBar({ t, onClose }) {
  return (
    <div className="announce" role="status">
      <div className="container announce-in">
        <span className="announce-txt"><Icon name="hard-hat" size={16} />{t.ui.construction}</span>
        <button className="announce-close" aria-label={t.ui.close} onClick={onClose}><Icon name="x" size={15} /></button>
      </div>
    </div>
  );
}

function CookieBanner({ t, onDismiss }) {
  return (
    <div className="cookie" role="region" aria-label={t.cookie.title}>
      <span className="ic"><Icon name="cookie" size={22} /></span>
      <div className="ctxt"><b>{t.cookie.title}</b>{t.cookie.body}</div>
      <div className="cbtns">
        <button className="btn btn-secondary btn-sm" onClick={() => onDismiss("essential")}>{t.cookie.reject}</button>
        <button className="btn btn-primary btn-sm" onClick={() => onDismiss("all")}>{t.cookie.accept}</button>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, ACCENT, LangSwitch, SiteHeader, MobileDrawer, SectionHead, PageIntro, Notice, EmptyState, ComingSoon, CardCover, SiteFooter, CookieBanner, AnnouncementBar });