// ===== About — Plasma v3 =====

function AboutPage() {
  const principles = [
    { t: 'Good design is invisible.', d: "If people are noticing the design instead of using the site, something's wrong. We design for the people doing the work, not the people judging the work." },
    { t: 'Speed matters.', d: 'A site that takes five seconds to load is a site that loses customers. Every site we ship is tuned for fast load times — mobile first, and not as an afterthought.' },
    { t: 'Custom beats generic.', d: "Every business is different. Your website should be too. We don't recycle templates and we don't pretend a theme is a strategy." },
    { t: 'Honesty over hype.', d: "We'll tell you what you need, not what gets us a bigger invoice. If a smaller package is right, we'll say so. If we're not the fit, we'll say that too." },
  ];
  return (
    <Page>
      <PageIntro
        eyebrow="About"
        title={<>Built by people who actually <span className="grad-text">care about the web.</span></>}
        sub="WebAnchor is a small studio based in Cape Town. We build custom websites and web applications for clients across the world."
      />

      <section className="section-sm">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'start' }}>
            <div className="card" style={{ padding: 36 }}>
              <span className="eyebrow">Our story</span>
              <div className="col" style={{ gap: 18, marginTop: 18 }}>
                <p style={{ fontSize: 17, color: 'var(--text)', lineHeight: 1.55 }}>
                  WebAnchor started with a simple frustration: too many small businesses end up with websites that don't reflect them.
                </p>
                <p style={{ fontSize: 15 }}>
                  Either they pay an agency thousands for something generic, or they cobble together a template that almost-but-not-quite works. We thought we could do better.
                </p>
                <p style={{ fontSize: 15 }}>
                  We're based in Cape Town and we work with clients across the world. Every site we build is custom — no copy-paste, no template farms. We take the time to understand what your business actually does before we touch a single pixel.
                </p>
              </div>
            </div>
            <div className="col" style={{ gap: 14 }}>
              {[
                ['Based in', 'Cape Town, South Africa', 'Working with clients across the world. Flexible on meeting times across time zones.'],
                ['How we work', 'Small studio, no layers', "You talk to the person actually building your site. No account managers in the middle."],
                ['Turnaround', '1–3 weeks', 'Most sites delivered inside three weeks. We work in short cycles so you see progress quickly.'],
              ].map(s => (
                <div key={s[0]} className="tile">
                  <div className="label" style={{ marginBottom: 6 }}>{s[0]}</div>
                  <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.022em' }}>{s[1]}</div>
                  <p style={{ fontSize: 13, marginTop: 8 }}>{s[2]}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <div className="card" style={{ padding: 36 }}>
            <span className="eyebrow">The web apps side</span>
            <div className="col" style={{ gap: 18, marginTop: 18 }}>
              <p style={{ fontSize: 17, color: 'var(--text)', lineHeight: 1.55 }}>
                Alongside websites, we build web applications. That started as a personal habit.
              </p>
              <p style={{ fontSize: 15 }}>
                We kept finding things in our own day-to-day that could be streamlined — small inefficiencies, repetitive tasks, processes that needed a better tool — and the apps to fix them either didn't exist or didn't quite do what we needed. So we built our own.
              </p>
              <p style={{ fontSize: 15 }}>
                Turns out a lot of people have the same problem. Now we build those tools for clients too. If you've ever thought "there should be an app for this," there's a good chance we can build it.
              </p>
              <Link to="/contact" className="btn btn-ghost" style={{ width: 'fit-content', marginTop: 8 }}>Tell us about your idea <Icon.Arr /></Link>
            </div>
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <SectionHead eyebrow="What we believe" title="Four things we hold to." sub="They sound simple. They aren't always easy. They make the work good." />
          <div className="grid grid-2">
            {principles.map(p => (
              <div key={p.t} className="card" style={{ padding: 32 }}>
                <Icon.Check style={{ color: 'var(--cyan)' }} />
                <h3 style={{ marginTop: 16 }}>{p.t}</h3>
                <p style={{ fontSize: 14.5, marginTop: 12 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaTail />
    </Page>
  );
}

Object.assign(window, { AboutPage });