import { onMount } from "solid-js";
import { A } from "@solidjs/router";
import { cn } from "~/lib/utils";
import { Button } from "~/components/ui";
import PageContainer from "~/components/layout/PageContainer";

function ShieldIcon() {
  return (
    <svg
      width="48"
      height="48"
      viewBox="0 0 48 48"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="w-12 h-12 md:w-16 md:h-16"
    >
      <circle cx="24" cy="24" r="24" class="gradient-primary" />
      <path
        d="M24 8L14 12V20C14 28.4 19.2 36 24 38C28.8 36 34 28.4 34 20V12L24 8Z"
        fill="white"
        fill-opacity="0.9"
      />
    </svg>
  );
}

interface HeroSectionProps {
  class?: string;
}

export default function HeroSection(props: HeroSectionProps) {
  let heroRef: HTMLDivElement | undefined;

  onMount(() => {
    if (heroRef) {
      heroRef.style.opacity = "1";
      heroRef.style.transform = "translateY(0)";
    }
  });

  return (
    <section class={cn("relative", props.class)}>
      <PageContainer>
        <div
          ref={heroRef}
          class="flex flex-col items-center text-center py-20 md:py-32 transition-all duration-700 ease-out"
          style="opacity: 0; transform: translateY(20px);"
        >
          <div class="mb-6 shadow-glow-primary rounded-full p-3">
            <ShieldIcon />
          </div>

          <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 max-w-4xl">
            <span class="text-[var(--color-text-primary)]">AI-Powered </span>
            <span class="text-gradient-primary">Identity Protection</span>
            <br />
            <span class="text-[var(--color-text-primary)]">for Everyone</span>
          </h1>

          <p class="text-xl md:text-2xl text-[var(--color-text-secondary)] max-w-2xl mb-10 leading-relaxed">
            ShieldAI uses advanced AI to monitor, detect, and prevent identity
            threats in real-time. Your digital identity, protected by
            intelligence.
          </p>

          <div class="flex flex-col sm:flex-row gap-4 mb-8">
            <A href="/signup">
              <Button variant="primary" size="lg">
                Get Started
              </Button>
            </A>
            <A href="#features">
              <Button variant="ghost" size="lg">
                Learn More
              </Button>
            </A>
          </div>

          <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-[var(--color-text-tertiary)]">
            <span class="flex items-center gap-1.5">
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6.5 11.5L3 8L4.1 6.9L6.5 9.3L12.4 3.4L13.5 4.5L6.5 11.5Z"
                  fill="var(--color-success)"
                />
              </svg>
              No credit card required
            </span>
            <span class="flex items-center gap-1.5">
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6.5 11.5L3 8L4.1 6.9L6.5 9.3L12.4 3.4L13.5 4.5L6.5 11.5Z"
                  fill="var(--color-success)"
                />
              </svg>
              Free tier available
            </span>
          </div>
        </div>
      </PageContainer>
    </section>
  );
}