/* global React */
// press.jsx — Página de prensa con grid editorial y filtros

const { useState, useMemo } = React;

function Prensa({ lang }) {
  const t = window.PAX_I18N[lang];
  const p = t.prensa;
  if (!p) return null;

  const allCats = [p.filters_all, ...p.filters];
  const [activeCat, setActiveCat] = useState(p.filters_all);
  const [submitted, setSubmitted] = useState(false);
  const [email, setEmail] = useState("");

  const articles = useMemo(() => {
    if (activeCat === p.filters_all) return p.articles;
    return p.articles.filter((a) => a.cat === activeCat);
  }, [activeCat, p]);

  const featured = p.articles.find((a) => a.featured) || p.articles[0];
  const rest = articles.filter((a) => a.id !== featured.id || activeCat !== p.filters_all);
  const showFeatured = activeCat === p.filters_all;

  return (
    <React.Fragment>
      {/* Header */}
      <section className="press-hero">
        <div className="container">
          <span className="eyebrow">{p.eyebrow}</span>
          <h1 className="display press-hero__title">
            {p.title_pre} <em>{p.title_em}</em>
          </h1>
          <p className="lead press-hero__lead">{p.lead}</p>
        </div>
      </section>

      {/* Filtros */}
      <div className="container press-filters-wrap">
        <div className="press-filters" role="tablist" aria-label="Categorías">
          {allCats.map((c) => (
            <button
              key={c}
              role="tab"
              aria-selected={activeCat === c}
              className={`press-filter ${activeCat === c ? "is-on" : ""}`}
              onClick={() => setActiveCat(c)}
            >
              {c}
            </button>
          ))}
        </div>
      </div>

      {/* Artículo destacado */}
      {showFeatured && featured && (
        <section className="container press-featured-wrap">
          <a className="press-featured" href={featured.url}>
            <div className="press-featured__media">
              <div className="placeholder placeholder--lg" aria-hidden="true">{featured.cat}</div>
            </div>
            <div className="press-featured__body">
              <div className="press-card__meta">
                <span className="press-card__badge">{p.featured_tag}</span>
                <span>{featured.cat}</span>
                <span aria-hidden="true">·</span>
                <span>{featured.date}</span>
                {featured.readTime && (
                  <React.Fragment>
                    <span aria-hidden="true">·</span>
                    <span>{featured.readTime}</span>
                  </React.Fragment>
                )}
              </div>
              <h2 className="display press-featured__title">{featured.title}</h2>
              <p className="press-featured__excerpt">{featured.excerpt}</p>
              <span className="press-card__cta">
                {p.read_more}
                <span className="arrow">→</span>
              </span>
            </div>
          </a>
        </section>
      )}

      {/* Grid */}
      <section className="section press-grid-section">
        <div className="container">
          {rest.length === 0 ? (
            <p className="press-empty">{p.no_results}</p>
          ) : (
            <div className="press-grid">
              {rest.map((a) => (
                <a key={a.id} href={a.url} className="press-card">
                  <div className="press-card__media">
                    <div className="placeholder" aria-hidden="true">{a.cat}</div>
                    {a.source && (
                      <span className="press-card__source">{a.source}</span>
                    )}
                  </div>
                  <div className="press-card__body">
                    <div className="press-card__meta">
                      <span>{a.cat}</span>
                      <span aria-hidden="true">·</span>
                      <span>{a.date}</span>
                      {a.readTime && (
                        <React.Fragment>
                          <span aria-hidden="true">·</span>
                          <span>{a.readTime}</span>
                        </React.Fragment>
                      )}
                    </div>
                    <h3>{a.title}</h3>
                    <p>{a.excerpt}</p>
                    <span className="press-card__cta">
                      {p.read_more}
                      <span className="arrow">→</span>
                    </span>
                  </div>
                </a>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* Suscripción */}
      <section className="section section--cream press-subscribe">
        <div className="container">
          <div className="press-subscribe__grid">
            <div>
              <h2 className="display press-subscribe__title">{p.subscribe_title}</h2>
              <p className="lead press-subscribe__body">{p.subscribe_body}</p>
            </div>
            {submitted ? (
              <div className="press-subscribe__thanks">
                <span className="eyebrow">{lang === "en" ? "Subscribed" : "Suscrito"}</span>
                <p>{p.subscribed_thanks}</p>
              </div>
            ) : (
              <form
                className="press-subscribe__form"
                onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
              >
                <input
                  type="email"
                  required
                  placeholder={p.subscribe_placeholder}
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
                <button className="btn" type="submit">
                  {p.subscribe_cta}
                  <span className="arrow">→</span>
                </button>
                <span
                  className="press-subscribe__consent"
                  dangerouslySetInnerHTML={{ __html: p.subscribe_consent }}
                />
              </form>
            )}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { Prensa });