// ARKAN — Mobile & Tablet Sections
// Used when viewport < 1200px

const { useState: useSM, useEffect: useEM, useRef: useRM } = React;

// ── SHARED MOBILE STYLES ─────────────────────────────────────────
const M = {
  section: (bg='#000', pad) => ({
    width:'100%', background:bg, padding: pad || '80px 28px',
    boxSizing:'border-box', position:'relative', overflow:'hidden'
  }),
  h1: { fontFamily:'var(--display)', fontWeight:700, fontSize:'clamp(36px,8vw,56px)', lineHeight:1.1, letterSpacing:'-0.025em' },
  h2: { fontFamily:'var(--display)', fontWeight:700, fontSize:'clamp(28px,6vw,44px)', lineHeight:1.14, letterSpacing:'-0.02em' },
  h3: { fontFamily:'var(--display)', fontWeight:700, fontSize:'clamp(22px,5vw,34px)', lineHeight:1.2, letterSpacing:'-0.015em' },
  eyebrow: { fontFamily:'var(--display)', fontWeight:600, fontSize:13, letterSpacing:'.1em', color:'#fff', opacity:.7 },
  body: { fontFamily:'var(--serif)', fontSize:17, lineHeight:'28px', color:'rgba(255,255,255,.85)' },
  bodyDark: { fontFamily:'var(--serif)', fontSize:17, lineHeight:'28px', color:'rgba(0,0,0,.8)' },
};

// Helper: init a YT Player on an existing iframe element and loop via polling
// (polling seeks 0.5s before end — prevents the YouTube loading spinner on loop)
function initYTLoop(iframeEl){
  if(!iframeEl) return;
  new window.YT.Player(iframeEl, {
    events:{
      onReady:(e)=>{
        setInterval(()=>{
          const p = e.target;
          if(!p.getDuration) return;
          const dur = p.getDuration();
          const cur = p.getCurrentTime();
          if(dur > 0 && cur >= dur - 0.5){
            p.seekTo(0, true);
            p.playVideo();
          }
        }, 250);
      }
    }
  });
}

// Hook: attach YT loop handler to a ref'd iframe
function useYTLoop(ref){
  useEM(()=>{
    const attach = () => initYTLoop(ref.current);
    if(window.YT && window.YT.Player){
      attach();
    } else {
      const prev = window.onYouTubeIframeAPIReady;
      window.onYouTubeIframeAPIReady = ()=>{ if(prev) prev(); attach(); };
    }
  }, []);
}

// ── HEADER MOBILE ────────────────────────────────────────────────
function HeaderMobile(){
  const {t} = useLang();
  return (
    <div style={{position:'fixed', top:0, left:0, right:0, zIndex:100,
      background:'rgba(0,0,0,.85)', backdropFilter:'blur(16px)',
      borderBottom:'1px solid rgba(255,255,255,.08)',
      height:60, display:'flex', alignItems:'center', justifyContent:'center'
    }}>
      <ArkanLogo size={0.7}/>
      <div style={{position:'absolute', right:16}}>
        <LangChip/>
      </div>
    </div>
  );
}

// ── HERO MOBILE ──────────────────────────────────────────────────
function HeroMobile(){
  const {t} = useLang();
  const {isTablet} = useVW();
  const iframeRef = useRM(null);
  useYTLoop(iframeRef);

  const hPad = isTablet ? '0 56px' : '0 28px';

  return (
    <section style={{...M.section(), padding:0, height:'100svh', minHeight:500,
      display:'flex', flexDirection:'column', justifyContent:'flex-end', paddingBottom:80}}>
      {/* Video bg */}
      <div style={{position:'absolute', inset:0, overflow:'hidden'}}>
        <iframe
          ref={iframeRef}
          src="https://www.youtube.com/embed/vO_zuSfg0A8?autoplay=1&mute=1&loop=1&playlist=vO_zuSfg0A8&controls=0&showinfo=0&rel=0&modestbranding=1&iv_load_policy=3&disablekb=1&fs=0&playsinline=1&enablejsapi=1"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          style={{position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)',
            width:'177.78vh', minWidth:'100%', height:'56.25vw', minHeight:'100%',
            border:'none', pointerEvents:'none'}}
        />
        <div style={{position:'absolute', inset:0, zIndex:1}}/>
      </div>
      {/* Gradient overlay */}
      <div style={{position:'absolute', inset:0,
        background:'linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 70%, #000 100%)',
        zIndex:2}}/>
      {/* Content */}
      <div style={{position:'relative', zIndex:3, padding:hPad, display:'flex', flexDirection:'column', gap:20}}>
        <div style={{...M.eyebrow, textTransform:'uppercase'}}>{t('hero_eyebrow')}</div>
        <h1 style={{...M.h1, color:'#fff', maxWidth: isTablet ? 560 : '100%'}}>{t('hero_h1')}</h1>
        <p style={{...M.body, maxWidth: isTablet ? 500 : 360}}>{t('hero_lead')}</p>
        <div style={{marginTop:8}}>
          <CTA label={t('cta')}/>
        </div>
      </div>
    </section>
  );
}

// ── FEATURES MOBILE ──────────────────────────────────────────────
function FeaturesMobile(){
  const {t} = useLang();
  const items = [
    {n:1, title:t('feat1_t'), body:t('feat1_b')},
    {n:2, title:t('feat2_t'), body:t('feat2_b')},
    {n:3, title:t('feat3_t'), body:t('feat3_b')},
    {n:4, title:t('feat4_t'), body:t('feat4_b')},
  ];
  const {isTablet} = useVW();
  const pad = isTablet ? '72px 56px' : '64px 28px';
  const cols = isTablet ? '1fr 1fr' : '1fr';
  const gap = 32;

  return (
    <section style={{...M.section('#000', pad),
      borderTop:'1px solid rgba(255,255,255,.12)',
      borderBottom:'1px solid rgba(255,255,255,.12)'}}>
      <div style={{display:'grid', gridTemplateColumns:cols, gap}}>
        {items.map((it,i)=>(
          <div key={i} style={{
            display:'flex', flexDirection:'column', gap:16,
            borderRight: (isTablet && i%2===0) ? '1px solid rgba(255,255,255,.1)' : 'none',
            borderBottom: (!isTablet && i<3) ? '1px solid rgba(255,255,255,.08)' : 'none',
            paddingRight: (isTablet && i%2===0) ? 32 : 0,
            paddingLeft: (isTablet && i%2!==0) ? 32 : 0,
            paddingBottom: (!isTablet && i<3) ? 32 : 0,
          }}>
            <div style={{width:64, height:40, borderRadius:8, border:'1px solid rgba(255,255,255,.2)',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontFamily:'var(--display)', fontWeight:700, fontSize:16}}>
              {String(it.n).padStart(2,'0')}
            </div>
            <div style={{fontFamily:'var(--display)', fontWeight:700,
              fontSize: isTablet ? 20 : 17, letterSpacing:'-0.01em'}}>{it.title}</div>
            <p style={{...M.body, fontSize: isTablet ? 16 : 15, lineHeight:'26px'}}>{it.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── HUB MOBILE ───────────────────────────────────────────────────
function HubMobile(){
  const {t} = useLang();
  const {isTablet} = useVW();
  const pad = isTablet ? '88px 56px' : '80px 28px';

  const chips = t('hub_chips').map(c=>(
    <span key={c} className="chip dim" style={{fontSize:12, height:38, padding:'0 14px'}}>{c}</span>
  ));

  return (
    <section style={M.section('#000', pad)}>
      {isTablet ? (
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:56, alignItems:'center'}}>
          <div style={{display:'flex', flexDirection:'column', gap:28}}>
            <div style={M.eyebrow}>{t('hub_eyebrow')}</div>
            <h2 style={{...M.h2, color:'#fff'}}>{t('hub_h2').split('\n').join('\n')}</h2>
            <p style={M.body}>{t('hub_body')}</p>
            <div style={{display:'flex', flexWrap:'wrap', gap:10}}>{chips}</div>
            <CTA label={t('cta')}/>
          </div>
          <div>
            <img src="assets/cards-arkan.png" alt="Cartões Arkan"
              style={{width:'100%', borderRadius:16, display:'block'}}/>
          </div>
        </div>
      ) : (
        <div style={{display:'flex', flexDirection:'column', gap:28}}>
          <div style={M.eyebrow}>{t('hub_eyebrow')}</div>
          <h2 style={{...M.h2, color:'#fff'}}>{t('hub_h2').split('\n').join(' ')}</h2>
          <p style={M.body}>{t('hub_body')}</p>
          <div style={{display:'flex', flexWrap:'wrap', gap:10}}>{chips}</div>
          <img src="assets/cards-arkan.png" alt="Cartões Arkan"
            style={{width:'100%', maxWidth:440, alignSelf:'center', borderRadius:16, marginTop:8}}/>
          <CTA label={t('cta')}/>
        </div>
      )}
    </section>
  );
}

// ── ROLES MOBILE ─────────────────────────────────────────────────
function RolesMobile(){
  const {t} = useLang();
  const roles = t('roles');
  const [active, setActive] = useSM(0);
  const {isTablet} = useVW();
  const cardW = isTablet ? 320 : 280;
  const hPad = isTablet ? 56 : 28;

  return (
    <section style={{...M.section(), overflow:'hidden', padding:'72px 0 48px'}}>
      <img src="assets/roles-bg-v2.png" alt=""
        style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover'}}/>
      <div style={{position:'absolute', inset:0,
        background:'linear-gradient(180deg,#000 0%,transparent 14%,transparent 88%,#000 100%)'}}/>
      <div style={{position:'relative', display:'flex', flexDirection:'column', gap:40}}>
        <div style={{padding:`0 ${hPad}px`, display:'flex', flexDirection:'column', gap:12, textAlign:'center'}}>
          <div style={M.eyebrow}>{t('roles_eyebrow')}</div>
          <h2 style={{...M.h2, color:'#fff'}}>{t('roles_h2').split('\n').join('\n')}</h2>
          <p style={{...M.body, fontSize:15, maxWidth:520, alignSelf:'center'}}>{t('roles_lead')}</p>
        </div>
        {/* Card slider */}
        <div style={{overflowX:'auto', WebkitOverflowScrolling:'touch',
          padding:`0 ${hPad}px 8px`, scrollSnapType:'x mandatory', display:'flex', gap:16}}>
          {roles.map((r,i)=>(
            <div key={i} style={{
              flexShrink:0, width:cardW, borderRadius:20,
              border:`1px solid ${active===i?'rgba(255,255,255,.5)':'rgba(255,255,255,.15)'}`,
              padding:'36px 28px', background:'rgba(0,0,0,.6)', backdropFilter:'blur(8px)',
              scrollSnapAlign:'start', cursor:'pointer',
              transform: active===i ? 'scale(1)' : 'scale(0.97)',
              transition:'transform .25s ease, border-color .25s ease'
            }} onClick={()=>setActive(i)}>
              <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:28,
                letterSpacing:'-0.02em', marginBottom:16}}>{r.label}</div>
              <p style={{...M.body, fontSize:15}}>{r.body}</p>
            </div>
          ))}
        </div>
        {/* Dots */}
        <div style={{display:'flex', justifyContent:'center', gap:8}}>
          {roles.map((_,i)=>(
            <button key={i} onClick={()=>setActive(i)} style={{
              width:i===active?24:8, height:8, borderRadius:9999, border:'none', padding:0,
              background:i===active?'#fff':'rgba(255,255,255,.3)',
              transition:'width .3s ease, background .3s ease', cursor:'pointer'
            }}/>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── MODULES MOBILE ───────────────────────────────────────────────
function ModulesMobile(){
  const {t} = useLang();
  const {isTablet} = useVW();
  const pad = isTablet ? '88px 56px' : '80px 28px';

  return (
    <section style={M.section('#000', pad)}>
      <div style={{display:'flex', flexDirection:'column', gap:32}}>
        <div style={M.eyebrow}>{t('mod_eyebrow')}</div>
        <h2 style={{...M.h2, color:'#fff'}}>{t('mod_h2').split('\n').join(' ')}</h2>
        <p style={M.body}>{t('mod_body')}</p>
        <CTA label={t('cta')}/>
        {/* Module cards grid */}
        <div style={{display:'grid', gridTemplateColumns: isTablet ? '1fr 1fr' : '1fr', gap:16, marginTop:8}}>
          {[
            {title:'POS', content: (
              <img src="assets/pos.png" alt="Terminal POS Arkan"
                style={{width:'100%', maxHeight:220, objectFit:'contain', marginTop:16}}/>
            )},
            {title:t('mod_liq_title'), content: (
              <div style={{marginTop:16}}>
                <div style={{fontFamily:'var(--mono)', fontSize:11,
                  color:'rgba(255,255,255,.5)', letterSpacing:'.2em'}}>USDT</div>
                <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:36, marginTop:4}}>1.200,00</div>
                <div className="badge-green"
                  style={{marginTop:8, display:'inline-flex', alignItems:'center', gap:6}}>
                  {t('mod_liq_badge')}
                </div>
              </div>
            )},
            {title:t('mod_split_title'), content: (
              <div style={{marginTop:16, display:'flex', flexDirection:'column', gap:10}}>
                <div style={{display:'flex', alignItems:'center', gap:8, opacity:.55,
                  fontFamily:'var(--display)', fontWeight:700, fontSize:11, letterSpacing:'.18em'}}>
                  <AccountIcon size={18}/>{t('mod_conta_arkan')}
                </div>
                {[t('mod_conta1'), t('mod_conta2'), t('mod_conta3')].map((c,i)=>(
                  <div key={i} style={{display:'flex', alignItems:'center', gap:10,
                    background:'rgba(21,255,0,.06)', border:'1px solid rgba(21,255,0,.18)',
                    borderRadius:8, padding:'9px 14px'}}>
                    <div style={{width:6, height:6, borderRadius:'50%', background:'#15ff00', flexShrink:0}}/>
                    <span style={{fontFamily:'var(--display)', fontWeight:700, fontSize:12, letterSpacing:'.14em'}}>{c}</span>
                  </div>
                ))}
              </div>
            )},
            {title:t('mod_invest_title'), content: (
              <div style={{marginTop:16}}>
                <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:28, color:'#15ff00'}}>+11,4% YTD</div>
                <div style={{fontFamily:'var(--serif)', fontSize:14, opacity:.6, marginTop:4}}>Alpha Pacific · SGP Fund</div>
                <div style={{marginTop:12}}><GrowthChart/></div>
              </div>
            )},
            {title:t('mod_links_title'), content: (
              <div style={{display:'flex', flexDirection:'column', gap:8, marginTop:16}}>
                {['pay.arkan.com/c/8fR-24XZ','pay.arkan.com/c/9yt-98AG','pay.arkan.com/c/6xs-44XT'].map((url,i)=>(
                  <div key={i} style={{display:'flex', alignItems:'center', justifyContent:'space-between',
                    background:'rgba(255,255,255,.05)', border:'1px solid rgba(255,255,255,.06)',
                    borderRadius:8, padding:'10px 12px'}}>
                    <span style={{fontFamily:'var(--mono)', fontSize:11, opacity:.75, minWidth:0,
                      overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', marginRight:8}}>{url}</span>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink:0}}>
                      <rect x="8" y="8" width="13" height="13" rx="2" stroke="#fff" strokeWidth="1.7"/>
                      <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" stroke="#fff" strokeWidth="1.7"/>
                    </svg>
                  </div>
                ))}
              </div>
            )},
            {title:t('mod_cambio_title'), content: (
              <div style={{display:'flex', flexDirection:'column', gap:10, marginTop:16}}>
                {[
                  {p:'USDT → USD',v:'18.340.200',d:true},
                  {p:'USDT → CNY',v:'2.105.300'},
                  {p:'USDT → BRL',v:'1.240.000'}
                ].map((r,i)=>(
                  <div key={i} style={{display:'flex', justifyContent:'space-between', alignItems:'center',
                    background:'rgba(255,255,255,.08)', borderRadius:10, padding:'10px 14px'}}>
                    <span style={{fontFamily:'var(--ui)', fontSize:13}}>{r.p}</span>
                    <span style={{fontFamily:'var(--ui)', fontSize:13}}>{r.v}</span>
                    {r.d && <span className="badge-green" style={{fontSize:11}}>D+0</span>}
                  </div>
                ))}
              </div>
            )},
          ].map((mod,i)=>(
            <div key={i} className="glass" style={{borderRadius:16, padding:'24px 22px'}}>
              <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:18}}>{mod.title}</div>
              {mod.content}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── VOLUME MOBILE ────────────────────────────────────────────────
function VolumeMobile(){
  const {t} = useLang();
  const {isTablet} = useVW();
  const pad = isTablet ? '96px 56px' : '88px 28px';

  return (
    <section style={{...M.section('#000', pad), overflow:'hidden'}}>
      <div style={{position:'absolute', inset:0,
        background:'url(assets/bitcoin-bg.png) center/cover no-repeat', opacity:.2}}/>
      <div style={{position:'relative', display:'flex', flexDirection:'column', gap:40,
        alignItems:'center', textAlign:'center'}}>
        <div style={{display:'flex', flexDirection:'column', gap:16, maxWidth:560}}>
          <h2 style={{...M.h2, color:'#fff'}}>{t('vol_h2')}</h2>
          <p style={{...M.body, opacity:.75}}>{t('vol_body')}</p>
        </div>
        <div style={{width:'100%',
          borderTop:'1px solid rgba(255,255,255,.2)',
          borderBottom:'1px solid rgba(255,255,255,.2)',
          padding:'40px 0'}}>
          <div style={{
            display:'grid',
            gridTemplateColumns: isTablet ? '1fr 1fr 1fr' : '1fr 1fr',
            gap:'32px 16px'
          }}>
            <div style={{display:'flex', flexDirection:'column', gap:10, textAlign:'center'}}>
              <div style={{fontFamily:'var(--display)', fontWeight:700,
                fontSize:'clamp(40px,9vw,64px)', color:'#fff', lineHeight:1,
                letterSpacing:'-0.03em'}}>
                {t('stat1_big')}
              </div>
              <div style={{fontFamily:'var(--display)', fontSize:11, letterSpacing:'.08em',
                color:'rgba(255,255,255,.5)', textTransform:'uppercase'}}>
                {t('stat1_small')}
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:10, textAlign:'center'}}>
              <div style={{fontFamily:'var(--display)', fontWeight:700,
                fontSize:'clamp(40px,9vw,64px)', color:'#fff', lineHeight:1,
                letterSpacing:'-0.03em'}}>
                {t('stat2_big')}
              </div>
              <div style={{fontFamily:'var(--display)', fontSize:11, letterSpacing:'.08em',
                color:'rgba(255,255,255,.5)', textTransform:'uppercase'}}>
                {t('stat2_small')}
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:10, textAlign:'center',
              gridColumn: isTablet ? 'auto' : '1 / -1'}}>
              <div style={{fontFamily:'var(--display)', fontWeight:700,
                fontSize:'clamp(40px,9vw,64px)', color:'#fff', lineHeight:1,
                letterSpacing:'-0.03em'}}>
                {t('stat3_big')}
              </div>
              <div style={{fontFamily:'var(--display)', fontSize:11, letterSpacing:'.08em',
                color:'rgba(255,255,255,.5)', textTransform:'uppercase'}}>
                {t('stat3_small')}
              </div>
            </div>
          </div>
        </div>
        <CTA label={t('cta')}/>
      </div>
    </section>
  );
}

// ── TESTIMONIALS MOBILE ──────────────────────────────────────────
function TestimonialsMobile(){
  const {t} = useLang();
  const {isTablet} = useVW();
  const pad = isTablet ? '88px 56px' : '80px 28px';
  const videoRef = useRM(null);
  useYTLoop(videoRef);

  const items = [
    {quote:"Arkan for me is a place I can trust. It's Bitcoin centric which says a lot.", who:'Herminio — Spain'},
    {quote:"Mastercard is one of the best cards in the market. 1% reward in BTC on all spending.", who:'Tony — Dubai'},
    {quote:"What I value most about Arkan is the incredible flexibility it offers.", who:'German — Costa Rica'},
    {quote:"Great bitcoin only offerings, simple to use and the best rates.", who:'Sandeep — Australia'},
  ];
  const cardW = isTablet ? 320 : 270;

  return (
    <section style={M.section('#000', pad)}>
      <div style={{display:'flex', flexDirection:'column', gap:40}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'center', gap:16, flexWrap:'wrap'}}>
          <h2 style={{...M.h2, textAlign:'right'}}>{t('test_left').split('\n').join(' ')}</h2>
          <div style={{width:120, height:120, borderRadius:'50%', overflow:'hidden', flexShrink:0,
            border:'1px solid rgba(255,255,255,.15)'}}>
            <iframe
              ref={videoRef}
              src="https://www.youtube.com/embed/iSOw_0Ip-AU?autoplay=1&mute=1&loop=1&playlist=iSOw_0Ip-AU&controls=0&showinfo=0&rel=0&modestbranding=1&disablekb=1&fs=0&playsinline=1&enablejsapi=1"
              allow="autoplay; encrypted-media"
              style={{position:'relative', width:140, height:140,
                marginLeft:-10, marginTop:-10, border:'none', pointerEvents:'none'}}/>
          </div>
          <h2 style={{...M.h2, textAlign:'left'}}>{t('test_right').split('\n').join(' ')}</h2>
        </div>
        <div style={{overflowX:'auto', WebkitOverflowScrolling:'touch',
          display:'flex', gap:16, paddingBottom:8, scrollSnapType:'x mandatory'}}>
          {items.map((item,i)=>(
            <div key={i} style={{
              flexShrink:0, width:cardW, scrollSnapAlign:'start',
              background:'rgba(255,255,255,.04)',
              border:'1px solid rgba(255,255,255,.1)',
              borderRadius:16, padding:'24px 22px'
            }}>
              <div style={{fontFamily:'var(--serif)', fontSize:48, lineHeight:1,
                letterSpacing:'-2px', opacity:.35}}>"</div>
              <p style={{...M.body, fontSize:15, marginTop:8}}>{item.quote}</p>
              <div style={{fontFamily:'var(--display)', fontWeight:600, fontSize:12,
                letterSpacing:'.06em', marginTop:16, opacity:.6}}>{item.who}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── CONTACT MOBILE ───────────────────────────────────────────────
function ContactMobile(){
  const {t} = useLang();
  const {isTablet} = useVW();
  const pad = isTablet ? '88px 56px' : '80px 28px';
  const [active, setActive] = useSM(new Set([0,5]));
  const tags = t('tags');
  const toggle = (i)=> setActive(prev => { const n=new Set(prev); n.has(i)?n.delete(i):n.add(i); return n; });
  const onSubmit = (e) => { e.preventDefault(); alert('Obrigado! Um especialista ARKAN entrará em contato em até 1 dia útil.'); };

  return (
    <section id="contact-section" style={{...M.section('#fff', pad), color:'#000'}}>
      <div style={{display:'flex', flexDirection:'column', gap:32,
        maxWidth: isTablet ? 640 : '100%', margin:'0 auto'}}>
        <div style={{...M.eyebrow, color:'rgba(0,0,0,.5)'}}>{t('contact_eyebrow')}</div>
        <h2 style={{...M.h2, color:'#000'}}>{t('contact_h2').split('\n').join(' ')}</h2>
        <p style={{...M.bodyDark}}>{t('contact_body')}</p>
        <div style={{display:'flex', flexDirection:'column', gap:12}}>
          <div className="pill" style={{background:'rgba(0,0,0,.05)', border:'1px solid rgba(0,0,0,.1)',
            height:44, padding:'0 16px', display:'inline-flex', alignItems:'center'}}>
            <span style={{fontFamily:'var(--ui)', fontSize:13, color:'#000'}}>{t('contact_chip1')}</span>
          </div>
          <div className="pill" style={{background:'rgba(0,0,0,.05)', border:'1px solid rgba(0,0,0,.1)',
            height:44, padding:'0 16px', display:'inline-flex', alignItems:'center'}}>
            <span style={{fontFamily:'var(--ui)', fontSize:13, color:'#000'}}>{t('contact_chip2')}</span>
          </div>
        </div>
        {/* Form */}
        <form onSubmit={onSubmit} style={{
          background:'#000', borderRadius:24,
          padding: isTablet ? '40px 36px' : '32px 24px',
          display:'flex', flexDirection:'column', gap:24
        }}>
          <FormField label={t('field_name')} placeholder={t('field_name_ph')} required type="text"/>
          <FormField label={t('field_email')} placeholder={t('field_email_ph')} required type="email"/>
          <PhoneField/>
          <FormField label={t('field_company')} placeholder={t('field_company_ph')} type="text"/>
          <VolumeSelect/>
          <div>
            <div style={{fontFamily:'var(--display)', fontWeight:500, fontSize:11,
              letterSpacing:'.18em', color:'rgba(255,255,255,.45)', marginBottom:12}}>
              {t('field_need')}
            </div>
            <div style={{display:'flex', flexWrap:'wrap', gap:10}}>
              {tags.map((tag,i)=>(
                <button type="button" key={i}
                  className={'pill-tag'+(active.has(i)?' active':'')}
                  onClick={()=>toggle(i)}
                  style={{height:40, fontSize:12, padding:'0 14px'}}>
                  {tag}
                </button>
              ))}
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:16}}>
            <p style={{fontFamily:'var(--serif)', fontSize:13,
              color:'rgba(255,255,255,.4)', lineHeight:'20px'}}>{t('privacy')}</p>
            <button type="submit" className="btn-primary"
              style={{width:'100%', justifyContent:'center', height:52}}>
              <span>{t('submit')}</span><span className="arrow">→</span>
            </button>
          </div>
        </form>
      </div>
    </section>
  );
}

// ── FOOTER MOBILE ────────────────────────────────────────────────
function FooterMobile(){
  const {t} = useLang();
  const cols = [
    {h:t('footer_col1_h'), items:t('footer_col1')},
    {h:t('footer_col2_h'), items:t('footer_col2')},
    {h:t('footer_col3_h'), items:t('footer_col3')},
  ];
  const {isTablet} = useVW();
  const pad = isTablet ? '56px 56px 40px' : '48px 28px 32px';

  return (
    <footer style={{width:'100%', padding:pad, background:'#000', boxSizing:'border-box'}}>
      <div style={{display:'flex', flexDirection:'column', gap:40}}>
        <div style={{display:'flex', flexDirection:'column', gap:16}}>
          <ArkanLogo size={1}/>
          <p style={{...M.body, maxWidth:360, fontSize:15}}>{t('footer_tagline')}</p>
        </div>
        <div style={{display:'grid', gridTemplateColumns: isTablet ? '1fr 1fr 1fr' : '1fr 1fr', gap:32}}>
          {cols.map((col,i)=>(
            <div key={i} style={{display:'flex', flexDirection:'column', gap:16}}>
              <div style={{fontFamily:'var(--display)', fontWeight:500, fontSize:12,
                letterSpacing:'.08em', color:'rgba(255,255,255,.4)'}}>{col.h}</div>
              <div style={{display:'flex', flexDirection:'column', gap:12}}>
                {col.items.map((item,j)=>(
                  <a key={j} href="#"
                    style={{fontFamily:'var(--serif)', fontSize:15,
                      color:'rgba(255,255,255,.7)', textDecoration:'none'}}>
                    {item}
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </footer>
  );
}

// ── TARJA GROWTH MOBILE ──────────────────────────────────────────
function TarjaGrowthMobile(){
  const [hov, setHov] = useSM(false);
  return (
    <a href="https://www.growthdesignsite.com.br/" target="_blank" rel="noopener noreferrer"
      onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}
      style={{display:'flex', alignItems:'center', justifyContent:'center', gap:10,
        width:'100%', height:52, background:hov?'#1a1a1a':'#000',
        transition:'background .25s ease', textDecoration:'none', boxSizing:'border-box'}}>
      <span style={{fontFamily:'Roboto, sans-serif', fontStyle:'italic', fontSize:14, color:'rgba(255,255,255,.6)'}}>Carely designed by</span>
      <img src="assets/growth-logo.svg" alt="Growth Design" style={{height:18, width:'auto',
        filter: hov ? 'brightness(0) saturate(100%) invert(26%) sepia(88%) saturate(1100%) hue-rotate(205deg) brightness(95%)' : 'brightness(0) invert(1)',
        transition:'filter .3s ease'}}/>
    </a>
  );
}

// ── FX TICKER MOBILE ─────────────────────────────────────────────
function FXTickerMobile(){
  return (
    <div style={{overflow:'hidden', height:44, background:'rgba(255,255,255,.04)',
      borderTop:'1px solid rgba(255,255,255,.08)', borderBottom:'1px solid rgba(255,255,255,.08)',
      display:'flex', alignItems:'center'}}>
      <FXTicker/>
    </div>
  );
}

Object.assign(window, {
  HeaderMobile, HeroMobile, FeaturesMobile, HubMobile, RolesMobile,
  ModulesMobile, VolumeMobile, TestimonialsMobile, ContactMobile,
  FooterMobile, TarjaGrowthMobile, FXTickerMobile
});