frontend/src/components/Home.jsx

import { ArrowRight, BrainCircuit, LineChart, ShieldCheck, Database, Zap, FileSpreadsheet } from 'lucide-react';

export default function Home({ onProceed }) {
  return (
    <div className="home-container" style={{ padding: '2rem 0' }}>
      {/* Hero Section */}
      <div style={{ textAlign: 'center', marginBottom: '5rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{ background: 'var(--primary-glow)', padding: '1.5rem', borderRadius: '50%', color: 'var(--primary)', marginBottom: '2rem' }}>
          <BrainCircuit size={64} />
        </div>
        
        <h1 style={{ fontSize: '4.5rem', fontWeight: '800', letterSpacing: '-0.04em', marginBottom: '1.5rem', color: 'var(--text-main)', lineHeight: '1.1' }}>
          Next-Generation <br/>
          <span style={{ color: 'var(--primary)' }}>Loan Intelligence</span>
        </h1>
        
        <p style={{ fontSize: '1.25rem', color: 'var(--text-muted)', maxWidth: '650px', marginBottom: '3rem', lineHeight: '1.6' }}>
          Evaluate loan applications instantly. Our hybrid architecture combines deterministic mathematical modeling with Mistral Large 3 AI to provide human-readable, actionable financial decisions.
        </p>

        <button onClick={onProceed} className="btn" style={{ fontSize: '1.15rem', padding: '1.2rem 3.5rem', borderRadius: '40px' }}>
          Proceed to Application <ArrowRight size={22} />
        </button>
      </div>

      {/* Feature Grid Section */}
      <div style={{ marginBottom: '4rem' }}>
        <h2 style={{ textAlign: 'center', fontSize: '2.5rem', marginBottom: '3rem', fontWeight: '700' }}>Platform Capabilities</h2>
        
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem' }}>
          {/* Card 1 */}
          <div className="glass-card" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
            <div style={{ background: '#ecfdf5', width: '50px', height: '50px', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--success)' }}>
              <ShieldCheck size={28} />
            </div>
            <h3 style={{ fontSize: '1.5rem', fontWeight: '700' }}>Deterministic Engine</h3>
            <p style={{ color: 'var(--text-muted)', lineHeight: '1.6' }}>
              Base evaluations are driven by a strictly enforced Random Forest pipeline. No hallucinations—just pure math calculating Debt-to-Income ratios and credit health.
            </p>
          </div>

          {/* Card 2 */}
          <div className="glass-card" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
            <div style={{ background: 'var(--primary-glow)', width: '50px', height: '50px', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--primary)' }}>
              <Zap size={28} />
            </div>
            <h3 style={{ fontSize: '1.5rem', fontWeight: '700' }}>Generative Explanations</h3>
            <p style={{ color: 'var(--text-muted)', lineHeight: '1.6' }}>
              We pipe the mathematical packet into NVIDIA NIM (Mistral 3). It translates complex metrics into a multi-point, easy-to-read narrative for applicants.
            </p>
          </div>

          {/* Card 3 */}
          <div className="glass-card" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
            <div style={{ background: '#eff6ff', width: '50px', height: '50px', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#3b82f6' }}>
              <LineChart size={28} />
            </div>
            <h3 style={{ fontSize: '1.5rem', fontWeight: '700' }}>Visual Benchmarking</h3>
            <p style={{ color: 'var(--text-muted)', lineHeight: '1.6' }}>
              Dynamically compare incoming applications against a "Typical Approved Profile" using our built-in Radar comparisons and internal ML weigh distribution charts.
            </p>
          </div>
        </div>
      </div>
      
      {/* Footer Banner */}
      <div style={{ borderRadius: '20px', background: 'linear-gradient(135deg, #1a1b1e 0%, #374151 100%)', color: 'white', padding: '3rem', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem' }}>
         <Database size={40} color="var(--primary)" />
         <h2 style={{ fontSize: '2rem' }}>Ready to analyze your next portfolio?</h2>
         <button onClick={onProceed} className="btn" style={{ background: 'white', color: 'var(--text-main)', boxShadow: 'none' }}>
           Start Prediction Pipeline
         </button>
      </div>
    </div>
  );
}