import { For } from "solid-js";
import type { JSX } from "solid-js";
import { cn } from "~/lib/utils";
import Card from "~/components/ui/Card";
import PageContainer from "~/components/layout/PageContainer";

function CheckIcon() {
  return (
    <svg
      width="18"
      height="18"
      viewBox="0 0 18 18"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="flex-shrink-0"
    >
      <path
        d="M7.5 12L4 8.5L5.1 7.4L7.5 9.8L12.4 4.9L13.5 6L7.5 12Z"
        fill="var(--color-success)"
      />
    </svg>
  );
}

function ProactiveIcon() {
  return (
    <svg
      width="32"
      height="32"
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="w-8 h-8 text-[var(--color-brand-primary)]"
    >
      <path
        d="M16 2L4 8v10c0 7.4 5.1 14.1 12 16 6.9-1.9 12-8.6 12-16V8L16 2zm0 2.8L26 9.5v8.5c0 6.1-4.2 11.7-10 13.4C10.2 29.7 6 24.1 6 18V9.5L16 4.8z"
        fill="currentColor"
      />
    </svg>
  );
}

function AIIcon() {
  return (
    <svg
      width="32"
      height="32"
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="w-8 h-8 text-[var(--color-brand-primary)]"
    >
      <path
        d="M14 2h4v4h-4V2zM6 8h4v4H6V8zm16 0h4v4h-4V8zM6 16h4v4H6v-4zm16 0h4v4h-4v-4zm-8 8h4v4h-4v-4zM10 14h4v4h-4v-4zm8 0h4v4h-4v-4zM10 22h4v4h-4v-4zm8 0h4v4h-4v-4z"
        fill="currentColor"
      />
    </svg>
  );
}

function PrivacyIcon() {
  return (
    <svg
      width="32"
      height="32"
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="w-8 h-8 text-[var(--color-brand-primary)]"
    >
      <path
        d="M14 4h4v4h-4V4zM10 8h12l2 2v2H8v-2l2-2zm-2 4h16v14H8V12zm2 2v10h12v-10H10z"
        fill="currentColor"
      />
    </svg>
  );
}

interface ValueProp {
  title: string;
  description: string;
  items: string[];
  icon: () => JSX.Element;
}

const valueProps: ValueProp[] = [
  {
    title: "Proactive, Not Reactive",
    description:
      "We detect threats before they cause damage, so you can act early.",
    icon: ProactiveIcon,
    items: [
      "Real-time dark web scanning",
      "Pre-breach alerts and warnings",
      "Automated threat response",
    ],
  },
  {
    title: "AI-Powered Detection",
    description:
      "Machine learning models trained on real scam data to catch the latest threats.",
    icon: AIIcon,
    items: [
      "Deepfake voice identification",
      "Pattern-based scam detection",
      "Continuous model improvement",
    ],
  },
  {
    title: "Privacy First",
    description:
      "Your data stays encrypted and private. We never sell your information.",
    icon: PrivacyIcon,
    items: [
      "End-to-end encrypted data",
      "GDPR and CCPA compliant",
      "Zero data selling policy",
    ],
  },
];

interface ValueCardProps {
  prop: ValueProp;
}

function ValueCard(props: ValueCardProps) {
  const Icon = props.prop.icon;
  return (
    <Card class="backdrop-blur-2xl">
      <div class="flex flex-col h-full">
        <div class="mb-3 p-2 rounded-lg bg-[var(--color-bg-secondary)] w-fit">
          <Icon />
        </div>
        <h3 class="text-lg font-semibold text-[var(--color-text-primary)] mb-2">
          {props.prop.title}
        </h3>
        <p class="text-[var(--color-text-secondary)] mb-4 leading-relaxed">
          {props.prop.description}
        </p>
        <ul class="space-y-2 flex-1">
          <For each={props.prop.items}>
            {(item) => (
              <li class="flex items-start gap-2.5">
                <CheckIcon />
                <span class="text-[var(--color-text-secondary)] text-sm">
                  {item}
                </span>
              </li>
            )}
          </For>
        </ul>
      </div>
    </Card>
  );
}

interface WhyShieldAISectionProps {
  class?: string;
}

export default function WhyShieldAISection(props: WhyShieldAISectionProps) {
  return (
    <section
      id="why-shieldai"
      class={cn("py-20 md:py-28 scroll-mt-16", props.class)}
    >
      <PageContainer py="py-8">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-[var(--color-text-primary)] mb-4">
            Why ShieldAI
          </h2>
          <p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
            Built on cutting-edge technology with your privacy at the core
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <For each={valueProps}>
            {(prop) => <ValueCard prop={prop} />}
          </For>
        </div>
      </PageContainer>
    </section>
  );
}
