Building Blocks for the Web

import { HeroSection } from "@/components/hero-section";
import { FeaturesSection } from "@/components/features-section";
import { ProductShowcase } from "@/components/product-showcase";
import { PricingSection } from "@/components/pricing-section";
import { WhySoftUISection } from "@/components/why-softui-section";
import { UseCasesSection } from "@/components/use-cases-section";
import { FAQSection } from "@/components/faq-section";
import { CreativeFooter } from "@/components/creative-footer";
import { SiteHeader } from "@/components/site-header";

export default function Page() {
  return (
    <div className="relative min-h-screen bg-black">
      {/* Site Header - fixed navigation */}
      <SiteHeader />

      {/* UNIFIED GLOBAL BACKGROUND SYSTEM */}
      {/* This creates a single cohesive atmosphere across the entire page */}

      {/* Base gradient - flows from pure black through subtle color to black */}
      <div
        className="pointer-events-none fixed inset-0 -z-20"
        style={{
          background: `
            linear-gradient(
              180deg,
              rgb(0, 0, 0) 0%,
              rgb(5, 5, 8) 10%,
              rgb(8, 6, 12) 25%,
              rgb(6, 6, 10) 45%,
              rgb(4, 4, 8) 65%,
              rgb(3, 3, 6) 80%,
              rgb(2, 2, 4) 90%,
              rgb(0, 0, 0) 100%
            )
          `,
        }}
      />

      {/* Persistent ambient glow orbs - creates atmospheric depth */}
      <div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
        {/* Primary violet glow - upper left */}
        <div
          className="absolute h-[1000px] w-[1000px] rounded-full blur-[200px]"
          style={{
            background:
              "radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%)",
            top: "10%",
            left: "-20%",
          }}
        />

        {/* Secondary blue glow - center right */}
        <div
          className="absolute h-[800px] w-[800px] rounded-full blur-[180px]"
          style={{
            background:
              "radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%)",
            top: "40%",
            right: "-15%",
          }}
        />

        {/* Accent purple glow - bottom center */}
        <div
          className="absolute h-[600px] w-[600px] rounded-full blur-[160px]"
          style={{
            background:
              "radial-gradient(circle, rgba(168, 85, 247, 0.06) 0%, transparent 70%)",
            bottom: "20%",
            left: "30%",
          }}
        />

        {/* Subtle noise texture for depth */}
        <div
          className="absolute inset-0 opacity-[0.02]"
          style={{
            backgroundImage:
              "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")",
          }}
        />
      </div>

      {/* Main content wrapper - covers the fixed footer */}
      <div className="relative z-10 bg-black">
        {/* Hero with scroll-hijacking horizontal scroll */}
        <HeroSection />

        {/* Smooth transition bridge from hero to next section */}
        <div
          className="relative -mt-1 h-32 sm:h-40 md:h-48"
          style={{
            background: `linear-gradient(
              to bottom,
              rgba(139, 92, 246, 0.15) 0%,
              rgba(139, 92, 246, 0.08) 30%,
              rgba(139, 92, 246, 0.04) 60%,
              transparent 100%
            )`,
          }}
        >
          {/* Fade overlay for seamless blend */}
          <div
            className="absolute inset-0"
            style={{
              background:
                "linear-gradient(to bottom, rgb(2 6 23 / 0.5) 0%, transparent 100%)",
            }}
          />
        </div>

        {/* Content sections - all share the unified background */}
        <div className="relative -mt-32 sm:-mt-40 md:-mt-48">
          {/* Product showcase section */}
          <ProductShowcase />

          {/* Features grid section */}
          <FeaturesSection />

          {/* Why SoftUI section */}
          <WhySoftUISection />

          {/* Use Cases section */}
          <UseCasesSection />

          {/* Pricing section */}
          <PricingSection />

          {/* FAQ section */}
          <FAQSection />

          {/* Smooth transition bridge to footer - same as hero separator */}
          <div
            className="relative h-32 sm:h-40 md:h-48"
            style={{
              background: `linear-gradient(
                to top,
                rgba(139, 92, 246, 0.15) 0%,
                rgba(139, 92, 246, 0.08) 30%,
                rgba(139, 92, 246, 0.04) 60%,
                transparent 100%
              )`,
            }}
          >
            {/* Fade overlay for seamless blend */}
            <div
              className="absolute inset-0"
              style={{
                background:
                  "linear-gradient(to top, rgb(2 6 23 / 0.5) 0%, transparent 100%)",
              }}
            />
            {/* Center divider line - elegant and subtle */}
            <div className="absolute inset-x-0 top-1/2 flex -translate-y-1/2 items-center justify-center px-8">
              <div className="h-px flex-1 bg-linear-to-r from-transparent via-white/10 to-transparent" />
              <div className="mx-4 h-1.5 w-1.5 rounded-full bg-violet-400/50" />
              <div className="h-px flex-1 bg-linear-to-r from-transparent via-white/10 to-transparent" />
            </div>
          </div>
        </div>
      </div>

      {/* Footer spacer - creates the reveal effect */}
      <div className="h-[90vh]" />

      {/* Creative footer - fixed at bottom, revealed as you scroll */}
      <div className="fixed inset-x-0 bottom-0 z-0">
        <CreativeFooter />
      </div>
    </div>
  );
}