Build a high-fidelity, interactive prototype for "Geknown", a vertically-integrated D2C genomics startup. The app uses AI agent swarms to analyze user DNA and output a living report.

You must act as an elite Frontend Engineer and UI/UX Designer. Use React, Tailwind CSS, Framer Motion (or simple CSS transitions if preferred), and Lucide React icons. All components should be contained in one or two files for a seamless prototype.

1. Design Language: "Sophisticated Dark"

Please adhere strictly to this aesthetic, avoiding generic Tailwind defaults.

• Colors:
  • Primary Backgrounds: #0A0A0B (deepest dark) and #0D0D0F (slightly raised dark).
  • Text: text-slate-200 for primary, text-slate-400 for secondary, text-slate-500 for tertiary/mono items.
  • Accents: Indigo (#4f46e5 / Tailwind indigo-600 or indigo-500) for primary actions and highlights. Emerald for "success/active" status. Deep reds for critical warnings.
• Typography:
  • Headings (Serif): Playfair Display or similar sophisticated serif.
  • Body (Sans): Inter or standard system-ui.
  • Labels/Data (Mono): JetBrains Mono or similar, heavily used with text-[10px] uppercase tracking-[0.2em] for that technical, scientific feel.
• Components & Effects:
  • Glassmorphism: Use bg-white/5 with border border-white/10 and backdrop-blur-sm for cards and panels.
  • Hover States: Subtle lifts, e.g., hover:border-indigo-500/30 or hover:bg-white/10.
  • Glows: Indigo and Emerald dots/buttons should have subtle colored shadows (e.g., shadow-[0_0_8px_rgba(99,102,241,0.8)]).

2. State & Routing

Create a simple state route ('landing' | 'dashboard') to switch between views without a real router.

3. View 1: The Landing Page

A 50/50 split-screen layout (flex-col md:flex-row).

• Left Pane (Value Prop - bg: #0A0A0B):
  • Logo: Spinning indigo circle with a tracking serif text "Geknown".
  • Headline: Massive serif text "Your Genome. [br] Explained by AI." (The second line should be italicized indigo text).
  • Subtitle: "We ship you a saliva kit, sequence your whole genome, and unleash a swarm of specialized AI agents to tell you exactly what's going on—and what to do about it."
  • Email Capture: Dark pill-shaped input (bg-slate-900 border-white/10) attached to an Indigo "Order Kit" button. Clicking this switches the route to the "Dashboard".
  • Footer metrics: "System Status: Agents Online" with a pulsing emerald dot.
• Right Pane (Tech Visualizer - bg: #0D0D0F):
  • Background: Faint radial dot pattern.
  • Floating Card 1 (Analysis Swarm Pipeline): A glassmorphic card showing 3 agents (Cancer Risk Agent, Pharmacogenomics Agent, Longevity Agent). Show animated horizontal progress bars for each, filled with indigo. Text below simulates a terminal output: "> Analyzing 3.2 billion base pairs...".
  • Floating Card 2 (Live Insight): Overlaps Card 1 on the bottom right. A dark slate card showing a "CYP2D6 poor metabolizer profile" alert.

4. View 2: The Dashboard

A full-screen, unscrollable container (h-screen overflow-hidden flex) split into three columns.

• Column 1: Narrow Sidebar (bg: #0D0D0F, border-r border-white/5)
  • Contains a "Back" button (arrow) at the top to return to the landing page.
  • Contains nav icons (Report, Chat) to simulate switching tabs on mobile.
• Column 2: Unified Action Report (bg: #0A0A0B)
  • This is the scrollable main area (flex-1).
  • Header: "Subject: Doe, Jane", "SEQUENCED & ANALYZED" emerald badge. Title: "Unified Action Report" (Serif).
  • Section 1: "Critical Insights". Red alert icon. A card listing "CYP2D6 (*4/*4 Poor Metabolizer)" handled by "Pharma Agent". Includes an urgent red button "Route to Primary Care". Below it, a clean "BRCA1" row.
  • Section 2: "Cardiovascular & Longevity". Blue icons. Lists "APOE e3/e4" (Schedule Lipid Panel button) and "LPA" (Consult Cardiologist button).
  • Section 3: Grid of two smaller summary cards ("Pharmacogenomics" and "Preventative Health") with bulleted lists of specific genes.
• Column 3: The Orchestrator / Chat Panel (bg: #0A0A0B, border-l border-white/5, width: 400px)
  • Header: "The Orchestrator - AI Genetic Counselor". Includes a glowing indigo dot.
  • Chat Area: Scrollable space.
    • User messages: Right-aligned, dark slate background.
    • AI messages: Left-aligned, indigo-tinted background (bg-indigo-500/10 border-indigo-500/20), white/indigo text.
  • Input Area: Bottom fixed input mapped to state. A form to type messages.
  • Below Input: Two small utility buttons: "Book Telehealth" and "Export Brief".
  • Mock Logic: Build a basic handleSend function. If the user types a message containing "SSRI" or "prescribed", have the AI delay for 1500ms (show a loading spinner), then return a pre-written warning about CYP2D6 and Fluoxetine toxicity based on their genome.

Bring this to life with high attention to detail on the padding, borders, typography weight contrasts, and the overarching "dark prestige tech" vibe.