/* SEO — SERP list with a result climbing from #8 to #1. */
const { useState: useStateSeo, useEffect: useEffectSeo } = React;

const serpItems = [
  { title: "Best furniture store in HSR — Top 10 picks", site: "citybuzz.in" },
  { title: "HSR Layout furniture shops directory", site: "localfinder.in" },
  { title: "Kavya's Furniture — HSR Layout, Bangalore", site: "kavyafurniture.in", me: true },
  { title: "Modular sofas near me", site: "sofafinder.com" },
  { title: "Bangalore furniture deals 2026", site: "homepost.in" },
  { title: "Top interior shops HSR Layout", site: "interior.in" },
];

function SEOStage() {
  const [pos, setPos] = useStateSeo(4);
  useEffectSeo(() => {
    const positions = [4, 3, 2, 1, 0, 0, 0];
    let i = 0;
    const t = setInterval(() => {
      setPos(positions[i]);
      i = (i + 1) % positions.length;
    }, 900);
    return () => clearInterval(t);
  }, []);

  const ordered = [...serpItems];
  const meIdx = ordered.findIndex(x => x.me);
  const [me] = ordered.splice(meIdx, 1);
  ordered.splice(pos, 0, me);

  return (
    <div className="seo-stage">
      <div className="seo-search">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-4.5-4.5"/></svg>
        <span>furniture store hsr layout<span className="caret" style={{ height: 12 }} /></span>
      </div>
      <div className="seo-rank"><span className="rank-badge">#{pos + 1}</span> <span className="rank-label">Your rank</span></div>
      <div className="serp">
        {ordered.map((it, i) => (
          <div key={it.site} className={`serp-item ${it.me ? 'me' : ''}`}>
            <div className="serp-pos">{i + 1}</div>
            <div className="serp-body">
              <div className="serp-site">{it.site}</div>
              <div className="serp-title">{it.title}</div>
            </div>
            {it.me && <div className="serp-badge">you</div>}
          </div>
        ))}
      </div>
      <style>{`
        .seo-stage { width: 100%; height: 100%; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-family: var(--f-sans); }
        .seo-search {
          display: flex; align-items: center; gap: 8px;
          padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px;
          background: var(--paper); color: var(--ink-2); font-size: 13px;
        }
        html.dark .seo-search { background: var(--paper-3); }
        .seo-rank { display: flex; align-items: center; gap: 8px; }
        .rank-badge { background: var(--accent); color: var(--accent-ink); padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 13px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
        .rank-label { font-size: 11px; color: var(--muted); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
        .serp { display: flex; flex-direction: column; gap: 4px; }
        .serp-item {
          display: flex; align-items: center; gap: 10px;
          padding: 8px 10px; border-radius: 8px;
          transition: all .6s cubic-bezier(.2,.7,.2,1);
          background: transparent;
        }
        .serp-item.me { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
        .serp-pos { font: 500 12px/1 var(--f-mono); color: var(--muted); width: 18px; }
        .serp-body { flex: 1; min-width: 0; }
        .serp-site { font-size: 10.5px; color: var(--muted); }
        .serp-title { font-size: 12.5px; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .serp-item.me .serp-title { font-weight: 500; color: var(--accent-ink); }
        html.dark .serp-item.me .serp-title { color: #7ce3b0; }
        .serp-badge { font: 500 10px/1 var(--f-mono); color: var(--accent-ink); background: var(--paper); padding: 3px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .1em; }
      `}</style>
    </div>
  );
}

window.SEOStage = SEOStage;