import { Component } from 'solid-js';
import { A } from '@solidjs/router';

export const NotFound: Component = () => {
  return (
    <div class="not-found-page">
      <nav class="landing-nav">
        <div class="nav-container">
          <div class="nav-logo">
            <A href="/">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
                <path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
                <path d="M16 6L8 10V22L16 26L24 22V10L16 6Z" fill="#76b3e1"/>
              </svg>
              <span class="logo-text">Scripter</span>
            </A>
          </div>
          <div class="nav-links">
            <a href="/#features">Features</a>
            <a href="/#pricing">Pricing</a>
            <A href="/blog">Blog</A>
            <A href="/sign-in" class="nav-signin">Sign In</A>
            <A href="/sign-up" class="nav-signup">Start Writing Free</A>
          </div>
        </div>
      </nav>

      <section class="not-found-content">
        <div class="error-code">404</div>
        <h1>Page not found</h1>
        <p>
          Looks like this scene got cut from the final draft. 
          The page you're looking for doesn't exist or has been moved.
        </p>
        <div class="not-found-actions">
          <A href="/" class="cta-primary">Back to Home</A>
          <A href="/blog" class="cta-secondary">Browse Blog</A>
        </div>
        <div class="writing-tip">
          <h3>📝 Writing Tip</h3>
          <p>
            Writer's block? Try writing out of sequence. Jump to a scene you're 
            excited about — you can always connect the dots later.
          </p>
        </div>
      </section>

      <footer class="landing-footer">
        <div class="footer-content">
          <div class="footer-brand">
            <div class="nav-logo">
              <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
                <path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
              </svg>
              <span>Scripter</span>
            </div>
            <p>Write Faster.</p>
          </div>
          <div class="footer-links">
            <div class="footer-col">
              <h4>Product</h4>
              <a href="/#features">Features</a>
              <a href="/#pricing">Pricing</a>
              <a href="/blog">Blog</a>
            </div>
            <div class="footer-col">
              <h4>Company</h4>
              <a href="/about">About</a>
              <a href="/faq">FAQ</a>
              <a href="/contact">Contact</a>
            </div>
            <div class="footer-col">
              <h4>Legal</h4>
              <a href="/terms">Terms</a>
              <a href="/privacy">Privacy</a>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2026 Scripter. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};
