/* =====================================================================
   SEO Intelligence — "Get Found" section.

   The hero visual is a live search simulator: a stylised Google
   SERP/Map-Pack that cycles through realistic local queries and shows
   YOUR BUSINESS pinned at #1. This is the exact outcome the customer
   is paying for, visualised — far more conversion-relevant than a US
   map for a LOCAL SEO service.
   ===================================================================== */
const { useEffect: useEffectSeo, useRef: useRefSeo, useState: useStateSeo } = React;

/* -------------------------------------------------------------------
   Rotating queries — each one realistic for a small-business customer.
   [query, locationLabel, categoryLabel]
------------------------------------------------------------------- */
const SEO_QUERIES = [
  { q: 'plumber near me',           loc: 'Oklahoma City, OK',  cat: 'Plumbing service' },
  { q: 'lawn care edmond',          loc: 'Edmond, OK',         cat: 'Lawn care service' },
  { q: 'auto body shop norman',     loc: 'Norman, OK',         cat: 'Auto body shop' },
  { q: 'best salon okc',            loc: 'Oklahoma City, OK',  cat: 'Beauty salon' },
  { q: 'taco truck near me',        loc: 'Tulsa, OK',          cat: 'Food truck' },
  { q: 'hvac repair moore',         loc: 'Moore, OK',          cat: 'HVAC contractor' },
  { q: 'roofer stillwater',         loc: 'Stillwater, OK',     cat: 'Roofing contractor' },
  { q: 'dog groomer near me',       loc: 'Oklahoma City, OK',  cat: 'Pet groomer' },
];

/* Hoisted so the reference is stable across renders. Inlining this inside
   SearchSimulator would re-create the array every render, invalidating
   useTypewriter's effect deps and restarting the type loop on every keystroke
   (symptom: the search bar appears to "spam" the first couple of characters). */
const SEO_QUERY_TEXTS = SEO_QUERIES.map((q) => q.q);

/* Competitor names rotated through positions #2 and #3 — keeps the
   mock feeling alive without naming any real local business. */
const DECOY_NAMES = [
  ['Statewide Pro Services',  'Cardinal & Co.',       '4.6', '4.3', 128, 71],
  ['Prairie Road Specialists', 'Hometown Trade Co.',  '4.5', '4.2',  94, 53],
  ['Redbud Works',             'Sooner Standard',     '4.4', '4.1', 212, 89],
  ['Frontier & Co.',           'Capitol Trade',       '4.5', '4.0', 176, 62],
];

const MAP_PACK_STATES = [
  { x: 56, y: 54, zoom: 1.02, sweep: 18, label: 'Core service area' },
  { x: 67, y: 24, zoom: 1.14, sweep: -12, label: 'North-side visibility' },
  { x: 61, y: 79, zoom: 1.08, sweep: 10, label: 'South corridor push' },
  { x: 48, y: 47, zoom: 1.18, sweep: -6, label: 'Downtown cluster' },
  { x: 28, y: 40, zoom: 1.11, sweep: 14, label: 'West market expansion' },
  { x: 44, y: 71, zoom: 1.09, sweep: -14, label: 'Moore / south OKC' },
  { x: 79, y: 29, zoom: 1.16, sweep: 8, label: 'Regional search pocket' },
  { x: 54, y: 51, zoom: 1.05, sweep: 0, label: 'Metro-wide coverage' },
];

const MAP_BLOCKS = [
  { left: 6, top: 12, width: 18, height: 14, rot: -6 },
  { left: 27, top: 11, width: 14, height: 11, rot: 3 },
  { left: 47, top: 8, width: 20, height: 18, rot: -4 },
  { left: 71, top: 14, width: 15, height: 13, rot: 7 },
  { left: 11, top: 38, width: 13, height: 16, rot: 4 },
  { left: 30, top: 34, width: 22, height: 20, rot: -5 },
  { left: 58, top: 35, width: 17, height: 13, rot: 6 },
  { left: 77, top: 40, width: 12, height: 18, rot: -3 },
  { left: 17, top: 64, width: 18, height: 14, rot: -7 },
  { left: 42, top: 61, width: 14, height: 15, rot: 5 },
  { left: 63, top: 63, width: 21, height: 16, rot: -4 },
];

const MAP_COMPETITOR_PINS = [
  { x: 18, y: 26 },
  { x: 33, y: 58 },
  { x: 39, y: 19 },
  { x: 58, y: 31 },
  { x: 70, y: 61 },
  { x: 81, y: 46 },
];

/* -------------------------------------------------------------------
   Animated map-pack thumbnail — abstract, query-driven neighbourhood
   surface. The query index now directly changes pan, focus pin position,
   sweep direction, and active location copy.
------------------------------------------------------------------- */
function MapPackCanvas({ query, index }) {
  const state = MAP_PACK_STATES[index % MAP_PACK_STATES.length];
  const panX = 50 - state.x;
  const panY = 50 - state.y;
  const roadTransform = `translate(${panX * 0.55}px, ${panY * 0.55}px) scale(${state.zoom})`;
  const blockTransform = `translate(${panX * 0.35}px, ${panY * 0.35}px) scale(${1 + (state.zoom - 1) * 0.65})`;

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: 'linear-gradient(180deg, color-mix(in oklab, var(--bg-elev-1) 92%, black) 0%, var(--bg-elev-1) 100%)' }}>
      <div style={{
        position: 'absolute',
        inset: '-24%',
        backgroundImage: [
          'linear-gradient(90deg, color-mix(in oklab, var(--border-strong) 72%, transparent) 1px, transparent 1px)',
          'linear-gradient(color-mix(in oklab, var(--border-strong) 72%, transparent) 1px, transparent 1px)',
          'linear-gradient(125deg, transparent 45%, color-mix(in oklab, var(--accent) 10%, transparent) 50%, transparent 55%)',
        ].join(','),
        backgroundSize: '32px 32px, 32px 32px, 220px 220px',
        opacity: 0.62,
        transform: roadTransform,
        transition: 'transform 900ms cubic-bezier(.22,1,.36,1)',
      }}/>

      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{
        position: 'absolute',
        inset: '-14%',
        width: '128%',
        height: '128%',
        opacity: 0.9,
        transform: roadTransform,
        transition: 'transform 900ms cubic-bezier(.22,1,.36,1)',
      }}>
        <path d="M-5 58 C 20 52, 35 48, 59 51 S 106 45, 108 33" fill="none" stroke="color-mix(in oklab, var(--accent) 58%, transparent)" strokeWidth="2.4" strokeLinecap="round"/>
        <path d="M8 14 C 22 28, 35 30, 52 38 S 81 57, 98 82" fill="none" stroke="color-mix(in oklab, var(--fg-3) 70%, transparent)" strokeWidth="1.2" strokeLinecap="round"/>
        <path d="M15 92 C 26 72, 32 58, 41 44 S 56 20, 83 8" fill="none" stroke="color-mix(in oklab, var(--fg-4) 72%, transparent)" strokeWidth="1" strokeLinecap="round"/>
      </svg>

      <div style={{ position: 'absolute', inset: '-10%', transform: blockTransform, transition: 'transform 900ms cubic-bezier(.22,1,.36,1)' }}>
        {MAP_BLOCKS.map((block, blockIndex) => (
          <div key={blockIndex} style={{
            position: 'absolute',
            left: `${block.left}%`,
            top: `${block.top}%`,
            width: `${block.width}%`,
            height: `${block.height}%`,
            border: '1px solid color-mix(in oklab, var(--border-strong) 86%, transparent)',
            background: blockIndex % 3 === 0
              ? 'color-mix(in oklab, var(--fg-1) 5%, transparent)'
              : 'color-mix(in oklab, var(--accent) 4%, transparent)',
            transform: `rotate(${block.rot}deg)`,
            boxShadow: 'inset 0 0 0 1px color-mix(in oklab, var(--bg) 60%, transparent)',
          }}/>
        ))}
      </div>

      <div style={{
        position: 'absolute',
        inset: 0,
        background: 'linear-gradient(115deg, transparent 0%, color-mix(in oklab, var(--accent) 10%, transparent) 48%, transparent 58%)',
        transform: `translateX(${state.sweep}%)`,
        transition: 'transform 900ms cubic-bezier(.22,1,.36,1)',
        animation: 'mwMapSweep 4.5s ease-in-out infinite',
        mixBlendMode: 'screen',
        opacity: 0.7,
      }}/>

      {MAP_COMPETITOR_PINS.map((pin, pinIndex) => {
        const offsetX = ((index + pinIndex * 2) % 5) - 2;
        const offsetY = ((index * 2 + pinIndex) % 5) - 2;
        return (
          <div key={pinIndex} style={{
            position: 'absolute',
            left: `calc(${pin.x}% + ${offsetX * 4}px)`,
            top: `calc(${pin.y}% + ${offsetY * 4}px)`,
            width: 9,
            height: 9,
            borderRadius: '50%',
            background: 'color-mix(in oklab, var(--fg-4) 84%, transparent)',
            boxShadow: '0 0 0 3px color-mix(in oklab, var(--fg-4) 12%, transparent)',
            opacity: 0.62,
            transform: 'translate(-50%, -50%)',
            transition: 'left 900ms cubic-bezier(.22,1,.36,1), top 900ms cubic-bezier(.22,1,.36,1)',
            animation: `mwMapDrift ${3.1 + pinIndex * 0.22}s ease-in-out infinite`,
            animationDelay: `${pinIndex * 0.18}s`,
          }}/>
        );
      })}

      <div style={{
        position: 'absolute',
        left: `${state.x}%`,
        top: `${state.y}%`,
        transform: 'translate(-50%, -62%)',
        transition: 'left 900ms cubic-bezier(.22,1,.36,1), top 900ms cubic-bezier(.22,1,.36,1)',
        pointerEvents: 'none',
      }}>
        <div style={{
          position: 'absolute',
          left: '50%',
          top: '50%',
          width: 68,
          height: 68,
          transform: 'translate(-50%, -50%)',
          borderRadius: '50%',
          background: 'radial-gradient(circle, color-mix(in oklab, var(--accent) 36%, transparent) 0%, transparent 68%)',
          animation: 'mwMapPulse 2.4s ease-out infinite',
        }}/>
        <div style={{
          position: 'absolute',
          left: '50%',
          top: '50%',
          width: 24,
          height: 24,
          marginLeft: -12,
          marginTop: -12,
          border: '1px solid color-mix(in oklab, var(--accent) 85%, transparent)',
          borderRadius: '50%',
          animation: 'mwMapRing 2.1s ease-out infinite',
        }}/>
        <div style={{
          position: 'relative',
          width: 22,
          height: 22,
          borderRadius: '50% 50% 50% 0',
          background: 'var(--accent)',
          transform: 'rotate(-45deg)',
          boxShadow: '0 0 0 5px color-mix(in oklab, var(--accent) 12%, transparent), 0 16px 32px color-mix(in oklab, black 35%, transparent)',
          animation: 'mwMapFloat 2.8s ease-in-out infinite',
        }}>
          <div style={{
            position: 'absolute',
            inset: 5,
            borderRadius: '50%',
            background: 'var(--bg-elev-1)',
          }}/>
        </div>
        <div style={{
          marginTop: 12,
          marginLeft: 18,
          padding: '6px 9px',
          border: '1px solid color-mix(in oklab, var(--accent) 58%, var(--border-strong))',
          background: 'color-mix(in oklab, var(--bg) 74%, transparent)',
          color: 'var(--fg-1)',
          fontFamily: 'var(--font-mono)',
          fontSize: 9,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          whiteSpace: 'nowrap',
          backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
          boxShadow: '0 12px 28px color-mix(in oklab, black 26%, transparent)',
        }}>
          {query.loc} · {state.label}
        </div>
      </div>
    </div>
  );
}

/* -------------------------------------------------------------------
   Typewriter — types a string out, then holds, then clears.
------------------------------------------------------------------- */
function useTypewriter(targets, { type = 55, hold = 1800, erase = 30 } = {}) {
  const [out, setOut] = useStateSeo('');
  const [idx, setIdx] = useStateSeo(0);
  useEffectSeo(() => {
    let mounted = true;
    let timer;
    const run = async () => {
      const full = targets[idx];
      // type
      for (let i = 1; i <= full.length; i++) {
        await new Promise(r => (timer = setTimeout(r, type)));
        if (!mounted) return;
        setOut(full.slice(0, i));
      }
      await new Promise(r => (timer = setTimeout(r, hold)));
      if (!mounted) return;
      // erase
      for (let i = full.length; i >= 0; i--) {
        await new Promise(r => (timer = setTimeout(r, erase)));
        if (!mounted) return;
        setOut(full.slice(0, i));
      }
      if (!mounted) return;
      setIdx((n) => (n + 1) % targets.length);
    };
    run();
    return () => { mounted = false; clearTimeout(timer); };
  }, [idx, targets]);
  return { text: out, index: idx };
}

/* -------------------------------------------------------------------
   The SERP / Map-Pack simulator
------------------------------------------------------------------- */
function SearchSimulator() {
  const { text, index } = useTypewriter(SEO_QUERY_TEXTS, { type: 45, hold: 2200, erase: 22 });
  const q = SEO_QUERIES[index];
  const [n1, n2, rev1, rev2, c1, c2] = DECOY_NAMES[index % DECOY_NAMES.length];

  return (
    <div style={{
      position: 'relative',
      background: 'var(--bg-elev-1)',
      border: '1px solid var(--border-strong)',
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
    }}>
      {/* Browser chrome */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 14px',
        borderBottom: '1px solid var(--border)',
        background: 'color-mix(in oklab, var(--bg) 70%, var(--bg-elev-1))',
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 9, height: 9, borderRadius: 5, background: 'var(--fg-4)', opacity: 0.4 }}/>
          <span style={{ width: 9, height: 9, borderRadius: 5, background: 'var(--fg-4)', opacity: 0.4 }}/>
          <span style={{ width: 9, height: 9, borderRadius: 5, background: 'var(--fg-4)', opacity: 0.4 }}/>
        </div>
        <div style={{
          flex: 1,
          padding: '6px 12px',
          border: '1px solid var(--border)',
          borderRadius: 999,
          background: 'var(--bg)',
          fontFamily: 'var(--font-mono)',
          fontSize: 12,
          color: 'var(--fg-2)',
          display: 'flex',
          alignItems: 'center',
          gap: 10,
        }}>
          <span style={{ color: 'var(--fg-4)' }}>⌕</span>
          <span>
            {text}
            <span style={{ display: 'inline-block', width: 7, height: 14, marginLeft: 2, background: 'var(--accent)', verticalAlign: 'middle', animation: 'mwBreathe 1s steps(2) infinite' }}/>
          </span>
          <span style={{ marginLeft: 'auto', fontSize: 10, letterSpacing: '0.14em', color: 'var(--fg-4)' }}>GOOGLE</span>
        </div>
      </div>

      {/* Map panel */}
      <div style={{ position: 'relative', height: 180, borderBottom: '1px solid var(--border)' }}>
        <MapPackCanvas query={q} index={index}/>
        <div style={{
          position: 'absolute', top: 12, left: 12,
          fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em',
          color: 'var(--fg-4)', textTransform: 'uppercase',
          padding: '6px 8px',
          background: 'color-mix(in oklab, var(--bg) 68%, transparent)',
          border: '1px solid color-mix(in oklab, var(--border) 84%, transparent)',
          backdropFilter: 'blur(10px)',
          WebkitBackdropFilter: 'blur(10px)',
        }}>
          Map · {q.loc}
        </div>
        <div style={{
          position: 'absolute', top: 12, right: 12,
          fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em',
          color: 'var(--accent)', display: 'flex', alignItems: 'center', gap: 6,
          padding: '6px 8px',
          background: 'color-mix(in oklab, var(--bg) 68%, transparent)',
          border: '1px solid color-mix(in oklab, var(--accent) 28%, var(--border))',
          backdropFilter: 'blur(10px)',
          WebkitBackdropFilter: 'blur(10px)',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)', animation: 'mwBreathe 2s ease-in-out infinite' }}/>
          LIVE — RANK #1
        </div>
      </div>

      {/* Results list — the "local 3-pack" */}
      <div style={{ padding: '4px 0' }}>
        <SerpResult
          rank={1}
          name="YOUR BUSINESS"
          category={q.cat}
          rating="5.0"
          reviews={247}
          tag="SPONSORED BY MIDWEST TECH · OPEN NOW"
          highlight
        />
        <SerpResult rank={2} name={n1} category={q.cat} rating={rev1} reviews={c1}/>
        <SerpResult rank={3} name={n2} category={q.cat} rating={rev2} reviews={c2}/>
      </div>

      {/* Footer strip */}
      <div style={{
        padding: '10px 14px', borderTop: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em',
        color: 'var(--fg-4)', textTransform: 'uppercase',
      }}>
        <span>Local 3-pack · {q.loc}</span>
        <span style={{ color: 'var(--accent)' }}>TOP-3 CAPTURES ~75% OF CLICKS →</span>
      </div>
    </div>
  );
}

/* -------------------------------------------------------------------
   One search-result row
------------------------------------------------------------------- */
function SerpResult({ rank, name, category, rating, reviews, tag, highlight }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-start', gap: 14,
      padding: '14px 18px',
      borderTop: '1px solid var(--border)',
      background: highlight ? 'color-mix(in oklab, var(--accent) 6%, transparent)' : 'transparent',
      position: 'relative',
    }}>
      {highlight && (
        <span style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: 3,
          background: 'var(--accent)',
          boxShadow: '0 0 20px -2px var(--accent)',
        }}/>
      )}
      <div style={{
        flexShrink: 0,
        width: 28, height: 28,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        border: '1px solid ' + (highlight ? 'var(--accent)' : 'var(--border-strong)'),
        background: highlight ? 'var(--accent)' : 'var(--bg)',
        color: highlight ? 'var(--accent-ink)' : 'var(--fg-3)',
        fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
      }}>
        {rank}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: 'var(--font-display)',
          fontSize: 15,
          fontWeight: 500,
          letterSpacing: '-0.01em',
          color: highlight ? 'var(--fg-1)' : 'var(--fg-2)',
          marginBottom: 2,
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}>
          {name}
        </div>
        <div style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 11,
          color: 'var(--fg-4)',
          display: 'flex',
          alignItems: 'center',
          gap: 10,
          flexWrap: 'wrap',
        }}>
          <span style={{ color: highlight ? 'var(--accent)' : 'var(--fg-3)' }}>{rating} ★</span>
          <span>({reviews})</span>
          <span>·</span>
          <span>{category}</span>
        </div>
        {tag && (
          <div style={{
            marginTop: 6,
            fontFamily: 'var(--font-mono)', fontSize: 9,
            letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--accent)',
          }}>
            {tag}
          </div>
        )}
      </div>
    </div>
  );
}

/* -------------------------------------------------------------------
   The section itself
------------------------------------------------------------------- */
function SEOIntelligence() {
  const ref = useRefSeo(null);
  useReveal(ref);

  const stats = [
    { v: '46%',  k: 'Of all Google searches',   note: 'have local intent' },
    { v: '75%',  k: 'Of clicks go to top-3',    note: 'in map-pack results' },
    { v: '76%',  k: '"Near me" searches',       note: 'visit within 24 hrs' },
    { v: '28%',  k: 'End in a purchase',        note: 'same-day conversion' },
  ];

  const steps = [
    { n: '01', k: 'Audit',   d: 'We pull your Google Business Profile, every citation, every review — and map exactly where you rank (or don’t) for the searches that drive business in your town.' },
    { n: '02', k: 'Rank',    d: 'Fix listings, build citations, rewrite descriptions for the queries that actually convert. Clean up duplicates. Get reviews flowing. Push you into the top 3.' },
    { n: '03', k: 'Measure', d: 'A monthly report in plain English — rankings, calls, direction requests, clicks. You see what’s working and what it made you.' },
  ];

  return (
    <section id="seo" ref={ref} className="mw-reveal" style={{
      position: 'relative',
      padding: 'clamp(64px, 10vh, 100px) clamp(20px, 4vw, 32px) clamp(48px, 8vh, 80px)',
      borderTop: '1px solid var(--border)',
    }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <SectionHead
          eyebrow="003 / Get found"
          title={<>If you’re not in the <em style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>top three</em>,<br/>you don’t exist.</>}
          kicker="Nearly half of every Google search is local — someone looking for a plumber, a salon, a roofer, a taco truck. If your business isn’t one of the three results they see first, you’ve already lost the job. We fix that."
        />

        {/* Simulator + stats sidebar */}
        <div
          className="mw-seo-grid"
          style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1.35fr) minmax(260px, 1fr)',
            gap: 24,
            marginTop: 40,
            alignItems: 'start',
          }}
        >
          <SearchSimulator/>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {stats.map(s => (
              <div key={s.k} style={{
                padding: '16px 18px',
                border: '1px solid var(--border-strong)',
                background: 'var(--bg-elev-1)',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, letterSpacing: '-0.03em', color: 'var(--fg-1)', lineHeight: 1 }}>{s.v}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginTop: 6 }}>{s.k}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-4)', marginTop: 2 }}>{s.note}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 3-step process */}
        <div className="mw-seo-steps" style={{
          marginTop: 24,
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 12,
        }}>
          {steps.map(s => (
            <div key={s.n} style={{
              padding: '22px 24px',
              border: '1px solid var(--border-strong)',
              background: 'var(--bg-elev-1)',
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--fg-4)' }}>{s.n}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--fg-1)' }}>{s.k}</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--fg-3)' }}>{s.d}</div>
            </div>
          ))}
        </div>

        {/* Closer / CTA bar */}
        <div className="mw-seo-cta" style={{
          marginTop: 24,
          padding: 'clamp(20px, 3vw, 28px)',
          border: '1px solid var(--accent)',
          background: 'color-mix(in oklab, var(--accent) 5%, var(--bg-elev-1))',
          display: 'grid',
          gridTemplateColumns: '1fr auto',
          gap: 24,
          alignItems: 'center',
        }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--accent)', marginBottom: 8 }}>
              — FREE LOCAL SEARCH AUDIT · 48-HOUR TURNAROUND
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 3vw, 30px)', fontWeight: 500, letterSpacing: '-0.025em', color: 'var(--fg-1)', lineHeight: 1.15, marginBottom: 8 }}>
              See every search you should be ranking for — and every spot you’re losing to a competitor.
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--fg-3)', maxWidth: 640 }}>
              No pitch deck, no sales call. We run a real report on your business, send you a PDF, and you decide what’s worth fixing. OKC-rooted, nationally capable.
            </div>
          </div>
          <div style={{ justifySelf: 'end' }}>
            <MagButton variant="primary" size="lg" href="#contact">Get your free audit</MagButton>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes mwMapPulse {
          0% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.72); }
          65% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
          100% { opacity: 0; transform: translate(-50%, -50%) scale(1.24); }
        }
        @keyframes mwMapRing {
          0% { opacity: 0.8; transform: scale(0.72); }
          100% { opacity: 0; transform: scale(1.85); }
        }
        @keyframes mwMapFloat {
          0%, 100% { transform: rotate(-45deg) translateY(0); }
          50% { transform: rotate(-45deg) translateY(-4px); }
        }
        @keyframes mwMapSweep {
          0%, 100% { opacity: 0.35; }
          50% { opacity: 0.8; }
        }
        @keyframes mwMapDrift {
          0%, 100% { transform: translate(-50%, -50%) scale(1); }
          50% { transform: translate(-50%, calc(-50% - 5px)) scale(1.08); }
        }
        @media (max-width: 980px) {
          .mw-seo-grid { grid-template-columns: 1fr !important; }
          .mw-seo-steps { grid-template-columns: 1fr !important; }
          .mw-seo-cta { grid-template-columns: 1fr !important; }
          .mw-seo-cta > div:last-child { justify-self: stretch !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { SEOIntelligence });