function Page() {
  const categories = ["Measurement & MMPs", "E-Commerce", "CDPs & Data", "Verification"];
  
  const integrations = [
    { 
      name: "AppsFlyer", cat: "Measurement & MMPs", logo: "appsflyer.png", desc: "Sync mobile app installs and post-install events directly into Auctera's DSP.",
      longDesc: "AppsFlyer is the global attribution leader. By integrating Auctera with AppsFlyer, you enable deterministic attribution for every mobile ad impression and click. This creates a closed-loop measurement system that automatically syncs post-install conversion events back to our DSP for real-time bid optimization.",
      features: ["Real-time postback syncing", "Deterministic mobile attribution", "Automated ROAS bid optimization"]
    },
    { 
      name: "Adjust", cat: "Measurement & MMPs", logo: "adjust.png", desc: "Send deterministic attribution data to optimize ROAS across channels.",
      longDesc: "Adjust empowers mobile marketers with analytics and fraud prevention. The Auctera + Adjust integration allows you to instantly map in-app events (like purchases or registrations) directly to your Auctera programmatic campaigns, ensuring your spend is always allocated toward the highest LTV cohorts.",
      features: ["In-app event mapping", "Cohort LTV tracking", "Cross-channel deduplication"]
    },
    { 
      name: "Shopify", cat: "E-Commerce", logo: "shopify.png", desc: "Import product feeds dynamically for retargeting and performance ads.",
      longDesc: "Shopify powers millions of e-commerce storefronts. Our native Shopify integration allows you to sync your entire product catalog directly into Auctera's Dynamic Creative Engine. When a user abandons a cart, Auctera instantly builds and serves a personalized retargeting ad featuring the exact product they left behind.",
      features: ["Live inventory sync", "Dynamic retargeting creative", "Purchase event attribution"]
    },
    { 
      name: "WooCommerce", cat: "E-Commerce", logo: "woo.png", desc: "Connect your store to track purchases and build custom audiences.",
      longDesc: "Our WooCommerce plugin securely connects your open-source storefront to the Auctera pixel network without requiring manual code injection. Automatically generate custom 'lookalike' audiences based on your highest-spending customer segments.",
      features: ["One-click pixel installation", "Lookalike audience generation", "First-party data syncing"]
    },
    { 
      name: "Segment", cat: "CDPs & Data", logo: "segment.png", desc: "Stream customer events to Auctera without adding new tracking tags.",
      longDesc: "Segment by Twilio is the leading Customer Data Platform. Instead of adding another tracking script to your site, simply flip the switch in your Segment dashboard to start securely streaming identity and event data to Auctera. Use this data to build highly targeted programmatic segments.",
      features: ["Server-side event tracking", "Zero-code implementation", "Cross-device identity resolution"]
    },
    { 
      name: "mParticle", cat: "CDPs & Data", logo: "mparticle.png", desc: "Unify your audience data to orchestrate omnichannel campaigns.",
      longDesc: "mParticle helps brands unify their data structure. The Auctera integration ingests mParticle audience cohorts in real-time. If a user enters a 'Churn Risk' cohort in mParticle, Auctera can immediately trigger a retention-focused display campaign across the open web.",
      features: ["Real-time audience routing", "Retention campaign triggering", "Privacy-safe data transfer"]
    },
    { 
      name: "DoubleVerify", cat: "Verification", logo: "dv.png", desc: "Layer third-party brand safety and IVT filtering on top of Auctera.",
      longDesc: "DoubleVerify is the industry standard for media authentication. While Auctera has robust internal fraud prevention, this integration allows enterprise brands to layer DoubleVerify's pre-bid avoidance segments and post-bid measurement directly into their Auctera campaigns for independent verification.",
      features: ["Pre-bid IVT avoidance", "Brand safety content categories", "Independent viewability measurement"]
    },
    { 
      name: "Integral Ad Science", cat: "Verification", logo: "ias.png", desc: "Ensure viewability and compliance across all programmatic buys.",
      longDesc: "Integral Ad Science (IAS) ensures your ads are seen by real people in safe environments. Seamlessly apply IAS Quality Sync targeting to your Auctera DSP campaigns to automatically filter out high-risk inventory and guarantee minimum viewability thresholds.",
      features: ["Quality Sync targeting", "Contextual avoidance", "MFA (Made for Advertising) filtering"]
    }
  ];

  const [activeCat, setActiveCat] = React.useState("All");

  const filtered = activeCat === "All" ? integrations : integrations.filter(i => i.cat === activeCat);

  const [selected, setSelected] = React.useState(null);

  useReveal();

  return (
    <>
      <Header basePath="./"/>
      
      <section className="page-hero" style={{paddingBottom: 64}}>
        <div className="container">
          <div className="crumb reveal" style={{marginBottom: 24}}>
            <a href="../index">Auctera</a>
            <span>›</span>
            <span>Integrations</span>
          </div>
          <div className="reveal" style={{maxWidth: "800px"}}>
            <h1 className="display-2" style={{marginBottom: 24}}>
              Connect your <span className="h-italic">stack.</span>
            </h1>
            <p className="lead">Auctera integrates natively with your existing measurement, data, and commerce platforms so you can start optimizing performance immediately without a massive engineering lift.</p>
          </div>
        </div>
      </section>

      <section className="section" style={{background: "var(--paper-2)", minHeight: "60vh"}}>
        <div className="container">
          
          {/* Filters */}
          <div className="reveal" style={{display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 48}}>
            <button 
              onClick={() => setActiveCat("All")}
              className={`btn ${activeCat === "All" ? "" : "btn-ghost"}`}
              style={{borderRadius: 100, padding: "8px 20px", fontSize: 14}}
            >
              All Integrations
            </button>
            {categories.map(cat => (
              <button 
                key={cat}
                onClick={() => setActiveCat(cat)}
                className={`btn ${activeCat === cat ? "" : "btn-ghost"}`}
                style={{borderRadius: 100, padding: "8px 20px", fontSize: 14}}
              >
                {cat}
              </button>
            ))}
          </div>

          {/* Grid */}
          <div className="grid grid-3 reveal-stagger" style={{gap: 24}}>
            {filtered.map((item, i) => (
              <div key={i} style={{
                display: "block",
                background: "var(--paper)",
                padding: 32,
                borderRadius: 16,
                border: "1px solid var(--line)",
                cursor: "pointer",
                color: "var(--ink)",
                transition: "all 0.2s ease"
              }}
              onClick={() => setSelected(item)}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--ochre)"; e.currentTarget.style.transform = "translateY(-4px)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "none"; }}
              >
                <div style={{fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ochre)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 16}}>{item.cat}</div>
                <h3 style={{fontFamily: "var(--font-display)", fontSize: 24, margin: "0 0 12px 0"}}>{item.name}</h3>
                <p style={{margin: 0, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5}}>{item.desc}</p>
                <div style={{marginTop: 24, color: "var(--ochre)", fontSize: 14, fontWeight: 500, display: "flex", alignItems: "center", gap: 8}}>
                  View details <span>→</span>
                </div>
              </div>
            ))}
          </div>

        </div>
      </section>

      {/* Integration Detail Modal */}
      {selected && (
        <div style={{
          position: "fixed", top: 0, left: 0, right: 0, bottom: 0, 
          background: "rgba(10,10,10,0.4)", backdropFilter: "blur(4px)",
          display: "flex", alignItems: "center", justifyContent: "center", zIndex: 9999, padding: 20
        }} onClick={() => setSelected(null)}>
          <div style={{
            background: "var(--paper)", width: "100%", maxWidth: 600, borderRadius: 24, 
            padding: 40, position: "relative", border: "1px solid var(--line)"
          }} onClick={e => e.stopPropagation()}>
            <button 
              onClick={() => setSelected(null)}
              style={{
                position: "absolute", top: 24, right: 24, background: "none", border: "none", 
                fontSize: 24, cursor: "pointer", color: "var(--muted)", lineHeight: 1
              }}
            >×</button>
            
            <div style={{fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ochre)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 16}}>{selected.cat}</div>
            <h2 className="display-4" style={{margin: "0 0 24px 0"}}>{selected.name} Integration</h2>
            
            <p style={{fontSize: 16, lineHeight: 1.6, color: "var(--ink-2)", marginBottom: 32}}>
              {selected.longDesc}
            </p>
            
            <h4 style={{fontSize: 16, margin: "0 0 16px 0", fontWeight: 600}}>Key Capabilities</h4>
            <ul style={{paddingLeft: 20, margin: "0 0 32px 0", color: "var(--ink-2)", display: "grid", gap: 12}}>
              {selected.features.map((feat, i) => (
                <li key={i}>{feat}</li>
              ))}
            </ul>
            
            <div style={{display: "flex", gap: 16, borderTop: "1px solid var(--line)", paddingTop: 32}}>
              <a href="contact" className="btn btn-ochre" style={{flex: 1, textAlign: "center"}}>Request Demo</a>
              <a href="#" onClick={(e) => { e.preventDefault(); setSelected(null); }} className="btn btn-ghost">Close</a>
            </div>
          </div>
        </div>
      )}

      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);