import Hero from '../sections/Hero'
import Benefits from '../sections/Benefits'
import ProductsPreview from '../sections/ProductsPreview'
import BentoCard from '../components/BentoCard'
import BentoSlideshow from '../components/BentoSlideshow'
import SubscribeBox from '../components/SubscribeBox'
import { fetchLaboratoriumData, mapDirectusToContent } from '../lib/directus'
import { newsData, videosData } from '../data/content'

export const revalidate = 0

async function getContent() {
  try {
    const items = await fetchLaboratoriumData()
    return mapDirectusToContent(items)
  } catch {
    return null
  }
}

export default async function HomePage() {
  const content = await getContent()

  return (
    <>
      <Hero />
      <Benefits />
      <ProductsPreview />
      <div className="page-wrapper">
        <main className="bento-area" aria-label="Artykuły">
          {!content ? (
            <p style={{ gridColumn: '1 / 5', padding: '4rem', textAlign: 'center', color: '#888' }}>
              W tej chwili brak wpisów.
            </p>
          ) : (
            <>
              <BentoSlideshow
                slides={content.slideshow}
                style={{ gridColumn: '1 / 5', gridRow: '1 / 2' }}
              />
              {content.articles.map((article, index) => (
                <BentoCard
                  key={index}
                  type={article.type}
                  badge={article.badge}
                  title={article.title}
                  category={article.category}
                  readTime={article.readTime}
                  bgImage={article.bgImage}
                  hero={article.hero}
                  style={{ gridColumn: article.gridColumn, gridRow: article.gridRow }}
                  href={article.slug ? `/blog/${article.slug}` : undefined}
                />
              ))}
            </>
          )}
        </main>

        <aside className="sidebar sidebar-right" aria-label="Najnowsze wideo">
          <div>
            <h3 className="sidebar-title">LATEST VIDEOS</h3>
            {videosData.map((video, index) => (
              <div key={index} className="video-item" tabIndex={0}>
                <div
                  className="video-thumb"
                  style={{ backgroundImage: `url(${video.bgImage})` }}
                  role="img"
                  aria-label={video.title}
                />
                <div className="video-info">
                  <div className="video-title">{video.title}</div>
                  <div className="video-views">{video.views}</div>
                </div>
              </div>
            ))}
          </div>

          <SubscribeBox />

          <div style={{ marginTop: '2rem' }}>
            <h3 className="sidebar-title">LATEST AI NEWS</h3>
            <div className="news-list">
              {newsData.map((item, index) => (
                <div key={index} className="news-item" tabIndex={0}>
                  <div className="news-time">{item.time}</div>
                  <div className="news-title">{item.title}</div>
                </div>
              ))}
            </div>
          </div>
        </aside>
      </div>
    </>
  )
}