// About section with photo
function About({ t }) {
  return (
    <section id="about" className="section" style={{
      background: "var(--canvas-deep)",
      borderTop: "1px solid var(--border)",
      borderBottom: "1px solid var(--border)",
    }}>
      <div className="shell">
        <div className="about-grid" style={{
          display: "grid",
          gridTemplateColumns: "5fr 7fr",
          gap: 80,
          alignItems: "start",
        }}>
          {/* Photo column */}
          <Reveal>
            <div style={{ position: "relative" }}>
              <div style={{
                position: "absolute",
                inset: -14,
                top: 18,
                left: 18,
                background: "var(--orange)",
                borderRadius: 4,
                zIndex: 0,
              }} />
              <div style={{
                position: "relative",
                background: "var(--surface)",
                border: "1px solid var(--border-strong)",
                padding: 14,
                borderRadius: 4,
                zIndex: 1,
              }}>
                <img
                  src="assets/sebastian.jpg"
                  alt="Sebastian Oltedal Thorp"
                  style={{
                    width: "100%",
                    aspectRatio: "1/1",
                    objectFit: "cover",
                    filter: "grayscale(0.15) contrast(1.02)",
                    borderRadius: 2,
                  }}
                />
                <div style={{
                  marginTop: 14,
                  paddingTop: 12,
                  borderTop: "1px solid var(--border)",
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "baseline",
                  fontSize: 11,
                  letterSpacing: "0.12em",
                  textTransform: "uppercase",
                  color: "var(--muted)",
                }}>
                  <span>Founder</span>
                  <span>Oslo · 2026</span>
                </div>
              </div>
            </div>
          </Reveal>

          {/* Text column */}
          <div>
            <Reveal>
              <Eyebrow>{t.about.eyebrow}</Eyebrow>
            </Reveal>
            <Reveal delay={80}>
              <h2 style={{
                marginTop: 24,
                fontSize: "clamp(44px, 6vw, 76px)",
                lineHeight: 1.0,
                letterSpacing: "-0.025em",
                fontWeight: 500,
              }}>
                {t.about.title}{" "}
                <span className="serif-italic" style={{ color: "var(--orange-deep)" }}>{t.about.titleItalic}</span>
                {t.about.titleEnd}
              </h2>
            </Reveal>

            <Reveal delay={160}>
              <div style={{
                marginTop: 40,
                paddingBottom: 18,
                borderBottom: "1px solid var(--border-strong)",
                display: "flex",
                justifyContent: "space-between",
                flexWrap: "wrap",
                gap: 12,
              }}>
                <div style={{ fontSize: 20, fontWeight: 500 }}>{t.about.name}</div>
                <div style={{ fontSize: 14, color: "var(--muted)" }} className="serif-italic">{t.about.role}</div>
              </div>
            </Reveal>

            <Reveal delay={240}>
              <p style={{
                marginTop: 32, fontSize: 18, lineHeight: 1.6,
                color: "var(--ink-soft)", maxWidth: 60 + "ch",
              }}>{t.about.bio}</p>
            </Reveal>

            <Reveal delay={320}>
              <p style={{
                marginTop: 20, fontSize: 18, lineHeight: 1.6,
                color: "var(--ink-soft)", maxWidth: 60 + "ch",
              }}>{t.about.bio2}</p>
            </Reveal>

            <Reveal delay={400}>
              <div style={{
                marginTop: 56,
                display: "grid",
                gridTemplateColumns: "repeat(3, 1fr)",
                gap: 24,
              }} className="about-stats">
                <Stat value={t.about.stat1Value} label={t.about.stat1Label} />
                <Stat value={t.about.stat2Value} label={t.about.stat2Label} />
                <Stat value={t.about.stat3Value} label={t.about.stat3Label} />
              </div>
            </Reveal>

            <Reveal delay={480}>
              <a href="https://sebastianthorp.com" target="_blank" rel="noopener" style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                marginTop: 40, fontSize: 14, color: "var(--orange-deep)",
                borderBottom: "1px solid currentColor", paddingBottom: 2,
              }}>
                sebastianthorp.com<Arrow size={12} />
              </a>
            </Reveal>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 560px) {
          .about-stats { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Stat({ value, label }) {
  return (
    <div>
      <div className="serif-italic" style={{
        fontSize: "clamp(32px, 6vw, 44px)", lineHeight: 1, color: "var(--orange-deep)",
        marginBottom: 6,
      }}>{value}</div>
      <div style={{
        fontSize: 11, letterSpacing: "0.14em",
        textTransform: "uppercase", color: "var(--muted)",
      }}>{label}</div>
    </div>
  );
}

window.About = About;