`src/components/affiliate/OmegaAffiliateGrid.jsx`

168 lines
/**
 * Omega Affiliate Grid - Luxury Watch Dealers
 * Displays high-commission dealers with live OMEGA inventory
 */

import React from 'react';

const dealers = [
  {
    name: 'WatchBox',
    url: 'https://www.thewatchbox.com/watches/omega/?utm_source=affiliate-dw&utm_medium=watches&utm_campaign=omega',
    img: 'https://www.thewatchbox.com/media/logo/default/logo.png',
    commission: '3-6%',
    aov: '$5,000 - $40,000',
    notes: 'Highest AOV, best luxury reputation',
    program: 'Impact / CJ Affiliate',
    rank: 1
  },
  {
    name: 'Chrono24',
    url: 'https://www.chrono24.com/search/index.htm?query=omega&utm_source=affiliate&utm_medium=dw-watches',
    img: 'https://cdn.chrono24.com/images/default/chrono24-logo.svg',
    commission: '3-5%',
    aov: '$2,000 - $20,000',
    notes: 'Largest global inventory, best for price tracking',
    program: 'AWIN / Impact',
    rank: 2
  },
  {
    name: 'Jomashop',
    url: 'https://www.jomashop.com/omega-watches.html?aff=dw-steve',
    img: 'https://www.jomashop.com/media/logo/stores/1/logo.png',
    commission: '4-12%',
    aov: '$1,000 - $10,000',
    notes: 'Highest commission %, excellent conversion',
    program: 'CJ Affiliate',
    rank: 3
  },
  {
    name: 'Luxury Bazaar',
    url: 'https://www.luxurybazaar.com/watches/omega/?ref=dw-steve',
    img: 'https://www.luxurybazaar.com/skin/frontend/lb/default/images/lb-logo.png',
    commission: '5-10%',
    aov: '$3,000 - $25,000',
    notes: 'Custom private deals, ideal for arbitrage',
    program: 'Private / Invite',
    rank: 4
  },
  {
    name: 'Bob\'s Watches',
    url: 'https://www.bobswatches.com/omega?ref=dw-affiliate',
    img: 'https://www.bobswatches.com/images/bobs-watches-logo.svg',
    commission: '4-8%',
    aov: '$2,500 - $15,000',
    notes: 'Strong pre-owned selection',
    program: 'ShareASale',
    rank: 5
  },
  {
    name: 'Govberg Jewelers',
    url: 'https://www.govbergwatches.com/omega/?utm_source=dw-affiliate',
    img: 'https://www.govbergwatches.com/media/logo/default/govberg-logo.png',
    commission: '3-6%',
    aov: '$4,000 - $30,000',
    notes: 'Prestige AD, merged with WatchBox',
    program: 'WatchBox Affiliate',
    rank: 6
  }
];

export default function OmegaAffiliateGrid({ showDetails = false }) {
  return (
    <div className="p-6 bg-gradient-to-br from-slate-900 to-slate-800 rounded-xl">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-amber-400 mb-2">
          🏆 Premium OMEGA Dealers
        </h2>
        <p className="text-slate-400 text-sm">
          High-commission luxury watch dealers with verified affiliate programs
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {dealers.map((dealer) => (
          <a
            href={dealer.url}
            key={dealer.name}
            target="_blank"
            rel="noopener noreferrer"
            className="group relative flex flex-col bg-slate-800 rounded-lg shadow-lg hover:shadow-2xl hover:shadow-amber-500/20 p-5 transition-all duration-300 border border-slate-700 hover:border-amber-500"
          >
            {/* Rank Badge */}
            <div className="absolute -top-2 -right-2 bg-amber-500 text-black text-xs font-bold rounded-full w-8 h-8 flex items-center justify-center">
              #{dealer.rank}
            </div>

            {/* Dealer Logo */}
            <div className="flex items-center justify-center h-16 mb-4 bg-white rounded-lg p-2">
              <img
                src={dealer.img}
                alt={dealer.name}
                className="max-h-12 max-w-full object-contain"
                onError={(e) => {
                  e.target.style.display = 'none';
                  e.target.nextSibling.style.display = 'block';
                }}
              />
              <span className="hidden text-slate-800 font-bold text-sm">{dealer.name}</span>
            </div>

            {/* Dealer Name */}
            <h3 className="text-lg font-semibold text-white mb-2 text-center group-hover:text-amber-400 transition">
              {dealer.name}
            </h3>

            {/* Commission Badge */}
            <div className="flex items-center justify-center gap-2 mb-3">
              <span className="px-3 py-1 bg-green-600 text-white text-xs font-bold rounded-full">
                {dealer.commission}
              </span>
              <span className="text-slate-400 text-xs">
                AOV: {dealer.aov}
              </span>
            </div>

            {showDetails && (
              <>
                {/* Notes */}
                <p className="text-slate-400 text-xs text-center mb-2">
                  {dealer.notes}
                </p>

                {/* Program Badge */}
                <div className="text-center">
                  <span className="inline-block px-2 py-1 bg-slate-700 text-slate-300 text-xs rounded">
                    {dealer.program}
                  </span>
                </div>
              </>
            )}

            {/* Hover Effect */}
            <div className="absolute inset-0 bg-gradient-to-t from-amber-500/10 to-transparent opacity-0 group-hover:opacity-100 transition rounded-lg pointer-events-none" />
          </a>
        ))}
      </div>

      {/* Total Stats */}
      <div className="mt-6 p-4 bg-slate-800/50 rounded-lg border border-slate-700">
        <div className="grid grid-cols-3 gap-4 text-center">
          <div>
            <div className="text-2xl font-bold text-amber-400">{dealers.length}</div>
            <div className="text-xs text-slate-400">Dealers</div>
          </div>
          <div>
            <div className="text-2xl font-bold text-green-400">4-12%</div>
            <div className="text-xs text-slate-400">Commission Range</div>
          </div>
          <div>
            <div className="text-2xl font-bold text-blue-400">$1K - $40K</div>
            <div className="text-xs text-slate-400">AOV Range</div>
          </div>
        </div>
      </div>
    </div>
  );
}