/* Benchmark section — overview stats, race chart, heatmap, industry, interactive picker */

const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

/* ---------- shared data ---------- */
const PROVIDERS = [
  { id: "string",     name: "String Unblocker", short: "String",     rate: 97.1, us: true },
  { id: "bright",     name: "Bright Unlocker",  short: "Bright",     rate: 73.3 },
  { id: "firecrawl",  name: "Firecrawl",        short: "Firecrawl",  rate: 63.8 },
  { id: "mrscraper",  name: "Mrscraper",        short: "Mrscraper",  rate: 45.2 },
  { id: "browseruse", name: "Browser Use",      short: "BrowserUse", rate: 44.3 },
  { id: "browserbase",name: "Browserbase",      short: "Browserbase",rate: 35.7 }
];

const INDUSTRIES = [
  { name: "Retail",              vals: [91.7, 81.7, 68.3, 25.0, 41.7, 35.0] },
  { name: "Apparel & Luxury",    vals: [97.8, 75.6, 64.4, 44.4, 37.8, 22.2] },
  { name: "Travel & Hospitality",vals: [100, 60.0, 40.0, 80.0, 48.0, 44.0] },
  { name: "Jobs & Careers",      vals: [100, 85.0, 80.0, 75.0, 90.0, 70.0] },
  { name: "Home & DIY",          vals: [100, 93.3, 93.3, 33.3, 33.3, 33.3] },
  { name: "News & Finance",      vals: [100, 100, 66.7, 33.3, 80.0, 60.0] },
  { name: "Reviews",             vals: [100, 0,    40.0, 50.0, 0,    0] },
  { name: "Real Estate",         vals: [100, 50.0, 50.0, 50.0, 40.0, 50.0] },
  { name: "Automotive",          vals: [100, 50.0, 50.0, 50.0, 0,    0] }
];

const TARGETS = [
  { url: "azure.microsoft.com/pricing", defense: "DataDome", vals: [100, 80, 60, 20, 40, 20], note: "VM pricing page" },
  { url: "walmart.com/ip/product",      defense: "Akamai",   vals: [98, 78, 55, 15, 30, 10],  note: "Product detail" },
  { url: "indeed.com/jobs",             defense: "Cloudflare",vals: [100, 90, 85, 80, 85, 75], note: "Job search results" },
  { url: "zillow.com/homes",            defense: "Cloudflare",vals: [100, 50, 50, 50, 40, 50], note: "Real estate listings" },
  { url: "expedia.com/hotels",          defense: "Kasada",   vals: [100, 60, 40, 80, 50, 45], note: "Hotel search" },
  { url: "redfin.com/city",             defense: "Akamai",   vals: [100, 40, 50, 30, 35, 40], note: "City listings" },
  { url: "yelp.com/biz",                defense: "DataDome", vals: [100, 0, 40, 50, 0, 0],    note: "Business reviews" },
  { url: "carmax.com/cars",             defense: "Kasada",   vals: [100, 50, 50, 50, 0, 0],   note: "Car listings" }
];

// Per-row heatmap intensity helper (relative to row max)
function heatColor(v, max) {
  if (max === 0) return "var(--bg-3)";
  const t = v / Math.max(max, 1);
  // Map to blue scale (low: muted, high: accent)
  // We always make the absolute winner (>=95%) deep accent.
  if (v >= 95) return "linear-gradient(135deg, var(--accent-deep), var(--accent-2))";
  if (v >= 80) return `rgba(56,120,255,${0.55})`;
  if (v >= 60) return `rgba(56,120,255,${0.38})`;
  if (v >= 40) return `rgba(56,120,255,${0.22})`;
  if (v >= 20) return `rgba(56,120,255,${0.12})`;
  return `rgba(60,68,82,0.55)`;
}

/* ---------- overview stats ---------- */
function BenchOverview() {
  return (
    <div className="stat-grid">
      <div className="stat win">
        <div className="stat-num">97.1<span className="sub">%</span></div>
        <div className="stat-label">String Unblocker success</div>
      </div>
      <div className="stat">
        <div className="stat-num">42</div>
        <div className="stat-label">Target tests</div>
      </div>
      <div className="stat">
        <div className="stat-num">6</div>
        <div className="stat-label">Providers benchmarked</div>
      </div>
      <div className="stat">
        <div className="stat-num">210</div>
        <div className="stat-label">Requests per provider</div>
      </div>
    </div>
  );
}

/* ---------- race chart ---------- */
function RaceChart() {
  const [animated, setAnimated] = useStateB(false);
  const ref = useRefB(null);

  useEffectB(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setAnimated(true); });
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={ref} className="race">
      {PROVIDERS.map((p) => (
        <div key={p.id} className={"race-row" + (p.us ? " win" : "")}>
          <div className="name">
            <span className="swatch" />
            <span className={p.us ? "us" : ""}>{p.name}</span>
          </div>
          <div className="track">
            <div className="fill" style={{ width: animated ? `${p.rate}%` : 0 }} />
          </div>
          <div className="pct">{p.rate.toFixed(1)}%</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- heatmap ---------- */
function Heatmap() {
  const [hovered, setHovered] = useStateB(null);

  return (
    <>
      <div className="heat">
        <span />
        {PROVIDERS.map((p) => (
          <span key={p.id} className={"hh" + (p.us ? " us" : "")}>
            {p.short}
          </span>
        ))}
        {INDUSTRIES.map((row, ri) => {
          const max = Math.max(...row.vals);
          return (
            <React.Fragment key={ri}>
              <span className="hl">{row.name}</span>
              {row.vals.map((v, ci) => (
                <div
                  key={ci}
                  className="cell"
                  style={{ background: heatColor(v, max) }}
                  onMouseEnter={() => setHovered({ row: row.name, col: PROVIDERS[ci].name, val: v })}
                  onMouseLeave={() => setHovered(null)}
                >
                  {v === 100 ? "100" : v.toFixed(0)}
                </div>
              ))}
            </React.Fragment>
          );
        })}
      </div>
      <div style={{
        marginTop: 18, display: "flex", justifyContent: "space-between",
        alignItems: "center", fontFamily: "var(--font-mono)", fontSize: 11,
        color: "var(--text-mute)", flexWrap: "wrap", gap: 12
      }}>
        <div>
          {hovered
            ? <span><span style={{ color: "var(--text)" }}>{hovered.row}</span> × {hovered.col} → <span style={{ color: "var(--accent-2)" }}>{hovered.val.toFixed(1)}%</span></span>
            : <span>Hover any cell · darker = higher success rate · per-row scale</span>
          }
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span>0%</span>
          <div style={{ width: 100, height: 8, borderRadius: 999, background: "linear-gradient(90deg, rgba(60,68,82,0.55), rgba(56,120,255,0.6), var(--accent))" }} />
          <span>100%</span>
        </div>
      </div>
    </>
  );
}

/* ---------- industry grouped chart ---------- */
function IndustryChart() {
  const [animated, setAnimated] = useStateB(false);
  const ref = useRefB(null);

  useEffectB(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setAnimated(true); });
    }, { threshold: 0.2 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={ref} className="industry-chart">
      {INDUSTRIES.map((row, ri) => (
        <div key={ri} className="industry-row">
          <div className="ind-name">{row.name}</div>
          <div className="ind-bars">
            {PROVIDERS.map((p, ci) => (
              <div key={p.id} className={"ind-bar" + (p.us ? " win" : "")} style={{ position: "relative" }}>
                <div className="fill" style={{ width: animated ? `${row.vals[ci]}%` : 0, transition: `width 1.2s cubic-bezier(.2,.7,.2,1) ${ci * 0.05}s` }} />
                <div className={"lbl" + (p.us ? "" : " other")}>
                  {row.vals[ci].toFixed(0)}% — {p.short}
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
      <div style={{ marginTop: 18, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-mute)", display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 12, height: 4, borderRadius: 2, background: "linear-gradient(90deg, var(--accent), var(--accent-2))" }}></span>
          String Unblocker
        </span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 12, height: 4, borderRadius: 2, background: "var(--text-mute)" }}></span>
          Other providers (top to bottom in row)
        </span>
      </div>
    </div>
  );
}

/* ---------- interactive picker ---------- */
function Picker() {
  const [active, setActive] = useStateB(0);
  const target = TARGETS[active];

  return (
    <div className="picker">
      <div className="picker-list">
        {TARGETS.map((t, i) => (
          <div
            key={t.url}
            className={"picker-item" + (i === active ? " active" : "")}
            onClick={() => setActive(i)}
          >
            <span className="pi-dot" />
            <span className="pi-url">{t.url}</span>
            <span className="pi-defense">{t.defense}</span>
          </div>
        ))}
      </div>
      <div className="picker-detail">
        <div className="pd-head">
          <div>
            <div className="pd-url">{target.url}</div>
            <div className="pd-defense">guarded by <span style={{ color: "var(--accent-2)" }}>{target.defense}</span> · {target.note}</div>
          </div>
          <span className="chip accent"><span className="dot"></span>live benchmark data</span>
        </div>
        <div className="pd-rows">
          {PROVIDERS.map((p, i) => {
            const v = target.vals[i];
            const win = p.us;
            const ok = v >= 80;
            return (
              <div key={p.id + active} className={"pd-row" + (win ? " win" : "")}>
                <div className="pr-name">
                  <span className="swatch" />
                  <span>{p.name}</span>
                </div>
                <div className="pr-bar"><div className="pf" style={{ width: `${v}%` }} /></div>
                <div className="pr-pct">{v}%</div>
                <div className={"pr-status " + (ok ? "ok" : "bad")}>
                  {ok ? "✓ unblocked" : v >= 40 ? "△ partial" : "✕ blocked"}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

/* ---------- assembled section ---------- */
function BenchmarkSections() {
  const [methodOpen, setMethodOpen] = useStateB(false);

  return (
    <>
      <section className="section section-tight-bottom" id="benchmark" data-screen-label="Benchmark — Overview">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow"><span className="dot"></span>The benchmark</div>
            <h2 style={{ marginTop: 18 }}>We tested ourselves against the field.<br /><span className="grad-text">Same sites. Same code.</span></h2>
            <p className="lead lg" style={{ margin: "20px auto 0" }}>
              Independently measured on 42 real targets guarded by DataDome, Akamai, Cloudflare &amp; Kasada.
            </p>
            <div className="method-disclose">
              <button
                type="button"
                className={"method-toggle" + (methodOpen ? " is-open" : "")}
                onClick={() => setMethodOpen((o) => !o)}
                aria-expanded={methodOpen}
              >
                <span className="method-arrow" aria-hidden="true">▸</span>
                {methodOpen ? "Hide methodology" : "Read methodology"}
              </button>
              {methodOpen && (
                <div className="method-body">
                  <p>
                    Targets are real-world pages — product detail pages, search results, listings —
                    spanning 9 industry verticals. Each provider receives <strong>5 requests per site</strong> using
                    its default settings, with a <strong>90-second timeout</strong>. A request only counts as
                    a success when the response status is 2xx <em>and</em> the body contains the expected page-specific
                    selector (e.g. price block on a product page). No retries are stacked. Tests were run from
                    multiple US/EU regions over a 7-day window in Q2 2026.
                  </p>
                  <div style={{ marginTop: 24 }}>
                    <BenchOverview />
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <section className="section" data-screen-label="Benchmark — Race chart">
        <div className="container">
          <div className="section-head left">
            <div className="eyebrow"><span className="dot"></span>01 · Overall success rate</div>
            <h2 style={{ marginTop: 14 }}>97.1% — best in class, by 24 points.</h2>
            <p className="lead" style={{ marginTop: 12 }}>Aggregate success across all 42 hard targets.</p>
          </div>
          <div className="card" style={{ padding: 32 }}>
            <RaceChart />
          </div>
        </div>
      </section>

      <section className="section" data-screen-label="Benchmark — Industries">
        <div className="container">
          <div className="section-head left">
            <div className="eyebrow"><span className="dot"></span>02 · Industry breakdown</div>
            <h2 style={{ marginTop: 14 }}>Even on the hardest verticals.</h2>
            <p className="lead" style={{ marginTop: 12 }}>
              Apparel, retail, reviews — the same categories competitors fall apart on.
            </p>
          </div>
          <div className="card" style={{ padding: 32 }}>
            <IndustryChart />
          </div>
        </div>
      </section>

      <section className="section" data-screen-label="Benchmark — Picker">
        <div className="container">
          <div className="section-head left">
            <div className="eyebrow"><span className="dot"></span>03 · Try a target</div>
            <h2 style={{ marginTop: 14 }}>Pick a site. See who breaks.</h2>
            <p className="lead" style={{ marginTop: 12 }}>
              These are real targets from the benchmark. Click one to see how each provider fared.
            </p>
          </div>
          <Picker />
        </div>
      </section>

      <section className="section" data-screen-label="Benchmark — Domains">
        <div className="container">
          <div className="section-head left">
            <div className="eyebrow"><span className="dot"></span>04 · Reproduce it</div>
            <h2 style={{ marginTop: 14 }}>Every site we tested.</h2>
            <p className="lead" style={{ marginTop: 12 }}>
              The full target list. Copy it, point your scraper at it, and compare your numbers against ours.
            </p>
          </div>
          <TargetDomains />
        </div>
      </section>
    </>
  );
}

/* ---------- target domains list ---------- */
const TARGET_DOMAINS = [
  "saksfifthavenue.com", "realtor.com", "mercadolibre.com.mx", "carters.com",
  "yelp.com", "canadagoose.com", "safeway.com", "g2.com",
  "etsy.com", "us.louisvuitton.com", "autotrader.com", "coupang.com",
  "ebay.com", "lowes.com", "autozone.com", "mouser.com",
  "allegro.pl", "neimanmarcus.com", "hyatt.com", "homedepot.com",
  "expedia.com", "tripadvisor.com", "indeed.com", "aa.com",
  "nytimes.com", "wsj.com", "amazon.com", "alibaba.com",
  "zara.com", "ralphlauren.com", "emag.ro", "marketwatch.com",
  "glassdoor.com", "flights.booking.com", "databricks.com", "walmart.com",
  "zillow.com", "asda.com", "shop.lululemon.com", "macys.com",
  "monster.com", "ashleyfurniture.com"
];

function TargetDomains() {
  const [copied, setCopied] = useStateB(false);
  const onCopy = () => {
    const text = TARGET_DOMAINS.join("\n");
    if (navigator.clipboard) {
      navigator.clipboard.writeText(text).then(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 1600);
      });
    }
  };
  return (
    <div className="card domains-card">
      <div className="domains-head">
        <div>
          <div className="domains-eyebrow">{TARGET_DOMAINS.length} targets</div>
          <div className="domains-sub">Real product pages, listings & search results. Tested at the URL paths in our methodology repo.</div>
        </div>
        <button type="button" className="btn domains-copy" onClick={onCopy}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            {copied
              ? <polyline points="20 6 9 17 4 12"></polyline>
              : <><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></>}
          </svg>
          {copied ? "Copied" : "Copy list"}
        </button>
      </div>
      <ul className="domains-grid">
        {TARGET_DOMAINS.map((d, i) => (
          <li key={d} className="domain-item">
            <span className="domain-idx">{String(i + 1).padStart(2, "0")}</span>
            <span className="domain-name">{d}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.TargetDomains = TargetDomains;
window.BenchmarkSections = BenchmarkSections;
window.BenchOverview = BenchOverview;
window.RaceChart = RaceChart;
window.Heatmap = Heatmap;
window.IndustryChart = IndustryChart;
window.Picker = Picker;