// Brands page — brand partners across AMG destinations

const BRAND_LIST = [
  // Fashion & Lifestyle
  'Adidas', 'ALDO', 'Arrow', 'Arvind', 'Bata', 'BIBA', 'Blackberrys', 'Brand Loot',
  'Crocs', 'Flying Machine', 'Jockey', 'Levi\'s', 'Liberty', 'Max', 'Numero Uno',
  'Octave', 'Puma', 'Red Tape', 'Skechers', 'Spykar', 'Under Armour', 'U.S. Polo Assn.',
  'VIP', 'W', 'Wildcraft',
  // Accessories & Footwear
  'American Tourister', 'Carlton', 'Carrera', 'Lavie', 'The Bags Store', 'Tissot',
  // Beauty & Wellness
  'Bath & Body Works', 'Faces Canada', 'Mamaearth', 'Sugar',
  // Food & Beverage
  'Barista', 'Baskin-Robbins', 'Chicago Pizza', 'Domino\'s', 'House of Candy',
  'The House of Kebab', 'Starbucks', 'Subway', 'Sweet Garden', 'Uncle Jack\'s',
  // Entertainment & Lifestyle
  'Cinepolis', 'Lenskart', 'Metro',
];

const BRAND_CATEGORIES = [
  {
    label: 'Fashion & Lifestyle',
    icon: 'ShoppingBag',
    brands: [
      'Adidas', 'ALDO', 'Arrow', 'Arvind', 'Bata', 'BIBA', 'Blackberrys', 'Brand Loot',
      'Crocs', 'Flying Machine', 'Jockey', 'Levi\'s', 'Liberty', 'Max', 'Numero Uno',
      'Octave', 'Puma', 'Red Tape', 'Skechers', 'Spykar', 'Under Armour', 'U.S. Polo Assn.',
      'VIP', 'W', 'Wildcraft',
    ],
  },
  {
    label: 'Accessories & Footwear',
    icon: 'Watch',
    brands: ['American Tourister', 'Carlton', 'Carrera', 'Lavie', 'The Bags Store', 'Tissot'],
  },
  {
    label: 'Beauty & Wellness',
    icon: 'Sparkles',
    brands: ['Bath & Body Works', 'Faces Canada', 'Mamaearth', 'Sugar'],
  },
  {
    label: 'Food & Beverage',
    icon: 'Utensils',
    brands: [
      'Barista', 'Baskin-Robbins', 'Chicago Pizza', 'Domino\'s', 'House of Candy',
      'The House of Kebab', 'Starbucks', 'Subway', 'Sweet Garden', 'Uncle Jack\'s',
    ],
  },
  {
    label: 'Entertainment & Lifestyle',
    icon: 'Clapperboard',
    brands: ['Cinepolis', 'Lenskart', 'Metro'],
  },
];

const BRAND_LOGOS = {
  'Adidas':             'adidas.jpg',
  'ALDO':               'aldo.jpg',
  'Arrow':              'arrow.jpg',
  'Arvind':             'arvind.jpg',
  'Bata':               'bata.jpg',
  'BIBA':               'biba.jpg',
  'Blackberrys':        'blackberry.jpg',
  'Brand Loot':         'brand loot.jpg',
  'Crocs':              'crocs.jpg',
  'Flying Machine':     'flying machine.jpg',
  'Jockey':             'jockey.jpg',
  "Levi's":             'levis.jpg',
  'Liberty':            'liberty.jpg',
  'Max':                'max.jpg',
  'Numero Uno':         'Numero uno.jpg',
  'Octave':             'octave.jpg',
  'Puma':               'puma.jpg',
  'Red Tape':           'redtape.jpg',
  'Skechers':           'skchers.jpg',
  'Spykar':             'spykar.jpg',
  'Under Armour':       'under armour.jpg',
  'U.S. Polo Assn.':    'us polo.jpg',
  'VIP':                'vip.jpg',
  'W':                  'w.jpg',
  'Wildcraft':          'wildcraft.jpg',
  'American Tourister': 'american tourister.jpg',
  'Carlton':            'carlton london.jpg',
  'Carrera':            'carrera.jpg',
  'Lavie':              'lavie.jpg',
  'The Bags Store':     'the bag store.jpg',
  'Tissot':             'tissot.jpg',
  'Bath & Body Works':  'bath body works.jpg',
  'Faces Canada':       'faces canada.jpg',
  'Mamaearth':          'mama earth.jpg',
  'Sugar':              'sugar.jpg',
  'Barista':            'barista.jpg',
  'Baskin-Robbins':     'baskin robin.jpg',
  'Chicago Pizza':      'chicago pizza.jpg',
  "Domino's":           'dominos.jpg',
  'House of Candy':     'house of candy.jpg',
  'Starbucks':          'starbucks.jpg',
  'Subway':             'subway.jpg',
  "Uncle Jack's":       'uncle jacks.jpg',
  'Cinepolis':          'cinepolis.jpg',
  'Lenskart':           'lenskart.jpg',
  'Metro':              'metro.jpg',
};

const BrandTile = ({ name }) => {
  const file = BRAND_LOGOS[name];
  const src = file ? `/images/logos/brand%20logos/${encodeURIComponent(file)}` : null;
  return (
    <div className="rounded-2xl bg-[#E9E5DE] flex items-center justify-center min-h-[80px] min-w-[140px] p-4 hover:bg-[#d4a020]/25 transition-all duration-300 cursor-default">
      {src
        ? <img src={src} alt={name} className="h-12 w-auto max-w-[120px] object-contain" />
        : <span className="font-display text-[15px] sm:text-[16px] font-medium leading-tight text-center text-ink-950">{name}</span>
      }
    </div>
  );
};

function BrandsPage({ setPage }) {
  useReveal();
  return (
    <main className="page-enter">

      {/* ── Hero ── */}
      <section className="pt-28 sm:pt-40 pb-16">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
          <div className="flex items-center justify-between flex-wrap gap-6 mb-10 reveal">
            <Eyebrow>Portfolio · Brands</Eyebrow>
            <div className="text-[12px] uppercase tracking-[0.22em] text-bone-50/45">{BRAND_LIST.length}+ brand partners</div>
          </div>
          <div className="flex flex-wrap items-end justify-between gap-6 reveal">
            <h1 className="font-display text-[36px] sm:text-[56px] lg:text-[110px] leading-[0.96] tracking-tightest">
              The brands<br/><span className="italic text-accent-soft">that chose us.</span>
            </h1>
            <button
              onClick={() => { setPage('contact'); window.scrollTo(0,0); }}
              className="btn rounded-full bg-bone-50 text-ink-950 px-5 py-3 text-[12px] font-medium tracking-wide hover:bg-accent-soft inline-flex items-center gap-2"
            >
              Brand leasing enquiry <Icon.ArrowUpRight size={14}/>
            </button>
          </div>
        </div>
      </section>

      {/* ── Upcoming & Signed Brands ── */}
      <section className="pb-6">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
          <h2 className="font-display text-[22px] sm:text-[32px] text-accent text-center mb-4 reveal">
            Upcoming &amp; Signed Brands
          </h2>
          <div className="h-px bg-bone-50/10 mb-16"/>
        </div>
      </section>

      {/* ── Brand grid by category ── */}
      {BRAND_CATEGORIES.map((cat) => (
        <section key={cat.label} className="pb-16">
          <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
            <h3 className="font-display text-[28px] sm:text-[38px] text-accent text-center mb-10 reveal">
              {cat.label}
            </h3>
            <div className="flex flex-wrap justify-center gap-4 reveal">
              {cat.brands.map((b) => <BrandTile key={b} name={b}/>)}
            </div>
          </div>
        </section>
      ))}

      {/* ── Become a brand partner ── */}
      <section className="py-20 border-t border-bone-50/10 bg-ink-900/30 mt-8">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8 grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-7 reveal">
            <div className="font-display text-[40px] sm:text-[56px] leading-[1.05]">
              Want your brand{' '}
              <span className="italic text-accent-soft">in the mix?</span>
            </div>
            <p className="mt-5 text-bone-50/60 text-[15px] leading-relaxed max-w-lg">
              We're actively curating brand partners for Palm Marina and One AMG. If you're a brand looking for a Ludhiana address with footfall, demographics, and a management team that understands retail — let's talk.
            </p>
          </div>
          <div className="lg:col-span-5 flex flex-wrap gap-4 reveal">
            <button
              onClick={() => { setPage('contact'); window.scrollTo(0,0); }}
              className="btn rounded-full bg-bone-50 text-ink-950 px-6 py-3.5 text-[13px] font-medium tracking-wide hover:bg-accent-soft inline-flex items-center gap-2"
            >
              Leasing enquiry <Icon.ArrowUpRight size={14}/>
            </button>
            <a
              href="https://wa.me/918968566656?text=Hi%2C%20I%27d%20like%20to%20enquire%20about%20brand%20leasing%20at%20AMG."
              target="_blank"
              rel="noopener noreferrer"
              className="btn rounded-full border border-bone-50/30 text-bone-50 px-6 py-3.5 text-[13px] font-medium hover:bg-bone-50/10 inline-flex items-center gap-2"
            >
              <Icon.WhatsApp size={14}/> WhatsApp
            </a>
          </div>
        </div>
      </section>

    </main>
  );
}

window.BrandsPage = BrandsPage;