// Migrate without the pain (with a before/after comparison), then the
// integrations section with the logo orbit from the original site.

function Migrate() {
  const rows = [
    ["Members in one system, invoices in another, emails in a third", "One record per member, with invoices and emails attached"],
    ["Spreadsheets to work out who owes you", "Who owes us, on the dashboard"],
    ["Finding out at renewal that a member went quiet", "Members who have gone quiet, flagged early"],
    ["Guessing who to call this week", "A ranked list of who needs attention"],
    ["Waiting on someone to run a report", "Ask MemberX in plain English"],
    ["Changing systems to fix it", "Keep the systems you already have"],
  ];
  return (
    <section className="mx-section mx-section-soft" id="migrate">
      <div className="mx-container">
        <div data-reveal>
          <SectionHead
            eye="Migrate without the pain"
            title="Keep your systems. Lose the gaps."
            sub="Upload your member list, connect Xero and Mailchimp, and we check the results with you. No new membership system to learn."
          />
        </div>
        <div className="mx-compare" data-reveal="lg">
          <div className="mx-compare-col mx-compare-col--before">
            <div className="mx-compare-head">What you do today</div>
            <ul>
              {rows.map(([before]) => <li key={before}><Close size={16}/> {before}</li>)}
            </ul>
          </div>
          <div className="mx-compare-col mx-compare-col--after">
            <div className="mx-compare-head">
              <img src="/assets/logo-horizontal-dark.svg" alt="With MemberX" />
            </div>
            <ul>
              {rows.map(([b, after]) => <li key={after}><Check size={16}/> {after}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

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 accounts and your email platform each hold a piece of the
            picture. MemberX brings them together around each member, so you can act
            on what they tell you.
          </p>
          <ul className="mx-integrations-bullets">
            <li><Check size={15}/> Xero and Mailchimp refresh every hour</li>
            <li><Check size={15}/> Every invoice and email linked to the right member</li>
            <li><Check size={15}/> A global connector that links to any other system 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.Migrate = Migrate;
window.Integrations = Integrations;