`src/components/affiliate/JapanArbitrageCalc.jsx`

317 lines
/**
 * Japan Arbitrage Calculator
 * Calculate profits from Japan → U.S. watch arbitrage
 */

import React, { useState } from 'react';

const popularModels = [
  {
    name: 'Speedmaster Professional 3861',
    ref: '310.30.42.50.01.002',
    japanPrice: 3900,
    usPrice: 5000,
    category: 'Speedmaster'
  },
  {
    name: 'Seamaster Diver 300M',
    ref: '210.30.42.20.01.001',
    japanPrice: 2900,
    usPrice: 3800,
    category: 'Seamaster'
  },
  {
    name: 'Aqua Terra GMT',
    ref: '220.10.41.21.03.001',
    japanPrice: 3200,
    usPrice: 4200,
    category: 'Aqua Terra'
  },
  {
    name: 'Planet Ocean 600M',
    ref: '215.30.44.21.01.002',
    japanPrice: 4500,
    usPrice: 6000,
    category: 'Planet Ocean'
  },
  {
    name: 'Speedmaster Moonwatch Hesalite',
    ref: '310.30.42.50.01.001',
    japanPrice: 3700,
    usPrice: 4800,
    category: 'Speedmaster'
  }
];

const japanDealers = [
  { name: 'The Watch Company (Tokyo)', taxFree: true, shipping: 150 },
  { name: 'Jackroad & Betty', taxFree: true, shipping: 120 },
  { name: 'Komehyo', taxFree: false, shipping: 100 }
];

const usDealers = [
  { name: 'WatchBox', commission: 15, payout: 'fast' },
  { name: 'Chrono24', commission: 8, payout: 'slow' },
  { name: 'eBay Certified', commission: 12, payout: 'medium' },
  { name: 'Luxury Bazaar', commission: 10, payout: 'fast' }
];

export default function JapanArbitrageCalc() {
  const [selectedModel, setSelectedModel] = useState(popularModels[0]);
  const [japanDealer, setJapanDealer] = useState(japanDealers[0]);
  const [usDealer, setUsDealer] = useState(usDealers[0]);
  const [customJapanPrice, setCustomJapanPrice] = useState(null);
  const [customUsPrice, setCustomUsPrice] = useState(null);
  const [yenRate, setYenRate] = useState(150); // USD to JPY
  const [importDuty, setImportDuty] = useState(0); // Usually 0 for watches under $800, or 2.5%

  const japanPrice = customJapanPrice || selectedModel.japanPrice;
  const usPrice = customUsPrice || selectedModel.usPrice;

  // Calculate costs
  const shipping = japanDealer.shipping;
  const tax = japanDealer.taxFree ? 0 : japanPrice * 0.10; // 10% Japan consumption tax
  const duty = importDuty > 0 ? japanPrice * (importDuty / 100) : 0;
  const totalCost = japanPrice + shipping + tax + duty;

  // Calculate revenue
  const commission = (usPrice * usDealer.commission) / 100;
  const netRevenue = usPrice - commission;

  // Profit
  const profit = netRevenue - totalCost;
  const profitMargin = (profit / totalCost) * 100;
  const roi = (profit / totalCost) * 100;

  return (
    <div className="max-w-4xl mx-auto p-6 bg-gradient-to-br from-slate-900 to-slate-800 rounded-xl shadow-2xl border border-slate-700">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-amber-400 mb-2">
          🇯🇵 → 🇺🇸 Japan Arbitrage Calculator
        </h2>
        <p className="text-slate-400 text-sm">
          Calculate profits from buying OMEGA in Japan and reselling in the U.S.
        </p>
      </div>

      <div className="grid lg:grid-cols-2 gap-6">
        {/* Left Column - Inputs */}
        <div className="space-y-4">
          {/* Model Selection */}
          <div>
            <label className="block text-sm font-semibold text-slate-300 mb-2">
              Select Model
            </label>
            <select
              value={selectedModel.ref}
              onChange={(e) => {
                setSelectedModel(popularModels.find(m => m.ref === e.target.value));
                setCustomJapanPrice(null);
                setCustomUsPrice(null);
              }}
              className="w-full bg-slate-700 text-white p-3 rounded-lg border border-slate-600 focus:border-amber-500 focus:outline-none"
            >
              {popularModels.map(model => (
                <option key={model.ref} value={model.ref}>
                  {model.name} ({model.ref})
                </option>
              ))}
            </select>
          </div>

          {/* Japan Purchase */}
          <div className="bg-slate-800 rounded-lg p-4 border border-slate-600">
            <h3 className="text-sm font-bold text-amber-400 mb-3">🇯🇵 Japan Purchase</h3>

            <div className="space-y-3">
              <div>
                <label className="block text-xs text-slate-400 mb-1">Dealer</label>
                <select
                  value={japanDealer.name}
                  onChange={(e) => setJapanDealer(japanDealers.find(d => d.name === e.target.value))}
                  className="w-full bg-slate-700 text-white p-2 rounded text-sm border border-slate-600"
                >
                  {japanDealers.map(dealer => (
                    <option key={dealer.name} value={dealer.name}>
                      {dealer.name} ({dealer.taxFree ? 'Tax-Free' : '+10% Tax'})
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-xs text-slate-400 mb-1">
                  Japan Price (USD)
                </label>
                <input
                  type="number"
                  value={customJapanPrice || japanPrice}
                  onChange={(e) => setCustomJapanPrice(parseFloat(e.target.value) || 0)}
                  className="w-full bg-slate-700 text-white p-2 rounded text-sm border border-slate-600"
                  placeholder={japanPrice}
                />
              </div>

              <div className="text-xs text-slate-400 space-y-1">
                <div className="flex justify-between">
                  <span>Shipping:</span>
                  <span className="text-white">${shipping}</span>
                </div>
                {!japanDealer.taxFree && (
                  <div className="flex justify-between">
                    <span>Japan Tax (10%):</span>
                    <span className="text-yellow-400">${tax.toFixed(2)}</span>
                  </div>
                )}
                {duty > 0 && (
                  <div className="flex justify-between">
                    <span>Import Duty ({importDuty}%):</span>
                    <span className="text-yellow-400">${duty.toFixed(2)}</span>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* U.S. Resale */}
          <div className="bg-slate-800 rounded-lg p-4 border border-slate-600">
            <h3 className="text-sm font-bold text-blue-400 mb-3">🇺🇸 U.S. Resale</h3>

            <div className="space-y-3">
              <div>
                <label className="block text-xs text-slate-400 mb-1">Platform</label>
                <select
                  value={usDealer.name}
                  onChange={(e) => setUsDealer(usDealers.find(d => d.name === e.target.value))}
                  className="w-full bg-slate-700 text-white p-2 rounded text-sm border border-slate-600"
                >
                  {usDealers.map(dealer => (
                    <option key={dealer.name} value={dealer.name}>
                      {dealer.name} ({dealer.commission}% commission)
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-xs text-slate-400 mb-1">
                  U.S. Sale Price (USD)
                </label>
                <input
                  type="number"
                  value={customUsPrice || usPrice}
                  onChange={(e) => setCustomUsPrice(parseFloat(e.target.value) || 0)}
                  className="w-full bg-slate-700 text-white p-2 rounded text-sm border border-slate-600"
                  placeholder={usPrice}
                />
              </div>

              <div className="text-xs text-slate-400 space-y-1">
                <div className="flex justify-between">
                  <span>Commission ({usDealer.commission}%):</span>
                  <span className="text-red-400">-${commission.toFixed(2)}</span>
                </div>
                <div className="flex justify-between">
                  <span>Net Revenue:</span>
                  <span className="text-green-400">${netRevenue.toFixed(2)}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Right Column - Results */}
        <div>
          {/* Profit Summary */}
          <div className="bg-gradient-to-br from-amber-900 to-slate-800 rounded-lg p-6 border border-amber-500 mb-4">
            <h3 className="text-lg font-bold text-white mb-4">💰 Profit Analysis</h3>

            <div className="space-y-4">
              <div>
                <div className="text-xs text-slate-400">Total Cost</div>
                <div className="text-xl font-bold text-white">
                  ${totalCost.toLocaleString('en-US', { minimumFractionDigits: 2 })}
                </div>
              </div>

              <div>
                <div className="text-xs text-slate-400">Net Revenue</div>
                <div className="text-xl font-bold text-blue-400">
                  ${netRevenue.toLocaleString('en-US', { minimumFractionDigits: 2 })}
                </div>
              </div>

              <div className="border-t border-amber-700 pt-3">
                <div className="text-xs text-slate-400">Net Profit</div>
                <div className={`text-3xl font-bold ${profit >= 500 ? 'text-green-400' : profit >= 0 ? 'text-yellow-400' : 'text-red-400'}`}>
                  ${profit.toLocaleString('en-US', { minimumFractionDigits: 2 })}
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div className="bg-slate-800/50 rounded-lg p-3 text-center">
                  <div className="text-xs text-slate-400">Margin</div>
                  <div className={`text-lg font-bold ${profitMargin >= 20 ? 'text-green-400' : 'text-yellow-400'}`}>
                    {profitMargin.toFixed(1)}%
                  </div>
                </div>
                <div className="bg-slate-800/50 rounded-lg p-3 text-center">
                  <div className="text-xs text-slate-400">ROI</div>
                  <div className={`text-lg font-bold ${roi >= 20 ? 'text-green-400' : 'text-yellow-400'}`}>
                    {roi.toFixed(1)}%
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Best Models Table */}
          <div className="bg-slate-800 rounded-lg p-4 border border-slate-600">
            <h3 className="text-sm font-bold text-white mb-3">📊 Top Arbitrage Models</h3>
            <div className="space-y-2 text-xs">
              {popularModels
                .map(model => ({
                  ...model,
                  profit: model.usPrice - model.japanPrice - 150 - (model.usPrice * 0.10)
                }))
                .sort((a, b) => b.profit - a.profit)
                .map(model => (
                  <div
                    key={model.ref}
                    onClick={() => {
                      setSelectedModel(model);
                      setCustomJapanPrice(null);
                      setCustomUsPrice(null);
                    }}
                    className={`flex justify-between items-center p-2 rounded cursor-pointer transition ${
                      selectedModel.ref === model.ref
                        ? 'bg-amber-500/20 border border-amber-500'
                        : 'bg-slate-700 hover:bg-slate-600'
                    }`}
                  >
                    <span className="text-slate-300">{model.name}</span>
                    <span className="font-bold text-green-400">
                      ~${model.profit.toFixed(0)}
                    </span>
                  </div>
                ))}
            </div>
          </div>
        </div>
      </div>

      {/* Tips */}
      <div className="mt-6 bg-blue-900/30 border border-blue-700 rounded-lg p-4">
        <h4 className="text-sm font-bold text-blue-400 mb-2">💡 Pro Tips</h4>
        <ul className="text-xs text-slate-300 space-y-1">
          <li>• Buy from tax-free dealers (The Watch Company, Jackroad) to save 10%</li>
          <li>• Watches under $800 usually have 0% import duty</li>
          <li>• Weak yen = better arbitrage (current rate: ¥{yenRate}/USD)</li>
          <li>• WatchBox offers fast payouts for bulk sellers</li>
          <li>• Ship via EMS (fastest, tracked, insured)</li>
        </ul>
      </div>
    </div>
  );
}