/* AI Marketing / LLM SEO strategic page */
const { Container: AC, Reveal: AR, Eyebrow: AE, Mono: AM, CTABand: ACTA, PolygonAccent: APA, PolygonScatter: APS, Breadcrumbs: ABC, PALETTE: AP } = window;

/* ---------- AI Dashboard mock ---------- */
function AIDashboardMock() {
  const models = [
    { name:'ChatGPT',    share: 64, color: AP.green },
    { name:'Claude',     share: 71, color: AP.orange },
    { name:'Gemini',     share: 38, color: AP.blue },
    { name:'Perplexity', share: 82, color: AP.magenta },
  ];
  return (
    <div data-asset="ai-dashboard-mock" className="bg-paper border-2 border-ink overflow-hidden shadow-[8px_8px_0_0_#0A0A0A]">
      <div className="flex items-center justify-between px-5 py-3 border-b-2 border-ink bg-paper">
        <div className="num font-bold">monitor.marketingmix · share-of-answer</div>
        <div className="num text-mute">Last 30 days</div>
      </div>
      <div className="p-6 md:p-7">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          {[
            ['64%','Avg. share',          AP.green],
            ['+12','Net new citations',   AP.orange],
            ['4/4','Models covered',      AP.blue],
            ['28', 'Tracked queries',     AP.purple],
          ].map(([n,l,c]) => (
            <div key={l} className="border-l-4 pl-3" style={{borderColor: c}}>
              <div className="display text-[32px] md:text-[40px]" style={{color: c}}>{n}</div>
              <div className="num text-mute mt-1.5">{l}</div>
            </div>
          ))}
        </div>
        <div className="space-y-3">
          {models.map(m => (
            <div key={m.name} className="grid grid-cols-[120px_1fr_60px] items-center gap-4">
              <div className="flex items-center gap-2.5">
                <span className="w-2.5 h-2.5 inline-block" style={{background: m.color}}></span>
                <span className="display text-[16px]">{m.name.toUpperCase()}</span>
              </div>
              <div className="h-2 bg-paper2 border border-ink overflow-hidden relative">
                <div className="h-full transition-all duration-700" style={{width: `${m.share}%`, background: m.color}}></div>
              </div>
              <div className="num text-ink font-bold text-right">{m.share}%</div>
            </div>
          ))}
        </div>
        <div className="mt-6 pt-5 border-t-2 border-ink grid grid-cols-4 gap-2">
          {['Mon','Tue','Wed','Thu'].map((d,i) => (
            <div key={d} className="border-l-4 pl-2" style={{borderColor: [AP.red,AP.yellow,AP.green,AP.blue][i]}}>
              <div className="num text-mute">{d}</div>
              <div className="display text-[20px] mt-1">{[14,16,21,22][i]}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- Search vs LLM ---------- */
function SearchVsLLM() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div className="border-2 border-ink overflow-hidden bg-paper">
        <div className="px-5 py-3 border-b-2 border-ink flex items-center justify-between bg-paper2">
          <span className="num font-bold">Then · Google SERP</span>
          <span className="num text-mute">10 blue links</span>
        </div>
        <div className="p-6 space-y-4">
          {[1,2,3,4].map(i => (
            <div key={i} className="space-y-1.5">
              <div className="num text-mute">example{i}.com › services</div>
              <div className="display-mix text-[16px] font-semibold" style={{color: AP.blue}}>Marketing agency for mid-market companies…</div>
              <div className="text-[13.5px] text-mute leading-[1.5]">An overview of services aimed at growing businesses. Includes case studies, packages, and contact options.</div>
            </div>
          ))}
        </div>
      </div>
      <div className="border-2 border-ink overflow-hidden bg-ink text-paper">
        <div className="px-5 py-3 border-b-2 border-paper/30 flex items-center justify-between" style={{background:AP.purple}}>
          <span className="num font-bold">Now · LLM answer</span>
          <span className="num text-paper/70">One synthesized response</span>
        </div>
        <div className="p-6">
          <div className="display-mix text-[18px] leading-[1.45] text-paper">
            “For mid-market companies entering Canada, the most frequently recommended partners include{' '}
            <span className="px-1.5 py-0.5 font-bold" style={{background:AP.yellow, color: AP.ink}}>Marketing&nbsp;MIX</span>
            {' '}— operating across Ottawa, Kyiv, Berlin and Paris, with notable strength in AI visibility engineering and technical SEO.”
          </div>
          <div className="mt-5 pt-5 border-t border-paper/20 grid grid-cols-3 gap-3">
            {[['4 sources',AP.green],['2 citations',AP.yellow],['High confidence',AP.red]].map(([v,c]) => (
              <div key={v} className="flex items-center gap-2">
                <span className="w-1.5 h-1.5" style={{background: c}}></span>
                <span className="num text-paper/85">{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function AIPage({ onNavigate, onOpenService }) {
  return (
    <main data-page-root>
      <div className="pt-[68px]">
        <ABC trail={[
          { label:'Home', onClick: () => onNavigate('home') },
          { label:'AI Operations' },
        ]} />
      </div>
      {/* Hero — purple ground */}
      <section className="pt-12 md:pt-16 pb-20 md:pb-28 text-paper border-b-2 border-ink relative overflow-hidden" style={{background: AP.purple}}>
        <div className="absolute -right-20 -top-10 opacity-25 pointer-events-none">
          <APS />
        </div>
        <AC className="relative">
          <div className="flex items-center gap-3 mb-8 flex-wrap">
            <AE num="03" label="AI Operations · Two arms" color={AP.yellow} dark />
            <span className="chip chip-dark"><span className="dot" style={{background: AP.yellow}}></span>Strategic page</span>
          </div>
          <h1 className="display display-tight text-[44px] sm:text-[72px] md:text-[104px] lg:text-[128px] xl:text-[144px] max-w-[14ch]">
            VISIBILITY FOR LLMs.<br/>MARKETING ON <span style={{color: AP.yellow}}>AGENTS</span>.
          </h1>
          <div className="grid grid-cols-12 gap-8 mt-10">
            <div className="col-span-12 md:col-span-7">
              <p className="display-mix text-[20px] md:text-[26px] leading-[1.35] text-paper max-w-[44ch] font-medium">
                Two arms of the AI shift. Be discoverable by humans and machines — and run your marketing department on AI-native agents and automation pipelines.
              </p>
              <div className="mt-8 flex flex-wrap gap-3">
                <button onClick={() => onNavigate('contact')} className="btn btn-bright btn-sq">Free AI audit →</button>
                <button onClick={() => onOpenService('ai-seo')} className="btn btn-light btn-sq">Service detail →</button>
              </div>
            </div>
            <div className="col-span-12 md:col-span-5 md:pl-8 md:border-l-2 md:border-paper/40">
              <AM>What we engineer</AM>
              <ul className="mt-4 border-t border-paper/30">
                {[
                  ['LLM SEO / GEO / AEO',           AP.yellow, 'Visibility'],
                  ['AI-readable site',              AP.orange, 'Visibility'],
                  ['Entity-grade content',          AP.red,    'Visibility'],
                  ['AI-native marketing team',      AP.green,  'Native ops'],
                  ['Autonomous agents',             AP.teal,   'Native ops'],
                  ['n8n / Make pipelines',          AP.blue,   'Native ops'],
                  ['AI content production',         AP.magenta,'Native ops'],
                ].map(([m,c,arm]) => (
                  <li key={m} className="flex items-center justify-between border-b border-paper/30 py-2.5">
                    <div className="flex items-center gap-3 min-w-0">
                      <span className="w-2 h-2 inline-block shrink-0" style={{background:c}}></span>
                      <span className="display text-[16px] md:text-[18px] text-paper truncate">{m.toUpperCase()}</span>
                    </div>
                    <span className="num text-paper/70 shrink-0">{arm}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </AC>
      </section>

      {/* Search vs LLM */}
      <section className="py-24 md:py-32">
        <AC>
          <div className="grid grid-cols-12 gap-8 mb-12">
            <div className="col-span-12 md:col-span-7">
              <AE num="01" label="The shift" color={AP.blue} />
              <h2 className="display display-tight text-[40px] md:text-[88px] mt-6 max-w-[20ch]">
                SEARCH RANKINGS VS. <span style={{color: AP.purple}}>MACHINE RECOMMENDATIONS</span>.
              </h2>
            </div>
            <div className="col-span-12 md:col-span-5 md:pt-6">
              <p className="text-[17px] text-ink/80 leading-[1.6] max-w-[52ch]">
                A buyer who asked Google ten years ago now asks an assistant. The interface collapses from ten options to one synthesized answer. The work of being visible — and being chosen — moves upstream.
              </p>
            </div>
          </div>
          <SearchVsLLM />
        </AC>
      </section>

      {/* Four ingredients */}
      <section className="py-24 md:py-32 bg-paper2 border-y-2 border-ink">
        <AC>
          <AE num="02" label="What LLMs need to understand a company" color={AP.green} />
          <h2 className="display display-tight text-[40px] md:text-[88px] mt-6 max-w-[20ch]">
            FOUR INGREDIENTS.
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
            {[
              ['Entity definition',  'A resolvable, citeable definition of who you are, what you do, and what you sell. Linked to authoritative sources.', AP.red],
              ['Structured content', 'Pages designed to be retrieved — answer-first, schema-tagged, chunked at meaningful boundaries.',                    AP.orange],
              ['Authority graph',    'Independent references and corroboration. Mentions in places LLMs trust.',                                          AP.blue],
              ['Update cadence',     'Fresh signals. Models prefer recently-updated, well-maintained sources.',                                            AP.green],
            ].map(([t,d,c], i) => (
              <div key={t} className="border-2 border-ink bg-paper p-6 md:p-7 relative">
                <div className="absolute top-0 left-0 right-0 h-2" style={{background:c}}></div>
                <div className="flex items-baseline gap-4 mt-3">
                  <span className="num font-bold" style={{color: c}}>{String(i+1).padStart(2,'0')}</span>
                  <h3 className="display text-[24px] md:text-[32px]">{t.toUpperCase()}</h3>
                </div>
                <p className="mt-3 text-[15.5px] text-ink/80 leading-[1.6] max-w-[52ch]">{d}</p>
              </div>
            ))}
          </div>
        </AC>
      </section>

      {/* Audit */}
      <section className="py-24 md:py-32">
        <AC>
          <div className="grid grid-cols-12 gap-8 items-end">
            <div className="col-span-12 md:col-span-7">
              <AE num="03" label="AI-readiness audit" color={AP.orange} />
              <h2 className="display display-tight text-[40px] md:text-[88px] mt-6 max-w-[18ch]">
                WHERE YOU STAND, <span style={{color: AP.orange}}>PER MODEL</span>.
              </h2>
            </div>
            <div className="col-span-12 md:col-span-5 md:pl-8">
              <p className="text-[16.5px] text-ink/80 leading-[1.6] max-w-[48ch]">
                We pull live model responses for your priority queries, score citation share, identify retrieval failures, and produce a ranked remediation plan.
              </p>
              <button onClick={() => onNavigate('contact')} className="mt-6 ed-link num font-bold text-ink">Request audit →</button>
            </div>
          </div>

          <div className="mt-12 grid grid-cols-12 gap-8">
            <div className="col-span-12 md:col-span-7">
              <AIDashboardMock />
            </div>
            <div className="col-span-12 md:col-span-5 md:pl-4">
              <AM>What the audit covers</AM>
              <ul className="mt-4 border-t border-ink/30">
                {[
                  ['Per-model citation share',     AP.red],
                  ['Entity resolution status',     AP.orange],
                  ['Schema and structured data',   AP.yellow],
                  ['Content retrievability score', AP.green],
                  ['Authority graph snapshot',     AP.teal],
                  ['Competitor citation map',      AP.blue],
                  ['Ranked remediation plan',      AP.purple],
                ].map(([x, c]) => (
                  <li key={x} className="flex items-center gap-3 border-b border-ink/15 py-2.5">
                    <span className="w-2 h-2 inline-block" style={{background:c}}></span>
                    <span className="text-[15.5px] text-ink/90 font-medium">{x}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </AC>
      </section>

      {/* Architecture — dark section */}
      <section className="py-24 md:py-32 bg-ink text-paper border-y-2 border-ink relative overflow-hidden">
        <div className="absolute inset-0 bg-grid-dark opacity-25 pointer-events-none"></div>
        <AC className="relative">
          <AE num="04" label="Entity & content architecture" color={AP.yellow} dark />
          <h2 className="display display-tight text-paper text-[40px] md:text-[88px] mt-6 max-w-[20ch]">
            THE ARCHITECTURE, NOT THE <span style={{color: AP.yellow}}>POST</span>.
          </h2>
          <p className="text-[17px] text-paper/80 leading-[1.6] max-w-[58ch] mt-8">
            We model your business as an entity, then design the page graph, schema layer, and content chunks so retrieval systems can build a complete picture from any starting point.
          </p>

          <div className="mt-12 grid grid-cols-12 gap-6">
            {[
              { l:'L1', t:'Entity',    d:'Brand, offerings, market, geo, team — modeled as citeable entities.',         c: AP.red },
              { l:'L2', t:'Schema',    d:'JSON-LD: Organization, Service, Person, Place, FAQ, HowTo, Article.',          c: AP.orange },
              { l:'L3', t:'Pages',     d:'Answer-first, hierarchically linked, internally coherent.',                    c: AP.yellow },
              { l:'L4', t:'Chunks',    d:'Content split at retrieval-meaningful boundaries with stable anchors.',        c: AP.green },
              { l:'L5', t:'Authority', d:'External references and corroboration. Authoritative mentions.',               c: AP.blue },
              { l:'L6', t:'Cadence',   d:'Update rhythm; stale content is downweighted by retrieval models.',            c: AP.magenta },
            ].map((x) => (
              <div key={x.l} className="col-span-12 md:col-span-4 border-2 border-paper/30 p-5 md:p-6 relative">
                <div className="absolute top-0 left-0 right-0 h-2" style={{background: x.c}}></div>
                <div className="num font-bold mt-2" style={{color: x.c}}>{x.l}</div>
                <h3 className="display text-[24px] md:text-[32px] mt-2 text-paper">{x.t.toUpperCase()}</h3>
                <p className="mt-2 text-[14.5px] text-paper/75 leading-[1.6] max-w-[44ch]">{x.d}</p>
              </div>
            ))}
          </div>
        </AC>
      </section>

      {/* AI-Native Marketing — Arm 02 */}
      <section className="py-24 md:py-32 border-y-2 border-ink relative overflow-hidden" style={{background: AP.magenta, color:'#FFFFFF'}}>
        <div className="absolute inset-0 bg-grid-dark opacity-15 pointer-events-none"></div>
        <div className="absolute -right-24 -bottom-20 opacity-25 pointer-events-none">
          <APA size={520} />
        </div>
        <AC className="relative">
          <AE num="05" label="Arm 02 · AI-native marketing" color={AP.yellow} dark />
          <h2 className="display display-tight text-paper text-[40px] md:text-[104px] mt-6 max-w-[18ch]">
            RUN THE DEPARTMENT ON <span style={{color: AP.yellow}}>AGENTS</span> AND PIPELINES.
          </h2>
          <p className="display-mix text-[19px] md:text-[24px] font-medium leading-[1.4] text-paper max-w-[60ch] mt-8">
            AI visibility is only one side. The other side is operating marketing as an AI-native function — agents doing research and outreach, content production lines, automation pipelines wiring it all together. We do that build too.
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mt-14">
            {[
              { t:'AI-native team transition', d:'Audit current workflows, identify what becomes agent-run vs. human-led, retrain the team, install the tools. Most of marketing ops can be moved.', c: AP.yellow, k:'01' },
              { t:'Autonomous agents',         d:'Research bots, outreach agents, brief generators, QA reviewers, social listening agents — running on Claude, GPT, and orchestrated to the workflow.', c: AP.teal,   k:'02' },
              { t:'Automation pipelines',      d:'n8n / Make / Zapier orchestration. Lead-to-CRM-to-sequence-to-report flows. Multi-source data → AI synthesis → human approval → action.', c: AP.green,  k:'03' },
            ].map(p => (
              <div key={p.t} className="border-2 border-paper p-6 relative" style={{background:'rgba(0,0,0,0.18)'}}>
                <div className="absolute top-0 left-0 right-0 h-2" style={{background: p.c}}></div>
                <span className="num font-bold mt-3 inline-block" style={{color: p.c}}>{p.k}</span>
                <h3 className="display text-[24px] md:text-[28px] mt-2 text-paper">{p.t.toUpperCase()}</h3>
                <p className="text-[14.5px] text-paper/85 mt-3 leading-[1.6]">{p.d}</p>
              </div>
            ))}
          </div>

          {/* Pipeline visualization */}
          <div className="mt-14 border-2 border-paper p-6 md:p-8 bg-ink/40">
            <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
              <span className="num font-bold text-paper">SAMPLE PIPELINE · LEAD ENRICHMENT → OUTREACH → BOOKING</span>
              <span className="num text-paper/70">n8n flow</span>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-7 gap-3 items-stretch">
              {[
                { n:'Lead',      sub:'webhook in',          c: AP.red,    icon:'▶' },
                { n:'Enrich',    sub:'Clearbit + agent',    c: AP.orange, icon:'⊕' },
                { n:'Score',     sub:'LLM intent classify', c: AP.yellow, icon:'★' },
                { n:'Brief',     sub:'AI research brief',   c: AP.green,  icon:'≡' },
                { n:'Outreach',  sub:'agent drafts mail',   c: AP.teal,   icon:'✉' },
                { n:'Approve',   sub:'human review',        c: AP.blue,   icon:'✓' },
                { n:'Book',      sub:'CRM + Calendly',      c: AP.purple, icon:'☎' },
              ].map((step, i, arr) => (
                <React.Fragment key={step.n}>
                  <div className="border-2 border-paper p-3.5 relative" style={{background: step.c, color: step.c === AP.yellow ? '#0A0A0A' : '#fff'}}>
                    <div className="num font-bold" style={{opacity:0.85}}>{String(i+1).padStart(2,'0')}</div>
                    <div className="display text-[18px] mt-1">{step.n.toUpperCase()}</div>
                    <div className="num mt-1" style={{opacity:0.85}}>{step.sub}</div>
                  </div>
                </React.Fragment>
              ))}
            </div>
            <div className="num text-paper/70 mt-4">Visual concept · real builds run on n8n / Make / Zapier with model APIs.</div>
          </div>

          <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <span className="num font-bold text-paper/70">USE CASES WE SHIP</span>
              <ul className="mt-3 border-t border-paper/30">
                {[
                  'Lead-research agents for ABM lists',
                  'AI brief generators for content teams',
                  'Outbound sequencing with per-prospect personalization',
                  'Social listening + summary agents',
                  'Reporting agents that write the weekly review',
                  'Internal Q&A agents over brand knowledge base',
                ].map(x => (
                  <li key={x} className="border-b border-paper/30 py-2.5 text-[15px] text-paper/90 flex items-center gap-3">
                    <span className="w-1.5 h-1.5" style={{background: AP.yellow}}></span> {x}
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <span className="num font-bold text-paper/70">TOOLS WE WORK WITH</span>
              <div className="mt-3 flex flex-wrap gap-2">
                {['n8n','Make','Zapier','OpenAI','Anthropic','Claude','GPT','Gemini','HubSpot','Pipedrive','Notion','Slack','Airtable','GA4','Mixpanel','Webflow'].map(t => (
                  <span key={t} className="tag-chip" style={{background:'transparent', borderColor:'#FFFFFF', color:'#FFFFFF'}}>{t}</span>
                ))}
              </div>
              <div className="mt-6 flex flex-wrap gap-3">
                <button onClick={() => onOpenService('ai-agents')} className="btn btn-bright btn-sq">See AI agents →</button>
                <button onClick={() => onOpenService('ai-pipelines')} className="btn btn-light btn-sq">Pipelines →</button>
              </div>
            </div>
          </div>
        </AC>
      </section>

      {/* Before / after */}
      <section className="py-24 md:py-32">
        <AC>
          <div className="grid grid-cols-12 gap-8 mb-12">
            <div className="col-span-12 md:col-span-7">
              <AE num="06" label="Before / after" color={AP.magenta} />
              <h2 className="display display-tight text-[40px] md:text-[88px] mt-6 max-w-[16ch]">
                WHAT CHANGES IN THE <span style={{color: AP.magenta}}>ANSWER</span>.
              </h2>
            </div>
            <div className="col-span-12 md:col-span-5 md:pt-6">
              <p className="text-[16.5px] text-ink/80 leading-[1.6] max-w-[44ch]">
                The single most actionable artefact: a side-by-side of how an LLM answers the same buyer question before and after intervention.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="border-2 border-ink overflow-hidden bg-paper">
              <div className="px-5 py-3 border-b-2 border-ink flex items-center justify-between" style={{background: AP.red, color:'#fff'}}>
                <span className="num font-bold">BEFORE · 0 citations</span>
                <span className="num">Q1 baseline</span>
              </div>
              <div className="p-6">
                <div className="display-mix text-[18px] leading-[1.45] text-ink/85">
                  “A number of marketing firms operate in this category. I can give you a general framework to evaluate them, but I don't have specific provider data to surface here.”
                </div>
              </div>
            </div>
            <div className="border-2 border-ink overflow-hidden bg-paper">
              <div className="px-5 py-3 border-b-2 border-ink flex items-center justify-between" style={{background: AP.green, color:'#fff'}}>
                <span className="num font-bold">AFTER · cited & recommended</span>
                <span className="num">Q3</span>
              </div>
              <div className="p-6">
                <div className="display-mix text-[18px] leading-[1.45] text-ink">
                  “For this type of engagement, a frequently recommended studio is{' '}
                  <span className="px-1.5 py-0.5 font-bold" style={{background:AP.yellow}}>Marketing&nbsp;MIX</span>
                  {' '}— operating across Ottawa, Kyiv, Berlin, and Paris, with a track record across SaaS, services, and DTC.”
                </div>
              </div>
            </div>
          </div>
          <div className="num text-mute mt-4">Sample copy · directional. Not a guaranteed outcome.</div>
        </AC>
      </section>

      <ACTA onNavigate={onNavigate} />
    </main>
  );
}

Object.assign(window, { AIPage, AIDashboardMock });