/* Pages · group 2 — Press, About, Team.
   All copy lives in site/content.js (window.solasContent.press / .about /
   .team). This file is layout only. */

const C2 = window.solasContent;

// ============================================================================
// /press — journal + releases
// ----------------------------------------------------------------------------
// Journal entries are content.js (press.journal). The fabricated 2026 press
// releases / field note / 412-property long-read were removed under
// CEP-2026-05-27-001 + -002; only substantiable entries remain.

const JOURNAL = C2.press.journal;

const PressPage = ({ onNav }) => {
  const c = C2.press;
  return (
    <React.Fragment>
      <PageHero
        eyebrow={c.hero.eyebrow}
        title={c.hero.title}
        standfirst={c.hero.standfirst}
        actions={
          <React.Fragment>
            <a href="#/press#subscribe" className="btn btn--primary" onClick={(e) => e.preventDefault()}>{c.hero.ctaPrimary}</a>
            <a href="#/press#desk" className="page-hero__secondary" onClick={(e) => e.preventDefault()}>{c.hero.ctaSecondary}</a>
          </React.Fragment>
        }
        meta={c.hero.meta.map(([dt, dd], i) => (
          <div key={i}><dt>{dt}</dt><dd>{dd}</dd></div>
        ))}
      />

      <Section eyebrow={c.journalHead.eyebrow} title={c.journalHead.title} standfirst={c.journalHead.standfirst}>
        <div className="journal-list">
          {JOURNAL.map((j, i) => (
            <a key={i} href="#/press" className="journal-entry" onClick={(e) => e.preventDefault()}>
              <ImageSlot {...IMG[j.img]} variant="wide" className="journal-entry__img" caption={null} asPlaceholder={false} />
              <div className="journal-entry__meta">
                <span className="journal-entry__d">{j.date}</span>
                <span className="journal-entry__k">{j.kind}</span>
              </div>
              <div className="journal-entry__body">
                <h3 className="journal-entry__t">{j.title}</h3>
                <p className="journal-entry__s">{j.summary}</p>
              </div>
              <span className="journal-entry__l">Read →</span>
            </a>
          ))}
        </div>
      </Section>

      <Section id="desk" eyebrow={c.desk.eyebrow} title={c.desk.title} standfirst={c.desk.standfirst}>
        <div className="page-contactgrid">
          <div className="page-contact">
            <span className="page-contact__lbl">{c.desk.contactLabel}</span>
            <h3 className="page-contact__n">{c.desk.contactName}</h3>
            <p className="page-contact__d">{c.desk.contactBlurb}</p>
            <span className="page-contact__v"><a href={"mailto:" + c.desk.contactEmail}>{c.desk.contactEmail}</a></span>
          </div>
          <div className="page-contact">
            <span className="page-contact__lbl">{c.desk.packLabel}</span>
            <h3 className="page-contact__n">{c.desk.packName}</h3>
            <p className="page-contact__d">{c.desk.packBlurb}</p>
            <span className="page-contact__v"><a href="#" onClick={(e) => e.preventDefault()}>{c.desk.packLink}</a></span>
          </div>
        </div>
      </Section>

      <Section id="subscribe" eyebrow={c.subscribe.eyebrow} title={c.subscribe.title} standfirst={c.subscribe.standfirst} flat>
        <form
          className="contact-form"
          onSubmit={stubFormSubmit("journal-signup")}
          data-form="journal-signup"
          style={{ maxWidth: 440 }}
        >
          <div className="quote-field">
            <label className="quote-field__lbl" htmlFor="sub-email">{c.subscribe.emailLabel}</label>
            <input id="sub-email" name="email" type="email" placeholder={c.subscribe.emailPlaceholder} required />
          </div>
          <div className="quote-field">
            <label className="quote-field__lbl" htmlFor="sub-name">{c.subscribe.nameLabel}</label>
            <input id="sub-name" name="name" type="text" placeholder={c.subscribe.namePlaceholder} />
          </div>
          <button type="submit" className="btn btn--primary" style={{ alignSelf: "flex-start" }}>{c.subscribe.submit}</button>
          <p className="form-note">
            <strong>Wiring · production:</strong> POST to <code>/api/leads/journal</code> →
            Hubspot CRM, contact list <code>journal-quarterly</code>.
          </p>
        </form>
      </Section>
    </React.Fragment>
  );
};

// ============================================================================
// /about — company narrative
// ============================================================================

const AboutPage = ({ onNav }) => {
  const c = C2.about;
  return (
    <React.Fragment>
      <PageHero
        eyebrow={c.hero.eyebrow}
        title={c.hero.title}
        standfirst={c.hero.standfirst}
        meta={c.hero.meta.map(([dt, dd], i) => (
          <div key={i}><dt>{dt}</dt><dd>{dd}</dd></div>
        ))}
      />

      <Section eyebrow={c.wedge.eyebrow} title={c.wedge.title} standfirst={c.wedge.standfirst}>
        <PullQuote name={c.wedge.sigName} role={c.wedge.sigRole}>
          {c.wedge.quote}
        </PullQuote>
        {c.wedge.paras.map((p, i) => (
          <p className="argument__p" style={{ maxWidth: "60ch" }} key={i}>{p}</p>
        ))}
      </Section>

      <Section eyebrow={c.principles.eyebrow} title={c.principles.title} standfirst={c.principles.standfirst}>
        {c.principles.points.map((pt) => (
          <div className="argument" key={pt.n}>
            <div className="argument__n">{pt.n}</div>
            <div className="argument__body">
              <h3 className="argument__t">{pt.t}</h3>
              <p className="argument__p">{pt.p}</p>
            </div>
          </div>
        ))}
      </Section>

      <Section eyebrow={c.room.eyebrow} title={c.room.title} standfirst={c.room.standfirst}>
        <ImageSlot {...IMG.staircase} variant="wide" caption={c.room.imageCaption} />
        <p className="argument__p" style={{ maxWidth: "60ch" }}>{c.room.body}</p>
      </Section>

      <WaitlistCTA variant="personal" onNav={onNav} />
    </React.Fragment>
  );
};

// ============================================================================
// /team — founder + open roles (CEP-2026-05-27-002)
// ----------------------------------------------------------------------------
// The five fabricated individuals were removed under CEP-002. The page lists
// the Founder only (content.js team.members), with the hiring sequence below
// as named open roles. Real hires sign here as they land.

const TEAM = C2.team.members;
const OPEN_ROLES = C2.team.openRoles;

const TeamPage = ({ onNav }) => {
  const c = C2.team;
  return (
    <React.Fragment>
      <PageHero
        eyebrow={c.hero.eyebrow}
        title={c.hero.title}
        standfirst={c.hero.standfirst}
      />

      <Section eyebrow={c.founderSection.eyebrow} title={c.founderSection.title} standfirst={c.founderSection.standfirst} flat>
        <div className="team-grid">
          {TEAM.map((m, i) => {
            const initials = m.n.split(" ").map((p) => p[0]).slice(0, 2).join("");
            return (
              <article key={i} className="team-member">
                <div className="team-member__img imgslot imgslot--portrait" style={{ borderBottom: "1px solid var(--rule)" }}>
                  <div style={{
                    position: "absolute", inset: 0,
                    display: "grid", placeItems: "center",
                    background: "var(--bg-elevated)",
                  }}>
                    <span style={{
                      fontSize: 88, fontWeight: 600, letterSpacing: "-0.01em",
                      color: "var(--fg)", opacity: 0.85,
                    }}>{initials}</span>
                  </div>
                  <div className="imgslot__caption" style={{ background: "transparent", color: "var(--fg-muted)", textShadow: "none" }}>
                    {c.founderSection.caption}
                  </div>
                </div>
                <div className="team-member__body">
                  <span className="team-member__r">{m.r}</span>
                  <h3 className="team-member__n">{m.n}</h3>
                  <p className="team-member__bio">{m.bio}</p>
                  <span className="team-member__prior">Prior · {m.prior}</span>
                </div>
              </article>
            );
          })}
        </div>
      </Section>

      <Section eyebrow={c.openSection.eyebrow} title={c.openSection.title} standfirst={c.openSection.standfirst}>
        <div className="page-entrylist">
          {OPEN_ROLES.map((r, i) => (
            <div key={i} className="page-entry">
              <div className="page-entry__d">Open role</div>
              <div>
                <h3 className="page-entry__t">{r.title}</h3>
                <p className="page-entry__s">{r.status}</p>
              </div>
              <a href="#/careers" className="page-entry__l" onClick={(e) => { e.preventDefault(); onNav("/careers"); }}>See description →</a>
            </div>
          ))}
        </div>
        <p className="argument__p" style={{ maxWidth: "60ch", color: "var(--fg-muted)", marginTop: 24 }}>
          {c.openSection.note}
        </p>
      </Section>

      <WaitlistCTA variant="personal" onNav={onNav} />
    </React.Fragment>
  );
};

Object.assign(window, { PressPage, AboutPage, TeamPage, JOURNAL, TEAM, OPEN_ROLES });