// Contact.jsx — Kontaktformular section (Dark Ink stage)

function Field({ label, type='text', value='', placeholder, required, error, success, disabled, onChange, name, autoComplete, id }) {
  const reactId = React.useId ? React.useId() : null;
  const fieldId = id || reactId || `field-${(name || label || 'x').replace(/\W+/g,'-').toLowerCase()}`;
  const [focused, setFocused] = React.useState(false);
  const lineColor = error ? 'var(--accent-trauerfall)' : success ? 'var(--color-success)' : focused ? 'var(--brand-accent)' : 'var(--line)';
  return (
    <div style={{
      position:'relative', borderBottom:`1px solid ${lineColor}`,
      opacity: disabled ? .5 : 1, pointerEvents: disabled ? 'none' : 'auto',
      paddingBottom:8, transition:'border-color .18s ease',
    }}>
      <label htmlFor={fieldId} style={{display:'block', font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'var(--ink-500)', marginBottom:6}}>
        {label}{required && <span style={{color:'var(--brand-accent)', marginLeft:2}} aria-hidden="true">*</span>}
        {required && <span style={{position:'absolute', width:1, height:1, overflow:'hidden', clip:'rect(0 0 0 0)'}}> (Pflichtfeld)</span>}
      </label>
      {type === 'textarea' ? (
        <textarea id={fieldId} name={name} value={value} placeholder={placeholder} rows={3}
          required={required} aria-required={required || undefined}
          autoComplete={autoComplete}
          onFocus={()=>setFocused(true)} onBlur={()=>setFocused(false)}
          onChange={e=>onChange && onChange(e.target.value)}
          style={{
            width:'100%', border:0, background:'transparent',
            font:'300 16px/1.4 var(--f-body)', color:'var(--ink-900)',
            padding:'8px 0 6px', outline:'none', resize:'none', minHeight:60,
          }}/>
      ) : (
        <input id={fieldId} name={name} type={type} value={value} placeholder={placeholder}
          required={required} aria-required={required || undefined}
          autoComplete={autoComplete}
          onFocus={()=>setFocused(true)} onBlur={()=>setFocused(false)}
          onChange={e=>onChange && onChange(e.target.value)}
          style={{
            width:'100%', border:0, background:'transparent',
            font:'300 16px/1.4 var(--f-body)', color:'var(--ink-900)',
            padding:'8px 0 6px', outline:'none',
          }}/>
      )}
    </div>
  );
}

function Button({ variant='primary', children, onClick, type='button' }) {
  const [hover, setHover] = React.useState(false);
  const base = {
    display:'inline-flex', alignItems:'center', gap:10,
    font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
    padding:'14px 26px', cursor:'pointer', border:0,
    transition:'background .18s, color .18s, border-color .18s',
    textDecoration:'none',
  };
  const styles = {
    primary: { ...base, background: hover ? 'var(--brand-accent-ink)' : 'var(--brand-accent)', color:'var(--surface)', border: hover ? '2px solid var(--brand-accent-ink)' : '2px solid var(--brand-accent)', padding:'14px 26px' },
    ghost:   { ...base, background:'transparent', color:'var(--ink-900)', border: hover ? '1px solid var(--ink-900)' : '1px solid var(--ink-200)', padding:'13px 26px' },
    link:    { ...base, background:'transparent', color:'var(--brand-accent)', padding:'14px 0', borderBottom:'1px solid var(--brand-accent)' },
  };
  return (
    <button type={type} onClick={onClick}
            onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
            style={styles[variant]}>
      {children}
    </button>
  );
}

function ContactSection() {
  const [form, setForm] = React.useState({ name:'', tel:'', message:'' });
  const [sent, setSent] = React.useState(false);
  const upd = (k,v) => setForm(f => ({ ...f, [k]:v }));
  const submit = e => {
    e.preventDefault();
    if (!form.name) return;
    setSent(true);
  };
  return (
    <section style={{background:'var(--surface-ink)', padding:'96px var(--page-x)', color:'var(--color-fg-inverse)'}}>
      <div style={{maxWidth:1140, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:64, alignItems:'center'}}>
        <div>
          <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--brand-accent)'}}>Kontakt</span>
          <h2 style={{margin:'14px 0 14px', font:'300 44px/1.1 var(--f-display)', letterSpacing:'-.01em', color:'var(--color-fg-inverse)'}}>
            Sie haben&nbsp;<em style={{fontStyle:'normal', color:'var(--brand-accent)', fontWeight:400}}>Fragen?</em>
          </h2>
          <p style={{color:'var(--ink-warm-dim)', fontSize:16, margin:'0 0 28px', maxWidth:'38ch', lineHeight:1.7}}>
            Nehmen Sie Kontakt mit uns auf. Wir sind jederzeit für Sie da — Tag und Nacht.
          </p>
          <div style={{fontFamily:'var(--f-script)', fontSize:34, color:'var(--brand-accent)', lineHeight:1, marginBottom:36}}>— persönlich</div>
          <div style={{display:'flex', flexDirection:'column', gap:14, fontSize:15, color:'var(--ink-warm-dim)', lineHeight:1.7}}>
            <div style={{display:'flex', gap:14, alignItems:'center'}}><PhoneIcon color="var(--brand-accent)"/>05361 · 4 22 22</div>
            <div style={{display:'flex', gap:14, alignItems:'center'}}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--brand-accent)" strokeWidth="1.6"><rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 7l9 6 9-6"/></svg>
              kontakt@tschense-bestattungen.de
            </div>
          </div>
        </div>

        <form onSubmit={submit} style={{background:'var(--surface)', padding:'36px 38px', display:'flex', flexDirection:'column', gap:24}}>
          {sent && (
            <div style={{padding:'12px 16px', background:'rgba(63,125,79,.08)', color:'var(--color-success)', font:'500 12px/1.5 var(--f-body)', letterSpacing:'.04em', borderLeft:'2px solid var(--color-success)'}}>
              Vielen Dank, {form.name}. Wir melden uns in Kürze.
            </div>
          )}
          <Field label="Name" name="name" autoComplete="name" value={form.name} placeholder="Ihr Name" required onChange={v=>upd('name',v)}/>
          <Field label="Telefon" name="tel" type="tel" autoComplete="tel" value={form.tel} placeholder="05361 · 4 22 22" onChange={v=>upd('tel',v)}/>
          <Field label="Ihre Nachricht" name="message" type="textarea" autoComplete="off" value={form.message} placeholder="Wir möchten ein Vorgespräch vereinbaren …" onChange={v=>upd('message',v)}/>

          <label htmlFor="privacy-consent" style={{display:'flex', gap:14, alignItems:'flex-start', fontSize:12, color:'var(--ink-500)', lineHeight:1.5, cursor:'pointer', position:'relative'}}>
            <input id="privacy-consent" name="privacy" type="checkbox" required defaultChecked
                   style={{position:'absolute', opacity:0, width:18, height:18, margin:0, cursor:'pointer'}}/>
            <span aria-hidden="true" style={{flexShrink:0, width:18, height:18, background:'var(--brand-accent)', display:'flex', alignItems:'center', justifyContent:'center', marginTop:1}}>
              <svg width="12" height="12" viewBox="0 0 20 20" fill="none" stroke="var(--surface)" strokeWidth="2.5"><path d="M5 10l3 3 7-7"/></svg>
            </span>
            <span>Mit dem Absenden erkläre ich mich damit einverstanden, dass meine Daten zur Bearbeitung meines Anliegens verwendet werden.</span>
          </label>

          <div style={{display:'flex', gap:14, alignItems:'center'}}>
            <Button variant="primary" type="submit">Senden</Button>
            <Button variant="link" type="button">Abbrechen</Button>
          </div>
        </form>
      </div>
    </section>
  );
}

Object.assign(window, { Field, Button, ContactSection });