// Integrations — three variants

const { useState: useIntState, useEffect: useIntEffect } = React;

const FEATURED = [
  { id: "google",     type: "svg", text: "Google Workspace" },
  { id: "microsoft",  type: "svg", text: "Microsoft 365" },
  { id: "slack",      type: "svg", text: "Slack" },
  { id: "servicetitan", type: "word", text: <>Service<em>Titan</em></> },
  { id: "yardi",      type: "word", text: <><em>Yardi</em></> },
  { id: "quickbooks", type: "svg", text: "QuickBooks" },
  { id: "dat",        type: "word", text: <>DAT</> },
  { id: "procore",    type: "svg", text: "Procore" },
  { id: "notion",     type: "svg", text: "Notion" },
];

const ALL_LOGOS = [
  { n: "Google Workspace", k: "google",    hl: true },
  { n: "Microsoft 365",    k: "microsoft", hl: true },
  { n: "Slack",            k: "slack",     hl: true },
  { n: "ServiceTitan",     k: null,        hl: true },
  { n: "Yardi",            k: null,        hl: true },
  { n: "QuickBooks",       k: "quickbooks",hl: true },
  { n: "DAT",              k: null,        hl: true },
  { n: "Procore",          k: "procore",   hl: true },
  { n: "Notion",           k: "notion",    hl: true },
  { n: "GitHub",           k: "github" },
  { n: "Zoom",             k: "zoom" },
  { n: "Stripe",           k: "stripe" },
  { n: "Zapier",           k: "zapier" },
  { n: "HubSpot",          k: "hubspot" },
  { n: "Twilio",           k: "twilio" },
  { n: "AppFolio" }, { n: "McLeod" }, { n: "Turvo" },
  { n: "RealPage" }, { n: "Buildium" }, { n: "Rent Manager" },
  { n: "Housecall Pro" }, { n: "Jobber" }, { n: "FieldEdge" },
  { n: "Salesforce" }, { n: "Intercom" }, { n: "Zendesk" },
];

function LogoGlyph({ k, fallback }) {
  const C = k && Logo[k];
  if (C) return <C />;
  return <span>{fallback}</span>;
}

function FeaturedGrid() {
  return (
    <>
      <div className="logos-featured">
        {FEATURED.map(item => {
          const C = Logo[item.id];
          return (
            <div key={item.id} className="logo-tile">
              {item.type === "svg" && C ? <C /> : <Wordmark text={item.text} />}
            </div>
          );
        })}
      </div>
      <div className="logo-more">
        <div className="logo-more-lbl">
          <em>+1,000</em> more via MCP, native, and direct API
        </div>
        <div className="logo-more-right">Most deployments · live in 2 wks</div>
      </div>
    </>
  );
}

function Marquee() {
  // Duplicate for seamless loop
  const items = [...ALL_LOGOS, ...ALL_LOGOS];
  return (
    <>
      <div className="logo-marquee">
        <div className="logo-marquee-track">
          {items.map((l, i) => {
            const LC = l.k && Logo[l.k];
            return (
              <span key={i} className={`logo-marquee-item${l.hl ? " hl" : ""}`}>
                {LC ? <LC /> : null}
                {l.n}
              </span>
            );
          })}
        </div>
      </div>
      <div className="logo-more" style={{marginTop:20}}>
        <div className="logo-more-lbl"><em>+1,000</em> more via MCP, native, and direct API</div>
        <div className="logo-more-right">9 highlighted · all supported</div>
      </div>
    </>
  );
}

function Stack() {
  const layers = [
    { n: "Office & knowledge", tiles: [
      { k: "google", n: "Google Workspace" }, { k: "microsoft", n: "Microsoft 365" },
      { k: "slack", n: "Slack" }, { k: "notion", n: "Notion" }, { k: "github", n: "GitHub" },
    ]},
    { n: "Vertical systems", tiles: [
      { n: "ServiceTitan" }, { n: "Yardi" }, { n: "DAT" },
      { k: "procore", n: "Procore" }, { n: "AppFolio" }, { n: "McLeod" },
    ]},
    { n: "Finance & ops", tiles: [
      { k: "quickbooks", n: "QuickBooks" }, { k: "stripe", n: "Stripe" },
      { k: "zapier", n: "Zapier" }, { k: "hubspot", n: "HubSpot" }, { k: "twilio", n: "Twilio" },
    ]},
  ];
  return (
    <div className="logo-stack">
      {layers.map((l, i) => (
        <React.Fragment key={l.n}>
          {i > 0 && <div className="stack-divider" />}
          <div className="stack-layer">
            <div className="stack-lbl"><span className="n">{l.n}</span>§ 04·{["A","B","C"][i]}</div>
            <div className="stack-tiles">
              {l.tiles.map(t => {
                const LC = t.k && Logo[t.k];
                return (
                  <span key={t.n} className="stack-tile">
                    {LC ? <LC /> : null}
                    {t.n}
                  </span>
                );
              })}
            </div>
          </div>
        </React.Fragment>
      ))}
      <div className="stack-divider" />
      <div className="stack-layer">
        <div className="stack-lbl"><span className="n">… and 1,000+ more</span>§ 04·∞</div>
        <div className="stack-tiles">
          <span className="stack-tile" style={{borderStyle:"dashed"}}>MCP</span>
          <span className="stack-tile" style={{borderStyle:"dashed"}}>Native integration</span>
          <span className="stack-tile" style={{borderStyle:"dashed"}}>Direct API</span>
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// FEATURES variant — 3×2 grid of feature cards with abstract visuals
// ============================================================================

// Higher-fidelity brand marks for the Integrations feature card.
// Each mark is rendered on a white tile with a subtle border — the color
// comes from the mark itself, not the tile background. This reads much
// closer to real brand fidelity than colored chips with initials.

const BrandMarks = {
  slack: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path fill="#E01E5A" d="M6.527 14.74a2.055 2.055 0 0 1-2.052 2.053A2.055 2.055 0 0 1 2.423 14.74c0-1.128.924-2.052 2.052-2.052h2.052v2.052zm1.035 0c0-1.128.925-2.052 2.053-2.052s2.052.924 2.052 2.052v5.14a2.055 2.055 0 0 1-2.052 2.052 2.055 2.055 0 0 1-2.053-2.052v-5.14z"/>
      <path fill="#36C5F0" d="M9.615 6.475a2.055 2.055 0 0 1-2.053-2.052c0-1.128.925-2.053 2.053-2.053s2.052.925 2.052 2.053v2.052H9.615zm0 1.05c1.128 0 2.052.925 2.052 2.053s-.924 2.053-2.052 2.053h-5.14A2.055 2.055 0 0 1 2.423 9.578c0-1.128.924-2.053 2.052-2.053h5.14z"/>
      <path fill="#2EB67D" d="M17.473 9.578c0-1.128.925-2.053 2.053-2.053s2.052.925 2.052 2.053-.924 2.053-2.052 2.053h-2.053V9.578zm-1.035 0a2.055 2.055 0 0 1-2.053 2.053 2.055 2.055 0 0 1-2.052-2.053v-5.14c0-1.128.924-2.052 2.052-2.052s2.053.924 2.053 2.052v5.14z"/>
      <path fill="#ECB22E" d="M14.385 17.525a2.055 2.055 0 0 1 2.053 2.053 2.055 2.055 0 0 1-2.053 2.052 2.055 2.055 0 0 1-2.052-2.052v-2.053h2.052zm0-1.035A2.055 2.055 0 0 1 12.333 14.438c0-1.128.924-2.052 2.052-2.052h5.141c1.128 0 2.052.924 2.052 2.052s-.924 2.053-2.052 2.053h-5.14z"/>
    </svg>
  ),
  teams: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path fill="#4B53BC" d="M20.625 8.127a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5zm-.187 1.125h-4.5a.75.75 0 0 0-.75.75v6.75a3 3 0 0 0 3 3 3.75 3.75 0 0 0 3.75-3.75v-5.25a1.5 1.5 0 0 0-1.5-1.5z"/>
      <path fill="#6264A7" d="M14.25 6.75a3.75 3.75 0 1 0-7.5 0 3.75 3.75 0 0 0 7.5 0zm-.375 2.625h-6.75a1.5 1.5 0 0 0-1.5 1.5v7.5a4.5 4.5 0 1 0 9 0v-7.5a1.5 1.5 0 0 0-.75-1.5z"/>
      <path fill="#fff" fillOpacity="0.9" d="M12.75 10.5H7.125v1.125H9v6h1.875v-6h1.875z"/>
    </svg>
  ),
  google: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path fill="#4285F4" d="M21.8 12.23c0-.68-.06-1.34-.18-1.97H12v3.73h5.5a4.72 4.72 0 0 1-2.04 3.09v2.57h3.3c1.94-1.79 3.04-4.42 3.04-7.42z"/>
      <path fill="#34A853" d="M12 22c2.76 0 5.08-.91 6.77-2.47l-3.3-2.57c-.92.62-2.1.99-3.47.99-2.67 0-4.93-1.8-5.74-4.22H2.85v2.65A10 10 0 0 0 12 22z"/>
      <path fill="#FBBC05" d="M6.26 13.73a5.99 5.99 0 0 1 0-3.82V7.27H2.85a10 10 0 0 0 0 9.1l3.41-2.64z"/>
      <path fill="#EA4335" d="M12 5.98c1.5 0 2.85.52 3.91 1.53l2.93-2.93C17.08 2.99 14.76 2 12 2A10 10 0 0 0 2.85 7.27l3.41 2.65C7.07 7.8 9.33 5.98 12 5.98z"/>
    </svg>
  ),
  office365: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <defs>
        <linearGradient id="o365a" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#D83B01"/>
          <stop offset="1" stopColor="#B7200E"/>
        </linearGradient>
      </defs>
      <path fill="url(#o365a)" d="M14.5 2.2 4 5.4v13.3l4.2 1.6v-14L20 4.5 14.5 2.2z"/>
      <path fill="#EB6C1C" d="M20 4.5v14.95l-5.5 2.35-6.3-2.5 11.8-2.8V7.8l-3.5 1.05v6.9l-3-.75V8.6L20 4.5z"/>
    </svg>
  ),
  hubspot: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="#FF7A59">
      <path d="M18.164 7.93V5.084a2.198 2.198 0 0 0 1.267-1.978v-.067A2.2 2.2 0 0 0 17.238.845h-.067a2.2 2.2 0 0 0-2.193 2.194v.067a2.196 2.196 0 0 0 1.252 1.973l.013.005v2.852a6.22 6.22 0 0 0-2.969 1.31L5.656 3.212a2.46 2.46 0 1 0-2.25 1.52c.496 0 .962-.15 1.35-.41l-.009.006 7.485 5.83A6.241 6.241 0 0 0 12 17.892l2.357 2.358a2.037 2.037 0 1 0 1.435-1.44l-2.363-2.358a6.239 6.239 0 0 0 4.735-6.06 6.195 6.195 0 0 0-1.3-3.808l.014.015zM12 14.19a3.209 3.209 0 1 1 0-6.417 3.209 3.209 0 0 1 0 6.417z"/>
    </svg>
  ),
  salesforce: () => (
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <path fill="#00A1E0" d="M9.2 7.3a3.7 3.7 0 0 1 5.89-.27 4.57 4.57 0 0 1 1.86-.39 4.7 4.7 0 0 1 4.66 4.72 4.7 4.7 0 0 1-.95 2.84 3.65 3.65 0 0 1-3.15 5.45 3.7 3.7 0 0 1-1.6-.36 4 4 0 0 1-7.5-.18A3.4 3.4 0 0 1 6.7 19.4a3.43 3.43 0 0 1-1.6-6.5 3.94 3.94 0 0 1 4.1-5.6z"/>
    </svg>
  ),
  yardi: () => (
    // Yardi wordmark — serif italic.
    <svg viewBox="0 0 56 24" width="38" height="16" aria-hidden="true">
      <text x="2" y="18" fontFamily="Georgia, serif" fontSize="17" fontWeight="700" fontStyle="italic" fill="#1F3A6E" letterSpacing="-0.3">Yardi</text>
    </svg>
  ),
  appfolio: () => (
    // AppFolio — stylized 'af' inside a rounded square.
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <rect x="2" y="2" width="20" height="20" rx="4" fill="#1A56DB"/>
      <text x="12" y="16.5" textAnchor="middle" fontFamily="Inter, system-ui" fontSize="11" fontWeight="800" fill="#fff">af</text>
    </svg>
  ),
  servicetitan: () => (
    // ServiceTitan — compact stacked 'ST' monogram badge (red).
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <rect x="1" y="1" width="22" height="22" rx="4" fill="#E31B23" />
      <text x="12" y="16.5" textAnchor="middle" fontFamily="Inter, system-ui" fontSize="11" fontWeight="800" fill="#fff" letterSpacing="-0.2">ST</text>
    </svg>
  ),
  dat: () => (
    // DAT Freight — compact red badge wordmark.
    <svg viewBox="0 0 36 20" width="30" height="16" aria-hidden="true">
      <rect x="0" y="0" width="36" height="20" rx="3" fill="#D9262E"/>
      <text x="18" y="14.5" textAnchor="middle" fontFamily="Inter, system-ui" fontSize="11" fontWeight="800" fill="#fff" letterSpacing="1">DAT</text>
    </svg>
  ),
  quickbooks: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <circle cx="12" cy="12" r="10" fill="#2CA01C"/>
      <path fill="#fff" d="M7 7.5h1.5v6.75a2.25 2.25 0 0 1-2.25 2.25H6V10.5A3 3 0 0 1 7 7.5zm10 0v6a3 3 0 0 1-1 2.5h-.5V9.75a2.25 2.25 0 0 0-2.25-2.25H12V7.5h5zM10 7.5h.5a2.25 2.25 0 0 1 2.25 2.25v4.5a2.25 2.25 0 0 1-2.25 2.25H10V7.5z"/>
    </svg>
  ),
  notion: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path fill="#000" d="M4.46 4.21l13.21-.79c.28 0 .05-.28-.05-.33l-2-1.48c-.42-.33-.98-.7-2.05-.61L.9 2.3c-.47.05-.56.28-.38.47l4.94 1.45-1 .99zm.79 3.08v13.9c0 .75.37 1.03 1.21.98l14.52-.84c.84-.05.94-.56.94-1.17V6.35c0-.6-.24-.93-.75-.89L6.01 6.36c-.56.05-.75.33-.75.93z"/>
    </svg>
  ),
};

function IntegTile({ mark, title }) {
  const M = BrandMarks[mark];
  return (
    <span className="feat-logo-tile" title={title}>
      {M ? <M /> : null}
    </span>
  );
}

function FeatIntegrationsVisual() {
  // 2 rows × 6 tiles, white tiles with faint border, real brand marks inside.
  return (
    <div className="feat-visual feat-visual-integ">
      <div className="feat-logo-row">
        <IntegTile mark="slack" title="Slack" />
        <IntegTile mark="teams" title="Microsoft Teams" />
        <IntegTile mark="google" title="Google Workspace" />
        <IntegTile mark="office365" title="Microsoft 365" />
        <IntegTile mark="hubspot" title="HubSpot" />
        <IntegTile mark="salesforce" title="Salesforce" />
      </div>
      <div className="feat-logo-row">
        <IntegTile mark="yardi" title="Yardi" />
        <IntegTile mark="appfolio" title="AppFolio" />
        <IntegTile mark="servicetitan" title="ServiceTitan" />
        <IntegTile mark="dat" title="DAT Freight" />
        <IntegTile mark="quickbooks" title="QuickBooks" />
        <span className="feat-logo-tile feat-logo-more" title="100+ more">+100</span>
      </div>
    </div>
  );
}

function FeatAgentVisual() {
  // Monitors / detects / acts — expanding pulse rings + slow sweep.
  return (
    <div className="feat-visual feat-visual-agent">
      <svg viewBox="0 0 240 130" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
        {/* static frame */}
        <g>
          <circle cx="120" cy="68" r="58" fill="none" stroke="var(--rule)" strokeWidth="1" opacity="0.55" />
          <circle cx="120" cy="68" r="44" fill="none" stroke="var(--rule)" strokeWidth="1" opacity="0.75" />
          <circle cx="120" cy="68" r="30" fill="none" stroke="var(--ink-soft)" strokeWidth="1" opacity="0.6" />
          {/* orbit notch markers */}
          <circle cx="178" cy="68" r="2" fill="var(--ink-soft)" />
          <circle cx="79"  cy="27" r="2" fill="var(--ink-soft)" />
          <circle cx="79"  cy="109" r="2" fill="var(--ink-soft)" />
          {/* guides */}
          <line x1="62" y1="68" x2="178" y2="68" stroke="var(--rule-soft)" strokeWidth="1" strokeDasharray="2 4" />
          <line x1="120" y1="10" x2="120" y2="126" stroke="var(--rule-soft)" strokeWidth="1" strokeDasharray="2 4" />
        </g>
        {/* expanding pulse rings */}
        <circle className="feat-agent-ring"    cx="120" cy="68" r="20" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.4" />
        <circle className="feat-agent-ring r2" cx="120" cy="68" r="20" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.4" />
        <circle className="feat-agent-ring r3" cx="120" cy="68" r="20" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.4" />
        {/* slow sweep */}
        <path className="feat-agent-sweep" d="M 120 68 L 178 68 A 58 58 0 0 1 161 109 Z" fill="var(--accent)" opacity="0.12" />
        {/* nucleus */}
        <g>
          <circle cx="120" cy="68" r="14" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1" />
          <circle className="feat-agent-nucleus" cx="120" cy="68" r="5" fill="var(--ink)" />
        </g>
      </svg>
    </div>
  );
}

function FeatBrowserVisual() {
  // Browser chrome + form fields animating fill as the cursor moves across.
  return (
    <div className="feat-visual feat-visual-browser">
      <svg viewBox="0 0 240 130" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
        {/* window frame */}
        <rect x="20" y="18" width="200" height="94" rx="4" fill="var(--paper)" stroke="var(--rule)" strokeWidth="1" />
        {/* title bar */}
        <rect x="20" y="18" width="200" height="18" rx="4" fill="var(--cream-2)" />
        <rect x="20" y="30" width="200" height="6" fill="var(--cream-2)" />
        {/* traffic lights */}
        <circle cx="30" cy="27" r="2.5" fill="var(--ink-soft)" opacity="0.5" />
        <circle cx="38" cy="27" r="2.5" fill="var(--ink-soft)" opacity="0.5" />
        <circle cx="46" cy="27" r="2.5" fill="var(--ink-soft)" opacity="0.5" />
        {/* url bar */}
        <rect x="58" y="22" width="152" height="10" rx="5" fill="var(--paper)" stroke="var(--rule-soft)" />
        <rect x="64" y="26" width="60" height="2" fill="var(--ink-muted)" opacity="0.5" />
        {/* body — field slots (empty) */}
        <rect x="32" y="48" width="80"  height="8" rx="1.5" fill="var(--cream-deep)" opacity="0.4" />
        <rect x="32" y="62" width="120" height="8" rx="1.5" fill="var(--cream-deep)" opacity="0.4" />
        <rect x="32" y="76" width="64"  height="8" rx="1.5" fill="var(--cream-deep)" opacity="0.4" />
        {/* animated fills (masked by their rectangles via stacking) */}
        <rect className="feat-browser-fill"    x="32" y="48" width="80"  height="8" rx="1.5" fill="var(--ink)" opacity="0.82" />
        <rect className="feat-browser-fill f2" x="32" y="62" width="120" height="8" rx="1.5" fill="var(--ink)" opacity="0.82" />
        <rect className="feat-browser-fill f3" x="32" y="76" width="64"  height="8" rx="1.5" fill="var(--ink)" opacity="0.82" />
        {/* submit */}
        <rect x="32" y="92" width="52" height="14" rx="2" fill="var(--ink)" />
        <rect x="40" y="98" width="36" height="2" fill="var(--paper)" opacity="0.8" />
        {/* cursor (animated) */}
        <g className="feat-browser-cursor">
          <path d="M 0 0 L 0 14 L 4 10 L 7 16 L 10 14 L 7 8 L 13 8 Z" fill="var(--ink)" stroke="var(--paper)" strokeWidth="0.8" strokeLinejoin="round" />
        </g>
        {/* LIVE indicator (blinking) */}
        <circle className="feat-browser-live" cx="200" cy="27" r="2" fill="var(--accent)" />
      </svg>
    </div>
  );
}

function FeatMemoryVisual() {
  // Abstract: stacked ledger cards w/ version tags + schema grid.
  return (
    <div className="feat-visual feat-visual-memory">
      <svg viewBox="0 0 240 130" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
        {/* back card */}
        <rect className="feat-memory-version" x="36" y="18" width="168" height="80" rx="3" fill="var(--cream-2)" stroke="var(--rule)" />
        {/* mid card */}
        <rect x="30" y="28" width="168" height="80" rx="3" fill="var(--paper)" stroke="var(--rule)" />
        {/* front card */}
        <rect x="24" y="38" width="168" height="80" rx="3" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1" />
        {/* header */}
        <rect x="32" y="46" width="50" height="4" fill="var(--ink)" />
        <text x="184" y="50" textAnchor="end" fontFamily="var(--mono)" fontSize="6.5" fill="var(--ink-muted)" letterSpacing="0.5">v.017</text>
        {/* schema rows (values write in sequentially) */}
        <g fontFamily="var(--mono)" fontSize="6" fill="var(--ink-soft)">
          <rect x="32" y="58" width="60" height="6" fill="var(--cream-deep)" opacity="0.5" />
          <rect className="feat-memory-row m1" x="96" y="58" width="90" height="6" fill="var(--cream)" stroke="var(--rule-soft)" />
          <rect x="32" y="68" width="60" height="6" fill="var(--cream-deep)" opacity="0.5" />
          <rect className="feat-memory-row m2" x="96" y="68" width="76" height="6" fill="var(--cream)" stroke="var(--rule-soft)" />
          <rect x="32" y="78" width="60" height="6" fill="var(--cream-deep)" opacity="0.5" />
          <rect className="feat-memory-row m3" x="96" y="78" width="60" height="6" fill="var(--cream)" stroke="var(--rule-soft)" />
          <rect x="32" y="88" width="60" height="6" fill="var(--cream-deep)" opacity="0.5" />
          <rect className="feat-memory-row m4" x="96" y="88" width="84" height="6" fill="var(--cream)" stroke="var(--rule-soft)" />
        </g>
        {/* entity tag */}
        <rect x="32" y="102" width="28" height="10" rx="5" fill="var(--ink)" />
        <text x="46" y="109" textAnchor="middle" fontFamily="var(--mono)" fontSize="6" fill="var(--paper)" letterSpacing="0.6">ENTITY</text>
        <rect x="64" y="102" width="24" height="10" rx="5" fill="none" stroke="var(--ink)" />
        <text x="76" y="109" textAnchor="middle" fontFamily="var(--mono)" fontSize="6" fill="var(--ink)" letterSpacing="0.6">LINK</text>
      </svg>
    </div>
  );
}

function FeatVoiceVisual() {
  // Abstract: phone handset + waveform. Muted tones.
  return (
    <div className="feat-visual feat-visual-voice">
      <svg viewBox="0 0 240 130" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
        {/* handset */}
        <g transform="translate(40, 40) rotate(-18)">
          <rect x="0" y="0" width="32" height="52" rx="8" fill="var(--ink)" />
          <rect x="3" y="4" width="26" height="2" rx="1" fill="var(--ink-soft)" opacity="0.4" />
          <rect x="3" y="10" width="26" height="32" rx="2" fill="var(--paper)" opacity="0.15" />
          <circle cx="16" cy="47" r="2" fill="var(--ink-soft)" opacity="0.5" />
        </g>
        {/* waveform — each bar centered on y=65 with transform-origin center */}
        <g stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="round">
          <line className="feat-voice-bar b1"  x1="100" y1="57"  x2="100" y2="73" />
          <line className="feat-voice-bar b2"  x1="108" y1="53"  x2="108" y2="77" />
          <line className="feat-voice-bar b3"  x1="116" y1="47"  x2="116" y2="83" />
          <line className="feat-voice-bar b4"  x1="124" y1="40"  x2="124" y2="90" />
          <line className="feat-voice-bar b5"  x1="132" y1="50"  x2="132" y2="80" />
          <line className="feat-voice-bar b6"  x1="140" y1="42"  x2="140" y2="88" />
          <line className="feat-voice-bar b7"  x1="148" y1="54"  x2="148" y2="76" />
          <line className="feat-voice-bar b8"  x1="156" y1="35"  x2="156" y2="95" stroke="var(--accent)" />
          <line className="feat-voice-bar b9"  x1="164" y1="46"  x2="164" y2="84" />
          <line className="feat-voice-bar b10" x1="172" y1="54"  x2="172" y2="76" />
          <line className="feat-voice-bar b11" x1="180" y1="48"  x2="180" y2="82" />
          <line className="feat-voice-bar b12" x1="188" y1="58"  x2="188" y2="72" />
          <line className="feat-voice-bar b13" x1="196" y1="62"  x2="196" y2="68" />
        </g>
        {/* caption line */}
        <rect x="100" y="108" width="100" height="4" rx="1" fill="var(--cream-deep)" opacity="0.6" />
      </svg>
    </div>
  );
}

function FeatSkillsVisual() {
  // Abstract: modular blocks with connection lines. OpenClaw library feel.
  return (
    <div className="feat-visual feat-visual-skills">
      <svg viewBox="0 0 240 130" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
        {/* connection lines */}
        <g stroke="var(--rule)" strokeWidth="1" strokeDasharray="2 3" fill="none">
          <path d="M 64 44 L 120 44" />
          <path d="M 120 44 L 176 44" />
          <path d="M 64 86 L 120 86" />
          <path d="M 120 86 L 176 86" />
          <path d="M 120 44 L 120 86" />
        </g>
        {/* 6 skill blocks */}
        <g>
          <rect x="44" y="30" width="40" height="28" rx="3" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1" />
          <rect x="50" y="38" width="12" height="2" fill="var(--ink)" />
          <rect x="50" y="44" width="22" height="1.5" fill="var(--ink-soft)" opacity="0.6" />
          <rect x="50" y="48" width="18" height="1.5" fill="var(--ink-soft)" opacity="0.6" />
        </g>
        <g>
          <rect x="100" y="30" width="40" height="28" rx="3" fill="var(--cream-2)" stroke="var(--rule)" />
          <rect x="106" y="38" width="12" height="2" fill="var(--ink-muted)" />
          <rect x="106" y="44" width="22" height="1.5" fill="var(--ink-soft)" opacity="0.5" />
          <rect x="106" y="48" width="18" height="1.5" fill="var(--ink-soft)" opacity="0.5" />
        </g>
        <g>
          <rect x="156" y="30" width="40" height="28" rx="3" fill="var(--paper)" stroke="var(--rule)" />
          <rect x="162" y="38" width="12" height="2" fill="var(--ink-muted)" />
          <rect x="162" y="44" width="22" height="1.5" fill="var(--ink-soft)" opacity="0.5" />
          <rect x="162" y="48" width="18" height="1.5" fill="var(--ink-soft)" opacity="0.5" />
        </g>
        <g>
          <rect x="44" y="72" width="40" height="28" rx="3" fill="var(--cream-2)" stroke="var(--rule)" />
          <rect x="50" y="80" width="12" height="2" fill="var(--ink-muted)" />
          <rect x="50" y="86" width="22" height="1.5" fill="var(--ink-soft)" opacity="0.5" />
          <rect x="50" y="90" width="18" height="1.5" fill="var(--ink-soft)" opacity="0.5" />
        </g>
        <g>
          <rect x="100" y="72" width="40" height="28" rx="3" fill="var(--accent-wash)" stroke="var(--accent)" strokeWidth="1" />
          <rect x="106" y="80" width="12" height="2" fill="var(--accent)" />
          <rect x="106" y="86" width="22" height="1.5" fill="var(--ink-soft)" opacity="0.5" />
          <rect x="106" y="90" width="18" height="1.5" fill="var(--ink-soft)" opacity="0.5" />
        </g>
        <g>
          <rect x="156" y="72" width="40" height="28" rx="3" fill="none" stroke="var(--rule)" strokeDasharray="3 2" />
          <text x="176" y="90" textAnchor="middle" fontFamily="var(--mono)" fontSize="10" fill="var(--ink-muted)" letterSpacing="0.5">+</text>
        </g>
      </svg>
    </div>
  );
}

const FEATURES = [
  {
    id: "integrations",
    num: "01",
    visual: FeatIntegrationsVisual,
    title: "100+ Integrations",
    body: <>Native OAuth or MCP across comms, CRM, property management, dispatch, and finance. Slack, Microsoft 365, Salesforce, Yardi, ServiceTitan, DAT, QuickBooks, and 100+ more.</>,
  },
  {
    id: "agent",
    num: "02",
    visual: FeatAgentVisual,
    title: "Autonomous Agents",
    body: <>Monitor, detect, act — without prompting. Scheduled runs, event triggers, and always-on listeners.</>,
  },
  {
    id: "browser",
    num: "03",
    visual: FeatBrowserVisual,
    title: "Browser Automation",
    body: <>Sandboxed Chrome per employee. Live view. You can take over any session mid-run.</>,
  },
  {
    id: "memory",
    num: "04",
    visual: FeatMemoryVisual,
    title: "Structured Memory",
    body: <>Git-versioned, strict-schema vault. Entity-aware. Reads every file in one pass — no RAG snippets, no hallucinations.</>,
  },
  {
    id: "voice",
    num: "05",
    visual: FeatVoiceVisual,
    title: "Voice-Ready",
    body: <>Twilio + ElevenLabs. Inbound, outbound, or internal. Post-call structured logs straight into the vault.</>,
  },
  {
    id: "skills",
    num: "06",
    visual: FeatSkillsVisual,
    title: "Custom Skills",
    body: <>New capability? We write it as an OpenClaw skill. Every customer keeps their library.</>,
  },
];

function FeaturesGrid() {
  return (
    <div className="feat-grid">
      {FEATURES.map(f => {
        const V = f.visual;
        return (
          <div key={f.id} className={`feat-card feat-card-${f.id}`}>
            <div className="feat-card-visual">
              <V />
            </div>
            <div className="feat-card-body">
              <div className="feat-card-num">§ {f.num}</div>
              <h3 className="feat-card-title">{f.title}</h3>
              <p className="feat-card-desc">{f.body}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ============================================================================

function Integrations() {
  const [variant, setVariant] = useIntState(() => document.body.dataset.integrations || "features");
  useIntEffect(() => {
    const obs = new MutationObserver(() => setVariant(document.body.dataset.integrations || "features"));
    obs.observe(document.body, { attributes: true, attributeFilter: ["data-integrations"] });
    return () => obs.disconnect();
  }, []);

  const isFeatures = variant === "features";

  return (
    <section id="integrations" className={`integrations${isFeatures ? " integrations-features" : ""}`}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow-num">
              {isFeatures ? "§ 04 / WHAT'S INCLUDED" : "§ 04 / INTEGRATIONS"}
            </span>
          </div>
          <div>
            {isFeatures ? (
              <>
                <h2>Every tool your team<br /><span className="serif-italic text-accent">already runs on.</span></h2>
                <p className="section-sub" style={{marginTop:20}}>
                  Not a chatbot. A full operating layer — integrations, autonomy, browser, memory, voice, and custom skills.
                </p>
              </>
            ) : (
              <>
                <h2>Connects to <span className="serif-italic text-accent">1,000+ tools.</span></h2>
                <p className="section-sub" style={{marginTop:20}}>
                  Watchdog, Ezra, and Mia plug into the systems your business already runs on — through native integrations, MCP, and direct API access.
                </p>
              </>
            )}
          </div>
        </div>
        {variant === "features" && <FeaturesGrid />}
        {variant === "featured" && <FeaturedGrid />}
        {variant === "marquee"  && <Marquee />}
        {variant === "stack"    && <Stack />}
      </div>
    </section>
  );
}

window.Integrations = Integrations;