---
import BaseLayout from "../layouts/BaseLayout.astro";
import CtaLink from "../components/CtaLink.astro";
import ContentCard from "../components/ContentCard.astro";
import InstagramEmbed from "../components/InstagramEmbed.astro";
import MediaModal from "../components/MediaModal.astro";
import { readContentCache } from "../lib/content/cache";
import {
  newestItems,
  highPerformingYoutubeVideos,
  instagramPosts,
  podcastEpisodes,
} from "../lib/content/selectors";
import { readFeaturedVideoIds } from "../lib/content/curation";
import { LINKS } from "../lib/links";

const cache = await readContentCache();
const featuredIds = await readFeaturedVideoIds();

const newest = newestItems(cache, 9);
const highPerf = highPerformingYoutubeVideos(cache, 6, featuredIds);
const ig = instagramPosts(cache).slice(0, 6);
const pods = podcastEpisodes(cache)
  .slice(0, 6)
  .sort((a, b) => Date.parse(b.publishedAt) - Date.parse(a.publishedAt));

const options = {
    timeZone: 'America/New_York',
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false, // Change to true for 12-hour format
};

const newYorkTime = new Date(cache.generatedAt).toLocaleString('en-US', options);
---

<BaseLayout
  title="SanthoshJ | Tech, streaming, movies, travel"
  description="SanthoshJ shares tech, gaming streams, movie recommendations, and travel stories—plus the Irregular Mind podcast. Explore the newest videos and episodes."
  canonicalPath="/"
>
  <section class="hero">
    <div>
      <h1>Tech, gaming, movies & travel — videos + podcast by SanthoshJ</h1>
      <p>
        Quick takes and long-form stories: tech explainers, game streaming highlights, movie recommendations, and travel notes—curated in one place.
      </p>
      <div class="cta-row">
        <CtaLink
          platform="youtube"
          placement="hero"
          url={LINKS.youtubeChannel}
          label="Watch on YouTube"
          class="primary"
        />
        <CtaLink
          platform="instagram"
          placement="hero"
          url={LINKS.instagramProfile}
          label="Follow on Instagram"
        />
        <CtaLink
          platform="podcast"
          placement="hero"
          url={LINKS.podcast}
          label="Listen to the Irregular Mind on Spotify"
        />
      </div>
      <p class="muted" style="margin-top: 14px;">
        Last updated: {`${newYorkTime} EST`}
      </p>
    </div>
    <div class="empty">
      
      <span class="muted"
        >New videos and episodes every week. Start with the latest drops below.</span
      >
    </div>
  </section>

  <section class="section">
    <div class="section-header">
      <h2>Newest</h2>
      <a
        class="muted"
        href="/videos"
        data-umami-event="click"
        data-umami-event-target_id="section_header.newest.browse_all"
        data-umami-event-placement="section_header"
        data-umami-event-target_url="/videos"
      >
        Browse all ?
      </a>
    </div>
    {
      newest.length > 0 ? (
        <div class="grid">
          {newest.map((item) => (
            <ContentCard item={item} placement="home.newest" />
          ))}
        </div>
      ) : (
        <div class="empty">
          No content cache yet. Run <code>npm run fetch-content</code> in <code>site/</code>.
        </div>
      )
    }
  </section>

  <section class="section">
    <div class="section-header">
      <h2>High-performing videos</h2>
      <a
        class="muted"
        href="/videos"
        data-umami-event="click"
        data-umami-event-target_id="section_header.high_performing.videos"
        data-umami-event-placement="section_header"
        data-umami-event-target_url="/videos"
      >
        Videos ?
      </a>
    </div>
    {
      highPerf.length > 0 ? (
        <div class="grid">
          {highPerf.map((item) => (
            <ContentCard item={item} placement="home.high_performing" />
          ))}
        </div>
      ) : (
        <div class="empty">
          No video stats found yet. Add <code>YOUTUBE_API_KEY</code> or curate{" "}
          <code>content/featured-videos.json</code>.
        </div>
      )
    }
  </section>

  {
    ig.length > 0 ? (
      <>
        <section class="section">
          <div class="section-header">
            <h2>Instagram</h2>
            <a
              class="muted"
              href={LINKS.instagramProfile}
              target="_blank"
              rel="noopener noreferrer"
              data-umami-event="outbound_click"
              data-umami-event-target_id="section_header.instagram.profile"
              data-umami-event-placement="section_header"
              data-umami-event-target_url={LINKS.instagramProfile}
              data-umami-event-domain="www.instagram.com"
              data-umami-event-source="instagram"
              data-umami-event-ui_placement="section_header"
            >
              Profile ?
            </a>
          </div>
          <div class="grid">
            {ig.map((item) => (
              <InstagramEmbed url={item.url} placement="home.instagram" />
            ))}
          </div>
        </section>

        <script
          is:inline
          define:vars={{}}
          set:html={`
        (function(){
          var s = document.createElement('script');
          s.async = true;
          s.defer = true;
          s.src = 'https://www.instagram.com/embed.js';
          s.onload = function(){
            try { window.instgrm && window.instgrm.Embeds && window.instgrm.Embeds.process(); } catch(e) {}
          };
          document.head.appendChild(s);
        })();
      `}
        />
      </>
    ) : null
  }

  <section class="section">
    <div class="section-header">
      <h2>Podcast: Irregular Mind</h2>
      <a
        class="muted"
        href="/podcast"
        data-umami-event="click"
        data-umami-event-target_id="section_header.podcast.episodes"
        data-umami-event-placement="section_header"
        data-umami-event-target_url="/podcast"
      >
        Episodes ?
      </a>
    </div>
    {
      pods.length > 0 ? (
        <div class="grid">
          {pods.map((item) => (
            <ContentCard item={item} placement="home.podcast" />
          ))}
        </div>
      ) : (
        <div class="empty">
          Set <code>PODCAST_RSS_URL</code> and run <code>npm run fetch-content</code> to populate
          episodes.
        </div>
      )
    }
  </section>

  <section class="section">
    <div class="section-header">
      <h2>Follow</h2>
      <span class="muted">Pick your platform</span>
    </div>
    <div class="cta-row">
      <CtaLink
        platform="youtube"
        placement="footer_cta"
        url={LINKS.youtubeChannel}
        label="YouTube"
      />
      <CtaLink
        platform="instagram"
        placement="footer_cta"
        url={LINKS.instagramProfile}
        label="Instagram"
      />
      <CtaLink platform="podcast" placement="footer_cta" url={LINKS.podcast} label="Podcast" />
    </div>
  </section>
  
  <MediaModal />
</BaseLayout>
