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

const HeroSection: Component = () => {
  return (
    <section class="hero">
      <div class="hero-bg" />
      <div class="container">
        <div class="hero-badge">Coming Soon</div>
        <h1 class="hero-title">
          AI-Powered Identity<br />
          <span class="gradient-text">Protection for Everyone</span>
        </h1>
        <p class="hero-subtitle">
          ShieldAI detects voice cloning attacks, monitors the dark web for your data,
          and blocks spam calls and texts in real time. Protect your family from
          AI-driven scams before they strike.
        </p>
        <div class="hero-waitlist">
          <h3>Join 1,000+ early adopters on the waitlist</h3>
          <WaitlistForm variant="hero" />
        </div>
        <div class="hero-stats">
          <div class="stat">
            <span class="stat-value">10M+</span>
            <span class="stat-label">Spam Calls Blocked</span>
          </div>
          <div class="stat">
            <span class="stat-value">99.7%</span>
            <span class="stat-label">Voice Clone Detection</span>
          </div>
          <div class="stat">
            <span class="stat-value">5K+</span>
            <span class="stat-label">Dark Web Exposures Found</span>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HeroSection;