/* ============================================================
   PAGES 2 — Blog (Journal) · Press · Contact
   loaded after pages.jsx; uses window globals (Reveal, Ico, Img, PageHero)
   ============================================================ */
const { useState: p2State } = React;

/* ============================================================
   BLOG / JOURNAL
   ============================================================ */
function BlogPage({ C, go, lang }) {
  const d = C.blog;
  const feat = d.posts.find((p) => p.featured) || d.posts[0];
  const rest = d.posts.filter((p) => p !== feat);
  return (
    <main>
      <PageHero img="site/img/work-06.jpg" eyebrow={d.eyebrow} title={d.title} sub={d.sub} pos="center 60%" />

      <section className="section section--light">
        <div className="wrap">
          {/* Featured */}
          <Reveal>
            <a className="blog-feature" href={feat.url} target="_blank" rel="noopener">
              <div className="blog-feature-img">
                <Img src={feat.img} className="ph--stone" style={{ position:"absolute", inset:0 }} />
              </div>
              <div className="blog-feature-body">
                <div className="post-meta">
                  <span className="post-tag post-tag--gold">{d.featuredTag}</span>
                  <span className="post-dot">·</span><span>{feat.tag}</span>
                  <span className="post-dot">·</span><span>{feat.date}</span>
                </div>
                <h3 className="display">{feat.title}</h3>
                <p>{feat.excerpt}</p>
                <span className="ig-link">{Ico.ig({ width:16, height:16 })} {d.readMore}</span>
              </div>
            </a>
          </Reveal>

          {/* Grid */}
          <div className="blog-grid">
            {rest.map((p, k) => (
              <Reveal key={k} delay={(k % 3) + 1}>
                <a className="blog-card" href={p.url} target="_blank" rel="noopener">
                  <div className="blog-card-img"><Img src={p.img} className="ph--stone" style={{ position:"absolute", inset:0 }} /></div>
                  <div className="blog-card-body">
                    <div className="post-meta"><span className="post-tag">{p.tag}</span><span className="post-dot">·</span><span>{p.date}</span></div>
                    <h4>{p.title}</h4>
                    <p>{p.excerpt}</p>
                    <span className="ig-link">{Ico.ig({ width:15, height:15 })} {d.readMore}</span>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>

          <Reveal style={{ textAlign:"center", marginTop: 56 }}>
            <a className="btn btn--outline" href="https://www.instagram.com/sergio_goldvarg_museum/" target="_blank" rel="noopener">
              {Ico.ig({ width:16, height:16 })} {d.igCta}
            </a>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

/* ============================================================
   PRESS
   ============================================================ */
function OutletChip({ name }) {
  return <span className="outlet-chip">{name}</span>;
}

function PressCard({ it, archive }) {
  const Tag = it.url ? "a" : "div";
  const props = it.url ? { href: it.url, target: "_blank", rel: "noopener" } : {};
  return (
    <Tag className={"press-card tone-" + it.tone + (it.url ? "" : " noclick")} {...props}>
      {it.img && <div className="press-card-thumb"><Img src={it.img} className="ph--stone" style={{ position:"absolute", inset:0 }} /></div>}
      <div className="press-card-main">
        <div className="press-card-top">
          <span className="press-badge">{it.kind}</span>
          <span className="press-card-outlet">{it.outlet} · {it.date}</span>
        </div>
        <h4 className="press-card-title">{it.title}</h4>
      </div>
      <span className="press-card-arr">{it.url ? Ico.arrow({ width:18, height:18 }) : <em>{archive}</em>}</span>
    </Tag>
  );
}

function PressPage({ C, go, lang }) {
  const d = C.press;
  const fe = d.featured;
  // group items by year, preserving descending order
  const groups = [];
  d.items.forEach((it) => {
    let g = groups.find((x) => x.year === it.year);
    if (!g) { g = { year: it.year, items: [] }; groups.push(g); }
    g.items.push(it);
  });
  return (
    <main>
      <PageHero img="site/img/work-08.jpg" eyebrow={d.eyebrow} title={d.title} sub={d.sub} />

      <section className="section section--light">
        <div className="wrap">
          {/* Featured */}
          <Reveal>
            <a className="press-feature" href={fe.url} target="_blank" rel="noopener">
              <div className="press-feature-img"><Img src={fe.img} className="ph--stone" style={{ position:"absolute", inset:0 }} /></div>
              <div className="press-feature-body">
                <div className="press-card-top">
                  <span className="press-badge">{fe.kind}</span>
                  <span className="press-card-outlet">{fe.outlet} · {fe.date}</span>
                </div>
                <h3 className="display serif-italic">{fe.title}</h3>
                <p>{fe.excerpt}</p>
                <span className="btn btn--ghost">{d.readCta} {Ico.arrow({ width:15, height:15, className:"arr" })}</span>
              </div>
            </a>
          </Reveal>

          {/* Timeline by year */}
          <div className="press-timeline">
            {groups.map((g) => (
              <div className="press-yeargroup" key={g.year}>
                <div className="press-year"><span className="press-year-num">{g.year}</span></div>
                <div className="press-cards">
                  {g.items.map((it, k) => (
                    <Reveal key={k} delay={Math.min(k + 1, 3)}><PressCard it={it} archive={d.archive} /></Reveal>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Press kit */}
      <section className="section section--stone" style={{ textAlign:"center" }}>
        <div className="wrap">
          <Reveal>
            <h2 className="display" style={{ maxWidth:"18ch", margin:"0 auto 22px" }}>{d.pressKitTitle}</h2>
            <p className="lede" style={{ maxWidth:"48ch", margin:"0 auto 34px" }}>{d.pressKitBody}</p>
            <div style={{ display:"flex", gap:16, justifyContent:"center", flexWrap:"wrap" }}>
              <a className="btn btn--gold" href="mailto:info@goldvargcollection.com">info@goldvargcollection.com</a>
              <button className="btn btn--outline" onClick={() => go("contact")}>{lang === "es" ? "Contacto" : "Contact"}</button>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

/* ============================================================
   CONTACT
   ============================================================ */
function ContactPage({ C, go, lang }) {
  const d = C.contact;
  const [sent, setSent] = p2State(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <main>
      <PageHero img="site/img/batpoles.jpg" eyebrow={d.eyebrow} title={d.title} sub={d.sub} pos="center 40%" />

      <section className="section section--light">
        <div className="wrap">
          <div className="contact-grid">
            {/* Left: channels + meeting + social */}
            <Reveal className="contact-left">
              <div className="channels">
                {d.channels.map((c, k) => (
                  <a key={k} className="channel" href={c.href} target={c.href.startsWith("http") ? "_blank" : undefined} rel="noopener">
                    <div className="channel-ico">{c.k === "WhatsApp" ? Ico.wa({ width:20, height:20 }) : (c.k === "Email" ? Ico.mail({ width:20, height:20 }) : Ico.phone({ width:20, height:20 }))}</div>
                    <div>
                      <div className="channel-k">{c.k}</div>
                      <div className="channel-v">{c.v}</div>
                      <div className="channel-note">{c.note}</div>
                    </div>
                  </a>
                ))}
              </div>

              <div className="contact-meet">
                <span className="eyebrow eyebrow--ink">{d.meetTitle}</span>
                <p className="contact-addr" dangerouslySetInnerHTML={{ __html: d.meetAddr }} />
                <p className="contact-note">{d.meetNote}</p>
                <MeetingMap lang={lang} compact={true} />
              </div>

              <div className="contact-follow">
                <span className="eyebrow eyebrow--ink">{d.followTitle}</span>
                <p className="contact-note" style={{ marginBottom: 16 }}>{d.followNote}</p>
                <div className="socials socials--ink">
                  <a href="https://www.instagram.com/sergio_goldvarg_museum/" target="_blank" rel="noopener" aria-label="Instagram">{Ico.ig({})}</a>
                  <a href="https://www.facebook.com/groups/1437957606970992" target="_blank" rel="noopener" aria-label="Facebook">{Ico.fb({})}</a>
                  <a href="https://x.com/SergioGoldvarg" target="_blank" rel="noopener" aria-label="X">{Ico.x({})}</a>
                  <a href="https://www.linkedin.com/in/sergio-goldvarg-90325511/" target="_blank" rel="noopener" aria-label="LinkedIn">{Ico.in({})}</a>
                </div>
              </div>
            </Reveal>

            {/* Right: form */}
            <Reveal delay={1} className="contact-form-wrap">
              {sent ? (
                <div className="form-sent">
                  <div className="form-sent-ico">{Ico.check({ width:30, height:30 })}</div>
                  <p>{d.f.sent}</p>
                </div>
              ) : (
                <form className="contact-form" onSubmit={submit}>
                  <h3 className="display">{d.formTitle}</h3>
                  <div className="field">
                    <label>{d.f.name}</label>
                    <input type="text" required placeholder="" />
                  </div>
                  <div className="field-row">
                    <div className="field"><label>{d.f.email}</label><input type="email" required /></div>
                    <div className="field"><label>{d.f.phone}</label><input type="tel" /></div>
                  </div>
                  <div className="field">
                    <label>{d.f.subject}</label>
                    <select defaultValue="">
                      <option value="" disabled>...</option>
                      {d.subjects.map((s, k) => <option key={k} value={s}>{s}</option>)}
                    </select>
                  </div>
                  <div className="field">
                    <label>{d.f.message}</label>
                    <textarea rows="4" required></textarea>
                  </div>
                  <button type="submit" className="btn btn--gold" style={{ justifyContent:"center", width:"100%" }}>{d.f.submit}</button>
                </form>
              )}
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { BlogPage, PressPage, ContactPage });