"use client";

import { useState } from "react";
import { products } from "../data/products";

const categories = [
  { icon: "📱", name: "Elektronik" },
  { icon: "👕", name: "Fashion" },
  { icon: "💄", name: "Kecantikan" },
  { icon: "🏠", name: "Rumah & Dapur" },
  { icon: "⚽", name: "Olahraga" },
  { icon: "👶", name: "Ibu & Anak" },
  { icon: "🚗", name: "Otomotif" },
  { icon: "💻", name: "Komputer" },
];

const sideCategories = [
  "Elektronik",
  "Fashion",
  "Kecantikan & Kesehatan",
  "Rumah & Dapur",
  "Olahraga & Outdoor",
  "Ibu & Anak",
  "Otomotif",
  "Hobi & Koleksi",
  "Makanan & Minuman",
  "Komputer & Aksesoris",
  "Buku & Alat Tulis",
];

function formatPrice(price: number) {
  return new Intl.NumberFormat("id-ID", {
    style: "currency",
    currency: "IDR",
    maximumFractionDigits: 0,
  }).format(price);
}

export default function Home() {
  const [search, setSearch] = useState("");

  const filteredProducts = products.filter((product) =>
    product.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <main>
      {/* HEADER */}
      <header className="header">
        <div className="header-inner">
          <div className="logo">
            <span className="logo-icon">🛍️</span>
            <div>
              <strong>Market<span>Ku</span></strong>
              <small>Belanja Mudah, Hidup Lebih Baik</small>
            </div>
          </div>

          <div className="search-box">
            <span>⌕</span>

            <input
              type="text"
              placeholder="Cari produk, toko, atau kategori..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />

            <button>🔍</button>
          </div>

          <div className="header-actions">
            <button>
              👤
              <span>
                Masuk
                <small>Daftar</small>
              </span>
            </button>

            <button className="desktop-action">
              ♡
              <span>Wishlist</span>
            </button>

            <button className="cart">
              🛒
              <span>Keranjang</span>
              <b>0</b>
            </button>
          </div>
        </div>
      </header>

      {/* NAVIGATION */}
      <nav className="navbar">
        <div className="nav-inner">
          <button className="category-button">
            ☰ &nbsp; Semua Kategori
          </button>

          <div className="nav-links">
            <a className="active">⌂ Beranda</a>
            <a>⚡ Flash Sale</a>
            <a>🎟 Voucher</a>
            <a>★ Produk Pilihan</a>
            <a>▣ Toko</a>
            <a>Bantuan</a>
          </div>

          <div className="shipping">
            🚚 <strong>Gratis Ongkir</strong>
            <small>Min. belanja Rp100.000</small>
          </div>
        </div>
      </nav>

      {/* CONTENT */}
      <div className="container">

        {/* HERO AREA */}
        <section className="hero-layout">

          {/* SIDE CATEGORY */}
          <aside className="side-category">
            <h3>Kategori</h3>

            {sideCategories.map((category) => (
              <button key={category}>
                <span>{category}</span>
                <b>›</b>
              </button>
            ))}
          </aside>

          {/* HERO */}
          <div className="hero">
            <div className="hero-content">
              <span className="hero-label">🔥 PROMO TERBARU</span>

              <h1>
                Smartphone Terbaru
                <br />
                <strong>Diskon Hingga 50%</strong>
              </h1>

              <p>
                Temukan produk pilihan dengan harga spesial
                hanya di MarketKu.
              </p>

              <button className="primary-button">
                Belanja Sekarang →
              </button>
            </div>

            <div className="hero-device">
              <div className="phone phone-one">📱</div>
              <div className="phone phone-two">📱</div>
              <div className="hero-circle" />
            </div>

            <div className="slider-dots">
              <i className="selected" />
              <i />
              <i />
              <i />
            </div>
          </div>

          {/* PROMO CARDS */}
          <div className="promo-column">

            <div className="promo-card flash">
              <span>⚡ Flash Sale</span>
              <strong>Diskon hingga 80%</strong>

              <div className="timer">
                <b>01</b> : <b>23</b> : <b>45</b>
              </div>

              <button>Lihat Semua →</button>
            </div>

            <div className="promo-card voucher">
              <span>🎟 Voucher Belanja</span>
              <strong>Potongan hingga 50RB</strong>
              <button>Klaim Sekarang →</button>
            </div>

            <div className="promo-card delivery">
              <span>🚚 Gratis Ongkir</span>
              <strong>Min. belanja Rp100.000</strong>
              <button>Lihat Detail →</button>
            </div>

          </div>
        </section>

        {/* BENEFITS */}
        <section className="benefits">

          <div>
            <span>🛡️</span>
            <div>
              <strong>Produk Original</strong>
              <small>100% Original</small>
            </div>
          </div>

          <div>
            <span>🚚</span>
            <div>
              <strong>Pengiriman Cepat</strong>
              <small>Seluruh Indonesia</small>
            </div>
          </div>

          <div>
            <span>💳</span>
            <div>
              <strong>Pembayaran Aman</strong>
              <small>Berbagai Metode</small>
            </div>
          </div>

          <div>
            <span>🎧</span>
            <div>
              <strong>Customer Service</strong>
              <small>Siap 24 Jam</small>
            </div>
          </div>

        </section>

        {/* CATEGORY */}
        <section className="section">
          <div className="section-header">
            <h2>Kategori Pilihan</h2>
            <a>Lihat Semua →</a>
          </div>

          <div className="categories">
            {categories.map((category) => (
              <button key={category.name}>
                <span>{category.icon}</span>
                <strong>{category.name}</strong>
              </button>
            ))}
          </div>
        </section>

        {/* PRODUCTS */}
        <section className="section">

          <div className="section-header">
            <h2>Produk Terbaru</h2>
            <a>Lihat Semua →</a>
          </div>

          <div className="product-grid">

            {filteredProducts.map((product) => (
              <article className="product-card" key={product.id}>

                <div className="product-image">
                  <span>-{product.discount}%</span>

                  <img
                    src={product.image}
                    alt={product.name}
                  />
                </div>

                <div className="product-info">

                  <h3>{product.name}</h3>

                  <del>
                    {formatPrice(product.oldPrice)}
                  </del>

                  <strong className="price">
                    {formatPrice(product.price)}
                  </strong>

                  <div className="product-meta">
                    <span>⭐ {product.rating}</span>
                    <small>{product.sold} Terjual</small>
                  </div>

                </div>

              </article>
            ))}

          </div>
        </section>

      </div>

      {/* MOBILE NAV */}
      <div className="mobile-nav">
        <button>⌂<span>Beranda</span></button>
        <button>▣<span>Kategori</span></button>
        <button>⚡<span>Flash Sale</span></button>
        <button>🛒<span>Keranjang</span></button>
        <button>👤<span>Akun</span></button>
      </div>

    </main>
  );
}