import { Surface, Section, Container, Grid, Col, Stack, Heading, Text, TextLink } from 'ciphercell-homepage';

export const Asymmetric = () => (
  <Surface>
    <Section spacing="tight">
      <Container>
        <Grid>
          <Col span={7}>
            <Heading>Security is built in,<br />not bolted on.</Heading>
          </Col>
          <Col span={4} start={9}>
            <Stack gap={5} align="start">
              <Text measure>
                We model real adversaries and build zero trust into the architecture rather than
                around it.
              </Text>
              <TextLink href="/about">About CipherCell</TextLink>
            </Stack>
          </Col>
        </Grid>
      </Container>
    </Section>
  </Surface>
);

export const Thirds = () => (
  <Surface>
    <Section spacing="tight">
      <Container>
        <Grid>
          <Col span={4}>
            <Stack gap={3}>
              <Heading level={3}>Private 5G</Heading>
              <Text size="small" muted>Open interfaces, many vendors.</Text>
            </Stack>
          </Col>
          <Col span={4}>
            <Stack gap={3}>
              <Heading level={3}>Critical networks</Heading>
              <Text size="small" muted>Where a breach stops production.</Text>
            </Stack>
          </Col>
          <Col span={4}>
            <Stack gap={3}>
              <Heading level={3}>Cloud-native</Heading>
              <Text size="small" muted>Security that runs as code.</Text>
            </Stack>
          </Col>
        </Grid>
      </Container>
    </Section>
  </Surface>
);