/* global React */
/* =============================================================
   VzdelAI — Zdieľané SVG primitíva
   -------------------------------------------------------------
   - V2_LogoMark: značka (graduation cap + neurónová sieť)
   - IconBrain / IconStudent / IconBuilding / IconSparkle / IconChart:
     32×32 line ikony pre Audience a HowItWorks sekcie
   - IconLinkedIn / IconYouTube: social ikony (rezervované pre footer
     ak budú treba; aktuálne sa nepoužívajú)
   - renderHeadlineWithAI: helper pre Hero — slovo "AI" zafarbi
     gradientom, zvyšok nechaj nezmenený

   Komponenty exportujem na window — Babel scriptové súbory medzi sebou
   nezdieľajú scope inak.
   ============================================================= */

/* ────── LOGO ──────
   Logo VzdelAI: silueta čiapky absolventa (mortarboard) tvorená
   dvomi uzlami spojenými synapsiou — fúzia "vzdelávania" (cap line)
   a "AI" (neurónový node + edges).
*/
function V2_LogoMark({ size = 36, radius = 10 }) {
  const id = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" aria-hidden="true"
      style={{ display: 'block' }}>
      <defs>
        <linearGradient id={`${id}-bg`} x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="var(--vz-magenta, #B362FF)" />
          <stop offset="100%" stopColor="var(--vz-violet, #6D4FE8)" />
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="40" height="40" rx={radius} fill={`url(#${id}-bg)`} />
      <path d="M20 9 L31 14.5 L20 20 L9 14.5 Z"
        fill="none" stroke="#fff" strokeWidth="1.8" strokeLinejoin="round" />
      <path d="M28 14.5 L28 20" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" />
      <circle cx="20" cy="28" r="3.2" fill="#fff" />
      <path d="M20 28 L12 32.5 M20 28 L28 32.5" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" opacity="0.9" />
      <circle cx="12" cy="32.5" r="1.4" fill="#fff" opacity="0.9" />
      <circle cx="28" cy="32.5" r="1.4" fill="#fff" opacity="0.9" />
    </svg>);
}

/* ────── IKONY pre sekcie Audience + HowItWorks ────── */
function IconBrain() {
  return (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" />
      <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" />
    </svg>);
}

function IconStudent() {
  return (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M22 10v6" />
      <path d="M2 10l10-5 10 5-10 5z" />
      <path d="M6 12v5c3 3 9 3 12 0v-5" />
    </svg>);
}

function IconBuilding() {
  return (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="4" y="2" width="16" height="20" rx="2" />
      <path d="M9 22v-4h6v4" />
      <path d="M8 6h.01" /><path d="M16 6h.01" />
      <path d="M12 6h.01" /><path d="M8 10h.01" />
      <path d="M16 10h.01" /><path d="M12 10h.01" />
      <path d="M8 14h.01" /><path d="M16 14h.01" />
      <path d="M12 14h.01" />
    </svg>);
}

function IconSparkle() {
  return (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
      <path d="M9 9.5l1.2 2.3L12.5 13l-2.3 1.2L9 16.5l-1.2-2.3L5.5 13l2.3-1.2z" />
    </svg>);
}

function IconChart() {
  return (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M3 3v18h18" />
      <path d="M7 16l4-4 3 3 5-6" />
      <circle cx="7" cy="16" r="1.2" fill="currentColor" stroke="none" />
      <circle cx="11" cy="12" r="1.2" fill="currentColor" stroke="none" />
      <circle cx="14" cy="15" r="1.2" fill="currentColor" stroke="none" />
      <circle cx="19" cy="9" r="1.2" fill="currentColor" stroke="none" />
    </svg>);
}

/* ────── SOCIAL ikony (rezerva, momentálne sa vo footeri nepoužívajú) ────── */
function IconLinkedIn() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 110-4.13 2.07 2.07 0 010 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.2 24 24 23.23 24 22.28V1.72C24 .77 23.2 0 22.23 0z" />
    </svg>);
}

function IconYouTube() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
    </svg>);
}

/* ────── HELPER: Hero headline gradient pre slovo "AI" ────── */
function renderHeadlineWithAI(text) {
  const parts = String(text || '').split(/(\bAI\b)/);
  return parts.map((part, i) =>
    part === 'AI' ?
      <span key={i} style={{
        background: 'var(--grad-ai)',
        WebkitBackgroundClip: 'text', backgroundClip: 'text',
        WebkitTextFillColor: 'transparent', color: 'transparent'
      }}>AI</span> :
      <React.Fragment key={i}>{part}</React.Fragment>
  );
}

/* ────── EXPORT na window (Babel cross-file scope) ────── */
Object.assign(window, {
  V2_LogoMark,
  IconBrain, IconStudent, IconBuilding, IconSparkle, IconChart,
  IconLinkedIn, IconYouTube,
  renderHeadlineWithAI,
});
