import { WaitlistForm } from '@/components/waitlist/WaitlistForm';

export default function WaitlistPage() {
  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 FrenoCorp
          </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">
                "FrenoCorp 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 FrenoCorp. 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>
  );
}