"use client"

import { useEffect, useRef, useState } from "react"
import { ProductDemoFrame } from "@/components/landing/product/product-demo-frame"

export function UltimailInboxDemo() {
  const ref = useRef<HTMLDivElement>(null)
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const node = ref.current
    if (!node) return
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries.some((entry) => entry.isIntersecting)) {
          setVisible(true)
          observer.disconnect()
        }
      },
      { rootMargin: "120px 0px" }
    )
    observer.observe(node)
    return () => observer.disconnect()
  }, [])

  return (
    <div ref={ref}>
      <ProductDemoFrame
        fakeUrl="suite.votre-domaine.fr/mail/inbox"
        fullscreenHref="/demo/mail/inbox"
        hint="Démo interactive — lisez, archivez, répondez. Zéro rétention."
      >
        {visible ? (
          <iframe
            src="/demo/mail/inbox"
            title="Démo boîte mail Ultimail"
            loading="lazy"
            className="absolute inset-0 h-full w-full"
          />
        ) : (
          <div className="absolute inset-0 flex items-center justify-center text-sm text-[var(--landing-muted)]">
            Chargement de la démo…
          </div>
        )}
      </ProductDemoFrame>
    </div>
  )
}