// Tatava Studio, Insights (blog index). Plain-spoken pieces in the
// practice's voice; click-thru prototype (articles are not yet written).

const TIP = window.TATAVA_DATA;

const TIP_POSTS = [
  {
    eye: "Family",
    slug: "family-counselling-urban",
    cover: "assets/photo-family-counseling.jpg",
    title: ["5 Signs You Should Seek ", "Family Counselling", " in Urban Areas"],
    meta: ["6 min read", "May 18"]
  },
  {
    eye: "Self-Care",
    slug: "self-care-isnt-selfish",
    cover: "assets/poster-self-care.png",
    title: ["Self-Care ", "Isn't Selfish", ", and 6 Ways to Start"],
    meta: ["4 min read", "Apr 02"]
  },
  {
    eye: "Pride",
    slug: "healing-is-for-everyone",
    cover: "assets/photo-martin.jpg",
    title: ["Healing Is for ", "Everyone", ", Therapy and LGBTQIA+ Identity"],
    meta: ["7 min read", "Jun 11"]
  },
  {
    eye: "Sleep",
    slug: "40-minute-wind-down",
    cover: "assets/photo-online-therapy.jpg",
    title: ["The 40-Minute ", "Wind-Down", ", a Sleep Ritual That Survives Real Life"],
    meta: ["5 min read", "Mar 21"]
  },
  {
    eye: "Work",
    slug: "burnout-has-a-prequel",
    cover: "assets/photo-gabrielle.jpg",
    title: ["Burnout Has a ", "Prequel", ", What Teams Miss Until the Exit Interview"],
    meta: ["6 min read", "Feb 09"]
  },
  {
    eye: "Grief",
    slug: "grief-has-no-deadline",
    cover: "assets/photo-mindful-class.jpg",
    title: ["Grief Has ", "No Deadline", ", What the First Year Actually Looks Like"],
    meta: ["8 min read", "Jan 27"]
  }
];

function InsightsHero() {
  return (
    <section className="pageHero" data-screen-label="Insights hero">
      <div className="container pageHero__inner">
        <span className="eyebrow eyebrow--band fade-rise">Insights</span>
        <h1 className="headline fade-rise-1">Reading and Reflection from the <span className="hl">Practice</span></h1>
        <p className="lead fade-rise-2">
          Plain-spoken pieces on mental health, written for the people we sit with,
          not for other clinicians.
        </p>
      </div>
    </section>
  );
}

function InsightsGrid() {
  return (
    <section className="sec" data-screen-label="Articles">
      <div className="container">
        <div className="insights">
          {TIP_POSTS.map((p) => (
            <article className="insight fade-rise" key={p.eye}>
              <a className="insight__cover" href={"Tatava Article.html?id=" + p.slug}>
                <img src={p.cover} alt="" loading="lazy" />
                <span className="eyebrow insight__tag">{p.eye}</span>
              </a>
              <div className="insight__body">
                <div className="insight__meta">
                  {p.meta.map((m) => <span key={m}>{m}</span>)}
                </div>
                <h3><a className="insight__titleLink" href={"Tatava Article.html?id=" + p.slug}>{p.title[0]}<span className="hl">{p.title[1]}</span>{p.title[2]}</a></h3>
                <a className="textlink insight__more" href={"Tatava Article.html?id=" + p.slug}>
                  Read article
                  <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
                </a>
              </div>
            </article>
          ))}
        </div>
        <p className="insights__note">New pieces are published monthly. For session-related questions, <a href="Tatava Contact.html">reach out directly</a>.</p>
      </div>
    </section>
  );
}

function InsightsApp() {
  return (
    <div id="top">
      <Nav current="insights"></Nav>
      <InsightsHero></InsightsHero>
      <InsightsGrid></InsightsGrid>
      <Footer current="insights"></Footer>
      <WhatsAppFloat></WhatsAppFloat>
    </div>
  );
}

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