/* Service Planets — themed per capability
   Each variant renders 3 static planets with subtle float animations,
   positioned in the right-side negative space of the page header. */

function Planet({ className, children, rings }) {
  return (
    <div className={`sp-planet ${className}`}>
      {rings && <div className="sp-rings" />}
      <div className="sp-core">{children}</div>
    </div>
  );
}

/* ---------- Paid Media: Google, Meta (rings), TikTok ---------- */
function PaidMediaPlanets() {
  return (
    <div className="sp-field" aria-hidden="true">
      <Planet className="sp-a">
        <svg viewBox="0 0 24 24" width="30" height="30"><path fill="#4285F4" d="M21.6 12.23c0-.73-.07-1.43-.2-2.1H12v4.1h5.4a4.62 4.62 0 0 1-2 3v2.5h3.24c1.9-1.75 3-4.33 3-7.5z"/><path fill="#34A853" d="M12 22c2.7 0 4.96-.9 6.62-2.43l-3.24-2.5c-.9.6-2.04.95-3.38.95-2.6 0-4.8-1.75-5.58-4.1H3.08v2.57A10 10 0 0 0 12 22z"/><path fill="#FBBC05" d="M6.42 13.92A6 6 0 0 1 6.1 12c0-.67.11-1.32.32-1.92V7.5H3.08A10 10 0 0 0 2 12c0 1.62.39 3.15 1.08 4.5l3.34-2.58z"/><path fill="#EA4335" d="M12 6c1.47 0 2.78.5 3.82 1.5l2.87-2.87C16.96 3.05 14.7 2 12 2a10 10 0 0 0-8.92 5.5l3.34 2.58C7.2 7.75 9.4 6 12 6z"/></svg>
      </Planet>
      <Planet className="sp-b" rings>
        <svg viewBox="0 0 36 24" width="30" height="22"><defs><linearGradient id="pmMetaG" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stopColor="#0866FF"/><stop offset="100%" stopColor="#00C6FF"/></linearGradient></defs><path fill="none" stroke="url(#pmMetaG)" strokeWidth="3.2" strokeLinecap="round" d="M3 12c0-5 3-8 7-8s6 3 8 7 4 7 8 7 6-3 6-7-3-7-7-7-6 3-8 7-4 7-8 7-6-3-6-6z"/></svg>
      </Planet>
      <Planet className="sp-c">
        <svg viewBox="0 0 24 24" width="24" height="24"><path fill="#25F4EE" d="M17 2.5v3.3a5 5 0 0 0 4 4.9v3.2a8.2 8.2 0 0 1-4-1.1V17a6 6 0 1 1-6-6c.3 0 .7 0 1 .1v3.3a2.7 2.7 0 1 0 1.9 2.6V2.5z"/><path fill="#FE2C55" d="M18 3.5v3.3a5 5 0 0 0 4 4.9V15a8.2 8.2 0 0 1-4-1.1V18a6 6 0 1 1-6-6c.3 0 .7 0 1 .1v3.3a2.7 2.7 0 1 0 1.9 2.6V3.5z"/><path fill="#fff" d="M17.5 3v3.3a5 5 0 0 0 4 4.9v3.2a8.2 8.2 0 0 1-4-1.1v4.2a6 6 0 1 1-6-6c.3 0 .7 0 1 .1v3.3a2.7 2.7 0 1 0 1.9 2.6V3z"/></svg>
      </Planet>
    </div>
  );
}

/* ---------- Search & GEO: Google, ChatGPT, Perplexity (AI search engines) ---------- */
function SearchGeoPlanets() {
  return (
    <div className="sp-field" aria-hidden="true">
      <Planet className="sp-a">
        {/* Google G */}
        <svg viewBox="0 0 24 24" width="30" height="30"><path fill="#4285F4" d="M21.6 12.23c0-.73-.07-1.43-.2-2.1H12v4.1h5.4a4.62 4.62 0 0 1-2 3v2.5h3.24c1.9-1.75 3-4.33 3-7.5z"/><path fill="#34A853" d="M12 22c2.7 0 4.96-.9 6.62-2.43l-3.24-2.5c-.9.6-2.04.95-3.38.95-2.6 0-4.8-1.75-5.58-4.1H3.08v2.57A10 10 0 0 0 12 22z"/><path fill="#FBBC05" d="M6.42 13.92A6 6 0 0 1 6.1 12c0-.67.11-1.32.32-1.92V7.5H3.08A10 10 0 0 0 2 12c0 1.62.39 3.15 1.08 4.5l3.34-2.58z"/><path fill="#EA4335" d="M12 6c1.47 0 2.78.5 3.82 1.5l2.87-2.87C16.96 3.05 14.7 2 12 2a10 10 0 0 0-8.92 5.5l3.34 2.58C7.2 7.75 9.4 6 12 6z"/></svg>
      </Planet>
      <Planet className="sp-b" rings>
        {/* ChatGPT flower */}
        <svg viewBox="0 0 24 24" width="28" height="28" fill="#10A37F">
          <path d="M22.3 9.7a6 6 0 0 0-.5-5A6.1 6.1 0 0 0 15 1.9a6 6 0 0 0-10.2 2.2A6 6 0 0 0 .8 7a6.1 6.1 0 0 0 .7 7.2 6 6 0 0 0 .5 5 6.1 6.1 0 0 0 6.9 2.8 6 6 0 0 0 4.5 2 6.1 6.1 0 0 0 5.8-4.2 6 6 0 0 0 4-2.9 6.1 6.1 0 0 0-.8-7.2zm-9 12.6a4.5 4.5 0 0 1-2.9-1l.1-.1 4.8-2.8a.8.8 0 0 0 .4-.7v-6.8l2 1.2v5.6a4.5 4.5 0 0 1-4.5 4.6zM3.7 18.4a4.5 4.5 0 0 1-.5-3l.1.1 4.8 2.8a.8.8 0 0 0 .8 0l5.9-3.4v2.3L10 20a4.5 4.5 0 0 1-6.2-1.6zM2.4 7.7a4.5 4.5 0 0 1 2.4-2l-.1.2v5.5c0 .3.2.6.4.7l5.9 3.4-2 1.2L4.2 14a4.5 4.5 0 0 1-1.8-6.2zm16.6 3.9L13 8l2-1.2 4.8 2.8a4.5 4.5 0 0 1-.7 8.1V11.9a.8.8 0 0 0-.4-.7zm2-3-.1-.1-4.8-2.8a.8.8 0 0 0-.8 0l-5.9 3.4V7l4.8-2.8a4.5 4.5 0 0 1 6.7 4.6zM10 15.1l-2-1.2V8.7L12.8 6l2 1.2v5.2z"/>
        </svg>
      </Planet>
      <Planet className="sp-c">
        {/* Perplexity-ish glyph */}
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#20B8CD" strokeWidth="1.8" strokeLinecap="round">
          <path d="M12 3v18M4 8l16 8M4 16l16-8"/>
          <circle cx="12" cy="12" r="9" strokeWidth="1.2" opacity="0.5"/>
        </svg>
      </Planet>
    </div>
  );
}

/* ---------- CRM: pipeline nodes (contact → qualified → customer) ---------- */
function CrmPlanets() {
  return (
    <div className="sp-field" aria-hidden="true">
      <Planet className="sp-a">
        {/* Contact / person */}
        <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#2dd4bf" strokeWidth="1.6">
          <circle cx="12" cy="9" r="3.5"/>
          <path d="M5 20c1.2-3.5 4-5.5 7-5.5s5.8 2 7 5.5"/>
        </svg>
      </Planet>
      <Planet className="sp-b" rings>
        {/* Database cylinders */}
        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#2dd4bf" strokeWidth="1.5">
          <ellipse cx="12" cy="5.5" rx="7" ry="2.5"/>
          <path d="M5 5.5v6c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-6"/>
          <path d="M5 11.5v6c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-6"/>
        </svg>
      </Planet>
      <Planet className="sp-c">
        {/* Funnel */}
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#2dd4bf" strokeWidth="1.6" strokeLinejoin="round">
          <path d="M3 4h18l-7 9v7l-4-2v-5z"/>
        </svg>
      </Planet>
    </div>
  );
}

/* ---------- Automation: connected nodes + workflow ---------- */
function AutomationPlanets() {
  return (
    <div className="sp-field" aria-hidden="true">
      <Planet className="sp-a">
        {/* Lightning / trigger */}
        <svg viewBox="0 0 24 24" width="26" height="26" fill="#2dd4bf"><path d="M13 2L4 14h6l-2 8 10-13h-7z"/></svg>
      </Planet>
      <Planet className="sp-b" rings>
        {/* Circular arrows / cycle */}
        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#2dd4bf" strokeWidth="1.8" strokeLinecap="round">
          <path d="M4 12a8 8 0 0 1 14-5.3"/>
          <path d="M18 3v4h-4"/>
          <path d="M20 12a8 8 0 0 1-14 5.3"/>
          <path d="M6 21v-4h4"/>
        </svg>
      </Planet>
      <Planet className="sp-c">
        {/* Node graph */}
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#2dd4bf" strokeWidth="1.5">
          <circle cx="5" cy="6" r="2" fill="#2dd4bf"/>
          <circle cx="19" cy="6" r="2"/>
          <circle cx="12" cy="18" r="2" fill="#2dd4bf"/>
          <path d="M7 7l4 10M17 7l-4 10"/>
        </svg>
      </Planet>
    </div>
  );
}

/* ---------- Content: type, hash, play ---------- */
function ContentPlanets() {
  return (
    <div className="sp-field" aria-hidden="true">
      <Planet className="sp-a">
        {/* Big Aa */}
        <div style={{ fontFamily: 'Georgia, serif', fontSize: 32, color: '#2dd4bf', fontWeight: 600, lineHeight: 1 }}>Aa</div>
      </Planet>
      <Planet className="sp-b" rings>
        {/* Hashtag */}
        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#2dd4bf" strokeWidth="1.8" strokeLinecap="round">
          <path d="M4 9h16M4 15h16M10 3L8 21M16 3l-2 18"/>
        </svg>
      </Planet>
      <Planet className="sp-c">
        {/* Play / video */}
        <svg viewBox="0 0 24 24" width="22" height="22" fill="#2dd4bf"><path d="M8 5v14l11-7z"/></svg>
      </Planet>
    </div>
  );
}

/* ---------- Analytics: chart, sparkline, percent ---------- */
function AnalyticsPlanets() {
  return (
    <div className="sp-field" aria-hidden="true">
      <Planet className="sp-a">
        {/* Bar chart */}
        <svg viewBox="0 0 24 24" width="28" height="28" fill="#2dd4bf">
          <rect x="4" y="13" width="3" height="8" rx="0.5"/>
          <rect x="10" y="9" width="3" height="12" rx="0.5"/>
          <rect x="16" y="5" width="3" height="16" rx="0.5"/>
        </svg>
      </Planet>
      <Planet className="sp-b" rings>
        {/* Donut */}
        <svg viewBox="0 0 24 24" width="28" height="28" fill="none">
          <circle cx="12" cy="12" r="8" stroke="rgba(45,212,191,0.2)" strokeWidth="4"/>
          <circle cx="12" cy="12" r="8" stroke="#2dd4bf" strokeWidth="4"
            strokeDasharray="36 50" strokeDashoffset="12" strokeLinecap="round"
            transform="rotate(-90 12 12)"/>
        </svg>
      </Planet>
      <Planet className="sp-c">
        {/* Sparkline arrow up */}
        <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#2dd4bf" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 17l5-5 4 3 5-7 4 4"/>
          <path d="M21 8v4h-4"/>
        </svg>
      </Planet>
    </div>
  );
}

function ServicePlanets({ slug }) {
  switch (slug) {
    case 'paid-media':   return <PaidMediaPlanets />;
    case 'search':       return <SearchGeoPlanets />;
    case 'crm':          return <CrmPlanets />;
    case 'automation':   return <AutomationPlanets />;
    case 'content':      return <ContentPlanets />;
    case 'analytics':    return <AnalyticsPlanets />;
    default:             return null;
  }
}

Object.assign(window, { ServicePlanets });
