/*
Theme Name: Aromanish Luxe
Theme URI: https://a.aromanish.com
Author: ANish Themes
Author URI: https://anishthemes.com
Description: Luxury Perfume WooCommerce Theme
Version: 1.0
License: GPL v2 or later
Text Domain: aromanish-luxe
*/

:root {
  --primary: #d4af37;
  --bg: #090909;
  --secondary: #111111;
  --text: #ffffff;
}

body {
  margin: 0;
	export default function AromanishWebsite() {
  const featuredProducts = [
    {
      name: 'Oud Royale',
      notes: 'Oud • Amber • Saffron',
      price: 'PKR 4,500',
      image: 'https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=1200&auto=format&fit=crop',
    },
    {
      name: 'Velvet Musk',
      notes: 'White Musk • Rose • Vanilla',
      price: 'PKR 3,900',
      image: 'https://images.unsplash.com/photo-1594035910387-fea47794261f?q=80&w=1200&auto=format&fit=crop',
    },
    {
      name: 'Noir Essence',
      notes: 'Leather • Tobacco • Cedar',
      price: 'PKR 5,200',
      image: 'https://images.unsplash.com/photo-1615634262417-5f4d3c4f9d4f?q=80&w=1200&auto=format&fit=crop',
    },
  ];

  const collections = [
    'Arabic Attars',
    'French Perfumes',
    'Luxury Oud',
    'Men Collection',
    'Women Collection',
    'Gift Boxes',
  ];

  return (
    <div className="min-h-screen bg-[#0c0a09] text-white font-sans">
      {/* Navbar */}
      <header className="sticky top-0 z-50 border-b border-white/10 bg-black/70 backdrop-blur-xl">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-5">
          <div>
            <h1 className="text-3xl font-bold tracking-[0.35em] text-amber-200">
              AROMANISH
            </h1>
            <p className="mt-1 text-xs uppercase tracking-[0.4em] text-white/60">
              The Fragrance of Life
            </p>
          </div>

          <nav className="hidden items-center gap-8 text-sm uppercase tracking-wider md:flex">
            <a href="#home" className="transition hover:text-amber-200">
              Home
            </a>
            <a href="#collections" className="transition hover:text-amber-200">
              Collections
            </a>
            <a href="#about" className="transition hover:text-amber-200">
              About
            </a>
            <a href="#products" className="transition hover:text-amber-200">
              Best Sellers
            </a>
            <a href="#contact" className="transition hover:text-amber-200">
              Contact
            </a>
          </nav>

          <button className="rounded-full border border-amber-200 px-5 py-2 text-sm font-medium text-amber-200 transition hover:bg-amber-200 hover:text-black">
            Shop Now
          </button>
        </div>
      </header>

      {/* Hero */}
      <section
        id="home"
        className="relative overflow-hidden"
        style={{
          backgroundImage:
            'linear-gradient(to right, rgba(0,0,0,0.88), rgba(0,0,0,0.55)), url(https://images.unsplash.com/photo-1523293182086-7651a899d37f?q=80&w=1800&auto=format&fit=crop)',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}
      >
        <div className="mx-auto grid min-h-[90vh] max-w-7xl items-center gap-10 px-6 py-24 lg:grid-cols-2">
          <div>
            <div className="mb-6 inline-flex items-center rounded-full border border-amber-200/40 bg-amber-200/10 px-4 py-2 text-xs uppercase tracking-[0.3em] text-amber-100">
              Pakistan's Premium Perfume House
            </div>

            <h2 className="max-w-2xl text-5xl font-black leading-tight md:text-7xl">
              The Fragrance
              <span className="block text-amber-200">of Life</span>
            </h2>

            <p className="mt-8 max-w-xl text-lg leading-8 text-white/75">
              Discover handcrafted perfumes, luxurious oud blends, Arabic attars,
              and signature fragrances curated for modern elegance across Pakistan
              and beyond.
            </p>

            <div className="mt-10 flex flex-wrap gap-4">
              <button className="rounded-full bg-amber-200 px-8 py-4 text-sm font-bold uppercase tracking-widest text-black transition hover:scale-105">
                Explore Collection
              </button>

              <button className="rounded-full border border-white/20 bg-white/5 px-8 py-4 text-sm font-bold uppercase tracking-widest backdrop-blur transition hover:border-amber-200 hover:text-amber-200">
                View Best Sellers
              </button>
            </div>

            <div className="mt-16 grid grid-cols-3 gap-6 border-t border-white/10 pt-8 text-center">
              <div>
                <h3 className="text-3xl font-bold text-amber-200">150+</h3>
                <p className="mt-2 text-sm uppercase tracking-widest text-white/60">
                  Fragrances
                </p>
              </div>
              <div>
                <h3 className="text-3xl font-bold text-amber-200">25K+</h3>
                <p className="mt-2 text-sm uppercase tracking-widest text-white/60">
                  Happy Clients
                </p>
              </div>
              <div>
                <h3 className="text-3xl font-bold text-amber-200">Nationwide</h3>
                <p className="mt-2 text-sm uppercase tracking-widest text-white/60">
                  Delivery
                </p>
              </div>
            </div>
          </div>

          <div className="relative hidden lg:block">
            <div className="absolute -left-10 top-10 h-72 w-72 rounded-full bg-amber-300/20 blur-3xl" />
            <div className="absolute bottom-0 right-0 h-72 w-72 rounded-full bg-yellow-500/10 blur-3xl" />

            <div className="relative rounded-[2rem] border border-white/10 bg-white/5 p-6 backdrop-blur-xl">
              <img
                src="https://images.unsplash.com/photo-1592945403244-b3fbafd7f539?q=80&w=1200&auto=format&fit=crop"
                alt="Luxury Perfume"
                className="h-[650px] w-full rounded-[1.5rem] object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Collections */}
      <section id="collections" className="mx-auto max-w-7xl px-6 py-24">
        <div className="mb-16 text-center">
          <p className="mb-4 text-sm uppercase tracking-[0.35em] text-amber-200">
            Signature Collections
          </p>
          <h2 className="text-4xl font-black md:text-5xl">
            Crafted for Every Personality
          </h2>
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {collections.map((collection, index) => (
            <div
              key={collection}
              className="group overflow-hidden rounded-[2rem] border border-white/10 bg-gradient-to-b from-white/10 to-white/5 p-8 transition duration-500 hover:-translate-y-2 hover:border-amber-200/40"
            >
              <div className="mb-8 flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-200/10 text-3xl text-amber-200">
                0{index + 1}
              </div>

              <h3 className="text-2xl font-bold">{collection}</h3>

              <p className="mt-4 leading-7 text-white/65">
                Exclusive premium fragrances inspired by timeless oriental and
                contemporary western perfumery traditions.
              </p>

              <button className="mt-8 text-sm uppercase tracking-[0.3em] text-amber-200 transition group-hover:translate-x-2">
                Explore →
              </button>
            </div>
          ))}
        </div>
      </section>

      {/* Best Sellers */}
      <section
        id="products"
        className="border-y border-white/10 bg-gradient-to-b from-[#16120f] to-black py-24"
      >
        <div className="mx-auto max-w-7xl px-6">
          <div className="mb-16 flex flex-col justify-between gap-6 md:flex-row md:items-end">
            <div>
              <p className="mb-4 text-sm uppercase tracking-[0.35em] text-amber-200">
                Best Sellers
              </p>
              <h2 className="text-4xl font-black md:text-5xl">
                Luxury Fragrance Collection
              </h2>
            </div>

            <button className="rounded-full border border-white/10 px-6 py-3 text-sm uppercase tracking-widest transition hover:border-amber-200 hover:text-amber-200">
              View All Products
            </button>
          </div>

          <div className="grid gap-8 md:grid-cols-2 xl:grid-cols-3">
            {featuredProducts.map((product) => (
              <div
                key={product.name}
                className="group overflow-hidden rounded-[2rem] border border-white/10 bg-white/5"
              >
                <div className="overflow-hidden">
                  <img
                    src={product.image}
                    alt={product.name}
                    className="h-[420px] w-full object-cover transition duration-700 group-hover:scale-110"
                  />
                </div>

                <div className="p-8">
                  <div className="mb-3 inline-flex rounded-full bg-amber-200/10 px-4 py-2 text-xs uppercase tracking-[0.25em] text-amber-200">
                    Premium Collection
                  </div>

                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <h3 className="text-2xl font-bold">{product.name}</h3>
                      <p className="mt-2 text-white/60">{product.notes}</p>
                    </div>

                    <span className="text-lg font-semibold text-amber-200">
                      {product.price}
                    </span>
                  </div>

                  <button className="mt-8 w-full rounded-full bg-white px-6 py-4 text-sm font-bold uppercase tracking-widest text-black transition hover:bg-amber-200">
                    Add to Cart
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About */}
      <section id="about" className="mx-auto max-w-7xl px-6 py-24">
        <div className="grid gap-16 lg:grid-cols-2 lg:items-center">
          <div>
            <img
              src="https://images.unsplash.com/photo-1619994403073-2cec99c8c4b8?q=80&w=1200&auto=format&fit=crop"
              alt="Perfume Workshop"
              className="rounded-[2rem] border border-white/10 object-cover shadow-2xl"
            />
          </div>

          <div>
            <p className="mb-4 text-sm uppercase tracking-[0.35em] text-amber-200">
              About Aromanish
            </p>

            <h2 className="text-4xl font-black leading-tight md:text-5xl">
              Elevating Fragrance Culture in Pakistan
            </h2>

            <p className="mt-8 text-lg leading-8 text-white/70">
              Aromanish blends the artistry of Arabic perfumery with modern
              sophistication. From traditional attars to luxury western-inspired
              perfumes, each fragrance is crafted to leave a memorable signature.
            </p>

            <div className="mt-10 space-y-6">
              <div className="flex gap-4 rounded-3xl border border-white/10 bg-white/5 p-6">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-amber-200/10 text-2xl text-amber-200">
                  ✦
                </div>
                <div>
                  <h3 className="text-xl font-bold">Premium Ingredients</h3>
                  <p className="mt-2 text-white/65">
                    Authentic oud, musk, amber, florals, and exotic oils sourced
                    from trusted fragrance regions.
                  </p>
                </div>
              </div>

              <div className="flex gap-4 rounded-3xl border border-white/10 bg-white/5 p-6">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-amber-200/10 text-2xl text-amber-200">
                  ✦
                </div>
                <div>
                  <h3 className="text-xl font-bold">Long Lasting Performance</h3>
                  <p className="mt-2 text-white/65">
                    Concentrated perfume oils designed for impressive projection,
                    longevity, and elegant sillage.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="bg-[#120f0d] py-24">
        <div className="mx-auto max-w-7xl px-6">
          <div className="mb-16 text-center">
            <p className="mb-4 text-sm uppercase tracking-[0.35em] text-amber-200">
              Customer Experience
            </p>
            <h2 className="text-4xl font-black md:text-5xl">
              Trusted by Fragrance Lovers
            </h2>
          </div>

          <div className="grid gap-8 lg:grid-cols-3">
            {[
              'Elegant packaging and premium fragrance quality. The oud collection is exceptional.',
              'Aromanish perfumes last all day and feel genuinely luxurious for the Pakistani market.',
              'The perfect blend of Arabic and modern fragrance styles. Highly recommended.',
            ].map((review, index) => (
              <div
                key={index}
                className="rounded-[2rem] border border-white/10 bg-white/5 p-8"
              >
                <div className="mb-6 flex gap-1 text-amber-200">
                  ★★★★★
                </div>

                <p className="text-lg leading-8 text-white/75">“{review}”</p>

                <div className="mt-8 border-t border-white/10 pt-6">
                  <h4 className="font-semibold">Verified Customer</h4>
                  <p className="mt-1 text-sm text-white/50">Karachi, Pakistan</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="relative overflow-hidden py-24">
        <div className="absolute inset-0 bg-gradient-to-r from-amber-200/10 to-yellow-600/10" />

        <div className="relative mx-auto max-w-5xl px-6 text-center">
          <p className="mb-4 text-sm uppercase tracking-[0.35em] text-amber-200">
            Experience Luxury
          </p>

          <h2 className="text-4xl font-black leading-tight md:text-6xl">
            Discover Your Signature Scent Today
          </h2>

          <p className="mx-auto mt-8 max-w-2xl text-lg leading-8 text-white/70">
            Explore premium perfumes, concentrated attars, and luxurious fragrance
            collections designed to inspire confidence and elegance.
          </p>

          <button className="mt-10 rounded-full bg-amber-200 px-10 py-5 text-sm font-bold uppercase tracking-[0.3em] text-black transition hover:scale-105">
            Shop Collection
          </button>
        </div>
      </section>

      {/* Footer */}
      <footer
        id="contact"
        className="border-t border-white/10 bg-black px-6 py-16"
      >
        <div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-4">
          <div>
            <h3 className="text-3xl font-black tracking-[0.3em] text-amber-200">
              AROMANISH
            </h3>
            <p className="mt-5 leading-7 text-white/65">
              The Fragrance of Life — redefining luxury perfumery across Pakistan
              and beyond.
            </p>
          </div>

          <div>
            <h4 className="mb-5 text-lg font-bold">Quick Links</h4>
            <ul className="space-y-3 text-white/65">
              <li>Home</li>
              <li>Collections</li>
              <li>Best Sellers</li>
              <li>About Us</li>
              <li>Contact</li>
            </ul>
          </div>

          <div>
            <h4 className="mb-5 text-lg font-bold">Customer Support</h4>
            <ul className="space-y-3 text-white/65">
              <li>Shipping Policy</li>
              <li>Returns & Exchanges</li>
              <li>Privacy Policy</li>
              <li>FAQs</li>
            </ul>
          </div>

          <div>
            <h4 className="mb-5 text-lg font-bold">Contact Info</h4>
            <ul className="space-y-3 text-white/65">
              <li>Karachi, Pakistan</li>
              <li>+92 300 0000000</li>
              <li>info@a.aromanish.com</li>
              <li>www.a.aromanish.com</li>
            </ul>
          </div>
        </div>

        <div className="mx-auto mt-16 max-w-7xl border-t border-white/10 pt-8 text-center text-sm text-white/40">
          © 2026 Aromanish. All Rights Reserved.
        </div>
      </footer>
    </div>
  );
}
  background: var(--bg);
  color: var(--text);
  font-family: Arial, sans-serif;
}

.container {
  width: min(1280px, 92%);
  margin: auto;
}

.site-header {
  background: #000;
  padding: 20px 0;
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
}

.main-nav a {
  color: white;
  text-decoration: none;
}

.hero-section {
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)),
    url('https://images.unsplash.com/photo-1523293182086-7651a899d37f?q=80&w=1800&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
}

.hero-content h1 {
  font-size: 72px;
  margin-bottom: 20px;
}

.gold-text {
  color: var(--primary);
}

.btn-primary {
  display: inline-block;
  background: var(--primary);
  color: black;
  padding: 14px 28px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
}