---
export const prerender = false;
import Layout from '../layouts/Main.astro';
import Search from '../components/Search.astro';
import NavBar from '../components/NavBar.astro';
import Footer from '../components/Footer.astro';
import { Show, SignInButton } from '@clerk/astro/components'
import Hero from '../components/Hero.astro';
import BackToTop from '../components/BackToTop.astro';
import NavItems from '../components/NavItems.astro';
---
<Layout title="RAT - Realtime, Accurate and Transparent TCG Pricing Data" >
    <Hero slot="page" />
    <div slot="page">
        <!-- ═══════════════════════════════════════════
            SOCIAL PROOF / STATS BAR
        ═══════════════════════════════════════════ -->
        <section class="stats-bar py-4 border-top border-bottom border-subtle" aria-label="Platform statistics">
        <div class="container">
            <ul class="list-unstyled d-flex flex-wrap justify-content-center justify-content-md-between gap-4 mb-0 text-center">
            <li>
                <strong class="d-block fs-4 fw-bold text-aqua">Pokémon TCG</strong>
                <span class="text-body-secondary small">EN · JP Languages</span>
            </li>
            <li>
                <strong class="d-block fs-4 fw-bold text-aqua">All Conditions</strong>
                <span class="text-body-secondary small">NM · LP · MP · HP · DMG</span>
            </li>
            <li>
                <strong class="d-block fs-4 fw-bold text-aqua">Real-Time</strong>
                <span class="text-body-secondary small">Accurate Market Prices</span>
            </li>
            <li>
                <strong class="d-block fs-4 fw-bold text-aqua">100% Free</strong>
                <span class="text-body-secondary small">Pricing Features Always Free</span>
            </li>
            </ul>
        </div>
        </section>
        <!-- ═══════════════════════════════════════════
            CORE FEATURES
        ═══════════════════════════════════════════ -->
        <section class="py-6" aria-labelledby="features-heading">
        <div class="container">
            <header class="text-center mb-5">
            <h2 id="features-heading" class="h1 fw-bold">Everything you need to collect smarter</h2>
            <p class="text-body-secondary lead mt-2">Built by collectors, for collectors. No fluff.</p>
            </header>

            <div class="row g-4">

            <article class="col-md-5 offset-md-1">
                <div class="feature-card h-100 p-4 rounded-3">
                <div class="feature-icon mb-3" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16"><path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/></svg>
                </div>
                <h3 class="h5 fw-semibold mb-2">Complete Card Database</h3>
                <p class="text-body-secondary mb-0">Search across every English and Japanese set. Find any card instantly with the condition-by-condition pricing you need to buy, sell, or trade with confidence.</p>
                </div>
            </article>

            <article class="col-md-5">
                <div class="feature-card h-100 p-4 rounded-3">
                <div class="feature-icon mb-3" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16"><path d="M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07"/></svg>
                </div>
                <h3 class="h5 fw-semibold mb-2">Condition-Graded Pricing</h3>
                <p class="text-body-secondary mb-0">NM, LP, MP, HP, and DMG prices displayed side by side. Stop guessing what a played card is worth — see every tier at once so you never undersell or overpay.</p>
                </div>
            </article>

            <article class="col-md-5 offset-md-1">
                <div class="feature-card h-100 p-4 rounded-3">
                <div class="feature-icon mb-3" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/></svg>
                </div>
                <h3 class="h5 fw-semibold mb-2">All Variants</h3>
                <p class="text-body-secondary mb-0">We display every card variant separately—no stacking—so you can see true edition-level prices, trends, and rarity at a glance..</p>
                </div>
            </article>

            <article class="col-md-5">
                <div class="feature-card h-100 p-4 rounded-3">
                <div class="feature-icon mb-3" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"/></svg>
                </div>
                <h3 class="h5 fw-semibold mb-2">Fast Search, Instant Results</h3>
                <p class="text-body-secondary mb-0">Type a card name + number or search by eras like "e-reader" or "SWSH". Powerful filters let you drill into exactly the set, variant, rarity or card type you care about.</p>
                </div>
            </article>
        </div>
        </section>

        <!-- ═══════════════════════════════════════════
            UPCOMING PREMIUM / CTA TEASER
        ═══════════════════════════════════════════ -->
        <section class="premium-section py-6" aria-labelledby="premium-heading">
        <div class="container">
            <div class="row align-items-center g-5">

            <div class="col-lg-5">
                <p class="eyebrow text-purple-light mb-3">Coming Soon · Premium</p>
                <h2 id="premium-heading" class="h1 fw-bold mb-3">
                <span class="text-gradient">Your collection,<br/>fully managed.</span>
                </h2>
                <p class="text-body-secondary lead mb-4">
                We're building a suite of inventory and curation tools for serious collectors. Sign up free today and be first in line when they launch.
                </p>
                <Show when="signed-out">
                <SignInButton asChild mode="modal">
                    <button class="btn btn-purple btn-lg px-4">
                    Join Now! — It's Free
                    </button>
                </SignInButton>
                </Show>
            </div>

            <div class="col-lg-7">
                <div class="premium-list">

                <div class="premium-item p-4 rounded-3 mb-3">
                    <div class="d-flex align-items-start gap-3">
                    <span class="badge-coming">Coming Soon</span>
                    <div>
                        <h3 class="h6 fw-semibold mb-1">Collection Portfolio Tracker</h3>
                        <p class="text-body-secondary small mb-0">Add cards you own with their condition and purchase price. Watch your total collection value update in real time as market prices shift — so you always know your net position.</p>
                    </div>
                    </div>
                </div>

                <div class="premium-item p-4 rounded-3 mb-3">
                    <div class="d-flex align-items-start gap-3">
                    <span class="badge-coming">Coming Soon</span>
                    <div>
                        <h3 class="h6 fw-semibold mb-1">Latest Sales Aggregation</h3>
                        <p class="text-body-secondary small mb-0">See recent sale prices across different trusted marketplaces, including TCGPlayer and eBay. Make informed purchases based on real-time market activity, not just Market Price.</p>
                    </div>
                    </div>
                </div>

                <div class="premium-item p-4 rounded-3">
                    <div class="d-flex align-items-start gap-3">
                    <span class="badge-coming">Coming Soon</span>
                    <div>
                        <h3 class="h6 fw-semibold mb-1">Graded Card Inventory</h3>
                        <p class="text-body-secondary small mb-0">Log PSA, BGS, and CGC slabs with their cert numbers, grades, and current values. Track your graded portfolio separately from your raw collection.</p>
                    </div>
                    </div>
                </div>

                </div>
            </div>

            </div>
        </div>
        </section>        



    <!-- ═══════════════════════════════════════════
         FINAL CTA
    ═══════════════════════════════════════════ -->
    <section class="cta-section py-6" aria-labelledby="cta-heading">
        <div class="hero-bg" aria-hidden="true"></div>
      <div class="container text-center">
        <h2 id="cta-heading" class="display-5 fw-bold mb-3">Ready to join the RAT Pack?</h2>
        <p class="lead text-body-secondary mb-4 mx-auto" style="max-width: 520px;">
          Join free today. Browse every card, track prices across conditions, and get early access to premium collection tools as we build them.
        </p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
          <Show when="signed-out">
            <SignInButton asChild mode="modal">
              <button class="btn btn-purple btn-lg px-5">
                Create Free Account
              </button>
            </SignInButton>
        </Show>
          <a href="/pokemon" class="btn btn-outline-light btn-lg px-5">Browse Cards First</a>
        </div>
      </div>
    </section>

    <BackToTop />
    </div>

    <Footer slot="footer" />
</Layout>