// Rewards section - 4 categories + surprise benefit
const rewardCategories = [
  {
    num: "01",
    title: "Categoria 01",
    desc: "Primeira indicação validada",
    threshold: "1 contrato fechado",
    items: [
      { label: "Vale jantar", icon: "utensils" },
      { label: "Cesta de café da manhã", icon: "coffee" },
      { label: "Echo Dot — Alexa", icon: "speaker" },
    ],
  },
  {
    num: "02",
    title: "Categoria 02",
    desc: "Continue indicando, a recompensa evolui",
    threshold: "2 contratos fechados",
    items: [
      { label: "Caixa especial Bhay e Mota", icon: "gift" },
      { label: "Echo Show 5 — Alexa", icon: "screen" },
      { label: "Kindle", icon: "book" },
    ],
  },
  {
    num: "03",
    title: "Categoria 03",
    desc: "Relacionamento de confiança",
    threshold: "3 contratos fechados",
    items: [
      { label: "10 horas extras contratuais", icon: "clock" },
      { label: "AirPods", icon: "headphones" },
      { label: "Adega Climatizada — 12 garrafas", icon: "wine" },
    ],
  },
  {
    num: "04",
    title: "Categoria 04",
    desc: "Parceria estratégica premium",
    threshold: "4+ contratos fechados",
    items: [
      { label: "Diagnóstico Patrimonial", icon: "shield" },
      { label: "Apple Watch", icon: "watch" },
    ],
  },
];

function RewardIcon({ name }) {
  const stroke = "currentColor";
  const common = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "utensils": return (<svg {...common}><path d="M7 2v9a3 3 0 0 0 6 0V2"/><path d="M10 2v20"/><path d="M19 2c-1.5 2-2 4-2 6s1 3 2 3v11"/></svg>);
    case "coffee": return (<svg {...common}><path d="M6 8h10v5a5 5 0 0 1-10 0V8Z"/><path d="M16 9h2a2 2 0 0 1 0 4h-2"/><path d="M8 3v2M12 3v2"/></svg>);
    case "speaker": return (<svg {...common}><rect x="6" y="3" width="12" height="18" rx="2"/><circle cx="12" cy="14" r="3"/><circle cx="12" cy="7" r="1"/></svg>);
    case "gift": return (<svg {...common}><path d="M20 12v9H4v-9"/><path d="M2 7h20v5H2z"/><path d="M12 21V7"/><path d="M12 7s-1.5-4-4-4-2 3 0 4 4 0 4 0Zm0 0s1.5-4 4-4 2 3 0 4-4 0-4 0Z"/></svg>);
    case "screen": return (<svg {...common}><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg>);
    case "book": return (<svg {...common}><path d="M4 4h12a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3V4Z"/><path d="M4 17a3 3 0 0 1 3-3h12"/></svg>);
    case "clock": return (<svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
    case "headphones": return (<svg {...common}><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1v-6h1a2 2 0 0 1 2 2v2ZM3 19a2 2 0 0 0 2 2h1v-6H5a2 2 0 0 0-2 2v2Z"/></svg>);
    case "wine": return (<svg {...common}><path d="M8 3h8l-1 8a3 3 0 0 1-6 0l-1-8Z"/><path d="M12 14v7M9 21h6"/></svg>);
    case "shield": return (<svg {...common}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z"/><path d="M9 12l2 2 4-4"/></svg>);
    case "watch": return (<svg {...common}><circle cx="12" cy="12" r="5"/><path d="M9 3l1 4h4l1-4M9 21l1-4h4l1 4"/></svg>);
    default: return null;
  }
}

function RewardsSection() {
  return (
    <section id="beneficios" className="section rewards-section">
      <div className="container">
        <div className="section-header">
          <div className="eyebrow">Programa de reconhecimento</div>
          <h2 className="section-title">
            Recompensas que <span className="gold-word">evoluem</span><br/>com a sua parceria
          </h2>
          <p className="section-sub">
            Cada contrato fechado por indicação sua destrava uma nova categoria de benefícios.
            Quanto mais você indica, mais exclusiva fica a sua recompensa.
          </p>
        </div>

        <div className="ladder">
          {rewardCategories.map((cat, i) => (
            <div key={cat.num} className="ladder-card">
              <div className="ladder-head-top">
                <div className={`ladder-tier tier-${i+1}`}>
                  <span className="tier-dot" />
                  <span>Nível {i+1}</span>
                </div>
              </div>
              <div className="ladder-head">
                <div className="ladder-num">{cat.num}</div>
                <div className="ladder-meta">
                  <div className="ladder-title">{cat.title}</div>
                  <div className="ladder-threshold">{cat.threshold}</div>
                </div>
              </div>
              <div className="ladder-desc">{cat.desc}</div>
              <ul className="ladder-items">
                {cat.items.map((it) => (
                  <li key={it.label}>
                    <span className="ri-icon"><RewardIcon name={it.icon} /></span>
                    <span className="ri-label">{it.label}</span>
                  </li>
                ))}
              </ul>
              <div className="ladder-rail">
                <div className="ladder-rail-track">
                  <div className="ladder-rail-fill" style={{ width: `${25 * (i+1)}%` }} />
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="surprise">
          <div className="surprise-inner">
            <div className="surprise-badge">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 2l2.4 5 5.6.8-4 4 1 5.6-5-2.8-5 2.8 1-5.6-4-4 5.6-.8L12 2z"/>
              </svg>
              Benefício Surpresa
            </div>
            <div className="surprise-body">
              <div className="surprise-title">Fechamento de propostas acima de <span className="gold">R$ 150k</span></div>
              <div className="surprise-sub">Uma recompensa especial, pessoal e confidencial — revelada no momento certo.</div>
            </div>
            <div className="surprise-ornament" aria-hidden="true">
              <svg width="160" height="80" viewBox="0 0 160 80" fill="none">
                <path d="M5 40 Q 40 5, 80 40 T 155 40" stroke="currentColor" strokeWidth="1" opacity="0.5"/>
                <circle cx="155" cy="40" r="3" fill="currentColor"/>
                <circle cx="5" cy="40" r="2" fill="currentColor" opacity="0.6"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.RewardsSection = RewardsSection;