import React from 'react';
import { 
  ShieldCheck, 
  Zap, 
  TrendingDown, 
  ArrowRight, 
  Gavel, 
  Database, 
  Target,
  ShieldEllipsis,
  Coins,
  Copy
} from 'lucide-react';

interface LandingPageProps {
  onEnterDashboard: () => void;
}

const STABLE_DEPLOY_URL = "https://silentloss-commander-v2-0-1047953835170.us-west1.run.app";

const LandingPage: React.FC<LandingPageProps> = ({ onEnterDashboard }) => {
  const copyUrl = () => {
    navigator.clipboard.writeText(STABLE_DEPLOY_URL);
    alert("Official Demo URL copied to clipboard!");
  };

  return (
    <div className="min-h-screen bg-[#0f172a] text-slate-100 selection:bg-cyan-500/30 overflow-x-hidden">
      {/* Hero Section */}
      <section className="relative pt-24 pb-32 px-6 overflow-hidden">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1200px] h-[600px] bg-cyan-500/10 blur-[120px] rounded-full pointer-events-none" />
        <div className="max-w-5xl mx-auto text-center relative z-10">
          <div className="flex flex-col items-center gap-4 mb-8">
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-800/80 border border-slate-700 text-cyan-400 text-[10px] font-black tracking-[0.2em] uppercase backdrop-blur-md">
              <Coins size={14} /> The ROI of Algorithmic Integrity
            </div>
          </div>

          <h1 className="text-5xl md:text-7xl font-black tracking-tight mb-8 leading-[1.1]">
            Stop the <span className="text-cyan-400">Invisible Drain</span> <br />
            on Your Margins.
          </h1>
          <p className="max-w-2xl mx-auto text-slate-400 text-lg md:text-xl leading-relaxed mb-10">
            When your AI models stay "up" but start making "wrong" financial decisions, you lose millions in silence. We detect economic drift in real-time.
          </p>
          <div className="flex flex-col md:flex-row items-center justify-center gap-6">
            <button onClick={onEnterDashboard} className="px-10 py-5 bg-cyan-600 hover:bg-cyan-500 text-white font-black rounded-2xl transition-all shadow-2xl flex items-center gap-3 group uppercase text-sm tracking-widest">
              Launch Command Center <ArrowRight className="group-hover:translate-x-1 transition-transform" />
            </button>
            <button onClick={copyUrl} className="px-6 py-5 bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold rounded-2xl transition-all border border-slate-700 flex items-center gap-2 text-xs uppercase tracking-widest">
              <Copy size={16} /> Copy Demo URL
            </button>
          </div>
        </div>
      </section>

      {/* Competitive Comparison Table */}
      <section className="py-24 px-6 bg-slate-950/50 border-y border-slate-800">
        <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div>
            <h2 className="text-3xl font-black mb-6 uppercase tracking-tight">The "Silent Loss" Crisis</h2>
            <p className="text-slate-400 mb-8 leading-relaxed">
              Traditional monitoring tells you if your AI is <strong>working</strong>. It doesn't tell you if it's <strong>profitable</strong>. 
              Logic drift—subtle changes in how a model weights risk—is responsible for billions in losses annually.
            </p>
            <div className="space-y-4">
              {[
                { label: "Economic Drift", desc: "1% error in rate-setting costs a mid-market lender $4.2M/year.", icon: TrendingDown },
                { label: "Compliance Erosion", desc: "Accidental bias in AI decisions triggers massive SEC/CFPB fines.", icon: Gavel },
                { label: "Market Volatility", desc: "Real-time decision auditing for high-frequency environments.", icon: Target },
              ].map((item, i) => (
                <div key={i} className="flex gap-4 p-4 rounded-xl bg-slate-900 border border-slate-800">
                  <item.icon className="text-cyan-500 shrink-0" size={24} />
                  <div>
                    <h4 className="font-bold text-white text-sm">{item.label}</h4>
                    <p className="text-xs text-slate-500 mt-1">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="bg-slate-900 p-8 rounded-3xl border border-slate-800 shadow-inner">
            <h3 className="text-xl font-bold mb-6 flex items-center gap-2">
              <Target className="text-cyan-500" /> Competitive Comparison (SilentLoss v2.0)
            </h3>
            <div className="overflow-x-auto">
              <table className="w-full text-left text-[10px]">
                <thead>
                  <tr className="border-b border-slate-800 text-slate-500 uppercase">
                    <th className="pb-4">Capability</th>
                    <th className="pb-4">Typical Competitors</th>
                    <th className="pb-4 text-cyan-400 font-black">SilentLoss v2.0</th>
                  </tr>
                </thead>
                <tbody className="text-slate-400">
                  {[
                    ["System Uptime / Latency", "Yes (core focus)", "Standard (baseline)"],
                    ["Dollar-Impact Awareness", "No (metrics only)", "Native economic metrics"],
                    ["AI Decision Reasoning", "Limited or none", "Full Gemini reasoning"],
                    ["Silent Failure Detection", "No", "Native confidence tracking"],
                    ["Real-Time Streaming", "Partial / batch", "Confluent event-driven"],
                    ["Voice-Driven Intervention", "No", "ElevenLabs UI + Gemini TTS"]
                  ].map(([cap, comp, sl], i) => (
                    <tr key={i} className="border-b border-slate-800/50">
                      <td className="py-4 font-bold text-white">{cap}</td>
                      <td className="py-4">{comp}</td>
                      <td className="py-4 text-cyan-500 font-bold">{sl}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <footer className="py-12 border-t border-slate-800 text-center text-slate-600 text-[10px] mono uppercase tracking-[0.5em]">
        SilentLoss v2.0 // PROTECTING EQUITY WITH MACHINE INTELLIGENCE
      </footer>
    </div>
  );
};

export default LandingPage;