diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..68946d8
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,1325 @@
+/**
+ * Interviewer Bot - Cloudflare Worker
+ * AI-powered interview scheduling and video call processing
+ */
+
+export interface Env {
+  AI: Ai;
+  INTERVIEWS: KVNamespace;
+}
+
+interface Interview {
+  id: string;
+  candidateName: string;
+  email: string;
+  scheduledAt: string;
+  duration: number; // minutes
+  status: 'scheduled' | 'in-progress' | 'completed' | 'cancelled';
+  notes: string[];
+  transcript: string[];
+}
+
+interface ChatMessage {
+  role: 'system' | 'user' | 'assistant';
+  content: string;
+}
+
+const SYSTEM_PROMPT = `You are an AI interviewer conducting a professional job interview. Your role is to:
+
+1. Greet the candidate warmly and professionally
+2. Ask relevant behavioral and technical questions
+3. Follow up on answers with probing questions
+4. Assess communication skills, problem-solving ability, and cultural fit
+5. Allow the candidate to ask questions at the end
+
+Keep responses concise (2-3 sentences max). Be encouraging but professional.
+Current context: You're conducting a video interview. The candidate can see you on screen.
+
+Interview flow:
+- Introduction (who you are, company overview)
+- Background questions (experience, motivation)
+- Behavioral questions (STAR method)
+- Technical/role-specific questions
+- Candidate questions
+- Closing`;
+
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    const url = new URL(request.url);
+    const path = url.pathname;
+
+    // CORS headers
+    const corsHeaders = {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    };
+
+    if (request.method === 'OPTIONS') {
+      return new Response(null, { headers: corsHeaders });
+    }
+
+    try {
+      // API Routes
+      if (path === '/api/interviews' && request.method === 'GET') {
+        return await getInterviews(env, corsHeaders);
+      }
+
+      if (path === '/api/interviews' && request.method === 'POST') {
+        return await createInterview(request, env, corsHeaders);
+      }
+
+      if (path.startsWith('/api/interviews/') && request.method === 'DELETE') {
+        const id = path.split('/')[3];
+        return await deleteInterview(id, env, corsHeaders);
+      }
+
+      if (path.startsWith('/api/interviews/') && request.method === 'PUT') {
+        const id = path.split('/')[3];
+        return await updateInterview(id, request, env, corsHeaders);
+      }
+
+      // AI Chat endpoint with streaming
+      if (path === '/api/chat' && request.method === 'POST') {
+        return await handleChat(request, env, corsHeaders);
+      }
+
+      // Serve the frontend
+      if (path === '/' || path === '/index.html') {
+        return new Response(getHTML(), {
+          headers: { 'Content-Type': 'text/html', ...corsHeaders },
+        });
+      }
+
+      return new Response('Not Found', { status: 404 });
+    } catch (error) {
+      console.error('Error:', error);
+      return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
+        status: 500,
+        headers: { 'Content-Type': 'application/json', ...corsHeaders },
+      });
+    }
+  },
+};
+
+async function getInterviews(env: Env, corsHeaders: Record<string, string>): Promise<Response> {
+  const list = await env.INTERVIEWS.list();
+  const interviews: Interview[] = [];
+
+  for (const key of list.keys) {
+    const data = await env.INTERVIEWS.get(key.name);
+    if (data) {
+      interviews.push(JSON.parse(data));
+    }
+  }
+
+  // Sort by scheduled time
+  interviews.sort((a, b) => new Date(a.scheduledAt).getTime() - new Date(b.scheduledAt).getTime());
+
+  return new Response(JSON.stringify(interviews), {
+    headers: { 'Content-Type': 'application/json', ...corsHeaders },
+  });
+}
+
+async function createInterview(request: Request, env: Env, corsHeaders: Record<string, string>): Promise<Response> {
+  const body = await request.json() as Partial<Interview>;
+  
+  const interview: Interview = {
+    id: crypto.randomUUID(),
+    candidateName: body.candidateName || 'Unknown',
+    email: body.email || '',
+    scheduledAt: body.scheduledAt || new Date().toISOString(),
+    duration: body.duration || 30,
+    status: 'scheduled',
+    notes: [],
+    transcript: [],
+  };
+
+  await env.INTERVIEWS.put(interview.id, JSON.stringify(interview));
+
+  return new Response(JSON.stringify(interview), {
+    status: 201,
+    headers: { 'Content-Type': 'application/json', ...corsHeaders },
+  });
+}
+
+async function updateInterview(id: string, request: Request, env: Env, corsHeaders: Record<string, string>): Promise<Response> {
+  const existing = await env.INTERVIEWS.get(id);
+  if (!existing) {
+    return new Response(JSON.stringify({ error: 'Not found' }), {
+      status: 404,
+      headers: { 'Content-Type': 'application/json', ...corsHeaders },
+    });
+  }
+
+  const body = await request.json() as Partial<Interview>;
+  const interview: Interview = { ...JSON.parse(existing), ...body };
+  
+  await env.INTERVIEWS.put(id, JSON.stringify(interview));
+
+  return new Response(JSON.stringify(interview), {
+    headers: { 'Content-Type': 'application/json', ...corsHeaders },
+  });
+}
+
+async function deleteInterview(id: string, env: Env, corsHeaders: Record<string, string>): Promise<Response> {
+  await env.INTERVIEWS.delete(id);
+  return new Response(JSON.stringify({ success: true }), {
+    headers: { 'Content-Type': 'application/json', ...corsHeaders },
+  });
+}
+
+async function handleChat(request: Request, env: Env, corsHeaders: Record<string, string>): Promise<Response> {
+  const body = await request.json() as { messages: ChatMessage[]; interviewId?: string };
+  
+  const messages: ChatMessage[] = [
+    { role: 'system', content: SYSTEM_PROMPT },
+    ...body.messages,
+  ];
+
+  // Use Workers AI with streaming via AI Gateway
+  const stream = await env.AI.run('@cf/meta/llama-3.1-8b-instruct', {
+    messages,
+    stream: true,
+    max_tokens: 256,
+  });
+
+  // Return streaming response
+  return new Response(stream as ReadableStream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+      ...corsHeaders,
+    },
+  });
+}
+
+function getHTML(): string {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Interview Bot</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    :root {
+      --bg: #0a0a0b;
+      --surface: #141416;
+      --surface-2: #1c1c1f;
+      --border: #2a2a2e;
+      --text: #fafafa;
+      --text-muted: #a1a1aa;
+      --accent: #10b981;
+      --accent-dim: #059669;
+      --danger: #ef4444;
+      --warning: #f59e0b;
+    }
+
+    body {
+      font-family: 'Space Grotesk', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+
+    .app {
+      display: grid;
+      grid-template-columns: 320px 1fr;
+      min-height: 100vh;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      background: var(--surface);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .sidebar-header {
+      padding: 24px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    .logo-icon {
+      width: 40px;
+      height: 40px;
+      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+    }
+
+    .sidebar-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    }
+
+    .section-title {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      color: var(--text-muted);
+      margin-bottom: 12px;
+      padding: 0 8px;
+    }
+
+    .interview-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .interview-card {
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 16px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .interview-card:hover {
+      border-color: var(--accent);
+      transform: translateX(4px);
+    }
+
+    .interview-card.active {
+      border-color: var(--accent);
+      background: rgba(16, 185, 129, 0.1);
+    }
+
+    .interview-name {
+      font-weight: 600;
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+
+    .interview-time {
+      font-size: 12px;
+      color: var(--text-muted);
+      font-family: 'IBM Plex Mono', monospace;
+    }
+
+    .interview-status {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      margin-top: 8px;
+    }
+
+    .interview-status.scheduled {
+      background: rgba(59, 130, 246, 0.2);
+      color: #60a5fa;
+    }
+
+    .interview-status.in-progress {
+      background: rgba(16, 185, 129, 0.2);
+      color: var(--accent);
+    }
+
+    .interview-status.completed {
+      background: rgba(161, 161, 170, 0.2);
+      color: var(--text-muted);
+    }
+
+    .add-btn {
+      width: 100%;
+      padding: 12px;
+      background: transparent;
+      border: 2px dashed var(--border);
+      border-radius: 12px;
+      color: var(--text-muted);
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.2s;
+      margin-top: 8px;
+    }
+
+    .add-btn:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+
+    /* Main content */
+    .main {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .main-header {
+      padding: 20px 32px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .view-tabs {
+      display: flex;
+      gap: 8px;
+    }
+
+    .view-tab {
+      padding: 8px 16px;
+      background: transparent;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text-muted);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .view-tab:hover {
+      border-color: var(--text-muted);
+    }
+
+    .view-tab.active {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: var(--bg);
+    }
+
+    .main-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 32px;
+    }
+
+    /* Calendar View */
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 1px;
+      background: var(--border);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+
+    .calendar-header {
+      background: var(--surface);
+      padding: 16px;
+      text-align: center;
+      font-weight: 600;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-muted);
+    }
+
+    .calendar-day {
+      background: var(--surface);
+      min-height: 120px;
+      padding: 12px;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+
+    .calendar-day:hover {
+      background: var(--surface-2);
+    }
+
+    .calendar-day.today {
+      background: rgba(16, 185, 129, 0.05);
+    }
+
+    .calendar-day.other-month {
+      opacity: 0.4;
+    }
+
+    .day-number {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 8px;
+    }
+
+    .today .day-number {
+      background: var(--accent);
+      color: var(--bg);
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+    }
+
+    .day-events {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .day-event {
+      background: rgba(16, 185, 129, 0.2);
+      color: var(--accent);
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* Video Call View */
+    .video-container {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: 24px;
+      height: calc(100vh - 140px);
+    }
+
+    .video-main {
+      background: var(--surface);
+      border-radius: 16px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+
+    .ai-avatar {
+      width: 200px;
+      height: 200px;
+      background: linear-gradient(135deg, var(--accent) 0%, #0d9488 50%, #0891b2 100%);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 80px;
+      animation: pulse 2s infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); opacity: 1; }
+      50% { transform: scale(1.05); opacity: 0.9; }
+    }
+
+    .ai-avatar.speaking {
+      animation: speak 0.3s infinite alternate;
+    }
+
+    @keyframes speak {
+      from { transform: scale(1); }
+      to { transform: scale(1.08); }
+    }
+
+    .video-pip {
+      position: absolute;
+      bottom: 24px;
+      right: 24px;
+      width: 180px;
+      height: 135px;
+      background: var(--surface-2);
+      border-radius: 12px;
+      border: 2px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-muted);
+      font-size: 12px;
+    }
+
+    .video-controls {
+      position: absolute;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 12px;
+    }
+
+    .control-btn {
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      border: none;
+      cursor: pointer;
+      font-size: 20px;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .control-btn.primary {
+      background: var(--surface-2);
+      color: var(--text);
+    }
+
+    .control-btn.primary:hover {
+      background: var(--border);
+    }
+
+    .control-btn.danger {
+      background: var(--danger);
+      color: white;
+    }
+
+    .control-btn.danger:hover {
+      background: #dc2626;
+    }
+
+    .control-btn.active {
+      background: var(--accent);
+      color: var(--bg);
+    }
+
+    /* Chat Panel */
+    .chat-panel {
+      background: var(--surface);
+      border-radius: 16px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .chat-header {
+      padding: 20px;
+      border-bottom: 1px solid var(--border);
+      font-weight: 600;
+    }
+
+    .chat-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .message {
+      max-width: 85%;
+      padding: 12px 16px;
+      border-radius: 16px;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .message.user {
+      background: var(--accent);
+      color: var(--bg);
+      align-self: flex-end;
+      border-bottom-right-radius: 4px;
+    }
+
+    .message.assistant {
+      background: var(--surface-2);
+      align-self: flex-start;
+      border-bottom-left-radius: 4px;
+    }
+
+    .chat-input-container {
+      padding: 16px;
+      border-top: 1px solid var(--border);
+    }
+
+    .chat-input-wrapper {
+      display: flex;
+      gap: 8px;
+    }
+
+    .chat-input {
+      flex: 1;
+      padding: 12px 16px;
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      color: var(--text);
+      font-size: 14px;
+      font-family: inherit;
+    }
+
+    .chat-input:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+
+    .send-btn {
+      padding: 12px 20px;
+      background: var(--accent);
+      border: none;
+      border-radius: 12px;
+      color: var(--bg);
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+
+    .send-btn:hover {
+      background: var(--accent-dim);
+    }
+
+    .send-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Modal */
+    .modal-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 100;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.2s;
+    }
+
+    .modal-overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .modal {
+      background: var(--surface);
+      border-radius: 16px;
+      width: 100%;
+      max-width: 480px;
+      border: 1px solid var(--border);
+      transform: scale(0.95);
+      transition: transform 0.2s;
+    }
+
+    .modal-overlay.active .modal {
+      transform: scale(1);
+    }
+
+    .modal-header {
+      padding: 24px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .modal-title {
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .modal-close {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      font-size: 24px;
+      cursor: pointer;
+      line-height: 1;
+    }
+
+    .modal-body {
+      padding: 24px;
+    }
+
+    .form-group {
+      margin-bottom: 20px;
+    }
+
+    .form-label {
+      display: block;
+      font-size: 13px;
+      font-weight: 500;
+      margin-bottom: 8px;
+      color: var(--text-muted);
+    }
+
+    .form-input {
+      width: 100%;
+      padding: 12px 16px;
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text);
+      font-size: 14px;
+      font-family: inherit;
+    }
+
+    .form-input:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+
+    .form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    .modal-footer {
+      padding: 20px 24px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+    }
+
+    .btn {
+      padding: 10px 20px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .btn-secondary {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--text);
+    }
+
+    .btn-secondary:hover {
+      background: var(--surface-2);
+    }
+
+    .btn-primary {
+      background: var(--accent);
+      border: none;
+      color: var(--bg);
+    }
+
+    .btn-primary:hover {
+      background: var(--accent-dim);
+    }
+
+    .btn-danger {
+      background: var(--danger);
+      border: none;
+      color: white;
+    }
+
+    /* Empty state */
+    .empty-state {
+      text-align: center;
+      padding: 60px 20px;
+      color: var(--text-muted);
+    }
+
+    .empty-icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+      opacity: 0.5;
+    }
+
+    .empty-text {
+      font-size: 14px;
+    }
+
+    /* Responsive */
+    @media (max-width: 1024px) {
+      .app {
+        grid-template-columns: 1fr;
+      }
+      
+      .sidebar {
+        display: none;
+      }
+
+      .video-container {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <div class="sidebar-header">
+        <div class="logo">
+          <div class="logo-icon">🤖</div>
+          <span>Interview Bot</span>
+        </div>
+      </div>
+      <div class="sidebar-content">
+        <div class="section-title">Upcoming Interviews</div>
+        <div class="interview-list" id="interviewList">
+          <!-- Populated dynamically -->
+        </div>
+        <button class="add-btn" onclick="openScheduleModal()">+ Schedule Interview</button>
+      </div>
+    </aside>
+
+    <!-- Main content -->
+    <main class="main">
+      <header class="main-header">
+        <div class="view-tabs">
+          <button class="view-tab active" data-view="calendar" onclick="switchView('calendar')">📅 Calendar</button>
+          <button class="view-tab" data-view="video" onclick="switchView('video')">📹 Video Call</button>
+        </div>
+        <div id="currentInterview" style="font-size: 14px; color: var(--text-muted);"></div>
+      </header>
+
+      <div class="main-content">
+        <!-- Calendar View -->
+        <div id="calendarView">
+          <div class="calendar-grid" id="calendarGrid">
+            <!-- Generated dynamically -->
+          </div>
+        </div>
+
+        <!-- Video Call View -->
+        <div id="videoView" style="display: none;">
+          <div class="video-container">
+            <div class="video-main">
+              <div class="ai-avatar" id="aiAvatar">🧑‍💼</div>
+              <div class="video-pip">
+                <span>Your Camera</span>
+              </div>
+              <div class="video-controls">
+                <button class="control-btn primary" onclick="toggleMic()" id="micBtn">🎤</button>
+                <button class="control-btn primary" onclick="toggleCamera()" id="cameraBtn">📷</button>
+                <button class="control-btn danger" onclick="endCall()">📞</button>
+              </div>
+            </div>
+
+            <div class="chat-panel">
+              <div class="chat-header">Interview Chat</div>
+              <div class="chat-messages" id="chatMessages">
+                <!-- Messages populated here -->
+              </div>
+              <div class="chat-input-container">
+                <div class="chat-input-wrapper">
+                  <input 
+                    type="text" 
+                    class="chat-input" 
+                    id="chatInput" 
+                    placeholder="Type your response..."
+                    onkeypress="handleKeyPress(event)"
+                  />
+                  <button class="send-btn" onclick="sendMessage()" id="sendBtn">Send</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- Schedule Modal -->
+  <div class="modal-overlay" id="scheduleModal">
+    <div class="modal">
+      <div class="modal-header">
+        <h2 class="modal-title">Schedule Interview</h2>
+        <button class="modal-close" onclick="closeModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label class="form-label">Candidate Name</label>
+          <input type="text" class="form-input" id="candidateName" placeholder="John Doe" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">Email</label>
+          <input type="email" class="form-input" id="candidateEmail" placeholder="john@example.com" />
+        </div>
+        <div class="form-row">
+          <div class="form-group">
+            <label class="form-label">Date</label>
+            <input type="date" class="form-input" id="interviewDate" />
+          </div>
+          <div class="form-group">
+            <label class="form-label">Time</label>
+            <input type="time" class="form-input" id="interviewTime" />
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Duration (minutes)</label>
+          <input type="number" class="form-input" id="interviewDuration" value="30" min="15" max="120" />
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="scheduleInterview()">Schedule</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // State
+    let interviews = [];
+    let currentView = 'calendar';
+    let currentInterview = null;
+    let chatHistory = [];
+    let isProcessing = false;
+    let micEnabled = true;
+    let cameraEnabled = true;
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', () => {
+      loadInterviews();
+      renderCalendar();
+      setDefaultDateTime();
+    });
+
+    // API functions
+    async function loadInterviews() {
+      try {
+        const res = await fetch('/api/interviews');
+        interviews = await res.json();
+        renderInterviewList();
+        renderCalendar();
+      } catch (e) {
+        console.error('Failed to load interviews:', e);
+      }
+    }
+
+    async function scheduleInterview() {
+      const name = document.getElementById('candidateName').value;
+      const email = document.getElementById('candidateEmail').value;
+      const date = document.getElementById('interviewDate').value;
+      const time = document.getElementById('interviewTime').value;
+      const duration = parseInt(document.getElementById('interviewDuration').value);
+
+      if (!name || !date || !time) {
+        alert('Please fill in all required fields');
+        return;
+      }
+
+      try {
+        const res = await fetch('/api/interviews', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            candidateName: name,
+            email,
+            scheduledAt: new Date(\`\${date}T\${time}\`).toISOString(),
+            duration
+          })
+        });
+
+        if (res.ok) {
+          closeModal();
+          loadInterviews();
+        }
+      } catch (e) {
+        console.error('Failed to schedule interview:', e);
+      }
+    }
+
+    async function deleteInterview(id) {
+      if (!confirm('Delete this interview?')) return;
+      
+      try {
+        await fetch(\`/api/interviews/\${id}\`, { method: 'DELETE' });
+        loadInterviews();
+      } catch (e) {
+        console.error('Failed to delete interview:', e);
+      }
+    }
+
+    // Chat functions
+    async function sendMessage() {
+      const input = document.getElementById('chatInput');
+      const message = input.value.trim();
+      
+      if (!message || isProcessing) return;
+
+      // Add user message
+      chatHistory.push({ role: 'user', content: message });
+      renderMessages();
+      input.value = '';
+
+      // Send to AI with streaming
+      isProcessing = true;
+      document.getElementById('sendBtn').disabled = true;
+      document.getElementById('aiAvatar').classList.add('speaking');
+
+      try {
+        const res = await fetch('/api/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ 
+            messages: chatHistory,
+            interviewId: currentInterview?.id 
+          })
+        });
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let assistantMessage = '';
+
+        // Add placeholder for assistant message
+        chatHistory.push({ role: 'assistant', content: '' });
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value);
+          const lines = chunk.split('\\n');
+
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              const data = line.slice(6);
+              if (data === '[DONE]') continue;
+              
+              try {
+                const parsed = JSON.parse(data);
+                if (parsed.response) {
+                  assistantMessage += parsed.response;
+                  chatHistory[chatHistory.length - 1].content = assistantMessage;
+                  renderMessages();
+                }
+              } catch (e) {
+                // Skip invalid JSON
+              }
+            }
+          }
+        }
+      } catch (e) {
+        console.error('Chat error:', e);
+        chatHistory.push({ role: 'assistant', content: 'Sorry, I encountered an error. Please try again.' });
+        renderMessages();
+      }
+
+      isProcessing = false;
+      document.getElementById('sendBtn').disabled = false;
+      document.getElementById('aiAvatar').classList.remove('speaking');
+    }
+
+    function handleKeyPress(e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    }
+
+    function renderMessages() {
+      const container = document.getElementById('chatMessages');
+      container.innerHTML = chatHistory.map(msg => \`
+        <div class="message \${msg.role}">
+          \${msg.content || '...'}
+        </div>
+      \`).join('');
+      container.scrollTop = container.scrollHeight;
+    }
+
+    // View switching
+    function switchView(view) {
+      currentView = view;
+      
+      document.querySelectorAll('.view-tab').forEach(tab => {
+        tab.classList.toggle('active', tab.dataset.view === view);
+      });
+
+      document.getElementById('calendarView').style.display = view === 'calendar' ? 'block' : 'none';
+      document.getElementById('videoView').style.display = view === 'video' ? 'block' : 'none';
+
+      if (view === 'video' && chatHistory.length === 0) {
+        // Start interview greeting
+        startInterview();
+      }
+    }
+
+    function startInterview() {
+      chatHistory = [];
+      renderMessages();
+      
+      // Auto-greeting from AI
+      setTimeout(() => {
+        chatHistory.push({ 
+          role: 'assistant', 
+          content: currentInterview 
+            ? \`Hello \${currentInterview.candidateName}! Welcome to your interview. I'm your AI interviewer today. Before we begin, how are you feeling?\`
+            : "Hello! Welcome to your interview. I'm your AI interviewer today. Please tell me a bit about yourself to get started."
+        });
+        renderMessages();
+      }, 1000);
+    }
+
+    // Interview list
+    function renderInterviewList() {
+      const container = document.getElementById('interviewList');
+      
+      if (interviews.length === 0) {
+        container.innerHTML = \`
+          <div class="empty-state">
+            <div class="empty-icon">📅</div>
+            <p class="empty-text">No interviews scheduled</p>
+          </div>
+        \`;
+        return;
+      }
+
+      container.innerHTML = interviews.map(interview => {
+        const date = new Date(interview.scheduledAt);
+        const isActive = currentInterview?.id === interview.id;
+        
+        return \`
+          <div class="interview-card \${isActive ? 'active' : ''}" onclick="selectInterview('\${interview.id}')">
+            <div class="interview-name">\${interview.candidateName}</div>
+            <div class="interview-time">\${formatDateTime(date)}</div>
+            <span class="interview-status \${interview.status}">\${interview.status}</span>
+          </div>
+        \`;
+      }).join('');
+    }
+
+    function selectInterview(id) {
+      currentInterview = interviews.find(i => i.id === id);
+      renderInterviewList();
+      document.getElementById('currentInterview').textContent = 
+        currentInterview ? \`Selected: \${currentInterview.candidateName}\` : '';
+    }
+
+    // Calendar
+    function renderCalendar() {
+      const grid = document.getElementById('calendarGrid');
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = now.getMonth();
+      
+      const firstDay = new Date(year, month, 1);
+      const lastDay = new Date(year, month + 1, 0);
+      const startOffset = firstDay.getDay();
+      
+      const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+      
+      let html = days.map(d => \`<div class="calendar-header">\${d}</div>\`).join('');
+      
+      // Previous month days
+      for (let i = 0; i < startOffset; i++) {
+        const day = new Date(year, month, -startOffset + i + 1);
+        html += \`<div class="calendar-day other-month"><div class="day-number">\${day.getDate()}</div></div>\`;
+      }
+      
+      // Current month days
+      for (let i = 1; i <= lastDay.getDate(); i++) {
+        const isToday = i === now.getDate();
+        const dayDate = new Date(year, month, i);
+        const dayInterviews = interviews.filter(interview => {
+          const iDate = new Date(interview.scheduledAt);
+          return iDate.getDate() === i && iDate.getMonth() === month && iDate.getFullYear() === year;
+        });
+        
+        html += \`
+          <div class="calendar-day \${isToday ? 'today' : ''}" onclick="openScheduleModalForDate(\${i})">
+            <div class="day-number">\${i}</div>
+            <div class="day-events">
+              \${dayInterviews.map(interview => \`
+                <div class="day-event" onclick="event.stopPropagation(); selectInterview('\${interview.id}')">
+                  \${formatTime(new Date(interview.scheduledAt))} - \${interview.candidateName}
+                </div>
+              \`).join('')}
+            </div>
+          </div>
+        \`;
+      }
+      
+      // Next month days
+      const remaining = 42 - (startOffset + lastDay.getDate());
+      for (let i = 1; i <= remaining; i++) {
+        html += \`<div class="calendar-day other-month"><div class="day-number">\${i}</div></div>\`;
+      }
+      
+      grid.innerHTML = html;
+    }
+
+    // Controls
+    function toggleMic() {
+      micEnabled = !micEnabled;
+      const btn = document.getElementById('micBtn');
+      btn.textContent = micEnabled ? '🎤' : '🔇';
+      btn.classList.toggle('active', !micEnabled);
+    }
+
+    function toggleCamera() {
+      cameraEnabled = !cameraEnabled;
+      const btn = document.getElementById('cameraBtn');
+      btn.textContent = cameraEnabled ? '📷' : '📵';
+      btn.classList.toggle('active', !cameraEnabled);
+    }
+
+    function endCall() {
+      if (confirm('End the interview?')) {
+        switchView('calendar');
+        chatHistory = [];
+        renderMessages();
+      }
+    }
+
+    // Modal
+    function openScheduleModal() {
+      document.getElementById('scheduleModal').classList.add('active');
+    }
+
+    function openScheduleModalForDate(day) {
+      const now = new Date();
+      const dateStr = \`\${now.getFullYear()}-\${String(now.getMonth() + 1).padStart(2, '0')}-\${String(day).padStart(2, '0')}\`;
+      document.getElementById('interviewDate').value = dateStr;
+      openScheduleModal();
+    }
+
+    function closeModal() {
+      document.getElementById('scheduleModal').classList.remove('active');
+      // Reset form
+      document.getElementById('candidateName').value = '';
+      document.getElementById('candidateEmail').value = '';
+      setDefaultDateTime();
+      document.getElementById('interviewDuration').value = '30';
+    }
+
+    function setDefaultDateTime() {
+      const now = new Date();
+      const dateStr = now.toISOString().split('T')[0];
+      const timeStr = \`\${String(now.getHours()).padStart(2, '0')}:\${String(now.getMinutes()).padStart(2, '0')}\`;
+      document.getElementById('interviewDate').value = dateStr;
+      document.getElementById('interviewTime').value = timeStr;
+    }
+
+    // Helpers
+    function formatDateTime(date) {
+      return date.toLocaleDateString('en-US', { 
+        month: 'short', 
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      });
+    }
+
+    function formatTime(date) {
+      return date.toLocaleTimeString('en-US', { 
+        hour: 'numeric', 
+        minute: '2-digit'
+      });
+    }
+  </script>
+</body>
+</html>`;
+}