/* ============================================================
   NeuralScout — Feature Cards
   Each card is a small "camera monitor" with looping animation
   ============================================================ */

function useTick(ms = 50) {
  const [, setT] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setT(t => t + 1), ms);
    return () => clearInterval(id);
  }, [ms]);
  return Date.now();
}

const TRAFFIC_COUNTING_VIDEO = 'assets/videos/fish-shop-people-count.mp4';

/* -----------  1. Traffic Counting ----------- */
function FeatTraffic() {
  return (
    <FeatureMonitor
      title="Traffic Counting"
      accent="var(--ns-cyan)"
      code="01"
      desc="Count IN/OUT of people and vehicles across any line or zone, in real time."
    >
      <div style={featStyles.scene}>
        <video
          autoPlay
          muted
          loop
          playsInline
          style={{
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'center',
          }}
        >
          <source src={TRAFFIC_COUNTING_VIDEO} type="video/mp4" />
        </video>
      </div>
    </FeatureMonitor>
  );
}

const DWELL_TIME_VIDEO = 'assets/videos/Jewelllery-Shop_Person_dwell-time.mp4';

/* -----------  2. Dwell Time ----------- */
function FeatDwell() {
  return (
    <FeatureMonitor
      title="Dwell Time"
      accent="var(--ns-amber)"
      code="02"
      desc="Measure how long people stay in any zone, queue, aisle, lobby."
    >
      <div style={featStyles.scene}>
        <video
          autoPlay
          muted
          loop
          playsInline
          style={{
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'center',
          }}
        >
          <source src={DWELL_TIME_VIDEO} type="video/mp4" />
        </video>
      </div>
    </FeatureMonitor>
  );
}

/* -----------  3. Staff Time on Floor ----------- */
function FeatFace() {
  const now = useTick();
  const t = (now % 6000) / 6000;
  const identified = t > 0.4;
  const names = ['Priya K.', 'Marcus T.', 'Ayaan S.'];
  const idx = Math.floor(now / 6000) % 3;
  return (
    <FeatureMonitor
      title="Staff Time on Floor"
      accent="var(--ns-violet)"
      code="03"
      desc="Know the activity of your staff using time on floor, presence, and movement across zones."
    >
      <div style={featStyles.scene}>
        <div style={{ ...featStyles.roomBg, background: 'radial-gradient(ellipse at 50% 40%, #1a2030, #080b12)' }} />
        {/* Face silhouette */}
        <svg viewBox="0 0 100 100" style={{ position: 'absolute', left: '50%', top: '46%', transform: 'translate(-50%,-50%)', width: '45%' }}>
          <ellipse cx="50" cy="50" rx="22" ry="28" fill="#3a2f28" />
          <ellipse cx="50" cy="45" rx="20" ry="24" fill="#c9a584" />
          <ellipse cx="42" cy="45" rx="2" ry="3" fill="#2a1f18" />
          <ellipse cx="58" cy="45" rx="2" ry="3" fill="#2a1f18" />
          <path d="M 42 58 Q 50 62 58 58" stroke="#2a1f18" strokeWidth="1" fill="none" />
          {/* hair */}
          <path d="M 30 38 Q 50 18 70 38 L 70 30 Q 50 12 30 30 Z" fill="#1a1410" />
        </svg>
        {/* Scan grid */}
        {!identified && (
          <div style={{
            position: 'absolute', left: '32%', top: '18%', width: '36%', height: '64%',
            border: '1px solid var(--ns-violet)',
            backgroundImage: 'linear-gradient(var(--ns-violet) 1px, transparent 1px), linear-gradient(90deg, var(--ns-violet) 1px, transparent 1px)',
            backgroundSize: '12px 12px',
            opacity: 0.3,
          }} />
        )}
        {/* Landmarks */}
        <svg viewBox="0 0 100 100" style={{ position: 'absolute', left: '32%', top: '18%', width: '36%', height: '64%' }} preserveAspectRatio="none">
          {identified && <>
            <circle cx="38" cy="45" r="1.5" fill="var(--ns-violet)" />
            <circle cx="62" cy="45" r="1.5" fill="var(--ns-violet)" />
            <circle cx="50" cy="55" r="1.2" fill="var(--ns-violet)" />
            <circle cx="42" cy="62" r="1.2" fill="var(--ns-violet)" />
            <circle cx="58" cy="62" r="1.2" fill="var(--ns-violet)" />
            <circle cx="50" cy="68" r="1.5" fill="var(--ns-violet)" />
          </>}
        </svg>
        {/* Detection frame */}
        <div style={{
          position: 'absolute', left: '32%', top: '18%', width: '36%', height: '64%',
          border: `1.5px solid var(--ns-violet)`,
          boxShadow: identified ? '0 0 16px var(--ns-violet)' : 'none',
          transition: 'box-shadow .3s',
        }} />
        {/* Label */}
        {identified && (
          <div style={{
            position: 'absolute', bottom: '12%', left: '50%', transform: 'translateX(-50%)',
            padding: '4px 10px',
            background: 'var(--ns-violet)', color: '#0a0a0a',
            fontFamily: 'var(--ns-mono)', fontSize: 10, fontWeight: 700,
            letterSpacing: '0.06em',
            animation: 'ns-lock .3s var(--ns-ease-snap)',
          }}>
            {names[idx]} · STAFF · 0.96
          </div>
        )}
      </div>
    </FeatureMonitor>
  );
}

const FEATURES_EXTRACTION_VIDEO = 'assets/videos/Highway_vehicle_Demographics.mp4';

/* -----------  4. Features Extraction ----------- */
function FeatPlate() {
  return (
    <FeatureMonitor
      title="Features Extraction"
      accent="var(--ns-lime)"
      code="04"
      desc="Extract structured attributes from people and vehicles, type, color, demographics, and more."
    >
      <div style={featStyles.scene}>
        <video
          autoPlay
          muted
          loop
          playsInline
          style={{
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'center',
          }}
        >
          <source src={FEATURES_EXTRACTION_VIDEO} type="video/mp4" />
        </video>
      </div>
    </FeatureMonitor>
  );
}

const DEMOGRAPHICS_VIDEO = 'assets/videos/Jewelllery Shop Person In New  Video.mp4';

/* -----------  5. Demographics ----------- */
function FeatDemo() {
  return (
    <FeatureMonitor
      title="Demographics"
      accent="var(--ns-cyan)"
      code="05"
      desc="Extract privacy-safe attributes, age range, height, dress code for retail & ops insights."
    >
      <div style={featStyles.scene}>
        <video
          autoPlay
          muted
          loop
          playsInline
          style={{
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'center',
          }}
        >
          <source src={DEMOGRAPHICS_VIDEO} type="video/mp4" />
        </video>
      </div>
    </FeatureMonitor>
  );
}

const VLM_QUERY_VIDEO = 'assets/videos/construction-vlm-query.mp4';

/* -----------  6. Custom AI Queries ----------- */
function FeatQuery() {
  return (
    <FeatureMonitor
      title="Custom AI Queries"
      accent="var(--ns-violet)"
      code="06"
      desc="Ask your feed in plain English. Our VLM flags matching objects frame by frame."
    >
      <div style={featStyles.scene}>
        <video
          autoPlay
          muted
          loop
          playsInline
          style={{
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'center',
          }}
        >
          <source src={VLM_QUERY_VIDEO} type="video/mp4" />
        </video>
      </div>
    </FeatureMonitor>
  );
}

/* -----------  Shared card frame ----------- */
function FeatureMonitor({ title, code, desc, accent, children }) {
  return (
    <div style={featStyles.card}>
      <div style={featStyles.cardHeader}>
        <span className="ns-mono" style={{ fontSize: 10, color: 'var(--ns-fg-dimmer)' }}>F_{code}</span>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: accent, boxShadow: `0 0 8px ${accent}`, animation: 'ns-blink 1.6s infinite' }} />
          <span className="ns-mono" style={{ fontSize: 10, color: 'var(--ns-fg-dimmer)' }}>LIVE</span>
        </div>
      </div>
      <div style={featStyles.monitor}>
        {children}
        {/* Scanline */}
        <div style={{
          position: 'absolute', left: 0, right: 0, height: 2,
          background: `linear-gradient(180deg, transparent, ${accent}, transparent)`,
          opacity: 0.35, animation: 'ns-scan 5s linear infinite', mixBlendMode: 'screen',
        }} />
      </div>
      <div style={featStyles.cardMeta}>
        <h3 style={featStyles.cardTitle}>{title}</h3>
        <p style={featStyles.cardDesc}>{desc}</p>
      </div>
    </div>
  );
}

const featStyles = {
  card: {
    background: 'var(--ns-bg-1)',
    border: '1px solid var(--ns-line)',
    borderRadius: 'var(--ns-r-3)',
    overflow: 'hidden',
    display: 'flex', flexDirection: 'column',
  },
  cardHeader: {
    padding: '10px 14px',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    borderBottom: '1px solid var(--ns-line)',
    background: 'var(--ns-bg-2)',
  },
  monitor: {
    position: 'relative',
    aspectRatio: '16/10',
    background: '#080b12',
    overflow: 'hidden',
    borderBottom: '1px solid var(--ns-line)',
  },
  scene: { position: 'absolute', inset: 0 },
  roadBg: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, #141a24 0%, #141a24 45%, #0c1018 46%, #0c1018 100%)',
    backgroundImage: `
      linear-gradient(180deg, #141a24 0%, #141a24 45%, #0c1018 46%, #0c1018 100%),
      repeating-linear-gradient(90deg, transparent 0 40px, #2a3240 40px 60px)`,
  },
  roomBg: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, #1a2030 0%, #0c1018 100%)',
  },
  counter: {
    position: 'absolute', top: 10, right: 10,
    padding: '6px 10px',
    background: 'rgba(8,11,18,0.85)',
    border: '1px solid var(--ns-line-2)',
    display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
    gap: 1, minWidth: 52,
  },
  cardMeta: {
    padding: '18px 20px 22px',
  },
  cardTitle: {
    fontFamily: 'var(--ns-display)',
    fontSize: 20, fontWeight: 500,
    margin: '0 0 6px 0',
    letterSpacing: '-0.01em',
    color: 'var(--ns-fg)',
  },
  cardDesc: {
    fontSize: 13.5, lineHeight: 1.55,
    color: 'var(--ns-fg-dim)',
    margin: 0,
    textWrap: 'pretty',
  },
};

Object.assign(window, {
  FeatTraffic, FeatDwell, FeatFace, FeatPlate, FeatDemo, FeatQuery, FeatureMonitor, useTick,
});