/* global React, window */
const { Icon, SectionHead } = window;

const About = () => (
  <section id="about" data-theme="dark" className="section about-dark">
    <div className="painpoint-grid" />
    <div className="container" style={{ position: "relative" }}>
      <SectionHead
        tag="04 · Nosotros"
        title={<>Un equipo. <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontWeight: 400 }}>Tu grupo.</span></>}
        kicker={<>La mayoría de las agencias trabajan para vos.<br/>Nosotros trabajamos con vos.</>}
      />
      <div className="team-grid">
        {window.DATA.TEAM.map((m, i) => {
          const Tag = m.instagram ? "a" : "div";
          const linkProps = m.instagram ? { href: m.instagram, target: "_blank", rel: "noreferrer" } : {};
          return (
            <div key={m.name} className="team-card-wrap reveal" style={{ animationDelay: `${i*.08}s` }}>
            <Tag className="team-card" style={{ textDecoration: "none", color: "inherit", cursor: m.instagram ? "pointer" : "default", display: "block" }} {...linkProps}>
              <div className="team-photo" style={{ position: "relative", overflow: "hidden", background: "#1f1f1f" }}>
                <img
                  src={m.photo}
                  alt={m.name}
                  loading="lazy"
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", objectPosition: m.photoPosition || "top center", transform: m.photoScale ? `scale(${parseFloat(m.photoScale)/100})` : undefined, transformOrigin: m.photoPosition || "top center" }}
                  onError={(e) => { e.currentTarget.style.display = "none"; e.currentTarget.parentElement.dataset.fallback = "true"; }}
                />
                <span className="team-photo-fallback">Foto · {m.name.split(" ")[0]}</span>
              </div>
              <div className="team-body">
                <div>
                  <div className="team-name">{m.name}</div>
                  <div className="team-role">{m.role}</div>
                </div>
                {m.instagram
                  ? <a className="team-ig" href={m.instagram} target="_blank" rel="noreferrer" aria-label="Instagram" onClick={(e) => e.stopPropagation()}>
                      <Icon name="instagram" size={16} />
                    </a>
                  : <div className="team-ig" style={{ opacity: .3, cursor: "default" }} aria-hidden>
                      <Icon name="instagram" size={16} />
                    </div>
                }
              </div>
            </Tag>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

window.About = About;