// Section components — About, Testimonials, ForWho

const About = () => {
  const { about } = CONTENT;
  return (
    <section className="about" data-screen-label="04 Sobre">
      <SectionLabel>{about.section}</SectionLabel>
      <div className="about-grid">
        <div className="about-photo-col">
          <div className="about-photo">
            <img src="assets/about.jpg" alt="Carlos Bezerra" style={{width:"100%",height:"100%",objectFit:"cover",objectPosition:"center top",display:"block"}} />
          </div>
          <div className="about-creds">
            {about.creds.map(([k, v], i) => (
              <div key={i} className="cred">
                <div className="cred-key">{k}</div>
                <div className="cred-val">{v}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="about-body-col">
          <h2 className="display-h2">{about.headline}</h2>
          <div className="about-body">
            {about.body.map((p, i) => (
              <p key={i} className="reveal">{p}</p>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Testimonials = () => {
  const { testimonials } = CONTENT;
  return (
    <section className="testimonials" data-screen-label="05 Depoimentos">
      <SectionLabel>{testimonials.section}</SectionLabel>
      <div className="t-grid">
        {testimonials.items.map((t, i) => (
          <figure key={i} className="t-card reveal">
            <div className="t-mark">“</div>
            <blockquote className="t-quote">{t.quote}</blockquote>
            <figcaption className="t-cap">
              <div className="t-avatar">
                <span>{t.name.split(" ").map(s => s[0]).slice(0, 2).join("")}</span>
              </div>
              <div className="t-cap-text">
                <div className="t-name">{t.name}</div>
                <div className="t-role">{t.role}</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
};

const ForWho = () => {
  const { forwho } = CONTENT;
  return (
    <section className="forwho" data-screen-label="06 Para quem">
      <SectionLabel>{forwho.section}</SectionLabel>
      <div className="forwho-grid">
        <div className="forwho-col">
          <h2 className="display-h2">{forwho.headline}</h2>
          <ul className="forwho-list forwho-yes">
            {forwho.yes.map((li, i) => (
              <li key={i} className="reveal">
                <span className="forwho-mark">✓</span>
                <span>{li}</span>
              </li>
            ))}
          </ul>
        </div>
        <div className="forwho-col forwho-col-no">
          <h3 className="forwho-no-title">{forwho.noHeadline}</h3>
          <ul className="forwho-list forwho-no">
            {forwho.no.map((li, i) => (
              <li key={i} className="reveal">
                <span className="forwho-mark forwho-mark-no">—</span>
                <span>{li}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { About, Testimonials, ForWho });