import PageHero from '../components/PageHero.jsx'
import ToolCard from '../components/ToolCard.jsx'

const pdfTools = [
  { icon: '🖼️', title: 'Image to PDF', description: 'Convert JPG, PNG or any image to a PDF file instantly.' },
  { icon: '🖼️', title: 'PDF to Image', description: 'Extract pages from PDF as JPG or PNG images.' },
  { icon: '📝', title: 'Word to PDF', description: 'Convert .docx Word documents to PDF with formatting preserved.' },
  { icon: '📝', title: 'PDF to Word', description: 'Convert PDF back to editable Word document.' },
  { icon: '📊', title: 'Excel to PDF', description: 'Convert Excel spreadsheets to PDF.' },
  { icon: '📊', title: 'PowerPoint to PDF', description: 'Convert PPT/PPTX presentations to PDF.' },
  { icon: '📄', title: 'XPS to PDF', description: 'Convert XPS files to standard PDF format.' },
  { icon: '📄', title: 'TIFF to PDF', description: 'Convert TIFF image files to PDF.' },
  { icon: '📄', title: 'Text File to PDF', description: 'Convert plain .txt files to PDF.' },
  { icon: '🗜️', title: 'PDF Compress', description: 'Reduce PDF file size for journal submission or email.' },
  { icon: '🔗', title: 'PDF Merge', description: 'Combine multiple PDFs into one single document.' },
  { icon: '✂️', title: 'PDF Split', description: 'Split a PDF into separate pages or page ranges.' },
  { icon: '🔢', title: 'Add Page Numbers', description: 'Add page numbers to your PDF document.' },
]

export default function PDFTools() {
  return (
    <main>
      <PageHero
        tag="13 free tools"
        title="PDF Tools"
        subtitle="Convert, compress, merge, split and more. All tools run in your browser — no file uploads to servers, no sign up required."
      />

      <section style={{ padding: '56px 0' }}>
        <div className="container">
          <div style={gridStyle}>
            {pdfTools.map(tool => (
              <ToolCard
                key={tool.title}
                icon={tool.icon}
                title={tool.title}
                description={tool.description}
                onClick={() => alert(`${tool.title} — coming soon!`)}
              />
            ))}
          </div>

          <div style={noteStyle}>
            <span>🔒</span>
            <p style={{ color: 'var(--text-secondary)', fontSize: '0.875rem' }}>
              All PDF tools process files locally in your browser. Your files are never uploaded to our servers.
            </p>
          </div>
        </div>
      </section>
    </main>
  )
}

const gridStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
  gap: '16px',
  marginBottom: '40px',
}

const noteStyle = {
  display: 'flex',
  alignItems: 'center',
  gap: '10px',
  background: 'var(--teal-light)',
  border: '1px solid var(--border)',
  borderRadius: 'var(--radius)',
  padding: '14px 20px',
  maxWidth: '480px',
}