import { Component, For } from 'solid-js';

interface Feature {
  icon: string;
  title: string;
  description: string;
}

const features: Feature[] = [
  {
    icon: '🎙️',
    title: 'Voice Cloning Detection',
    description:
      'Real-time detection of AI-generated voice clones during incoming calls. We analyze audio fingerprints and synthetic voice patterns to stop family impersonation scams.',
  },
  {
    icon: '🌐',
    title: 'Dark Web Monitoring',
    description:
      'Continuous scanning of dark web marketplaces, forums, and data leaks for your phone numbers, emails, passwords, and SSN. Get instant alerts when your data is exposed.',
  },
  {
    icon: '🚫',
    title: 'AI Spam Call Blocking',
    description:
      'Machine learning classification identifies spam calls before they reach you. Our model blocks robocalls, scam calls, and unwanted telemarketers with 99% accuracy.',
  },
  {
    icon: '📱',
    title: 'Smart SMS Filtering',
    description:
      'Real-time SMS classification filters phishing texts, scam messages, and spam. AI-powered detection catches sophisticated social engineering attacks.',
  },
  {
    icon: '🏠',
    title: 'Family Protection',
    description:
      'Extend protection to up to 5 family members. Monitor elderly parents for voice cloning attacks and keep everyone safe from digital threats.',
  },
  {
    icon: '🔐',
    title: 'Home Title Protection',
    description:
      'Premium tier monitors property records for fraudulent transfers and liens. Get alerted if someone tries to steal your home title.',
  },
];

const FeaturesSection: Component = () => {
  return (
    <section class="features" id="features">
      <div class="container">
        <h2 class="section-title">Comprehensive Protection Suite</h2>
        <p class="section-subtitle">
          One platform to protect your identity, your family, and your home from the
          growing threat of AI-powered scams.
        </p>
        <div class="features-grid">
          <For each={features}>
            {(feature) => (
              <div class="feature-card">
                <div class="feature-icon">{feature.icon}</div>
                <h3 class="feature-title">{feature.title}</h3>
                <p class="feature-desc">{feature.description}</p>
              </div>
            )}
          </For>
        </div>
      </div>
    </section>
  );
};

export default FeaturesSection;