import { DashedGridOverlay } from 'components/patterns/DashedGridOverlay'
import React from 'react'
import styled, { keyframes } from 'styled-components'
import { Check as CheckIcon, X as XIcon } from 'react-feather'

import Box from 'components/elements/Box'
import { Button } from 'components/elements/Button/Button'
import Caps from 'components/elements/Caps'
import Container from 'components/elements/Container'
import Flex from 'components/elements/Flex'
import { Link } from 'components/elements/Link'
import LineBreak from 'components/elements/LineBreak'
import Meta from 'components/elements/Meta/Meta'
import { PLANS } from 'components/elements/PricePicker'
import Heading from 'components/elements/Heading'
import Subhead from 'components/elements/Subhead'
import Text from 'components/elements/Text'
import FeatherIcon from 'components/icons/Feather'
import { useSiteMetadata } from 'components/hook/use-site-meta'
import ArrowLink from 'components/patterns/ArrowLink'
import Caption from 'components/patterns/Caption/Caption'
import Faq from 'components/patterns/Faq/Faq'
import Layout from 'components/patterns/Layout'
import {
  CurrencyProvider,
  useCurrencyContext
} from 'components/hook/use-currency'
import Plans from 'components/patterns/Plans/Plans'
import { CURRENCIES, formatPrice } from 'components/patterns/Plans/shared'
import { trackEvent } from 'helpers/plausible'
import { CDN_EDGES } from 'helpers/cdn-edges'
import {
  borders,
  colors,
  gradient,
  layout,
  radii,
  space,
  theme,
  transition,
  shadows,
  SECTION_VERTICAL_SPACING
} from 'theme'

const FAQ_SCHEMA = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: [
    {
      '@type': 'Question',
      name: 'Is there really a free plan?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Yes — the free plan is forever free, no credit card required. You get 25 requests per day against the public endpoint, with the same screenshot, PDF, metadata, SDK, insights and recipes capabilities used on Pro. It runs with rate limits and shared concurrency, so it\u2019s ideal for prototypes, side-projects and evaluation. When you outgrow it, upgrade in a click.'
      }
    },
    {
      '@type': 'Question',
      name: 'What counts as a request?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'One request is one API call to a Microlink endpoint — screenshot, PDF, metadata, insights, or any other. Cached responses count too, but they\u2019re served from our edge in milliseconds and don\u2019t exhaust your concurrency.'
      }
    },
    {
      '@type': 'Question',
      name: 'What happens if I exceed my quota?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'You\u2019re never billed by surprise. We notify you at 80% usage so you can upgrade before hitting the ceiling. If you do reach 100%, requests are paused until the next billing cycle or until you upgrade — no overage fees.'
      }
    },
    {
      '@type': 'Question',
      name: 'Can I change plan at any time?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Yes. Upgrades take effect immediately and are pro-rated; downgrades apply at the start of the next billing cycle. Just email hello@microlink.io from the address you signed up with.'
      }
    },
    {
      '@type': 'Question',
      name: 'Can I cancel anytime?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Yes — no contracts, no commitments. Cancel by sending an email to hello@microlink.io and we\u2019ll process it within 24 hours. You keep access through the end of your paid period.'
      }
    },
    {
      '@type': 'Question',
      name: 'Do you offer annual billing or volume discounts?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Annual contracts and custom volume discounts are available on Enterprise. Contact hello@microlink.io with your expected volume and we\u2019ll send a quote.'
      }
    },
    {
      '@type': 'Question',
      name: 'How is payment processed?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Payments are handled by Stripe — the same provider trusted by Twitter, Pinterest, and Lyft. We never see or store your card details. Invoices are emailed automatically each cycle.'
      }
    },
    {
      '@type': 'Question',
      name: 'Do you offer refunds?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'If something goes wrong on our side, we\u2019ll make it right — including refunds. Reach out at hello@microlink.io and we\u2019ll review your case personally.'
      }
    },
    {
      '@type': 'Question',
      name: "What's your SLA?",
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'We commit to 99.9% uptime (three nines) on paid plans. You can monitor live availability and incident history on our status page at https://microlink.io/status.'
      }
    },
    {
      '@type': 'Question',
      name: 'When do I need Enterprise?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Enterprise makes sense when you need any of: dedicated infrastructure, custom API endpoints, S3-compatible storage, custom SLAs, a signed DPA, or pricing for very high volumes (millions of requests / month). See https://microlink.io/enterprise for details, or email hello@microlink.io.'
      }
    },
    {
      '@type': 'Question',
      name: 'How do I get an API key?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'After payment we send the API key to the email you signed up with. Use it as a header in the API or as the apiKey option in the SDK.'
      }
    }
  ]
}

export const Head = () => {
  const proOffers = PLANS.map(({ id, monthlyPrice, reqsPerMonth }) => ({
    '@type': 'Offer',
    sku: id,
    name: `Pro · ${reqsPerMonth} requests / month`,
    price: monthlyPrice.EUR.toFixed(2),
    priceCurrency: 'EUR',
    availability: 'https://schema.org/InStock',
    url: 'https://microlink.io/pricing',
    priceSpecification: {
      '@type': 'UnitPriceSpecification',
      price: monthlyPrice.EUR.toFixed(2),
      priceCurrency: 'EUR',
      billingIncrement: 1,
      unitCode: 'MON',
      referenceQuantity: {
        '@type': 'QuantitativeValue',
        value: reqsPerMonth.replace(/,/g, ''),
        unitCode: 'C62'
      }
    }
  }))

  const productSchema = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: 'Microlink — Pricing',
    description:
      'Simple, predictable pricing for the Microlink browser API. Start free, scale to millions of requests, with custom Enterprise tiers when you need them.',
    brand: { '@type': 'Brand', name: 'Microlink' },
    image: 'https://cdn.microlink.io/logo/logo.png',
    url: 'https://microlink.io/pricing',
    offers: [
      {
        '@type': 'Offer',
        sku: 'free',
        name: 'Free · 25 requests / day',
        price: '0',
        priceCurrency: 'EUR',
        availability: 'https://schema.org/InStock',
        url: 'https://microlink.io/pricing'
      },
      ...proOffers,
      {
        '@type': 'Offer',
        sku: 'enterprise',
        name: 'Enterprise · custom volume',
        price: '500',
        priceCurrency: 'EUR',
        availability: 'https://schema.org/InStock',
        url: 'https://microlink.io/enterprise'
      }
    ]
  }

  return (
    <Meta
      title='Pricing'
      description='Simple, predictable pricing for the Microlink browser API. Start free, scale to millions of requests, with custom Enterprise tiers when you need them.'
      structured={[productSchema, FAQ_SCHEMA]}
    />
  )
}

const Hero = () => {
  return (
    <Container
      as='section'
      css={theme({
        alignItems: 'center',
        textAlign: 'center',
        maxWidth: '100%',
        pt: [2, 2, 3, 3],
        px: [3, 3, 4, 4]
      })}
    >
      <Heading css={theme({ maxWidth: layout.large })}>
        Simple to start. Ready to scale.
      </Heading>

      <Caption
        forwardedAs='div'
        css={theme({
          pt: [3, 3, 4, 4],
          maxWidth: [layout.small, layout.small, layout.normal, layout.normal]
        })}
      >
        Start free. No seats, no minimums, no surprises.
      </Caption>
    </Container>
  )
}

const PLAN_NAMES = ['Free', 'Pro', 'Enterprise']

const COMPARISON_ROWS = [
  {
    label: 'Daily quota',
    values: ['25 req/day', 'Unlimited', 'Unlimited']
  },
  {
    label: 'Monthly quota',
    values: ['~1.5K req/month', '46K – 420K req/month', 'Millions+']
  },
  { label: 'Custom cache key', values: [false, true, true] },
  { label: 'Configurable TTL', values: [false, true, true] },
  { label: 'Custom HTTP headers', values: [false, true, true] },
  { label: 'Automatic proxy resolution', values: [false, true, true] },
  { label: 'Adblock & cookie banners', values: [true, true, true] },
  { label: 'Global CDN edge cache', values: ['Shared', 'Shared', 'Dedicated'] },
  { label: 'Concurrency', values: ['Limited', 'Standard', 'Custom'] },
  { label: 'SLA', values: ['Best effort', '99.9%', '99,99%'] },
  {
    label: 'Support',
    values: ['Community', 'Priority email', 'Dedicated channel']
  },
  { label: 'Dedicated endpoint', values: [false, false, true] }
]

const ComparisonTable = styled(Box)`
  ${theme({ width: '100%', bg: 'white', borderRadius: 3, overflow: 'hidden' })}
  border: 1px solid ${colors.black10};
  box-shadow: ${shadows[1]};
`

const ComparisonRow = styled(Flex)`
  ${theme({ alignItems: 'stretch', width: '100%' })}
  border-top: 1px solid ${colors.black10};
  &:first-of-type {
    border-top: 0;
  }
`

const ComparisonHeaderRow = styled(ComparisonRow)`
  ${theme({ bg: 'black05' })}
  border-top: 0;
`

const ComparisonLabelCell = styled(Flex)`
  ${theme({
    flex: '1.4 1 0',
    minWidth: 0,
    px: [2, 3, 4, 4],
    py: [3, 3, 3, 3],
    alignItems: 'center',
    justifyContent: 'flex-start',
    fontFamily: 'sans',
    fontSize: [0, 1, '15px', '15px'],
    fontWeight: 'bold',
    color: 'black'
  })}
`

const ComparisonPlanCell = styled(Flex)`
  ${theme({
    flex: '1 1 0',
    minWidth: 0,
    px: [2, 3, 3, 3],
    py: [3, 3, 3, 3],
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    fontFamily: 'sans',
    fontSize: [0, 1, 1, 1],
    color: 'black80',
    fontVariantNumeric: 'tabular-nums'
  })}
`

const ComparisonProPlanCell = styled(ComparisonPlanCell)`
  ${theme({ bg: 'pink0', color: 'black' })}
`

const ComparisonHeaderLabelCell = styled(ComparisonLabelCell)`
  ${theme({ fontSize: [0, 1, 2, 2], letterSpacing: 1 })}
`

const ComparisonHeaderPlanCell = styled(ComparisonPlanCell)`
  ${theme({ fontWeight: 'bold', color: 'black', fontSize: [0, 1, 2, 2] })}
`

const ComparisonProHeaderPlanCell = styled(ComparisonHeaderPlanCell)`
  ${theme({ bg: 'black05', color: 'secondary' })}
`

const renderComparisonValue = value => {
  if (value === true) {
    return (
      <FeatherIcon
        icon={CheckIcon}
        size='16px'
        css={theme({ color: 'secondary' })}
        aria-label='Included'
      />
    )
  }
  if (value === false) {
    return (
      <Text
        as='span'
        aria-label='Not included'
        css={theme({ color: 'black30', fontWeight: 'bold' })}
      >
        —
      </Text>
    )
  }
  return value
}

const MobileComparisonStack = ({ plan, planIndex }) => (
  <Box
    css={theme({
      bg: 'white',
      borderRadius: 3,
      border: 1,
      borderColor: 'black10',
      fontFamily: 'sans',
      overflow: 'hidden'
    })}
  >
    <Text
      css={theme({
        fontSize: 2,
        fontWeight: 'bold',
        bg: planIndex === 1 ? 'pink0' : 'white',
        px: 3,
        py: 3,
        borderBottom: 1,
        borderBottomColor: 'black10'
      })}
      style={{ color: planIndex === 1 ? colors.secondary : colors.black }}
    >
      {plan}
    </Text>
    <Box css={theme({ pt: 2, px: 3, pb: 3 })}>
      {COMPARISON_ROWS.map(({ label, values }) => (
        <Flex
          key={label}
          css={theme({
            justifyContent: 'space-between',
            alignItems: 'center',
            py: 2,
            fontSize: 1
          })}
        >
          <Text as='span' css={theme({ color: 'black70', pr: 2 })}>
            {label}
          </Text>
          <Box css={theme({ textAlign: 'right', color: 'black' })}>
            {renderComparisonValue(values[planIndex])}
          </Box>
        </Flex>
      ))}
    </Box>
  </Box>
)

const Comparison = () => (
  <Container
    as='section'
    id='comparison'
    css={theme({
      bg: 'white',
      maxWidth: '100%',
      py: SECTION_VERTICAL_SPACING,
      px: [3, 3, 4, 4],
      alignItems: 'center'
    })}
  >
    <Box
      css={theme({
        textAlign: 'center',
        maxWidth: layout.normal,
        pb: [4, 4, 5, 5]
      })}
    >
      <Subhead>
        Compare every feature,
        <LineBreak />
        side by <span css={theme({ color: 'secondary' })}>side</span>.
      </Subhead>
      <Caption forwardedAs='div' css={theme({ pt: [3, 3, 4, 4] })}>
        Every paid plan unlocks the same toolbox. Pick the volume that matches
        your traffic — upgrade or downgrade in a click.
      </Caption>
    </Box>

    <Box
      css={theme({
        display: ['none', 'none', 'block', 'block'],
        width: '100%',
        maxWidth: layout.large
      })}
    >
      <ComparisonTable role='table'>
        <Box role='rowgroup'>
          <ComparisonHeaderRow role='row'>
            <ComparisonHeaderLabelCell role='columnheader'>
              Feature
            </ComparisonHeaderLabelCell>
            {PLAN_NAMES.map((name, i) =>
              i === 1
                ? (
                  <ComparisonProHeaderPlanCell role='columnheader' key={name}>
                    {name}
                  </ComparisonProHeaderPlanCell>
                  )
                : (
                  <ComparisonHeaderPlanCell role='columnheader' key={name}>
                    {name}
                  </ComparisonHeaderPlanCell>
                  )
            )}
          </ComparisonHeaderRow>
        </Box>
        <Box role='rowgroup'>
          {COMPARISON_ROWS.map(({ label, values }) => (
            <ComparisonRow role='row' key={label}>
              <ComparisonLabelCell role='rowheader'>
                {label}
              </ComparisonLabelCell>
              {values.map((value, i) =>
                i === 1
                  ? (
                    <ComparisonProPlanCell role='cell' key={PLAN_NAMES[i]}>
                      {renderComparisonValue(value)}
                    </ComparisonProPlanCell>
                    )
                  : (
                    <ComparisonPlanCell role='cell' key={PLAN_NAMES[i]}>
                      {renderComparisonValue(value)}
                    </ComparisonPlanCell>
                    )
              )}
            </ComparisonRow>
          ))}
        </Box>
      </ComparisonTable>
    </Box>

    <Box
      css={theme({
        display: ['flex', 'flex', 'none', 'none'],
        flexDirection: 'column',
        gap: 3,
        width: '100%',
        maxWidth: layout.normal
      })}
    >
      {PLAN_NAMES.map((plan, i) => (
        <MobileComparisonStack key={plan} plan={plan} planIndex={i} />
      ))}
    </Box>
  </Container>
)

const ClockIcon = (
  <svg
    width='20'
    height='20'
    viewBox='0 0 24 24'
    fill='none'
    stroke='currentColor'
    strokeWidth='2'
    strokeLinecap='round'
    strokeLinejoin='round'
    aria-hidden='true'
  >
    <circle cx='12' cy='12' r='10' />
    <polyline points='12 6 12 12 16 14' />
  </svg>
)
const HeaderIcon = (
  <svg
    width='20'
    height='20'
    viewBox='0 0 24 24'
    fill='none'
    stroke='currentColor'
    strokeWidth='2'
    strokeLinecap='round'
    strokeLinejoin='round'
    aria-hidden='true'
  >
    <line x1='4' y1='9' x2='20' y2='9' />
    <line x1='4' y1='15' x2='20' y2='15' />
    <line x1='10' y1='3' x2='8' y2='21' />
    <line x1='16' y1='3' x2='14' y2='21' />
  </svg>
)
const ProxyIcon = (
  <svg
    width='20'
    height='20'
    viewBox='0 0 24 24'
    fill='none'
    stroke='currentColor'
    strokeWidth='2'
    strokeLinecap='round'
    strokeLinejoin='round'
    aria-hidden='true'
  >
    <circle cx='12' cy='12' r='10' />
    <line x1='2' y1='12' x2='22' y2='12' />
    <path d='M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z' />
  </svg>
)
const ShieldXIcon = (
  <svg
    width='20'
    height='20'
    viewBox='0 0 24 24'
    fill='none'
    stroke='currentColor'
    strokeWidth='2'
    strokeLinecap='round'
    strokeLinejoin='round'
    aria-hidden='true'
  >
    <path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' />
    <line x1='9' y1='9' x2='15' y2='15' />
    <line x1='15' y1='9' x2='9' y2='15' />
  </svg>
)
const CAPABILITIES = [
  {
    icon: ClockIcon,
    title: 'Configurable cache (TTL)',
    description:
      'Tune cache lifetime per request. Cached hits are served from the edge and billed at a fraction of the price.',
    href: '/features/ttl'
  },
  {
    icon: HeaderIcon,
    title: 'Custom HTTP headers',
    description:
      'Forward auth tokens, cookies, or any custom headers. Reach private dashboards, gated content, and authenticated APIs.',
    href: '/features/headers'
  },
  {
    icon: ProxyIcon,
    title: 'Automatic proxy resolution',
    description:
      'Bypass geo-restrictions and avoid IP blocks with rotating residential proxies. Pick the country, we handle the rest.',
    href: '/features/proxy'
  },
  {
    icon: ShieldXIcon,
    title: 'Adblock & cookie banners',
    description:
      'Strip ads, trackers, and consent banners automatically so screenshots and previews stay clean and consistent.',
    href: '/docs/api/parameters/adblock'
  }
]

const CapabilityIcon = styled(Flex)`
  ${theme({
    width: space[4],
    height: space[4],
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
    color: 'secondary',
    bg: 'pinkest'
  })}
`

const CapabilityTile = ({ icon, title, description, href }) => (
  <Flex
    css={theme({
      gap: 3,
      alignItems: 'flex-start',
      flex: [
        '1 1 100%',
        '1 1 100%',
        '1 1 calc(50% - 16px)',
        '1 1 calc(33.333% - 24px)'
      ],
      minWidth: 0
    })}
  >
    <CapabilityIcon>{icon}</CapabilityIcon>
    <Flex
      css={theme({ flexDirection: 'column', gap: 1, flex: 1, minWidth: 0 })}
    >
      <Text
        css={theme({
          fontWeight: 'bold',
          fontSize: [2, 2, '18px', '18px'],
          color: 'black',
          lineHeight: 1
        })}
      >
        {title}
      </Text>
      <Text
        css={theme({
          fontSize: [1, 1, '15px', '15px'],
          color: 'black70',
          lineHeight: 2
        })}
      >
        {description}
      </Text>
      {href && (
        <Box css={theme({ pt: 1 })}>
          <ArrowLink
            href={href}
            css={theme({
              fontSize: [0, 0, 1, 1],
              fontWeight: 'bold'
            })}
          >
            Read the docs
          </ArrowLink>
        </Box>
      )}
    </Flex>
  </Flex>
)

const Capabilities = () => (
  <Container
    as='section'
    id='capabilities'
    css={theme({
      bg: 'white',
      maxWidth: '100%',
      py: SECTION_VERTICAL_SPACING,
      px: [3, 3, 4, 4],
      alignItems: 'center'
    })}
  >
    <Box
      css={theme({
        textAlign: 'left',
        width: '100%',
        maxWidth: layout.large,
        pb: [4, 4, 5, 5]
      })}
    >
      <Subhead
        css={theme({
          textAlign: 'left'
        })}
      >
        Everything you need,
        <LineBreak />
        in <span css={theme({ color: 'secondary' })}>one API call</span>.
      </Subhead>
      <Caption
        forwardedAs='div'
        css={theme({
          pt: [3, 3, 4, 4],
          textAlign: 'left',
          maxWidth: layout.normal
        })}
      >
        Every paid plan unlocks the same set of capabilities. Pay for the volume
        you need, not for features you don&apos;t.
      </Caption>
    </Box>
    <Flex
      css={theme({
        width: '100%',
        maxWidth: layout.large,
        flexWrap: 'wrap',
        rowGap: [4, 4, 4, 5],
        columnGap: [0, 0, 4, 5]
      })}
    >
      {CAPABILITIES.map(cap => (
        <CapabilityTile key={cap.title} {...cap} />
      ))}
    </Flex>
  </Container>
)

const BUILD_BULLETS = [
  'Spin up Chromium clusters and babysit browser pools.',
  '$200–$800 / month minimum on infra (browsers are RAM-hungry).',
  '~2 weeks to a working v1, then ~4 hrs / month maintenance.',
  'Build retries, caching, proxies, and adblock from scratch.',
  'Wake up at 3 a.m. when the cluster goes down.'
]

const BUY_BULLETS = [
  'One HTTP call. No SDK to install, no daemon to run.',
  'Start at €0. Pay only for the volume you actually use.',
  'Zero ops: cache, proxies, adblock, retries baked in.',
  `${CDN_EDGES} edge nodes, 99.9% SLA, isolated browsers per request.`,
  'Spend engineering time on your product, not on Chromium.'
]

const BvbCard = styled(Flex)`
  ${theme({
    flexDirection: 'column',
    flex: 1,
    minWidth: 0,
    borderRadius: 3,
    px: [3, 3, 4, 4],
    py: [4, 4, 5, 5],
    bg: 'white'
  })}
  border: ${borders[1]};
`

const BuildCard = styled(BvbCard)`
  ${theme({ bg: 'black05' })}
  border-color: ${colors.black10};
`

const BuyCard = styled(BvbCard)`
  border: 2px solid transparent;
  background: linear-gradient(${colors.white}, ${colors.white}) padding-box,
    ${gradient} border-box;
`

const BvbBullet = ({ children, kind }) => (
  <Flex css={theme({ alignItems: 'flex-start', gap: 2, pt: [2, 2, 3, 3] })}>
    <FeatherIcon
      css={theme({
        flexShrink: 0,
        mt: '3px',
        color: kind === 'buy' ? 'secondary' : 'black40'
      })}
      icon={kind === 'buy' ? CheckIcon : XIcon}
      size='16px'
    />
    <Text
      as='span'
      css={theme({
        fontSize: [1, 1, '15px', '15px'],
        color: kind === 'buy' ? 'black' : 'black70',
        lineHeight: 2
      })}
    >
      {children}
    </Text>
  </Flex>
)

const BuildVsBuy = () => (
  <Container
    as='section'
    id='build-vs-buy'
    css={theme({
      bg: 'white',
      maxWidth: '100%',
      py: SECTION_VERTICAL_SPACING,
      px: [3, 3, 4, 4],
      alignItems: 'center'
    })}
  >
    <Box
      css={theme({
        textAlign: 'center',
        maxWidth: layout.normal,
        pb: [4, 4, 5, 5]
      })}
    >
      <Subhead>
        Build it, or just{' '}
        <span css={theme({ color: 'secondary' })}>call it</span>.
      </Subhead>
      <Caption forwardedAs='div' css={theme({ pt: [3, 3, 4, 4] })}>
        We&apos;ve been running headless browsers in production since 2017. So
        you don&apos;t have to.
      </Caption>
    </Box>
    <Flex
      css={theme({
        width: '100%',
        maxWidth: layout.large,
        flexDirection: ['column', 'column', 'row', 'row'],
        alignItems: 'stretch',
        gap: [3, 3, 4, 4]
      })}
    >
      <BuildCard>
        <Text
          as='span'
          css={theme({
            fontSize: 0,
            fontWeight: 'bold',
            letterSpacing: 2,
            color: 'black60',
            textTransform: 'uppercase'
          })}
        >
          Run it yourself
        </Text>
        <Text
          css={theme({
            pt: 2,
            fontSize: ['22px', '22px', '26px', '26px'],
            fontWeight: 'bold',
            color: 'black',
            lineHeight: 1
          })}
        >
          The DIY tax.
        </Text>
        <Box css={theme({ pt: [3, 3, 4, 4], flex: 1 })}>
          {BUILD_BULLETS.map(b => (
            <BvbBullet key={b} kind='build'>
              {b}
            </BvbBullet>
          ))}
        </Box>
      </BuildCard>
      <BuyCard>
        <Text
          as='span'
          css={theme({
            fontSize: 0,
            fontWeight: 'bold',
            letterSpacing: 2,
            color: 'secondary',
            textTransform: 'uppercase'
          })}
        >
          Use Microlink
        </Text>
        <Text
          css={theme({
            pt: 2,
            fontSize: ['22px', '22px', '26px', '26px'],
            fontWeight: 'bold',
            color: 'black',
            lineHeight: 1
          })}
        >
          Headless browsers, as a service.
        </Text>
        <Box css={theme({ pt: [3, 3, 4, 4], flex: 1 })}>
          {BUY_BULLETS.map(b => (
            <BvbBullet key={b} kind='buy'>
              {b}
            </BvbBullet>
          ))}
        </Box>
      </BuyCard>
    </Flex>
  </Container>
)

// TODO: replace with real customer quotes once collected.
const TESTIMONIALS = [
  {
    quote:
      'We swapped our headless cluster for the Microlink API in an afternoon. Costs dropped, p99 latency halved, on-call pages went away.',
    author: 'Alex Rivera',
    role: 'Staff Engineer',
    company: 'Beam Analytics'
  },
  {
    quote:
      'Pricing is the part nobody likes about infra APIs. With Microlink we know exactly what we pay before we ship — and the unit price is hard to beat.',
    author: 'Priya Patel',
    role: 'Head of Platform',
    company: 'Spool'
  },
  {
    quote:
      'Free plan got us to MVP. Pro carried us to product-market fit. Now Enterprise runs the whole pipeline. One vendor for the entire journey.',
    author: 'Marco Bianchi',
    role: 'Co-founder & CTO',
    company: 'Lumen Labs'
  }
]

const initialsOf = name =>
  name
    .split(' ')
    .map(p => p[0])
    .slice(0, 2)
    .join('')
    .toUpperCase()

const TestimonialCard = styled(Flex)`
  ${theme({
    flexDirection: 'column',
    flex: ['1 1 100%', '1 1 100%', '1 1 0', '1 1 0'],
    minWidth: 0,
    bg: 'white',
    borderRadius: 3,
    p: [3, 3, 4, 4],
    position: 'relative'
  })}
  border: ${borders[1]};
  box-shadow: ${shadows[1]};
  transition: box-shadow 200ms ease, transform 200ms ease;
  &:hover {
    box-shadow: ${shadows[3]};
    transform: translateY(-2px);
  }
`

const QuoteGlyph = styled(Text)`
  ${theme({
    fontSize: ['54px', '54px', '64px', '64px'],
    color: 'secondary',
    fontWeight: 'bold',
    lineHeight: 0
  })}
  position: absolute;
  top: 12px;
  left: 16px;
  user-select: none;
  pointer-events: none;
`

const Avatar = styled(Flex)`
  ${theme({
    width: '40px',
    height: '40px',
    borderRadius: 6,
    alignItems: 'center',
    justifyContent: 'center',
    bg: 'pinkest',
    color: 'secondary',
    fontWeight: 'bold',
    fontSize: 1,
    flexShrink: 0
  })}
`

const Testimonial = ({ quote, author, role, company }) => (
  <TestimonialCard as='figure' css={{ margin: 0 }}>
    <QuoteGlyph aria-hidden='true' as='span'>
      &ldquo;
    </QuoteGlyph>
    <Text
      as='blockquote'
      css={theme({
        m: 0,
        pt: [4, 4, 5, 5],
        fontSize: [1, 2, 2, 2],
        lineHeight: 2,
        color: 'black',
        flex: 1
      })}
    >
      {quote}
    </Text>
    <Flex
      as='figcaption'
      css={theme({ pt: [3, 3, 4, 4], gap: 3, alignItems: 'center' })}
    >
      <Avatar aria-hidden='true'>{initialsOf(author)}</Avatar>
      <Box>
        <Text
          css={theme({
            fontSize: [1, 1, '15px', '15px'],
            fontWeight: 'bold',
            color: 'black'
          })}
        >
          {author}
        </Text>
        <Text css={theme({ fontSize: 0, color: 'black60' })}>
          {role} · {company}
        </Text>
      </Box>
    </Flex>
  </TestimonialCard>
)

const Testimonials = () => (
  <Container
    as='section'
    id='testimonials'
    css={theme({
      display: 'none', // Remove this once we have real testimonials
      bg: 'white',
      maxWidth: '100%',
      py: SECTION_VERTICAL_SPACING,
      px: [3, 3, 4, 4],
      alignItems: 'center'
    })}
  >
    <Box
      css={theme({
        textAlign: 'center',
        maxWidth: layout.normal,
        pb: [4, 4, 5, 5]
      })}
    >
      <Subhead>
        Loved by teams in{' '}
        <span css={theme({ color: 'secondary' })}>production</span>.
      </Subhead>
      <Caption forwardedAs='div' css={theme({ pt: [3, 3, 4, 4] })}>
        Engineers, founders and platform teams pick Microlink because it just
        works.
      </Caption>
    </Box>
    <Flex
      css={theme({
        width: '100%',
        maxWidth: layout.large,
        flexDirection: ['column', 'column', 'row', 'row'],
        alignItems: 'stretch',
        gap: [3, 3, 4, 4]
      })}
    >
      {TESTIMONIALS.map(t => (
        <Testimonial key={t.author} {...t} />
      ))}
    </Flex>
  </Container>
)

const CLIENTS = [
  {
    name: 'Community',
    description: 'Fan engagement platform',
    url: 'https://community.com',
    logo: (
      <img
        src='/images/clients/community.com.png'
        alt='Community'
        width='28'
        height='28'
        aria-hidden='true'
      />
    )
  },
  {
    name: 'Impact',
    description: 'Partnership management',
    url: 'https://impact.com',
    logo: (
      <img
        src='/images/clients/impact.com.png'
        alt='Impact'
        width='28'
        height='28'
        aria-hidden='true'
      />
    )
  },
  {
    name: 'Mirror',
    description: 'Web3 publishing platform',
    url: 'https://mirror.xyz',
    logo: (
      <img
        src='/images/clients/mirror.xyz.png'
        alt='Mirror'
        width='28'
        height='28'
        aria-hidden='true'
      />
    )
  },
  {
    name: 'Padlet',
    description: 'Visual collaboration tool',
    url: 'https://padlet.com',
    logo: (
      <img
        src='/images/clients/padlet.com.png'
        alt='Padlet'
        width='28'
        height='28'
        aria-hidden='true'
      />
    )
  },
  {
    name: 'SkedSocial',
    description: 'Marketing platform',
    url: 'https://skedsocial.com',
    logo: (
      <img
        src='/images/clients/skedsocial.com.png'
        alt='Sked Social'
        width='28'
        height='28'
        aria-hidden='true'
      />
    )
  }
]

const ClientLogo = styled(Flex)`
  ${theme({ textDecoration: 'none' })};
  color: inherit;
  transition: transform ${transition.short};
  &:hover {
    transform: translateY(-${radii[1]}) scale(1.05);
  }
  &:focus-visible {
    outline: ${borders[2]} ${colors.link};
    outline-offset: ${radii[1]};
    border-radius: ${radii[3]};
  }
`

const Clients = () => (
  <Container
    as='section'
    id='clients'
    css={theme({
      alignItems: 'center',
      maxWidth: '100%',
      bg: 'white',
      py: SECTION_VERTICAL_SPACING,
      px: [3, 3, 4, 4]
    })}
  >
    <Caps
      css={theme({
        fontSize: [0, 1, 1, 1],
        fontWeight: 'bold',
        color: 'black60',
        letterSpacing: 3,
        textAlign: 'center'
      })}
    >
      Trusted by teams shipping to production
    </Caps>
    <Flex
      css={theme({
        pt: [3, 3, 4, 4],
        px: [3, 4, 4, 0],
        flexWrap: ['wrap', 'wrap', 'nowrap', 'nowrap'],
        justifyContent: 'center',
        alignItems: 'center',
        gap: [4, 4, 5, 5],
        maxWidth: layout.large,
        width: '100%'
      })}
    >
      {CLIENTS.map(({ name, description, logo, url }) => (
        <ClientLogo
          as='a'
          key={name}
          href={url}
          target='_blank'
          rel='noopener noreferrer'
          aria-label={`Visit ${name}`}
          css={theme({ flexDirection: 'column', alignItems: 'center', gap: 1 })}
        >
          <Box css={theme({ color: 'black' })}>{logo}</Box>
          <Text
            css={theme({ fontWeight: 'bold', fontSize: 1, color: 'black' })}
          >
            {name}
          </Text>
          <Text
            css={theme({ fontSize: 0, color: 'black80', textAlign: 'center' })}
          >
            {description}
          </Text>
        </ClientLogo>
      ))}
    </Flex>
  </Container>
)

const Faqs = () => (
  <Faq
    title='Pricing FAQs'
    caption='Everything you need to know before you pick a plan.'
    css={theme({
      bg: 'white',
      maxWidth: '100%',
      py: SECTION_VERTICAL_SPACING,
      px: [3, 3, 4, 4]
    })}
    questions={[
      {
        question: 'Is there really a free plan?',
        answer: (
          <>
            <div>
              Yes — the free plan is forever free, no credit card required. You
              get 25 requests per day against the public{' '}
              <Link href='/docs/api/basics/endpoint'>endpoint</Link>, with the
              same screenshot, PDF, metadata, SDK, insights and recipes
              capabilities used on Pro.
            </div>
            <div>
              It runs with rate limits and shared concurrency, so it&apos;s
              ideal for prototypes, side-projects and evaluation. When you
              outgrow it, upgrade in a click.
            </div>
          </>
        )
      },
      {
        question: 'What counts as a request?',
        answer: (
          <>
            <div>
              One request is one API call to a Microlink endpoint — screenshot,
              PDF, metadata, insights, or any other. Cached responses count too,
              but they&apos;re served from our edge in milliseconds and
              don&apos;t exhaust your concurrency.
            </div>
          </>
        )
      },
      {
        question: 'What happens if I exceed my quota?',
        answer: (
          <>
            <div>
              You&apos;re never billed by surprise. We notify you at 80% usage
              so you can upgrade before hitting the ceiling. If you do reach
              100%, requests are paused until the next billing cycle or until
              you upgrade — no overage fees.
            </div>
          </>
        )
      },
      {
        question: 'Can I change plan at any time?',
        answer: (
          <>
            <div>
              Yes. Upgrades take effect immediately and are pro-rated;
              downgrades apply at the start of the next billing cycle. Just
              email{' '}
              <Link href='mailto:hello@microlink.io'>hello@microlink.io</Link>{' '}
              from the address you signed up with.
            </div>
          </>
        )
      },
      {
        question: 'Can I cancel anytime?',
        answer: (
          <>
            <div>
              Yes — no contracts, no commitments. Cancel by sending an email to{' '}
              <Link href='mailto:hello@microlink.io'>hello@microlink.io</Link>{' '}
              and we&apos;ll process it within 24 hours. You keep access through
              the end of your paid period.
            </div>
          </>
        )
      },
      {
        question: 'Do you offer annual billing or volume discounts?',
        answer: (
          <>
            <div>
              Annual contracts and custom volume discounts are available on
              Enterprise. Contact{' '}
              <Link href='mailto:hello@microlink.io?subject=Annual%20billing'>
                hello@microlink.io
              </Link>{' '}
              with your expected volume and we&apos;ll send a quote.
            </div>
          </>
        )
      },
      {
        question: 'How is payment processed?',
        answer: (
          <>
            <div>
              Payments are handled by Stripe — the same provider trusted by
              Twitter, Pinterest, and Lyft. We never see or store your card
              details. Invoices are emailed automatically each cycle.
            </div>
          </>
        )
      },
      {
        question: 'Do you offer refunds?',
        answer: (
          <>
            <div>
              If something goes wrong on our side, we&apos;ll make it right —
              including refunds. Reach out at{' '}
              <Link href='mailto:hello@microlink.io'>hello@microlink.io</Link>{' '}
              and we&apos;ll review your case personally.
            </div>
          </>
        )
      },
      {
        question: "What's your SLA?",
        answer: (
          <>
            <div>
              We commit to 99.9% uptime (three nines) on paid plans. You can
              monitor live availability and incident history on our{' '}
              <Link href='/status'>status page</Link>.
            </div>
          </>
        )
      },
      {
        question: 'When do I need Enterprise?',
        answer: (
          <>
            <div>
              Enterprise makes sense when you need any of: dedicated
              infrastructure, custom API endpoints, S3-compatible storage,
              custom SLAs, a signed DPA, or pricing for very high volumes
              (millions of requests / month).
            </div>
            <div>
              See the <Link href='/enterprise'>Enterprise page</Link> for
              details, or email{' '}
              <Link href='mailto:hello@microlink.io?subject=Microlink%20Enterprise'>
                hello@microlink.io
              </Link>
              .
            </div>
          </>
        )
      },
      {
        question: 'How do I get an API key?',
        answer: (
          <>
            <div>
              After payment we send the API key to the email you signed up with.
              Use it as a header in the{' '}
              <Link href='/docs/api/getting-started/overview'>API</Link> or as
              the <Link href='/docs/sdk/parameters/api-key/'>apiKey</Link>{' '}
              option in the{' '}
              <Link href='/docs/sdk/getting-started/overview'>SDK</Link>.
            </div>
          </>
        )
      },
      {
        question: 'Other questions?',
        answer: (
          <>
            <div>
              We&apos;re a real team and we read every email. Reach us at{' '}
              <Link href='mailto:hello@microlink.io'>hello@microlink.io</Link> —
              we usually reply within a few hours.
            </div>
          </>
        )
      }
    ]}
  />
)

const CTA_DURATION = 6.2
const CTA_SWEEP_PCT = (1.2 / CTA_DURATION) * 100
const CTA_LEAD_CHARS = 'Start'.split('').map((char, index) => ({
  char,
  id: `${char}${index}`,
  index
}))
const CTA_CHAR_PCT = CTA_SWEEP_PCT / CTA_LEAD_CHARS.length

const ctaCharAnim = index => {
  const on = index * CTA_CHAR_PCT
  const off = on + CTA_CHAR_PCT
  return keyframes`
    0%, ${on}%, ${off}%, 100% { color: inherit; }
    ${on + 0.01}%, ${off - 0.01}% { color: ${colors.secondary}; }
  `
}

const ctaAnims = Array.from({ length: CTA_LEAD_CHARS.length }, (_, i) =>
  ctaCharAnim(i)
)

const CtaChar = styled('span')`
  animation: ${({ $i }) => ctaAnims[$i]} ${CTA_DURATION}s step-end infinite;
  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
`

const ctaNowAnim = keyframes`
  0%, ${CTA_SWEEP_PCT}% { color: inherit; }
  ${CTA_SWEEP_PCT + 0.01}%, 100% { color: ${colors.secondary}; }
`

const CtaNow = styled('span')`
  animation: ${ctaNowAnim} ${CTA_DURATION}s step-end infinite;
  @media (prefers-reduced-motion: reduce) {
    animation: none;
    color: ${colors.secondary};
  }
`

const Cta = () => {
  const [currency] = useCurrencyContext()
  const { symbol } = CURRENCIES[currency]
  const startingPrice = formatPrice({ EUR: 39, USD: 49 }, currency)
  return (
    <Container
      as='section'
      id='final-cta'
      css={theme({
        alignItems: 'center',
        maxWidth: '100%',
        bg: 'white',
        py: SECTION_VERTICAL_SPACING,
        px: [3, 3, 4, 4]
      })}
    >
      <Flex
        css={theme({
          flexDirection: 'column',
          alignItems: 'center',
          maxWidth: layout.normal,
          textAlign: 'center'
        })}
      >
        <Subhead
          css={theme({
            textAlign: 'center'
          })}
        >
          {CTA_LEAD_CHARS.map(({ char, id, index }) => (
            <CtaChar key={id} $i={index}>
              {char}
            </CtaChar>
          ))}{' '}
          <CtaNow>now</CtaNow>.
        </Subhead>
        <Caption forwardedAs='div' css={theme({ pt: [3, 3, 4, 4] })}>
          Free forever plan, no credit card. Pro plans start at {symbol}
          {startingPrice}/month — cancel anytime.
        </Caption>
        <Flex
          css={theme({
            pt: [4, 4, 5, 5],
            flexDirection: ['column', 'row', 'row', 'row'],
            gap: [2, 3, 3, 3],
            alignItems: 'center',
            justifyContent: 'center'
          })}
        >
          <Button
            as='a'
            href='/docs/api/getting-started/overview'
            variant='black'
            data-event-location='Pricing'
            data-event-name='Final CTA · Get started free'
            onClick={() => trackEvent('pricing cta')}
          >
            <Caps css={theme({ fontSize: [0, 0, 1, 1] })}>
              Get started free
            </Caps>
          </Button>
        </Flex>
        <Box css={theme({ pt: [3, 3, 4, 4] })}>
          <Text css={theme({ fontSize: 0, color: 'black60' })}>
            Questions?{' '}
            <Link href='mailto:hello@microlink.io'>hello@microlink.io</Link>
          </Text>
        </Box>
      </Flex>
    </Container>
  )
}

const PricingPage = () => {
  const { canonicalUrl, stripeKey } = useSiteMetadata()
  return (
    <CurrencyProvider>
      <Layout css={theme({ position: 'relative' })}>
        <DashedGridOverlay aria-hidden='true' />
        <Box css={theme({ position: 'relative', zIndex: 1 })}>
          <Hero />
          <Plans
            canonicalUrl={canonicalUrl}
            stripeKey={stripeKey}
            footer='stats'
          />
          <Comparison />
          <Testimonials />
          <Clients />
          <BuildVsBuy />
          <Capabilities />
          <Faqs />
          <Cta />
        </Box>
      </Layout>
    </CurrencyProvider>
  )
}

export default PricingPage
