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 IndividualIcon() {
  return (
    <svg
      width="40"
      height="40"
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="w-10 h-10 text-[var(--color-brand-primary)]"
    >
      <circle cx="20" cy="14" r="6" fill="currentColor" />
      <path
        d="M8 32c0-6.6 5.4-12 12-12s12 5.4 12 12H8z"
        fill="currentColor"
      />
    </svg>
  );
}

function FamilyIcon() {
  return (
    <svg
      width="40"
      height="40"
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="w-10 h-10 text-[var(--color-brand-primary)]"
    >
      <circle cx="14" cy="12" r="5" fill="currentColor" />
      <circle cx="26" cy="12" r="4" fill="currentColor" opacity="0.7" />
      <path
        d="M2 30c0-5 4-9 9-9 1.5 0 3 .4 4.2 1.1C16.5 21.5 18 21 20 21s3.5.5 4.8 1.1C26 21.4 27.5 21 29 21c5 0 9 4 9 9H2z"
        fill="currentColor"
      />
    </svg>
  );
}

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

function Panel(props: PanelProps) {
  const Icon = props.icon;
  return (
    <Card class="h-full">
      <div class="flex flex-col h-full">
        <div class="mb-4">
          <Icon />
        </div>
        <h3 class="text-xl font-semibold text-[var(--color-text-primary)] mb-2">
          {props.title}
        </h3>
        <p class="text-[var(--color-text-secondary)] mb-6">
          {props.description}
        </p>
        <ul class="space-y-3 flex-1">
          <For each={props.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 ForUsersSectionProps {
  class?: string;
}

export default function ForUsersSection(props: ForUsersSectionProps) {
  return (
    <section
      id="for-users"
      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">
            For Everyone
          </h2>
          <p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
            Whether you're protecting yourself or your whole family
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Panel
            title="For Individuals"
            description="Personal identity protection tailored to your digital footprint."
            icon={IndividualIcon}
            items={[
              "Monitor personal email and phone numbers",
              "Dark web credential scanning",
              "Voiceprint clone detection",
              "Spam and scam call filtering",
              "Data broker opt-out service",
            ]}
          />
          <Panel
            title="For Families"
            description="Group management tools to keep every household member safe."
            icon={FamilyIcon}
            items={[
              "Add unlimited family members",
              "Shared alert dashboard",
              "Child account monitoring",
              "Family-wide dark web scans",
              "Centralized threat notifications",
            ]}
          />
        </div>
      </PageContainer>
    </section>
  );
}