/* eslint-disable */
// ============================================================================
// Events listing — renders a card per event from TYF_EVENTS.
// ============================================================================
const { useEffect: useEff } = React;

const MONTHS = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
function dateBadge(iso) {
  const d = new Date(iso + "T00:00:00");
  return { m: MONTHS[d.getMonth()], d: d.getDate() };
}

function ListingTopBar() {
  return (
    <header className="topbar">
      <div className="wrap topbar__in">
        <a className="brandmark" href="Events.html"><b>Trust Your Family</b><span>EVENTS</span></a>
        <div className="topbar__spacer" />
        <nav className="topnav">
          <a href="#upcoming">Upcoming</a>
          <a className="muted" href="mailto:events@trustyourfamily.com">Contact</a>
        </nav>
      </div>
    </header>
  );
}

function EventCard({ ev }) {
  const b = dateBadge(ev.date.iso);
  return (
    <a className="ev-card" href={`Event.html?e=${window.eventSlug(ev)}`}>
      <div className="ev-card__img">
        <img src={ev.hero.image} alt={ev.hero.caption || ev.title.lead} />
        <div className="ev-card__date"><b>{b.d}</b><span>{b.m}</span></div>
      </div>
      <div className="ev-card__body">
        <div className="ev-card__aud">{ev.status === "past" ? "Past event" : "Private partner preview"}</div>
        <h3 className="ev-card__title">{ev.title.lead} <em>{ev.title.accent}</em></h3>
        <div className="ev-card__loc">{I.pin({ width: 15, height: 15 })} {ev.location.cityState} · {ev.date.timeDisplay}</div>
        <div className="ev-card__go" style={{ marginTop: 6 }}>View details {I.arrow()}</div>
      </div>
    </a>
  );
}

function Listing() {
  const events = window.TYF_EVENTS || [];
  return (
    <>
      <ListingTopBar />
      <section className="listing-hero" id="upcoming">
        <div className="wrap">
          <span className="eyebrow audience-tag">For our professional partners</span>
          <h1>Events &amp; Previews</h1>
          <p>An invitation-only series for the professionals behind our transformations. New partner previews are posted here as projects complete.</p>
        </div>
      </section>
      <section className="wrap">
        <div className="ev-grid">
          {events.map((ev) => <EventCard ev={ev} key={window.eventSlug(ev)} />)}
        </div>
      </section>
      <footer className="partners" style={{ marginTop: 20 }}>
        <div className="partners__band">Thank you to our partners</div>
        <div className="partners__logos">
          {(events[0]?.partners || []).map((p, i) => <img key={i} src={p.logo} alt={p.name} title={p.name} />)}
        </div>
        <div className="colophon">© {new Date().getFullYear()} Trust Your Family · Keep Your Promise. Secure Your Legacy.</div>
      </footer>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Listing />);