function About() {
  return (
    <section id="about" style={{ background: PALETTE.paper, borderBottom: `1px solid ${PALETTE.rule}` }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 32px" }} className="vst-section">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <Eyebrow style={{ marginBottom: 14 }}>About</Eyebrow>
          <h2 className="vst-h2" style={{
            fontFamily: "'Source Serif 4', serif", fontSize: 44, fontWeight: 600,
            lineHeight: 1.12, letterSpacing: "-.018em", color: PALETTE.navy, margin: 0, textWrap: "balance",
          }}>
            Founder-led. UK-incorporated. Boutique by design.
          </h2>
        </div>

        <div className="vst-grid-2" style={{
          display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 56, alignItems: "flex-start",
        }}>
          {/* Founder */}
          <div>
            <div style={{
              display: "flex", gap: 18, alignItems: "flex-start", marginBottom: 22,
            }}>
              <div style={{
                width: 88, height: 88, borderRadius: 4, flexShrink: 0,
                background: `linear-gradient(135deg, ${PALETTE.navy} 0%, ${PALETTE.navy700} 100%)`,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "'Source Serif 4', serif", fontSize: 32, fontWeight: 600,
                color: PALETTE.amber500, letterSpacing: "-.012em",
                border: `1px solid ${PALETTE.rule}`,
              }} aria-hidden="true">SA</div>
              <div>
                <div style={{
                  fontFamily: "JetBrains Mono, monospace", fontSize: 11,
                  color: PALETTE.mute2, letterSpacing: ".04em", marginBottom: 4,
                }}>FOUNDER · SOLE DIRECTOR</div>
                <div style={{
                  fontFamily: "'Source Serif 4', serif", fontSize: 26, fontWeight: 600,
                  color: PALETTE.navy, letterSpacing: "-.012em", lineHeight: 1.15,
                }}>Sebastian Alfonso</div>
                <div style={{
                  fontFamily: "Inter, sans-serif", fontSize: 13,
                  color: PALETTE.mute1, marginTop: 4, lineHeight: 1.5,
                }}>Founder · Trade intelligence · Argentina</div>
              </div>
            </div>

            <p style={{
              fontFamily: "'Source Serif 4', serif", fontSize: 17,
              lineHeight: 1.65, color: PALETTE.ink, margin: "0 0 16px",
            }}>
              VS-Trade was founded in March 2026 to fix a specific gap: Mexican import data is publicly
              available, but the work of disambiguating named entities, reconciling sources, and
              footnoting estimates is almost never done at the standard a research desk would accept.
            </p>
            <p style={{
              fontFamily: "'Source Serif 4', serif", fontSize: 17,
              lineHeight: 1.65, color: PALETTE.ink, margin: 0,
            }}>
              Reports are written single-author. Methodology is published. Coverage is disclosed.
              Mistakes are revised in writing.
            </p>

            <div style={{
              marginTop: 26, display: "flex", gap: 18, flexWrap: "wrap",
              fontFamily: "Inter, sans-serif", fontSize: 13, color: PALETTE.mute1,
            }}>
              <a href="#" style={{ color: PALETTE.blue, textDecoration: "none", display: "inline-flex", gap: 6, alignItems: "center" }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM8 17.34H5.67V10H8zM6.83 8.93a1.4 1.4 0 1 1 0-2.81 1.4 1.4 0 0 1 0 2.81zM18 17.34h-2.34v-3.91c0-.93-.34-1.57-1.18-1.57a1.27 1.27 0 0 0-1.2.85 1.6 1.6 0 0 0-.07.57v4.06H10.9V10h2.31v1a2.34 2.34 0 0 1 2.1-1.16c1.53 0 2.69 1 2.69 3.16z"/></svg>
                LinkedIn
              </a>
              <a href="mailto:hello@vstrade.co" style={{ color: PALETTE.blue, textDecoration: "none", fontFamily: "JetBrains Mono, monospace", fontSize: 12 }}>
                hello@vstrade.co
              </a>
            </div>
          </div>

          {/* Corporate identity */}
          <aside style={{
            background: PALETTE.white, border: `1px solid ${PALETTE.rule}`,
            borderTop: `2px solid ${PALETTE.navy}`,
            padding: "28px 32px",
          }}>
            <div style={{
              fontFamily: "Inter, sans-serif", fontSize: 11, fontWeight: 600,
              letterSpacing: ".14em", textTransform: "uppercase",
              color: PALETTE.mute1, marginBottom: 20,
            }}>Corporate Identity</div>

            <div style={{ display: "grid", gap: 18 }}>
              <DataRow label="Legal entity" value="VS-Trade Intelligence Limited"/>
              <DataRow label="Incorporated" value="United Kingdom · 2026"/>
              <DataRow label="UK Ltd #" value="17200549" mono/>
              <DataRow label="Registered office" value="71-75 Shelton Street, Covent Garden, London WC2H 9JQ"/>
              <DataRow label="VAT" value="Not yet registered (under £90k threshold)"/>
              <DataRow label="Domain" value="vstrade.co" mono/>
              <DataRow label="Cadence" value="Single-author rigor, institutional-grade methodology"/>
            </div>

            <hr style={{ border: 0, borderTop: `1px solid ${PALETTE.rule}`, margin: "22px 0 18px" }}/>

            <div style={{
              display: "flex", gap: 8, alignItems: "flex-start",
              fontFamily: "Inter, sans-serif", fontSize: 12, color: PALETTE.mute1, lineHeight: 1.55,
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 1, color: PALETTE.green }}><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
              <span>Companies House filings public. Annual confirmation statement &amp; accounts on file at <a href="#" style={{ color: PALETTE.blue }}>find-and-update.company-information.service.gov.uk</a></span>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function DataRow({ label, value, mono }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16, alignItems: "baseline" }}>
      <div style={{
        fontFamily: "Inter, sans-serif", fontSize: 10.5, fontWeight: 600,
        letterSpacing: ".14em", textTransform: "uppercase", color: PALETTE.mute2,
      }}>{label}</div>
      <div style={{
        fontFamily: mono ? "JetBrains Mono, monospace" : "Inter, sans-serif",
        fontSize: mono ? 13 : 14, color: PALETTE.navy,
        fontWeight: 500, lineHeight: 1.45,
      }}>{value}</div>
    </div>
  );
}

window.About = About;
