// Integrations — IDX/MLS feeds, CRMs, pricing engines, social platforms

const INTEGRATION_GROUPS = [
  {
    label: "Listing data",
    note: "Pull any listing in seconds",
    items: [
      { name: "iHomefinder", tag: "IDX" },
      { name: "RESO Web API", tag: "MLS" },
      { name: "Bridge MLS", tag: "MLS" },
      { name: "Zillow Listing", tag: "FEED" },
      { name: "Realtor.com", tag: "FEED" },
    ],
  },
  {
    label: "Pricing & products",
    note: "Live rates from your stack",
    items: [
      { name: "Optimal Blue", tag: "PPE" },
      { name: "Polly", tag: "PPE" },
      { name: "Mortech", tag: "PPE" },
      { name: "LoanSifter", tag: "PPE" },
    ],
  },
  {
    label: "CRM & contacts",
    note: "Trigger flyers from milestones",
    items: [
      { name: "Salesforce", tag: "CRM" },
      { name: "HubSpot", tag: "CRM" },
      { name: "Follow Up Boss", tag: "CRM" },
      { name: "BoomTown", tag: "CRM" },
      { name: "Top Producer", tag: "CRM" },
    ],
  },
  {
    label: "Distribution",
    note: "Send anywhere your buyer is",
    items: [
      { name: "Instagram", tag: "SOCIAL" },
      { name: "Facebook", tag: "SOCIAL" },
      { name: "LinkedIn", tag: "SOCIAL" },
      { name: "SMS / Twilio", tag: "MSG" },
      { name: "Gmail / Outlook", tag: "EMAIL" },
      { name: "Print-on-demand", tag: "PRINT" },
    ],
  },
];

function IntegrationsSection({ accent }) {
  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";
  return (
    <section id="integrations" className="int-section">
      <div className="int-head">
        <div className="int-eyebrow mono">PLUGS INTO YOUR STACK</div>
        <h2 className="int-h2">
          Already connected to <span style={{ color: accentColor }}>where your data lives.</span>
        </h2>
        <p className="int-sub">
          IDX feeds, MLS APIs, your pricing engine, your CRM. Lola pulls the listing,
          today's rate, and the buyer's pre-approval — you never copy-paste a thing.
        </p>
      </div>

      <div className="int-grid">
        {INTEGRATION_GROUPS.map((g) => (
          <div className="int-group" key={g.label}>
            <div className="int-group-head">
              <h3 className="int-group-label">{g.label}</h3>
              <div className="mono int-group-note">{g.note}</div>
            </div>
            <ul className="int-list">
              {g.items.map((it) => (
                <li className="int-item" key={it.name}>
                  <span className="int-dot" style={{ background: accentColor }} />
                  <span className="int-name">{it.name}</span>
                  <span className="mono int-tag">{it.tag}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div className="int-foot mono">
        + REST &amp; ZAPIER FOR ANYTHING ELSE · SOC 2 · BANK-GRADE ENCRYPTION
      </div>
    </section>
  );
}

window.IntegrationsSection = IntegrationsSection;