import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { StatusTerminal } from "@/components/StatusTerminal";

export default function HomePage() {
  return (
    <>
      <SiteHeader />
      <main>
        <section className="technical-grid hero-gradient relative flex min-h-[92vh] flex-col justify-center overflow-hidden px-6">
          <StatusTerminal className="absolute left-6 top-8 md:left-12" />
          <div className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-12 pt-20 lg:grid-cols-12">
            <div className="lg:col-span-8">
              <span className="mb-6 block font-label text-xs uppercase tracking-[0.4em] text-primary">
                01 // THE MANIFESTO
              </span>
              <h1 className="mb-8 font-headline text-5xl font-bold leading-[0.9] tracking-tighter text-on-surface md:text-8xl">
                I WILL FIND
                <br />
                <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                  A WAY,
                </span>
                <br />
                OR I WILL
                <br />
                MAKE ONE.
              </h1>
              <p className="max-w-2xl font-body text-xl leading-relaxed text-on-surface-variant md:text-2xl">
                A multidisciplinary architect of digital ecosystems and
                agricultural infrastructures. Executing vision through
                precision.
              </p>
            </div>
          </div>
        </section>
      </main>
      <SiteFooter />
    </>
  );
}