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

const cut = "clamp(16px, 2.5vw, 40px)";

export default function Home() {
  return (
    <main class="relative overflow-hidden">
      <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
        style={{
          "clip-path": `polygon(0 var(--cut, ${cut}), 100% 0, 100% 100%, 0 100%)`,
        }}
      >
        <HowItWorksSection />
      </div>

      <div
        style={{
          "clip-path": `polygon(0 0, 100% 0, 100% calc(100% - var(--cut, ${cut})), 0 100%)`,
        }}
      >
        <FeaturesGridSection />
      </div>

      <div
        style={{
          "clip-path": `polygon(0 var(--cut, ${cut}), 100% 0, 100% 100%, 0 100%)`,
        }}
      >
        <ForUsersSection />
      </div>

      <div
        style={{
          "clip-path": `polygon(0 0, 100% 0, 100% calc(100% - var(--cut, ${cut})), 0 100%)`,
        }}
      >
        <WhyShieldAISection />
      </div>

      <div>
        <CTABannerSection />
      </div>
    </main>
  );
}
