feat: Redesign landing page with widescreen hero and interactive autopilot simulator

apps/web/src/app/[locale]/layout.tsx

@@ -54,7 +54,7 @@ export default async function LocaleLayout({
         >
           <div
             style={{
-              maxWidth: 980,
+              maxWidth: 1200,
               margin: "0 auto",
               padding: "0 20px",
               height: 56,

apps/web/src/app/[locale]/page.tsx

@@ -14,6 +14,25 @@ import {
   DialogDescription,
 } from "@/components/ui/dialog";
 import { stateToStage } from "@/components/mission";
+import { AutopilotSimulator, TemplateId } from "@/components/app/AutopilotSimulator";
+import { 
+  ShoppingBag, 
+  CreditCard, 
+  ShieldAlert, 
+  Briefcase, 
+  Home as HomeIcon, 
+  Building2, 
+  Smartphone, 
+  HeartPulse, 
+  ArrowRight,
+  TrendingUp,
+  Clock,
+  CheckCircle,
+  HelpCircle,
+  Search,
+  Sparkles,
+  Zap
+} from "lucide-react";
 
 // ────────────────────────────────────────────────────────────────
 // Domain config
@@ -21,6 +40,17 @@ import { stateToStage } from "@/components/mission";
 
 const DOMAINS: IssueDomain[] = ["consumer", "payment", "cyber_fraud"];
 
+const DOMAIN_INFO: Record<string, { icon: React.ComponentType<{ className?: string }>; color: string; bg: string }> = {
+  consumer: { icon: ShoppingBag, color: "var(--primary)", bg: "var(--primary-light)" },
+  payment: { icon: CreditCard, color: "var(--info-fg)", bg: "var(--info-light)" },
+  cyber_fraud: { icon: ShieldAlert, color: "var(--danger-fg)", bg: "var(--danger-light)" },
+  employment: { icon: Briefcase, color: "var(--caution-fg)", bg: "var(--caution-light)" },
+  housing: { icon: HomeIcon, color: "var(--primary)", bg: "var(--primary-light)" },
+  govt_service: { icon: Building2, color: "var(--info-fg)", bg: "var(--info-light)" },
+  telecom: { icon: Smartphone, color: "var(--primary)", bg: "var(--primary-light)" },
+  healthcare: { icon: HeartPulse, color: "var(--danger-fg)", bg: "var(--danger-light)" },
+};
+
 // Stage chip colours
 const STAGE_CHIP_STYLES: Record<string, { bg: string; fg: string; border: string }> = {
   describe:  { bg: "var(--surface-elevated)", fg: "var(--foreground-muted)", border: "var(--border)" },
@@ -45,9 +75,9 @@ function StageChip({ state }: { state: MissionState }) {
   return (
     <span
       style={{
-        padding: "2px 9px",
+        padding: "3px 10px",
         borderRadius: 999,
-        fontSize: 11,
+        fontSize: 10,
         fontWeight: 700,
         textTransform: "uppercase",
         letterSpacing: "0.05em",
@@ -274,7 +304,7 @@ function CreateMissionDialog({ open, onOpenChange, onCreated }: CreateDialogProp
 }
 
 // ────────────────────────────────────────────────────────────────
-// Mission card
+// Mission card (Grid version)
 // ────────────────────────────────────────────────────────────────
 
 function MissionCard({ mission, locale }: { mission: Mission; locale: string }) {
@@ -285,27 +315,11 @@ function MissionCard({ mission, locale }: { mission: Mission; locale: string })
   return (
     <Link
       href={`/${locale}/missions/${mission.id}`}
-      style={{ textDecoration: "none", display: "block" }}
+      className="block group"
+      style={{ textDecoration: "none" }}
     >
       <div
-        style={{
-          padding: "16px 18px",
-          background: "var(--card)",
-          border: "1px solid var(--border)",
-          borderRadius: 12,
-          cursor: "pointer",
-          transition: "border-color 0.15s, box-shadow 0.15s",
-          position: "relative",
-          overflow: "hidden",
-        }}
-        onMouseEnter={(e) => {
-          (e.currentTarget as HTMLDivElement).style.borderColor = "hsl(228 50% 70%)";
-          (e.currentTarget as HTMLDivElement).style.boxShadow = "0 2px 12px hsl(228 58% 36% / 0.1)";
-        }}
-        onMouseLeave={(e) => {
-          (e.currentTarget as HTMLDivElement).style.borderColor = "var(--border)";
-          (e.currentTarget as HTMLDivElement).style.boxShadow = "none";
-        }}
+        className="relative overflow-hidden rounded-xl border border-border bg-card p-5 cursor-pointer shadow-sm transition-all duration-200 hover:-translate-y-0.5 group-hover:border-primary/50 group-hover:shadow-md"
       >
         {/* Subtle indigo accent stripe */}
         <div
@@ -314,55 +328,33 @@ function MissionCard({ mission, locale }: { mission: Mission; locale: string })
             left: 0,
             top: 0,
             bottom: 0,
-            width: 3,
+            width: 4,
             background: "var(--primary)",
-            opacity: 0.3,
+            opacity: 0.4,
             borderRadius: "12px 0 0 12px",
           }}
         />
 
-        <div style={{ paddingLeft: 8 }}>
-          <div
-            style={{
-              display: "flex",
-              alignItems: "flex-start",
-              justifyContent: "space-between",
-              gap: 12,
-              marginBottom: 8,
-            }}
-          >
+        <div className="pl-2">
+          <div className="flex items-start justify-between gap-4 mb-3.5">
             <div
-              style={{
-                fontWeight: 700,
-                fontSize: 15,
-                color: "var(--foreground)",
-                lineHeight: 1.3,
-                flex: 1,
-              }}
+              className="font-serif font-bold text-[16px] text-foreground leading-snug group-hover:text-primary transition-colors duration-200"
             >
               {mission.title}
             </div>
             <StageChip state={mission.state} />
           </div>
 
-          <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
+
+
+          <div className="flex items-center justify-between mt-auto pt-2 border-t border-border/40">
             <span
-              style={{
-                padding: "2px 9px",
-                borderRadius: 999,
-                fontSize: 11,
-                fontWeight: 700,
-                textTransform: "uppercase",
-                letterSpacing: "0.04em",
-                background: "var(--primary-light)",
-                color: "var(--primary)",
-                border: "1px solid hsl(228 50% 80%)",
-              }}
+              className="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-primary-light text-primary border border-primary/20"
             >
               {domainLabel}
             </span>
-            <span style={{ fontSize: 12, color: "var(--foreground-muted)" }}>
-              {new Date(mission.updatedAt).toLocaleDateString("en-IN", { day: "numeric", month: "short" })}
+            <span className="text-[11px] text-foreground-faint font-semibold font-sans">
+              {new Date(mission.updatedAt).toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" })}
             </span>
           </div>
         </div>
@@ -377,52 +369,26 @@ function MissionCard({ mission, locale }: { mission: Mission; locale: string })
 
 function EmptyMissionState({ onStart }: { onStart: () => void }) {
   const t = useTranslations("mission.board");
+  const locale = useLocale();
   return (
     <div
-      style={{
-        padding: "40px 20px",
-        textAlign: "center",
-        color: "var(--foreground-muted)",
-        border: "2px dashed var(--border)",
-        borderRadius: 16,
-        background: "var(--card)",
-      }}
+      className="p-10 text-center rounded-xl border-2 border-dashed border-border bg-card shadow-sm"
     >
       <div
-        style={{
-          width: 56,
-          height: 56,
-          borderRadius: "50%",
-          background: "var(--primary-light)",
-          margin: "0 auto 16px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          fontSize: 24,
-        }}
+        className="w-14 h-14 rounded-full bg-primary-light border border-primary/20 text-primary mx-auto mb-4 flex items-center justify-center text-2xl shadow-inner animate-bounce"
+        style={{ animationDuration: '3s' }}
       >
         ⚖
       </div>
-      <div style={{ fontFamily: "var(--font-serif)", fontSize: 18, fontWeight: 700, color: "var(--foreground)", marginBottom: 6 }}>
-        No missions yet
+      <div className="font-serif text-lg font-bold text-foreground mb-2">
+        {locale === "hi" ? "कोई सक्रिय मामला नहीं" : "No active cases"}
       </div>
-      <div style={{ fontSize: 14, lineHeight: 1.6, marginBottom: 18 }}>
+      <p className="text-[14px] text-foreground-muted max-w-sm mx-auto mb-5 leading-relaxed">
         {t("empty")}
-      </div>
+      </p>
       <button
         onClick={onStart}
-        style={{
-          background: "var(--primary)",
-          color: "#fff",
-          border: "none",
-          borderRadius: 10,
-          padding: "10px 20px",
-          fontSize: 14,
-          fontWeight: 700,
-          cursor: "pointer",
-          minHeight: 44,
-          marginTop: 0,
-        }}
+        className="bg-primary text-white border-none rounded-lg px-6 py-2.5 font-bold cursor-pointer hover:bg-primary-hover shadow transition-all duration-200"
       >
         {t("createBtn")}
       </button>
@@ -436,6 +402,7 @@ function EmptyMissionState({ onStart }: { onStart: () => void }) {
 
 export default function MissionBoard() {
   const locale = useLocale();
+  const activeLocale = (locale === "hi" ? "hi" : "en") as "en" | "hi";
   const router = useRouter();
   const tLanding = useTranslations("landing");
   const tBoard = useTranslations("mission.board");
@@ -451,6 +418,9 @@ export default function MissionBoard() {
   const [domainFilter, setDomainFilter] = useState<IssueDomain | "all">("all");
   const [search, setSearch] = useState("");
 
+  // Autopilot Simulator template state
+  const [activeTemplate, setActiveTemplate] = useState<TemplateId>("upi");
+
   async function refresh() {
     setLoadingMissions(true);
     try {
@@ -479,292 +449,356 @@ export default function MissionBoard() {
   });
 
   return (
-    <div className="container">
+    <div className="w-full min-h-screen bg-background pb-16">
+
+      {/* ── 1. Hero Section (Full bleed with wide layout grid) ─────���──────────────── */}
+      <section className="w-full bg-radial-glow border-b border-border/60 py-12 lg:py-16 relative overflow-hidden grid-bg">
+        {/* Glow sphere graphics */}
+        <div className="absolute top-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
+        <div className="absolute bottom-0 left-0 w-80 h-80 bg-amber-500/5 rounded-full blur-3xl pointer-events-none" />
+
+        <div className="container-wide">
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14 items-center">
+            
+            {/* Left Column: Headline and actions */}
+            <div className="lg:col-span-7 flex flex-col items-start text-left">
+              
+              {/* Badge */}
+              <div
+                className="inline-flex items-center gap-2 px-3 py-1 bg-primary-light border border-primary/20 rounded-full text-[11px] font-bold text-primary uppercase tracking-wider mb-6 animate-pulse-border"
+              >
+                <Sparkles className="w-3.5 h-3.5 text-amber-500" />
+                <span>{tCommon("appName")} · {locale === "hi" ? "फेज 1 ऑटोपायलट" : "Phase 1 Autopilot"}</span>
+              </div>
 
-      {/* ── Hero ──────────────────────────────────────────── */}
-      <div
-        style={{
-          marginBottom: 36,
-          padding: "32px 0 28px",
-          borderBottom: "1px solid var(--border)",
-          position: "relative",
-        }}
-      >
-        {/* Decorative background */}
-        <div
-          aria-hidden
-          style={{
-            position: "absolute",
-            top: 0,
-            right: 0,
-            width: 280,
-            height: 280,
-            background: "radial-gradient(circle at 70% 30%, hsl(228 58% 36% / 0.05) 0%, transparent 70%)",
-            pointerEvents: "none",
-          }}
-        />
+              {/* Majestic Headline */}
+              <h1
+                className="font-serif text-4xl md:text-5xl lg:text-[52px] font-bold text-foreground leading-[1.1] tracking-tight mb-4"
+              >
+                {locale === "hi" ? (
+                  <>
+                    अपने अधिकारों के लिए लड़ें — <span className="text-primary underline decoration-amber-500/50 decoration-wavy decoration-2 underline-offset-4">स्वचालित रूप से</span>
+                  </>
+                ) : (
+                  <>
+                    Fight for your rights — <span className="text-primary underline decoration-amber-500/50 decoration-wavy decoration-2 underline-offset-4">automatically</span>
+                  </>
+                )}
+              </h1>
+
+              {/* Subheadline */}
+              <p
+                className="text-base md:text-lg text-foreground-muted leading-relaxed mb-8 max-w-2xl font-medium"
+              >
+                {tLanding("subheadline")}
+              </p>
+
+              {/* Live Simulator quick template switchers */}
+              <div className="w-full mb-8">
+                <div className="text-[10px] font-bold text-foreground-muted uppercase tracking-widest mb-3 flex items-center gap-1">
+                  <Zap className="w-3.5 h-3.5 text-amber-500 fill-amber-500" />
+                  <span>{locale === "hi" ? "सिम्युलेटर समस्या चुनें" : "Choose issue to test in simulator"}</span>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  <button
+                    onClick={() => setActiveTemplate("upi")}
+                    className={`px-3.5 py-1.5 rounded-lg border text-[11px] font-bold transition-all duration-200 cursor-pointer min-h-0 mt-0 ${
+                      activeTemplate === "upi"
+                        ? "bg-primary text-white border-primary shadow-sm scale-105"
+                        : "bg-background text-foreground-muted border-border/80 hover:bg-surface-elevated"
+                    }`}
+                  >
+                    💸 {locale === "hi" ? "UPI पेमेंट फंसना" : "UPI Payment Failure"}
+                  </button>
+                  <button
+                    onClick={() => setActiveTemplate("ecommerce")}
+                    className={`px-3.5 py-1.5 rounded-lg border text-[11px] font-bold transition-all duration-200 cursor-pointer min-h-0 mt-0 ${
+                      activeTemplate === "ecommerce"
+                        ? "bg-primary text-white border-primary shadow-sm scale-105"
+                        : "bg-background text-foreground-muted border-border/80 hover:bg-surface-elevated"
+                    }`}
+                  >
+                    📦 {locale === "hi" ? "ई-कॉमर्स रिफंड" : "E-Commerce Refund"}
+                  </button>
+                  <button
+                    onClick={() => setActiveTemplate("cyber")}
+                    className={`px-3.5 py-1.5 rounded-lg border text-[11px] font-bold transition-all duration-200 cursor-pointer min-h-0 mt-0 ${
+                      activeTemplate === "cyber"
+                        ? "bg-primary text-white border-primary shadow-sm scale-105"
+                        : "bg-background text-foreground-muted border-border/80 hover:bg-surface-elevated"
+                    }`}
+                  >
+                    🚨 {locale === "hi" ? "साइबर फ्रॉड (तत्काल)" : "Cyber Fraud (Urgent)"}
+                  </button>
+                </div>
+              </div>
 
-        <div style={{ maxWidth: 580, position: "relative" }}>
-          <div
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              padding: "3px 10px",
-              background: "var(--primary-light)",
-              border: "1px solid hsl(228 50% 80%)",
-              borderRadius: 999,
-              fontSize: 11,
-              fontWeight: 700,
-              color: "var(--primary)",
-              letterSpacing: "0.06em",
-              textTransform: "uppercase",
-              marginBottom: 14,
-            }}
-          >
-            {tCommon("appName")} · Phase 1
-          </div>
+              {/* CTAs */}
+              <div className="flex flex-wrap gap-3.5 mb-8">
+                <button
+                  onClick={() => setDialogOpen(true)}
+                  className="bg-primary text-white border-none rounded-xl px-7 py-3.5 font-bold cursor-pointer transition-all duration-200 hover:bg-primary-hover shadow-lg hover:-translate-y-0.5 text-[15px] animate-pulse-border"
+                  style={{
+                    boxShadow: "0 10px 20px -5px rgba(29, 53, 87, 0.25)"
+                  }}
+                >
+                  {tLanding("ctaStart")}
+                </button>
+                <Link
+                  href={`/${locale}/ledger`}
+                  className="inline-flex items-center justify-center bg-card text-foreground border border-border rounded-xl px-7 py-3.5 font-bold text-[15px] text-decoration-none transition-all duration-200 hover:bg-surface-elevated hover:-translate-y-0.5"
+                >
+                  {tLanding("ctaLedger")}
+                </Link>
+              </div>
 
-          <h1
-            style={{
-              fontFamily: "var(--font-serif)",
-              fontSize: "clamp(26px, 4vw, 36px)",
-              fontWeight: 700,
-              color: "var(--foreground)",
-              lineHeight: 1.2,
-              margin: "0 0 12px",
-            }}
-          >
-            {tLanding("headline")}
-          </h1>
+              {/* Widescreen Statistics Capsule */}
+              <div className="flex flex-wrap items-center gap-6 py-4 px-5 bg-card/60 dark:bg-card/40 border border-border/60 rounded-xl w-full max-w-2xl backdrop-blur-sm">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-emerald-500/10 text-emerald-600 border border-emerald-500/20">
+                    <TrendingUp className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <div className="text-xl font-bold text-foreground">₹24.8L+</div>
+                    <div className="text-[10px] font-bold text-foreground-muted uppercase tracking-wider font-sans">
+                      {locale === "hi" ? "कुल वसूल राशि" : "Funds Recovered"}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="h-8 w-px bg-border/60 hidden sm:block" />
+
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-indigo-500/10 text-indigo-600 border border-indigo-500/20">
+                    <CheckCircle className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <div className="text-xl font-bold text-foreground">91.4%</div>
+                    <div className="text-[10px] font-bold text-foreground-muted uppercase tracking-wider font-sans">
+                      {locale === "hi" ? "सफलता दर" : "Resolution Rate"}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="h-8 w-px bg-border/60 hidden sm:block" />
+
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-amber-500/10 text-amber-600 border border-amber-500/20">
+                    <Clock className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <div className="text-xl font-bold text-foreground">~14 Days</div>
+                    <div className="text-[10px] font-bold text-foreground-muted uppercase tracking-wider font-sans">
+                      {locale === "hi" ? "औसत समय" : "Avg. Resolution"}
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-          <p
-            style={{
-              fontSize: 16,
-              color: "var(--foreground-muted)",
-              lineHeight: 1.7,
-              margin: "0 0 24px",
-            }}
-          >
-            {tLanding("subheadline")}
-          </p>
+            </div>
+
+            {/* Right Column: Autopilot simulator card */}
+            <div className="lg:col-span-5 flex justify-center w-full">
+              <div className="w-full max-w-[440px] lg:max-w-full">
+                <AutopilotSimulator activeTemplate={activeTemplate} locale={locale} />
+              </div>
+            </div>
 
-          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
-            <button
-              onClick={() => setDialogOpen(true)}
-              style={{
-                background: "var(--primary)",
-                color: "#fff",
-                border: "none",
-                borderRadius: 10,
-                padding: "12px 22px",
-                fontSize: 15,
-                fontWeight: 700,
-                cursor: "pointer",
-                minHeight: 48,
-                marginTop: 0,
-                letterSpacing: "-0.01em",
-              }}
-            >
-              {tLanding("ctaStart")}
-            </button>
-            <Link
-              href={`/${locale}/ledger`}
-              style={{
-                display: "inline-flex",
-                alignItems: "center",
-                padding: "12px 22px",
-                background: "var(--surface-elevated)",
-                color: "var(--foreground)",
-                border: "1px solid var(--border)",
-                borderRadius: 10,
-                fontSize: 15,
-                fontWeight: 600,
-                textDecoration: "none",
-                minHeight: 48,
-              }}
-            >
-              {tLanding("ctaLedger")}
-            </Link>
           </div>
         </div>
-      </div>
-
-      {/* ── Mission list ──────────────────────────────────── */}
-      <div style={{ marginBottom: 16 }}>
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: 12,
-            flexWrap: "wrap",
-            marginBottom: 14,
-          }}
-        >
-          <h2
-            style={{
-              fontFamily: "var(--font-serif)",
-              fontSize: 18,
-              fontWeight: 700,
-              color: "var(--foreground)",
-              margin: 0,
-            }}
-          >
-            {tBoard("heading")}
-            {!loadingMissions && (
-              <span
-                style={{
-                  marginLeft: 8,
-                  fontSize: 14,
-                  fontWeight: 600,
-                  fontFamily: "var(--font-sans)",
-                  color: "var(--foreground-muted)",
-                }}
-              >
-                ({missions.length})
-              </span>
-            )}
-          </h2>
+      </section>
+
+      {/* ── 2. How it works Section ─────────────────────────────────────────── */}
+      <section className="py-14 w-full bg-surface/30 dark:bg-surface-sunken/15 border-b border-border/40">
+        <div className="container-wide">
+          <div className="text-center max-w-xl mx-auto mb-10">
+            <h2 className="font-serif text-2xl md:text-3xl font-bold text-foreground mb-3">
+              {locale === "hi" ? "सच्चा स्वायत्त निवारण प्रवाह" : "True Autonomous Legal Autopilot"}
+            </h2>
+            <p className="text-[14px] text-foreground-muted leading-relaxed">
+              {locale === "hi" 
+                ? "आप केवल समस्या बताएं, कानूनी और शिकायत भेजने की बाकी सारी कानूनी प्रक्रिया कोर्टमित्र खुद संभालता है।"
+                : "You describe the grievance. CourtMitra automatically translates, cites statutes, sends notices, and tracks replies."}
+            </p>
+          </div>
 
-          <button
-            onClick={() => setDialogOpen(true)}
-            style={{
-              background: "var(--primary)",
-              color: "#fff",
-              border: "none",
-              borderRadius: 8,
-              padding: "8px 16px",
-              fontSize: 13,
-              fontWeight: 700,
-              cursor: "pointer",
-              minHeight: 36,
-              marginTop: 0,
-            }}
-          >
-            + {tNav("newMission")}
-          </button>
+          <div className="grid grid-cols-1 md:grid-cols-5 gap-6">
+            {[
+              { num: "01", t: { en: "Describe Once", hi: "विवरण दर्ज करें" }, d: { en: "Type your grievance in plain language or Hindi.", hi: "अपनी शिकायत साधारण हिंदी ��ा अंग्रेज़ी में लिखें।" } },
+              { num: "02", t: { en: "Extract Facts", hi: "तथ्य खोजें" }, d: { en: "AI parses invoices and proof to form verified facts.", hi: "AI बिलों और साक्ष्यों को पढ़कर तथ्य निकालता है।" } },
+              { num: "03", t: { en: "Ground in Law", hi: "कानूनी आधार" }, d: { en: "Finds statutory citations in real time from Indian law.", hi: "भारतीय कानून से प्रासंगिक धाराएं और साइटेशन जोड़ता है।" } },
+              { num: "04", t: { en: "Send Complaints", hi: "शिकायत प्रेषण" }, d: { en: "Drafts and auto-dispatches formal legal complaints.", hi: "शिकायत का आधिकारिक मसौदा तैयार करके भेजता है।" } },
+              { num: "05", t: { en: "Get Resolved", hi: "सफल निवारण" }, d: { en: "Follows up and logs outcomes to the public ledger.", hi: "लगातार फ़ॉलो-अप करता है और रिफंड दिलाता है।" } }
+            ].map((step, idx) => (
+              <div key={idx} className="bg-card border border-border/60 rounded-xl p-5 relative shadow-sm hover:border-primary/30 transition-all duration-200">
+                <div className="text-2xl font-serif font-black text-primary/20 mb-2">{step.num}</div>
+                <h3 className="font-serif text-[15px] font-bold text-foreground mb-1.5">{step.t[activeLocale]}</h3>
+                <p className="text-[12px] text-foreground-muted leading-relaxed">{step.d[activeLocale]}</p>
+                {idx < 4 && (
+                  <ArrowRight className="w-5 h-5 text-border hidden md:block absolute -right-6 top-1/2 -translate-y-1/2 z-10" />
+                )}
+              </div>
+            ))}
+          </div>
         </div>
+      </section>
+
+      {/* ── 3. Supported Areas Grid ─────────────────────────────────────────── */}
+      <section className="py-14 w-full border-b border-border/40">
+        <div className="container-wide">
+          <div className="text-center max-w-xl mx-auto mb-10">
+            <h2 className="font-serif text-2xl md:text-3xl font-bold text-foreground mb-3">
+              {locale === "hi" ? "निवारण के लिए उपलब्ध श्रेणियां" : "Supported Issue Categories"}
+            </h2>
+            <p className="text-[14px] text-foreground-muted leading-relaxed">
+              {locale === "hi" 
+                ? "इन सभी क्षेत्रों में होने वाली असुविधाओं के लिए आप कोर्टमित्र का उपयोग कर शिकायत दर्ज कर सकते हैं।"
+                : "Resolve issues across standard consumer and legal channels using matched AI legal groundings."}
+            </p>
+          </div>
 
-        {/* Filters */}
-        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 16 }}>
-          <input
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search missions…"
-            style={{
-              flex: "1 1 200px",
-              padding: "8px 12px",
-              fontSize: 13,
-              borderRadius: 8,
-              border: "1px solid var(--border)",
-              background: "var(--background)",
-              color: "var(--foreground)",
-            }}
-          />
-          <div style={{ display: "flex", gap: 6 }}>
-            {(["all", ...DOMAINS] as ("all" | IssueDomain)[]).map((d) => {
-              const label = d === "all" ? "All" : d.replace(/_/g, " ");
-              const isActive = domainFilter === d;
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {Object.keys(DOMAIN_INFO).map((key) => {
+              const info = DOMAIN_INFO[key] || { icon: HelpCircle, color: "var(--foreground-muted)", bg: "var(--surface-elevated)" };
+              const Icon = info.icon;
+              const title = tLanding(`domains.${key}`);
               return (
-                <button
-                  key={d}
-                  onClick={() => setDomainFilter(d)}
-                  style={{
-                    padding: "7px 12px",
-                    borderRadius: 8,
-                    fontSize: 12,
-                    fontWeight: isActive ? 700 : 500,
-                    cursor: "pointer",
-                    border: isActive ? "2px solid var(--primary)" : "1px solid var(--border)",
-                    background: isActive ? "var(--primary-light)" : "var(--background)",
-                    color: isActive ? "var(--primary)" : "var(--foreground-muted)",
-                    minHeight: "auto",
-                    marginTop: 0,
-                    textTransform: "capitalize",
-                    transition: "all 0.15s",
-                    whiteSpace: "nowrap",
-                  }}
+                <div 
+                  key={key} 
+                  className="flex items-center gap-3.5 bg-card border border-border/60 rounded-xl p-4.5 transition-all duration-200 hover:bg-surface-elevated/40 hover:border-primary/30 shadow-sm"
                 >
-                  {label}
-                </button>
+                  <div 
+                    className="p-3 rounded-lg flex items-center justify-center shrink-0"
+                    style={{ backgroundColor: info.bg, color: info.color }}
+                  >
+                    <Icon className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <h3 className="font-serif text-[14px] font-bold text-foreground leading-tight mb-0.5">{title}</h3>
+                    <span className="text-[10px] font-bold text-foreground-faint uppercase font-sans tracking-wide">
+                      {locale === "hi" ? "ऑटो-सक्षम" : "Auto-enabled"}
+                    </span>
+                  </div>
+                </div>
               );
             })}
           </div>
         </div>
+      </section>
+
+      {/* ── 4. Dashboard Divider & Mission Board (Expanded layout) ───────────────── */}
+      <section id="dashboard" className="py-14 w-full bg-surface-sunken/10 dark:bg-surface-sunken/5">
+        <div className="container-wide">
+          
+          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-8">
+            <div>
+              <h2 className="font-serif text-2xl font-bold text-foreground">
+                {tBoard("heading")}
+                {!loadingMissions && (
+                  <span className="ml-2 px-2 py-0.5 bg-accent text-primary text-[13px] font-bold rounded-md border border-primary/10">
+                    {missions.length} Case{missions.length === 1 ? "" : "s"}
+                  </span>
+                )}
+              </h2>
+              <p className="text-[13px] text-foreground-muted mt-1 leading-relaxed">
+                {locale === "hi" ? "आपके सक्रिय मामले और उनकी कानूनी स्थितियां।" : "Your ongoing legal autopilot processes and status tracker."}
+              </p>
+            </div>
 
-        {/* Error state */}
-        {error && (
-          <div
-            style={{
-              padding: "10px 14px",
-              background: "var(--danger-light)",
-              border: "1px solid hsl(3 72% 44% / 0.3)",
-              borderRadius: 10,
-              fontSize: 13,
-              color: "var(--danger-fg)",
-              marginBottom: 14,
-            }}
-          >
-            {error}
+            <button
+              onClick={() => setDialogOpen(true)}
+              className="bg-primary text-white border-none rounded-lg px-4 py-2 font-bold text-[13px] cursor-pointer hover:bg-primary-hover shadow-sm transition-all duration-200 shrink-0 mt-0 flex items-center gap-1.5"
+            >
+              <Zap className="w-3.5 h-3.5" />
+              <span>+ {tNav("newMission")}</span>
+            </button>
           </div>
-        )}
 
-        {/* Loading */}
-        {loadingMissions && (
-          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-            {[1, 2, 3].map((i) => (
-              <div
-                key={i}
-                style={{
-                  height: 76,
-                  background: "var(--card)",
-                  border: "1px solid var(--border)",
-                  borderRadius: 12,
-                  overflow: "hidden",
-                  position: "relative",
-                }}
-              >
-                <div
-                  style={{
-                    position: "absolute",
-                    inset: 0,
-                    background: "linear-gradient(90deg, transparent, hsl(228 20% 94%), transparent)",
-                    animation: "shimmer 1.5s infinite",
-                    backgroundSize: "200% 100%",
-                  }}
-                />
-              </div>
-            ))}
+          {/* Filters Panel */}
+          <div className="flex flex-col md:flex-row gap-4 mb-6">
+            <div className="relative flex-1">
+              <Search className="w-4 h-4 text-foreground-faint absolute left-3 top-1/2 -translate-y-1/2" />
+              <input
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder={tBoard("searchPlaceholder")}
+                className="pl-9 pr-4 py-2.5 w-full text-[13px] rounded-lg border border-border/80 bg-background text-foreground transition-all duration-150 focus:border-primary focus:ring-1 focus:ring-primary/20"
+              />
+            </div>
+            
+            <div className="flex gap-2 overflow-x-auto pb-1 md:pb-0 scrollbar-none">
+              {(["all", ...DOMAINS] as ("all" | IssueDomain)[]).map((d) => {
+                const label = d === "all" ? tBoard("filterAll") : tLanding(`domains.${d}`);
+                const isActive = domainFilter === d;
+                return (
+                  <button
+                    key={d}
+                    onClick={() => setDomainFilter(d)}
+                    className={`px-4 py-2 rounded-lg text-[12px] font-bold cursor-pointer transition-all duration-150 border whitespace-nowrap min-h-0 mt-0 ${
+                      isActive
+                        ? "bg-primary/10 text-primary border-primary"
+                        : "bg-card text-foreground-muted border-border/80 hover:bg-surface-elevated"
+                    }`}
+                  >
+                    {label}
+                  </button>
+                );
+              })}
+            </div>
           </div>
-        )}
 
-        {/* List */}
-        {!loadingMissions && filtered.length === 0 && missions.length > 0 && (
-          <div
-            style={{
-              padding: "20px 0",
-              textAlign: "center",
-              color: "var(--foreground-muted)",
-              fontSize: 14,
-            }}
-          >
-            No missions match your filter.
-          </div>
-        )}
+          {/* Error Alert */}
+          {error && (
+            <div className="p-3.5 mb-6 rounded-lg bg-danger-light border border-destructive/20 text-danger-fg text-[13px] font-medium font-sans">
+              {error}
+            </div>
+          )}
 
-        {!loadingMissions && missions.length === 0 && (
-          <EmptyMissionState onStart={() => setDialogOpen(true)} />
-        )}
+          {/* Loading States */}
+          {loadingMissions && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {[1, 2, 3, 4].map((i) => (
+                <div
+                  key={i}
+                  className="h-32 bg-card border border-border/60 rounded-xl overflow-hidden relative shadow-sm"
+                >
+                  <div
+                    style={{
+                      position: "absolute",
+                      inset: 0,
+                      background: "linear-gradient(90deg, transparent, var(--surface-elevated), transparent)",
+                      animation: "shimmer 1.5s infinite",
+                      backgroundSize: "200% 100%",
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
 
-        {!loadingMissions && filtered.length > 0 && (
-          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-            {filtered.map((m) => (
-              <MissionCard key={m.id} mission={m} locale={locale} />
-            ))}
-          </div>
-        )}
-      </div>
+          {/* Empty Filter Matches */}
+          {!loadingMissions && filtered.length === 0 && missions.length > 0 && (
+            <div className="p-12 text-center rounded-xl bg-card border border-border/60 text-foreground-muted text-[13px]">
+              {tBoard("noFilterMatch")}
+            </div>
+          )}
+
+          {/* Complete Empty State */}
+          {!loadingMissions && missions.length === 0 && (
+            <EmptyMissionState onStart={() => setDialogOpen(true)} />
+          )}
+
+          {/* Responsive Cases Grid */}
+          {!loadingMissions && filtered.length > 0 && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {filtered.map((m) => (
+                <MissionCard key={m.id} mission={m} locale={locale} />
+              ))}
+            </div>
+          )}
+
+        </div>
+      </section>
 
       {/* ── Create dialog ─────────────────────────────────── */}
       <CreateMissionDialog
@@ -773,13 +807,15 @@ export default function MissionBoard() {
         onCreated={handleCreated}
       />
 
-      {/* Shimmer animation */}
+      {/* Shimmer keyframe */}
       <style>{`
         @keyframes shimmer {
           0% { background-position: -200% 0; }
           100% { background-position: 200% 0; }
         }
       `}</style>
+
     </div>
   );
 }
+

apps/web/src/app/globals.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Noto+Serif:ital,wght@0,400;0,600;0,700;1,400&display=swap");
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
@@ -9,7 +10,6 @@
    ============================================================ */
 
 /* Google Fonts — Noto Serif (display) + Noto Sans (body, Devanagari) */
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Noto+Serif:ital,wght@0,400;0,600;0,700;1,400&display=swap");
 
 @custom-variant dark (&:is(.dark *));
 
@@ -546,3 +546,105 @@ button.btn-small {
   position: relative;
   overflow: hidden;
 }
+
+/* ── Redesign Additions: Wide Container & Animations ── */
+.container-wide {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes laserScan {
+  0% {
+    top: 0%;
+  }
+  50% {
+    top: 100%;
+  }
+  100% {
+    top: 0%;
+  }
+}
+
+@keyframes blink {
+  50% {
+    border-color: transparent;
+  }
+}
+
+@keyframes pulseBorder {
+  0%, 100% {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 0px hsl(228 58% 36% / 0.2);
+  }
+  50% {
+    border-color: var(--primary-ring);
+    box-shadow: 0 0 0 4px hsl(228 58% 60% / 0.15);
+  }
+}
+
+@keyframes pulseGold {
+  0%, 100% {
+    border-color: var(--caution);
+    box-shadow: 0 0 0 0px hsl(38 92% 44% / 0.2);
+  }
+  50% {
+    border-color: hsl(38 92% 54%);
+    box-shadow: 0 0 0 6px hsl(38 92% 44% / 0.15);
+  }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+.animate-scan {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--primary), transparent);
+  animation: laserScan 3s linear infinite;
+}
+
+.animate-pulse-border {
+  animation: pulseBorder 3s infinite;
+}
+
+.animate-pulse-gold {
+  animation: pulseGold 3.5s infinite;
+}
+
+.typing-cursor {
+  border-right: 2px solid var(--foreground);
+  animation: blink 0.75s step-end infinite;
+}
+
+.bg-radial-glow {
+  background-image: 
+    radial-gradient(circle at 80% 20%, hsl(228 58% 36% / 0.08) 0%, transparent 60%),
+    radial-gradient(circle at 20% 80%, hsl(38 92% 44% / 0.04) 0%, transparent 50%);
+}
+
+.bg-radial-glow-dark {
+  background-image: 
+    radial-gradient(circle at 80% 20%, hsl(228 60% 64% / 0.06) 0%, transparent 60%),
+    radial-gradient(circle at 20% 80%, hsl(38 92% 58% / 0.03) 0%, transparent 50%);
+}
+
+.grid-bg {
+  background-size: 30px 30px;
+  background-image: 
+    linear-gradient(to right, color-mix(in srgb, var(--border) 25%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in srgb, var(--border) 25%, transparent) 1px, transparent 1px);
+}
+

apps/web/src/components/app/AutopilotSimulator.tsx

@@ -0,0 +1,474 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { 
+  CheckCircle, 
+  Check, 
+  Scale, 
+  Send, 
+  TrendingUp, 
+  Clock, 
+  Sparkles,
+  ChevronRight,
+  Database,
+  Search
+} from "lucide-react";
+
+export type TemplateId = "upi" | "ecommerce" | "cyber";
+
+interface SimulatorProps {
+  activeTemplate: TemplateId;
+  locale: string;
+}
+
+// ────────────────────────────────────────────────────────────────
+// Data cases for Simulator (English + Hindi)
+// ────────────────────────────────────────────────────────────────
+
+const CASES_DATA = {
+  en: {
+    upi: {
+      input: "Tried to send ₹5,000 to my father via GPay. The money was debited from my HDFC bank account, but it says transaction failed. Bank is not responding.",
+      opposing: "HDFC Bank & GPay",
+      amount: "₹5,000",
+      relief: "Refund + TAT Compensation",
+      routeTitle: "NPCI / RBI Ombudsman Route",
+      routeBasis: "RBI Circular DPSS.CO.PD No. 629 (TAT TAT Compensation)",
+      routeSteps: ["File NPCI Dispute", "Escalate to RBI CMS Ombudsman"],
+      actionDest: "HDFC Grievance Desk",
+      actionSubj: "Failed UPI Transaction Tat Breach",
+      actionBody: "Notice regarding failed transaction of ₹5,000 debited from Account No. ******123. Under RBI guidelines, compensation of ₹100 per day is payable for TAT delay exceeding T+1 days...",
+      outcomeRecovery: "₹5,600",
+      outcomeDetail: "HDFC credited the refund of ₹5,000. Additionally, ₹600 compensation was paid for the 6-day delay. Status: Resolved."
+    },
+    ecommerce: {
+      input: "I ordered a phone from Amazon for ₹32,000. The screen was shattered when opened. Amazon refuses return, saying electronics return policy is expired.",
+      opposing: "Amazon India Retail",
+      amount: "₹32,000",
+      relief: "Replacement or Full Refund",
+      routeTitle: "National Consumer Commission",
+      routeBasis: "Consumer Protection Act, 2019 — Section 35 (Defective Goods)",
+      routeSteps: ["NCH Conciliation Docket", "Legal Notice under E-Commerce Rules"],
+      actionDest: "Amazon India Grievance Officer",
+      actionSubj: "Legal Notice — Defective mobile phone delivery",
+      actionBody: "Notice is hereby given for the delivery of defective OnePlus phone (Order #403-12891) valued at ₹32,000. Refusal to replace damaged goods constitutes deficiency in service under Section 2(47)...",
+      outcomeRecovery: "₹32,000",
+      outcomeDetail: "Amazon initiated a full refund of ₹32,000 after NCH issued a conciliation notice. Status: Resolved."
+    },
+    cyber: {
+      input: "Received a fake electricity bill SMS. I clicked the link and entered my banking details. Within 5 minutes, ₹85,000 was debited from my credit card.",
+      opposing: "Fraudulent Recipient Account",
+      amount: "₹85,000",
+      relief: "Account Freeze & Fund Recovery",
+      routeTitle: "National Cyber Crime Cell",
+      routeBasis: "IT Act, 2000 — Section 66D & RBI Zero Liability guidelines",
+      routeSteps: ["Report Cyber Crime Portal", "Aadhaar/UPI trace & Bank Cyber Cell"],
+      actionDest: "National Cyber Crime Portal & Bank Fraud Desk",
+      actionSubj: "Urgent Cyber Fraud Report — Phishing transaction of ₹85,000",
+      actionBody: "Unauthorized debit of ₹85,000 from credit card ******567. Recipient bank account is ICICI Bank Account ******492. Requesting immediate lien under RBI Customer Protection regulations...",
+      outcomeRecovery: "₹85,000",
+      outcomeDetail: "National Cyber Cell successfully froze the recipient account before funds were withdrawn. Full credit returned. Status: Resolved."
+    }
+  },
+  hi: {
+    upi: {
+      input: "पिताजी को GPay से ₹5,000 भेजने की कोशिश की। HDFC बैंक खाते से पैसे कट गए पर ट्रांजैक्शन फेल दिखा रहा है। बैंक कोई जवाब नहीं दे रहा है।",
+      opposing: "HDFC बैंक और GPay",
+      amount: "₹5,000",
+      relief: "रिफंड + समयसीमा (TAT) मुआवजा",
+      routeTitle: "NPCI / RBI लोकपाल मार्ग",
+      routeBasis: "RBI परिपत्र DPSS.CO.PD No. 629 (TAT मुआवजा)",
+      routeSteps: ["NPCI विवाद दर्ज करें", "RBI CMS लोकपाल को भेजें"],
+      actionDest: "HDFC शिकायत डेस्क",
+      actionSubj: "UPI विफलता TAT उल्लंघन शिकायत",
+      actionBody: "खाता संख्या ******123 से कटे ₹5,000 के फेल ट्रांजैक्शन के संबंध में। RBI न���यमों के अनुसार, T+1 दिन से अधिक की देरी के लिए ₹100 प्रतिदिन का मुआवजा देय है...",
+      outcomeRecovery: "₹5,600",
+      outcomeDetail: "HDFC ने ₹5,000 का रिफंड वापस किया। साथ ही 6 दिनों की देरी के लिए ₹600 का मुआवजा दिया। स्थिति: हल हो गया।"
+    },
+    ecommerce: {
+      input: "अमेज़न से ₹32,000 का फोन मंगवाया। खोलने पर स्क्रीन टूटी मिली। अमेज़न वापस लेने से मना कर रहा है, कह रहा है इलेक्ट्रॉनिक रिटर्न पॉलिसी खत्म हो गई है।",
+      opposing: "अमेज़न इंडिया रिटेल",
+      amount: "₹32,000",
+      relief: "बदलाव या पूरा रिफंड",
+      routeTitle: "राष्ट्रीय उपभोक्ता आयोग",
+      routeBasis: "उपभोक्ता संरक्षण अधिनियम, 2019 — धारा 35 (दोषपूर्ण वस्तुएं)",
+      routeSteps: ["NCH मध्यस्थता डॉकेट", "ई-कॉमर्स नियमों के तहत कानूनी नोटिस"],
+      actionDest: "अमेज़न इंडिया शिकायत अधिकारी",
+      actionSubj: "कानूनी नोटिस — दोषपूर्ण मोबाइल फोन डिलीवरी",
+      actionBody: "₹32,000 मूल्य के टूटे फोन (ऑर्डर #403-12891) की डिलीवरी के संबंध में। दोषपूर्ण सामान को बदलने से इनकार करना उपभोक्ता संरक्षण अधिनियम 2019 के तहत सेवा में कमी है...",
+      outcomeRecovery: "₹32,000",
+      outcomeDetail: "NCH द्वारा मध्यस्थता नोटिस जारी करने के बाद अमेज़न ने ₹32,000 का पूरा रिफंड जारी कर दिया। स्थिति: हल हो गया।"
+    },
+    cyber: {
+      input: "बिजली बिल का फर्जी SMS मिला। लिंक पर क्लिक कर बैंक विवरण डाला। 5 मिनट में मेरे क्रेडिट कार्ड से ₹85,000 कट गए।",
+      opposing: "धोखाधड़ी वाला प्राप्तकर्ता खाता",
+      amount: "₹85,000",
+      relief: "खाता फ़्रीज़ और राशि की वसूली",
+      routeTitle: "राष्ट्रीय साइबर अपराध सेल",
+      routeBasis: "IT अधिनियम, 2000 — धारा 66D और RBI शून्य दायित्व नियम",
+      routeSteps: ["साइबर अपराध पोर्टल रिपोर्ट", "आधार/UPI ट्रेस और बैंक साइबर सेल"],
+      actionDest: "राष्ट्रीय साइबर अपराध सेल और बैंक फ्रॉड डेस्क",
+      actionSubj: "आपातकालीन साइबर धोखाधड़ी रिपोर्ट — ₹85,000 का फिशिंग ट्रांजैक्शन",
+      actionBody: "क्रेडिट कार्ड ******567 से ₹85,000 का अनधिकृत डेबिट। प्राप्तकर्ता खाता ICICI बैंक खाता ******492 है। RBI नियमों के तहत तुरंत खाता फ्रीज किया जाए...",
+      outcomeRecovery: "₹85,000",
+      outcomeDetail: "साइबर सेल ने पैसे निकाले जाने से पहले ही प्राप्तकर्ता का खाता फ्रीज कर दिया। पूरा रिफंड वापस मिला। स्थिति: हल हो गया।"
+    }
+  }
+};
+
+const STAGES = [
+  { id: 1, label: { en: "1. Intake", hi: "1. शिकायत दर्ज" } },
+  { id: 2, label: { en: "2. Facts", hi: "2. तथ्य विश्लेषण" } },
+  { id: 3, label: { en: "3. Law Route", hi: "3. कानूनी मार्ग" } },
+  { id: 4, label: { en: "4. Send Action", hi: "4. शिकायत प्रेषण" } },
+  { id: 5, label: { en: "5. Resolution", hi: "5. समाधान" } }
+];
+
+export function AutopilotSimulator({ activeTemplate, locale }: SimulatorProps) {
+  const activeLocale = (locale === "hi" ? "hi" : "en") as "en" | "hi";
+  const caseData = CASES_DATA[activeLocale][activeTemplate] || CASES_DATA.en.upi;
+  
+  const [currentStage, setCurrentStage] = useState(1);
+  const [typedText, setTypedText] = useState("");
+  const [typingIndex, setTypingIndex] = useState(0);
+  const [isTyping, setIsTyping] = useState(false);
+  const [scanComplete, setScanComplete] = useState(false);
+  
+  // Timer for cycling through stages
+  const cycleTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Restart simulator when activeTemplate changes
+  useEffect(() => {
+    if (cycleTimeoutRef.current) {
+      clearTimeout(cycleTimeoutRef.current);
+    }
+    setCurrentStage(1);
+    setTypedText("");
+    setTypingIndex(0);
+    setIsTyping(true);
+    setScanComplete(false);
+  }, [activeTemplate]);
+
+  // Handle stage transitions
+  useEffect(() => {
+    if (cycleTimeoutRef.current) {
+      clearTimeout(cycleTimeoutRef.current);
+    }
+
+    if (currentStage === 1) {
+      // Typing phase
+      if (typingIndex < caseData.input.length) {
+        const timer = setTimeout(() => {
+          setTypedText((prev) => prev + caseData.input[typingIndex]);
+          setTypingIndex((prev) => prev + 1);
+        }, 15);
+        return () => clearTimeout(timer);
+      } else {
+        setIsTyping(false);
+        // Pause, then go to Stage 2
+        cycleTimeoutRef.current = setTimeout(() => {
+          setCurrentStage(2);
+          setScanComplete(false);
+        }, 1500);
+      }
+    } else if (currentStage === 2) {
+      // Scanning phase
+      const timer = setTimeout(() => {
+        setScanComplete(true);
+      }, 2000);
+      
+      cycleTimeoutRef.current = setTimeout(() => {
+        setCurrentStage(3);
+      }, 4000);
+      return () => clearTimeout(timer);
+    } else if (currentStage === 3) {
+      // Legal Citation phase
+      cycleTimeoutRef.current = setTimeout(() => {
+        setCurrentStage(4);
+      }, 4000);
+    } else if (currentStage === 4) {
+      // Outgoing Action phase
+      cycleTimeoutRef.current = setTimeout(() => {
+        setCurrentStage(5);
+      }, 4500);
+    } else if (currentStage === 5) {
+      // Outcomes phase
+      cycleTimeoutRef.current = setTimeout(() => {
+        setCurrentStage(1);
+        setTypedText("");
+        setTypingIndex(0);
+        setIsTyping(true);
+        setScanComplete(false);
+      }, 6000);
+    }
+
+    return () => {
+      if (cycleTimeoutRef.current) {
+        clearTimeout(cycleTimeoutRef.current);
+      }
+    };
+  }, [currentStage, typingIndex, caseData.input]);
+
+  const handleStageClick = (stageId: number) => {
+    if (cycleTimeoutRef.current) {
+      clearTimeout(cycleTimeoutRef.current);
+    }
+    
+    setCurrentStage(stageId);
+    if (stageId === 1) {
+      setTypedText(caseData.input);
+      setTypingIndex(caseData.input.length);
+      setIsTyping(false);
+    } else if (stageId === 2) {
+      setScanComplete(true);
+    }
+  };
+
+  return (
+    <div 
+      className="relative rounded-2xl border border-border/80 bg-card/90 dark:bg-card/75 backdrop-blur-md p-6 shadow-xl w-full h-[400px] flex flex-col justify-between overflow-hidden animate-float transition-all duration-300 hover:border-primary/50"
+      style={{
+        boxShadow: "0 20px 40px -15px rgba(29, 53, 87, 0.12)"
+      }}
+    >
+      {/* Decorative Gradient Background inside card */}
+      <div className="absolute inset-0 bg-radial-glow opacity-30 pointer-events-none" />
+
+      {/* Card Header */}
+      <div className="relative z-10 flex items-center justify-between border-b border-border/60 pb-3">
+        <div className="flex items-center gap-2">
+          <div className="h-2.5 w-2.5 rounded-full bg-emerald-500 animate-pulse" />
+          <span className="text-[11px] font-bold text-foreground-muted uppercase tracking-wider font-sans">
+            {activeLocale === "hi" ? "स्वचालित सिम्युलेटर" : "Autopilot Simulator"}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 px-2 py-0.5 bg-accent/80 rounded-md border border-border/50">
+          <Database className="w-3.5 h-3.5 text-primary" />
+          <span className="text-[10px] font-semibold text-primary/80 font-sans">
+            {activeLocale === "hi" ? "आधिकारिक डेटा" : "Govt APIs Linked"}
+          </span>
+        </div>
+      </div>
+
+      {/* Progress indicators */}
+      <div className="relative z-10 grid grid-cols-5 gap-1 my-3.5">
+        {STAGES.map((s) => {
+          const isActive = currentStage === s.id;
+          const isCompleted = currentStage > s.id;
+          return (
+            <button
+              key={s.id}
+              onClick={() => handleStageClick(s.id)}
+              className={`text-center py-1.5 px-1 rounded-lg border text-[9px] font-bold tracking-tight font-sans cursor-pointer transition-all duration-200 uppercase ${
+                isActive 
+                  ? "bg-primary text-white border-primary shadow-sm scale-105" 
+                  : isCompleted 
+                    ? "bg-emerald-500/10 text-emerald-600 border-emerald-500/30" 
+                    : "bg-surface-elevated text-foreground-muted border-border/80 hover:bg-surface-sunken"
+              }`}
+            >
+              <div className="flex items-center justify-center gap-0.5">
+                {isCompleted && <Check className="w-2.5 h-2.5" />}
+                {s.label[activeLocale]}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Simulator Content Body */}
+      <div className="relative z-10 flex-1 flex flex-col justify-center rounded-xl bg-background/90 dark:bg-background/80 border border-border/40 p-4 overflow-hidden min-h-0">
+        
+        {/* STAGE 1: INTAKE */}
+        {currentStage === 1 && (
+          <div className="flex flex-col h-full justify-between">
+            <div className="flex items-center gap-1.5 text-primary mb-2">
+              <Sparkles className="w-4 h-4 text-amber-500 animate-spin" style={{ animationDuration: '3s' }} />
+              <span className="text-[12px] font-bold uppercase tracking-wider font-sans">
+                {activeLocale === "hi" ? "चरण 1: शिकायत विवरण लिखना" : "Stage 1: Grievance Intake"}
+              </span>
+            </div>
+            <div className="flex-1 text-[13px] leading-relaxed text-foreground font-medium p-2 bg-surface-elevated/40 rounded-lg border border-border/20 overflow-y-auto italic max-h-[170px] select-none">
+              "{typedText}"
+              {isTyping && <span className="typing-cursor ml-0.5"></span>}
+            </div>
+            <div className="text-[10px] text-foreground-muted mt-2 text-right font-sans font-medium">
+              {isTyping 
+                ? (activeLocale === "hi" ? "उपयोगकर्ता समस्या दर्ज कर रहा है..." : "User writing problem...")
+                : (activeLocale === "hi" ? "विवरण पूर्ण! विश्लेषण के लिए तैयार।" : "Intake complete! Ready to analyze.")
+              }
+            </div>
+          </div>
+        )}
+
+        {/* STAGE 2: FACTS */}
+        {currentStage === 2 && (
+          <div className="flex flex-col h-full justify-between relative">
+            {!scanComplete && <div className="animate-scan" />}
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-1.5 text-primary">
+                <Search className="w-4 h-4 text-primary animate-pulse" />
+                <span className="text-[12px] font-bold uppercase tracking-wider font-sans">
+                  {activeLocale === "hi" ? "चरण 2: AI तथ्य निष्कर्षण" : "Stage 2: Entity & Fact Extraction"}
+                </span>
+              </div>
+              {!scanComplete && (
+                <span className="text-[10px] font-bold text-amber-500 bg-amber-500/10 px-2 py-0.5 rounded-full font-sans animate-pulse">
+                  {activeLocale === "hi" ? "स्कैनिंग..." : "Scanning Proof..."}
+                </span>
+              )}
+            </div>
+            <div className="flex-1 flex flex-col gap-2 mt-1">
+              <div className="grid grid-cols-3 gap-2">
+                <div className={`p-2 rounded-lg border text-center transition-all duration-300 ${scanComplete ? 'bg-primary-light border-primary/20 scale-100' : 'bg-surface-elevated/40 border-border/20 opacity-40 scale-95'}`}>
+                  <div className="text-[9px] font-bold text-foreground-muted font-sans uppercase">
+                    {activeLocale === "hi" ? "विरोधी पक्ष" : "Opponent"}
+                  </div>
+                  <div className="text-[11px] font-bold text-primary truncate mt-0.5">{caseData.opposing}</div>
+                </div>
+                <div className={`p-2 rounded-lg border text-center transition-all duration-300 ${scanComplete ? 'bg-primary-light border-primary/20 scale-100' : 'bg-surface-elevated/40 border-border/20 opacity-40 scale-95'}`}>
+                  <div className="text-[9px] font-bold text-foreground-muted font-sans uppercase">
+                    {activeLocale === "hi" ? "विवादित राशि" : "Value"}
+                  </div>
+                  <div className="text-[11px] font-bold text-emerald-600 truncate mt-0.5">{caseData.amount}</div>
+                </div>
+                <div className={`p-2 rounded-lg border text-center transition-all duration-300 ${scanComplete ? 'bg-primary-light border-primary/20 scale-100' : 'bg-surface-elevated/40 border-border/20 opacity-40 scale-95'}`}>
+                  <div className="text-[9px] font-bold text-foreground-muted font-sans uppercase">
+                    {activeLocale === "hi" ? "अपेक्षित राहत" : "Requested Relief"}
+                  </div>
+                  <div className="text-[10px] font-bold text-amber-600 truncate mt-0.5" title={caseData.relief}>{caseData.relief}</div>
+                </div>
+              </div>
+              <div className={`p-2 rounded-lg border bg-surface-elevated/20 transition-all duration-500 flex-1 flex flex-col justify-center ${scanComplete ? 'opacity-100' : 'opacity-0'}`}>
+                <div className="text-[10px] font-bold text-foreground-muted font-sans mb-1 uppercase">
+                  {activeLocale === "hi" ? "सत्यापित तथ्य ढांचा" : "Verified Claims Framework"}
+                </div>
+                <p className="text-[11px] leading-relaxed text-foreground font-medium">
+                  {activeLocale === "hi" 
+                    ? `तथ्य: शिकायतकर्ता ने ${caseData.opposing} से ${caseData.amount} मूल्य के लेन-देन में नुकसान दर्ज किया।` 
+                    : `Claimant reports financial loss of ${caseData.amount} from ${caseData.opposing}. Proof verified.`
+                  }
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* STAGE 3: LAW ROUTE */}
+        {currentStage === 3 && (
+          <div className="flex flex-col h-full justify-between">
+            <div className="flex items-center gap-1.5 text-primary mb-2">
+              <Scale className="w-4 h-4 text-indigo-600" />
+              <span className="text-[12px] font-bold uppercase tracking-wider font-sans">
+                {activeLocale === "hi" ? "चरण 3: कानूनी खोज और मार्ग" : "Stage 3: Grounded Legal Citations"}
+              </span>
+            </div>
+            <div className="flex-1 flex flex-col gap-2.5">
+              <div className="p-2.5 rounded-lg border border-primary/30 bg-primary-light flex items-center justify-between">
+                <div>
+                  <div className="text-[10px] font-bold text-primary font-sans uppercase tracking-wider">
+                    {activeLocale === "hi" ? "चुना गया फोरम" : "Matched Jurisdiction"}
+                  </div>
+                  <div className="text-[12px] font-bold text-foreground mt-0.5">{caseData.routeTitle}</div>
+                </div>
+                <div className="text-right">
+                  <span className="px-2 py-0.5 bg-emerald-500/10 text-emerald-600 text-[10px] font-bold rounded-full font-sans">
+                    95% Match
+                  </span>
+                </div>
+              </div>
+              <div className="p-2.5 rounded-lg border border-border/80 bg-surface-elevated/20 flex-1">
+                <div className="text-[10px] font-bold text-foreground-muted font-sans uppercase mb-1">
+                  {activeLocale === "hi" ? "कानूनी आधार (संविधि साइट)" : "Statute / Authority Citation"}
+                </div>
+                <div className="text-[11px] font-bold text-indigo-700 dark:text-indigo-400 font-serif leading-tight">
+                  {caseData.routeBasis}
+                </div>
+                <div className="mt-2 flex flex-col gap-1">
+                  {caseData.routeSteps.map((step, idx) => (
+                    <div key={idx} className="flex items-center gap-1.5 text-[10px] font-semibold text-foreground-muted font-sans">
+                      <ChevronRight className="w-3.5 h-3.5 text-amber-500" />
+                      <span>{step}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* STAGE 4: ACTION */}
+        {currentStage === 4 && (
+          <div className="flex flex-col h-full justify-between">
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-1.5 text-primary">
+                <Send className="w-4 h-4 text-emerald-500 animate-bounce" />
+                <span className="text-[12px] font-bold uppercase tracking-wider font-sans">
+                  {activeLocale === "hi" ? "चरण 4: नोटिस तैयार व प्रेषण" : "Stage 4: Automated Dispatch"}
+                </span>
+              </div>
+              <span className="text-[10px] font-bold text-emerald-600 bg-emerald-500/10 px-2 py-0.5 rounded-full font-sans animate-pulse">
+                {activeLocale === "hi" ? "भेजा जा रहा है..." : "Sending..."}
+              </span>
+            </div>
+            <div className="flex-1 rounded-lg border border-border/60 bg-surface-elevated/10 p-2.5 flex flex-col justify-between font-mono text-[9px] leading-relaxed max-h-[160px] overflow-hidden select-none">
+              <div>
+                <span className="text-foreground-muted font-sans font-bold">To: </span>
+                <span className="font-bold text-foreground">{caseData.actionDest}</span>
+              </div>
+              <div>
+                <span className="text-foreground-muted font-sans font-bold">Sub: </span>
+                <span className="font-bold text-foreground">{caseData.actionSubj}</span>
+              </div>
+              <div className="border-t border-border/40 mt-1 pt-1 text-foreground-muted overflow-hidden max-h-[85px] leading-normal font-sans italic">
+                "{caseData.actionBody}"
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* STAGE 5: OUTCOME */}
+        {currentStage === 5 && (
+          <div className="flex flex-col h-full justify-between items-center text-center p-1">
+            <div className="flex items-center justify-center h-11 w-11 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 mb-2 border border-emerald-300/30 shadow-inner scale-110">
+              <CheckCircle className="w-6 h-6 animate-bounce" />
+            </div>
+            <div>
+              <h4 className="text-[14px] font-bold text-foreground font-serif">
+                {activeLocale === "hi" ? "शिकायत का सफल निवारण!" : "Grievance Successfully Resolved!"}
+              </h4>
+              <div className="flex justify-center items-center gap-2 mt-2">
+                <div className="flex items-center gap-1 px-2.5 py-1 bg-emerald-500/15 text-emerald-600 font-bold rounded-lg border border-emerald-500/20 text-[12px] font-sans">
+                  <TrendingUp className="w-3.5 h-3.5" />
+                  <span>{activeLocale === "hi" ? `वसूली: ${caseData.outcomeRecovery}` : `Recovered: ${caseData.outcomeRecovery}`}</span>
+                </div>
+                <div className="flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary font-bold rounded-lg border border-primary/20 text-[11px] font-sans">
+                  <Clock className="w-3 h-3" />
+                  <span>{activeLocale === "hi" ? "समय: ~8 दिन" : "Time: ~8 Days"}</span>
+                </div>
+              </div>
+            </div>
+            <p className="text-[11px] leading-relaxed text-foreground-muted font-medium bg-emerald-500/5 p-2 rounded-lg border border-emerald-500/10 mt-2 font-sans">
+              {caseData.outcomeDetail}
+            </p>
+          </div>
+        )}
+
+      </div>
+
+      {/* Simulator Footer */}
+      <div className="relative z-10 flex items-center justify-between border-t border-border/50 pt-2 text-[10px] text-foreground-muted font-sans font-semibold">
+        <span>{activeLocale === "hi" ? "चक्र: स्वचालित" : "Cycle Mode: Autopilot"}</span>
+        <button 
+          onClick={() => {
+            if (cycleTimeoutRef.current) clearTimeout(cycleTimeoutRef.current);
+            setCurrentStage((prev) => (prev % 5) + 1);
+          }}
+          className="mt-0 text-[10px] text-primary hover:text-primary-hover font-bold flex items-center gap-0.5 hover:underline bg-transparent p-0 min-h-0 cursor-pointer"
+        >
+          {activeLocale === "hi" ? "अगला चरण →" : "Next Step →"}
+        </button>
+      </div>
+    </div>
+  );
+}