import StatusCards from '../components/StatusCards'
import MiddleRow from '../components/MiddleRow'
import BottomRow from '../components/BottomRow'

export default function Glance() {
  return (
    <>
      {/* Hero + KPI overlap — KPI bottom aligns with banner bottom */}
      <div className="relative w-full shrink-0 overflow-hidden" style={{ height: '240px' }}>
        <img
          src="/archnest-hero-banner.png"
          alt="ArchNest Banner"
          className="absolute inset-0 h-full w-full"
          style={{
            objectFit: 'cover',
            objectPosition: 'center 35%',
            maskImage: 'linear-gradient(to bottom, black 0%, black 45%, transparent 95%)',
            WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 45%, transparent 95%)',
          }}
          onError={(e) => {
            const target = e.currentTarget
            target.style.display = 'none'
            target.parentElement!.classList.add('bg-card')
          }}
        />
        {/* Side vignette so the rectangular image blends into the page edges */}
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            background:
              'radial-gradient(ellipse 75% 100% at center, transparent 55%, var(--color-page) 100%)',
          }}
        />
        {/* KPI cards positioned so their bottom edge aligns with banner bottom */}
        <div className="absolute bottom-0 left-0 right-0 z-10 px-4">
          <StatusCards />
        </div>
      </div>

      {/* Middle Row — stretches to fill available vertical space */}
      <div className="min-h-0 flex-1">
        <MiddleRow />
      </div>

      {/* Bottom Row — anchored to the bottom */}
      <div className="shrink-0">
        <BottomRow />
      </div>
    </>
  )
}