// questions.jsx — Screen 2: One question per screen with VoiceField

const QUESTIONS = [
  {
    id: 'pain',
    eyebrow: 'Frage 1 · Pain',
    title: 'Was frisst bei euch gerade am meisten Zeit oder Nerven?',
    sub: 'Einfach drauflos, wir hören zu.',
    type: 'textarea',
    placeholder: 'Schreib\'s rein. Oder klick aufs Mikro und sprich frei.',
    sampleKey: 'pain',
  },
  {
    id: 'usecases',
    eyebrow: 'Frage 2 · Use Cases',
    title: 'Welche 2–3 Prozesse würdest du als erstes automatisieren?',
    sub: 'Beschreib gerne kurz, wie das heute bei euch läuft.',
    type: 'textarea-large',
    placeholder: 'Z.B. „Lead-Recherche vor Outbound-Calls. Aktuell macht das jemand manuell pro Account, dauert ca. 20 Minuten pro Lead..."',
    hint: 'Tipp: einfach reden, das geht hier am schnellsten.',
    sampleKey: 'usecases',
  },
  {
    id: 'attempts',
    eyebrow: 'Frage 3 · Bisherige Lösungsversuche',
    title: 'Habt ihr für eines dieser Themen schon eine Lösung probiert, intern oder mit anderen Tools?',
    sub: 'Was hat (nicht) funktioniert?',
    type: 'textarea',
    placeholder: 'Z.B. „Haben Make ausprobiert, ist an der Datenqualität gescheitert. Tool selbst war ok."',
    sampleKey: 'attempts',
  },
  {
    id: 'inspiration',
    eyebrow: 'Frage 4 · Vorbild',
    title: 'Hast du irgendwo eine Automation gesehen, bei der du dachtest „so was brauchen wir auch"?',
    sub: 'Wenn dir was einfällt, super. Wenn nicht, überspring\'s einfach.',
    type: 'textarea',
    placeholder: 'Tool, Beispiel aus einem anderen Unternehmen, Demo-Video. Alles was inspiriert hat.',
    optional: true,
    sampleKey: 'inspiration',
  },
  {
    id: 'success',
    eyebrow: 'Frage 5 · Erfolgsbild',
    title: 'Was wäre für dich ein richtig guter Ausgang aus unserem Gespräch?',
    sub: 'Wenn du nach dem Call denkst „das war es wert", was ist dann passiert?',
    type: 'textarea',
    placeholder: 'Schreib einen Satz oder ein paar Stichpunkte.',
    sampleKey: 'success',
  },
  {
    id: 'bonus',
    eyebrow: 'Bonus · Optional',
    title: 'Gibt es etwas, was wir vorher wissen sollten?',
    sub: 'Budget-Rahmen, Timeline, andere Personen am Tisch. Alles was hilft.',
    type: 'textarea',
    placeholder: 'Optional. Hilft uns, im Call direkt aufs Wesentliche zu kommen.',
    optional: true,
    sampleKey: 'bonus',
  },
];

const QuestionScreen = ({ answers, setAnswer, onBack, onNext, idx, onSaved }) => {
  const q = QUESTIONS[idx];
  const total = QUESTIONS.length;
  const isLast = idx === total - 1;
  const value = answers[q.id];
  const filled = q.optional ? true : (value || '').trim().length > 4;

  return (
    <main className="screen-enter q-shell">
      {/* Top progress row */}
      <div className="q-top-row">
        <div className="q-counter">
          <span className="q-counter-num">{String(idx + 1).padStart(2, '0')}</span>
          <span className="q-counter-sep">/</span>
          <span className="q-counter-tot">{String(total).padStart(2, '0')}</span>
        </div>
        <div className="q-progress-track">
          {Array.from({length: total}).map((_, i) => (
            <div key={i} className={`q-seg ${i < idx ? 'done' : i === idx ? 'current' : ''}`}/>
          ))}
        </div>
        <div className="q-counter-meta">
          {q.optional ? 'Optional' : `Pflichtfrage`}
        </div>
      </div>

      {/* Persona ask block */}
      <div className="q-ask-block">
        <div className="q-ask-meta-row">
          <div className="q-ask-avatar">
            <div className="q-ask-avatar-img">
              <img src="assets/jens.jpg" alt="Jens"/>
            </div>
            <span className="q-ask-avatar-status" aria-label="online"/>
          </div>
          <div className="q-ask-from">
            <strong>Jens</strong> <span className="q-ask-light">fragt</span><span className="q-ask-dot">·</span><span className="q-ask-eyebrow">{q.eyebrow}</span>
          </div>
        </div>
        <h2 className="q-h2">{q.title}</h2>
        <p className="q-sub">{q.sub}</p>
      </div>

      {/* Field */}
      {q.type === 'textarea' && (
        <VoiceField
          value={value}
          onChange={(v) => { setAnswer(q.id, v); onSaved(); }}
          placeholder={q.placeholder}
          rows={5}
          autoFocus
          sampleKey={q.sampleKey}
        />
      )}
      {q.type === 'textarea-large' && (
        <VoiceField
          value={value}
          onChange={(v) => { setAnswer(q.id, v); onSaved(); }}
          placeholder={q.placeholder}
          rows={8}
          autoFocus
          hint={q.hint}
          sampleKey={q.sampleKey}
        />
      )}

      {/* Footer nav */}
      <div className="q-nav-row">
        <button className="btn btn-ghost q-back-btn" onClick={onBack}>
          <I.ArrowLeft style={{ width:16, height:16 }}/> Zurück
        </button>

        <div className="q-nav-right">
          <span className="q-autosave">
            <span className="q-autosave-dot"/>
            Automatisch gespeichert
          </span>
          {q.optional && !filled && (
            <button className="btn btn-ghost q-skip-btn" onClick={onNext}>
              Überspringen
            </button>
          )}
          <button
            className="btn btn-primary q-next-btn"
            onClick={onNext}
            disabled={!filled && !q.optional}
          >
            {isLast ? 'Briefing abschicken' : 'Weiter'} <I.ArrowRight style={{ width: 16, height: 16 }}/>
          </button>
        </div>
      </div>
    </main>
  );
};

const SetupFields = null; // removed — replaced by free-text questions

window.QuestionScreen = QuestionScreen;
window.QUESTIONS = QUESTIONS;