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";

interface Feature {
  title: string;
  description: string;
  icon: () => JSX.Element;
}

function DarkWatchIcon() {
  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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5" />
    </svg>
  );
}

function VoicePrintIcon() {
  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 4a4 4 0 00-4 4v8a4 4 0 008 0V8a4 4 0 00-4-4z"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
      />
      <path
        d="M4 11v2m16-2v2M8 18.5A6 6 0 0016 18.5"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
      />
    </svg>
  );
}

function SpamShieldIcon() {
  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="M10 10l4 4m0-4l-4 4"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
      />
    </svg>
  );
}

function HomeTitleIcon() {
  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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  );
}

function RemoveBrokersIcon() {
  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="M3 6h18M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2m-4 4v6m-4-6v6m-3-8v10a2 2 0 002 2h10a2 2 0 002-2V8H8z"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  );
}

function FamilyPlansIcon() {
  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 12a4 4 0 100-8 4 4 0 000 8zM5 22v-2a4 4 0 014-4h6a4 4 0 014 4v2"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
      />
      <path
        d="M20 9a3 3 0 100-6 3 3 0 000 6zM16 22v-2a3 3 0 00-3-3h-2a3 3 0 00-3 3v2"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        opacity="0.6"
      />
    </svg>
  );
}

const features: Feature[] = [
  {
    title: "DarkWatch",
    description:
      "Continuous dark web monitoring to detect your exposed credentials and personal data.",
    icon: DarkWatchIcon,
  },
  {
    title: "VoicePrint",
    description:
      "AI-powered voice clone detection to protect against deepfake voice scams.",
    icon: VoicePrintIcon,
  },
  {
    title: "SpamShield",
    description:
      "Intelligent spam and scam call blocking that learns your patterns over time.",
    icon: SpamShieldIcon,
  },
  {
    title: "HomeTitle",
    description:
      "Property fraud alerts that notify you of unauthorized changes to your home records.",
    icon: HomeTitleIcon,
  },
  {
    title: "RemoveBrokers",
    description:
      "Automatic data broker removal to minimize your personal data footprint online.",
    icon: RemoveBrokersIcon,
  },
  {
    title: "Family Plans",
    description:
      "Protect your whole household with shared monitoring, alerts, and management tools.",
    icon: FamilyPlansIcon,
  },
];

interface FeatureCardProps {
  feature: Feature;
}

function FeatureCard(props: FeatureCardProps) {
  const Icon = props.feature.icon;
  return (
    <Card class="hover:shadow-lg transition-shadow duration-300">
      <div class="flex items-start gap-4">
        <div class="flex-shrink-0 p-2 rounded-lg bg-[var(--color-bg-secondary)]">
          <Icon />
        </div>
        <div>
          <h3 class="text-lg font-semibold text-[var(--color-text-primary)] mb-1">
            {props.feature.title}
          </h3>
          <p class="text-[var(--color-text-secondary)] leading-relaxed">
            {props.feature.description}
          </p>
        </div>
      </div>
    </Card>
  );
}

interface FeaturesGridSectionProps {
  class?: string;
}

export default function FeaturesGridSection(props: FeaturesGridSectionProps) {
  return (
    <section
      id="features"
      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">
            Platform Features
          </h2>
          <p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
            Comprehensive protection powered by AI and real-time monitoring
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <For each={features}>
            {(feature) => <FeatureCard feature={feature} />}
          </For>
        </div>
      </PageContainer>
    </section>
  );
}
