/* views3.jsx — Página del Ministerio de Comunicaciones (clon adaptado) */

/* Avatar con iniciales (placeholder, sin fotos reales) */
function Avatar({ name, size = 64, seed = 0 }) {
  const initials = name.split(/\s+/).filter(Boolean).slice(0, 2).map(w => w[0]).join("").toUpperCase();
  const grads = [
    "linear-gradient(140deg,#00A0CD,#3D8EF3)",
    "linear-gradient(140deg,#3D8EF3,#5B53C0)",
    "linear-gradient(140deg,#2C73DB,#00A0CD)",
    "linear-gradient(140deg,#5B53C0,#3D8EF3)",
  ];
  return (
    <div className="avatar" style={{ width: size, height: size, background: grads[seed % grads.length], fontSize: size * 0.36 }}>
      {initials}
    </div>
  );
}

function SocialRow({ socials }) {
  if (!socials || !socials.length) return null;
  return (
    <div className="member-social">
      {socials.map((s, i) => (
        <a key={i} href={s.u} target="_blank" rel="noopener noreferrer" aria-label={s.t}>{Icons[s.t]({ size: 15 })}</a>
      ))}
    </div>
  );
}

function MinisterioView({ lang, strings, go, data }) {
  const m = data.ministry;
  return (
    <div className="ministry view-enter">
      {/* HERO */}
      <section className="min-hero">
        <div className="min-hero-dots" aria-hidden="true" />
        <div className="wrap">
          <a className="back-link" style={{ color: "rgba(255,255,255,.7)" }} onClick={() => go({ name: "about" })}>
            <Icons.arrowL size={15} /> {tr(m.backToAbout, lang)}
          </a>
          <div className="min-hero-grid">
            <div className="rise">
              <div className="eyebrow" style={{ color: "#bfe0ff" }}>{tr(m.eyebrow, lang)}</div>
              <h1>{tr(strings.nav_ministry, lang)}</h1>
              <p className="min-hero-lead">{tr(strings.about_min_body, lang)}</p>
              <div className="min-hero-cta">
                <a className="btn" style={{ background: "#fff", color: "var(--brand)" }} href={m.sourceUrl} target="_blank" rel="noopener noreferrer">
                  <Icons.globe size={16} /> {tr(m.visitSite, lang)}
                </a>
                <button className="btn" style={{ background: "rgba(255,255,255,.12)", color: "#fff", borderColor: "rgba(255,255,255,.25)" }} onClick={() => go({ name: "list", scroll: "grid" })}>
                  {tr(strings.nav_apply, lang)} <Icons.arrowR size={16} />
                </button>
              </div>
            </div>
            <div className="lead-card rise" style={{ animationDelay: "90ms" }}>
              <Avatar name={m.leadName} size={86} seed={1} />
              <div>
                <div className="lc-role">{tr(m.leadRole, lang)}</div>
                <div className="lc-name">{m.leadName}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="wrap">
        {/* DEVOCIONAL */}
        <section className="min-section min-devo">
          <h2 className="min-h2-display">{tr(m.devo_title, lang)}</h2>
          <div className="min-prose">
            {tr(m.devo, lang).map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </section>

        {/* COMUNICACIONES NAZARENAS */}
        <section className="min-section min-split">
          <div className="min-split-label"><span className="eyebrow">{tr(m.about_title, lang)}</span></div>
          <div className="min-prose">
            {tr(m.about, lang).map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </section>

        {/* OBJETIVOS + INVOLUCRARSE */}
        <section className="min-section min-two">
          <div className="min-card">
            <div className="min-card-ic"><Icons.compass size={22} /></div>
            <h3>{tr(m.objectives_title, lang)}</h3>
            <ul className="task-list" style={{ marginTop: 16 }}>
              {tr(m.objectives, lang).map((o, i) => <li key={i}><span className="tick"><Icons.check size={17} /></span>{o}</li>)}
            </ul>
          </div>
          <div className="min-card">
            <div className="min-card-ic"><Icons.users size={22} /></div>
            <h3>{tr(m.involve_title, lang)}</h3>
            <p style={{ fontSize: 14.5, color: "var(--ink-soft)", lineHeight: 1.5, marginTop: 10 }}>
              {tr(m.involve_lead, lang)} <a href={`mailto:${m.contactEmail}`} style={{ color: "var(--brand)", fontWeight: 600 }}>{m.contactEmail}</a>.
            </p>
            <div className="tag-cloud" style={{ marginTop: 16 }}>
              {tr(m.involve_areas, lang).map((a, i) => <span key={i} className="tech-pill" style={{ padding: "7px 12px", fontSize: 12.5 }}>{a}</span>)}
            </div>
          </div>
        </section>

        {/* EQUIPO REGIONAL */}
        <section className="min-section">
          <div className="section-head" style={{ margin: "0 0 24px" }}>
            <div><h2>{tr(m.regionalTitle, lang)}</h2></div>
          </div>
          <div className="member-grid regional">
            {m.regional.map((p, i) => (
              <div className="member-card" key={i}>
                <Avatar name={p.name} size={72} seed={i} />
                <div className="member-name">{p.name}</div>
                <div className="member-meta">{tr(p.role, lang)}</div>
                <SocialRow socials={p.socials} />
              </div>
            ))}
          </div>
        </section>

        {/* COORDINADORES NACIONALES */}
        <section className="min-section">
          <div className="section-head" style={{ margin: "0 0 24px" }}>
            <div><h2>{tr(m.nationalTitle, lang)}</h2></div>
          </div>
          <div className="member-grid national">
            {m.national.map((p, i) => (
              <div className="member-card" key={i}>
                <Avatar name={p.name} size={64} seed={i + 2} />
                <div className="member-name">{p.name}</div>
                <div className="member-meta"><Icons.pin size={13} /> {p.country}</div>
                <SocialRow socials={p.socials} />
              </div>
            ))}
          </div>
        </section>

        {/* CTA band */}
        <section className="min-section">
          <div className="about-band" style={{ marginTop: 10 }}>
            <h2>{tr(strings.about_min_title, lang)}</h2>
            <p>{tr(strings.about_min_body, lang)}</p>
            <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap", position: "relative" }}>
              <a className="btn" style={{ background: "#fff", color: "var(--brand)" }} href={m.sourceUrl} target="_blank" rel="noopener noreferrer">
                <Icons.globe size={16} /> {tr(m.visitSite, lang)}
              </a>
              <a className="btn" style={{ background: "rgba(255,255,255,.12)", color: "#fff", borderColor: "rgba(255,255,255,.25)" }} href={`mailto:${m.contactEmail}`}>
                <Icons.mail size={16} /> {m.contactEmail}
              </a>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

Object.assign(window, { Avatar, SocialRow, MinisterioView });