import Header from "@/components/Header"
import { Interactives } from "@/components/header/Interactives"

export default function Home() {
  return (
    <main className="min-h-screen bg-background text-foreground">
      <Header />
      <div className="pt-32 px-4 max-w-7xl mx-auto">
        <h1 className="text-4xl font-bold">{process.env.NEXT_PUBLIC_MBLOG_NAME}</h1>
        <p className="mt-4 text-lg text-muted-foreground">
          This is some really nice content. It has so so so so so so so so so much text.
        </p>

        {Array.from({ length: 10 }).map((_, i) => (
          <Interactives key={i} className="mt-12 rounded-xl overflow-hidden border border-slate-800">
            <div className="p-8 bg-card/80 backdrop-blur-sm">
              <h2 className="text-2xl font-semibold">Very nice card</h2>
              <p className="mt-4 text-muted-foreground">
                This is some really nice content. It has so so so so so so so so so much text.
              </p>
            </div>
          </Interactives>
        ))}
      </div>
    </main>
  )
}