import { Component } from 'solid-js';
import WaitlistForm from './WaitlistForm';

interface TierFeature {
  name: string;
  basic: boolean | string;
  plus: boolean | string;
  premium: boolean | string;
}

const tiers = [
  {
    name: 'Basic',
    price: 'Free',
    description: 'Essential protection to get started',
    highlight: false,
  },
  {
    name: 'Plus',
    price: '$9.99',
    period: '/month',
    description: 'Complete protection for individuals',
    highlight: true,
  },
  {
    name: 'Premium',
    price: '$24.99',
    period: '/month',
    description: 'Comprehensive family protection',
    highlight: false,
  },
];

const features: TierFeature[] = [
  { name: 'Dark Web Scans (Phone)', basic: '1/mo', plus: 'Unlimited', premium: 'Unlimited' },
  { name: 'Dark Web Scans (Email)', basic: '1/mo', plus: 'Unlimited', premium: 'Unlimited' },
  { name: 'Password Leak Detection', basic: false, plus: true, premium: true },
  { name: 'Spam Call Detection', basic: 'Basic', plus: 'AI-Powered', premium: 'AI-Powered' },
  { name: 'Spam Text Alerts', basic: '50/mo', plus: 'Unlimited', premium: 'Unlimited' },
  { name: 'Voice Cloning Detection', basic: false, plus: '3 Family Members', premium: 'Unlimited' },
  { name: 'Home Title Protection', basic: false, plus: false, premium: true },
  { name: 'SSN Monitoring', basic: false, plus: false, premium: true },
  { name: 'Financial Fraud Detection', basic: false, plus: false, premium: true },
  { name: '24/7 Priority Support', basic: false, plus: 'Email', premium: 'Phone + Chat' },
];

const TierComparison: Component = () => {
  return (
    <section class="tiers" id="pricing">
      <div class="container">
        <h2 class="section-title">Choose Your Protection Level</h2>
        <p class="section-subtitle">
          Start free and upgrade as your needs grow. All tiers include our core AI protection engine.
        </p>

        <div class="tier-grid">
          {tiers.map((tier) => (
            <div class={`tier-card ${tier.highlight ? 'tier-highlighted' : ''}`}>
              {tier.highlight && <div class="tier-badge">Most Popular</div>}
              <h3 class="tier-name">{tier.name}</h3>
              <div class="tier-price">
                <span class="price-value">{tier.price}</span>
                {tier.period && <span class="price-period">{tier.period}</span>}
              </div>
              <p class="tier-desc">{tier.description}</p>
              <WaitlistForm variant="inline" buttonText={`Join ${tier.name} Waitlist`} placeholder="Email for updates" />
            </div>
          ))}
        </div>

        <div class="tier-table-wrapper">
          <table class="tier-table">
            <thead>
              <tr>
                <th>Feature</th>
                <th>Basic</th>
                <th class="col-highlighted">Plus</th>
                <th>Premium</th>
              </tr>
            </thead>
            <tbody>
              {features.map((feature) => (
                <tr>
                  <td class="feature-name">{feature.name}</td>
                  <td>{renderCell(feature.basic)}</td>
                  <td class="col-highlighted">{renderCell(feature.plus)}</td>
                  <td>{renderCell(feature.premium)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};

function renderCell(value: boolean | string) {
  if (typeof value === 'boolean') {
    return value ? <span class="check">✓</span> : <span class="cross">—</span>;
  }
  return <span>{value}</span>;
}

export default TierComparison;
