// ============================================================
// home.jsx — LANDING DE CAPTAÇÃO ("Em Breve" / lista de espera)
// Página longa: a pessoa rola e lê; botões no meio dão scroll suave até o form.
// ============================================================

// Rola suavemente até o formulário (#lista).
const scrollToForm = (e) => {
  if (e) e.preventDefault();
  const el = document.getElementById('lista');
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};

// CTA que leva pra lista de espera (botão vermelho monumental).
const JoinCTA = ({ tKey = 'lp_cta_join', large = false }) => {
  const { t } = useT();
  return (
    <PrimaryCTA href="#lista" onClick={scrollToForm} large={large}>
      {t(tKey)}
    </PrimaryCTA>
  );
};

// Bloco de seção padrão: kicker + título 2 linhas + corpo. Reaproveitado em vários blocos.
const LpBlock = ({ kicker, l1, l2, children, center = false, className = '' }) => (
  <Reveal>
    <div className={`flex flex-col gap-5 ${center ? 'items-center text-center' : 'items-start text-left'} ${className}`}>
      <div className="flex items-center gap-3 text-gold-500/80">
        <div className="w-8 h-px bg-gold-700/70" />
        <span className="font-impact tracking-[0.5em] text-xs">{kicker}</span>
      </div>
      <h2 className="font-display font-black uppercase tracking-tight text-4xl sm:text-5xl lg:text-6xl text-parchment text-shadow-monument leading-[0.95]">
        {l1}<br /><span className="text-crimson-500">{l2}</span>
      </h2>
      {children}
    </div>
  </Reveal>
);

// Item de bullet com marcador losango dourado.
const Bullet = ({ children }) => (
  <li className="flex items-start gap-3">
    <span aria-hidden className="mt-1.5 w-2 h-2 rotate-45 border border-gold-500/70 shrink-0" />
    <span className="font-body text-parchment/75 leading-relaxed">{children}</span>
  </li>
);

// Espaço reservado (placeholder) p/ prints — o dono adiciona as imagens depois.
const MediaPlaceholder = ({ label, ratio = 'aspect-[4/3]' }) => (
  <div className={`relative ${ratio} w-full border-2 border-dashed border-gold-700/40 bg-stone-900/40 flex items-center justify-center overflow-hidden`}>
    <span aria-hidden className="absolute top-2 left-2 w-3 h-3 border-l-2 border-t-2 border-gold-500/40" />
    <span aria-hidden className="absolute top-2 right-2 w-3 h-3 border-r-2 border-t-2 border-gold-500/40" />
    <span aria-hidden className="absolute bottom-2 left-2 w-3 h-3 border-l-2 border-b-2 border-gold-500/40" />
    <span aria-hidden className="absolute bottom-2 right-2 w-3 h-3 border-r-2 border-b-2 border-gold-500/40" />
    <span className="font-impact tracking-[0.3em] text-[10px] sm:text-xs text-gold-500/50 text-center px-4">{label}</span>
  </div>
);

// As 10 classes (bustos em assets/classes/). Nomes conforme pedido.
const CLASSES = [
  { img: '/assets/classes/arqueira.webp',    nameKey: 'classe_arqueira' },
  { img: '/assets/classes/assassina.webp',   nameKey: 'classe_assassina' },
  { img: '/assets/classes/cavaleiro.webp',   nameKey: 'classe_cavaleiro' },
  { img: '/assets/classes/mago.webp',        nameKey: 'classe_mago' },
  { img: '/assets/classes/mecanico.webp',    nameKey: 'classe_mecanico' },
  { img: '/assets/classes/sacerdotisa.webp', nameKey: 'classe_sacerdotisa' },
  { img: '/assets/classes/atalanta.webp',    nameKey: 'classe_atalanta' },
  { img: '/assets/classes/lutador.webp',     nameKey: 'classe_lutador' },
  { img: '/assets/classes/pikeman.webp',     nameKey: 'classe_pikeman' },
  { img: '/assets/classes/xama.webp',        nameKey: 'classe_xama' },
];

// Card de classe estilo "seleção de personagem".
// object-cover + object-top padroniza o enquadramento (inclusive o Mecânico,
// que é paisagem) sem distorcer. Vignette + gradiente disfarçam o fundo off-white.
const ClassCard = ({ img, name, index }) => (
  <Reveal delay={(index % 5) * 0.05} y={20}>
    <div className="group relative aspect-[3/4] overflow-hidden rounded-sm border border-gold-700/50 bg-stone-900 transition-all duration-300 hover:border-gold-400 hover:shadow-[0_0_28px_rgba(218,165,32,0.35)]">
      <img
        src={img}
        alt={name}
        loading="lazy"
        draggable="false"
        className="absolute inset-0 w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105"
      />
      {/* Vignette: escurece as bordas pra disfarçar o fundo off-white do busto */}
      <div aria-hidden className="absolute inset-0 pointer-events-none" style={{ boxShadow: 'inset 0 0 50px 16px rgba(5,5,5,0.6)' }} />
      {/* Gradiente vertical: transparente no topo → escuro embaixo (funde o personagem) */}
      <div aria-hidden className="absolute inset-x-0 bottom-0 h-2/3 pointer-events-none bg-gradient-to-t from-stone-950 via-stone-950/75 to-transparent" />
      {/* Cantos ornamentais */}
      <span aria-hidden className="absolute top-1 left-1 w-2.5 h-2.5 border-l border-t border-gold-500/70 opacity-60 transition-opacity duration-300 group-hover:opacity-100" />
      <span aria-hidden className="absolute top-1 right-1 w-2.5 h-2.5 border-r border-t border-gold-500/70 opacity-60 transition-opacity duration-300 group-hover:opacity-100" />
      {/* Faixa do nome */}
      <div className="absolute inset-x-0 bottom-0 px-2 py-2.5 text-center">
        <span className="font-impact tracking-[0.25em] text-xs sm:text-sm text-gold-400 transition-colors duration-300 group-hover:text-gold-300">{name}</span>
      </div>
    </div>
  </Reveal>
);

// Amostras de SKINS (prints in-game tratados, em assets/skins/). Sem legenda — só visual.
const SKINS = [
  '/assets/skins/skin-01.webp', '/assets/skins/skin-02.webp',
  '/assets/skins/skin-03.webp', '/assets/skins/skin-04.webp',
  '/assets/skins/skin-05.webp', '/assets/skins/skin-06.webp',
  '/assets/skins/skin-07.webp', '/assets/skins/skin-08.webp',
];

// Card de skin — mesmo estilo dos cards de classe (moldura dourada + hover brilho/zoom),
// porém em paisagem (16:10) pra casar com os prints. Selo "SKIN" discreto no hover.
const SkinCard = ({ img, index }) => (
  <Reveal delay={(index % 4) * 0.05} y={20}>
    <div className="group relative aspect-[16/10] overflow-hidden rounded-sm border border-gold-700/50 bg-stone-900 transition-all duration-300 hover:border-gold-400 hover:shadow-[0_0_28px_rgba(218,165,32,0.35)]">
      <img
        src={img}
        alt=""
        loading="lazy"
        draggable="false"
        className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
      />
      {/* Vignette sutil pra integrar com o tema escuro */}
      <div aria-hidden className="absolute inset-0 pointer-events-none" style={{ boxShadow: 'inset 0 0 40px 10px rgba(5,5,5,0.45)' }} />
      {/* Cantos ornamentais */}
      <span aria-hidden className="absolute top-1 left-1 w-2.5 h-2.5 border-l border-t border-gold-500/70 opacity-60 transition-opacity duration-300 group-hover:opacity-100" />
      <span aria-hidden className="absolute top-1 right-1 w-2.5 h-2.5 border-r border-t border-gold-500/70 opacity-60 transition-opacity duration-300 group-hover:opacity-100" />
      {/* Selo SKIN discreto (aparece no hover) */}
      <span className="absolute bottom-1.5 right-2 font-impact tracking-[0.25em] text-[10px] text-gold-400/70 opacity-0 transition-opacity duration-300 group-hover:opacity-100">SKIN</span>
    </div>
  </Reveal>
);

// Fundo de seção: arte (assets/blocos/) com object-cover + overlay escuro
// para manter o texto sempre legível. Use overflow-hidden + conteúdo relative z-10.
const SectionBg = ({ src, position = 'object-center', overlayClass = 'bg-gradient-to-b from-stone-950/85 via-stone-950/80 to-stone-950/95' }) => (
  <div aria-hidden className="absolute inset-0 pointer-events-none">
    <img src={src} alt="" loading="lazy" draggable="false" className={`w-full h-full object-cover ${position}`} />
    <div className={`absolute inset-0 ${overlayClass}`} />
  </div>
);

// Fundo de PATTERN (textura de armas) — SEMPRE sutil: pano de fundo, nunca protagonista.
// Fórmula única usada em todas as seções "sem arte" (ajuste num lugar só).
const PatternBg = () => (
  <div aria-hidden className="absolute inset-0 pointer-events-none">
    <div className="absolute inset-0 bg-stone-950" />
    <div className="absolute inset-0 opacity-40" style={{ backgroundImage: 'url(/assets/pattern-arsenal.webp)', backgroundRepeat: 'repeat', backgroundSize: '480px auto' }} />
    <div className="absolute inset-0 bg-gradient-to-b from-stone-950/85 via-stone-950/70 to-stone-950/90" />
  </div>
);

// ============================================================
// 1 · HERO — selo EM BREVE + título + sub + CTA
// ============================================================
const LpHero = () => {
  const { t } = useT();
  return (
    <section className="relative min-h-[88vh] flex items-center justify-center overflow-hidden">
      {/* Fundo */}
      <div className="absolute inset-0">
        <img src="/assets/hero-battlefield.png" alt="" className="w-full h-full object-cover opacity-40" draggable="false" />
        <div className="absolute inset-0 bg-gradient-to-b from-stone-950/70 via-stone-950/60 to-stone-950" />
      </div>

      <div className="relative max-w-4xl mx-auto px-6 pt-32 pb-20 flex flex-col items-center text-center gap-7">
        {/* Selo EM BREVE */}
        <Reveal y={20}>
          <div className="inline-flex items-center gap-3 border border-gold-600/60 bg-stone-950/60 px-5 py-2 backdrop-blur-sm">
            <span className="w-2 h-2 rotate-45 bg-crimson-600" />
            <span className="font-impact tracking-[0.5em] text-sm text-gold-400">{t('lp_badge_soon')}</span>
            <span className="w-2 h-2 rotate-45 bg-crimson-600" />
          </div>
        </Reveal>

        <Reveal delay={0.1}>
          <h1 className="font-display font-black uppercase tracking-tight text-5xl sm:text-6xl lg:text-7xl text-parchment text-shadow-monument leading-[0.92]">
            {t('lp_hero_title_l1')}<br />
            <span className="text-crimson-500">{t('lp_hero_title_l2')}</span>
          </h1>
        </Reveal>

        <Reveal delay={0.2}>
          <p className="font-body text-base sm:text-lg text-parchment/70 max-w-2xl leading-relaxed">
            {t('lp_hero_sub')}
          </p>
        </Reveal>

        <Reveal delay={0.3}>
          <JoinCTA large />
        </Reveal>

        <Reveal delay={0.4}>
          <button onClick={scrollToForm} className="font-impact tracking-[0.3em] text-[11px] text-gold-500/60 hover:text-gold-300 transition-colors mt-2">
            {t('lp_hero_scroll')} ↓
          </button>
        </Reveal>
      </div>
    </section>
  );
};

// ============================================================
// 2 · CHEGA DE PAY TO WIN
// ============================================================
const LpPayToWin = () => {
  const { t } = useT();
  return (
    <section className="relative py-20 sm:py-28 border-t border-gold-700/20 overflow-hidden">
      <PatternBg />
      <div className="relative z-10 max-w-4xl mx-auto px-6">
        <LpBlock kicker={t('lp_p2w_kicker')} l1={t('lp_p2w_title_l1')} l2={t('lp_p2w_title_l2')} center>
          <p className="font-body text-base sm:text-lg text-parchment/70 max-w-2xl leading-relaxed">{t('lp_p2w_body')}</p>
        </LpBlock>
      </div>
    </section>
  );
};

// ============================================================
// 3 · FOCO É PVP E HUNT, NÃO XP  + botão QUERO SER AVISADO
// ============================================================
const LpFocus = () => {
  const { t } = useT();
  return (
    <section className="relative py-20 sm:py-28 border-t border-gold-700/20 overflow-hidden">
      <SectionBg src="/assets/blocos/lutador-batalha.webp" position="object-center" />
      <div className="relative z-10 max-w-4xl mx-auto px-6 flex flex-col items-center text-center gap-8">
        <LpBlock kicker={t('lp_focus_kicker')} l1={t('lp_focus_title_l1')} l2={t('lp_focus_title_l2')} center>
          <p className="font-body text-base sm:text-lg text-parchment/80 max-w-2xl leading-relaxed">{t('lp_focus_body')}</p>
        </LpBlock>
        <Reveal delay={0.1}><JoinCTA tKey="lp_cta_notify" /></Reveal>
      </div>
    </section>
  );
};

// ============================================================
// 4 · O ARSENAL (bullets) + placeholders de skins e classes
// ============================================================
const LpArsenal = () => {
  const { t } = useT();
  return (
    <section className="relative py-20 sm:py-28 border-t border-gold-700/20 overflow-hidden">
      <PatternBg />
      <div className="relative z-10 max-w-6xl mx-auto px-6 flex flex-col gap-12">
        <LpBlock kicker={t('lp_arsenal_kicker')} l1={t('lp_arsenal_title_l1')} l2={t('lp_arsenal_title_l2')} center className="mx-auto">
          <p className="font-body text-base sm:text-lg text-parchment/70 max-w-2xl leading-relaxed">{t('lp_arsenal_body')}</p>
        </LpBlock>

        <Reveal delay={0.1}>
          <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-3xl mx-auto w-full">
            <Bullet>{t('lp_arsenal_b1')}</Bullet>
            <Bullet>{t('lp_arsenal_b2')}</Bullet>
            <Bullet>{t('lp_arsenal_b3')}</Bullet>
            <Bullet>{t('lp_arsenal_b4')}</Bullet>
          </ul>
        </Reveal>

        {/* AS 10 CLASSES — grade estilo seleção de personagem */}
        <Reveal delay={0.15}>
          <div className="flex flex-col gap-5">
            <div className="font-impact tracking-[0.3em] text-xs text-gold-500/70 text-center">{t('lp_arsenal_classes_title')}</div>
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
              {CLASSES.map((c, i) => <ClassCard key={c.nameKey} img={c.img} name={t(c.nameKey)} index={i} />)}
            </div>
          </div>
        </Reveal>

        {/* SKINS — galeria de prints in-game (4 por linha no desktop, 2 no tablet/mobile) */}
        <Reveal delay={0.2}>
          <div className="flex flex-col gap-5">
            <div className="font-impact tracking-[0.3em] text-xs text-gold-500/70 text-center">SKINS</div>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
              {SKINS.map((src, i) => <SkinCard key={src} img={src} index={i} />)}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ============================================================
// 5 · MECÂNICAS + nota coins/coinshop + botão GARANTIR MEU LUGAR
// ============================================================
const LpMechanics = () => {
  const { t } = useT();
  return (
    <section className="relative py-20 sm:py-28 border-t border-gold-700/20 overflow-hidden">
      <SectionBg src="/assets/blocos/pike-batalha.webp" position="object-center" />
      <div className="relative z-10 max-w-4xl mx-auto px-6 flex flex-col items-center text-center gap-8">
        <LpBlock kicker={t('lp_mech_kicker')} l1={t('lp_mech_title_l1')} l2={t('lp_mech_title_l2')} center>
          <p className="font-body text-base sm:text-lg text-parchment/80 max-w-2xl leading-relaxed">{t('lp_mech_body')}</p>
        </LpBlock>

        <Reveal delay={0.1}>
          <ul className="flex flex-col gap-4 text-left max-w-2xl mx-auto w-full">
            <Bullet>{t('lp_mech_m1')}</Bullet>
            <Bullet>{t('lp_mech_m2')}</Bullet>
            <Bullet>{t('lp_mech_m3')}</Bullet>
            <Bullet>{t('lp_mech_m4')}</Bullet>
          </ul>
        </Reveal>

        {/* Nota sobre coins / coinshop */}
        <Reveal delay={0.15}>
          <div className="relative bg-stone-900/60 border border-gold-700/30 px-6 py-5 max-w-2xl">
            <p className="font-body italic text-sm text-parchment/60 leading-relaxed">{t('lp_mech_coins_note')}</p>
          </div>
        </Reveal>

        <Reveal delay={0.2}><JoinCTA tKey="lp_cta_secure" /></Reveal>
      </div>
    </section>
  );
};

// ============================================================
// 6 · VIP QUE NÃO INTERFERE NO PVP
// ============================================================
const LpVip = () => {
  const { t } = useT();
  return (
    <section className="relative py-20 sm:py-28 stone-bg border-t border-gold-700/20 overflow-hidden">
      <div className="max-w-6xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-14 items-center">
        {/* Arte — coluna esquerda, num painel com moldura */}
        <Reveal>
          <div className="relative aspect-[4/3] overflow-hidden rounded-sm border border-gold-700/40">
            <img src="/assets/blocos/cavaleiro-batalha.webp" alt="" loading="lazy" draggable="false" className="absolute inset-0 w-full h-full object-cover" />
            <div aria-hidden className="absolute inset-0 bg-gradient-to-tr from-stone-950/55 via-transparent to-transparent" />
            <span aria-hidden className="absolute top-1.5 left-1.5 w-3 h-3 border-l-2 border-t-2 border-gold-500/70" />
            <span aria-hidden className="absolute top-1.5 right-1.5 w-3 h-3 border-r-2 border-t-2 border-gold-500/70" />
            <span aria-hidden className="absolute bottom-1.5 left-1.5 w-3 h-3 border-l-2 border-b-2 border-gold-500/70" />
            <span aria-hidden className="absolute bottom-1.5 right-1.5 w-3 h-3 border-r-2 border-b-2 border-gold-500/70" />
          </div>
        </Reveal>
        {/* Texto — coluna direita, alinhado à esquerda */}
        <Reveal delay={0.1}>
          <div className="flex flex-col gap-6">
            <LpBlock kicker={t('lp_vip_kicker')} l1={t('lp_vip_title_l1')} l2={t('lp_vip_title_l2')}>
              <p className="font-body text-base sm:text-lg text-parchment/75 leading-relaxed">{t('lp_vip_body')}</p>
            </LpBlock>
            <ul className="flex flex-col gap-4">
              <Bullet>{t('lp_vip_b1')}</Bullet>
              <Bullet>{t('lp_vip_b2')}</Bullet>
              <Bullet>{t('lp_vip_b3')}</Bullet>
            </ul>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ============================================================
// 7 · FEITO PRA QUEM TEM POUCO TEMPO
// ============================================================
const LpTime = () => {
  const { t } = useT();
  return (
    <section className="relative py-20 sm:py-28 border-t border-gold-700/20 overflow-hidden">
      <PatternBg />
      <div className="relative z-10 max-w-4xl mx-auto px-6">
        <LpBlock kicker={t('lp_time_kicker')} l1={t('lp_time_title_l1')} l2={t('lp_time_title_l2')} center className="mx-auto">
          <p className="font-body text-base sm:text-lg text-parchment/80 max-w-2xl leading-relaxed">{t('lp_time_body')}</p>
        </LpBlock>
      </div>
    </section>
  );
};

// ============================================================
// 8 · A RECOMPENSA (destaque) — 7 dias VIP + Box Skin Lendária
// ============================================================
const LpReward = () => {
  const { t } = useT();
  const RewardCard = ({ icon, iconSrc, title, desc }) => (
    <div className="relative bg-stone-950/70 border border-gold-600/50 p-7 flex flex-col items-center text-center gap-3">
      <span aria-hidden className="absolute top-2 left-2 w-3 h-3 border-l-2 border-t-2 border-gold-500/70" />
      <span aria-hidden className="absolute top-2 right-2 w-3 h-3 border-r-2 border-t-2 border-gold-500/70" />
      <span aria-hidden className="absolute bottom-2 left-2 w-3 h-3 border-l-2 border-b-2 border-gold-500/70" />
      <span aria-hidden className="absolute bottom-2 right-2 w-3 h-3 border-r-2 border-b-2 border-gold-500/70" />
      <div className="h-12 flex items-center justify-center">
        {iconSrc
          ? <img src={iconSrc} alt="" className="h-12 w-auto select-none" draggable="false" />
          : <span className="text-4xl">{icon}</span>}
      </div>
      <div className="font-display font-black uppercase tracking-tight text-xl text-gold-400">{title}</div>
      <p className="font-body text-sm text-parchment/70 leading-relaxed">{desc}</p>
    </div>
  );
  return (
    <section className="relative py-24 sm:py-32 border-y-2 border-gold-600/40 overflow-hidden">
      {/* Arte do Guardião (azulada): overlay forte + tint crimson pra casar com o tema */}
      <SectionBg src="/assets/blocos/guardiao.webp" position="object-top" overlayClass="bg-gradient-to-b from-stone-950/90 via-stone-950/86 to-stone-950/95" />
      <div aria-hidden className="absolute inset-0 pointer-events-none bg-crimson-900/25" />
      {/* Brilho dourado de destaque */}
      <div className="absolute inset-0 pointer-events-none" style={{ background: 'radial-gradient(ellipse at 50% 0%, rgba(218,165,32,0.15), transparent 60%)' }} />
      <div className="relative max-w-5xl mx-auto px-6 flex flex-col items-center text-center gap-10">
        <LpBlock kicker={t('lp_reward_kicker')} l1={t('lp_reward_title_l1')} l2={t('lp_reward_title_l2')} center>
          <p className="font-body text-base sm:text-lg text-parchment/75 max-w-2xl leading-relaxed">{t('lp_reward_body')}</p>
        </LpBlock>

        <Reveal delay={0.1}>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-3xl w-full">
            <RewardCard iconSrc="/assets/icones/coroa.webp" title={t('lp_reward_item1')} desc={t('lp_reward_item1_desc')} />
            <RewardCard iconSrc="/assets/icones/bau.webp" title={t('lp_reward_item2')} desc={t('lp_reward_item2_desc')} />
          </div>
        </Reveal>

        <Reveal delay={0.2}>
          <p className="font-body italic text-xs text-parchment/50 max-w-lg">{t('lp_reward_note')}</p>
        </Reveal>

        <Reveal delay={0.25}><JoinCTA large /></Reveal>
      </div>
    </section>
  );
};

// ============================================================
// 9 · FORMULÁRIO de captação (#lista) — alvo do scroll dos CTAs
//      (o estado "Você está na lista!" é renderizado dentro do LandingForm)
// ============================================================
const LpFormSection = () => {
  const { t } = useT();
  return (
    <section id="lista" className="relative py-24 sm:py-32 border-t border-gold-700/20 scroll-mt-24 overflow-hidden">
      <PatternBg />
      <div className="relative z-10 max-w-5xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-10 sm:gap-16 items-center">
        <Reveal>
          <div className="flex flex-col gap-5">
            <div className="flex items-center gap-3 text-gold-500/80">
              <div className="w-8 h-px bg-gold-700" />
              <span className="font-impact tracking-[0.5em] text-xs">{t('lp_form_kicker')}</span>
            </div>
            <h2 className="font-display font-black uppercase tracking-tight text-4xl sm:text-5xl lg:text-6xl text-parchment text-shadow-monument leading-[0.95]">
              {t('lp_form_title_l1')}<br /><span className="text-crimson-500">{t('lp_form_title_l2')}</span>
            </h2>
            <p className="font-body italic text-lg text-parchment/60 leading-relaxed">{t('lp_form_sub')}</p>
          </div>
        </Reveal>
        <Reveal delay={0.15}>
          <LandingForm />
        </Reveal>
      </div>
    </section>
  );
};

// ============================================================
// BARRA DE REDES SOCIAIS FLUTUANTE (fixa, lateral direita, acompanha o scroll)
// Desktop/tablet: vertical, centralizada à direita. Mobile: cluster discreto no canto inferior direito.
// ============================================================
// SVGs inline (currentColor) — leves, sem imagens.
const IgIcon = ({ className = '' }) => (
  <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
    <path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.72 3.72 0 0 1-1.38-.9 3.72 3.72 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.31-1.46.72-2.12 1.38C1.35 2.67.94 3.34.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.8.72 1.47 1.38 2.13.66.66 1.33 1.07 2.12 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.8-.31 1.47-.72 2.13-1.38.66-.66 1.07-1.33 1.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.9 5.9 0 0 0-1.38-2.12A5.9 5.9 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0z"/>
    <path d="M12 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zM12 16a4 4 0 1 1 4-4 4 4 0 0 1-4 4z"/>
    <circle cx="18.41" cy="5.59" r="1.44"/>
  </svg>
);
const FbIcon = ({ className = '' }) => (
  <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
    <path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z"/>
  </svg>
);
const DiscordIcon = ({ className = '' }) => (
  <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
    <path d="M20.32 4.37A19.8 19.8 0 0 0 15.45 2.86a.07.07 0 0 0-.08.04c-.21.37-.44.86-.6 1.25a18.27 18.27 0 0 0-5.49 0c-.16-.4-.4-.88-.61-1.25a.08.08 0 0 0-.08-.04A19.74 19.74 0 0 0 3.7 4.37a.07.07 0 0 0-.03.03C.53 9.05-.32 13.58.1 18.06a.08.08 0 0 0 .03.05 19.9 19.9 0 0 0 5.99 3.03.08.08 0 0 0 .08-.03c.46-.63.87-1.29 1.23-1.99a.08.08 0 0 0-.04-.11c-.65-.25-1.27-.55-1.87-.89a.08.08 0 0 1-.01-.13c.13-.09.25-.19.37-.29a.07.07 0 0 1 .08-.01c3.93 1.79 8.18 1.79 12.06 0a.07.07 0 0 1 .08.01c.12.1.24.2.37.29a.08.08 0 0 1-.01.13c-.6.35-1.22.64-1.87.89a.08.08 0 0 0-.04.11c.36.7.78 1.36 1.23 1.99a.08.08 0 0 0 .08.03 19.84 19.84 0 0 0 6-3.03.08.08 0 0 0 .03-.05c.5-5.18-.84-9.67-3.55-13.66a.06.06 0 0 0-.03-.03zM8.02 15.33c-1.18 0-2.16-1.08-2.16-2.42s.96-2.42 2.16-2.42c1.21 0 2.18 1.09 2.16 2.42 0 1.34-.96 2.42-2.16 2.42zm7.97 0c-1.18 0-2.16-1.08-2.16-2.42s.96-2.42 2.16-2.42c1.21 0 2.18 1.09 2.16 2.42 0 1.34-.95 2.42-2.16 2.42z"/>
  </svg>
);
const WhatsIcon = ({ className = '' }) => (
  <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
    <path d="M.06 24l1.68-6.15a11.87 11.87 0 0 1-1.59-5.95C.15 5.34 5.5 0 12.06 0a11.82 11.82 0 0 1 8.41 3.49 11.82 11.82 0 0 1 3.48 8.42c0 6.56-5.34 11.9-11.9 11.9a11.9 11.9 0 0 1-5.69-1.45L.06 24zm6.6-3.8c1.68.99 3.28 1.59 5.4 1.59 5.45 0 9.89-4.43 9.89-9.88 0-2.64-1.03-5.12-2.9-6.99a9.82 9.82 0 0 0-6.98-2.9c-5.46 0-9.9 4.44-9.9 9.89 0 2.1.62 3.68 1.65 5.34l-.99 3.62 3.74-.78zm11.39-5.55c-.07-.12-.27-.2-.56-.34-.29-.15-1.73-.86-2-.95-.27-.1-.46-.15-.66.15-.2.29-.76.95-.93 1.15-.17.2-.34.22-.63.07-.29-.15-1.24-.46-2.36-1.46-.87-.78-1.46-1.74-1.63-2.03-.17-.29-.02-.45.13-.6.13-.13.29-.34.44-.51.15-.17.2-.29.29-.49.1-.2.05-.37-.02-.51-.07-.15-.66-1.59-.9-2.18-.24-.57-.48-.49-.66-.5l-.56-.01c-.2 0-.51.07-.78.37-.27.29-1.02 1-1.02 2.43 0 1.44 1.05 2.82 1.19 3.02.15.2 2.06 3.14 4.99 4.41.7.3 1.24.48 1.66.62.7.22 1.34.19 1.84.12.56-.08 1.73-.71 1.97-1.39.24-.68.24-1.27.17-1.39z"/>
  </svg>
);

const SocialRail = () => {
  // active:false => ícone pronto no código mas OCULTO. Para ativar Discord/WhatsApp:
  // basta preencher o href e trocar active para true.
  const socials = [
    { key: 'instagram', label: 'Instagram', href: 'https://www.instagram.com/kingdomtale',               Icon: IgIcon,      active: true  },
    { key: 'facebook',  label: 'Facebook',  href: 'https://www.facebook.com/profile.php?id=61590575913044', Icon: FbIcon,      active: true  },
    { key: 'discord',   label: 'Discord',   href: '#',                                                     Icon: DiscordIcon, active: false },
    { key: 'whatsapp',  label: 'WhatsApp',  href: '#',                                                     Icon: WhatsIcon,   active: false },
  ];
  // Oculta no mobile (<sm): os CTAs ocupam quase toda a largura no celular, então
  // qualquer barra flutuante encostaria no botão principal. No mobile as redes
  // continuam acessíveis na tela de sucesso (e podem ir ao rodapé se desejado).
  return (
    <div
      className="hidden sm:flex fixed z-40 right-3 top-1/2 -translate-y-1/2 flex-col gap-2"
      aria-label="Redes sociais"
    >
      {socials.filter(s => s.active).map(({ key, label, href, Icon }) => (
        <a
          key={key}
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={label}
          title={label}
          className="group flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9
            border border-gold-700/50 bg-stone-950/60 backdrop-blur-sm text-gold-400/80
            transition-all duration-200
            hover:text-gold-300 hover:border-gold-400 hover:bg-crimson-900/40
            hover:shadow-[0_0_18px_rgba(218,165,32,0.45)] hover:scale-110"
        >
          <Icon className="w-4 h-4 sm:w-[18px] sm:h-[18px]" />
        </a>
      ))}
    </div>
  );
};

// ============================================================
// APP
// ============================================================
const HomeApp = () => {
  // Se a pessoa chegou via /index.php#lista (vindo da Sobre), rola até o form.
  // O scroll nativo por hash falha porque o form é renderizado pelo React após o load.
  React.useEffect(() => {
    if (window.location.hash === '#lista') {
      setTimeout(() => {
        const el = document.getElementById('lista');
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 300);
    }
  }, []);

  return (
  <LangProvider>
    <div className="relative">
      <Nav />
      <SocialRail />
      <LpHero />
      <LpPayToWin />
      <LpFocus />
      <LpArsenal />
      <LpMechanics />
      <LpVip />
      <LpTime />
      <LpReward />
      <LpFormSection />
      <Footer />
    </div>
  </LangProvider>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HomeApp />);