/* EOMA landing v3.1 · §6.5 Connect once. EOMA ships forever.
   The execution-narrative anchor band. Left = pitch + bullet list of
   what EOMA does autonomously once integrations are connected. Right =
   visible integration logo grid grouped by category (CMS / dev /
   ecommerce / analytics / social) so the buyer immediately sees the
   surface area.

   This is the band that converts "interesting visibility tool" into
   "this thing actually does the work for me." It sits between the
   Kanban band (§5 — "here are the actions") and the dashboard inside-
   the-product reveal (§6 — "here's what you log in to"). */

const INTEGRATIONS = [
  // CMS / publishing — where content + schema lands
  {
    group: "Publishing",
    brand: "WordPress",
    svg: "/landing/design-system/assets/brand-icons/publishing/wordpress.svg",
  },
  {
    group: "Publishing",
    brand: "Webflow",
    svg: "/landing/design-system/assets/brand-icons/publishing/webflow.svg",
  },
  {
    group: "Publishing",
    brand: "Medium",
    svg: "/landing/design-system/assets/brand-icons/publishing/medium.svg",
  },
  {
    group: "Publishing",
    brand: "Postiz",
    svg: "/landing/design-system/assets/brand-icons/publishing/postiz.svg",
  },
  // Dev tools — where code-shaped fixes (llms.txt, schema, sitemap) ship
  {
    group: "Dev tools",
    brand: "GitHub",
    svg: "/landing/design-system/assets/brand-icons/dev-tools/github.svg",
  },
  // E-commerce
  {
    group: "E-commerce",
    brand: "Shopify",
    svg: "/landing/design-system/assets/brand-icons/ecommerce/shopify.svg",
  },
  // Analytics
  {
    group: "Analytics",
    brand: "Google Analytics",
    svg: "/landing/design-system/assets/brand-icons/analytics/google-analytics.svg",
  },
  {
    group: "Analytics",
    brand: "Search Console",
    svg: "/landing/design-system/assets/brand-icons/analytics/google-search-console.svg",
  },
  // Social — where the social moves that lift citations go live
  { group: "Social", brand: "X", svg: "/landing/design-system/assets/brand-icons/social/x.svg" },
  {
    group: "Social",
    brand: "LinkedIn",
    svg: "/landing/design-system/assets/brand-icons/social/linkedin.svg",
  },
  {
    group: "Social",
    brand: "Instagram",
    svg: "/landing/design-system/assets/brand-icons/social/instagram.svg",
  },
  {
    group: "Social",
    brand: "TikTok",
    svg: "/landing/design-system/assets/brand-icons/social/tiktok.svg",
  },
  {
    group: "Social",
    brand: "YouTube",
    svg: "/landing/design-system/assets/brand-icons/social/youtube.svg",
  },
  {
    group: "Social",
    brand: "Reddit",
    svg: "/landing/design-system/assets/brand-icons/social/reddit.svg",
  },
  {
    group: "Social",
    brand: "Threads",
    svg: "/landing/design-system/assets/brand-icons/social/threads.svg",
  },
  {
    group: "Social",
    brand: "Facebook",
    svg: "/landing/design-system/assets/brand-icons/social/facebook.svg",
  },
];

function IntegrationsBand() {
  return (
    <section id="connect" className="integrations-section">
      <div className="integrations-wrap">
        <div className="integrations-head">
          <span className="eyebrow">
            <span className="dot dot-mint" />
            <span>Connect once. EOMA ships forever.</span>
          </span>
          <h2 className="t-display-lg">
            One approval per week.
            <br />
            <span className="accent">Every move ships itself.</span>
          </h2>
          <p className="integrations-sub">
            Most AI-visibility tools end with a checklist of things you need to do. EOMA connects to
            your website, your CMS, your social — and our agents take it from there. You approve. We
            publish. Your AI presence moves.
          </p>
        </div>

        <div className="integrations-grid">
          {/* Left — what EOMA does once connected */}
          <div className="integrations-pitch">
            <h3 className="integrations-h3">What happens after you connect</h3>
            <ul className="integrations-list">
              <li>
                <span className="ix" aria-hidden="true">
                  <window.Icon name="pen" size={18} />
                </span>
                <div>
                  <strong>Content shipped to your CMS.</strong>
                  <span>
                    FAQs, comparison pages, schema markup, llms.txt — drafted by our agents and
                    published straight to WordPress, Webflow, Shopify or your custom stack. No
                    copy-paste.
                  </span>
                </div>
              </li>
              <li>
                <span className="ix" aria-hidden="true">
                  <window.Icon name="upload" size={18} />
                </span>
                <div>
                  <strong>Social moves posted on schedule.</strong>
                  <span>
                    Threads, replies, long-form posts and stories — written in your brand voice and
                    posted across X, LinkedIn, Instagram, TikTok, YouTube, Reddit and Threads.
                  </span>
                </div>
              </li>
              <li>
                <span className="ix" aria-hidden="true">
                  <window.Icon name="chart" size={18} />
                </span>
                <div>
                  <strong>Closed-loop measurement.</strong>
                  <span>
                    GA4 and Search Console feed back into every agent decision so the next week's
                    action plan compounds on what just moved.
                  </span>
                </div>
              </li>
              <li>
                <span className="ix" aria-hidden="true">
                  <window.Icon name="check" size={18} />
                </span>
                <div>
                  <strong>You stay in control.</strong>
                  <span>
                    Every action has a one-click approval. Hand-off everything, or pick what stays
                    on your own self-serve list. Cancel anytime — no integration handcuffs.
                  </span>
                </div>
              </li>
            </ul>
          </div>

          {/* Right — visible integration grid */}
          <div className="integrations-logos">
            <div className="integrations-logos-head">
              <span className="integrations-count tabular">{INTEGRATIONS.length}+</span>
              <span>integrations available now</span>
            </div>
            <div className="integrations-logo-grid">
              {INTEGRATIONS.map((it) => (
                <span key={it.brand} className="il-tile" title={it.brand}>
                  <img
                    src={it.svg}
                    alt={it.brand}
                    width={22}
                    height={22}
                    loading="lazy"
                    decoding="async"
                  />
                  <span className="il-name">{it.brand}</span>
                </span>
              ))}
            </div>
            <p className="integrations-foot">
              Plus custom: if your stack is something else, we onboard you in 24 hours.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IntegrationsBand });