const { useState: useStateD } = React;

function DashboardPreview() {
  const [view, setView] = useStateD(0);
  const views = [
    { label: 'BIDS', title: 'Every 4 minutes.', metric: '+34.2%', metricLabel: 'ROAS · 30D' },
    { label: 'CREATIVE', title: 'Rotation, live.', metric: '12 / 4', metricLabel: 'LIVE / PAUSED' },
    { label: 'BUDGET', title: 'Allocated to winners.', metric: '€48,214', metricLabel: 'SPEND · WTD' }
  ];
  const v = views[view];
  return (
    <section id="oversight" className="dash-section">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow">LIVE DASHBOARD</div>
          <h2 className="section-title">Watch the model work.<br/><span className="muted">See the human's signature.</span></h2>
        </div>

        <div className="dash-shell">
          <div className="dash-toolbar">
            <div className="dash-dots"><span/><span/><span/></div>
            <div className="dash-url">app.growth-dna.ai / ACC-4821-77B</div>
            <div className="dash-status"><span className="pulse-dot small"/> LIVE</div>
          </div>
          <div className="dash-body">
            <div className="dash-tabs">
              {views.map((x, i) => (
                <button key={i} className={'dash-tab ' + (i === view ? 'active' : '')} onClick={() => setView(i)}>
                  {x.label}
                </button>
              ))}
            </div>
            <div className="dash-content">
              <div className="dash-left">
                <div className="mono-label">{v.label} · 30D</div>
                <h3 className="dash-title">{v.title}</h3>
                <div className="dash-chart">
                  <svg viewBox="0 0 400 140" preserveAspectRatio="none" width="100%" height="140">
                    <defs>
                      <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0" stopColor="#00F2FF" stopOpacity="0.35"/>
                        <stop offset="1" stopColor="#00F2FF" stopOpacity="0"/>
                      </linearGradient>
                    </defs>
                    <path d={view === 0 ? "M0,110 L40,95 L80,100 L120,80 L160,85 L200,60 L240,65 L280,45 L320,50 L360,25 L400,30 L400,140 L0,140 Z" : view === 1 ? "M0,90 L40,85 L80,70 L120,80 L160,55 L200,60 L240,40 L280,50 L320,30 L360,40 L400,20 L400,140 L0,140 Z" : "M0,100 L40,80 L80,90 L120,60 L160,70 L200,40 L240,50 L280,30 L320,40 L360,15 L400,20 L400,140 L0,140 Z"}
                      fill="url(#chartFill)"/>
                    <path d={view === 0 ? "M0,110 L40,95 L80,100 L120,80 L160,85 L200,60 L240,65 L280,45 L320,50 L360,25 L400,30" : view === 1 ? "M0,90 L40,85 L80,70 L120,80 L160,55 L200,60 L240,40 L280,50 L320,30 L360,40 L400,20" : "M0,100 L40,80 L80,90 L120,60 L160,70 L200,40 L240,50 L280,30 L320,40 L360,15 L400,20"}
                      fill="none" stroke="#00F2FF" strokeWidth="1.5"/>
                    <circle cx="400" cy={view === 0 ? 30 : view === 1 ? 20 : 20} r="4" fill="#00F2FF"/>
                  </svg>
                </div>
                <div className="dash-metric">
                  <span className="metric-val">{v.metric}</span>
                  <span className="metric-lbl">{v.metricLabel}</span>
                </div>
              </div>
              <div className="dash-right">
                <div className="mono-label">ACTIVITY FEED</div>
                <ul className="feed">
                  <li className="feed-item ai"><span className="feed-dot"/><div><div className="feed-top"><strong>AI</strong> · <span>raised bid on "winter boots"</span></div><div className="feed-meta">+€0.22 CPC · now</div></div></li>
                  <li className="feed-item human"><span className="feed-dot"/><div><div className="feed-top"><strong>Lena</strong> · <span>approved creative rotation</span></div><div className="feed-meta">3 min ago</div></div></li>
                  <li className="feed-item ai"><span className="feed-dot"/><div><div className="feed-top"><strong>AI</strong> · <span>paused audience "cold · lookalike 2%"</span></div><div className="feed-meta">CPA breach · 8 min ago</div></div></li>
                  <li className="feed-item human"><span className="feed-dot"/><div><div className="feed-top"><strong>Markus</strong> · <span>signed off · weekly review</span></div><div className="feed-meta">2h ago</div></div></li>
                  <li className="feed-item ai"><span className="feed-dot"/><div><div className="feed-top"><strong>AI</strong> · <span>reallocated €1,240 to Meta</span></div><div className="feed-meta">CTR +18% · 4h ago</div></div></li>
                </ul>
              </div>
            </div>
            <div className="dash-badge">
              <img src="/assets/human-signature-badge.svg" alt="Verified by specialist"/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.DashboardPreview = DashboardPreview;