import * as React from 'react'
import * as M from '@material-ui/core'

import Bar from 'website/components/Bar'
import ChevronLink from 'website/components/ChevronLink'
import Overlay1Full from 'website/components/Backgrounds/Overlay1Full'
import Overlay2 from 'website/components/Backgrounds/Overlay2'
import Screenshots from 'website/components/Screenshots'

const useStyles = M.makeStyles((t) => ({
  root: {
    paddingTop: t.spacing(9),
    position: 'relative',
  },
  container: {
    display: 'grid',
    paddingBottom: t.spacing(5),
    position: 'relative',
    [t.breakpoints.up('md')]: {
      gridColumnGap: t.spacing(10),
      gridTemplateColumns: '1fr 1fr',
      gridTemplateAreas: '"text carousel"',
    },
    [t.breakpoints.up('lg')]: {
      gridTemplateColumns: '1fr 640px',
    },
    [t.breakpoints.down('sm')]: {
      gridRowGap: t.spacing(8),
      gridTemplateRows: 'auto auto',
      gridTemplateAreas: `
        "text"
        "carousel"
      `,
    },
  },
  text: {
    gridArea: 'text',
  },
  textInner: {
    [t.breakpoints.up('md')]: {
      maxWidth: 400,
    },
  },
  carousel: {
    gridArea: 'carousel',
    [t.breakpoints.up('md')]: {
      paddingTop: t.spacing(6),
    },
  },
}))

export default function Showcase() {
  const classes = useStyles()
  return (
    <div className={classes.root}>
      <Overlay2 />
      <Overlay1Full top={-80} />
      <M.Container maxWidth="lg" className={classes.container}>
        <div className={classes.text}>
          <div className={classes.textInner}>
            <Bar color="primary" />
            <M.Box mt={5}>
              <M.Typography variant="h1" color="textPrimary">
                Experiment faster with versioned data sets
              </M.Typography>
            </M.Box>
            <M.Box mt={4}>
              <M.Typography variant="body1" color="textSecondary">
                Quilt gives you a Python API, web catalog, and backend stack to manage
                data sets in S3.
              </M.Typography>
            </M.Box>
            <M.Box mt={2}>
              <M.Typography variant="body1" color="textSecondary">
                Share, understand, discover, and model data at scale.
              </M.Typography>
            </M.Box>
            <M.Box mt={5}>
              <M.Button
                variant="contained"
                color="primary"
                href="https://www.meetingbird.com/m/S19vxyVOH"
              >
                Book demo
              </M.Button>
              <M.Box display="inline-block" ml={2} />
              <M.Button
                variant="contained"
                color="secondary"
                href="https://open.quiltdata.com"
              >
                Explore open data
              </M.Button>
            </M.Box>
            <M.Box mt={5}>
              <ChevronLink href="#pricing">Try now</ChevronLink>
            </M.Box>
            <M.Box mt={1}>
              <ChevronLink href="#get-notified">Stay informed about Quilt</ChevronLink>
            </M.Box>
          </div>
        </div>
        <Screenshots className={classes.carousel} />
      </M.Container>
    </div>
  )
}

@@ -1697,32 +1697,34 @@
 ter 
-with versioned data sets
+by managing data like code
 %0A   
@@ -1885,110 +1885,481 @@
     
-Quilt gives you a Python API, web catalog, and backend stack to manage%0A                data sets in S3
+Most teams are already on top of their code and containers, but their data%0A                lags behind.%0A              %3C/M.Typography%3E%0A            %3C/M.Box%3E%0A            %3CM.Box mt=%7B4%7D%3E%0A              %3CM.Typography variant=%22body1%22 color=%22textSecondary%22%3E%0A                Quilt transforms data into versioned, reusable datasets so that teams in%0A                machine learning and computational biology can iterate faster, reduce%0A                errors, and deploy smarter models
 .%0A  
@@ -2430,17 +2430,17 @@
 Box mt=%7B
-2
+4
 %7D%3E%0A     
@@ -2521,60 +2521,112 @@
     
-Share, understand, discover, and model data 
+Quilt consists of a Python API, web catalog, and backend stack to manage%0A                d
 at
+a
  s
-cale
+ets in S3
 .%0A  
@@ -3166,17 +3166,23 @@
 ore 
-open data
+data with Quilt
 %0A   
@@ -3289,25 +3289,254 @@
 ef=%22
-#pricing%22%3ETry now
+https://docs.quiltdata.com/installation%22%3E%0A                Create your first dataset in Python%0A              %3C/ChevronLink%3E%0A            %3C/M.Box%3E%0A            %3CM.Box mt=%7B1%7D%3E%0A              %3CChevronLink href=%22#pricing%22%3EInstall the Quilt portal for AWS
 %3C/Ch

revise landing messaging (#1455)