all-file-converter/src/pages/Features.tsx

import { useEffect, useState } from "react";
import { updateSEO } from "../utils/seo";
import { Layers, CheckCircle2, Cpu, FileText, Image as ImageIcon, Video, Music, Command, Code, Search, ArrowRight } from "lucide-react";
import { motion } from "motion/react";

const FORMAT_CATEGORIES = [
  {
    id: "docs",
    name: "Documents & Office",
    icon: <FileText className="w-5 h-5 text-indigo-500" />,
    intro: "Convert reports, contracts, spreadsheets, presentations, and vector documents.",
    formats: [
      { ext: "PDF", name: "Portable Document Format", bidirectional: true, speed: "Instant" },
      { ext: "DOC/DOCX", name: "Microsoft Word Template", bidirectional: true, speed: "Ultra Fast" },
      { ext: "XLS/XLSX", name: "Microsoft Excel Spreadsheet", bidirectional: true, speed: "Fast" },
      { ext: "PPT/PPTX", name: "Microsoft PowerPoint Presentation", bidirectional: true, speed: "Fast" },
      { ext: "TXT/RTF", name: "Plain and Rich Text Files", bidirectional: true, speed: "Instant" },
      { ext: "CSV", name: "Comma Separated Values", bidirectional: true, speed: "Instant" },
      { ext: "EPUB", name: "Electronic Publication eBook", bidirectional: true, speed: "Medium" },
      { ext: "HTML/MHTML", name: "Web Document Format", bidirectional: true, speed: "Instant" },
    ],
  },
  {
    id: "images",
    name: "Images & Vectors",
    icon: <ImageIcon className="w-5 h-5 text-violet-500" />,
    intro: "Compress design projects, generate modern formats, or export lossless vectors.",
    formats: [
      { ext: "WEBP", name: "Google WebP Ultra Image", bidirectional: true, speed: "GPU Optimized" },
      { ext: "PNG", name: "Lossless Portable Network Graphics", bidirectional: true, speed: "GPU Stacked" },
      { ext: "JPG/JPEG", name: "Standard Joint Photographic Group", bidirectional: true, speed: "Instant" },
      { ext: "SVG", name: "Scalable Vector Illustration", bidirectional: true, speed: "Instant" },
      { ext: "TIFF", name: "High-definition Desktop Publishing", bidirectional: true, speed: "Fast" },
      { ext: "GIF", name: "Graphical Interchange Animation", bidirectional: true, speed: "Medium" },
      { ext: "BMP", name: "Bitmapped Color Grid Archive", bidirectional: true, speed: "Instant" },
      { ext: "ICO", name: "Windows App Integration Icon", bidirectional: true, speed: "Instant" },
    ],
  },
  {
    id: "video",
    name: "Video & Animation",
    icon: <Video className="w-5 h-5 text-fuchsia-500" />,
    intro: "Encode films, strip streams, adjust bitrates, or convert slideshow matrices.",
    formats: [
      { ext: "MP4", name: "MPEG-4 Standard Stream", bidirectional: true, speed: "6x CUDA Speed" },
      { ext: "MKV", name: "Matroska Multimedia Container", bidirectional: true, speed: "GPU Direct" },
      { ext: "MOV", name: "Apple QuickTime Film", bidirectional: true, speed: "Mac Metal core" },
      { ext: "AVI", name: "Audio Video Interleaved Legacy", bidirectional: true, speed: "Fast" },
      { ext: "WEBM", name: "Google WebM High-Compression", bidirectional: true, speed: "GPU Direct" },
      { ext: "GIF (Video)", name: "Convert film segment to Animated GIF", bidirectional: true, speed: "CPU Heavy" },
      { ext: "MPEG/MPG", name: "Classic Broadcasting Suite", bidirectional: false, speed: "Fast" },
    ],
  },
  {
    id: "audio",
    name: "Audio & Music",
    icon: <Music className="w-5 h-5 text-emerald-500" />,
    intro: "Sample podcast tracks, convert audio notes, or compress studio tracks.",
    formats: [
      { ext: "MP3", name: "MPEG Layer-3 Audio Stream", bidirectional: true, speed: "Instant" },
      { ext: "WAV", name: "Waveform Studio High Fidelity", bidirectional: true, speed: "Instant" },
      { ext: "FLAC", name: "Free Lossless Audio Codec", bidirectional: true, speed: "Fast" },
      { ext: "AAC", name: "Advanced Audio Coding Stream", bidirectional: true, speed: "Instant" },
      { ext: "OGG", name: "Ogg Vorbis Compressed Media", bidirectional: true, speed: "Fast" },
      { ext: "M4A", name: "Apple AAC Audio Wrapper", bidirectional: true, speed: "Instant" },
      { ext: "WMA", name: "Windows Media Format Audio", bidirectional: true, speed: "Fast" },
    ],
  },
];

const CLI_EXAMPLE = `# Convert standard document to WebP locally
lumina-convert --input quarterly_report.pdf --output webp/ --quality 95

# Super-resolution upscale image via GPU CUDA
lumina-convert --upscale 2x --cpu-threads 8 --gpu-state cudanext --file photo.jpg

# Batch extract all frames from video
lumina-convert --batch --dir ~/media/exports --format mp3 --dry-run false`;

export default function Features() {
  const [searchTerm, setSearchTerm] = useState("");
  const [activeTab, setActiveTab] = useState("all");

  useEffect(() => {
    updateSEO({
      title: "Supported Formats & CLI Specs | Lumina Convert Technical",
      description: "Explore 200+ converter formats. Complete database details for PDF, DOCX, WebP, SVG, PNG, MP4, MKV, FLAC, and WAV converting pipelines equipped by Lumina local GPU acceleration.",
      keywords: "Lumina convert formats list, local video codec, on-device audio conversion, CLI file converter command, secure conversion parameters",
    });
  }, []);

  // Filter formats
  const filteredCategories = FORMAT_CATEGORIES.map((cat) => {
    if (activeTab !== "all" && cat.id !== activeTab) {
      return null;
    }
    const matchingFormats = cat.formats.filter((f) =>
      f.ext.toLowerCase().includes(searchTerm.toLowerCase()) ||
      f.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
    if (matchingFormats.length === 0 && searchTerm !== "") return null;
    return {
      ...cat,
      formats: searchTerm === "" ? cat.formats : matchingFormats,
    };
  }).filter((c) => c !== null) as typeof FORMAT_CATEGORIES;

  return (
    <section className="py-12 bg-gradient-to-b from-[#FBFBFD] to-[#FAF9FE] min-h-screen">
      <div className="max-w-7xl mx-auto px-4 md:px-8 mt-12 pb-24 text-left">
        {/* Breadcrumb / Badge */}
        <div className="mb-6 flex justify-center lg:justify-start">
          <div className="inline-flex items-center space-x-2 bg-violet-50 border border-violet-100 px-3.5 py-1.5 rounded-full">
            <Layers className="w-3.5 h-3.5 text-violet-600" />
            <span className="text-xs font-bold font-mono text-violet-700 uppercase tracking-widest">
              Lumina Architecture Database
            </span>
          </div>
        </div>

        {/* Title */}
        <h1 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 tracking-tight leading-tight mb-5 text-center lg:text-left">
          200+ Formats, Powered by{" "}
          <span className="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent font-extrabold">
            Local Codecs
          </span>
        </h1>
        <p className="text-slate-600 text-base md:text-lg font-light max-w-3xl mb-12 text-center lg:text-left">
          Lumina Convert embeds compiled versions of FFmpeg, Ghostscript, and WebP tools directly within our Windows executable framework. Review our active on-device encoding pipeline below.
        </p>

        {/* Search bar & Category filters */}
        <div className="bg-white p-6 rounded-3xl border border-slate-100/80 shadow-md shadow-slate-100/20 mb-12">
          <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
            {/* Search */}
            <div className="relative w-full md:w-80">
              <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Search extension (e.g., pdf, webp)..."
                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200/80 rounded-2xl text-slate-800 text-sm focus:outline-none focus:ring-1 focus:ring-violet-500 focus:border-violet-500 focus:bg-white transition"
              />
            </div>

            {/* Filter segments */}
            <div className="flex flex-wrap gap-2 w-full md:w-auto">
              {[
                { name: "All Categories", id: "all" },
                { name: "Documents", id: "docs" },
                { name: "Images", id: "images" },
                { name: "Videos", id: "video" },
                { name: "Audios", id: "audio" },
              ].map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`text-xs font-semibold py-2 px-4 rounded-xl transition cursor-pointer border ${
                    activeTab === tab.id
                      ? "bg-violet-600 text-white border-violet-600 shadow-sm"
                      : "bg-white text-slate-600 border-slate-200/60 hover:bg-slate-50"
                  }`}
                >
                  {tab.name}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Categories rendering */}
        <div className="space-y-16" id="technical-categories-group">
          {filteredCategories.length > 0 ? (
            filteredCategories.map((cat) => (
              <div key={cat.id} className="space-y-6" id={`category-block-${cat.id}`}>
                {/* Category Header */}
                <div className="flex items-center space-x-3 pb-3 border-b border-slate-150">
                  <div className="p-2.5 rounded-xl bg-white border border-slate-100/60 shadow-sm">
                    {cat.icon}
                  </div>
                  <div>
                    <h2 className="font-display font-bold text-xl text-slate-900 tracking-tight">
                      {cat.name}
                    </h2>
                    <p className="text-slate-500 text-xs font-light">{cat.intro}</p>
                  </div>
                </div>

                {/* Formats Grid */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                  {cat.formats.map((f, i) => (
                    <div
                      key={i}
                      className="p-5 rounded-2xl bg-white border border-slate-100 shadow-sm hover:border-violet-100 hover:shadow-md transition-all text-left flex flex-col justify-between"
                    >
                      <div>
                        {/* Extension header */}
                        <div className="flex justify-between items-center mb-2.5">
                          <span className="font-mono font-bold text-sm bg-slate-100 text-slate-800 px-2.5 py-1 rounded-lg">
                            .{f.ext}
                          </span>
                          <span className="text-[10px] font-mono font-semibold text-violet-600 tracking-wider uppercase bg-violet-50 px-2 py-0.5 rounded">
                            {f.speed}
                          </span>
                        </div>

                        {/* Name */}
                        <h4 className="text-sm font-semibold text-slate-900 mb-1">{f.ext} Container</h4>
                        <p className="text-slate-500 text-xs font-light leading-relaxed mb-4">
                          {f.name} encoder algorithms.
                        </p>
                      </div>

                      <div className="flex items-center text-[10px] text-slate-400 border-t border-slate-50/50 pt-3">
                        <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500 mr-1.5" />
                        <span>Bi-directional local processing</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))
          ) : (
            <div className="text-center py-16 bg-white p-8 rounded-3xl border border-dashed border-slate-205 max-w-sm mx-auto">
              <p className="text-sm font-semibold text-slate-700">No format extensions found</p>
              <p className="text-xs text-slate-500 mt-1">Try testing other search queries.</p>
            </div>
          )}
        </div>

        {/* Premium Developer Command Line CLI Showcase */}
        <div className="mt-20 bg-slate-950 p-8 rounded-[32px] border border-white/10 shadow-2xl relative overflow-hidden">
          <div className="absolute top-0 right-0 w-96 h-96 bg-violet-600/10 rounded-full blur-3xl pointer-events-none" />

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
            {/* CLI text info */}
            <div className="lg:col-span-5 text-left space-y-5">
              <div className="inline-flex items-center space-x-2 bg-white/10 border border-white/10 px-3 py-1 rounded-full text-slate-350">
                <Command className="w-3.5 h-3.5 text-violet-400" />
                <span className="text-[10px] font-mono font-bold uppercase tracking-wider">
                  Power-User CLI Engine
                </span>
              </div>
              <h3 className="font-display font-medium text-2xl text-white tracking-tight">
                Headless Terminal Triggers
              </h3>
              <p className="text-slate-400 text-xs md:text-sm font-light leading-relaxed">
                Need to automate conversions from watch folders, shell scripts, or localized server procedures? Every Lumina Convert install registers the <code>lumina-convert</code> wrapper to the system environment PATH.
              </p>
              <ul className="space-y-2 text-xs text-slate-300 font-light">
                <li className="flex items-center gap-2">
                  <div className="w-1.5 h-1.5 rounded-full bg-violet-400" />
                  <span>Supports complete wildcards (e.g. *.png)</span>
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-1.5 h-1.5 rounded-full bg-violet-400" />
                  <span>Returns industry-standard shell code outputs</span>
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-1.5 h-1.5 rounded-full bg-violet-400" />
                  <span>Lightweight wrapper (~12MB storage trace)</span>
                </li>
              </ul>
            </div>

            {/* Simulated Shell Terminal */}
            <div className="lg:col-span-7 bg-slate-900 border border-white/5 rounded-2xl overflow-hidden shadow-inner">
              {/* Window Header */}
              <div className="bg-slate-950 px-4 py-2.5 flex items-center justify-between border-b border-white/5">
                <div className="flex space-x-1.5">
                  <span className="w-3 h-3 rounded-full bg-rose-450 opacity-80" />
                  <span className="w-3 h-3 rounded-full bg-amber-450 opacity-80" />
                  <span className="w-3 h-3 rounded-full bg-emerald-450 opacity-80" />
                </div>
                <span className="text-[10px] font-mono font-bold text-slate-400">PowerShell - L_Convert_CLI</span>
                <span className="w-1" />
              </div>

              {/* Code window */}
              <div className="p-5 text-left font-mono text-xs text-slate-300 leading-relaxed overflow-x-auto whitespace-pre bg-slate-950/80">
                {CLI_EXAMPLE}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}