Hero Section 4

"use client";

import Image from "next/image";
import { AnimatedGroup } from "@/components/ui/animated-group";
import { motion } from "motion/react";
import LogoCloud from "@/registry/blocks/hero-section/logo-cloud";

export default function HeroSection4() {
  return (
    <div className="relative md:h-screen h-[500px] w-full overflow-hidden bg-white dark:bg-(--color-background) [--color-primary:#003AF9] flex flex-col items-center justify-start pt-12 md:pt-10">
      {/* Text Content */}
      <div className="container mx-auto px-4 flex flex-col items-center z-10 shrink-0">
        <AnimatedGroup
          className="flex flex-col items-center text-center max-w-4xl mx-auto gap-3"
          preset="fade"
        >
          <h1 className="text-4xl md:text-6xl font-bold tracking-tighter text-black dark:text-white leading-tight max-w-3xl">
            AI Agents That Code Like Your Best Engineer
          </h1>
          <p className="text-lg md:text-xl text-neutral-600 dark:text-neutral-400 max-w-lg">
            Autonomous agents that debug, refactor, and ship features while you
            focus on architecture and strategy
          </p>

          <div className="flex flex-row items-center gap-4 mt-4 w-auto">
            <button className="px-4 py-2 rounded-md bg-(--color-primary) text-white dark:text-white font-medium hover:opacity-90 transition-opacity cursor-pointer text-sm md:text-base whitespace-nowrap">
              Book a demo
            </button>
            <button className="border border-neutral-300 text-black dark:text-white px-4 py-2 rounded-md dark:hover:border-(--color-primary) transition-colors cursor-pointer text-sm md:text-base whitespace-nowrap">
              Try for free
            </button>
          </div>
        </AnimatedGroup>
      </div>

      {/* Hero Image Section - No grow, just flows naturally and gets clipped */}
      <div
        className="relative w-full flex justify-center mt-12"
        style={{ perspective: "1000px" }}
      >
        <div className="relative w-full max-w-7xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 60 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              duration: 1.2,
              delay: 0.3,
              type: "spring",
              bounce: 0.3,
            }}
            className="w-full"
          >
            {/* 3D Rotation Wrapper */}
            <div
              style={{
                transformStyle: "preserve-3d",
                transform: "rotateX(-12deg) rotateY(-30deg) rotateZ(-5deg)",
                transformOrigin: "center bottom",
              }}
              className="mx-auto w-full flex justify-center ml-[30px]"
            >
              {/* Tilted Outer Container - Blue Frame */}
              <div className="relative py-2 px-4 md:py-5 md:px-6 rounded-xl bg-(--color-primary) shadow-[-9px_9px_0px_rgba(4,16,255,0.25)] dark:shadow-[-9px_9px_0px_rgba(4,16,255,0.5)] w-[90%] md:w-full max-w-7xl ml-4">
                <div>
                  <div className="absolute top-2 left-6 size-2 rounded-full bg-white/20"></div>
                  <div className="absolute top-2 left-10 size-2 rounded-full bg-white/20"></div>
                  <div className="absolute top-2 left-14 size-2 rounded-full bg-white/20"></div>
                </div>
                {/* Inner Image */}
                <div className="relative overflow-hidden rounded-lg bg-white shadow-lg">
                  <Image
                    src="https://assets.solaceui.com/solaceui-hero-light.png"
                    alt="Dashboard Preview"
                    width={1000}
                    height={1000}
                    className="w-full h-auto object-cover"
                    priority
                    unoptimized
                  />
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>

      {/* Fade at the bottom - always at viewport bottom */}
      <div className="absolute bottom-0 left-0 w-full h-32 md:h-96 bg-linear-to-t from-white dark:from-(--color-background) to-transparent pointer-events-none z-20"></div>

      {/* Logo Cloud - positioned at bottom of viewport */}
      <div className="absolute bottom-4 md:bottom-28 left-0 w-full z-30">
        <LogoCloud className="mask-linear-to-r from-transparent via-black to-transparent pb-3 w-full" />
      </div>
    </div>
  );
}