// Integrations — orbit visual. memberx in the middle, dashed ring of
// integration logos slowly rotating around it. Counter-rotation keeps each
// logo upright. Connector lines fade between center and each tile.

function Integrations() {
  // Two rings — a few on the inside, more on the outside.
  const inner = [
    { name: "Zoom",     src: "assets/integrations/zoom.jpg" },
    { name: "Trello",   src: "assets/integrations/trello.png" },
    { name: "Teams",    src: "assets/integrations/teams.png" },
    { name: "Docusign", src: "assets/integrations/docusign.jpg" },
  ];
  const outer = [
    { name: "HubSpot",    src: "assets/integrations/hubspot.jpg" },
    { name: "Salesforce", src: "assets/integrations/salesforce.jpg" },
    { name: "Xero",       src: "assets/integrations/xero.png" },
    { name: "Outlook",    src: "assets/integrations/outlook.jpg" },
    { name: "Mailchimp",  src: "assets/integrations/mailchimp.jpg" },
    { name: "Humanitix",  src: "assets/integrations/humanitix.png" },
    { name: "Excel",      src: "assets/integrations/excel.jpg" },
    { name: "Airtable",   src: "assets/integrations/airtable.png" },
  ];
  // Top of ring sits at -90deg. Outer ring starts top; inner offset for visual balance.
  const ringFor = (items, radius, startDeg, sizeVar) => {
    const step = 360 / items.length;
    return items.map((l, i) => {
      const angle = startDeg + step * i;
      return (
        <div
          key={l.name}
          className="mx-orbit-slot"
          style={{
            transform:
              `translate(-50%, -50%) ` +
              `translate(` +
                `calc(cos(${angle}deg) * ${radius}), ` +
                `calc(sin(${angle}deg) * ${radius})` +
              `)`,
          }}
        >
          <div className="mx-orbit-tile" style={{"--orbit-tile-size": sizeVar}} title={l.name}>
            <img src={l.src} alt={l.name} loading="lazy"/>
          </div>
        </div>
      );
    });
  };
  const spokesFor = (items, R, startDeg) => {
    const step = 360 / items.length;
    return items.map((_, i) => {
      const a = (startDeg + step * i) * Math.PI / 180;
      return (
        <line key={i} x1="0" y1="0"
              x2={Math.cos(a) * R} y2={Math.sin(a) * R}
              stroke="currentColor" strokeWidth="0.3"
              strokeDasharray="1.5 1.5" strokeLinecap="round"/>
      );
    });
  };

  return (
    <section className="mx-section mx-integrations-section" id="integrations">
      <div className="mx-container mx-integrations-grid">
        <div className="mx-integrations-text" data-reveal>
          <div className="mx-eyebrow-pill">
            <span>Integrations</span>
          </div>
          <h2 className="mx-integrations-title">
            The problem isn't your tools.<br/>
            <span className="mx-text-muted">It's the gaps between them.</span>
          </h2>
          <p className="mx-integrations-sub">
            Your CRM, your inbox, your accounting, your event platform — each
            one holds a piece of the picture. memberx is the central hub that
            connects them, so member data flows in one place and you can act
            on what it tells you.
          </p>
          <ul className="mx-integrations-bullets">
            <li><Check size={15}/> Two-way sync — no exports, no manual stitching</li>
            <li><Check size={15}/> Member-shaped data: contacts, billing, attendance, comms in one record</li>
            <li><Check size={15}/> New integrations on request — tell us what you use</li>
          </ul>
        </div>

        <div className="mx-orbit-wrap" data-reveal="lg" style={{"--reveal-delay": "120ms"}}>
          <div className="mx-orbit" aria-hidden="true">
            <div className="mx-orbit-wash"></div>
            <div className="mx-orbit-ring mx-orbit-ring--outer"></div>
            <div className="mx-orbit-ring mx-orbit-ring--middle"></div>
            <div className="mx-orbit-ring mx-orbit-ring--inner"></div>

            {/* Spokes — every integration gets its own dashed line from the
                center. Inner tiles sit between outer angles so outer spokes
                don't pass through them (and don't appear to stop at the inner ring). */}
            <svg className="mx-orbit-spokes" viewBox="-100 -100 200 200" preserveAspectRatio="none">
              {spokesFor(inner, 24, -67.5)}
              {spokesFor(outer, 44, -90)}
            </svg>

            <div className="mx-orbit-slots">
              {ringFor(inner, "var(--orbit-radius-inner)", -67.5, "var(--orbit-tile-size-inner)")}
              {ringFor(outer, "var(--orbit-radius-outer)", -90, "var(--orbit-tile-size-outer)")}
            </div>

            <div className="mx-orbit-center">
              <div className="mx-orbit-center-mark">
                <svg viewBox="0 0 64 64" role="img" aria-label="memberx">
                  <rect width="64" height="64" rx="14" fill="#0B1A4D"></rect>
                  <g stroke="#FFFFFF" strokeWidth="6" strokeLinecap="round">
                    <line x1="20" y1="20" x2="44" y2="44"></line>
                    <line x1="44" y1="20" x2="20" y2="44"></line>
                  </g>
                  <circle cx="46" cy="18" r="5" fill="#EC2D80"></circle>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Integrations = Integrations;