// Primitivos compartilhados — Franquia NexFarm3D.
// Sem "frame de celular": isso é uma landing responsiva de verdade.
// O quiz reaproveita TopChrome (progresso), OptionCard, Explain, TrustStrip.

const Icon = ({ name, size = 20, stroke = 1.75 }) => {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor', strokeWidth: stroke,
    strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  switch (name) {
    case 'arrow-left': return <svg {...props}><path d="M15 6l-6 6 6 6"/></svg>;
    case 'arrow-right': return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'chev-right': return <svg {...props}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chev-down': return <svg {...props}><path d="M6 9l6 6 6-6"/></svg>;
    case 'check': return <svg {...props}><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>;
    case 'x': return <svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'block': return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M5.6 5.6l12.8 12.8"/></svg>;
    case 'check-circle': return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M8 12.5l3 3 5-6"/></svg>;
    case 'shield': return <svg {...props}><path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>;
    case 'lock': return <svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 1 1 8 0v4"/></svg>;
    case 'clock': return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'info': return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 8v.01M12 11v5"/></svg>;
    case 'help': return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.7v.5M12 17v.01"/></svg>;
    case 'sparkle': return <svg {...props}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z"/></svg>;
    case 'calendar': return <svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case 'user': return <svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>;
    case 'users': return <svg {...props}><circle cx="9" cy="8" r="3.4"/><path d="M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5"/><path d="M16 5.2a3.4 3.4 0 0 1 0 6.4M18 20c0-2.6-1-4.4-2.6-5.4"/></svg>;
    case 'home': return <svg {...props}><path d="M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1z"/></svg>;
    case 'briefcase': return <svg {...props}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/><path d="M3 13h18"/></svg>;
    case 'store': return <svg {...props}><path d="M3 9l1-5h16l1 5"/><path d="M3 9v11h18V9"/><path d="M3 9c0 1.5 1.5 3 3 3s3-1.5 3-3 1.5 3 3 3 3-1.5 3-3 1.5 3 3 3 3-1.5 3-3"/></svg>;
    case 'car': return <svg {...props}><path d="M5 11l1.5-4.5A2 2 0 0 1 8.4 5h7.2a2 2 0 0 1 1.9 1.5L19 11"/><path d="M3 11h18v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H7v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><path d="M7 14.5h.01M17 14.5h.01"/></svg>;
    case 'trending-up': return <svg {...props}><path d="M3 17l6-6 4 4 8-8"/><path d="M15 7h6v6"/></svg>;
    case 'arrow-up': return <svg {...props}><path d="M12 19V5M6 11l6-6 6 6"/></svg>;
    case 'coins': return <svg {...props}><ellipse cx="9" cy="7" rx="6" ry="3"/><path d="M3 7v5c0 1.7 2.7 3 6 3"/><path d="M15 9.5c3.3 0 6 1.3 6 3v5c0 1.7-2.7 3-6 3s-6-1.3-6-3v-5"/></svg>;
    case 'wallet': return <svg {...props}><rect x="3" y="6" width="18" height="13" rx="2.5"/><path d="M3 10h18"/><circle cx="16.5" cy="14" r="1.2" fill="currentColor"/></svg>;
    case 'target': return <svg {...props}><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="1" fill="currentColor"/></svg>;
    case 'rocket': return <svg {...props}><path d="M12 3c3 1 5 4 5 8l-2.5 3h-5L7 11c0-4 2-7 5-8z"/><circle cx="12" cy="9.5" r="1.4"/><path d="M9.5 17c-1 .5-2 2-2 4 2 0 3.5-1 4-2M14.5 17c1 .5 2 2 2 4-2 0-3.5-1-4-2"/></svg>;
    case 'bolt': return <svg {...props}><path d="M13 2L4 14h6l-1 8 9-12h-6z"/></svg>;
    case 'percent': return <svg {...props}><path d="M19 5L5 19"/><circle cx="7.5" cy="7.5" r="2.5"/><circle cx="16.5" cy="16.5" r="2.5"/></svg>;
    // 3D / manufatura
    case 'printer': return <svg {...props}><rect x="5" y="3" width="14" height="6" rx="1"/><path d="M5 9h14v6H5z"/><rect x="8" y="13" width="8" height="8" rx="1"/><path d="M8 9V6h8v3"/></svg>;
    case 'cube': return <svg {...props}><path d="M12 2l8 4.5v9L12 20l-8-4.5v-9z"/><path d="M12 2v9m0 0l8-4.5M12 11L4 6.5M12 11v9"/></svg>;
    case 'layers': return <svg {...props}><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5M3 16l9 5 9-5"/></svg>;
    case 'box': return <svg {...props}><path d="M3 8l9-5 9 5v8l-9 5-9-5z"/><path d="M3 8l9 5 9-5M12 13v8"/></svg>;
    case 'spool': return <svg {...props}><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="3"/><path d="M12 3.5v3M12 17.5v3M3.5 12h3M17.5 12h3"/></svg>;
    case 'bars': return <svg {...props}><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg>;
    case 'book': return <svg {...props}><path d="M4 5a2 2 0 0 1 2-2h12v16H6a2 2 0 0 0-2 2z"/><path d="M4 19a2 2 0 0 1 2-2h12"/></svg>;
    case 'headset': return <svg {...props}><path d="M4 13v-1a8 8 0 0 1 16 0v1"/><rect x="2.5" y="13" width="4" height="6" rx="1.4"/><rect x="17.5" y="13" width="4" height="6" rx="1.4"/><path d="M20 19a4 4 0 0 1-4 3h-2"/></svg>;
    case 'map-pin': return <svg {...props}><path d="M12 21s7-5.2 7-11a7 7 0 1 0-14 0c0 5.8 7 11 7 11z"/><circle cx="12" cy="10" r="2.6"/></svg>;
    case 'play': return <svg {...props}><path d="M7 4.5l12 7.5-12 7.5z" fill="currentColor" stroke="none"/></svg>;
    case 'star': return <svg {...props}><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17.9 6.6 20l1-6.1L3.2 9.5l6.1-.9z" fill="currentColor" stroke="none"/></svg>;
    case 'clock-fast': return <svg {...props}><path d="M12 7v5l3 2"/><path d="M3.5 9a9 9 0 1 1-.3 5"/><path d="M3 5v4h4"/></svg>;
    case 'whatsapp': return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" fillRule="evenodd" clipRule="evenodd"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>;
    default: return null;
  }
};

// Logo NexFarm3D — selo oficial (logoN.png) + wordmark em texto (legível em fundo claro/escuro).
const NexLogo = ({ size = 30, wordmark = true, light = false }) => (
  <span className={`nexlogo${light ? ' light' : ''}`}>
    <img className="nexlogo-mark" src="assets/logoN.png" alt="NexFarm3D" width={size} height={size}
         style={{ height: size, width: 'auto' }}/>
    {wordmark && (
      <span className="nexlogo-word">NexFarm<span className="nexlogo-3d">3D</span></span>
    )}
  </span>
);

const TopChrome = ({ fill = 0, onBack, showBack = true, onClose }) => (
  <div className="qz-chrome">
    <button className="qz-back" onClick={onBack} aria-label="Voltar"
            style={{ visibility: showBack ? 'visible' : 'hidden' }}>
      <Icon name="arrow-left" size={20}/>
    </button>
    <div className="qz-progress"><div className="qz-progress-fill" style={{ width: `${Math.max(7, Math.min(100, fill))}%` }}/></div>
    <button className="qz-close" onClick={onClose} aria-label="Fechar">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
    </button>
  </div>
);

// Cartão de opção do quiz
const OptionCard = ({ icon, title, sub, onClick, selected, tapped }) => (
  <button className={`opt-card${selected ? ' selected' : ''}${tapped ? ' tapped' : ''}`} onClick={onClick} type="button">
    {icon && <span className="opt-ic"><Icon name={icon} size={20}/></span>}
    <span className="opt-body">
      <span className="opt-title">{title}</span>
      {sub && <span className="opt-sub">{sub}</span>}
    </span>
    <span className="opt-chev"><Icon name="chev-right" size={16} stroke={2}/></span>
  </button>
);

// "Me explica" expansível — tira objeção sem poluir a tela
const Explain = ({ children, label = 'Não entendi, me explica' }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="explain">
      <button type="button" className={`explain-toggle${open ? ' open' : ''}`} onClick={() => setOpen(o => !o)}>
        <Icon name="help" size={15} stroke={2.2}/>
        <span>{label}</span>
        <Icon name="chev-down" size={14} stroke={2.4}/>
      </button>
      {open && <div className="explain-panel">{children}</div>}
    </div>
  );
};

const TrustStrip = ({ text = 'Seus dados são protegidos · LGPD' }) => (
  <div className="trust-strip">
    <Icon name="lock" size={11} stroke={2}/>
    <span>{text}</span>
  </div>
);

const fmtBRL = (n) => 'R$ ' + n.toLocaleString('pt-BR');

Object.assign(window, { Icon, NexLogo, TopChrome, OptionCard, Explain, TrustStrip, fmtBRL });