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

export const Primary = () => (
  <Surface>
    <Section spacing="tight">
      <Container>
        <Stack gap={5} align="start">
          <Button href="/contact">Talk to us</Button>
        </Stack>
      </Container>
    </Section>
  </Surface>
);

export const WithSecondary = () => (
  <Surface>
    <Section spacing="tight">
      <Container>
        <Stack gap={4} align="start">
          <Button href="/cipherverifier">Explore CipherVerifier</Button>
          <TextLink href="/method">Explore the method</TextLink>
          <Text size="small" muted>A second action is a link, never a second button.</Text>
        </Stack>
      </Container>
    </Section>
  </Surface>
);

export const Small = () => (
  <Surface>
    <Section spacing="tight">
      <Container>
        <Stack gap={5} align="start">
          <Button size="small">Copy the report</Button>
        </Stack>
      </Container>
    </Section>
  </Surface>
);

export const OnNight = () => (
  <Surface tone="night">
    <Section spacing="tight">
      <Container>
        <Stack gap={4} align="start">
          <Button href="/contact">Talk to us</Button>
          <Text size="small" muted>On a night surface the button inverts itself.</Text>
        </Stack>
      </Container>
    </Section>
  </Surface>
);