import React from 'react';
import { ArrowUpRight, Flame, Trophy } from 'lucide-react';
import { useApp } from '../context/AppContext';

export const ClaimHero: React.FC = () => {
  const { topListing, settings, texts, openOutbidModal, t, tNum } = useApp();

  const currentTopBid = topListing ? topListing.current_bid : settings.initial_minimum_bid;
  const nextTopBid = currentTopBid + settings.minimum_bid_increment;

  return (
    <section id="claim-hero-section" className="pt-8 pb-6 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto text-center">
      <div
        className="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-xs font-medium mb-4 shadow-sm"
        style={{
          backgroundColor: 'var(--sub-card-bg, #141A20)',
          borderColor: 'var(--border-color, #222A33)',
          color: 'var(--text-color, #F0F4F8)'
        }}
      >
        <Flame className="w-3.5 h-3.5 text-amber-400 animate-pulse" />
        <span className="text-emerald-500 font-semibold">{t('hero_badge', undefined, "Bangladesh's #1 Live Outbid Board")}</span>
        {topListing && (
          <span
            className="border-l pl-2"
            style={{
              borderColor: 'var(--border-color, #222A33)',
              color: 'var(--muted-text-color, #8A99A8)'
            }}
          >
            {t('hero_leader_label', undefined, 'Leader:')}{' '}
            <strong style={{ color: 'var(--heading-color, #FFFFFF)' }} className="font-semibold">
              {topListing.name}
            </strong>
          </span>
        )}
      </div>

      {/* Dynamic Claim #1 Heading */}
      <h1
        className="text-3xl sm:text-4xl md:text-5xl font-black tracking-tight font-mono transition-colors"
        style={{ color: 'var(--heading-color, #FFFFFF)' }}
      >
        {t('claim_hero_title_prefix', undefined, texts.claim_hero_title || 'Claim #1 for')}{' '}
        <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-500 via-teal-400 to-amber-400 dark:from-emerald-400 dark:via-teal-300 dark:to-amber-300">
          {settings.currency_symbol}{tNum(nextTopBid)}
        </span>
      </h1>

      {/* Subtitle / Description */}
      <p
        className="mt-3 text-sm sm:text-base max-w-2xl mx-auto leading-relaxed transition-colors"
        style={{ color: 'var(--muted-text-color, #8A99A8)' }}
      >
        {t('claim_hero_desc', undefined, texts.claim_hero_desc ||
          'The public live outbid leaderboard of Bangladesh. Outbid the top spots to drive instant visibility and traffic to your business, channel, startup, or personal brand.')}
      </p>

      {/* Action Button */}
      <div className="mt-5 flex items-center justify-center">
        <button
          id="btn-claim-number-one"
          onClick={() => openOutbidModal(topListing)}
          className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white font-bold text-sm sm:text-base shadow-lg shadow-emerald-950/40 hover:shadow-emerald-900/50 hover:scale-[1.02] active:scale-[0.98] transition-all cursor-pointer"
        >
          <Trophy className="w-4 h-4 text-amber-300" />
          <span>{t('hero_outbid_btn', undefined, `${texts.outbid_btn_text || 'OUTBID'} #1 SPOT`)}</span>
          <ArrowUpRight className="w-4 h-4" />
        </button>
      </div>
    </section>
  );
};
