/* =====================================================================
   SEO Section v2 — "003 / Get Found"
   Left: animated SERP/map-pack simulator. Right: stat cards + copy.
   ===================================================================== */
const { useEffect: useEfSeo, useRef: useRefSeo, useState: useStSeo } = React;

const SEO_QUERIES = [
  { q:'plumber near me',        loc:'Oklahoma City, OK', cat:'Plumbing service' },
  { q:'lawn care edmond ok',    loc:'Edmond, OK',        cat:'Lawn & garden' },
  { q:'auto body shop norman',  loc:'Norman, OK',        cat:'Auto body shop' },
  { q:'best salon okc',         loc:'Oklahoma City, OK', cat:'Beauty salon' },
  { q:'hvac repair moore ok',   loc:'Moore, OK',         cat:'HVAC contractor' },
  { q:'roofer stillwater',      loc:'Stillwater, OK',    cat:'Roofing contractor' },
];

const DECOYS = [
  ['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],
];


function useTypewriter(words, speed = 68) {
  const [wi, setWi] = useStSeo(0);
  const [display, setDisplay] = useStSeo('');
  const [phase, setPhase] = useStSeo('type');
  useEfSeo(() => {
    const word = words[wi];
    if (phase === 'type') {
      if (display.length < word.length) {
        const t = setTimeout(() => setDisplay(word.slice(0, display.length + 1)), speed);
        return () => clearTimeout(t);
      } else {
        const t = setTimeout(() => setPhase('hold'), 1600); return () => clearTimeout(t);
      }
    } else if (phase === 'hold') {
      const t = setTimeout(() => setPhase('erase'), 500); return () => clearTimeout(t);
    } else {
      if (display.length > 0) {
        const t = setTimeout(() => setDisplay(display.slice(0, -1)), 38); return () => clearTimeout(t);
      } else {
        setWi((w) => (w + 1) % words.length); setPhase('type');
      }
    }
  }, [display, phase, wi]);
  return display;
}


/* MiniMap — pin stays centered; the WORLD scrolls beneath it as the
   query city changes. Real OK geography: north is up.
   Stillwater is north of Edmond; Edmond north of OKC; Moore south of
   OKC; Norman south of Moore. Going north → dots scroll down.

   No streets, no grid, no labels — just a quiet field of competitor
   dots that drifts as the focus city changes. */
function MiniMap({ qi }) {
  // City offsets in "map units" — how far each city is from OKC center.
  // Positive y = south, negative y = north (real-world north).
  // We'll INVERT y for screen (screen-y grows downward).
  const CITY_OFFSET = [
    { x:   0, y:   0 }, // 0  plumber okc        — OKC central
    { x:  10, y: -34 }, // 1  edmond             — N of OKC, slightly E
    { x:  -2, y:  46 }, // 2  norman             — S
    { x:   0, y:   0 }, // 3  best salon okc     — OKC central
    { x:   2, y:  18 }, // 4  moore              — S of OKC
    { x:  18, y: -78 }, // 5  stillwater         — far N (and a bit E)
  ];
  const o = CITY_OFFSET[qi % CITY_OFFSET.length];

  // The world group translates OPPOSITE to the city's offset:
  //   moving focus NORTH (city y < 0) → world scrolls DOWN (positive screen-y)
  //   moving focus EAST  (city x > 0) → world scrolls LEFT (negative screen-x)
  // Screen-y is inverted vs real-world y, so screen translate = (-cityX, +cityY_real_world_y_negated)
  // Simpler: screenTranslate = (-o.x, -o.y) since o.y is already in real-world (north=neg).
  // We want north-shift to push dots DOWN (positive screen-y), so screenY = -o.y.
  const tx = -o.x;
  const ty = -o.y;

  // A stable cloud of competitor dots scattered across the metro.
  // Coordinates are in "world space" centered on OKC at (75, 75).
  // Density is highest in central OKC (y near 0) and tapers out toward
  // Stillwater (north, y ≈ -78) and the rural south.
  // Real-world: north = negative y. (We render with screen-y, where ty = -o.y.)
  const DOTS = [
    // ── DENSE central OKC cluster (y in roughly -16..+22) ─────────
    { x:  -4, y:   2, r: 1.7, a: 0.65 },
    { x:   8, y:  -6, r: 1.6, a: 0.6  },
    { x: -12, y:   8, r: 1.6, a: 0.6  },
    { x:  16, y:   4, r: 1.6, a: 0.6  },
    { x:  -2, y:  14, r: 1.5, a: 0.55 },
    { x:  22, y:  -2, r: 1.6, a: 0.6  },
    { x: -18, y:  -4, r: 1.5, a: 0.55 },
    { x:  26, y:  16, r: 1.5, a: 0.55 },
    { x: -24, y:  18, r: 1.5, a: 0.55 },
    { x:  10, y:  22, r: 1.5, a: 0.55 },
    { x: -10, y: -14, r: 1.5, a: 0.55 },
    { x:  18, y: -16, r: 1.5, a: 0.55 },
    { x: -28, y:   6, r: 1.5, a: 0.5  },
    { x:  32, y:   8, r: 1.5, a: 0.5  },
    { x:   4, y: -12, r: 1.4, a: 0.55 },
    { x:  14, y:  12, r: 1.4, a: 0.55 },

    // ── Inner ring (Bethany / Del City / Midwest City etc.) ──────
    { x: -38, y:  -2, r: 1.5, a: 0.5  },
    { x:  40, y:  -4, r: 1.5, a: 0.5  },
    { x: -34, y:  22, r: 1.4, a: 0.5  },
    { x:  38, y:  24, r: 1.4, a: 0.5  },
    { x: -42, y: -16, r: 1.4, a: 0.45 },
    { x:  44, y: -14, r: 1.4, a: 0.45 },
    { x:  -8, y:  30, r: 1.4, a: 0.5  },
    { x:  20, y:  32, r: 1.4, a: 0.5  },

    // ── Edmond cluster (north of OKC, y ≈ -34) ────────────────────
    { x:   6, y: -32, r: 1.5, a: 0.5  },
    { x:  18, y: -36, r: 1.4, a: 0.45 },
    { x:  -6, y: -30, r: 1.4, a: 0.45 },
    { x:  14, y: -28, r: 1.3, a: 0.45 },
    { x:  -2, y: -40, r: 1.3, a: 0.4  },
    { x:  24, y: -32, r: 1.3, a: 0.4  },

    // ── Moore cluster (south of OKC, y ≈ +18) ────────────────────
    { x:  -2, y:  16, r: 1.4, a: 0.5  },
    { x:  10, y:  20, r: 1.4, a: 0.45 },
    { x:  -8, y:  22, r: 1.3, a: 0.45 },
    { x:   6, y:  26, r: 1.3, a: 0.4  },

    // ── Norman cluster (further south, y ≈ +46) ──────────────────
    { x:  -8, y:  44, r: 1.4, a: 0.45 },
    { x:   4, y:  48, r: 1.4, a: 0.45 },
    { x:  16, y:  44, r: 1.3, a: 0.4  },
    { x: -14, y:  50, r: 1.3, a: 0.4  },
    { x:   2, y:  56, r: 1.2, a: 0.35 },

    // ── Sparse fill between OKC ↔ Edmond ──────────────────────────
    { x: -22, y: -22, r: 1.2, a: 0.4  },
    { x:  28, y: -22, r: 1.2, a: 0.4  },

    // ── Sparse rural between Edmond ↔ Stillwater (y -42 to -70) ──
    { x:  10, y: -46, r: 1.1, a: 0.34 },
    { x:  -8, y: -50, r: 1.1, a: 0.32 },
    { x:  22, y: -54, r: 1.0, a: 0.3  },
    { x: -18, y: -58, r: 1.0, a: 0.3  },
    { x:  32, y: -62, r: 1.0, a: 0.28 },
    { x:  -2, y: -64, r: 1.0, a: 0.28 },
    { x:  14, y: -68, r: 1.0, a: 0.28 },
    { x: -28, y: -44, r: 0.9, a: 0.26 },
    { x:  38, y: -46, r: 0.9, a: 0.26 },
    { x: -10, y: -72, r: 0.9, a: 0.26 },
    { x:  26, y: -78, r: 0.9, a: 0.26 },

    // ── Stillwater + surroundings (sparse, y ≈ -78 to -100) ──────
    { x:  16, y: -76, r: 1.2, a: 0.35 },
    { x:  22, y: -82, r: 1.0, a: 0.3  },
    { x:  10, y: -84, r: 1.0, a: 0.28 },
    { x:  28, y: -72, r: 1.0, a: 0.3  },
    { x:   2, y: -90, r: 0.9, a: 0.26 },
    { x:  34, y: -94, r: 0.9, a: 0.24 },
    { x:  -6, y: -82, r: 0.9, a: 0.26 },
    { x: -16, y: -90, r: 0.9, a: 0.24 },
    { x:  40, y: -86, r: 0.9, a: 0.24 },
    { x:  18, y:-100, r: 0.8, a: 0.22 },
    { x:  -8, y:-102, r: 0.8, a: 0.22 },

    // ── Sparse rural south of Norman (y +60 to +110) ─────────────
    { x:  -4, y:  62, r: 1.0, a: 0.3  },
    { x:  14, y:  66, r: 1.0, a: 0.3  },
    { x: -16, y:  70, r: 0.9, a: 0.28 },
    { x:  24, y:  74, r: 0.9, a: 0.26 },
    { x:  -8, y:  82, r: 0.9, a: 0.26 },
    { x:   8, y:  86, r: 0.9, a: 0.24 },
    { x: -22, y:  90, r: 0.9, a: 0.24 },
    { x:  18, y:  96, r: 0.8, a: 0.22 },
    { x:  -2, y: 100, r: 0.8, a: 0.22 },
    { x: -28, y:  62, r: 0.9, a: 0.26 },
    { x:  30, y:  58, r: 0.9, a: 0.28 },
    { x:  32, y:  88, r: 0.8, a: 0.22 },

    // ── Distant west / east (rural, very sparse) ──────────────────
    { x: -64, y:  -8, r: 1.0, a: 0.3  },
    { x: -72, y:  18, r: 0.9, a: 0.26 },
    { x:  68, y:  10, r: 1.0, a: 0.3  },
    { x:  78, y: -22, r: 0.9, a: 0.26 },
    { x:  74, y:  36, r: 0.9, a: 0.26 },
    { x: -56, y:  40, r: 1.0, a: 0.3  },
    { x: -82, y:  -4, r: 0.9, a: 0.24 },
    { x: -88, y:  32, r: 0.8, a: 0.22 },
    { x:  86, y:  -6, r: 0.9, a: 0.24 },
    { x:  92, y:  20, r: 0.8, a: 0.22 },
    { x: -68, y: -28, r: 0.9, a: 0.24 },
    { x:  60, y: -42, r: 0.9, a: 0.24 },
    { x: -70, y:  58, r: 0.8, a: 0.22 },
    { x:  66, y:  62, r: 0.8, a: 0.22 },
    { x: -48, y: -42, r: 0.9, a: 0.26 },
    { x:  48, y: -58, r: 0.9, a: 0.24 },
    { x: -52, y:  74, r: 0.8, a: 0.22 },
    { x:  44, y:  82, r: 0.8, a: 0.22 },

    // ── Far north flanks of Stillwater (rural farmland) ──────────
    { x: -36, y: -76, r: 0.9, a: 0.24 },
    { x:  52, y: -70, r: 0.9, a: 0.24 },
    { x: -44, y: -94, r: 0.8, a: 0.22 },
    { x:  56, y: -90, r: 0.8, a: 0.22 },

    // ── Far south flanks (rural) ─────────────────────────────────
    { x: -42, y:  78, r: 0.8, a: 0.22 },
    { x:  46, y:  70, r: 0.9, a: 0.24 },
    { x: -38, y: 102, r: 0.8, a: 0.22 },
    { x:  40, y: 104, r: 0.8, a: 0.22 },
  ];

  return (
    <svg viewBox="0 0 150 150" preserveAspectRatio="xMidYMid slice"
      style={{ width:'100%', height:'100%', display:'block' }}>
      {/* Mask so dots don't bleed past the map frame while scrolling */}
      <defs>
        <clipPath id="mmClip"><rect x="0" y="0" width="150" height="150"/></clipPath>
      </defs>

      <g clipPath="url(#mmClip)">
        {/* Scrolling world of competitor dots */}
        <g style={{
          transform: `translate(${tx}px, ${ty}px)`,
          transition: 'transform 900ms cubic-bezier(.6,.05,.25,1)',
        }}>
          {DOTS.map((d, i) => (
            <circle key={i}
              cx={75 + d.x} cy={75 + d.y} r={d.r}
              fill="var(--fg-4)" opacity={d.a}/>
          ))}
        </g>

        {/* YOUR pin — fixed dead-center, tip at (75, 80) */}
        <ellipse cx="75" cy="81.5" rx="5" ry="1.4" fill="rgba(0,0,0,0.35)"/>
        <path d="M 75 80 L 68.4 67.5 A 8 8 0 1 1 81.6 67.5 Z"
          fill="var(--accent)" stroke="var(--accent-strong)" strokeWidth="0.6"/>
        <circle cx="75" cy="66" r="3.2" fill="var(--accent-ink)"/>
        <text x="75" y="68.4" fontSize="5" fontFamily="var(--font-mono)" fontWeight="700"
          fill="var(--accent)" textAnchor="middle">1</text>
      </g>
    </svg>
  );
}


function SearchSimulator() {
  const queryTexts = SEO_QUERIES.map(q => q.q);
  const typed = useTypewriter(queryTexts);
  const qi = SEO_QUERIES.findIndex(q => q.q.startsWith(typed.slice(0, 5))) >= 0
    ? SEO_QUERIES.findIndex(q => q.q.startsWith(typed.slice(0, 5))) : 0;
  const q = SEO_QUERIES[qi % SEO_QUERIES.length];
  const decoy = DECOYS[qi % DECOYS.length];

  return (
    <div style={{ background:'var(--bg-elev-1)', border:'1px solid var(--border-strong)', overflow:'hidden' }}>
      {/* Browser chrome */}
      <div style={{ padding:'10px 14px', borderBottom:'1px solid var(--border)', background:'var(--bg-elev-2)',
        display:'flex', alignItems:'center', gap:10 }}>
        <div style={{display:'flex',gap:5}}>
          {['#e05252','#e0a052','#52b252'].map(c=><div key={c} style={{width:9,height:9,borderRadius:'50%',background:c,opacity:0.7}}/>)}
        </div>
        <div style={{ flex:1, background:'var(--bg)', border:'1px solid var(--border-strong)',
          borderRadius:3, padding:'5px 12px', fontFamily:'var(--font-mono)', fontSize:11,
          color:'var(--fg-3)', display:'flex', alignItems:'center', gap:6, overflow:'hidden' }}>
          <span style={{opacity:0.5}}>google.com/search?q=</span>
          <span style={{color:'var(--fg-1)',whiteSpace:'nowrap',overflow:'hidden',maxWidth:200}}>{typed}</span>
          <span style={{width:2,height:13,background:'var(--fg-1)',animation:'mwBreathe 1s infinite'}}/>
        </div>
      </div>

      <div style={{ padding:16 }}>
        {/* Map pack — ranked listings only. No fake geography. */}
        <div style={{ border:'1px solid var(--border)', marginBottom:14, overflow:'hidden' }}>
          <div style={{
            display:'flex', alignItems:'center', justifyContent:'space-between',
            padding:'8px 12px', borderBottom:'1px solid var(--border)',
            background:'var(--bg-elev-2)',
            fontFamily:'var(--font-mono)', fontSize:9, letterSpacing:'0.16em', color:'var(--fg-3)',
          }}>
            <span>◇ MAP PACK · TOP 3 IN {q.loc.toUpperCase()}</span>
            <span style={{ display:'flex', alignItems:'center', gap:6 }}>
              <span style={{ width:5, height:5, background:'#52b252', borderRadius:'50%',
                boxShadow:'0 0 6px #52b252' }}/>
              LIVE
            </span>
          </div>
          {/* Side-by-side: ranked listings + a small abstract map.
              Stacks under .mw-serp-row breakpoint on narrow phones. */}
          <div className="mw-serp-row">
            {/* Listing column */}
            <div style={{ borderRight:'1px solid var(--border)' }}>
            {/* YOUR BUSINESS — pinned #1 */}
            <div style={{ padding:'12px 14px 12px 18px', background:'color-mix(in oklab,var(--accent) 6%,transparent)',
              borderBottom:'1px solid var(--border)', position:'relative',
              display:'grid', gridTemplateColumns:'22px 1fr auto', gap:10, alignItems:'center' }}>
              <div style={{position:'absolute',left:0,top:0,bottom:0,width:3,background:'var(--accent)'}}/>
              <div style={{
                width:22, height:22, background:'var(--accent)', color:'var(--accent-ink)',
                fontFamily:'var(--font-mono)', fontWeight:700, fontSize:11,
                display:'flex', alignItems:'center', justifyContent:'center',
              }}>1</div>
              <div>
                <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:2,flexWrap:'wrap'}}>
                  <span style={{fontFamily:'var(--font-display)',fontSize:14,fontWeight:600,color:'var(--fg-1)'}}>Your Business Name</span>
                  <span style={{fontFamily:'var(--font-mono)',fontSize:9,letterSpacing:'0.12em',
                    background:'var(--accent)',color:'var(--accent-ink)',padding:'2px 6px'}}>YOU</span>
                </div>
                <div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--accent)',letterSpacing:'0.08em'}}>
                  ★★★★★ 5.0 · (47) · {q.cat}
                </div>
                <div style={{fontFamily:'var(--font-mono)',fontSize:9,color:'var(--fg-3)',marginTop:2,letterSpacing:'0.06em'}}>
                  {q.loc} · <span style={{color:'var(--accent)'}}>OPEN NOW</span>
                </div>
              </div>
              <div style={{fontFamily:'var(--font-mono)',fontSize:9,color:'var(--accent)',letterSpacing:'0.1em',
                textAlign:'right', whiteSpace:'nowrap'}}>◆ #1</div>
            </div>
            {/* Competitors */}
            {[0,1].map(i=>(
              <div key={i} style={{
                padding:'10px 14px 10px 18px',
                borderBottom: i===0 ? '1px solid var(--border)' : 'none',
                opacity:0.72,
                display:'grid', gridTemplateColumns:'22px 1fr auto', gap:10, alignItems:'center'
              }}>
                <div style={{
                  width:22, height:22, background:'transparent', color:'var(--fg-3)',
                  border:'1px solid var(--border-strong)',
                  fontFamily:'var(--font-mono)', fontWeight:700, fontSize:11,
                  display:'flex', alignItems:'center', justifyContent:'center',
                }}>{i+2}</div>
                <div>
                  <div style={{fontFamily:'var(--font-display)',fontSize:13,fontWeight:500,color:'var(--fg-2)'}}>
                    {decoy[i]}
                  </div>
                  <div style={{fontFamily:'var(--font-mono)',fontSize:9,color:'var(--fg-4)',letterSpacing:'0.06em',marginTop:2}}>
                    ★ {decoy[i+2]} · ({decoy[i+4]}) · {q.loc}
                  </div>
                </div>
                <div style={{fontFamily:'var(--font-mono)',fontSize:9,color:'var(--fg-4)',letterSpacing:'0.1em',textAlign:'right'}}>#{i+2}</div>
              </div>
            ))}
            </div>
            {/* Mini map — clean schematic with a pin that hops between neighborhoods.
                One pin position per query (qi), so it changes as the typewriter cycles. */}
            <div style={{ position:'relative', background:'var(--bg)', overflow:'hidden' }}>
              <MiniMap qi={qi}/>
            </div>
          </div>
        </div>

        {/* Organic results */}
        {[
          { t:'Your Business Name — Official Site', u:'yourbusiness.com', d:`The best ${q.cat.toLowerCase()} in ${q.loc}. Serving the OKC metro. Call for a free estimate.` },
          { t:decoy[0]+' · '+q.loc, u:'statewidepro.com', d:'Professional services. Serving Oklahoma since 2008. Licensed & insured.' },
          { t:decoy[1]+' — '+q.loc+' '+q.cat, u:'cardinal-co.com', d:'Family-owned and operated. Free estimates, transparent pricing, and 24/7 emergency service across the metro.' },
        ].map((r,i)=>(
          <div key={i} style={{ marginBottom:10 }}>
            <div style={{fontFamily:'var(--font-mono)',fontSize:9,color:'var(--fg-4)',letterSpacing:'0.08em',marginBottom:2}}>{r.u}</div>
            <div style={{fontFamily:'var(--font-display)',fontSize:14,fontWeight:500,
              color:i===0?'var(--accent)':'var(--fg-2)',letterSpacing:'-0.01em',marginBottom:3}}>{r.t}</div>
            <div style={{fontFamily:'var(--font-body)',fontSize:12,color:'var(--fg-3)',lineHeight:1.4}}>{r.d}</div>
          </div>
        ))}

        {/* Ranking signals row — densifies the SERP simulator card so
            the left column stretches to match the right stat stack
            without leaving an empty gutter. Each pill names a real
            signal we manage (NAP citations, GBP review velocity, local
            content cadence, schema). Operator complaint was "tons of
            wasted real estate" — this fills it with brand-aligned
            content that doubles as a quiet competence signal. */}
        <div style={{marginTop:18,paddingTop:14,borderTop:'1px solid var(--border)'}}>
          <div style={{fontFamily:'var(--font-mono)',fontSize:9,letterSpacing:'0.16em',
            color:'var(--fg-4)',marginBottom:10}}>
            ◇ WHAT WE OPTIMIZE — TOP-3 RANKING SIGNALS
          </div>
          <div style={{display:'grid',
            gridTemplateColumns:'repeat(auto-fit,minmax(160px,1fr))',gap:8}}>
            {[
              { k:'GBP', t:'Google Business Profile', d:'Posts, photos, hours, services' },
              { k:'NAP', t:'Citations cleanup', d:'Yelp · BBB · Apple Maps · 30+' },
              { k:'REV', t:'Review velocity', d:'Steady 5-star inflow' },
              { k:'SCH', t:'Schema markup', d:'LocalBusiness · Service · FAQ' },
              { k:'CON', t:'Local content', d:'Monthly OKC-tuned posts' },
              { k:'LNK', t:'Local backlinks', d:'OK chamber, press, partners' },
            ].map((s)=>(
              <div key={s.k} style={{display:'flex',alignItems:'flex-start',gap:8,
                padding:'9px 10px',background:'var(--bg-elev-1)',
                border:'1px solid var(--border)',minWidth:0}}>
                <span style={{flex:'0 0 auto',padding:'2px 6px',
                  background:'color-mix(in oklab,var(--accent) 14%,transparent)',
                  border:'1px solid color-mix(in oklab,var(--accent) 36%,transparent)',
                  fontFamily:'var(--font-mono)',fontSize:9,fontWeight:700,
                  letterSpacing:'0.1em',color:'var(--accent)'}}>{s.k}</span>
                <div style={{minWidth:0}}>
                  <div style={{fontFamily:'var(--font-display)',fontSize:12,fontWeight:600,
                    color:'var(--fg-1)',letterSpacing:'-0.01em',lineHeight:1.2}}>{s.t}</div>
                  <div style={{fontFamily:'var(--font-mono)',fontSize:9,
                    color:'var(--fg-4)',letterSpacing:'0.06em',marginTop:3,lineHeight:1.3,
                    overflow:'hidden',textOverflow:'ellipsis'}}>{s.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function SEOStatCard({ value, label, detail }) {
  const ref = useRefSeo(null); useReveal(ref);
  // Padding, font sizes, and per-element spacing live in globals.css
  // (.mw-stats-card / .mw-stats-value / .mw-stats-label / .mw-stats-detail)
  // so the desktop column and mobile 3-up grid can size differently
  // without prop-drilling style overrides.
  return (
    <div ref={ref} className="mw-reveal mw-stats-card" style={{ background:'var(--bg-elev-1)',
      border:'1px solid var(--border-strong)', display:'flex', flexDirection:'column' }}>
      <div className="mw-stats-value" style={{fontFamily:'var(--font-display)',fontWeight:500,letterSpacing:'-0.05em',lineHeight:1,color:'var(--fg-1)'}}>{value}</div>
      <div className="mw-stats-label" style={{fontFamily:'var(--font-mono)',textTransform:'uppercase',color:'var(--fg-3)'}}>{label}</div>
      <div className="mw-stats-detail" style={{fontFamily:'var(--font-mono)',color:'var(--fg-4)',lineHeight:1.4}}>{detail}</div>
    </div>
  );
}

/* RankingJourney — fills SEO column real estate with a real progress story */
function RankingJourney() {
  const ref = useRefSeo(null); useReveal(ref);
  // Position over 12 weeks: starts at #28, ends at #1. Lower y = higher rank.
  const weeks = [
    {w:0,  pos:28, label:'Week 0',  note:'Baseline — page 3'},
    {w:1,  pos:24},
    {w:2,  pos:21, label:'Week 2',  note:'Audit + on-page fixes'},
    {w:3,  pos:17},
    {w:4,  pos:14},
    {w:5,  pos:11, label:'Week 5',  note:'GBP optimized'},
    {w:6,  pos:8},
    {w:7,  pos:6},
    {w:8,  pos:5,  label:'Week 8',  note:'Top 5 organic'},
    {w:9,  pos:3},
    {w:10, pos:2},
    {w:11, pos:1,  label:'Week 11', note:'#1 map pack'},
  ];
  // Map pos 1..30 to y 14..134 (chart area: x 56..744, y 14..134)
  const X = (w) => 56 + (w / 11) * (744 - 56);
  const Y = (p) => 14 + ((p - 1) / 29) * (134 - 14);
  const pts = weeks.map(d => `${X(d.w)},${Y(d.pos)}`).join(' ');
  const annotated = weeks.filter(d => d.label);

  return (
    <div ref={ref} className="mw-reveal" style={{marginTop:18,background:'var(--bg-elev-1)',
      border:'1px solid var(--border-strong)',padding:'18px 20px',display:'flex',flexDirection:'column',gap:12}}>
      {/* Header row */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:14,flexWrap:'wrap'}}>
        <div>
          <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.18em',color:'var(--fg-4)',marginBottom:4}}>— REAL CLIENT · 12-WEEK RANKING JOURNEY</div>
          <div style={{fontFamily:'var(--font-display)',fontSize:'clamp(22px,2.4vw,28px)',fontWeight:500,letterSpacing:'-0.025em',lineHeight:1.05}}>
            From <span style={{color:'var(--fg-4)'}}>page 3</span> to <span style={{color:'var(--accent)'}}>#1</span> in the map pack.
          </div>
        </div>
        <div style={{display:'flex',gap:18,fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.1em',color:'var(--fg-4)'}}>
          <div style={{display:'flex',alignItems:'center',gap:6}}>
            <span style={{width:14,height:2,background:'var(--accent)'}}/>YOUR RANK
          </div>
          <div style={{display:'flex',alignItems:'center',gap:6}}>
            <span style={{width:14,height:2,background:'var(--fg-4)',opacity:0.5,borderTop:'1px dashed var(--fg-4)'}}/>TOP 3 LINE
          </div>
        </div>
      </div>

      {/* Chart */}
      <div style={{position:'relative'}}>
        <svg viewBox="0 0 760 170" preserveAspectRatio="none" style={{width:'100%',height:'auto',display:'block'}}>
          {/* Y-axis labels (rank positions) */}
          {[1,5,10,20,30].map(p => (
            <g key={p}>
              <line x1="56" x2="744" y1={Y(p)} y2={Y(p)} stroke="var(--border)" strokeWidth="0.5" strokeDasharray="2 3"/>
              <text x="46" y={Y(p)+3} fontSize="9" fill="var(--fg-4)" fontFamily="var(--font-mono)" textAnchor="end" letterSpacing="0.08em">#{p}</text>
            </g>
          ))}
          {/* Top 3 zone */}
          <rect x="56" y={Y(1)} width={744-56} height={Y(3)-Y(1)} fill="var(--accent)" opacity="0.06"/>
          <line x1="56" x2="744" y1={Y(3)} y2={Y(3)} stroke="var(--fg-4)" strokeWidth="0.5" strokeDasharray="3 3" opacity="0.6"/>

          {/* Area under curve */}
          <polyline points={`56,${Y(1)} ${pts} 744,${Y(1)}`}
            fill="var(--accent)" opacity="0.12"/>
          {/* Main line */}
          <polyline points={pts} fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/>
          {/* Data points */}
          {weeks.map(d => (
            <circle key={d.w} cx={X(d.w)} cy={Y(d.pos)} r={d.label?3.5:2}
              fill={d.label?'var(--accent)':'var(--bg-elev-1)'}
              stroke="var(--accent)" strokeWidth={d.label?1.5:1}/>
          ))}

          {/* X-axis week labels */}
          {[0,3,6,9,11].map(w => (
            <text key={w} x={X(w)} y="158" fontSize="9" fill="var(--fg-4)"
              fontFamily="var(--font-mono)" textAnchor="middle" letterSpacing="0.1em">W{w === 11 ? '11' : String(w).padStart(2,'0')}</text>
          ))}

          {/* Annotations on key weeks */}
          {annotated.map((d,i) => {
            const x = X(d.w), y = Y(d.pos);
            const above = d.pos > 10;
            const labelY = above ? y - 12 : y + 22;
            return (
              <g key={d.w}>
                <line x1={x} y1={y} x2={x} y2={above ? y - 6 : y + 6}
                  stroke="var(--accent)" strokeWidth="0.8" opacity="0.6"/>
                <text x={x} y={labelY} fontSize="9" fill="var(--accent)"
                  fontFamily="var(--font-mono)" textAnchor="middle" letterSpacing="0.08em" fontWeight="700">{d.note}</text>
              </g>
            );
          })}
        </svg>
      </div>

      {/* Summary strip */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:0,
        borderTop:'1px solid var(--border)',paddingTop:12,marginTop:2}}>
        {[
          {l:'CALLS / MO', from:'12', to:'58', delta:'+383%'},
          {l:'MAP PACK',   from:'#28', to:'#1', delta:'TOP 3'},
          {l:'COST / LEAD',from:'$94', to:'$22', delta:'−77%'},
        ].map((m,i) => (
          <div key={m.l} style={{padding:'4px 14px',
            borderLeft:i>0?'1px solid var(--border)':'none',
            display:'flex',flexDirection:'column',gap:4}}>
            <div style={{fontFamily:'var(--font-mono)',fontSize:9,letterSpacing:'0.16em',color:'var(--fg-4)'}}>{m.l}</div>
            <div style={{display:'flex',alignItems:'baseline',gap:8,flexWrap:'wrap'}}>
              <span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--fg-4)',textDecoration:'line-through'}}>{m.from}</span>
              <span style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:600,letterSpacing:'-0.02em',color:'var(--fg-1)'}}>{m.to}</span>
              <span style={{fontFamily:'var(--font-mono)',fontSize:9,letterSpacing:'0.1em',color:'var(--accent)',fontWeight:700,marginLeft:'auto'}}>{m.delta}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SEOIntelligence() {
  const ref = useRefSeo(null); useReveal(ref);
  return (
    <section id="seo" ref={ref} className="mw-reveal" style={{padding:'clamp(64px,10vh,100px) clamp(20px,4vw,32px) 40px',maxWidth:1440,margin:'0 auto'}}>
      <SectionHead
        eyebrow="003 / Get found"
        title={<>Show up first.<br/><em style={{fontFamily:'var(--font-editorial)',fontStyle:'italic',fontWeight:400,color:'var(--accent)'}}>Stay there.</em></>}
        kicker="We build every site with local SEO for Oklahoma baked in. Then, month by month, we manage your Google Business Profile, clean up citations, write content, and track your map pack ranking — until your business is the first result customers in OKC see."
      />
      <div className="mw-seo-grid">
        {/* Right: SERP simulator. .mw-seo-serp scopes mobile font shrinks. */}
        <div className="mw-seo-serp" style={{minWidth:0}}>
          <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.18em',color:'var(--fg-4)',marginBottom:16,display:'flex',alignItems:'center',gap:10}}>
            <span style={{width:6,height:6,background:'var(--accent)',boxShadow:'0 0 8px var(--accent)',animation:'mwBreathe 2s infinite'}}/>
            LIVE SEARCH PREVIEW — WATCH YOUR RANKING RISE
          </div>
          <SearchSimulator/>
          <div style={{marginTop:14,padding:'14px 16px',background:'var(--bg-elev-1)',border:'1px solid var(--border)',
            fontFamily:'var(--font-mono)',fontSize:10,color:'var(--fg-4)',letterSpacing:'0.1em',lineHeight:1.6}}>
            THIS IS WHAT YOUR CUSTOMERS SEE. WE MAKE SURE THEY SEE YOU FIRST.
          </div>
        </div>
        {/* Left: stats + copy. Stats wrap their own grid so mobile can
            collapse the column-stacked tiles to a tight 3-up row.
            Stat copy uses SEO-keyword-tuned text from the May 2026
            audit pass — sourced numbers (BrightLocal) on stat 1, OKC-
            specific measurement window on stat 2. */}
        <div className="mw-seo-side" style={{display:'flex',flexDirection:'column',gap:12,minWidth:0}}>
          <div className="mw-seo-stats-grid">
            <SEOStatCard value="93%" label="Of local searches click top-3 results" detail="Businesses outside the top-3 Google map pack capture less than 7% of local search clicks — even with a paid ad running. Source: BrightLocal Local Consumer Review Survey."/>
            <SEOStatCard value="4.8×" label="More calls after hitting OKC map pack top 3" detail="Measured across 12 Oklahoma City service businesses we moved from page 2 or lower to map pack position 1–3 between 2023 and 2025."/>
            <SEOStatCard value={window.MWT_PRICING.seoStartShort} label="Starts at / month" detail="Includes Google Business management, review strategy, local citations, and monthly content."/>
          </div>
          <div className="mw-seo-cta" style={{padding:'18px 22px',background:'color-mix(in oklab,var(--accent) 6%,transparent)',border:'1px solid color-mix(in oklab,var(--accent) 30%,transparent)'}}>

            <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.14em',color:'var(--accent)',marginBottom:8}}>— NO LONG-TERM CONTRACT</div>
            <div style={{fontFamily:'var(--font-display)',fontSize:'clamp(17px,4.4vw,20px)',fontWeight:500,letterSpacing:'-0.02em',lineHeight:1.2,marginBottom:12}}>
              Month-to-month SEO that actually moves the needle.
            </div>
            <MagButton size="sm" variant="primary" href="#contact">Get a free SEO audit</MagButton>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SEOIntelligence });