"use client";

import React from "react";

export default function HomePage() {
  return (
    <div className="max-w-7xl mx-auto px-6">
      {/* Hero Section */}
      <section className="relative bg-black text-white rounded-lg overflow-hidden mt-8">
        <div
          className="absolute inset-0 bg-cover bg-center opacity-70"
          style={{
            backgroundImage:
              "url('https://www.apple.com/v/home/ai/images/heroes/iphone-14-pro/hero_iphone14pro__e6khcva4hkeq_large.jpg')",
          }}
        ></div>
        <div className="relative z-10 py-32 text-center max-w-3xl mx-auto">
          <h1 className="text-5xl font-extrabold mb-4">iPhone 14 Pro</h1>
          <p className="text-xl mb-8">
            Pro. Beyond. A transformative triple‑camera system that adds
            groundbreaking new capabilities. An unprecedented leap in battery
            life. And a mind‑blowing chip that pushes what a smartphone can do.
          </p>
          <button className="bg-white text-black font-semibold px-8 py-3 rounded-full hover:bg-gray-200 transition">
            Learn more
          </button>
        </div>
      </section>

      {/* Product Showcase Section */}
      <section className="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8">
        <div className="bg-white text-black rounded-lg shadow-lg overflow-hidden">
          <img
            src="https://www.apple.com/v/home/ai/images/logos/macbook-air/logo__dcojfwkzna2q_large.png"
            alt="MacBook Air"
            className="mx-auto mt-8 h-20 object-contain"
          />
          <h2 className="text-2xl font-bold text-center mt-6">MacBook Air</h2>
          <p className="text-center px-6 py-4">
            Supercharged by the M2 chip. All-day battery life. And a stunning
            13.6-inch Liquid Retina display.
          </p>
          <div className="flex justify-center pb-8 space-x-6">
            <button className="text-sm font-semibold hover:underline">
              Learn more
            </button>
            <button className="text-sm font-semibold hover:underline">
              Buy
            </button>
          </div>
        </div>

        <div className="bg-white text-black rounded-lg shadow-lg overflow-hidden">
          <img
            src="https://www.apple.com/v/home/ai/images/logos/iphone/logo__dcojfwkzna2q_large.png"
            alt="iPhone"
            className="mx-auto mt-8 h-20 object-contain"
          />
          <h2 className="text-2xl font-bold text-center mt-6">iPhone 14</h2>
          <p className="text-center px-6 py-4">
            A total powerhouse with a huge leap in battery life, a new
            camera system, and the toughest glass ever in a smartphone.
          </p>
          <div className="flex justify-center pb-8 space-x-6">
            <button className="text-sm font-semibold hover:underline">
              Learn more
            </button>
            <button className="text-sm font-semibold hover:underline">
              Buy
            </button>
          </div>
        </div>

        <div className="bg-white text-black rounded-lg shadow-lg overflow-hidden">
          <img
            src="https://www.apple.com/v/home/ai/images/logos/watch/logo__dcojfwkzna2q_large.png"
            alt="Apple Watch"
            className="mx-auto mt-8 h-20 object-contain"
          />
          <h2 className="text-2xl font-bold text-center mt-6">Apple Watch</h2>
          <p className="text-center px-6 py-4">
            The future of health is on your wrist. Advanced sensors and powerful
            features to keep you healthy and safe.
          </p>
          <div className="flex justify-center pb-8 space-x-6">
            <button className="text-sm font-semibold hover:underline">
              Learn more
            </button>
            <button className="text-sm font-semibold hover:underline">
              Buy
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}