/* About page. */

const DS_about = window.DawsonsDesignSystem_489d7d;

function About({ onNavigate }) {
  const { SectionHeading, StatTile, Icon, Badge, Button } = DS_about;
  const values = [
    { icon: 'shield-check', title: 'Do it once, do it right', text: 'Compliant, certified work we\u2019re happy to put our name to.' },
    { icon: 'message-square', title: 'Straight talking', text: 'Clear quotes, honest advice and no hidden extras.' },
    { icon: 'sparkles', title: 'Leave it tidy', text: 'We treat your home or premises with respect, every visit.' },
  ];
  return (
    <div>
      <PageHeader eyebrow="About Dawsons" title="A multi-trade team you can rely on"
        intro="Family-run since 1999, we've grown into one of the region's most trusted names for electrical, heating, plumbing and building work." />

      <section className="section">
        <div className="container container-wide">
          <div className="grid-2">
            <div>
              <SectionHeading eyebrow="Our story" title="Built on doing right by people" />
              <p style={{ marginTop: 18, color: 'var(--text-secondary)', lineHeight: 1.7 }}>
                Dawsons started as a two-man electrical outfit working domestic jobs across Sheffield. Word spread — not because of clever marketing, but because we turned up, did tidy work and stood behind it.
              </p>
              <p style={{ marginTop: 14, color: 'var(--text-secondary)', lineHeight: 1.7 }}>
                Today we're a full multi-trade team covering domestic, commercial and industrial projects across South Yorkshire and Greater Manchester. Same values, bigger toolkit: design, build, test and maintain — all in-house.
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 26, flexWrap: 'wrap' }}>
                {window.SITE.accreditations.map((a) => <Badge key={a} tone="neutral" icon="badge-check">{a}</Badge>)}
              </div>
            </div>
            <Photo label="The Dawsons team on site" icon="users" style={{ minHeight: 420, borderRadius: 'var(--radius-xl)' }} />
          </div>
        </div>
      </section>

      <section className="section dark" style={{ paddingBlock: 'var(--space-9)' }}>
        <div className="container container-wide">
          <div className="grid-4" style={{ gap: 24 }}>
            {window.SITE.stats.map((s) => <StatTile key={s.label} value={s.value} suffix={s.suffix} label={s.label} theme="light" align="center" />)}
          </div>
        </div>
      </section>

      <section className="section subtle">
        <div className="container container-wide">
          <SectionHeading eyebrow="What we stand for" title="The standards behind every job" align="center" style={{ marginBottom: 44 }} />
          <div className="grid-3">
            {values.map((v) => (
              <div key={v.title} style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderTop: 'var(--accent-rule)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)', boxShadow: 'var(--shadow-sm)' }}>
                <span style={{ display: 'inline-flex', width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--brand-soft)', color: 'var(--brand)', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                  <Icon name={v.icon} size={24} />
                </span>
                <h3 style={{ fontSize: 'var(--fs-h3)', marginBottom: 8 }}>{v.title}</h3>
                <p style={{ color: 'var(--text-secondary)', margin: 0, lineHeight: 1.6 }}>{v.text}</p>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 44 }}>
            <Button variant="primary" size="lg" iconRight="arrow-right" onClick={() => onNavigate('Contact')}>Work with us</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { About });