// HifiIcons.jsx — Icon-Set + Button/Field aus hifi-shared.jsx, im UI-Kit-Prototyp-Kontext.
// Wird vor den Hi-Fi-Adapter-Files geladen, damit FriedhoefeHifi/UeberUnsHifi/etc. die
// Icons und Atom-Komponenten global finden.
// Identische Implementierung wie hifi-shared.jsx — nicht für Edits gedacht.

const PhoneIcon = ({ size = 16, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
       strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
  </svg>
);

const MailIcon = ({ size = 16, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
       strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 7l9 6 9-6"/>
  </svg>
);

const PinIcon = ({ size = 16, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
       strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 22s8-7.6 8-13a8 8 0 1 0-16 0c0 5.4 8 13 8 13z"/><circle cx="12" cy="9" r="2.5"/>
  </svg>
);

const ClockIcon = ({ size = 16, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
       strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"/><path d="M12 8v4l2 2"/>
  </svg>
);

const HelpIcon = ({ size = 14, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
       strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"/>
    <path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 3.5"/>
    <circle cx="12" cy="17" r=".6" fill="currentColor"/>
  </svg>
);

const ChevronDown = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 12 8" fill="currentColor" style={{display:'inline-block',marginLeft:6,verticalAlign:'middle'}}>
    <path d="M0 1.154 L5.769 6.923 L11.538 1.154 L10.385 0 L5.769 4.615 L1.154 0 Z"/>
  </svg>
);

const WhatsAppIcon = ({ size = 16, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
       strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 21l1.7-5.1a8 8 0 1 1 3.4 3.4L3 21z"/>
    <path d="M8.5 8.5c0 4 3 7 7 7M8.5 8.5l1.5-1.5 1.5 2-1 1c.5 1 1.5 2 2.5 2.5l1-1 2 1.5-1.5 1.5"/>
  </svg>
);

const CalendarIcon = ({ size = 16, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
       strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="5" width="18" height="16" rx="1"/>
    <path d="M3 10h18M8 3v4M16 3v4"/>
  </svg>
);

const DocIcon = ({ size = 16, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
       strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <rect x="4" y="3" width="16" height="18" rx="1"/>
    <path d="M8 7h8M8 11h8M8 15h5"/>
  </svg>
);

const ArrowRight = ({ size = 14, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
       strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14M13 6l6 6-6 6"/>
  </svg>
);

function Button({ variant = 'primary', children, onClick, type = 'button', icon }) {
  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, textDecoration:'none',
    transition:'background .18s, color .18s, border-color .18s',
  };
  const styles = {
    primary: { ...base, background:'var(--brand-accent)', color:'var(--surface)', border:'2px solid var(--brand-accent)' },
    ghost:   { ...base, background:'transparent', color:'var(--ink-900)', border:'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)' },
    trauerfall:{ ...base, background:'var(--accent-trauerfall)', color:'var(--surface)', border:'2px solid var(--accent-trauerfall)' },
    vorsorge:{ ...base, background:'transparent', color:'var(--accent-vorsorge-ink)', border:'1px solid var(--accent-vorsorge)' },
  };
  return (
    <button type={type} onClick={onClick} style={styles[variant]}>
      {icon}{children}
    </button>
  );
}

function Field({ label, type = 'text', placeholder, required, dark = false }) {
  const labelColor = dark ? 'var(--ink-warm-dim, #c9c1b6)' : 'var(--ink-500)';
  const lineColor  = dark ? 'rgba(255,255,255,.25)' : 'var(--line)';
  const textColor  = dark ? '#fff' : 'var(--ink-900)';
  return (
    <div style={{
      position:'relative', borderBottom:`1px solid ${lineColor}`,
      paddingBottom:8, transition:'border-color .18s ease',
    }}>
      <label style={{
        display:'block', font:'500 10px/1 var(--f-body)',
        letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
        color: labelColor, marginBottom:6,
      }}>
        {label}{required && <span style={{color:'var(--brand-accent)', marginLeft:2}}>*</span>}
      </label>
      {type === 'textarea' ? (
        <textarea placeholder={placeholder} rows={3}
          style={{
            width:'100%', border:0, background:'transparent',
            font:'300 16px/1.4 var(--f-body)', color: textColor,
            padding:'8px 0 6px', outline:'none', resize:'none', minHeight:60,
          }}/>
      ) : (
        <input type={type} placeholder={placeholder}
          style={{
            width:'100%', border:0, background:'transparent',
            font:'300 16px/1.4 var(--f-body)', color: textColor,
            padding:'8px 0 6px', outline:'none',
          }}/>
      )}
    </div>
  );
}

Object.assign(window, {
  PhoneIcon, MailIcon, PinIcon, ClockIcon, HelpIcon, ChevronDown,
  WhatsAppIcon, CalendarIcon, DocIcon, ArrowRight,
  Button, Field,
});