import { Title } from "@solidjs/meta";
import {
  ColorWaveBackground,
  HeroSection,
  HowItWorksSection,
  FeaturesGridSection,
  ForUsersSection,
  WhyShieldAISection,
  CTABannerSection,
} from "~/components/landing";

export default function Home() {
  return (
    <main
      class="relative overflow-hidden"
      style="--cut: clamp(16px, 2.5vw, 40px)"
    >
      <Title>ShieldAI — AI-Powered Identity Protection</Title>

      <div class="relative">
        <ColorWaveBackground yOffset={-0.1} scale={0.65} speed={0.5} />
        <div class="relative z-10">
          <HeroSection />
        </div>
      </div>

      <div
        class="bg-dot-grid"
        style={{
          "clip-path": "polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%)",
        }}
      >
        <HowItWorksSection />
      </div>

      <div
        class="relative z-10 backdrop-blur-2xl bg-bg/40 py-8 -my-10"
        style={{
          "clip-path":
            "polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%)",
        }}
      >
        <FeaturesGridSection />
      </div>

      <div
        class="bg-dot-grid"
        style={{
          "clip-path": "polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%)",
        }}
      >
        <ForUsersSection />
      </div>

      <div
        class="relative z-10 backdrop-blur-2xl bg-bg/40 pt-8 -mt-10"
        style={{
          "clip-path": "polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%)",
        }}
      >
        <WhyShieldAISection />
        <CTABannerSection />
      </div>
    </main>
  );
}
