import React from "react";
import Image from "next/image";

import { appConfig } from "@/shared/config/app-config";
import { HeroSearch } from "./_views/search";
import { StatisticCard } from "./_views/statistic-card";

export function HeroSection() {
  return (
    <>
      <div className="@container/hero relative pt-36 lg:pt-48">
        <div className="absolute inset-0 z-[-1] h-full w-full overflow-hidden">
          <Image
            src={appConfig.heroImage}
            alt="Satu Peta Illustration"
            fill
            className="inset-0 h-full w-full object-cover"
          />
        </div>

        <div className="font-onest @container/hero container mx-auto w-full max-w-[62rem] text-center">
          <h1 className="mb-5 text-4xl font-medium text-balance text-[#3188E5] @lg/hero:text-[64px]">
            Platform Data Geospasial Jawa Timur
          </h1>
          <h2 className="mb-14 text-xl text-balance text-[#3F5368]">
            Satu peta untuk pembangunan berkelanjutan
          </h2>
        </div>

        <HeroSearch />
        <StatisticCard />
      </div>
    </>
  );
}