---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';

const allRedflags = (await getCollection('redflags'))
  .sort((a, b) => b.data.lastUpdated.getTime() - a.data.lastUpdated.getTime())
const redflags = allRedflags.slice(0, 3);
---
<BaseLayout title="TrueTraceShorts — Get help with suspicious messages, popups, and payment requests" description="Clicked a suspicious link or saw a strange message? Choose what happened and get a calm next step. Plain-English scam self-defense for everyday users.">
  <section class="hero">
    <div class="container hero-grid">
      <div>
        <div class="hero-brand-lockup" aria-hidden="true">
          <img src="/brand/truetraceshorts-logo-512.webp" alt="" width="112" height="112" loading="eager" />
          <strong>TrueTrace<span>Shorts</span></strong>
        </div>
        <p class="eyebrow">Scam self-defense for normal people</p>
        <h1>Got a suspicious message? Don’t click yet.</h1>
        <p class="lead">Pick what happened and get one calm next step before you tap, call, pay, or log in.</p>
        <div class="urgent-choice-grid" aria-label="Choose your situation">
          <a class="urgent-choice primary-choice danger-choice" href="/already-clicked/">
            <span>I already clicked</span>
            <strong>Reduce the damage</strong>
          </a>
          <a class="urgent-choice" href="/safety/#suspicious-message">
            <span>I got a strange message</span>
            <strong>Check before you act</strong>
          </a>
          <a class="urgent-choice" href="/redflags/">
            <span>I want to learn the red flags</span>
            <strong>Browse examples</strong>
          </a>
        </div>
        <p class="emergency-line">If money, login details, card details, or identity documents are involved, act now.</p>
        <p class="hero-reassurance">No login. No form. No judgement. Just clear steps.</p>
      </div>
      <div class="hero-card hero-real-card" aria-label="Common scam screens you can check">
        <div class="real-frame-board">
          <div class="board-heading">
            <div>
              <span>Common screens</span>
              <strong>Swipe or scroll through examples</strong>
            </div>
            <a href="/redflags/">View all</a>
          </div>
          <div class="screen-carousel" aria-label="Browse common scam screens">
            <button class="carousel-button carousel-button-left" type="button" data-carousel-prev aria-label="Show previous scam examples">‹</button>
            <div class="screen-rail" tabindex="0" data-screen-rail>
              {allRedflags.map((entry) => (
                <a class="screen-card" href={`/redflags/${entry.data.slug}/`}>
                  <div class="screen-card-media">
                    {entry.data.screenImage ? (
                      <img src={entry.data.screenImage} alt={entry.data.screenImageAlt ?? entry.data.visibleScreen} loading="eager" />
                    ) : entry.data.thumbnail && (
                      <img src={entry.data.thumbnail} alt={entry.data.visibleScreen} loading="eager" />
                    )}
                  </div>
                  <div class="screen-card-body">
                    <small>{entry.data.category}</small>
                    <strong>{entry.data.shortTitle}</strong>
                    <p>{entry.data.visibleScreen}</p>
                  </div>
                </a>
              ))}
            </div>
            <button class="carousel-button carousel-button-right" type="button" data-carousel-next aria-label="Show next scam examples">›</button>
          </div>
          <div class="carousel-hint">
            <p>Use the buttons, mouse wheel, trackpad, or swipe. Three examples stay visible on desktop.</p>
          </div>
          <div class="board-footer">
            <span>Text messages</span>
            <span>Popups</span>
            <span>Payments</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section-tight">
    <div class="container path-panel">
      <div>
        <p class="eyebrow">What brought you here?</p>
        <h2>Pick the screen or request in front of you.</h2>
        <p>You do not need to know the scam name. Start with the situation: text, popup, money request, login page, payment change, or family panic message.</p>
      </div>
      <div class="arrival-grid">
        <a class="arrival-card" href="/redflags/delivery-sms-trap/">
          <span>I got a text</span>
          <strong>Small fee or urgent link?</strong>
          <p>Check sender pressure, shortened links, and payment requests before opening anything.</p>
        </a>
        <a class="arrival-card" href="/redflags/fake-support-popup/">
          <span>I saw a popup</span>
          <strong>Do not call the number</strong>
          <p>Scary browser warnings and fake support screens are built to make you rush.</p>
        </a>
        <a class="arrival-card" href="/redflags/fake-invoice-payment-route/">
          <span>Payment route changed</span>
          <strong>Verify outside the message</strong>
          <p>Confirm bank-detail changes through a trusted contact method you already had.</p>
        </a>
        <a class="arrival-card urgent" href="/already-clicked/">
          <span>Someone asks for money</span>
          <strong>Reduce the damage</strong>
          <p>Close the page, secure accounts, contact your bank or provider, and preserve evidence if needed.</p>
        </a>
      </div>
    </div>
  </section>

  <section class="section-tight">
    <div class="container need-grid">
      <a class="need-card" href="/redflags/delivery-sms-trap/">
        <strong>Delivery text or small fee?</strong>
        <p>Check links, deadlines, and payment requests before opening anything.</p>
      </a>
      <a class="need-card" href="/redflags/fake-support-popup/">
        <strong>Scary popup or phone number?</strong>
        <p>Real support does not hijack your screen and demand a call.</p>
      </a>
      <a class="need-card" href="/redflags/fake-invoice-payment-route/">
        <strong>Changed bank details?</strong>
        <p>Confirm payment changes through a trusted contact method you already had.</p>
      </a>
    </div>
  </section>

  <section class="section-tight">
    <div class="container checklist-cta-panel">
      <div>
        <p class="eyebrow">Free checklist</p>
        <h2>Digital Red Flags Checklist</h2>
        <p>Save a simple one-page checklist for suspicious texts, popups, login pages, payment requests, and urgent family messages. No newsletter gate for now — just the useful bit, terribly radical.</p>
      </div>
      <div class="button-row">
        <a class="button primary" href="/checklist/">Open the free checklist</a>
        <a class="button secondary" href="/redflags/">Browse red flags</a>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="section-header-row">
        <div>
        <p class="eyebrow">Latest guides</p>
        <h2>Match the screen. Then take one safer move.</h2>
        </div>
        <p>Each guide is written for the person looking at a suspicious screen right now — not for cybersecurity experts, and not for lectures after the fact.</p>
      </div>
      <div class="card-grid video-card-grid">
        {redflags.map((entry) => (
          <a class="card redflag-card video-redflag-card" href={`/redflags/${entry.data.slug}/`}>
            <div class="start-image-preview" aria-label={`Screen example for ${entry.data.shortTitle}`}>
              {entry.data.thumbnail ? (
                <img src={entry.data.thumbnail} alt={entry.data.visibleScreen} loading="eager" />
              ) : (
                <div class="start-image-fallback">
                  <span>{entry.data.category}</span>
                  <strong>{entry.data.visibleScreen}</strong>
                </div>
              )}
            </div>
            <span class="badge">{entry.data.category}</span>
            <h3>{entry.data.shortTitle}</h3>
            <p>{entry.data.hook}</p>
            <p class="red"><strong>Red flag:</strong> {entry.data.redFlag}</p>
            <p class="move"><strong>Safer move:</strong> {entry.data.saferMove}</p>
          </a>
        ))}
      </div>
    </div>
  </section>

  <section class="section-tight">
    <div class="container notice hub-cta">
      <div>
        <p class="eyebrow">Save this page</p>
        <h2>Use it before you click next time.</h2>
        <p>TrueTraceShorts is built for quick checks: suspicious text, popup, invoice, login page, checkout, or account warning. If you are unsure, pause and verify through a trusted app or website you open yourself.</p>
      </div>
      <div class="channel-pill-row" aria-label="Primary channels">
        <span>YouTube Shorts</span>
        <span>Search</span>
        <span>Shared links</span>
      </div>
      <p class="small">Do not paste private links, phone numbers, card details, passwords, or personal information into public comments or messages.</p>
    </div>
  </section>
  <script is:inline>
    (() => {
      const rail = document.querySelector('[data-screen-rail]');
      const prev = document.querySelector('[data-carousel-prev]');
      const next = document.querySelector('[data-carousel-next]');
      if (!rail || !prev || !next) return;
      const scrollStep = () => Math.max(rail.clientWidth * 0.92, 260);
      prev.addEventListener('click', () => rail.scrollBy({ left: -scrollStep(), behavior: 'smooth' }));
      next.addEventListener('click', () => rail.scrollBy({ left: scrollStep(), behavior: 'smooth' }));
      rail.addEventListener('wheel', (event) => {
        if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
        const canScroll = rail.scrollWidth > rail.clientWidth;
        if (!canScroll) return;
        event.preventDefault();
        rail.scrollBy({ left: event.deltaY * 0.9, behavior: 'auto' });
      }, { passive: false });
    })();
  </script>
</BaseLayout>