import React from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import AnalysisHero from '../components/Home/AnalysisHero';
import { mdiHexagonMultiple, mdiShieldBug, mdiHistory } from '@mdi/js';
import BaseIcon from '../components/BaseIcon';

const FeatureItem = ({ icon, title, description }: { icon: string, title: string, description: string }) => (
  <div className="flex flex-col items-center p-6 bg-slate-800/30 rounded-2xl border border-slate-700/50">
    <div className="p-3 bg-cyan-500/10 rounded-xl mb-4 text-cyan-400">
      <BaseIcon path={icon} size={32} />
    </div>
    <h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
    <p className="text-slate-400 text-center text-sm">{description}</p>
  </div>
);

export default function Home() {
  return (
    <div className="bg-slate-900 min-h-screen font-sans">
      <Head>
        <title>{getPageTitle('Universal Script Dumper')}</title>
      </Head>

      <AnalysisHero />

      <section className="py-24 bg-slate-900">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            <FeatureItem 
              icon={mdiHexagonMultiple}
              title="Multi-Engine Support"
              description="Dedicated patterns for Luraph, Prometheus, and Ironbrew VM architectures."
            />
            <FeatureItem 
              icon={mdiShieldBug}
              title="Malware Analysis"
              description="Heuristic scanning for webhooks, file system access, and credential theft."
            />
            <FeatureItem 
              icon={mdiHistory}
              title="Analysis History"
              description="Securely store and compare different versions of analyzed scripts."
            />
          </div>
        </div>
      </section>

      <section className="py-24 border-t border-slate-800">
        <div className="mx-auto max-w-7xl px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold text-white mb-12">Supported Obfuscators</h2>
          <div className="flex flex-wrap justify-center gap-12 opacity-50 grayscale hover:grayscale-0 transition-all">
            <div className="flex items-center gap-x-2 text-2xl font-bold text-slate-300">
              <span className="text-cyan-400">L</span>uraph
            </div>
            <div className="flex items-center gap-x-2 text-2xl font-bold text-slate-300">
              <span className="text-emerald-400">P</span>rometheus
            </div>
            <div className="flex items-center gap-x-2 text-2xl font-bold text-slate-300">
              <span className="text-purple-400">I</span>ronbrew
            </div>
          </div>
        </div>
      </section>

      <footer className="bg-slate-950 border-t border-slate-900 py-12">
        <div className="mx-auto max-w-7xl px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-y-4">
          <p className="text-slate-500 text-sm">
            © 2026 Script Dumper & Analyzer. All rights reserved.
          </p>
          <div className="flex gap-x-8 text-slate-500 text-sm">
            <a href="#" className="hover:text-cyan-400 transition-colors">Documentation</a>
            <a href="#" className="hover:text-cyan-400 transition-colors">API Reference</a>
          </div>
        </div>
      </footer>
    </div>
  );
}

Home.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};