/* QuoteForm.jsx — Offerte form + Kontakt form, shared Field primitives */

function Field({ label, children, required, full }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 8, gridColumn: full ? '1 / -1' : 'auto' }}>
      <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--kg-fg1)', fontFamily: 'var(--kg-font-body)' }}>
        {label}{required && <span style={{ color: 'var(--kg-blue)' }}> *</span>}
      </span>
      {children}
    </label>
  );
}

function TextInput({ value, onChange, placeholder, type = 'text', textarea, rows = 5 }) {
  const [f, setF] = React.useState(false);
  const base = {
    width: '100%', boxSizing: 'border-box', fontFamily: 'var(--kg-font-body)', fontSize: 16,
    color: 'var(--kg-fg1)', background: f ? '#fff' : 'var(--kg-mist)', padding: '13px 15px',
    border: `1.5px solid ${f ? 'var(--kg-blue)' : 'transparent'}`, borderRadius: 'var(--kg-radius)',
    outline: 'none', transition: 'all var(--kg-dur) var(--kg-ease)',
    boxShadow: f ? '0 0 0 4px var(--kg-blue-tint)' : 'none', resize: textarea ? 'vertical' : 'none'
  };
  const props = { value, onChange: e => onChange(e.target.value), placeholder, onFocus: () => setF(true), onBlur: () => setF(false), style: base };
  return textarea ? <textarea rows={rows} {...props} /> : <input type={type} {...props} />;
}

function Segmented({ options, value, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
      {options.map(o => {
        const on = value === o;
        return (
          <button key={o} type="button" onClick={() => onChange(o)} style={{
            padding: '11px 20px', borderRadius: 'var(--kg-radius-pill)', cursor: 'pointer',
            fontFamily: 'var(--kg-font-body)', fontWeight: 700, fontSize: 14.5,
            border: `1.5px solid ${on ? 'var(--kg-blue)' : 'var(--kg-line-strong)'}`,
            background: on ? 'var(--kg-blue)' : '#fff', color: on ? '#fff' : 'var(--kg-slate-700)',
            transition: 'all var(--kg-dur) var(--kg-ease)'
          }}>{o}</button>
        );
      })}
    </div>
  );
}

function FileDrop({ name, onName }) {
  const [over, setOver] = React.useState(false);
  const ref = React.useRef(null);
  return (
    <div onClick={() => ref.current && ref.current.click()}
      onDragOver={e => { e.preventDefault(); setOver(true); }} onDragLeave={() => setOver(false)}
      onDrop={e => { e.preventDefault(); setOver(false); const f = e.dataTransfer.files[0]; if (f) onName(f.name); }}
      style={{
        border: `1.5px dashed ${over ? 'var(--kg-blue)' : 'var(--kg-line-strong)'}`, borderRadius: 'var(--kg-radius)',
        padding: '22px', textAlign: 'center', cursor: 'pointer', background: over ? 'var(--kg-blue-tint)' : 'var(--kg-mist)',
        transition: 'all var(--kg-dur) var(--kg-ease)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8
      }}>
      <Icon name="upload-cloud" size={26} color="var(--kg-blue)" />
      <span style={{ fontSize: 15, color: 'var(--kg-fg2)' }}>{name || 'Daten hochladen (max. 60MB)'}</span>
      <input ref={ref} type="file" style={{ display: 'none' }} onChange={e => { const f = e.target.files[0]; if (f) onName(f.name); }} />
    </div>
  );
}

function SuccessCard({ onReset, title, text }) {
  return (
    <Reveal y={0}>
      <div style={{ textAlign: 'center', padding: '56px 28px', background: 'var(--kg-blue-tint)', borderRadius: 'var(--kg-radius-lg)', border: '1px solid var(--kg-blue-tint-2)' }}>
        <div style={{ width: 66, height: 66, borderRadius: '50%', background: 'var(--kg-blue)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 22px', boxShadow: 'var(--kg-shadow-blue)' }}>
          <Icon name="check" size={34} color="#fff" strokeWidth={2.6} />
        </div>
        <h3 className="kg-h2" style={{ margin: 0 }}>{title}</h3>
        <p className="kg-lead" style={{ margin: '14px auto 26px', maxWidth: 460 }}>{text}</p>
        <Button variant="ghost" onClick={onReset}>Neue Anfrage</Button>
      </div>
    </Reveal>
  );
}

function QuoteForm({ preselect }) {
  const [d, setD] = React.useState({ firma: '', name: '', mail: '', tel: '', dienst: preselect || 'Gipserarbeiten', file: '', beschreibung: '' });
  const [sent, setSent] = React.useState(false);
  const set = (k, v) => setD(s => ({ ...s, [k]: v }));
  if (sent) return <SuccessCard title="Vielen Dank!" text="Ihre Offerte-Anfrage ist bei uns eingegangen. Wir melden uns in Kürze mit einem unverbindlichen Angebot." onReset={() => { setSent(false); setD({ firma: '', name: '', mail: '', tel: '', dienst: 'Gipserarbeiten', file: '', beschreibung: '' }); }} />;
  return (
    <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }} className="kg-form-grid">
      <Field label="Unternehmen"><TextInput value={d.firma} onChange={v => set('firma', v)} placeholder="Firmenname" /></Field>
      <Field label="Vorname & Name" required><TextInput value={d.name} onChange={v => set('name', v)} placeholder="Max Muster" /></Field>
      <Field label="E-Mail" required><TextInput type="email" value={d.mail} onChange={v => set('mail', v)} placeholder="name@firma.ch" /></Field>
      <Field label="Telefon"><TextInput value={d.tel} onChange={v => set('tel', v)} placeholder="071 000 00 00" /></Field>
      <Field label="Dienstleistung" full><Segmented options={['Gipserarbeiten', 'Spezial Gipsarbeiten', 'Fassaden', 'Umbauten']} value={d.dienst} onChange={v => set('dienst', v)} /></Field>
      <Field label="Daten hochladen" full><FileDrop name={d.file} onName={n => set('file', n)} /></Field>
      <Field label="Beschreibung" full><TextInput textarea value={d.beschreibung} onChange={v => set('beschreibung', v)} placeholder="Beschreiben Sie Ihr Projekt …" /></Field>
      <div style={{ gridColumn: '1 / -1' }}>
        <Button variant="primary" size="lg" icon="arrow-right">Senden</Button>
      </div>
    </form>
  );
}

function ContactForm() {
  const [d, setD] = React.useState({ name: '', mail: '', betreff: '', nachricht: '' });
  const [sent, setSent] = React.useState(false);
  const set = (k, v) => setD(s => ({ ...s, [k]: v }));
  if (sent) return <SuccessCard title="Nachricht gesendet" text="Besten Dank für Ihre Nachricht. Wir melden uns so rasch wie möglich bei Ihnen." onReset={() => { setSent(false); setD({ name: '', mail: '', betreff: '', nachricht: '' }); }} />;
  return (
    <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }} className="kg-form-grid">
      <Field label="Name" required><TextInput value={d.name} onChange={v => set('name', v)} placeholder="Max Muster" /></Field>
      <Field label="E-Mail" required><TextInput type="email" value={d.mail} onChange={v => set('mail', v)} placeholder="name@firma.ch" /></Field>
      <Field label="Betreff" full><TextInput value={d.betreff} onChange={v => set('betreff', v)} placeholder="Worum geht es?" /></Field>
      <Field label="Nachricht" full><TextInput textarea value={d.nachricht} onChange={v => set('nachricht', v)} placeholder="Ihre Nachricht …" /></Field>
      <div style={{ gridColumn: '1 / -1' }}><Button variant="primary" size="lg" icon="arrow-right">Senden</Button></div>
    </form>
  );
}

Object.assign(window, { Field, TextInput, Segmented, FileDrop, QuoteForm, ContactForm, SuccessCard });