greywall-landing-page/components/observability.tsx

'use client'

import { useState, useEffect, useRef } from 'react'
import Image from 'next/image'
import { Eye } from 'lucide-react'

const slides = [
  {
    label: 'Dashboard',
    src: '/dashboard.png',
    alt: 'GreyProxy dashboard overview showing connection stats and activity',
    fit: false,
  },
  {
    label: 'Pending requests',
    src: '/pending_requests.png',
    alt: 'GreyProxy pending network requests with Allow and Deny controls',
    fit: true,
  },
  {
    label: 'Rules',
    src: '/rules.png',
    alt: 'GreyProxy domain rules configuration for allow and deny policies',
    fit: false,
  },
  {
    label: 'Logs',
    src: '/logs.png',
    alt: 'GreyProxy connection logs showing all outbound network activity',
    fit: false,
  },
]

const INTERVAL = 4000

export function Observability() {
  const [active, setActive] = useState(0)
  const [paused, setPaused] = useState(false)
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
  // Key to force re-mount of the progress bar so animation restarts
  const [tick, setTick] = useState(0)

  function goTo(i: number) {
    setActive(i)
    setTick((t) => t + 1)
    resetTimer()
  }

  function advance() {
    setActive((i) => (i + 1) % slides.length)
    setTick((t) => t + 1)
  }

  function resetTimer() {
    if (timerRef.current) clearInterval(timerRef.current)
    if (!paused) {
      timerRef.current = setInterval(advance, INTERVAL)
    }
  }

  useEffect(() => {
    if (paused) {
      if (timerRef.current) clearInterval(timerRef.current)
      return
    }
    timerRef.current = setInterval(advance, INTERVAL)
    return () => {
      if (timerRef.current) clearInterval(timerRef.current)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [paused])

  return (
    <section id="features" className="py-24 px-4 sm:px-6 border-t border-border/30">
      <div className="mx-auto max-w-5xl">
        <div className="max-w-2xl mb-16">
          <div className="flex items-center gap-2 mb-4">
            <Eye className="h-4 w-4 text-primary" />
            <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
              Clarity
            </span>
          </div>
          <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
            See every network connection.
          </h2>
          <p className="text-muted-foreground font-serif text-lg leading-relaxed">
            You can&apos;t predict which domains your agent will reach for. GreyProxy captures
            every outbound connection and lets you allow or deny them in real time, without
            restarting the session.
          </p>
        </div>

        <div
          className="mx-auto max-w-3xl"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          {/* Screenshot with crossfade */}
          <div className="relative rounded-lg border border-border/40 overflow-hidden bg-white">
            {/* Hidden reference image to lock container height */}
            <Image
              src={slides[0].src}
              alt=""
              aria-hidden="true"
              width={1977}
              height={1444}
              className="w-full h-auto invisible"
              priority
            />
            {slides.map((slide, i) => (
              <Image
                key={slide.label}
                src={slide.src}
                alt={slide.alt}
                width={slide.src === '/pending_requests.png' ? 1752 : 1977}
                height={slide.src === '/pending_requests.png' ? 1216 : 1444}
                className={`absolute inset-0 w-full h-full object-contain object-top transition-opacity duration-700 ${
                  i === active ? 'opacity-100' : 'opacity-0'
                }`}
                priority={i === 0}
              />
            ))}
          </div>

          {/* Progress indicators + labels */}
          <div className="flex items-center justify-center gap-4 mt-5">
            {slides.map((slide, i) => (
              <button
                key={slide.label}
                onClick={() => goTo(i)}
                className="flex items-center gap-2 group"
              >
                <div className="relative h-1.5 w-8 rounded-full bg-border/50 overflow-hidden">
                  {i === active ? (
                    <div
                      key={tick}
                      className="absolute inset-y-0 left-0 rounded-full bg-primary"
                      style={
                        paused
                          ? { width: '100%' }
                          : { animation: `progress ${INTERVAL}ms linear forwards` }
                      }
                    />
                  ) : (
                    <div className="absolute inset-0 rounded-full bg-transparent group-hover:bg-muted-foreground/30 transition-colors" />
                  )}
                </div>
                <span
                  className={`text-xs font-sans transition-colors hidden sm:inline ${
                    i === active ? 'text-foreground font-medium' : 'text-muted-foreground'
                  }`}
                >
                  {slide.label}
                </span>
              </button>
            ))}
          </div>

          <p className="text-xs text-muted-foreground font-serif leading-relaxed mt-5 text-center">
            Every outbound request is visible. Allow trusted domains, block unknown ones,
            and adjust policies live as your agent works.
          </p>
        </div>
      </div>
    </section>
  )
}