import { FORMAT_OPTIONS } from "@/lib/outputFormats";

function Badge({ children }: { children: React.ReactNode }) {
  return (
    <span className="inline-flex items-center rounded-full border border-white/60 bg-white/50 px-3 py-1 text-xs font-semibold text-slate-700 shadow-sm backdrop-blur ring-1 ring-indigo-500/10">
      {children}
    </span>
  );
}

function Card({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="group rounded-2xl border border-white/55 bg-white/55 p-5 shadow-md shadow-indigo-500/10 backdrop-blur transition duration-300 hover:-translate-y-0.5 hover:border-white/75 hover:bg-white/70 hover:shadow-lg hover:shadow-indigo-500/15">
      <div className="mb-3 h-1 w-12 rounded-full bg-gradient-to-r from-indigo-500 via-violet-500 to-fuchsia-400 opacity-80 transition group-hover:w-16" />
      <h3 className="font-display text-base font-bold tracking-tight text-slate-900">{title}</h3>
      <div className="mt-2 text-sm leading-relaxed text-slate-600">{children}</div>
    </div>
  );
}

export function TrustRow() {
  return (
    <div className="mt-6 flex flex-wrap items-center gap-2">
      <Badge>No sign-up</Badge>
      <Badge>No watermark</Badge>
      <Badge>Server-side conversion</Badge>
      <Badge>Resize + quality</Badge>
      <Badge>{FORMAT_OPTIONS.length} output presets</Badge>
    </div>
  );
}

export function FeatureGrid() {
  return (
    <section className="w-full scroll-mt-8">
      <div className="flex items-end justify-between gap-6">
        <div className="min-w-0 flex-1">
          <h2 className="font-display text-balance text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
            Built for everyday conversions and picky edge cases
          </h2>
          <p className="mt-2 max-w-3xl text-pretty text-sm text-slate-600">
            Most “simple” image converter tools hide the settings that actually matter. This converter surfaces practical
            presets for converting images and compressing files (lossless vs lossy, palette PNG, TIFF compression
            choices, favicon ICO bundles) while keeping the workflow one-click.
          </p>
        </div>
      </div>

      <div className="mt-6 grid min-w-0 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <Card title="Modern formats">
          Convert images to AVIF and WebP to compress file size for the web, plus HEIF/HEIC presets for mobile ecosystems.
        </Card>
        <Card title="Print & archival">
          Multiple TIFF compression modes (JPEG/LZW/Deflate/Zstd and more) and JPEG 2000 presets when supported.
        </Card>
        <Card title="Developer-friendly">
          Raw RGBA output for pipelines, plus predictable MIME types and filenames for automated convert flows.
        </Card>
        <Card title="Favicon-ready">
          ICO output is generated as a multi-size bundle (16–256px) so it works across Windows and browsers (perfect for
          favicon.ico).
        </Card>
        <Card title="Quality + resize">
          Resize images and keep aspect ratio automatically when you enter only width or height. Clamp-safe inputs, no
          weird surprises.
        </Card>
        <Card title="Privacy by default">
          Images are processed in-memory and returned immediately. Nothing is written to disk by this app.
        </Card>
      </div>
    </section>
  );
}

export function SEOContent() {
  return (
    <section className="grid w-full gap-4 scroll-mt-8 lg:grid-cols-2 lg:gap-5">
      <div className="min-w-0 rounded-2xl border border-white/55 bg-white/55 p-6 shadow-lg shadow-indigo-500/10 backdrop-blur transition hover:bg-white/65">
        <h2 className="font-display text-xl font-bold tracking-tight text-slate-900">Online Image Converter</h2>
        <div className="mt-3 space-y-3 text-sm leading-relaxed text-slate-600">
          <p>
            If you frequently convert an image between formats (for websites, apps, printing, or sharing), you’ve likely
            run into the same issues: the output is blurry, the file is bigger than the input, transparency disappears,
            or you can’t find a reliable way to convert to a favicon ICO.
          </p>
          <p>
            This Image Converter is designed as a practical toolbox to convert and compress images. Convert photos to
            JPG/JPEG, graphics to PNG, compress and ship smaller files with WebP or AVIF, export print-friendly TIFF,
            and generate multi-size ICO files for icons. You can also resize an image for banners, thumbnails, and
            social posts.
          </p>
          <p>
            The goal is simple: make image convert tasks fast, and still give you the knobs that matter when you need
            them.
          </p>
        </div>
      </div>

      <div className="min-w-0 rounded-2xl border border-white/55 bg-white/55 p-6 shadow-lg shadow-indigo-500/10 backdrop-blur transition hover:bg-white/65">
        <h2 className="font-display text-xl font-bold tracking-tight text-slate-900">Best format to use (quick guide)</h2>
        <div className="mt-3 space-y-3 text-sm leading-relaxed text-slate-600">
          <p>
            <span className="rounded-md bg-blue-500/15 px-1.5 py-0.5 font-semibold text-slate-800">JPG/JPEG</span> is
            best for photos and gradients. Use higher
            quality when you compress images with faces, logos, or text overlays.
          </p>
          <p>
            <span className="rounded-md bg-sky-500/15 px-1.5 py-0.5 font-semibold text-slate-800">PNG</span> is great
            for UI, screenshots, and transparency.
            Palette PNG can compress flat graphics significantly (especially icons and UI).
          </p>
          <p>
            <span className="rounded-md bg-violet-500/15 px-1.5 py-0.5 font-semibold text-slate-800">WebP</span> and{" "}
            <span className="rounded-md bg-fuchsia-500/15 px-1.5 py-0.5 font-semibold text-slate-800">AVIF</span> often
            give the smallest web-friendly files for
            photos and mixed content. Convert JPG to WebP/AVIF to reduce file size on websites.
          </p>
          <p>
            <span className="rounded-md bg-amber-500/15 px-1.5 py-0.5 font-semibold text-slate-800">TIFF</span> is common
            in print workflows. Choose compression
            based on your pipeline (JPEG for photos, LZW/Deflate for lossless).
          </p>
          <p>
            <span className="rounded-md bg-emerald-500/15 px-1.5 py-0.5 font-semibold text-slate-800">ICO</span> is
            specifically for icons and favicons: it’s a
            bundle of multiple sizes in one file. Convert PNG to ICO for a standard favicon.ico.
          </p>
        </div>
      </div>
    </section>
  );
}

export function FAQ() {
  return (
    <section className="w-full scroll-mt-8 rounded-2xl border border-white/55 bg-white/55 p-6 shadow-lg shadow-indigo-500/10 backdrop-blur sm:p-7">
      <h2 className="font-display text-xl font-bold tracking-tight text-slate-900">FAQ</h2>
      <div className="mt-4 grid gap-4 md:grid-cols-2">
        <div>
          <h3 className="text-sm font-semibold text-slate-900">Do you store my images?</h3>
          <p className="mt-1 text-sm text-slate-600">
            No. The server converts your upload in-memory and returns the result immediately. This app does not write
            uploads to disk.
          </p>
        </div>
        <div>
          <h3 className="text-sm font-semibold text-slate-900">Why do some formats sometimes fail?</h3>
          <p className="mt-1 text-sm text-slate-600">
            Some codecs (notably JPEG 2000, JPEG XL, HEIC/HEVC, and certain TIFF compressions) depend on the exact
            libraries available on the server. If a codec isn’t present, the API returns an error message.
          </p>
        </div>
        <div>
          <h3 className="text-sm font-semibold text-slate-900">What does “quality” mean?</h3>
          <p className="mt-1 text-sm text-slate-600">
            It’s an encoder hint used by lossy formats (JPG/JPEG, WebP, AVIF, HEIC, JPEG XL, JPEG 2000) when you
            compress an image. Lossless modes ignore quality or map it differently. For GIF it influences palette depth.
          </p>
        </div>
        <div>
          <h3 className="text-sm font-semibold text-slate-900">How does resize work?</h3>
          <p className="mt-1 text-sm text-slate-600">
            If you set only width or only height, the other dimension is computed to preserve aspect ratio. Images are
            not enlarged beyond their original size.
          </p>
        </div>
      </div>
    </section>
  );
}