const { Stat, SectionLabel, Divider, Icon, Badge, Card, Accordion } = window.BuildingInvestDesignSystem_f8840b;

function About({ lang }) {
  const t = window.I18N[lang];
  const data = window.BI_DATA[lang];
  const width = useViewportWidth();
  const statCols = width < 640 ? 2 : 4;
  const certCols = width < 640 ? 1 : width < 960 ? 2 : 3;
  return <>
    <Section tone="light">
      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)", maxWidth: "var(--container-md)" }}>
        <SectionLabel>{t.about.label}</SectionLabel>
        <h1 style={{ font: "var(--type-h1)", letterSpacing: "var(--tracking-tight)" }}>{t.about.h1}</h1>
        <p style={{ font: "var(--type-body-lg)", color: "var(--text-secondary)" }}>{t.about.lead}</p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${statCols},1fr)`, gap: "var(--gutter)", marginTop: "var(--space-10)" }}>
        {data.stats.map((s) => <Stat key={s.label} {...s} />)}
      </div>
      <div style={{ marginTop: "var(--space-10)" }}><PhotoSlot ratio="21 / 9" label={t.about.photoLabel} /></div>
    </Section>
    <Section label={t.about.certLabel} number="06" title={t.about.certTitle} tone="sunken">
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${certCols},1fr)`, gap: "var(--gutter)" }}>
        {data.certifications.map((c) => (
          <Card key={c.code} padding="var(--card-pad-lg)" style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
            <Icon name="shield-check" size="lg" color="var(--amber-600)" />
            <span style={{ font: "var(--type-mono)", fontSize: 14 }}>{c.code}</span>
            <span style={{ font: "var(--type-body-sm)", color: "var(--text-secondary)" }}>{c.name}</span>
          </Card>
        ))}
      </div>
    </Section>
  </>;
}

Object.assign(window, { About });