/* Google Analytics (GA4) view =======================================
   GA4 is not yet wired to a live data source in this build. Rather than
   show fabricated sessions/geo data, this surface is an honest empty
   state that points to where a GA4 connection would be configured.
   (Add a GA4 integration that returns the normalized data bundle to
   light this up — see Admin → Integrations and HANDOFF_MYSQL.md.)
=================================================================== */

function GA4View({ accountId }){
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3 flex-wrap">
        <span className="inline-flex items-center justify-center w-10 h-10 rounded-xl"><BrandIcon name="ga" size={26}/></span>
        <div className="flex-1 min-w-0">
          <h1 className="text-[20px] font-semibold tracking-tight leading-none">Google Analytics 4</h1>
          <div className="text-[12px] text-ink-500 dark:text-ink-300 mt-1">Site behavior & conversions · blended with ad ROAS</div>
        </div>
      </div>

      <Card className="rounded-2xl p-10 text-center">
        <span className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-ink-100 dark:bg-white/5 mb-3"><BrandIcon name="ga" size={30}/></span>
        <div className="text-[15px] font-semibold">Google Analytics isn’t connected</div>
        <div className="text-[12.5px] text-ink-500 dark:text-ink-300 mt-1.5 max-w-[460px] mx-auto leading-relaxed">
          Connect a GA4 source (MCP, API, or manual import) that returns sessions,
          channel mix and conversions, and this page will populate with real data.
        </div>
        <div className="mt-4 inline-flex items-center gap-2 text-[11.5px] font-mono text-ink-400">
          <Icon name="info" size={13}/> Configure under Admin → Integrations
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { GA4View });