src/components/LandingPage.jsx

import { motion } from 'framer-motion';
import { ShieldCheck, ScanSearch, BrainCircuit, Workflow, ChevronRight, AlertTriangle, Sparkles, BarChart3, Users, ArrowDown } from 'lucide-react';
import UploadZone from './UploadZone';
import styles from './LandingPage.module.css';

const problemCards = [
  {
    icon: AlertTriangle,
    title: 'Metadata Is Fragile',
    text: 'Modern synthetic media can strip or spoof EXIF and provenance fields, making metadata-only screening unreliable in adversarial settings.',
  },
  {
    icon: BrainCircuit,
    title: 'Black-Box Detectors Fail Trust',
    text: 'Many existing tools output a binary label without revealing why the model reached that conclusion, limiting evaluator confidence and auditability.',
  },
  {
    icon: ScanSearch,
    title: 'Explainability Is Essential',
    text: 'UAIDE moves beyond opaque predictions with Grad-CAM-style localisation, frequency signals, and confidence reasoning for each forensic verdict.',
  },
];

const pipeline = [
  'Data Preparation',
  'Feature Fusion',
  'EfficientNet B2 + FFT',
  'Random Forest / XGBoost',
  'Explainable Output',
];

const team = [
  { name: 'Aadya', role: 'Research, Documentation and Backend', note: 'Research synthesis, technical documentation, and backend workflow support.' },
  { name: 'Atherva', role: 'UI & UX · Literature Study', note: 'Interface strategy, evaluator flow, and research synthesis.' },
  { name: 'Deshna', role: 'Model Training, System Integration and Analysis', note: 'Model training coordination, system integration, and end-to-end forensic analysis workflow.' },
  { name: 'Ojas', role: 'System Design and Data Collection', note: 'System architecture planning, dataset curation, and structured data collection for experimentation.' },
];

const principles = [
  {
    title: 'Ethical Flagging',
    text: 'AI-generated faces and suspicious artefacts are surfaced with a conservative review-first posture for sensitive academic and investigative contexts.',
  },
  {
    title: 'Transparency Through XAI',
    text: 'Heatmaps, frequency cues, and score breakdowns help evaluators understand where the detector found evidence instead of trusting a hidden model state.',
  },
  {
    title: 'Bias Mitigation',
    text: 'K-Fold validation and multi-signal fusion reduce overfitting and encourage more stable decisions across varied image conditions and sources.',
  },
];

export default function LandingPage({ onFileSelect, error }) {
  return (
    <div className={styles.page}>
      <section className={styles.hero} id="top">
        <div className={styles.mesh} />
        <div className={styles.heroInner}>
          <motion.div
            className={styles.heroContent}
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.55 }}
          >
            <div className={styles.eyebrow}>
              <Sparkles size={14} />
              <span>Restoring Digital Trust Through Explainable AI Forensics</span>
            </div>
            <h1 className={styles.heroTitle}>UAIDE: Unified AI Origin Detection Engine.</h1>
            <p className={styles.heroText}>
              A robust computer vision framework for detecting synthetic media and deepfakes via content-level analysis.
              Designed for academic evaluation, explainability, and accountable forensic review.
            </p>
            <div className={styles.heroActions}>
              <a href="#analysis" className={styles.primaryCta}>
                <span>Start Forensic Scan</span>
                <ChevronRight size={16} />
              </a>
              <a href="#pipeline" className={styles.secondaryCta}>Review Technical Pipeline</a>
            </div>
          </motion.div>

          <motion.div
            className={styles.heroPanel}
            initial={{ opacity: 0, scale: 0.96 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.55, delay: 0.1 }}
          >
            <div className={styles.statGrid}>
              <div className={styles.statCard}>
                <span className={styles.statLabel}>Accuracy</span>
                <strong className={styles.statValue}>~95%</strong>
              </div>
              <div className={styles.statCard}>
                <span className={styles.statLabel}>AUC</span>
                <strong className={styles.statValue}>0.97</strong>
              </div>
              <div className={styles.statCard}>
                <span className={styles.statLabel}>Core Signals</span>
                <strong className={styles.statValue}>RGB + FFT</strong>
              </div>
              <div className={styles.statCard}>
                <span className={styles.statLabel}>Output</span>
                <strong className={styles.statValue}>Explainable</strong>
              </div>
            </div>
            <div className={styles.panelDiagram}>
              <div className={styles.diagramLine} />
              {pipeline.map((item, index) => (
                <div key={item} className={styles.diagramNodeWrap}>
                  <div className={styles.diagramNode}>{index + 1}</div>
                  <span>{item}</span>
                </div>
              ))}
            </div>
          </motion.div>
        </div>
        <a href="#problem" className={styles.scrollCue}>
          <ArrowDown size={15} />
          <span>Project Defense Walkthrough</span>
        </a>
      </section>

      <section className={styles.section} id="problem">
        <div className={styles.sectionHeader}>
          <span className={styles.sectionTag}>The Problem</span>
          <h2>Why synthetic media detection needs explainable forensics.</h2>
          <p>
            UAIDE addresses the research gap between raw classification performance and evaluator trust by combining content-level analysis with transparent evidence surfaces.
          </p>
        </div>
        <div className={styles.problemGrid}>
          {problemCards.map(({ icon: Icon, title, text }) => (
            <motion.article
              key={title}
              className={styles.problemCard}
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, amount: 0.25 }}
              transition={{ duration: 0.4 }}
            >
              <div className={styles.problemIcon}><Icon size={18} /></div>
              <h3>{title}</h3>
              <p>{text}</p>
            </motion.article>
          ))}
        </div>
      </section>

      <section className={styles.section} id="pipeline">
        <div className={styles.pipelineShell}>
          <div className={styles.sectionHeaderLeft}>
            <span className={styles.sectionTag}>Technical Pipeline</span>
            <h2>A layered detection stack built for validity and interpretability.</h2>
            <p>
              The system fuses spatial and frequency-domain evidence, then combines ensemble reasoning with explainable outputs to support academic scrutiny.
            </p>
          </div>
          <div className={styles.pipelineFlow}>
            {pipeline.map((item, index) => (
              <div key={item} className={styles.flowItem}>
                <div className={styles.flowIndex}>0{index + 1}</div>
                <div className={styles.flowBody}>
                  <h3>{item}</h3>
                  <p>
                    {index === 0 && 'Structured data preparation, frame conditioning, and media normalization for stable inference.'}
                    {index === 1 && 'Spatial and frequency-domain descriptors are fused to retain complementary forensic evidence.'}
                    {index === 2 && 'EfficientNet B2 and FFT-informed features capture both visual artefacts and spectral anomalies.'}
                    {index === 3 && 'Random Forest and XGBoost ensemble outputs improve robustness beyond a single-model vote.'}
                    {index === 4 && 'Final verdicts are paired with heatmap localisation and metadata summaries for evaluator review.'}
                  </p>
                </div>
                {index < pipeline.length - 1 && <div className={styles.flowConnector} />}
              </div>
            ))}
          </div>
          <div className={styles.metricsBar}>
            <div className={styles.metricBlock}>
              <BarChart3 size={16} />
              <div>
                <strong>~95% Accuracy</strong>
                <span>Validated on benchmark image classification experiments</span>
              </div>
            </div>
            <div className={styles.metricBlock}>
              <Workflow size={16} />
              <div>
                <strong>0.97 AUC</strong>
                <span>Strong ranking performance across real vs synthetic classes</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className={styles.section} id="ethics">
        <div className={styles.ethicsPanel}>
          <div className={styles.ethicsIntro}>
            <div className={styles.ethicsBadge}><ShieldCheck size={18} /></div>
            <span className={styles.sectionTag}>Ethics & Responsibility</span>
            <h2>Built with safeguards, transparency, and evaluator accountability in mind.</h2>
          </div>
          <div className={styles.principlesGrid}>
            {principles.map((principle) => (
              <article key={principle.title} className={styles.principleCard}>
                <h3>{principle.title}</h3>
                <p>{principle.text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className={styles.section} id="team">
        <div className={styles.sectionHeader}>
          <span className={styles.sectionTag}>Team</span>
          <h2>Accountability through clear ownership.</h2>
          <p>
            UAIDE is positioned not as a black-box demo, but as a documented academic system with defined roles across research, design, modeling, and integration.
          </p>
        </div>
        <div className={styles.teamGrid}>
          {team.map((member) => (
            <article key={member.name} className={styles.teamCard}>
              <div className={styles.avatar}>{member.name.slice(0, 2).toUpperCase()}</div>
              <div className={styles.teamBody}>
                <h3>{member.name}</h3>
                <p className={styles.teamRole}>{member.role}</p>
                <p className={styles.teamNote}>{member.note}</p>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className={styles.actionZone} id="analysis">
        <UploadZone onFileSelect={onFileSelect} error={error} />
      </section>
    </div>
  );
}