```javascript
import React, { useState } from 'react';
import { Play, Briefcase, BookOpen, ChevronDown } from 'lucide-react';

const InterviewSetup = ({ onStart }) => {
  const [config, setConfig] = useState({
    jobPosition: '',
    jobDescription: '',
    topics: '',
    level: 'mid',
    questionCount: '7',
    questionTypes: 'both'
  });

  const handleChange = (e) => {
    setConfig({ ...config, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!config.jobPosition.trim() || !config.jobDescription.trim() || !config.topics.trim()) {
      alert('Please fill all required fields');
      return;
    }
    onStart(config);
  };

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="text-center mb-12 pt-20">
        <h1 className="text-5xl font-bold text-gray-900 dark:text-white mb-4">
          ChatGuru <span className="text-indigo-600">AI Interviewer</span>
        </h1>
        <p className="text-xl text-gray-600 dark:text-gray-300">
          Real-time conversational AI technical interviews with smart follow-ups
        </p>
      </div>

      <div className="max-w-4xl mx-auto">
        <form onSubmit={handleSubmit} className="bg-white dark:bg-gray-800 shadow-2xl rounded-2xl p-8 space-y-6">
          <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
            <Briefcase className="mr-3 text-indigo-600" size={28} />
            Interview Configuration
          </h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Job Position *
              </label>
              <input
                type="text"
                name="jobPosition"
                value={config.jobPosition}
                onChange={handleChange}
                className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500"
                placeholder="e.g., Senior React Developer"
                required
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Experience Level
              </label>
              <select
                name="level"
                value={config.level}
                onChange={handleChange}
                className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500"
              >
                <option value="junior">Junior (0-2 years)</option>
                <option value="mid">Mid-level (3-5 years)</option>
                <option value="senior">Senior (5+ years)</option>
                <option value="staff">Staff/Principal</option>
              </select>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Job Description *
            </label>
            <textarea
              name="jobDescription"
              value={config.jobDescription}
              onChange={handleChange}
              rows="4"
              className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500"
              placeholder="Describe the role responsibilities, required skills, and experience level... Must include enough detail for AI reasoning."
              required
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="md:col-span-2">
              <label className="