"use client";

import React from "react";

export default function Home() {
  return (
    <div className="home-container">
      <header className="hero">
        <h1>Welcome to MyApp</h1>
        <p>Build something amazing with a simple and clean interface.</p>
        <button className="cta-btn">Get Started</button>
      </header>

      <section className="features">
        <div className="feature">
          <h3>Fast</h3>
          <p>Optimized performance and smooth experience.</p>
        </div>

        <div className="feature">
          <h3>Simple</h3>
          <p>Minimal design focused on usability.</p>
        </div>

        <div className="feature">
          <h3>Reliable</h3>
          <p>Stable and scalable architecture.</p>
        </div>
      </section>

      <footer className="footer">
        <p>© {new Date().getFullYear()} MyApp. All rights reserved.</p>
      </footer>

      <style>{`
        .home-container {
          font-family: Arial, sans-serif;
          text-align: center;
          color: #333;
        }

        .hero {
          padding: 80px 20px;
          background: linear-gradient(135deg, #4f46e5, #6366f1);
          color: white;
        }

        .hero h1 {
          font-size: 3rem;
          margin-bottom: 10px;
        }

        .hero p {
          font-size: 1.2rem;
          margin-bottom: 20px;
        }

        .cta-btn {
          background: white;
          color: #4f46e5;
          border: none;
          padding: 12px 24px;
          font-size: 1rem;
          border-radius: 6px;
          cursor: pointer;
          font-weight: bold;
        }

        .cta-btn:hover {
          opacity: 0.9;
        }

        .features {
          background-color: white;
          display: flex;
          justify-content: center;
          gap: 40px;
          padding: 60px 20px;
          flex-wrap: wrap;
        }

        .feature {
          max-width: 220px;
        }

        .feature h3 {
          margin-bottom: 10px;
          color: #4f46e5;
        }

        .footer {
          padding: 20px;
          background-color: white;
          font-size: 0.9rem;
        }
      `}</style>
    </div>
  );
}

if (typeof window !== "undefined") {
  if ("ServiceWorker" in window) {
    navigator.serviceWorker
      .register("/service-worker.js")
      .then(() => console.log("[ Registered ]"))
      .catch((err) => console.log("[ Not Registered ]", err));
  } else console.log("[ There Is No SW In Window ]");
}