const Icon = ({ name, size = 18, strokeWidth = 1.6, className = '' }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current || !window.lucide) return;
    ref.current.innerHTML = '';
    const node = document.createElement('i');
    node.setAttribute('data-lucide', name);
    node.setAttribute('width', size);
    node.setAttribute('height', size);
    node.setAttribute('stroke-width', strokeWidth);
    ref.current.appendChild(node);
    try { window.lucide.createIcons({ attrs: { 'stroke-width': strokeWidth } }); } catch (error) {}
  }, [name, size, strokeWidth]);
  return <span ref={ref} className={`inline-flex items-center justify-center ${className}`} style={{ width: size, height: size }} />;
};

const textOf = (value, lang) => {
  if (!value) return '';
  if (typeof value === 'string') return value;
  return value[lang] || value.zh || value.en || '';
};

const BrandMark = ({ size = 42 }) => (
  <img
    src="assets/brand/icon.png"
    alt="HuaMed"
    className="brand-icon-img shadow-soft"
    style={{ width: size, height: size, borderRadius: Math.round(size * 0.34) }}
  />
);

const Card = ({ children, className = '', padding = 'p-6', onClick }) => (
  <div onClick={onClick} data-interactive={onClick ? 'true' : undefined} className={`hm-card marble-card min-w-0 rounded-3xl shadow-soft ring-1 hairline ${padding} ${className}`}>
    {children}
  </div>
);

const Pill = ({ children, tone = 'marble', icon, className = '' }) => {
  const tones = {
    marble: 'hm-pill--marble bg-marble-100 text-sea-400 ring-marble-200',
    gold: 'hm-pill--gold bg-gold-50 text-gold-700 ring-gold-200',
    sea: 'hm-pill--sea bg-sea-400/10 text-sea-500 ring-sea-400/20',
    green: 'hm-pill--success bg-emerald-50 text-emerald-700 ring-emerald-100',
    rose: 'hm-pill--error bg-rose-50 text-rose-700 ring-rose-100',
    white: 'hm-pill--glass bg-white/12 text-marble-100 ring-white/15'
  };
  return (
    <span className={`hm-pill inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium tracking-wide ring-1 ${tones[tone]} ${className}`}>
      {icon && <Icon name={icon} size={12} />}
      {children}
    </span>
  );
};

const Button = ({ children, icon, variant = 'gold', className = '', onClick, type = 'button', disabled }) => {
  const variants = {
    gold: 'hm-btn--primary gold-gradient text-sea-600 shadow-soft hover:shadow-lift',
    sea: 'hm-btn--secondary sea-gradient text-marble-100 shadow-soft hover:shadow-lift',
    ghost: 'hm-btn--ghost bg-white text-sea-500 ring-1 hairline hover:ring-gold-300',
    glass: 'hm-btn--glass bg-white/10 text-marble-100 ring-1 ring-white/15 hover:bg-white/15',
    quiet: 'hm-btn--ghost bg-marble-100 text-sea-500 hover:bg-marble-200'
  };
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={`hm-btn inline-flex h-11 items-center justify-center gap-2 rounded-2xl px-5 text-sm font-medium transition ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:-translate-y-[1px]'} ${variants[variant]} ${className}`}
    >
      {icon && <Icon name={icon} size={16} />}
      {children}
    </button>
  );
};

const SectionHeader = ({ eyebrow, title, subtitle, lang, right }) => (
  <div className="hm-section-header mb-5 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
    <div>
      {eyebrow && (
        <div className="hm-eyebrow-row mb-2 flex items-center gap-2">
          <span className="hm-eyebrow-line h-px w-7 bg-gold-400" />
          <span className="hm-eyebrow text-[11px] font-medium uppercase tracking-[0.22em] text-gold-600">{eyebrow}</span>
        </div>
      )}
      <h2 className={`hm-h2 ${lang === 'zh' ? 'is-zh font-zh' : 'font-serif-display'} text-[30px] leading-tight text-sea-500 md:text-[34px]`}>
        {textOf(title, lang)}
      </h2>
      {subtitle && (
        <p className="hm-body mt-1 max-w-[min(75vw,980px)] text-sm leading-relaxed text-sea-400/75">
          {textOf(subtitle, lang)}
        </p>
      )}
    </div>
    {right}
  </div>
);

const Field = ({ label, value, onChange, placeholder, required, type = 'text', error }) => (
  <label className="hm-field block">
    <span className="hm-field-label mb-1.5 flex items-center gap-1 text-[11px] font-medium uppercase tracking-[0.16em] text-marble-500">
      {label} {required && <span className="req text-gold-600">*</span>}
    </span>
    <input
      type={type}
      value={value}
      onChange={(event) => onChange(event.target.value)}
      placeholder={placeholder}
      className={`hm-field-input h-11 w-full rounded-2xl bg-white px-4 text-sm text-sea-500 shadow-soft ring-1 ${error ? 'is-error ring-rose-300' : 'hairline'} placeholder:text-marble-400`}
    />
  </label>
);

const SelectField = ({ label, value, onChange, options, required, error }) => (
  <label className="hm-field block">
    <span className="hm-field-label mb-1.5 flex items-center gap-1 text-[11px] font-medium uppercase tracking-[0.16em] text-marble-500">
      {label} {required && <span className="req text-gold-600">*</span>}
    </span>
    <select
      value={value}
      onChange={(event) => onChange(event.target.value)}
      className={`hm-field-input h-11 w-full rounded-2xl bg-white px-4 text-sm text-sea-500 shadow-soft ring-1 ${error ? 'is-error ring-rose-300' : 'hairline'}`}
    >
      {options.map((option) => (
        <option key={option.value || option} value={option.value || option}>{option.label || option}</option>
      ))}
    </select>
  </label>
);

const TextareaField = ({ label, value, onChange, placeholder, required, error }) => (
  <label className="hm-field block">
    <span className="hm-field-label mb-1.5 flex items-center gap-1 text-[11px] font-medium uppercase tracking-[0.16em] text-marble-500">
      {label} {required && <span className="req text-gold-600">*</span>}
    </span>
    <textarea
      value={value}
      onChange={(event) => onChange(event.target.value)}
      placeholder={placeholder}
      rows={4}
      className={`hm-field-input w-full resize-none rounded-2xl bg-white px-4 py-3 text-sm leading-relaxed text-sea-500 shadow-soft ring-1 ${error ? 'is-error ring-rose-300' : 'hairline'} placeholder:text-marble-400`}
    />
  </label>
);

const Modal = ({ open, onClose, title, children, lang, className = '' }) => {
  if (!open) return null;
  return (
    <div className="modal-backdrop fixed inset-0 z-50 flex items-center justify-center bg-sea-700/40 p-4 backdrop-blur-sm">
      <div className={`modal-panel marble-card w-full max-w-2xl rounded-4xl p-6 shadow-deep ring-1 hairline ${className}`}>
        <div className="mb-4 flex items-start justify-between gap-4">
          <div>
            <div className="mb-2 flex items-center gap-2">
              <span className="h-px w-6 bg-gold-400" />
              <span className="text-[11px] font-medium uppercase tracking-[0.22em] text-gold-600">Notice</span>
            </div>
            <h3 className={`${lang === 'zh' ? 'font-zh' : 'font-serif-display'} text-2xl text-sea-500`}>{title}</h3>
          </div>
          <button onClick={onClose} className="flex h-10 w-10 items-center justify-center rounded-full bg-white text-sea-400 ring-1 hairline hover:ring-gold-300">
            <Icon name="x" size={16} />
          </button>
        </div>
        {children}
      </div>
    </div>
  );
};

Object.assign(window, { Icon, textOf, BrandMark, Card, Pill, Button, SectionHeader, Field, SelectField, TextareaField, Modal });