---
import BaseLayout from '@shared/layouts/BaseLayout.astro';
import NewsletterSignup from '@shared/components/NewsletterSignup.astro';

type PostModule = {
  frontmatter: {
    title: string;
    description: string;
    dek?: string;
    published?: string;
    readTime?: string;
    draft?: boolean;
  };
  url: string;
};

const modules = Object.values(import.meta.glob('./*.mdx', { eager: true })) as PostModule[];

const posts = modules
  .filter((m) => !m.frontmatter?.draft)
  .sort((a, b) => {
    const aTime = a.frontmatter.published ? Date.parse(a.frontmatter.published) : 0;
    const bTime = b.frontmatter.published ? Date.parse(b.frontmatter.published) : 0;
    return bTime - aTime;
  });

const cardTitle = (title: string) => (title.split(':')[0] ?? title).trim();
---

<BaseLayout
  title="Insights - CULTSCALE"
  description="CULTSCALE insights on independent cinema, distribution, and the future of theatrical."
  ogTitle="Insights - CULTSCALE"
  ogDescription="CULTSCALE insights on independent cinema, distribution, and the future of theatrical."
>
  <main class="insights-index">
    <div class="container">
      <p class="kicker">INSIGHTS</p>
      <h1>Insights in production</h1>
      <p class="dek">
        Research and analysis are in progress. If you want to talk through strategy now, schedule a session.
      </p>

      <div class="list">
        {posts.length ? (
          posts.map((post) => (
            <a class="item" href={post.url}>
              <div class="item-meta">
                {[post.frontmatter.published, post.frontmatter.readTime].filter(Boolean).join(' • ')}
              </div>
              <div class="item-title">{cardTitle(post.frontmatter.title)}</div>
              <div class="item-desc">{post.frontmatter.dek ?? post.frontmatter.description}</div>
            </a>
          ))
        ) : (
          <div class="empty">Publishing soon.</div>
        )}
      </div>

      <div class="cta">
        <a class="cta-button" href="/call">Schedule a Session</a>
        <a class="cta-button cta-secondary" href="/about">About CULTSCALE</a>
      </div>

      <div class="signup">
        <NewsletterSignup
          newsletter="CULTSCALE"
          source="cultscale"
          redirectTo="/insights?subscribed=1"
          title="Get CULTSCALE insights"
          description="Market notes and release patterns. One email when we have something useful."
          redirectParam="subscribed"
        />
      </div>
    </div>
  </main>


  <style>
    .insights-index {
      padding: 8rem 0 6rem;
    }

    .kicker {
      font-size: 0.75rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--cult-gray);
      opacity: 0.75;
      margin-bottom: 1.25rem;
    }

    h1 {
      font-size: clamp(2.25rem, 5vw, 3.5rem);
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin-bottom: 1.25rem;
      text-shadow: 0 0 24px rgba(255,255,255,0.18);
    }

    .dek {
      font-size: 1.25rem;
      color: var(--cult-gray);
      max-width: 60ch;
      margin-bottom: 3rem;
    }

    .signup {
      margin: 3rem 0 0;
      padding-top: 2.5rem;
      border-top: 1px solid rgba(255,255,255,0.08);
      max-width: 48rem;
    }

    .list {
      display: grid;
      gap: 1rem;
      max-width: 96ch;
    }

    .empty {
      color: var(--cult-gray);
      opacity: 0.8;
      font-size: 1rem;
    }

    @media (min-width: 900px) {
      .list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .item {
      display: block;
      padding: 1.5rem;
      background: rgba(25, 25, 25, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-top: 1px solid rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(8px);
      text-decoration: none;
      transition: transform 0.4s var(--cult-ease), border-color 0.4s var(--cult-ease), background 0.4s var(--cult-ease);
    }

    .item:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.35);
      background: rgba(40, 40, 40, 0.7);
    }

    .item-meta {
      font-size: 0.8125rem;
      color: var(--cult-gray);
      opacity: 0.85;
      margin-bottom: 0.5rem;
    }

    .item-title {
      color: var(--cult-white);
      font-weight: 700;
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      letter-spacing: -0.01em;
    }

    .item-desc {
      color: var(--cult-gray);
      font-size: 1rem;
      line-height: 1.6;
    }


    .cta {
      margin-top: 2rem;
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    @media (max-width: 768px) {
      .insights-index {
        padding-top: 8rem;
      }

      .dek {
        font-size: 1.125rem;
      }
    }
  </style>
</BaseLayout>