/* components.jsx — Componentes compartidos del portal */
const { useState, useEffect, useRef } = React;

/* ---------- helpers ---------- */
const tr = (obj, lang) => (obj ? (obj[lang] ?? obj.es) : "");
const cx = (...a) => a.filter(Boolean).join(" ");

/* ---------- Logo mark ---------- */
function Brand({ onClick, lang, strings }) {
  return (
    <div className="brand" onClick={onClick} role="button" aria-label="Inicio">
      <img src="assets/logo-transparent.png" alt="Iglesia del Nazareno" />
      <div className="brand-text">
        <div className="t1">Oportunidades</div>
        <div className="t2">{tr(strings.foot_min, lang)}</div>
      </div>
    </div>
  );
}

/* ---------- Header / Nav ---------- */
function Header({ route, go, lang, setLang, strings }) {
  const [open, setOpen] = useState(false);
  const D = window.PORTAL_DATA;
  const navTo = (r) => { go(r); setOpen(false); };
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <Brand onClick={() => navTo({ name: "list" })} lang={lang} strings={strings} />
        <div className="nav-spacer" />
        <nav className={cx("nav-links", open && "open")}>
          <a className={cx("nav-link", route.name === "list" && "active")} onClick={() => navTo({ name: "list" })}>{tr(strings.nav_browse, lang)}</a>
          <a className={cx("nav-link", route.name === "about" && "active")} onClick={() => navTo({ name: "about" })}>{tr(strings.nav_about, lang)}</a>
          <a className={cx("nav-link", route.name === "apply" && "active")} onClick={() => navTo({ name: "apply", id: null })}>{tr(strings.nav_apply, lang)}</a>
        </nav>
        <div className="lang-toggle" role="group" aria-label="Idioma">
          <button className={cx(lang === "es" && "on")} onClick={() => setLang("es")}>ES</button>
          <button className={cx(lang === "pt" && "on")} onClick={() => setLang("pt")}>PT</button>
        </div>
        <button className="menu-btn" onClick={() => setOpen(o => !o)} aria-label="Menú">
          {open ? <Icons.x size={20} /> : <Icons.menu size={20} />}
        </button>
      </div>
    </header>
  );
}

/* ---------- Level meter (skills) ---------- */
function LevelMeter({ level, lang, strings }) {
  const labels = [strings.level_basic, strings.level_inter, strings.level_native];
  return (
    <span className="level" aria-label={`Nivel ${level}`}>
      {[1, 2, 3].map(i => <span key={i} className={cx("seg", i <= level && "on")} />)}
      <span className="lv-txt">{tr(labels[level - 1], lang)}</span>
    </span>
  );
}

/* ---------- Modality badge ---------- */
function ModBadge({ mod, lang }) {
  const D = window.PORTAL_DATA;
  return (
    <span className="mod-badge"><span className="dot" />{tr(D.modalities[mod], lang)}</span>
  );
}

/* ---------- Area tag ---------- */
function AreaTag({ areaId, lang }) {
  const D = window.PORTAL_DATA;
  const a = D.areas[areaId];
  return (
    <span className="area-tag" style={{ "--area-color": a.color }}>
      <span className="dot" />{tr(a.label, lang)}
    </span>
  );
}

/* ---------- Opportunity card ---------- */
function OppCard({ op, lang, strings, onOpen, cardStyle, idx }) {
  const D = window.PORTAL_DATA;
  const a = D.areas[op.area];
  const loc = op.country === "Regional" ? (lang === "pt" ? "Regional" : "Regional") : op.country;
  const featured = op.featured && cardStyle !== "uniform";

  if (featured) {
    return (
      <article className="ocard featured rise" style={{ "--area-color": a.color, animationDelay: `${idx * 50}ms` }} onClick={() => onOpen(op.id)}>
        <span className="feat-flag">{tr(strings.featured_flag, lang)}</span>
        <div className="feat-left">
          <div className="ocard-top"><AreaTag areaId={op.area} lang={lang} /></div>
          <h3>{tr(op.title, lang)}</h3>
          <p className="ocard-desc" style={{ WebkitLineClamp: 3 }}>{tr(op.blurb, lang)}</p>
          <div className="stack">
            {op.stack.slice(0, 6).map(s => <span key={s} className="tech-pill">{s}</span>)}
          </div>
          <div className="ocard-foot">
            <div className="ocard-meta"><Icons.pin size={15} />{loc}</div>
            <span className="go">{tr(strings.card_view, lang)} <Icons.arrowR size={14} /></span>
          </div>
        </div>
        <div className="feat-side">
          <ModBadge mod={op.modality} lang={lang} />
          <div className="dm"><div className="ic"><Icons.briefcase size={18} /></div>
            <div><div className="dm-l">{tr(strings.d_meta_ded, lang)}</div><div className="dm-v">{tr(D.dedications[op.dedication], lang)}</div></div>
          </div>
          <div className="dm"><div className="ic"><Icons.clock size={18} /></div>
            <div><div className="dm-l">{tr(strings.filter_mod, lang)}</div><div className="dm-v">{tr(D.modalities[op.modality], lang)}</div></div>
          </div>
        </div>
      </article>
    );
  }

  return (
    <article className={cx("ocard rise", cardStyle === "minimal" && "minimal")} style={{ "--area-color": a.color, animationDelay: `${idx * 45}ms` }} onClick={() => onOpen(op.id)}>
      <span className="accent-bar" />
      <div className="ocard-top">
        <AreaTag areaId={op.area} lang={lang} />
        <ModBadge mod={op.modality} lang={lang} />
      </div>
      <h3>{tr(op.title, lang)}</h3>
      <p className="ocard-desc">{tr(op.blurb, lang)}</p>
      <div className="stack">
        {op.stack.slice(0, 4).map(s => <span key={s} className="tech-pill">{s}</span>)}
      </div>
      <div className="ocard-foot">
        <div className="ocard-meta"><Icons.pin size={15} />{loc}</div>
        <span className="go">{tr(strings.card_view, lang)} <Icons.arrowR size={14} /></span>
      </div>
    </article>
  );
}

/* ---------- Footer (estructura samnaz.org, identidad azul) ---------- */
function Footer({ lang, setLang, strings, go }) {
  const D = window.PORTAL_DATA;
  const fn = D.footerNav;
  const col = (heading, items) => (
    <div className="footer-col">
      <h5>{heading}</h5>
      <ul>
        {items.map((it, i) => (
          <li key={i}><a href={it.url} target="_blank" rel="noopener noreferrer">{it.label}</a></li>
        ))}
      </ul>
    </div>
  );
  return (
    <footer className="footer">
      <div className="footer-dots" aria-hidden="true" />
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <img className="f-lockup" src="assets/logo-lockup-white.png" alt="Iglesia del Nazareno · América del Sur" />
            <p className="f-mission">{tr(strings.foot_mission, lang)}</p>
            <div className="f-social-block">
              <span className="f-follow">{tr(strings.foot_follow, lang)}</span>
              <div className="f-social">
                {D.social.map(s => (
                  <a key={s.id} href={s.url} target="_blank" rel="noopener noreferrer" aria-label={s.id}>
                    {Icons[s.id]({ size: 18 })}
                  </a>
                ))}
              </div>
            </div>
          </div>

          {col(tr(strings.foot_iniciativas, lang), fn.iniciativas)}
          {col(tr(strings.foot_region_sam, lang), fn.regionSam)}
          {col(tr(strings.foot_regiones, lang), fn.regiones)}

          <div className="footer-col footer-news">
            <h5>{tr(strings.foot_newsletter, lang)}</h5>
            <p className="f-news-sub">{tr(strings.foot_newsletter_sub, lang)}</p>
            <a className="btn btn-primary" style={{ marginTop: 4, justifyContent: "center" }} href="https://www.samnaz.org/boletin/" target="_blank" rel="noopener noreferrer">
              <Icons.mail size={16} /> {tr(strings.foot_newsletter, lang)}
            </a>
            <a className="f-contact" href={`mailto:${D.contactEmail}`}><Icons.mail size={15} /> {D.contactEmail}</a>
          </div>
        </div>

        <div className="footer-bottom">
          <div className="f-copy">© 2026 · {tr(strings.foot_rights, lang)}</div>
          <div className="f-bottom-right">
            <a className="f-link-min" onClick={() => go({ name: "about" })}>{tr(strings.foot_min, lang)}</a>
            <div className="lang-toggle f-lang">
              <button className={cx(lang === "es" && "on")} onClick={() => setLang("es")}>ES</button>
              <button className={cx(lang === "pt" && "on")} onClick={() => setLang("pt")}>PT</button>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { tr, cx, Brand, Header, LevelMeter, ModBadge, AreaTag, OppCard, Footer });