// Showcase — tabs + browser-stage holding 4 scenes (Dashboard / Transactions /
// Blocklist / TX detail). Scene state is local; React handles the fade
// transition + per-scene browser-stage height class.

function Showcase() {
  const [scene, setScene] = React.useState('dash');
  const url = {
    dash: 'app.dipoli.io/',
    tx:   'app.dipoli.io/transactions',
    bl:   'app.dipoli.io/blocklist',
    det:  'app.dipoli.io/transactions/1028a621…',
  }[scene];

  const tabs = [
    { key: 'dash', name: 'Dashboard',    meta: 'Real-time overview — all transactions, scores, and metrics at a glance.' },
    { key: 'tx',   name: 'Transactions', meta: 'Review and act — approve flagged payments or investigate suspicious activity.' },
    { key: 'bl',   name: 'Blocklist',    meta: 'Control rules — manage your custom rules and blocked entities.' },
    { key: 'det',  name: 'TX details',   meta: 'Drill into one verdict — score, rationale, signals that fired.' },
  ];

  return (
    <section className="section showcase" id="product" style={{ paddingTop: 0 }}>
      <div className="container">
        <span className="auto-pill"><span className="live"></span>Live · auto-rotating</span>
        <div className="showcase-intro">
          <h2 className="showcase-h">Four screens. The full anti-fraud loop.</h2>
          <p className="showcase-sub">Everything your antifraud team needs — investigation, blocklist, verdict, drill-down — in one console.</p>
        </div>

        <div className="tabs-row">
          <div className="tabs">
            {tabs.map((t) => (
              <button
                key={t.key}
                className={'tab' + (t.key === scene ? ' active' : '')}
                onClick={() => setScene(t.key)}
              >
                <span className="t-name">{t.name}</span>
                <span className="t-meta">{t.meta}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="browser">
          <div className="browser-bar">
            <div className="dots"><span></span><span></span><span></span></div>
            <div className="url">
              <svg className="lock" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
              <span>{url}</span>
            </div>
            <div style={{ width: 60 }}></div>
          </div>

          <div className={'browser-stage h-' + scene}>
            <div className={'scene' + (scene === 'dash' ? ' active' : '')}>
              <DashboardScene active={scene === 'dash'} />
            </div>
            <div className={'scene' + (scene === 'tx' ? ' active' : '')}>
              <TransactionsScene active={scene === 'tx'} />
            </div>
            <div className={'scene' + (scene === 'bl' ? ' active' : '')}>
              <BlocklistScene active={scene === 'bl'} />
            </div>
            <div className={'scene' + (scene === 'det' ? ' active' : '')}>
              <TxDetailScene active={scene === 'det'} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}