// Kits / Offers screen
const KITS = [
  {
    id: 'basic',
    name: 'Basic',
    contents: '1 álbum + 10 saquetas',
    cromos: '~70 cromos',
    price: 14.99, original: 15.62,
    color: '#7e8b89',
    badge: null,
    sachets: 10,
    img: 'uploads/kit-basic.png',
  },
  {
    id: 'inicial',
    name: 'Inicial',
    contents: '1 álbum + 1 caixa',
    cromos: '30 saquetas · 210 cromos',
    price: 29.99, original: 39.90,
    color: '#3b8c6e',
    badge: 'POPULAR',
    sachets: 30,
    img: 'uploads/kit-inicial.png',
  },
  {
    id: 'campeao',
    name: 'Campeão',
    contents: '1 álbum + 2 caixas',
    cromos: '60 saquetas · 420 cromos',
    price: 39.99, original: 59.90,
    color: '#d6263a',
    badge: 'MAIS VENDIDO',
    sachets: 60,
    img: 'uploads/kit-campeao.png',
  },
  {
    id: 'colecionador',
    name: 'Colecionador',
    contents: '1 álbum + 3 caixas',
    cromos: '90 saquetas · 630 cromos',
    price: 59.99, original: 80.00,
    color: '#ffc83d',
    badge: 'MELHOR VALOR',
    sachets: 90,
    img: 'uploads/kit-colecionador.png',
  },
];
window.KITS = KITS;

function Offers({ discount, recommended, onPick }) {
  const [selected, setSelected] = React.useState(null);
  const recId = recommended.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');

  React.useEffect(() => {
    // Pre-select recommended kit
    const k = KITS.find((x) => x.id.startsWith(recId)) || KITS[2];
    setSelected(k.id);
  }, [recId]);

  return (
    <div style={{ background: C.cream, minHeight: '100vh' }}>
      {/* Top discount banner */}
      <div style={{
        background: `linear-gradient(90deg, ${C.red}, ${C.redDeep})`,
        color: '#fff', padding: '10px 14px',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        fontFamily: '"Bebas Neue", sans-serif', letterSpacing: '0.06em',
      }}>
        <span style={{
          background: C.gold, color: C.greenInk, padding: '3px 8px',
          borderRadius: 6, fontSize: 14,
        }}>-{discount}%</span>
        <span style={{ fontSize: 14 }}>DESCONTO APLICADO · EXPIRA EM 14:23</span>
      </div>

      <div style={{ padding: '18px 16px 24px' }}>
        <SectionTitle kicker="Escolhe o teu kit" title="Quanto mundial queres?" />

        <div style={{ display: 'grid', gap: 14 }}>
          {KITS.map((k) => {
            const isSelected = selected === k.id;
            const discountedPrice = (k.price * (1 - discount / 100)).toFixed(2);
            const isRecommended = k.id.startsWith(recId);
            return (
              <button key={k.id} onClick={() => { window.Sound?.playSelect(); setSelected(k.id); }}
                style={{
                  background: '#fff', border: 'none', padding: 0,
                  borderRadius: 18, textAlign: 'left',
                  boxShadow: isSelected
                    ? `0 0 0 3px ${C.green}, 0 8px 24px rgba(10,107,58,0.25)`
                    : '0 2px 10px rgba(0,0,0,0.06)',
                  position: 'relative', overflow: 'hidden',
                  cursor: 'pointer', transition: 'all 0.2s',
                  transform: isSelected ? 'scale(1.01)' : 'scale(1)',
                }}
              >
                {(k.badge || isRecommended) && (
                  <div style={{
                    position: 'absolute', top: 0, right: 12,
                    background: isRecommended ? C.green : (k.id === 'colecionador' ? C.greenInk : C.red),
                    color: isRecommended || k.id === 'colecionador' ? C.gold : '#fff',
                    padding: '4px 10px', borderRadius: '0 0 8px 8px',
                    fontFamily: '"Bebas Neue", sans-serif', fontSize: 11,
                    letterSpacing: '0.08em',
                  }}>
                    {isRecommended ? '★ PARA TI' : k.badge}
                  </div>
                )}
                <div style={{ display: 'flex', gap: 12, padding: 14 }}>
                  {/* Visual */}
                  <div style={{
                    width: 84, height: 100, borderRadius: 10,
                    background: '#f6f1df',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, position: 'relative',
                    boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.06)',
                    overflow: 'hidden',
                  }}>
                    <img
                      src={k.img}
                      alt={`Kit ${k.name}`}
                      style={{
                        width: '100%',
                        height: '100%',
                        objectFit: 'contain',
                        padding: 4,
                      }}
                    />
                  </div>

                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{
                      fontFamily: '"Bebas Neue", sans-serif', fontSize: 24,
                      color: C.greenInk, letterSpacing: '0.02em',
                    }}>KIT {k.name.toUpperCase()}</div>
                    <div style={{ fontSize: 12, color: '#555', marginTop: 2 }}>{k.contents}</div>
                    <div style={{ fontSize: 11, color: '#888', marginTop: 1 }}>{k.cromos}</div>

                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
                      <div style={{
                        fontFamily: '"Bebas Neue", sans-serif', fontSize: 26,
                        color: C.red, lineHeight: 1,
                      }}>{discountedPrice}€</div>
                      <div style={{ fontSize: 11, color: '#999', textDecoration: 'line-through' }}>
                        {k.original.toFixed(2)}€
                      </div>
                    </div>
                    <div style={{ fontSize: 10, color: C.green, fontWeight: 700, marginTop: 1 }}>
                      Poupas {(k.original - discountedPrice).toFixed(2)}€
                    </div>
                  </div>

                  {/* Radio */}
                  <div style={{
                    width: 22, height: 22, borderRadius: '50%',
                    border: `2px solid ${isSelected ? C.green : '#ddd'}`,
                    background: isSelected ? C.green : '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, alignSelf: 'center',
                    color: '#fff', fontSize: 14,
                  }}>{isSelected && '✓'}</div>
                </div>
              </button>
            );
          })}
        </div>

        {/* Continue */}
        <div style={{ marginTop: 22 }}>
          <CTA color="green" onClick={() => {
            const k = KITS.find((x) => x.id === selected);
            onPick(k);
          }}>
            Continuar → Checkout
          </CTA>
        </div>

        {/* Reassurance */}
        <div style={{
          marginTop: 18, padding: 12, background: '#fff',
          borderRadius: 12, fontSize: 11.5, color: '#444',
          display: 'grid', gap: 6,
        }}>
          {[
            '🔒 Pagamento 100% seguro · MB Way, Multibanco, Cartão',
            '📦 Envio CTT registado · 24-48h em Portugal',
            '🔄 Garantia 30 dias · Devolução grátis',
            '🇵🇹 Stock e suporte em Portugal',
          ].map((t, i) => <div key={i}>{t}</div>)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Offers, KITS });