web/app/page.tsx

import Link from "next/link";
import {
  ShieldCheck, ShieldAlert, Scale, Gavel, ScanText, FileCheck,
  TriangleAlert, ArrowRight, Zap, Eye, Download, ChevronRight,
  Sparkles, Lock, Globe, Ban, FileX, Stamp, Layers, Tag, AlertTriangle,
  ClipboardList, Landmark, Building, BookOpen, CheckCircle, Cpu,
  MessageSquare, PenTool, ScanLine
} from "lucide-react";

const CLAUSES = [
  { icon: Scale, name: "Arbitration", desc: "Waives your right to sue in court", severity: "critical" },
  { icon: ShieldAlert, name: "Liability limits", desc: "Company avoids responsibility for damages", severity: "critical" },
  { icon: Ban, name: "Unilateral termination", desc: "They can close your account without reason", severity: "critical" },
  { icon: FileX, name: "Unilateral change", desc: "Terms can change without your consent", severity: "high" },
  { icon: Eye, name: "Content removal", desc: "Your content deleted without notice", severity: "high" },
  { icon: Globe, name: "Jurisdiction", desc: "Disputes handled in their preferred court", severity: "medium" },
  { icon: Gavel, name: "Choice of law", desc: "Foreign law overrides your local protections", severity: "medium" },
  { icon: Lock, name: "IP Ownership", desc: "Intellectual property transferred entirely", severity: "critical" },
  { icon: Layers, name: "41 CUAD Categories", desc: "Full taxonomy: NDA, MSA, SLA, and more", severity: "low" },
  { icon: Tag, name: "ML Legal NER", desc: "Extract parties, dates, money, jurisdictions via Legal-BERT", severity: "low" },
  { icon: AlertTriangle, name: "NLI Contradictions", desc: "Detect conflicting clauses with DeBERTa-v3 NLI model", severity: "high" },
  { icon: ClipboardList, name: "Obligations", desc: "Track monetary, compliance, reporting tasks with priority", severity: "medium" },
  { icon: Landmark, name: "Compliance", desc: "GDPR, CCPA, SOX, HIPAA, FINRA with negation detection", severity: "high" },
  { icon: BookOpen, name: "Compare Contracts", desc: "Semantic similarity with sentence embeddings", severity: "low" },
  { icon: PenTool, name: "Clause Redlining", desc: "AI suggests safer alternatives with legal citations", severity: "critical" },
  { icon: MessageSquare, name: "Q&A Chatbot", desc: "Ask questions about your contract — RAG-powered answers", severity: "medium" },
  { icon: ScanLine, name: "OCR for Scanned PDFs", desc: "docTR engine auto-detects and OCRs scanned contracts", severity: "low" },
  { icon: Cpu, name: "6 AI Models", desc: "Legal-BERT, NER, NLI, Embeddings, OCR, Qwen2.5-7B LLM", severity: "low" },
];

const STEPS = [
  { icon: Download, title: "Upload or paste", desc: "Drop a PDF (even scanned!), DOCX, or paste contract text directly." },
  { icon: ScanText, title: "6 AI models analyze", desc: "Legal-BERT + NER + NLI + OCR + Embeddings + LLM scan your contract." },
  { icon: TriangleAlert, title: "Get precise insights", desc: "Risk score, redlining, Q&A chatbot, contradictions, obligations, and compliance." },
];

const PRICING = [
  {
    name: "Free", price: "0", period: "", highlight: false, cta: "Get started",
    features: ["10 scans per month", "41 clause categories", "Risk scoring", "ML Legal NER", "NLI contradiction detection", "Compliance with negation detection", "Clause redlining suggestions", "OCR for scanned PDFs"],
  },
  {
    name: "Pro", price: "999", period: "/mo", highlight: true, cta: "Start free trial",
    features: ["Unlimited scans", "Upload PDF/DOCX files", "Contract comparison", "Q&A Chatbot (RAG)", "AI clause explanations", "LLM-refined redlining", "Scan history", "PDF report export", "Obligation tracker with priority", "Priority support"],
  },
  {
    name: "Team", price: "3,999", period: "/mo", highlight: false, cta: "Talk to us",
    features: ["Everything in Pro", "5 team seats", "10,000 API calls", "Shared dashboard", "Slack support", "Custom clause rules", "Enterprise compliance"],
  },
];

const sevColor: Record<string, string> = {
  critical: "text-red-500 bg-red-50 border-red-200",
  high: "text-amber-500 bg-amber-50 border-amber-200",
  medium: "text-blue-500 bg-blue-50 border-blue-200",
  low: "text-emerald-500 bg-emerald-50 border-emerald-200",
};

export default function Home() {
  return (
    <main className="min-h-screen bg-white text-zinc-900">
      {/* Hero */}
      <section className="max-w-6xl mx-auto px-4 sm:px-6 pt-16 sm:pt-24 pb-16 sm:pb-20">
        <div className="max-w-2xl">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-zinc-200 text-[13px] text-zinc-500 mb-6">
            <Sparkles className="w-3.5 h-3.5 text-zinc-400" />
            6 AI models · 41 clause categories · RAG chatbot · clause redlining · OCR
          </div>
          <h1 className="text-3xl sm:text-[42px] lg:text-5xl font-semibold tracking-tight leading-[1.1]">
            Know what you are<br className="hidden sm:block" /> agreeing to
          </h1>
          <p className="mt-5 text-base sm:text-[17px] text-zinc-500 leading-relaxed max-w-lg">
            ClauseGuard scans contracts using 6 AI models. Get clause detection, risk scoring,
            safer alternatives, Q&A chatbot, OCR for scanned PDFs, and compliance checks.
          </p>
          <div className="mt-8 flex flex-col sm:flex-row gap-3">
            <Link href="/dashboard-pages/analyze" className="inline-flex items-center justify-center gap-2 bg-zinc-900 text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-800 transition-colors">
              <ScanText className="w-4 h-4" />Try the scanner
            </Link>
            <Link href="/dashboard-pages/compare" className="inline-flex items-center justify-center gap-2 border border-zinc-200 px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-50 transition-colors">
              Compare contracts<ArrowRight className="w-4 h-4" />
            </Link>
          </div>
          <p className="mt-4 text-xs text-zinc-400">No account needed for free tier. 10 scans/month.</p>
        </div>
      </section>

      {/* Features */}
      <section id="features" className="border-t border-zinc-100">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
          <div className="flex items-center gap-2 mb-2">
            <ShieldCheck className="w-4 h-4 text-zinc-400" />
            <p className="text-[13px] font-medium text-zinc-400 uppercase tracking-wider">Detection</p>
          </div>
          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">18 powerful analysis features</h2>
          <p className="mt-2 text-zinc-500 text-sm sm:text-[15px] max-w-lg">
            Based on the CUAD taxonomy + CLAUDETTE framework. Now with RAG chatbot, clause redlining, and OCR.
          </p>
          <div className="mt-8 sm:mt-10 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-3">
            {CLAUSES.map((c) => (
              <div key={c.name} className="group border border-zinc-100 rounded-xl p-3 sm:p-4 hover:border-zinc-200 hover:shadow-sm transition-all cursor-default">
                <div className={`w-7 h-7 sm:w-8 sm:h-8 rounded-lg flex items-center justify-center border ${sevColor[c.severity]}`}>
                  <c.icon className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                </div>
                <p className="mt-2.5 sm:mt-3 text-xs sm:text-sm font-medium">{c.name}</p>
                <p className="mt-0.5 sm:mt-1 text-[11px] sm:text-[13px] text-zinc-500 leading-relaxed">{c.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="border-t border-zinc-100 bg-zinc-50/50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
          <div className="flex items-center gap-2 mb-2">
            <Zap className="w-4 h-4 text-zinc-400" />
            <p className="text-[13px] font-medium text-zinc-400 uppercase tracking-wider">How it works</p>
          </div>
          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">Three steps, under 30 seconds</h2>
          <div className="mt-8 sm:mt-10 grid sm:grid-cols-3 gap-6 sm:gap-8">
            {STEPS.map((s, i) => (
              <div key={s.title} className="relative">
                <div className="w-10 h-10 rounded-xl bg-white border border-zinc-200 flex items-center justify-center shadow-sm">
                  <s.icon className="w-5 h-5 text-zinc-600" />
                </div>
                <h3 className="mt-4 text-[15px] font-medium">{s.title}</h3>
                <p className="mt-1.5 text-[13px] text-zinc-500 leading-relaxed">{s.desc}</p>
                {i < 2 && <ChevronRight className="hidden sm:block absolute top-4 -right-5 w-4 h-4 text-zinc-300" />}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Technology */}
      <section className="border-t border-zinc-100">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
          <div className="flex items-center gap-2 mb-2">
            <Cpu className="w-4 h-4 text-zinc-400" />
            <p className="text-[13px] font-medium text-zinc-400 uppercase tracking-wider">Technology</p>
          </div>
          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">Built on 6 production AI models</h2>
          <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
            {[
              { name: "Legal-BERT Classifier", icon: Cpu, desc: "LoRA fine-tuned on 41 CUAD categories with sigmoid multi-label classification", source: "Mokshith31/legalbert-contract-clause-classification" },
              { name: "Legal-BERT NER", icon: Tag, desc: "Named entity recognition for parties, dates, money, jurisdictions", source: "matterstack/legal-bert-ner" },
              { name: "DeBERTa-v3 NLI", icon: AlertTriangle, desc: "Semantic contradiction detection between clause pairs", source: "cross-encoder/nli-deberta-v3-base" },
              { name: "RAG Chatbot", icon: MessageSquare, desc: "Embedding retrieval + Qwen2.5-7B LLM for contract Q&A", source: "all-MiniLM-L6-v2 + Qwen/Qwen2.5-7B-Instruct" },
              { name: "Clause Redlining", icon: PenTool, desc: "18+ legal templates + LLM refinement for safer clause alternatives", source: "FTC/EU/CFPB standards + Qwen2.5-7B" },
              { name: "docTR OCR", icon: ScanLine, desc: "Smart PDF router: auto-detects scanned PDFs and extracts text", source: "docTR fast_base + crnn_vgg16_bn" },
            ].map((m) => (
              <div key={m.name} className="border border-zinc-100 rounded-xl p-4 hover:border-zinc-200 hover:shadow-sm transition-all">
                <div className="flex items-center gap-2 mb-2">
                  <m.icon className="w-4 h-4 text-zinc-400" />
                  <p className="text-sm font-medium text-zinc-900">{m.name}</p>
                </div>
                <p className="text-[13px] text-zinc-500 leading-relaxed">{m.desc}</p>
                <p className="text-[11px] text-zinc-400 mt-2 font-mono">{m.source}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="border-t border-zinc-100">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">Pricing</h2>
          <p className="mt-2 text-zinc-500 text-sm sm:text-[15px]">Free forever. Upgrade when you need more.</p>
          <div className="mt-8 sm:mt-10 grid sm:grid-cols-3 gap-4 sm:gap-5 max-w-4xl">
            {PRICING.map((plan) => (
              <div key={plan.name} className={`rounded-xl p-5 sm:p-6 transition-shadow ${plan.highlight ? "border-2 border-zinc-900 shadow-sm" : "border border-zinc-200"}`}>
                <p className="text-[13px] font-medium text-zinc-400">{plan.name}</p>
                <p className="mt-2 flex items-baseline gap-1">
                  <span className="text-[11px] text-zinc-400">INR</span>
                  <span className="text-2xl sm:text-3xl font-semibold tracking-tight">{plan.price}</span>
                  <span className="text-sm text-zinc-400">{plan.period}</span>
                </p>
                <ul className="mt-5 space-y-2.5">
                  {plan.features.map((f) => (
                    <li key={f} className="flex items-start gap-2.5 text-[13px] text-zinc-600">
                      <FileCheck className="w-3.5 h-3.5 text-zinc-300 mt-0.5 shrink-0" />{f}
                    </li>
                  ))}
                </ul>
                <Link href={plan.name === "Free" ? "/auth/signup" : plan.name === "Team" ? "mailto:hello@clauseguardweb.netlify.app" : "/auth/signup"}
                  className={`mt-6 block w-full py-2.5 rounded-lg text-[13px] font-medium text-center transition-colors ${plan.highlight ? "bg-zinc-900 text-white hover:bg-zinc-800" : "border border-zinc-200 text-zinc-700 hover:bg-zinc-50"}`}>
                  {plan.cta}
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="border-t border-zinc-100 bg-zinc-50/50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-12 sm:py-16 text-center">
          <Lock className="w-6 h-6 text-zinc-300 mx-auto mb-4" />
          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">Read the fine print without reading it</h2>
          <p className="mt-2 text-sm sm:text-[15px] text-zinc-500 max-w-md mx-auto">Join thousands protecting themselves before clicking accept.</p>
          <div className="mt-6 flex flex-col sm:flex-row gap-3 justify-center">
            <Link href="/auth/signup" className="inline-flex items-center justify-center gap-2 bg-zinc-900 text-white px-6 py-3 rounded-lg text-sm font-medium hover:bg-zinc-800 transition-colors">
              <ScanText className="w-4 h-4" />Get started free
            </Link>
            <Link href="/dashboard-pages/compare" className="inline-flex items-center justify-center gap-2 border border-zinc-200 px-6 py-3 rounded-lg text-sm font-medium hover:bg-zinc-50 transition-colors">
              <ArrowRight className="w-4 h-4" />Compare contracts
            </Link>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-zinc-100">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 flex flex-col sm:flex-row justify-between items-center gap-4">
          <div className="flex items-center gap-2">
            <ShieldCheck className="w-4 h-4 text-zinc-300" />
            <span className="text-[13px] text-zinc-400">ClauseGuard v4.0 — not legal advice</span>
          </div>
          <div className="flex gap-5 text-[13px] text-zinc-400">
            <Link href="/privacy" className="hover:text-zinc-600">Privacy</Link>
            <Link href="/terms" className="hover:text-zinc-600">Terms</Link>
            <a href="mailto:hello@clauseguardweb.netlify.app" className="hover:text-zinc-600">Contact</a>
          </div>
        </div>
      </footer>
    </main>
  );
}