import { WaitlistForm } from '@/components/waitlist/WaitlistForm';
import { waitlistEvents, initAnalytics } from './analytics';
import { useEffect } from 'solid-js';

export default function WaitlistPage() {
  // Initialize analytics on mount
  useEffect(() => {
    initAnalytics();
    waitlistEvents.page_view();
  }, []);
  return (
    <div class="waitlist-page">
      <main class="waitlist-hero">
        <div class="waitlist-content">
          <div class="waitlist-badge">
            <span class="badge-dot"></span>
            <span class="badge-text">Coming Soon</span>
          </div>

           <h1 class="waitlist-headline">
             Write Faster with Scripter
           </h1>

          <p class="waitlist-subheadline">
            The collaborative writing platform that brings your team together.
            Real-time editing, seamless integration, and powerful features.
          </p>

          <WaitlistForm />

          <div class="waitlist-features">
            <div class="feature">
              <div class="feature-icon">⚡</div>
              <h3>Real-Time Collaboration</h3>
              <p>Edit documents together with your team in real-time.</p>
            </div>

            <div class="feature">
              <div class="feature-icon">🔗</div>
              <h3>Seamless Integration</h3>
              <p>Fits perfectly into your existing workflow.</p>
            </div>

            <div class="feature">
              <div class="feature-icon">🎯</div>
              <h3>Powerful Features</h3>
              <p>Everything you need to write better, together.</p>
            </div>
          </div>
        </div>

        <div class="waitlist-social-proof">
          <div class="social-proof-header">
            <h3>Join thousands of writers who are waiting</h3>
          </div>

          <div class="testimonials">
            <div class="testimonial">
               <p class="testimonial-quote">
                 "Scripter transformed how our team collaborates on documents. It's simply amazing."
               </p>
              <div class="testimonial-author">
                <span class="author-name">Sarah Chen</span>
                <span class="author-role">Product Designer at TechCo</span>
              </div>
            </div>

            <div class="testimonial">
              <p class="testimonial-quote">
                "The real-time editing is incredibly smooth. Our team loves it."
              </p>
              <div class="testimonial-author">
                <span class="author-name">Marcus Johnson</span>
                <span class="author-role">Senior Writer at MediaCorp</span>
              </div>
            </div>

            <div class="testimonial">
              <p class="testimonial-quote">
                "Finally, a collaboration tool that actually makes writing faster."
              </p>
              <div class="testimonial-author">
                <span class="author-name">Emily Rodriguez</span>
                <span class="author-role">Content Strategist at StartupXYZ</span>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer class="waitlist-footer">
           <p>&copy; 2026 Scripter. All rights reserved.</p>
        <div class="footer-links">
          <a href="/">Home</a>
          <a href="/about">About</a>
          <a href="/privacy">Privacy</a>
          <a href="/terms">Terms</a>
        </div>
      </footer>
    </div>
  );
}
