/* Icons (lucide-style, currentColor) + Sunburst + small helpers — shared via window */
const I = ({ d, children, sw = 2 }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {d ? <path d={d} /> : children}
  </svg>
);

const ICONS = {
  target: <I><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.4" fill="currentColor"/></I>,
  chart: <I><path d="M3 3v18h18"/><path d="M7 14l4-4 3 3 5-6"/></I>,
  monitor: <I><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></I>,
  users: <I><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M16 5.2a3.2 3.2 0 0 1 0 6M21 20a5.5 5.5 0 0 0-4-5.3"/></I>,
  doctor: <I><circle cx="12" cy="7" r="3.4"/><path d="M5 21v-1a7 7 0 0 1 14 0v1"/><path d="M12 11v4M10 13h4"/></I>,
  clinic: <I><path d="M4 21V8l8-5 8 5v13"/><path d="M9 21v-5h6v5"/><path d="M12 7v3M10.5 8.5h3" sw="1.6"/></I>,
  building: <I><rect x="5" y="3" width="14" height="18" rx="1.5"/><path d="M9 7h.01M15 7h.01M9 11h.01M15 11h.01M9 15h.01M15 15h.01M10 21v-3h4v3"/></I>,
  rocket: <I><path d="M5 13c-1.5 1.5-2 5-2 5s3.5-.5 5-2"/><path d="M12 15l-3-3a10 10 0 0 1 9-9 10 10 0 0 1-9 9z"/><circle cx="15" cy="9" r="1.3"/></I>,
  doc: <I><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h6"/></I>,
  key: <I><circle cx="8" cy="8" r="4"/><path d="M11 11l9 9M16 16l2-2M19 19l2-2" sw="1.8"/></I>,
  compass: <I><circle cx="12" cy="12" r="9"/><path d="M15.5 8.5l-2 5-5 2 2-5z" fill="currentColor" stroke="none"/></I>,
  tools: <I><path d="M14 7a3.5 3.5 0 0 0-4.7 4.5L4 16.8 7.2 20l5.3-5.3A3.5 3.5 0 0 0 17 10l-2 2-2-2 2-2z"/></I>,
  calendar: <I><rect x="3.5" y="5" width="17" height="16" rx="2"/><path d="M3.5 9.5h17M8 3v4M16 3v4"/></I>,
  clock: <I><circle cx="12" cy="12" r="9"/><path d="M12 7.5V12l3 2"/></I>,
  video: <I><rect x="2.5" y="6" width="13" height="12" rx="2"/><path d="M15.5 10l6-3v10l-6-3z"/></I>,
  gift: <I><path d="M20 12v8H4v-8M2.5 8h19v4h-19zM12 8v12M12 8S11 3 8 3a2.5 2.5 0 0 0 0 5zM12 8s1-5 4-5a2.5 2.5 0 0 1 0 5z"/></I>,
  check: <I><path d="M5 13l4 4L19 7"/></I>,
  shield: <I><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4" sw="1.8"/></I>,
  spark: <I><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M18 6l-2.5 2.5M8.5 15.5L6 18"/><circle cx="12" cy="12" r="2.2"/></I>,
  arrow: <I><path d="M5 12h14M13 6l6 6-6 6"/></I>,
  download: <I><path d="M12 3v12M7 11l5 5 5-5M5 21h14"/></I>,
  mail: <I><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3.5 6.5L12 13l8.5-6.5"/></I>,
  phone: <I><path d="M5 4h4l1.5 5-2 1.5a11 11 0 0 0 5 5l1.5-2 5 1.5v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></I>,
  pin: <I><path d="M12 21s7-5.5 7-11a7 7 0 0 0-14 0c0 5.5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></I>,
  bell: <I><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6zM10 19a2 2 0 0 0 4 0"/></I>,
  layers: <I><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/></I>,
  zap: <I><path d="M13 3L5 13h6l-1 8 8-10h-6z"/></I>,
};

function Icon({ name, className }) {
  return <span className={className} style={{ display: 'inline-flex' }}>{ICONS[name] || ICONS.spark}</span>;
}

function Sunburst({ size = 22, color = '' }) {
  // Pick the official single-color mark by intended tone (CSS color can't recolor an <img> SVG).
  const c = String(color).toLowerCase();
  const src = c.includes('amber') ? 'brand-assets/mark-sun-amber.svg'
    : (c.includes('white') || c.includes('#fff')) ? 'brand-assets/mark-sun-white.svg'
    : 'brand-assets/mark-sun-navy.svg';
  return <img src={src} alt="" width={size} height={size} style={{ display: 'block' }} />;
}

// ---- validation helpers ----
const isEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(v || '').trim());
const isPhoneVN = (v) => /^(0|\+84)(\s?\d){8,10}$/.test(String(v || '').replace(/[.\-()]/g, '').trim());

function validateField(f, value) {
  const empty = value == null || value === '' || (Array.isArray(value) && value.length === 0) ||
    (f.type === 'matrix' && !Object.keys(value || {}).length);
  if (f.required && empty) return 'Vui lòng hoàn tất mục này.';
  if (empty) return '';
  if (f.type === 'email' && !isEmail(value)) return 'Email chưa hợp lệ.';
  if (f.type === 'tel' && !isPhoneVN(value)) return 'Số điện thoại chưa hợp lệ (VD: 0901 234 567).';
  return '';
}

// ---- Submit form to webinar backend (CSV + Google Sheet append) ----
// Backend strips honeypot/password/type/captcha server-side, but rejecting locally
// when the honeypot is filled avoids a network round-trip for obvious bots.
async function submitForm(formName, payload) {
  if (String(payload?.__honeypot || '').length) throw new Error('spam');
  const res = await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      form: formName,
      submittedAt: new Date().toISOString(),
      data: payload,
    }),
  });
  if (!res.ok) {
    const body = await res.text().catch(() => '');
    throw new Error('submit failed: ' + res.status + ' ' + body);
  }
  return res.json();
}

Object.assign(window, { Icon, Sunburst, validateField, isEmail, isPhoneVN, submitForm });