/* Product section (tabbed, per questionnaire layout #4) */

// Wrap [[text]] segments in <b>
const renderMark = (str) => {
  const parts = str.split(/(\[\[.+?\]\])/g);
  return parts.map((p, i) => {
    const m = p.match(/^\[\[(.+?)\]\]$/);
    return m ? <b key={i}>{m[1]}</b> : <React.Fragment key={i}>{p}</React.Fragment>;
  });
};

const SERVICES = [
  {
    key: "opps",
    label: "01 / Product",
    title: "Arbitrage Opportunities",
    desc: "The full live book of cross-venue edges.",
    h3: "Every live edge across CEX, Perp, and DEX.",
    body: [
      "Prices are quoted at a $1,000 fill — [[buy & sell sides, not mid]].",
      "So what you see is what you [[actually capture]].",
      "Filter by source, destination, minimum spread.",
    ],
    bullets: [
      "Matches every CEX, CEX-perp, and DEX pair [[across 10,000+ sources]].",
      "From / to filters for origin venue and destination chain.",
      "[[Net-of-fees]]: bridge, gas, taker, funding already subtracted.",
    ],
    mock: "OpportunitiesMock",
  },
  {
    key: "new",
    label: "02 / Product",
    title: "New Entries",
    desc: "The moment an edge opens — first one there wins.",
    h3: "Catch an opportunity within its first 30 seconds.",
    body: [
      "New Entries stream every new chance it crosses your threshold.",
      "[[Set a min-spread %]], pick your channels, and leave it on.",
    ],
    bullets: [
      "Configurable [[% threshold]] (Pro) for what counts as an entry.",
      "Streams to web and to a [[personal Telegram bot]], side by side.",
      "Every entry links straight to the route and its liquidity.",
    ],
    mock: "NewEntriesMock",
  },
  {
    key: "spike",
    label: "03 / Product",
    title: "Price Spikes",
    desc: "Depeg, exploit, rug — whenever the chart breaks.",
    h3: "Detect violent price moves in 30 seconds.",
    body: [
      "Fires the moment a [[price dislocates]] by more than your [[threshold]].",
      "It's how you hear about a [[depeg or exploit]] in [[30 sec]].",
    ],
    bullets: [
      "Rolling windows: 30s · 1m · 5m · 15m · 30m · 1h (Pro).",
      "Watches 10,000+ pools across majors and longtail pairs.",
      "Streams to web and to a [[personal Telegram bot]], side by side.",
    ],
    mock: "PriceSpikesMock",
  },
];

const Product = () => {
  const [active, setActive] = React.useState(0);
  const svc = SERVICES[active];
  const MockComp = window[svc.mock];

  return (
    <section id="product">
      <div className="container">
        <div className="product-head">
          <div>
            <div className="eyebrow"><span className="dot"/>The product</div>
            <h2 className="section-title" style={{marginTop: 14, maxWidth: "1000px"}}>
              Three main products. One realtime price.
            </h2>
            <p className="lede" style={{margin: "16.5px 0px", maxWidth: "60ch"}}>
              web3map provides three main products for realtime opportunity detection.
            </p>
          </div>
        </div>

        <div className="tabs" role="tablist">
          {SERVICES.map((s, i) => (
            <button
              key={s.key}
              role="tab"
              className={"tab " + (i === active ? "active" : "")}
              onClick={() => setActive(i)}
            >
              <span className="tab-label">{s.label}</span>
              <span className="tab-title">{s.title}</span>
              <span className="tab-desc">{s.desc}</span>
            </button>
          ))}
        </div>

        <div className="tab-panel">
          <div className="panel-copy">
            <h3>{svc.h3}</h3>
            <p>{Array.isArray(svc.body) ? svc.body.map((line, i) => <React.Fragment key={i}>{i > 0 && <br/>}{renderMark(line)}</React.Fragment>) : svc.body}</p>
            <ul className="panel-bullets">
              {svc.bullets.map((b, i) => <li key={i}><span>{renderMark(b)}</span></li>)}
            </ul>
          </div>
          <div>
            {MockComp && <MockComp />}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Product });