/**
 * Public landing page.
 *
 * ⚠️ AUTO-GENERATED BY PRISM (customizable — will not be overwritten)
 */

import type { JSX } from 'react';
import { Link, Navigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
{% if dark_mode %}import { ThemeToggle } from '../ui/ThemeToggle';
{% endif %}
const APP_NAME = "{{ project_title }}";

export default function LandingPage(): JSX.Element {
  const { isLoading, isAuthenticated } = useAuth();

  if (!isLoading && isAuthenticated) {
    return <Navigate to="/dashboard" replace />;
  }

  return (
    <div className="min-h-screen bg-surface text-foreground">
      {/* Navbar */}
      <header className="sticky top-0 z-50 bg-surface-elevated/80 backdrop-blur border-b border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
              <span className="text-white font-bold text-sm">{APP_NAME.charAt(0).toUpperCase()}</span>
            </div>
            <span className="font-semibold text-foreground">{APP_NAME}</span>
          </div>

          <nav className="hidden md:flex items-center gap-6">
            <a href="#features" className="text-sm text-muted hover:text-foreground transition-colors">Features</a>
            <a href="#about" className="text-sm text-muted hover:text-foreground transition-colors">About</a>
          </nav>

          <div className="flex items-center gap-3">
{% if dark_mode %}            <ThemeToggle size="sm" />
{% endif %}            <Link to="/login" className="btn-ghost text-sm px-4 py-2">Log in</Link>
            <Link to="/signup" className="btn-primary text-sm px-4 py-2 rounded-md">Sign Up</Link>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28 text-center">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground">
          Welcome to {APP_NAME}
        </h1>
        <p className="mt-6 max-w-2xl mx-auto text-lg sm:text-xl text-muted">
          {{ project_description }}
        </p>
        <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
          <Link to="/signup" className="btn-primary text-base px-8 py-3 rounded-md">Get Started</Link>
          <a href="#features" className="btn-secondary text-base px-8 py-3 rounded-md">Learn More</a>
        </div>
      </section>

      {/* Features */}
      <section id="features" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <h2 className="text-3xl font-bold text-center text-foreground">Features</h2>
        <p className="mt-4 text-center text-muted max-w-2xl mx-auto">
          Everything you need to get up and running quickly.
        </p>
        <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {/* Feature 1 */}
          <div className="card p-6 rounded-lg">
            <div className="w-10 h-10 bg-primary/10 rounded-md flex items-center justify-center mb-4">
              <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>
            <h3 className="text-lg font-semibold text-foreground">Lightning Fast</h3>
            <p className="mt-2 text-sm text-muted">Optimized for speed and performance out of the box.</p>
          </div>

          {/* Feature 2 */}
          <div className="card p-6 rounded-lg">
            <div className="w-10 h-10 bg-primary/10 rounded-md flex items-center justify-center mb-4">
              <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
            </div>
            <h3 className="text-lg font-semibold text-foreground">Secure by Default</h3>
            <p className="mt-2 text-sm text-muted">Built-in authentication and role-based access control.</p>
          </div>

          {/* Feature 3 */}
          <div className="card p-6 rounded-lg">
            <div className="w-10 h-10 bg-primary/10 rounded-md flex items-center justify-center mb-4">
              <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
              </svg>
            </div>
            <h3 className="text-lg font-semibold text-foreground">Easy to Customize</h3>
            <p className="mt-2 text-sm text-muted">Flexible design system that adapts to your brand.</p>
          </div>
        </div>
      </section>

      {/* About / How It Works */}
      <section id="about" className="bg-surface-sunken py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-center text-foreground">How It Works</h2>
          <p className="mt-4 text-center text-muted max-w-2xl mx-auto">
            Get started in three simple steps.
          </p>
          <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto text-lg font-bold">1</div>
              <h3 className="mt-4 text-lg font-semibold text-foreground">Sign Up</h3>
              <p className="mt-2 text-sm text-muted">Create your account in seconds.</p>
            </div>
            <div className="text-center">
              <div className="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto text-lg font-bold">2</div>
              <h3 className="mt-4 text-lg font-semibold text-foreground">Configure</h3>
              <p className="mt-2 text-sm text-muted">Set up your workspace to fit your needs.</p>
            </div>
            <div className="text-center">
              <div className="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto text-lg font-bold">3</div>
              <h3 className="mt-4 text-lg font-semibold text-foreground">Launch</h3>
              <p className="mt-2 text-sm text-muted">Go live and start growing your business.</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
        <h2 className="text-3xl font-bold text-foreground">Ready to get started?</h2>
        <p className="mt-4 text-muted max-w-xl mx-auto">
          Join today and see what {APP_NAME} can do for you.
        </p>
        <div className="mt-8">
          <Link to="/signup" className="btn-primary text-base px-8 py-3 rounded-md">Sign Up Now</Link>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-border py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <div className="w-6 h-6 bg-primary rounded-md flex items-center justify-center">
              <span className="text-white font-bold text-xs">{APP_NAME.charAt(0).toUpperCase()}</span>
            </div>
            <span className="text-sm font-medium text-foreground">{APP_NAME}</span>
          </div>
          <p className="text-xs text-muted">&copy; {new Date().getFullYear()} {APP_NAME}. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}
