Kordant/web/src/components/landing/WhyKordantSection.tsx

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="M4 9l3 3 7-7"
        stroke="var(--color-success)"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  );
}

function ProactiveIcon() {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="w-6 h-6 text-[var(--color-brand-primary)]"
    >
      <path
        d="M13 3l-2 6h5l-3 8"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <path
        d="M4 14l5-5m0 0l5 5m-5-5v12"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  );
}

function AIIcon() {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="w-6 h-6 text-[var(--color-brand-primary)]"
    >
      <path
        d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linejoin="round"
      />
      <path
        d="M8 16l2 2-2 2M16 16l-2 2 2 2"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  );
}

function PrivacyIcon() {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="w-6 h-6 text-[var(--color-brand-primary)]"
    >
      <path
        d="M12 2l9 4v6c0 5.55-3.84 10.74-9 12-5.16-1.26-9-6.45-9-12V6l9-4z"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <path
        d="M9 12l2 2 4-4"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </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 WhyKordantSectionProps {
  class?: string;
}

export default function WhyKordantSection(props: WhyKordantSectionProps) {
  return (
    <section
      id="why-kordant"
      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 Kordant
          </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>
  );
}