// About section

function AboutSection() {
  const { t } = useI18n();
  const a = t.about;

  return (
    <section
      id="about"
      data-screen-label="02 About"
      style={{
        padding: "clamp(80px, 14vh, 160px) clamp(24px, 8vw, 120px)",
        maxWidth: 1400,
        margin: "0 auto",
        minHeight: "80vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
      }}
    >
      <RevealText delay={0} className="section-label">
        <span>{a.label}</span>
      </RevealText>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: "clamp(48px, 8vw, 120px)",
        marginTop: "clamp(40px, 6vh, 72px)",
        alignItems: "start",
      }}
      className="about-grid"
      >
        <div>
          <RevealWords delay={100} className="about-bio-1">
            {a.bio1}
          </RevealWords>
          <RevealWords delay={300} className="about-bio-2" style={{ marginTop: "1.4em" }}>
            {a.bio2}
          </RevealWords>
        </div>

        <div style={{ paddingTop: "clamp(0px, 1vh, 12px)" }}>
          {[
            [a.facts.location, a.facts.locationVal],
            [a.facts.status, a.facts.statusVal],
            [a.facts.interests, a.facts.interestsVal],
          ].map(([label, val], i) => (
            <RevealText key={label} delay={i * 80 + 150}>
              <div className="fact-row">
                <span className="fact-label">{label}</span>
                <span className="fact-value">{val}</span>
              </div>
            </RevealText>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AboutSection });