/* Conto Labs website kit · About + Join + Connect
   All copy/images come from content/site.yaml via window.CONTENT. */

function About() {
  const c = window.CONTENT.about;
  return (
    <section id="about" className="sec-soft">
      <div className="container">
        <div className="sec-head">
          <span className="kicker">{c.kicker}</span>
          <h2>{c.heading}</h2>
        </div>

        <div className="about-name reveal">
          <div className="eq"><span>{c.name.term}</span> {c.name.definition}</div>
          <p>{c.name.text}</p>
        </div>

        <div className="grid grid-3">
          {c.cards.map((card) => (
            <div className="card reveal" key={card.pill}>
              <span className="pill-ph">{card.pill}</span>
              <h3>{card.heading}</h3>
              <p>{card.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Join() {
  const c = window.CONTENT.join;
  return (
    <section id="join">
      <div className="container">
        <div className="sec-head">
          <span className="kicker">{c.kicker}</span>
          <h2>{c.heading}</h2>
          <p>{c.intro}</p>
        </div>

        <div style={{ maxWidth: 720, margin: "0 auto" }}>
          {c.roles.map((role, i) => (
            <div className="role reveal" key={i}>
              <div><h4>{role.title}</h4><p>{role.text}</p></div>
              <span className="go">{c.roleCta}</span>
            </div>
          ))}
          <p className="join-catch">{c.catch.text} <a href={c.catch.linkHref} style={{ color: "var(--blue)", fontWeight: 500 }}>{c.catch.linkLabel}</a></p>
        </div>
      </div>
    </section>
  );
}

// A contact pill: shows either a lucide icon (by name) or an inline SVG.
function PillLink({ link, className }) {
  return (
    <a href={link.href} className={className}>
      {link.lucide ? <i data-lucide={link.lucide}></i> : null}
      {link.icon ? <Raw html={link.icon} /> : null}
      {link.lucide || link.icon ? " " : null}{link.label}
    </a>
  );
}

function Connect() {
  const c = window.CONTENT.connect;
  return (
    <React.Fragment>
      <footer id="contact" className="connect">
        <div className="container">
          <Raw as="div" className="coffee" html={c.icon} />
          <h2>{c.heading}</h2>
          <p>{c.text}</p>
          <div>
            {c.links.map((link) => (<PillLink key={link.label} link={link} className="pill" />))}
          </div>
          <div className="divider"></div>
          <h3>{c.bookHeading}</h3>
          <PillLink link={c.bookCta} className="btn btn-accent" />
          <p style={{ marginTop: 20, fontSize: 13.5, color: "var(--blue-100)", display: "inline-flex", alignItems: "center", gap: 7 }}><i data-lucide="clock"></i> {c.responseNote}</p>
        </div>
      </footer>
      <div className="footer-bottom">{window.CONTENT.footer}</div>
    </React.Fragment>
  );
}

Object.assign(window, { About, Join, Connect });