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

export const About: Component = () => {
  return (
    <div class="about-page">
      {/* Navigation */}
      <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="/about" class="active">About</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>

      {/* Hero Section */}
      <section class="about-hero">
        <div class="about-hero-content">
          <h1>Built by screenwriters, for screenwriters</h1>
          <p>We're on a mission to make professional screenwriting tools accessible to every storyteller.</p>
        </div>
      </section>

      {/* Mission Section */}
      <section class="mission-section">
        <div class="mission-content">
          <h2>Our Mission</h2>
          <p class="mission-statement">
            Make professional screenwriting tools accessible to every storyteller.
          </p>
          <p>
            Screenwriting software hasn't evolved in decades. Final Draft charges $199 for software 
            that hasn't seen real innovation since 2010. WriterDuet tried to modernize, but they're 
            still stuck on outdated technology.
          </p>
          <p>
            We knew there had to be a better way. So we built Scripter from the ground up with 
            modern technology, fair pricing, and features that actually help you write better.
          </p>
        </div>
      </section>

      {/* Values Section */}
      <section class="values-section">
        <div class="values-container">
          <h2>Our Values</h2>
          <div class="values-grid">
            <div class="value-card">
              <div class="value-icon">🎯</div>
              <h3>Accessibility</h3>
              <p>Great tools shouldn't cost a fortune. We believe every writer deserves access to professional-grade software, regardless of budget.</p>
            </div>
            <div class="value-card">
              <div class="value-icon">🤝</div>
              <h3>Collaboration</h3>
              <p>Screenwriting is a team sport. We build features that bring writers together, not isolate them behind desktop-only software.</p>
            </div>
            <div class="value-card">
              <div class="value-icon">💡</div>
              <h3>Innovation</h3>
              <p>We're building the future of screenwriting. AI assistance, real-time collaboration, and modern tech stack — not relics from the past.</p>
            </div>
            <div class="value-card">
              <div class="value-icon">❤️</div>
              <h3>Community</h3>
              <p>We're screenwriters too. We understand your struggles, celebrate your successes, and are committed to helping you tell great stories.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Story Section */}
      <section class="story-section">
        <div class="story-content">
          <h2>Our Story</h2>
          <p>
            Scripter was born out of frustration. We were working on a spec script together, 
            and the process of collaborating was painful. Emailing drafts back and forth. 
            Losing track of changes. Fighting with formatting instead of focusing on story.
          </p>
          <p>
            We tried every tool on the market. Final Draft was expensive and felt ancient. 
            WriterDuet was better but still slow and limited. There had to be something better.
          </p>
          <p>
            So we decided to build it ourselves. We assembled a team of screenwriters and 
            engineers who shared our vision: create the screenwriting platform we wished 
            existed.
          </p>
          <p>
            Today, Scripter serves thousands of writers worldwide. From first-time 
            screenwriters to working professionals, our community is growing every day. 
            And we're just getting started.
          </p>
        </div>
      </section>

      {/* Team Section */}
      <section class="team-section">
        <div class="team-container">
          <h2>The Team</h2>
          <p class="team-intro">
            We're a remote-first team of screenwriters, engineers, and designers 
            passionate about storytelling and technology.
          </p>
          <div class="team-grid">
            <div class="team-member">
              <div class="member-avatar">👤</div>
              <h3>Founders</h3>
              <p>Screenwriters turned entrepreneurs</p>
            </div>
            <div class="team-member">
              <div class="member-avatar">👥</div>
              <h3>Engineering</h3>
              <p>Building the future of writing tools</p>
            </div>
            <div class="team-member">
              <div class="member-avatar">🎨</div>
              <h3>Design</h3>
              <p>Crafting beautiful experiences</p>
            </div>
            <div class="team-member">
              <div class="member-avatar">📣</div>
              <h3>Community</h3>
              <p>Supporting writers worldwide</p>
            </div>
          </div>
          <p class="team-cta">
            Interested in joining us? <A href="/contact">Get in touch</A>.
          </p>
        </div>
      </section>

      {/* CTA Section */}
      <section class="about-cta">
        <h2>Ready to join thousands of writers?</h2>
        <p>Start writing your next script with Scripter today.</p>
        <A href="/sign-up" class="cta-primary">Start Writing Free</A>
      </section>

      {/* Footer */}
      <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>
  );
};
