export default function Step3Pricing({ data, onChange }) {
  const set = (key, val) => onChange({ ...data, [key]: val });

  const PriceInput = ({ label, priceKey, urlKey, color }) => (
    <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4 space-y-3">
      <div className="flex items-center gap-2">
        <span className="font-bold text-sm" style={{ color }}>{label}</span>
      </div>
      <div>
        <label className="block text-xs font-medium text-gray-500 mb-1">Price (AUD)</label>
        <div className="relative">
          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">$</span>
          <input
            type="number"
            min="0"
            step="0.01"
            value={data[priceKey] || ''}
            onChange={e => set(priceKey, e.target.value ? Number(e.target.value) : '')}
            placeholder="0.00"
            className="w-full pl-7 pr-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400"
          />
        </div>
      </div>
      <div>
        <label className="block text-xs font-medium text-gray-500 mb-1">Listing URL <span className="text-gray-300">(paste after publishing)</span></label>
        <input
          type="url"
          value={data[urlKey] || ''}
          onChange={e => set(urlKey, e.target.value)}
          placeholder="https://..."
          className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400"
        />
      </div>
    </div>
  );

  return (
    <div className="space-y-5">
      <PriceInput label="🛍 Etsy" priceKey="etsy_price" urlKey="etsy_url" color="#f97316" />
      <PriceInput label="🟩 Square" priceKey="square_price" urlKey="square_url" color="#16a34a" />
      <PriceInput label="🔵 eBay" priceKey="ebay_price" urlKey="ebay_url" color="#2563eb" />

      <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 text-sm text-amber-800">
        <span className="font-bold">💡 Tip:</span> Use the AI-generated content from Step 2 to create your listings on each marketplace, then come back and paste the URLs here to keep everything linked.
      </div>
    </div>
  );
}