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="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 VoicePrintIcon() {
  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-4V2zM10 6h12v2h-2v10h2v2H10v-2h2V8h-2V6z"
        fill="currentColor"
      />
    </svg>
  );
}

function SpamShieldIcon() {
  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="M10 2h12l4 4v4c0 8-4 14-8 16-4-2-8-8-8-16V6l4-4zm1 2L8 8v3c0 6.7 3.4 12.2 8 14.4 4.6-2.2 8-7.7 8-14.4V8l-3-4H11z"
        fill="currentColor"
      />
    </svg>
  );
}

function HomeTitleIcon() {
  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 4L4 12v14h8v-8h8v8h8V12L16 4zm0 3.2L24 12v2H8v-2L16 7.2z"
        fill="currentColor"
      />
    </svg>
  );
}

function RemoveBrokersIcon() {
  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="M12 4h8v2h-8V4zm-2 4h12l2 2v2H8v-2l2-2zm-2 4h16v12H8V12zm2 2v8h12v-8H10z"
        fill="currentColor"
      />
    </svg>
  );
}

function FamilyPlansIcon() {
  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="M12 6c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm8 0c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM8 16c-2.8 0-5 2.2-5 5v5h10v-5c0-2.8-2.2-5-5-5zm10 0c-2.8 0-5 2.2-5 5v5h10v-5c0-2.8-2.2-5-5-5z"
        fill="currentColor"
      />
    </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>
  );
}
