// dashboard.jsx — screenshot panels with browser chrome + animations
// Replaces JSX mock panels with real app screenshots.
// All animation via CSS classes injected in index-light.html.

const { useRef, useEffect, useState } = React;

function Dashboard({ variant = 'full' }) {
  if (variant === 'boq')      return <PanelBoQ />;
  if (variant === 'email')    return <PanelChange />;
  if (variant === 'invoice')  return <PanelInvoice />;
  if (variant === 'cost')     return <PanelCost />;
  if (variant === 'schedule') return <PanelSchedule />;
  return <PanelBoQ />;
}

/* ── App window chrome ───────────────────────────────────────────────────── */

function AppChrome({ title, badge, status }) {
  return (
    <div className="ss-chrome">
      {/* Traffic lights */}
      <div className="ss-dots">
        <span className="ss-dot" style={{ background: '#ff5f57' }} />
        <span className="ss-dot" style={{ background: '#febc2e' }} />
        <span className="ss-dot" style={{ background: '#28c840' }} />
      </div>

      {/* Title */}
      <div className="ss-chrome-title">{title}</div>

      {/* Live badge */}
      {badge && (
        <div className="ss-badge">
          <span className="ss-badge-dot" />
          <span className="ss-badge-label">{badge}</span>
        </div>
      )}
    </div>
  );
}

/* ── Scan-line overlay (entrance only, plays once) ───────────────────────── */

function ScanLine() {
  return <div className="ss-scan" aria-hidden="true" />;
}

/* ── Screenshot panel wrapper ────────────────────────────────────────────── */

function ScreenPanel({ src, title, badge, alt, accent }) {
  const outerRef = useReveal({ threshold: 0.08 });

  return (
    <div ref={outerRef} className="ss-panel reveal-up">
      <div className={`ss-frame ${accent ? 'ss-frame--accent' : ''}`}>
        <AppChrome title={title} badge={badge} />
        <div className="ss-img-wrap">
          <img src={src} alt={alt} className="ss-img" />
          <ScanLine />
          {/* bottom fade for natural crop */}
          <div className="ss-fade-bottom" />
        </div>
      </div>
    </div>
  );
}

/* ── Individual panels ───────────────────────────────────────────────────── */

function PanelBoQ() {
  return (
    <ScreenPanel
      src="src/assets/BoQ  AI.png"
      alt="Pentabeam AI BoQ Generator"
      title="Pentabeam · AI BoQ Generator"
      badge="Live"
    />
  );
}

function PanelChange() {
  return (
    <ScreenPanel
      src="src/assets/change-radar.png"
      alt="Pentabeam Change Radar — email change detection"
      title="Pentabeam · Change Radar"
      badge="Monitoring"
      accent
    />
  );
}

function PanelInvoice() {
  return (
    <ScreenPanel
      src="src/assets/ss-subcheck.png"
      alt="Pentabeam SubCheck — invoice verification"
      title="Pentabeam · SubCheck"
      badge="3 Flagged"
      accent
    />
  );
}

function PanelCost() {
  return (
    <ScreenPanel
      src="src/assets/ss-cost.png"
      alt="Pentabeam cost-to-complete analytics"
      title="Pentabeam · Cost to Complete"
      badge="AI Forecast"
    />
  );
}

function PanelSchedule() {
  return (
    <ScreenPanel
      src="src/assets/ss-gantt.png"
      alt="Pentabeam schedule — Gantt chart"
      title="Pentabeam · Gantt Chart"
      badge="Critical Path"
    />
  );
}

Object.assign(window, {
  Dashboard,
  PanelBoQ, PanelChange, PanelInvoice, PanelCost, PanelSchedule,
});