import { trackEvent } from 'helpers/plausible'
import {
  borders,
  colors,
  layout,
  theme,
  space,
  SECTION_VERTICAL_SPACING
} from 'theme'
import React, { useState, useCallback, useEffect } from 'react'
import {
  Camera,
  Download,
  HelpCircle,
  Settings,
  Smartphone
} from 'react-feather'
import isUrl from 'is-url-http/lightweight'
import prependHttp from 'prepend-http'
import styled from 'styled-components'
import mql from '@microlink/mql'

import Box from 'components/elements/Box'
import Caps from 'components/elements/Caps'
import Container from 'components/elements/Container'
import Flex from 'components/elements/Flex'
import HeadingBase from 'components/elements/Heading'
import Input from 'components/elements/Input/Input'
import { Link } from 'components/elements/Link'
import Meta from 'components/elements/Meta/Meta'
import SubheadBase from 'components/elements/Subhead'
import Text from 'components/elements/Text'

import Block from 'components/patterns/Block/Block'
import CaptionBase from 'components/patterns/Caption/Caption'
import { ScreenshotExtensionBanner } from 'components/patterns/ChromeExtensionBanner/ChromeExtensionBanner'
import Faq from 'components/patterns/Faq/Faq'
import Features from 'components/patterns/Features/Features'
import Layout from 'components/patterns/Layout'
import Tooltip from 'components/patterns/Tooltip/Tooltip'

import { useLocalStorage } from 'components/hook/use-local-storage'
import { normalizeApiError } from 'helpers/api-error'
import { CDN_EDGES } from 'helpers/cdn-edges'
import { withTitle } from 'helpers/hoc/with-title'
import {
  extractNerdStats,
  buildMqlQuery
} from 'components/patterns/NerdStats/NerdStats'

import {
  PanelSection,
  SectionLabel,
  OptionLabel,
  GenerateButton,
  CheckboxLabel,
  ToolLayout,
  OptionsPanelOuter,
  PreviewOuter,
  PanelRibbonLayout,
  StickyGenerateWrapper,
  SegmentedControl,
  StepCard,
  SectionIcon,
  UseCaseCard,
  PreviewDisplay,
  ScreenshotHistory,
  createThumbnail,
  ApiDocsCard,
  FORMAT_OPTIONS,
  MAX_HISTORY_ITEMS,
  HISTORY_MAX_AGE_MS,
  MOBILE_BP
} from 'components/pages/screenshot'

const Heading = withTitle(HeadingBase)
const Subhead = withTitle(SubheadBase)
const Caption = withTitle(CaptionBase)

/* ─── Constants ────────────────────────────────────────── */

const PHONE_DEVICES = [
  {
    id: 'iphone-17',
    label: 'iPhone 17',
    width: 393,
    height: 852
  },
  {
    id: 'iphone-17-pro-max',
    label: 'iPhone 17 Pro Max',
    width: 440,
    height: 956
  },
  {
    id: 'iphone-17-pro',
    label: 'iPhone 17 Pro',
    width: 402,
    height: 874
  },
  {
    id: 'iphone-17-air',
    label: 'iPhone 17 Air',
    width: 414,
    height: 896
  },
  {
    id: 'galaxy-s26-ultra',
    label: 'Samsung Galaxy S26 Ultra',
    width: 412,
    height: 915
  },
  {
    id: 'galaxy-s26',
    label: 'Samsung Galaxy S26',
    width: 360,
    height: 800
  },
  {
    id: 'galaxy-a16',
    label: 'Samsung Galaxy A16',
    width: 360,
    height: 780
  },
  {
    id: 'galaxy-a06',
    label: 'Samsung Galaxy A06',
    width: 360,
    height: 800
  },
  {
    id: 'pixel-10-pro',
    label: 'Google Pixel 10 Pro',
    width: 412,
    height: 892
  },
  {
    id: 'pixel-10-pro-xl',
    label: 'Google Pixel 10 Pro XL',
    width: 448,
    height: 968
  },
  {
    id: 'pixel-10',
    label: 'Google Pixel 10',
    width: 412,
    height: 892
  }
]

const SCREENSHOT_HISTORY_KEY = 'screenshot-history/mobile'

const PortraitIcon = () => <Smartphone size={14} aria-hidden='true' />

const LandscapeIcon = () => (
  <Smartphone
    size={14}
    aria-hidden='true'
    style={{ transform: 'rotate(90deg)' }}
  />
)

const ORIENTATION_OPTIONS = [
  { value: 'portrait', label: 'Portrait', icon: PortraitIcon },
  { value: 'landscape', label: 'Landscape', icon: LandscapeIcon }
]

const FEATURES_LIST = [
  {
    title: 'Real Device Viewports',
    description:
      'Emulate exact CSS viewport dimensions of popular smartphones. iPhone, Samsung Galaxy, and Pixel — accurate mobile rendering without owning the hardware.'
  },
  {
    title: 'Instant Mobile Captures',
    description: `Mobile screenshots are generated in seconds and served via a global CDN with ${CDN_EDGES} edge locations. Cached responses are free.`
  },
  {
    title: 'Mobile Screenshot API',
    description:
      'Automate mobile screenshots at scale with a simple REST API. Pass any viewport, device flag, and orientation — no headless browser setup required.'
  }
]

const HOW_IT_WORKS = [
  {
    icon: Smartphone,
    title: 'Choose a Phone',
    description: 'Select from the most popular smartphones to emulate.'
  },
  {
    icon: Settings,
    title: 'Configure Options',
    description: 'Choose portrait or landscape, full page capture, and more.'
  },
  {
    icon: Camera,
    title: 'Generate Mobile Screenshot',
    description: 'Click the button and wait a few seconds.'
  },
  {
    icon: Download,
    title: 'Download & Share',
    description:
      'Save your mobile screenshot to your device or share it with others.'
  }
]

const REASON_TO_USE = [
  {
    title: 'Accurate Mobile Emulation',
    description: (
      <>
        Emulate real phone viewports for pixel-perfect mobile screenshots.
        Choose from the latest iPhones, Samsung Galaxy, and Google Pixel
        devices. See all{' '}
        <Link href='/docs/guides/screenshot/browser-settings'>
          browser settings
        </Link>{' '}
        for device emulation options.
      </>
    )
  },
  {
    title: 'Portrait & Landscape',
    description: (
      <>
        Capture screenshots in both orientations. Toggle between portrait and
        landscape mode to see exactly how your site looks on mobile. Learn about{' '}
        <Link href='/docs/guides/screenshot/customizing-output'>
          output customization
        </Link>{' '}
        for format and quality options.
      </>
    )
  },
  {
    title: 'Full Page Capture',
    description: (
      <>
        Capture the entire scrollable page, not just what's visible. Perfect for
        reviewing complete mobile layouts and long-scrolling content. Need
        desktop full page? Try the{' '}
        <Link href='/tools/website-screenshot/full-page'>
          full page screenshot tool
        </Link>
        .
      </>
    )
  },
  {
    title: 'Free + No login',
    description:
      'Free mobile screenshot tool with 25 screen captures per day. Every screenshot is clean and professional. No branding, overlays, or watermarks.'
  },
  {
    title: 'Local Storage Support',
    description: (
      <>
        Save screenshots to your local storage for easy access. Access them for
        24 hours so if you grab the perfect screenshot, you can come back and
        grab it again. Learn about{' '}
        <Link href='/docs/guides/screenshot/caching-and-performance'>
          caching strategies
        </Link>
        .
      </>
    )
  },
  {
    title: 'Block ads and banners',
    description: (
      <>
        Automatically{' '}
        <Link href='/docs/guides/screenshot/page-interaction'>
          block ads and cookie banners
        </Link>{' '}
        before the rendering. Get the cleanest mobile screenshots possible.
      </>
    )
  }
]

/* ─── Styled (mobile-specific) ──────────────────────────── */

const StyledSelect = styled.select`
  ${theme({
    width: '100%',
    fontFamily: 'sans',
    fontSize: 1,
    px: 2,
    py: '10px',
    borderRadius: '6px',
    border: 1,
    borderColor: 'black10',
    color: 'black80'
  })}
  background: white;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;

  &:focus {
    outline: none;
    border-color: ${colors.link};
    box-shadow: 0 0 0 1px ${colors.link};
  }

  &:focus-visible {
    outline: none;
  }

  @media (max-width: ${MOBILE_BP - 1}px) {
    min-height: 44px;
  }
`

/* ─── Options Panel ────────────────────────────────────── */

const OptionsPanel = ({ options, setOptions, onSubmit, isLoading }) => {
  const [urlError, setUrlError] = useState('')

  const handleUrlChange = useCallback(
    e => {
      const val = e.target.value
      setOptions(prev => ({ ...prev, url: val }))
      if (urlError) setUrlError('')
    },
    [setOptions, urlError]
  )

  const normalizeUrl = useCallback(rawUrl => {
    const trimmed = rawUrl.trim()
    if (!trimmed) return ''
    return prependHttp(trimmed)
  }, [])

  const handleSubmit = useCallback(() => {
    const url = normalizeUrl(options.url)
    if (!url || !isUrl(url)) {
      setUrlError('Please enter a valid URL (e.g., example.com)')
      return
    }

    setOptions(prev => ({ ...prev, url }))
    setUrlError('')
    onSubmit(url)
  }, [options.url, onSubmit, normalizeUrl, setOptions])

  return (
    <Box
      css={theme({
        p: [3, 4],
        border: 1,
        borderColor: 'black10',
        borderRadius: 3
      })}
    >
      {/* ── Primary Input ───────────────────── */}
      <PanelSection>
        <OptionLabel as='span'>Website URL</OptionLabel>
        <Input
          id='ws-url'
          type='url'
          inputMode='url'
          autoComplete='url'
          placeholder='example.com'
          value={options.url}
          onChange={handleUrlChange}
          onKeyDown={e => {
            if (e.key === 'Enter') {
              // Avoid triggering a new request while a screenshot is already being generated.
              if (isLoading) {
                e.preventDefault()
                return
              }

              e.preventDefault()
              handleSubmit()
            }
          }}
          css={theme({ width: '100%', fontSize: '18px' })}
          aria-describedby={urlError ? 'ws-url-error' : undefined}
          aria-invalid={!!urlError}
        />
        {urlError && (
          <Text
            id='ws-url-error'
            role='alert'
            css={theme({ color: 'fullscreen', fontSize: 0, pt: 1 })}
          >
            {urlError}
          </Text>
        )}
      </PanelSection>

      {/* ── Settings Groups (Ribbon on tablet) ── */}
      <PanelRibbonLayout>
        {/* ── Device & Orientation ────────────── */}
        <PanelSection>
          <Box css={theme({ pb: '12px' })}>
            <OptionLabel as='span'>Phone</OptionLabel>
            <StyledSelect
              id='ws-phone'
              value={options.phoneId}
              onChange={e =>
                setOptions(prev => ({ ...prev, phoneId: e.target.value }))}
              aria-label='Select phone model'
            >
              {PHONE_DEVICES.map(phone => (
                <option key={phone.id} value={phone.id}>
                  {phone.label} ({phone.width}&times;{phone.height})
                </option>
              ))}
            </StyledSelect>
          </Box>

          <Box css={theme({ pb: '12px' })}>
            <OptionLabel as='span'>Orientation</OptionLabel>
            <SegmentedControl
              name='Orientation'
              options={ORIENTATION_OPTIONS}
              value={options.landscape ? 'landscape' : 'portrait'}
              onChange={val =>
                setOptions(prev => ({
                  ...prev,
                  landscape: val === 'landscape'
                }))}
            />
          </Box>

          <CheckboxLabel>
            <input
              type='checkbox'
              checked={options.fullPage}
              onChange={e =>
                setOptions(prev => ({
                  ...prev,
                  fullPage: e.target.checked
                }))}
            />
            <Text css={theme({ pl: 2, fontSize: 1, color: 'black80' })}>
              Full page screenshot
            </Text>
          </CheckboxLabel>
        </PanelSection>

        {/* ── Output Settings ─────────────────── */}
        <PanelSection>
          <Box>
            <OptionLabel as='span'>Format</OptionLabel>
            <SegmentedControl
              name='Format'
              options={FORMAT_OPTIONS}
              value={options.type}
              onChange={val => setOptions(prev => ({ ...prev, type: val }))}
            />
          </Box>
        </PanelSection>

        {/* ── Advanced ────────────────────────── */}
        <Box css={theme({ pb: 3 })}>
          <SectionLabel>Advanced</SectionLabel>

          <CheckboxLabel>
            <input
              type='checkbox'
              checked={options.adblock}
              onChange={e =>
                setOptions(prev => ({ ...prev, adblock: e.target.checked }))}
            />
            <Text css={theme({ pl: 2, fontSize: 1, color: 'black80' })}>
              Block ads and banners
            </Text>
            <Tooltip
              content={
                <Tooltip.Content>
                  Removes all the ads and cookie banners before the rendering
                </Tooltip.Content>
              }
            >
              <HelpCircle
                size={16}
                color={colors.black60}
                style={{ marginLeft: '6px', marginTop: '5px' }}
              />
            </Tooltip>
          </CheckboxLabel>

          <CheckboxLabel>
            <input
              type='checkbox'
              checked={options.cache}
              onChange={e =>
                setOptions(prev => ({ ...prev, cache: e.target.checked }))}
            />
            <Text css={theme({ pl: 2, fontSize: 1, color: 'black80' })}>
              Use cache
            </Text>
            <Tooltip
              content={
                <Tooltip.Content>
                  Uses the cached screenshot if available, otherwise generates a
                  new one
                </Tooltip.Content>
              }
            >
              <HelpCircle
                size={16}
                color={colors.black60}
                style={{ marginLeft: '6px', marginTop: '5px' }}
              />
            </Tooltip>
          </CheckboxLabel>
        </Box>
      </PanelRibbonLayout>

      {/* ── Generate ────────────────────────── */}
      <StickyGenerateWrapper css={{ textAlign: 'center', marginTop: '10px' }}>
        <GenerateButton
          type='button'
          onClick={handleSubmit}
          loading={isLoading}
        >
          <Flex
            css={{
              alignItems: 'center',
              justifyContent: 'center',
              gap: space[2]
            }}
          >
            <Camera size={16} />
            Generate screenshot
          </Flex>
        </GenerateButton>
      </StickyGenerateWrapper>
    </Box>
  )
}

/* ─── Main Tool Section ────────────────────────────────── */

const ScreenshotTool = () => {
  const [options, setOptions] = useState({
    url: '',
    type: 'png',
    fullPage: false,
    adblock: true,
    cache: true,
    phoneId: PHONE_DEVICES[0].id,
    landscape: false
  })

  const [isLoading, setIsLoading] = useState(false)
  const [data, setData] = useState(null)
  const [error, setError] = useState(null)
  const [lastUrl, setLastUrl] = useState('')
  const [nerdStats, setNerdStats] = useState(null)
  const [mqlQuery, setMqlQuery] = useState(null)
  const [responseData, setResponseData] = useState(null)
  const [showNerdStats, setShowNerdStats] = useState(false)
  const [requestedViewport, setRequestedViewport] = useState({
    width: PHONE_DEVICES[0].width,
    height: PHONE_DEVICES[0].height
  })

  const [localStorageData] = useLocalStorage('mql-api-key')
  const [history, setHistory] = useLocalStorage(SCREENSHOT_HISTORY_KEY, [])
  const [activeHistoryId, setActiveHistoryId] = useState(null)
  const [historyReady, setHistoryReady] = useState(false)

  /* Clean expired entries (>24 h) on mount, then allow rendering */
  useEffect(() => {
    setHistory(prev => {
      if (!Array.isArray(prev)) return []
      const now = Date.now()
      const cleaned = prev.filter(
        entry => now - entry.createdAt < HISTORY_MAX_AGE_MS
      )
      return cleaned.length !== prev.length ? cleaned : prev
    })
    setHistoryReady(true)
  }, [setHistory])

  const handleSubmit = useCallback(
    async url => {
      trackEvent('screenshot generate', { variant: 'mobile' })
      const phone =
        PHONE_DEVICES.find(p => p.id === options.phoneId) || PHONE_DEVICES[0]
      const viewport = options.landscape
        ? {
            width: phone.height,
            height: phone.width,
            isMobile: true,
            isLandscape: true
          }
        : {
            width: phone.width,
            height: phone.height,
            isMobile: true,
            isLandscape: false
          }

      setRequestedViewport(viewport)
      setIsLoading(true)
      setError(null)
      setData(null)
      setShowNerdStats(false)
      setLastUrl(url)

      try {
        const mqlOpts = {
          apiKey: localStorageData?.apiKey,
          meta: false,
          screenshot: {
            type: options.type,
            fullPage: options.fullPage
          },
          viewport,
          adblock: options.adblock,
          force: !options.cache
        }

        const queryStr = buildMqlQuery(url, mqlOpts)
        setMqlQuery(queryStr)

        let response = null
        let headerStats = null
        try {
          response = await mql(url, mqlOpts)
          setData(response.data)
          headerStats = extractNerdStats(response.response?.headers)
          setNerdStats(headerStats)
          setResponseData(
            JSON.stringify(
              { status: response.status, data: response.data },
              null,
              2
            )
          )
        } catch (err) {
          setError(
            normalizeApiError.fromMql(err, 'Failed to capture screenshot.')
          )
        }

        if (response?.data?.screenshot) {
          const entryId = String(Date.now())
          const thumbnail = await createThumbnail(response.data.screenshot.url)
          setHistory(prev => {
            const items = Array.isArray(prev) ? prev : []
            return [
              {
                id: entryId,
                createdAt: Date.now(),
                screenshot: response.data.screenshot,
                thumbnail,
                nerdStats: headerStats,
                mqlQuery: queryStr,
                responseData: JSON.stringify(
                  { status: response.status, data: response.data },
                  null,
                  2
                ),
                settings: {
                  url,
                  type: options.type,
                  fullPage: options.fullPage,
                  phoneId: options.phoneId,
                  landscape: options.landscape,
                  adblock: options.adblock,
                  cache: options.cache
                }
              },
              ...items
            ].slice(0, MAX_HISTORY_ITEMS)
          })
          setActiveHistoryId(entryId)
        }
      } catch (err) {
        setError(
          normalizeApiError.fromMql(err, 'Failed to capture screenshot.')
        )
      } finally {
        setIsLoading(false)
      }
    },
    [options, setHistory]
  )

  const handleHistorySelect = useCallback(entry => {
    const { settings, screenshot } = entry
    const phoneId = settings.phoneId || PHONE_DEVICES[0].id
    const phone = PHONE_DEVICES.find(p => p.id === phoneId) || PHONE_DEVICES[0]
    const landscape = settings.landscape || false
    setOptions({
      url: settings.url,
      type: settings.type,
      fullPage: settings.fullPage,
      phoneId,
      landscape,
      adblock: settings.adblock !== undefined ? settings.adblock : true,
      cache: settings.cache !== undefined ? settings.cache : true
    })
    setData({ screenshot })
    setLastUrl(settings.url)
    setNerdStats(entry.nerdStats || null)
    setMqlQuery(entry.mqlQuery || null)
    setResponseData(entry.responseData || null)
    setRequestedViewport(
      landscape
        ? { width: phone.height, height: phone.width }
        : { width: phone.width, height: phone.height }
    )
    setError(null)
    setActiveHistoryId(entry.id)
  }, [])

  const handleHistoryDelete = useCallback(
    id => {
      setHistory(prev => {
        const items = Array.isArray(prev) ? prev : []
        return items.filter(entry => entry.id !== id)
      })
      setActiveHistoryId(prev => (prev === id ? null : prev))
    },
    [setHistory]
  )

  const handleRetry = useCallback(() => {
    if (lastUrl) handleSubmit(lastUrl)
  }, [lastUrl, handleSubmit])

  return (
    <Container
      as='section'
      id='tool'
      css={theme({
        px: ['16px', '25px'],
        maxWidth: ['100%', layout.normal, '1460px', '1460px'],
        py: SECTION_VERTICAL_SPACING
      })}
    >
      <ToolLayout>
        {/* Options Panel */}
        <OptionsPanelOuter>
          <OptionsPanel
            options={options}
            setOptions={setOptions}
            onSubmit={handleSubmit}
            isLoading={isLoading}
          />
        </OptionsPanelOuter>

        {/* Preview Canvas */}
        <PreviewOuter>
          <PreviewDisplay
            data={data}
            isLoading={isLoading}
            error={error}
            onRetry={handleRetry}
            url={lastUrl}
            viewportWidth={requestedViewport.width}
            viewportHeight={requestedViewport.height}
            nerdStats={nerdStats}
            mqlQuery={mqlQuery}
            responseData={responseData}
            showNerdStats={showNerdStats}
            onToggleNerdStats={() => setShowNerdStats(prev => !prev)}
            trackingVariant='mobile'
          />
        </PreviewOuter>
      </ToolLayout>

      {historyReady && (
        <ScreenshotHistory
          entries={Array.isArray(history) ? history : []}
          activeId={activeHistoryId}
          onSelect={handleHistorySelect}
          onDelete={handleHistoryDelete}
          disabled={isLoading}
        />
      )}
    </Container>
  )
}

/* ─── Hero Section ─────────────────────────────────────── */

const Hero = () => (
  <Flex
    as='section'
    id='hero'
    css={theme({
      flexDirection: 'column',
      alignItems: 'center',
      pt: [1],
      pb: SECTION_VERTICAL_SPACING
    })}
  >
    <Heading
      css={theme({
        px: [3, 3],
        maxWidth: layout.large
      })}
    >
      Mobile Website Screenshot Generator
    </Heading>
    <Caption
      forwardedAs='h2'
      css={theme({
        pt: [2, 2, 3, 3],
        px: 3,
        maxWidth: layout.large
      })}
    >
      Take mobile screenshots of any website instantly.
    </Caption>
  </Flex>
)

/* ─── How It Works ─────────────────────────────────────── */

const HowItWorks = () => (
  <Container
    as='section'
    id='how-it-works'
    css={theme({
      alignItems: 'center',
      width: '100%',
      py: SECTION_VERTICAL_SPACING
    })}
  >
    <Subhead
      css={theme({
        pt: [3, 3, 4, 4],
        px: 3,
        maxWidth: layout.large
      })}
    >
      How to Take a Mobile Screenshot of Any Website
    </Subhead>
    <Flex
      css={theme({
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        gap: [3, 3, 4, 4],
        pt: [2, 2, 3, 3]
      })}
    >
      {HOW_IT_WORKS.map(({ icon: Icon, title, description }) => (
        <StepCard key={title}>
          <SectionIcon icon={Icon} />
          <Caps as='h3' css={theme({ fontWeight: 'bold', pb: 2, fontSize: 0 })}>
            {title}
          </Caps>
          <Text css={theme({ fontSize: 1, color: 'black60', lineHeight: 2 })}>
            {description}
          </Text>
        </StepCard>
      ))}
    </Flex>
    <Caption
      css={theme({
        pt: [3, 3, 4, 4],
        px: [1, 1, 3, 3],
        pb: [3, 3, 4, 4],
        maxWidth: layout.large
      })}
    >
      <Text css={theme({ fontSize: 3, color: 'black' })}>
        Wondering how we deliver this quality for free?
      </Text>
      <Text
        css={theme({ fontSize: 2, color: 'black80', lineHeight: 2, mt: 2 })}
      >
        This tool runs on <b>Microlink's</b>{' '}
        <Link href='/screenshot'>screenshot API</Link>—the same infrastructure
        processing millions of screenshots per week for paying customers. You
        get enterprise performance at no cost.
      </Text>
    </Caption>

    <ScreenshotExtensionBanner
      description={
        <>
          Skip the tab switching — the <b>Microlink Web Page Screenshots</b>{' '}
          extension captures mobile-viewport screenshots from Chrome&apos;s side
          panel, powered by the same{' '}
          <Link href='/screenshot'>Screenshot API</Link> as this tool. Desktop,
          tablet, and mobile presets — single or up to 50 in bulk.
        </>
      }
    />
  </Container>
)

/* ─── Explanation ────────────────────────────────────── */

const Explanation = () => (
  <Container
    as='section'
    id='why-choose'
    css={theme({
      alignItems: 'center',
      py: SECTION_VERTICAL_SPACING,
      bg: 'pinky'
    })}
  >
    <Subhead variant='gradient'>Why choose our mobile screenshot tool?</Subhead>
    <Caption
      css={theme({
        pt: [3, 3, 4, 4],
        px: [1, 1, 3, 3],
        maxWidth: layout.large
      })}
    >
      Responsive design testing shouldn't require a drawer full of phones. Our
      tool lets you screenshot responsive website layouts across multiple device
      sizes in a single session.
    </Caption>
    <Box
      css={theme({
        display: 'grid',
        gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
        gap: 3,
        pt: [3, 3, 4, 4],
        maxWidth: [layout.normal, layout.normal, layout.large, layout.large]
      })}
    >
      {REASON_TO_USE.map(({ title, description }) => (
        <UseCaseCard key={title}>
          <Caps as='h3' css={theme({ fontWeight: 'bold', pb: 2, fontSize: 1 })}>
            {title}
          </Caps>
          <Text css={theme({ fontSize: 1, color: 'black60', lineHeight: 2 })}>
            {description}
          </Text>
        </UseCaseCard>
      ))}
    </Box>
  </Container>
)

/* ─── Banner ─────────────────────────────────────────── */

const Banner = () => (
  <Block
    forwardedAs='section'
    id='pricing'
    flexDirection='column'
    css={theme({
      px: 4,
      maxHeight: '800px',
      py: SECTION_VERTICAL_SPACING,
      width: '100%',
      overflow: 'hidden',
      backgroundImage: `radial-gradient(
        circle at center right,
        #850ba7 0%,
        #850ba7 48%,
        #a31b91 48%,
        #a31b91 52%,
        #c12a78 52%,
        #c12a78 65%,
        #df3a61 65%,
        #df3a61 79%,
        #fd494a 79%,
        #fd494a 100%
      )`,
      borderTop: `${borders[1]} ${colors.white20}`,
      borderBottom: `${borders[1]} ${colors.white20}`
    })}
    blockOne={
      <Flex
        css={{
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <Subhead css={theme({ color: 'white' })}>
          Screenshot API{' '}
          <span css={theme({ display: 'block', color: 'white60' })}>
            for developers
          </span>
        </Subhead>
      </Flex>
    }
    blockTwo={
      <Flex
        css={theme({
          pt: [4, 4, 5, 5],
          justifyContent: 'center',
          alignItems: 'flex-start',
          maxHeight: ['200px', '300px', '400px', '650px'],
          overflow: 'hidden'
        })}
        style={{ fontVariantNumeric: 'tabular-nums' }}
      >
        <Link href='/screenshot' aria-label='Microlink Screenshot API'>
          <img
            css={theme({
              width: ['300px', '500px', '700px', '900px']
            })}
            src='/images/screenshot-tool-landing.png'
            alt='Mobile Screenshot API for automated mobile captures'
          />
        </Link>
      </Flex>
    }
  />
)

/* ─── Use Cases ───────────────────────────────────────── */

const USE_CASES = [
  {
    title: 'Developers',
    content: (
      <>
        Capture visual regression bugs across device sizes before they reach
        production. A website screenshot mobile capture is the fastest way to
        document what went wrong and prove it's fixed.
        <br />
        <br />
        Need to capture pages behind a login? See the{' '}
        <Link href='/docs/guides/screenshot/private-pages'>
          private pages guide
        </Link>
        . For batch captures, try the{' '}
        <Link href='/tools/website-screenshot/bulk'>bulk screenshot tool</Link>.
      </>
    )
  },
  {
    title: 'Designers',
    content: (
      <>
        Verify that Figma-to-code handoffs look correct on real mobile
        viewports. Our screenshot mobile website output gives you a pixel-level
        source of truth.
        <br />
        <br />
        Learn about{' '}
        <Link href='/docs/guides/screenshot/embedding'>
          embedding and delivery
        </Link>{' '}
        to use mobile screenshots in your workflow.
      </>
    )
  },
  {
    title: 'Marketers and SEO',
    content: (
      <>
        Document landing page performance, track competitor changes, and build
        visual audit reports — all from a mobile screenshot online tool that
        requires no installs or configuration.
        <br />
        <br />
        Need desktop captures too? Use the{' '}
        <Link href='/tools/website-screenshot'>standard screenshot tool</Link>.
      </>
    )
  }
]

const UseCases = () => (
  <Container
    as='section'
    id='use-cases'
    css={theme({
      alignItems: 'center',
      maxWidth: [layout.normal, layout.normal, layout.large, layout.large],
      py: SECTION_VERTICAL_SPACING
    })}
  >
    <Subhead variant='gradient'>
      Who Uses a Mobile Website Screenshot Generator?
    </Subhead>
    <Caption
      css={theme({
        pt: [3, 3, 4, 4],
        px: [1, 1, 3, 3],
        maxWidth: layout.large
      })}
    >
      From design reviews to automated testing, website screenshots power
      workflows across every team.
    </Caption>
    <Box
      css={theme({
        display: 'grid',
        gridTemplateColumns: ['1fr', '1fr', '1fr 1fr 1fr', '1fr 1fr 1fr'],
        gap: 3,
        pt: [4, 4, 5, 5],
        width: '100%'
      })}
    >
      {USE_CASES.map(({ title, content }) => (
        <Box
          key={title}
          css={theme({
            p: 4,
            border: 1,
            borderColor: 'black10',
            borderRadius: 3,
            bg: 'white'
          })}
        >
          <Caps
            as='h3'
            titleize={false}
            css={theme({ fontWeight: 'bold', pb: 3, fontSize: 1 })}
          >
            {title}
          </Caps>
          <Text
            css={theme({
              fontSize: 1,
              color: 'black60',
              lineHeight: 2
            })}
          >
            {content}
          </Text>
        </Box>
      ))}
    </Box>
  </Container>
)

/* ─── Product Information (FAQ) ────────────────────────── */

const ProductInformation = () => (
  <Faq
    css={theme({
      fontSize: [1, 1, 1, 1],
      py: SECTION_VERTICAL_SPACING,
      bg: 'pinky',
      borderTop: `${borders[1]} ${colors.pinkest}`,
      borderBottom: `${borders[1]} ${colors.pinkest}`
    })}
    questions={[
      {
        question: 'Is this mobile screenshot tool really free?',
        answer: (
          <>
            <div>
              Yes! You can take up to <b>25&nbsp;mobile screenshots per day</b>{' '}
              for free, with no credit card required. Free screenshots include
              all features — phone emulation, full-page capture, portrait and
              landscape modes, and multiple formats.
            </div>
            <div>
              Need more? Check our <Link href='/pricing'>pricing plans</Link>{' '}
              for higher limits and priority processing.
            </div>
          </>
        )
      },
      {
        question: 'Which phones can I emulate?',
        answer: (
          <>
            <div>
              We support the most popular smartphones including iPhone 17 Pro
              Max, iPhone 17 Pro, iPhone 17, iPhone 17 Air, Samsung Galaxy S26
              Ultra, Samsung Galaxy S26, Samsung Galaxy A16, Samsung Galaxy A06,
              Google Pixel 10 Pro, Google Pixel 10 Pro XL, and Google Pixel 10.
            </div>
            <div>
              Each device uses its real CSS viewport dimensions for
              pixel-perfect mobile screenshots. See the{' '}
              <Link href='/docs/guides/screenshot/browser-settings'>
                browser settings guide
              </Link>{' '}
              for advanced device emulation via the API.
            </div>
            <div>
              <b>Need a custom size?</b> Use the{' '}
              <Link href='/tools/website-screenshot'>
                standard screenshot tool
              </Link>
              .
            </div>
          </>
        )
      },
      {
        question: 'Can I take landscape screenshots?',
        answer: (
          <>
            <div>
              Yes! Toggle between portrait and landscape orientation for any
              phone model. The viewport dimensions are automatically swapped to
              give you an accurate landscape view.
            </div>
          </>
        )
      },
      {
        question: "What's the quality of the screenshots?",
        answer: (
          <>
            <div>
              We always use the best quality settings for the screenshots. Then
              we compress the images to the smallest file size possible without
              losing quality. Learn about all the available options in the{' '}
              <Link href='/docs/guides/screenshot/customizing-output'>
                customizing output guide
              </Link>
              .
            </div>
          </>
        )
      },
      {
        question:
          'Can I screenshot a website in different mobile devices at the same time?',
        answer: (
          <>
            <div>
              The free tool handles one device at a time. For batch captures
              across multiple devices simultaneously, use our{' '}
              <Link href='/screenshot'>Screenshot API</Link> which supports any
              custom viewport or preset device in a single request. You can also
              try the{' '}
              <Link href='/tools/website-screenshot/bulk'>
                bulk screenshot tool
              </Link>
              . Check the{' '}
              <Link href='/docs/guides/screenshot/embedding'>
                embedding guide
              </Link>{' '}
              for delivery patterns.
            </div>
          </>
        )
      },
      {
        question:
          "What's the difference between a viewport screenshot and a full page capture?",
        answer: (
          <>
            <div>
              A viewport screenshot captures only the visible area of the screen
              (what you'd see without scrolling). A full page screen capture
              mobile screenshot stitches together the entire page from top to
              bottom — ideal for documenting long pages. Try the{' '}
              <Link href='/tools/website-screenshot/full-page'>
                full page screenshot tool
              </Link>{' '}
              for desktop full page captures.
            </div>
          </>
        )
      },
      {
        question: 'Any question or issue?',
        answer: (
          <>
            <span>
              Check our{' '}
              <Link href='/docs/guides/screenshot/troubleshooting'>
                troubleshooting guide
              </Link>{' '}
              for common fixes, or reach us at:{' '}
              <Link href='mailto:hello@microlink.io'>hello@microlink.io</Link>
            </span>
          </>
        )
      }
    ]}
  />
)

/* ─── Page Head (SEO) ──────────────────────────────────── */

export const Head = () => (
  <Meta
    title='Mobile Website Screenshot Generator — Free Online Tool'
    noSuffix
    description='Take full page screen capture mobile screenshots of any website. Test responsive designs across real device sizes. Free online tool + Screenshot API.'
    schemaType='SoftwareApplication'
    structured={[
      {
        '@context': 'https://schema.org',
        '@type': 'SoftwareApplication',
        '@id': 'https://microlink.io/tools/website-screenshot/mobile',
        name: 'Microlink Mobile Screenshot Tool',
        description:
          'Capture mobile screenshots of any website using real smartphone viewports. Supports iPhone, Samsung Galaxy, and Google Pixel devices with portrait and landscape modes.',
        url: 'https://microlink.io/tools/website-screenshot/mobile',
        applicationCategory: ['DeveloperApplication', 'Tool'],
        keywords: [
          'mobile website screenshot generator',
          'mobile screenshot of website',
          'screenshot responsive website',
          'website screenshot in different devices',
          'mobile website capture tool',
          'responsive design screenshot'
        ],
        offers: {
          '@type': 'Offer',
          price: '0',
          priceCurrency: 'USD',
          description: 'Free tier with 25 mobile screenshots per day'
        }
      },
      {
        '@context': 'https://schema.org',
        '@type': 'FAQPage',
        mainEntity: [
          {
            '@type': 'Question',
            name: 'Is this mobile screenshot tool really free?',
            acceptedAnswer: {
              '@type': 'Answer',
              text: 'Yes! You can take up to 25 mobile screenshots per day for free, with no credit card required. Free screenshots include all features — phone emulation, full-page capture, portrait and landscape modes, and multiple formats.'
            }
          },
          {
            '@type': 'Question',
            name: 'Which phones can I emulate?',
            acceptedAnswer: {
              '@type': 'Answer',
              text: 'We support the most popular smartphones including iPhone 17 Pro Max, iPhone 17 Pro, iPhone 17, iPhone 17 Air, Samsung Galaxy S26 Ultra, Samsung Galaxy S26, Samsung Galaxy A16, Samsung Galaxy A06, Google Pixel 10 Pro, Google Pixel 10 Pro XL, and Google Pixel 10. Each device uses its real CSS viewport dimensions for pixel-perfect mobile screenshots.'
            }
          },
          {
            '@type': 'Question',
            name: 'Can I take landscape screenshots?',
            acceptedAnswer: {
              '@type': 'Answer',
              text: 'Yes! Toggle between portrait and landscape orientation for any phone model. The viewport dimensions are automatically swapped to give you an accurate landscape view.'
            }
          },
          {
            '@type': 'Question',
            name: 'Can I screenshot a website in different mobile devices at the same time?',
            acceptedAnswer: {
              '@type': 'Answer',
              text: 'The free tool handles one device at a time. For batch captures across multiple devices simultaneously, use the Microlink Screenshot API which supports any custom viewport or preset device in a single request.'
            }
          }
        ]
      }
    ]}
  />
)

/* ─── Page Component ───────────────────────────────────── */

const WebsiteScreenshotPage = () => (
  <Layout>
    <Hero />
    <ScreenshotTool />
    <HowItWorks />
    <Explanation />
    <UseCases />
    <Banner />
    <Features
      css={theme({ px: 4, py: SECTION_VERTICAL_SPACING })}
      title={
        <Subhead css={{ width: '100%', textAlign: 'left' }}>
          Website Screenshot API{' '}
          <span
            css={{
              display: 'block',
              color: '#fd494a',
              width: '100%',
              textAlign: 'left'
            }}
          >
            for Automated Captures.
          </span>
        </Subhead>
      }
      caption={
        <>
          No servers to maintain, no load balancers, no paying for capacity you
          don't use. Microlink lets you spend more time building and less time
          configuring — easy integration via{' '}
          <Link href='/screenshot'>Screenshot API</Link>.
        </>
      }
      features={FEATURES_LIST}
    />
    <ApiDocsCard
      title='Screenshot API documentation'
      description='Explore the full Screenshot API reference with interactive examples, SDKs for every language, and ready-to-use code snippets.'
    />
    <ProductInformation />
  </Layout>
)

export default WebsiteScreenshotPage
