import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Header } from "@/components/ui/header";

export default function Home() {
  return (
    <div>
      <main className="min-h-80" style={{ background: 'linear-gradient(180deg, #fff 10%, #eef0f7)' }}>
        <section className="max-w-4xl mx-auto px-4 py-24">
          <h1 className="text-5xl font-extrabold text-center text-gray-900">
            Enhance Your Food Photos with Dishpix AI
          </h1>
          <p className="mt-6 text-xl text-center text-gray-600 max-w-2xl mx-auto">
            Dishpix is the perfect website for people who want to take their food photography to the next level. Whether you're a professional chef, a food blogger, or just someone who loves capturing delicious moments, Dishpix offers tools and features to help you create stunning food photos.
          </p>
        </section>
      </main>

      {/*
        Add a section here to display before/after photo and demonstrate how the application works
      */}

      <div className="flex items-center w-full max-w-screen-xl mx-auto">
        <div className="w-full p-4 bg-white rounded-lg shadow-lg">
          <h2 className="text-2xl font-bold text-center text-gray-800 mb-4">
            Before & After: See the Dishpix AI Magic
          </h2>
          <div className="flex justify-center space-x-4">
            <div className="w-1/2">
              <h3 className="text-lg font-semibold text-center text-gray-700 mb-2">
                Before
              </h3>
              <Image
                src="/before-photo.png"
                alt="Before photo"
                width={400}
                height={300}
                className="w-full h-auto rounded"
              />
            </div>
            <div className="w-1/2">
              <h3 className="text-lg font-semibold text-center text-gray-700 mb-2">
                After
              </h3>
              <Image
                src="/after-photo.png"
                alt="After photo"
                width={400}
                height={300}
                className="w-full h-auto rounded"
              />
            </div>
          </div>
          <p className="mt-4 text-center text-gray-600">
            See how Dishpix AI transforms ordinary food photos into stunning, professional-quality images. Upload your photo and let the magic happen!
          </p>
        </div>
      </div>
    </div>
  );
}