import React, { useState } from 'react';

export default function FairDentApp() {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    treatment: '',
    cost: '',
    insurance: 'gesetzlich'
  });

  return (
    <div style={{ minHeight: '100vh', background: '#f8fafc', color: '#1e293b', fontFamily: 'sans-serif', padding: '20px' }}>
      <header style={{ maxWidth: '800px', margin: '0 auto 40px auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h1 style={{ color: '#0ea5e9', fontSize: '24px', margin: 0 }}>FairDent</h1>
        <span style={{ background: '#e0f2fe', color: '#0369a1', padding: '6px 12px', borderRadius: '20px', fontSize: '14px', fontWeight: 'bold' }}>Beta</span>
      </header>

      <main style={{ maxWidth: '800px', margin: '0 auto', background: '#ffffff', padding: '30px', borderRadius: '12px', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}>
        {step === 1 && (
          <div>
            <h2>Willkommen bei FairDent</h2>
            <p style={{ color: '#64748b', marginBottom: '20px' }}>Dein transparenter Begleiter für faire Zahnarztkosten.</p>
            <button 
              onClick={() => setStep(2)}
              style={{ background: '#0ea5e9', color: '#ffffff', border: 'none', padding: '12px 24px', borderRadius: '8px', fontSize: '16px', cursor: 'pointer', fontWeight: 'bold' }}
            >
              Kosten prüfen & starten
            </button>
          </div>
        )}

        {step === 2 && (
          <div>
            <h2>Behandlung eingeben</h2>
            <div style={{ marginTop: '20px' }}>
              <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>Art der Behandlung:</label>
              <input 
                type="text" 
                placeholder="z.B. Professionelle Zahnreinigung, Krone..."
                value={formData.treatment}
                onChange={(e) => setFormData({...formData, treatment: e.target.value})}
                style={{ width: '100%', padding: '10px', borderRadius: '6px', border: '1px solid #cbd5e1', marginBottom: '15px' }}
              />
              <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>Kosten laut Heil- und Kostenplan (Euro):</label>
              <input 
                type="number" 
                placeholder="z.B. 450"
                value={formData.cost}
                onChange={(e) => setFormData({...formData, cost: e.target.value})}
                style={{ width: '100%', padding: '10px', borderRadius: '6px', border: '1px solid #cbd5e1', marginBottom: '20px' }}
              />
              <button 
                onClick={() => setStep(3)}
                style={{ background: '#0ea5e9', color: '#ffffff', border: 'none', padding: '12px 24px', borderRadius: '8px', fontSize: '16px', cursor: 'pointer', fontWeight: 'bold' }}
              >
                Fairness-Check starten
              </button>
            </div>
          </div>
        )}

        {step === 3 && (
          <div>
            <h2>Dein Ergebnis</h2>
            <p style={{ color: '#64748b', marginTop: '10px' }}>Behandlung: <strong>{formData.treatment || 'Nicht angegeben'}</strong></p>
            <p style={{ color: '#64748b' }}>Eingetragener Betrag: <strong>{formData.cost ? formData.cost + ' €' : '0 €'}</strong></p>
            <div style={{ background: '#f0fdf4', border: '1px solid #bbf7d0', padding: '15px', borderRadius: '8px', marginTop: '20px', color: '#166534' }}>
              Dein Kostencheck sieht gut aus! Wir vergleichen diesen Wert im Hintergrund mit regionalen Durchschnittswerten.
            </div>
            <button 
              onClick={() => setStep(1)}
              style={{ background: '#e2e8f0', color: '#334155', border: '尼', padding: '10px 20px', borderRadius: '8px', marginTop: '20px', cursor: 'pointer' }}
            >
              Zurück zum Start
            </button>
          </div>
        )}
      </main>
    </div>
  );
}