/* About + Contact + Footer. Exports About, Contact, Footer to window. */

function About() {
  return (
    <section className="section about" id="about" data-screen-label="About">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> About</span>
        </div>
        <div className="about-grid">
          <img
            className="about-portrait reveal"
            src="assets/ibby-portrait.jpeg"
            alt="Ibby Onitolo on set with camera"
            style={{ width: "100%", objectFit: "cover", objectPosition: "center 30%" }}
          />
          <div className="about-body">
            <p className="reveal">{ABOUT.lead}</p>
            <p className="dim reveal">{ABOUT.body}</p>

            <div className="cap-cols reveal">
              {CAPABILITIES.map((g) =>
              <div className="cap-group" key={g.title}>
                  <h4>{g.title}</h4>
                  <ul className="cap-list">
                    {g.items.map((it, i) =>
                  <li key={it}>
                        <span className="n">{String(i + 1).padStart(2, "0")}</span>
                        <span>{it}</span>
                      </li>
                  )}
                  </ul>
                </div>
              )}
            </div>

            <div className="clients-row reveal">
              {CLIENTS.map((cl) =>
              <span className="client-chip" key={cl} style={{ fontFamily: "Helvetica" }}>{cl}</span>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Contact() {
  return (
    <section className="section contact" id="contact" data-screen-label="Contact">
      <div className="wrap">
        <div className="contact-avail reveal"><span className="live" /> {CONTACT.availability}</div>
        <a className="contact-mail reveal" href={"mailto:" + CONTACT.email}>{CONTACT.email}</a>

        <div className="contact-sub">
          <div className="contact-col reveal">
            <span className="k">Based</span>
            <span className="v">{CONTACT.location}</span>
          </div>
          {CONTACT.socials.map((s) =>
          <div className="contact-col reveal" key={s.k}>
              <span className="k">{s.k}</span>
              <a href={s.href}>{s.v}</a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="foot">
      <span>© 2026 Ibby Onitolo — All rights reserved</span>
      <a className="top-link" href="#top">Back to top ↑</a>
    </footer>);

}

Object.assign(window, { About, Contact, Footer });