`src/components/RetailVsMarket.jsx`

149 lines
import React from 'react';
import { motion } from 'framer-motion';

/**
 * Format price with currency
 */
function formatPrice(price, currency = 'USD') {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency,
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  }).format(price);
}

/**
 * RetailVsMarket - Compare MSRP retail price with current market resale price
 * @param {number} retailMSRP - Current retail MSRP
 * @param {Object} marketPrice - { low, high, currency }
 * @param {Array} retailHistory - Array of { year, msrp }
 * @param {string} reference - Watch reference number
 * @param {string} className - Additional CSS classes
 */
export default function RetailVsMarket({
  retailMSRP,
  marketPrice,
  retailHistory = [],
  reference,
  className = ''
}) {
  if (!retailMSRP || !marketPrice) {
    return null;
  }

  const marketAvg = (marketPrice.low + marketPrice.high) / 2;
  const difference = marketAvg - retailMSRP;
  const percentDiff = ((difference / retailMSRP) * 100).toFixed(1);
  const isAboveRetail = difference > 0;

  return (
    <motion.div
      className={`bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl border border-slate-700 overflow-hidden ${className}`}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4 }}
    >
      {/* Header */}
      <div className="px-4 py-3 bg-slate-700/50 border-b border-slate-600">
        <h4 className="text-white font-semibold flex items-center gap-2">
          <svg className="w-5 h-5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
          </svg>
          Retail vs Market Price
        </h4>
        {reference && (
          <p className="text-xs text-gray-400 mt-1">Ref. {reference}</p>
        )}
      </div>

      {/* Price Comparison */}
      <div className="p-4">
        <div className="grid grid-cols-2 gap-4 mb-4">
          {/* Retail MSRP */}
          <div className="bg-slate-700/30 rounded-lg p-3 border border-slate-600">
            <p className="text-xs text-gray-400 uppercase tracking-wider mb-1">Retail MSRP</p>
            <p className="text-xl font-bold text-white">{formatPrice(retailMSRP)}</p>
            <a
              href="https://www.omegawatches.com"
              target="_blank"
              rel="noopener noreferrer"
              className="text-xs text-blue-400 hover:text-blue-300 hover:underline flex items-center gap-1 mt-1"
            >
              OMEGA Official
              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
              </svg>
            </a>
          </div>

          {/* Market Price */}
          <div className="bg-slate-700/30 rounded-lg p-3 border border-slate-600">
            <p className="text-xs text-gray-400 uppercase tracking-wider mb-1">Market Avg</p>
            <p className="text-xl font-bold text-amber-400">{formatPrice(marketAvg)}</p>
            <p className="text-xs text-gray-500 mt-1">
              {formatPrice(marketPrice.low)} - {formatPrice(marketPrice.high)}
            </p>
          </div>
        </div>

        {/* Difference Indicator */}
        <div className={`rounded-lg p-3 border ${
          isAboveRetail
            ? 'bg-green-900/30 border-green-700/50'
            : 'bg-red-900/30 border-red-700/50'
        }`}>
          <div className="flex items-center justify-between">
            <span className="text-sm text-gray-300">Market vs Retail</span>
            <div className="flex items-center gap-2">
              <span className={`text-lg font-bold ${isAboveRetail ? 'text-green-400' : 'text-red-400'}`}>
                {isAboveRetail ? '+' : ''}{formatPrice(difference)}
              </span>
              <span className={`px-2 py-0.5 rounded text-xs font-semibold ${
                isAboveRetail
                  ? 'bg-green-500/20 text-green-400'
                  : 'bg-red-500/20 text-red-400'
              }`}>
                {isAboveRetail ? '+' : ''}{percentDiff}%
              </span>
            </div>
          </div>
          <p className="text-xs text-gray-500 mt-2">
            {isAboveRetail
              ? 'Trading above retail - strong demand or limited supply'
              : 'Trading below retail - potential value opportunity'}
          </p>
        </div>

        {/* Retail History */}
        {retailHistory.length > 0 && (
          <div className="mt-4">
            <p className="text-xs text-gray-400 uppercase tracking-wider mb-2">Retail MSRP History</p>
            <div className="flex gap-2 overflow-x-auto pb-2">
              {retailHistory.map((item, index) => (
                <div
                  key={item.year}
                  className="flex-shrink-0 bg-slate-700/30 rounded px-3 py-2 border border-slate-600 text-center min-w-16"
                >
                  <p className="text-xs text-gray-400">{item.year}</p>
                  <p className="text-sm font-semibold text-white">{formatPrice(item.msrp)}</p>
                  {index > 0 && (
                    <p className={`text-xs ${
                      item.msrp > retailHistory[index - 1].msrp
                        ? 'text-green-400'
                        : 'text-gray-500'
                    }`}>
                      {item.msrp > retailHistory[index - 1].msrp ? '+' : ''}
                      {(((item.msrp - retailHistory[index - 1].msrp) / retailHistory[index - 1].msrp) * 100).toFixed(0)}%
                    </p>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </motion.div>
  );
}