// All page sections for ARKAN landing
const { useState: useS, useEffect: useE, useRef: useR } = React;

// === HEADER ===
function Header(){
  return (
    <div style={{position:'absolute', left:0, top:0, width:1920, zIndex:20}}>
      {/* Top row: currency / logo / lang */}
      <div style={{
        position:'absolute', left:174.7, top:44.6, width:1570, height:50,
        display:'flex', justifyContent:'space-between', alignItems:'center'
      }}>
        <CurrencyChip />
        <LangChip />
      </div>
      {/* Centered ARKAN logo */}
      <div style={{position:'absolute', left:0, right:0, top:32, display:'flex', justifyContent:'center', pointerEvents:'none'}}>
        <div style={{padding:16, display:'inline-flex'}}>
          <ArkanLogo size={1} />
        </div>
      </div>
      {/* FX ticker just below */}
      <div style={{position:'absolute', left:-7, top:1071, width:1934}}>
        <FXTicker />
      </div>
    </div>
  );
}

// === HERO ===
function Hero(){
  const {t} = useLang();
  return (
    <section data-screen-label="01 Hero" style={{position:'absolute', left:0, top:0, width:1920, height:1071, overflow:'hidden'}}>
      {/* YouTube video background */}
      <div style={{position:'absolute', inset:0, overflow:'hidden', zIndex:0}}>
        <iframe
          id="yt-hero"
          width="1920" height="1080"
          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&origin=null"
          title="Vídeo Hero, Arkan site"
          frameBorder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerPolicy="strict-origin-when-cross-origin"
          style={{
            position:'absolute',
            top:'50%', left:'50%',
            transform:'translate(-50%, -50%)',
            width:2200, height:1240,
            border:'none', pointerEvents:'none'
          }}
        />
        {/* Overlay to block clicks */}
        <div style={{position:'absolute', inset:0, zIndex:1}} />
      </div>
      <div className="vignette" style={{position:'absolute', inset:0, opacity:0.45}}/>
      {/* Side line-art graphics (esquerda + direita) */}
      <div style={{position:'absolute', left:174.7, top:666.7, width:1570, height:359, pointerEvents:'none'}}>
        <img src="assets/hero-direita.png" alt="" style={{position:'absolute', left:0, top:0, height:359, width:'auto'}} />
        <img src="assets/hero-esquerda.png"  alt="" style={{position:'absolute', right:0, top:0, height:359, width:'auto'}} />
      </div>
      {/* Main copy */}
      <div style={{
        position:'absolute', left:481.5, top:546.7, width:957,
        display:'flex', flexDirection:'column', alignItems:'center', gap:16
      }}>
        <div className="eyebrow" style={{textAlign:'center', textTransform:'uppercase'}}>{t('hero_eyebrow')}</div>
        <h1 className="h1" style={{textAlign:'center', maxWidth:957, marginTop:0}}>{t('hero_h1')}</h1>
        <p className="lead" style={{textAlign:'center', maxWidth:920, marginTop:28}}>{t('hero_lead')}</p>
        <div style={{marginTop:28}}><CTA label={t('cta')} /></div>
      </div>
    </section>
  );
}

// === FEATURE CARDS (01–04) ===
function FeaturesSection(){
  const {t} = useLang();
  const items = [
    {n:1, t:t('feat1_t'), b:t('feat1_b')},
    {n:2, t:t('feat2_t'), b:t('feat2_b')},
    {n:3, t:t('feat3_t'), b:t('feat3_b')},
    {n:4, t:t('feat4_t'), b:t('feat4_b')},
  ];
  return (
    <section data-screen-label="02 Features" style={{
      position:'absolute', left:0, top:1071.6, width:1920, height:499,
      borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)',
      padding:'80px 56px', display:'flex'
    }}>
      <div style={{display:'flex', width:'100%', justifyContent:'space-between', alignItems:'flex-start', gap:0}}>
        {items.map((it,i)=>(
          <React.Fragment key={i}>
            <div style={{flex:'0 0 359px'}}>
              <FeatureCard num={it.n} title={it.t} body={it.b} />
            </div>
            {i<items.length-1 && <VSep h={339}/>}
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

// === HUB SECTION (cards + bank card visuals) ===
function HubSection(){
  const {t} = useLang();
  return (
    <section data-screen-label="03 Hub" style={{position:'absolute', left:0, top:1650, width:1920, height:920}}>
      {/* Left text */}
      <div style={{position:'absolute', left:175, top:148, width:866}}>
        <div className="eyebrow">{t('hub_eyebrow')}</div>
        <h2 className="display" style={{fontSize:60, lineHeight:1.1, marginTop:36, letterSpacing:'-0.025em'}}>
          {t('hub_h2').split('\n').map((l,i)=><React.Fragment key={i}>{l}{i===0&&<br/>}</React.Fragment>)}
        </h2>
        <p className="body" style={{marginTop:36, maxWidth:720, fontSize:22, lineHeight:'34px'}}>{t('hub_body')}</p>
        <div style={{display:'flex', flexWrap:'wrap', gap:16, marginTop:46, maxWidth:720}}>
          {t('hub_chips').map(chip => <span key={chip} className="pill-tag">{chip}</span>)}
        </div>
        <div style={{marginTop:48}}><CTA label={t('cta')} /></div>
      </div>
      {/* Right: bank cards (real image) */}
      <div style={{position:'absolute', left:980, top:74, width:934, height:711}}>
        <img src="assets/cards-arkan.png" alt="Cartões Arkan" style={{
          width:934, height:711, objectFit:'contain',
          filter:'drop-shadow(0 30px 60px rgba(0,0,0,.5))'
        }}/>
      </div>
    </section>
  );
}

// === C-LEVEL ROLES — ARC CAROUSEL ===
function RolesSection(){
  const {t} = useLang();
  const roles = t('roles');  // array from translations
  const N = roles.length;
  const tripled = [...roles, ...roles, ...roles];
  const [offset, setOffset] = useS(N + 2);
  const [animating, setAnimating] = useS(true);

  useE(() => {
    const t = setTimeout(() => {
      if (offset < N || offset >= 2*N){
        setAnimating(false);
        setOffset(o => ((o % N) + N) % N + N);
      }
    }, 600);
    return () => clearTimeout(t);
  }, [offset]);

  useE(() => {
    if (!animating){
      const id = requestAnimationFrame(() => setAnimating(true));
      return () => cancelAnimationFrame(id);
    }
  }, [animating]);

  const delta = (i) => i - offset;

  const slot = (d) => {
    const map = {
      '-2': {x:-880, y:90,  rot:-8, scale:.78, opacity:.45, z:1},
      '-1': {x:-460, y:25,  rot:-4, scale:.92, opacity:.85, z:3},
       '0': {x:   0, y:0,   rot: 0, scale:1,   opacity:1,   z:5},
       '1': {x: 460, y:25,  rot: 4, scale:.92, opacity:.85, z:3},
       '2': {x: 880, y:90,  rot: 8, scale:.78, opacity:.45, z:1},
    };
    return map[String(d)] || {x:0, y:0, rot:0, scale:.5, opacity:0, z:0};
  };

  const next = () => setOffset(o => o + 1);
  const prev = () => setOffset(o => o - 1);
  const activeRole = ((offset % N) + N) % N;
  const goTo = (i) => setOffset(o => {
    const cur = ((o % N) + N) % N;
    let diff = i - cur;
    if (diff >  N/2) diff -= N;
    if (diff < -N/2) diff += N;
    return o + diff;
  });

  return (
    <section data-screen-label="04 Roles" style={{position:'absolute', left:0, top:2570, width:1920, height:960, overflow:'hidden', paddingTop:110, paddingBottom:110}}>
      <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%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, #000 100%)'}}/>

      {/* Header */}
      <div style={{position:'relative', textAlign:'center'}}>
        <div className="eyebrow" style={{display:'inline-block'}}>{t('roles_eyebrow')}</div>
        <h2 className="h2" style={{marginTop:34}}>{t('roles_h2').split('\n').map((l,i)=><React.Fragment key={i}>{l}{i===0&&<br/>}</React.Fragment>)}</h2>
        <p className="lead" style={{marginTop:30, maxWidth:760, marginLeft:'auto', marginRight:'auto'}}>{t('roles_lead')}</p>
      </div>

      {/* Arc carousel */}
      <div style={{position:'absolute', left:0, right:0, top:510, height:420}}>
        <div style={{position:'relative', width:1920, height:380, margin:'0 auto'}}>
          {tripled.map((r, i) => {
            const d = delta(i);
            if (Math.abs(d) > 3) return null;
            const s = slot(d);
            const isCenter = d === 0;
            return (
              <div key={i} onClick={() => !isCenter && setOffset(i)} style={{
                position:'absolute', left:'50%', top:0,
                width:427, marginLeft:-213,
                transform:`translate(${s.x}px, ${s.y}px) rotate(${s.rot}deg) scale(${s.scale})`,
                opacity: s.opacity, zIndex: s.z,
                transition: animating ? 'transform .55s cubic-bezier(.6,.05,.2,1), opacity .45s ease' : 'none',
                cursor: isCenter ? 'default' : 'pointer',
                transformOrigin:'center center',
                pointerEvents: Math.abs(d) > 2 ? 'none' : 'auto'
              }}>
                <RoleCard label={r.label} body={r.body}/>
              </div>
            );
          })}

          {/* Nav arrows */}
          <button onClick={prev} style={{position:'absolute', left:120, top:120, zIndex:20, width:64, height:64, borderRadius:'50%', border:'1px solid rgba(255,255,255,.35)', background:'rgba(0,0,0,.45)', backdropFilter:'blur(8px)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer'}}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M15 18l-6-6 6-6" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <button onClick={next} style={{position:'absolute', right:120, top:120, zIndex:20, width:64, height:64, borderRadius:'50%', border:'1px solid rgba(255,255,255,.35)', background:'rgba(0,0,0,.45)', backdropFilter:'blur(8px)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer'}}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>

          {/* Dots */}
          <div style={{position:'absolute', left:0, right:0, top:380, display:'flex', justifyContent:'center', gap:10, zIndex:20}}>
            {roles.map((_,i)=>(
              <button key={i} onClick={()=>goTo(i)} style={{width: i===activeRole ? 28 : 8, height:8, borderRadius:9999, padding:0, border:'none', background: i===activeRole ? '#fff' : 'rgba(255,255,255,.3)', transition:'all .35s ease', cursor:'pointer'}}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// === MODULE CARDS COM HOVER ANIMATIONS ===

function PosCard({t}){
  const [hov, setHov] = useS(false);
  return (
    <ModuleCard title="POS" w={775} h={710} style={{position:'absolute', left:970, top:128}}
      onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}>
      <img src="assets/pos.png" alt="Terminal POS Arkan" style={{
        position:'absolute', left:87, top:150, width:600, height:'auto',
        objectFit:'contain', maxWidth:'90%',
        transform: hov ? 'translateY(-18px)' : 'translateY(0)',
        transition:'transform .4s cubic-bezier(.2,.8,.3,1)'
      }} />
    </ModuleCard>
  );
}

function LiqCard({t}){
  const [hov, setHov] = useS(false);
  return (
    <ModuleCard title={t('mod_liq_title')} w={775} h={411} style={{position:'absolute', left:175, top:858}}
      onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}>
      <SubCard width={704} height={240}>
        <div className="mono" style={{position:'absolute', left:34, top:53, fontSize:14, letterSpacing:'.26em', color:'rgba(255,255,255,.54)'}}>USDT</div>
        <div style={{position:'absolute', left:34, top:83, fontFamily:'var(--display)', fontWeight:500, fontSize:48, letterSpacing:'-.02em'}}>1.200,00</div>
        <div className="badge-green" style={{position:'absolute', left:34, top:158}}>{t('mod_liq_badge')}</div>
        <img src="assets/solucoes-card.png" alt="Cartão Arkan" style={{
          position:'absolute', right:-20, top:-30, width:380, height:'auto',
          objectFit:'contain', filter:'drop-shadow(0 20px 40px rgba(0,0,0,.5))',
          transform: hov ? 'scale(1.08)' : 'scale(1)',
          transformOrigin:'center center',
          transition:'transform .4s cubic-bezier(.2,.8,.3,1)'
        }} />
      </SubCard>
    </ModuleCard>
  );
}

function InvestCard({t}){
  const [hov, setHov] = useS(false);
  return (
    <ModuleCard title={t('mod_invest_title')} w={1570} h={411} style={{position:'absolute', left:175, top:1287}}
      onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}>
      <SubCard width={1514} height={238}>
        <div style={{position:'absolute', left:30, top:24, fontFamily:'var(--display)', fontWeight:500, fontSize:14, letterSpacing:'.26em', color:'rgba(255,255,255,.54)'}}>SGP FUND</div>
        <div style={{position:'absolute', left:30, top:54, fontFamily:'var(--display)', fontWeight:700, fontSize:30, letterSpacing:'-.02em'}}>Alpha Pacific</div>
        <div style={{position:'absolute', right:30, top:24, fontFamily:'var(--display)', fontWeight:500, fontSize:14, letterSpacing:'.26em', color:'rgba(255,255,255,.54)'}}>YTD</div>
        <div style={{
          position:'absolute', right:30, top:54, fontFamily:'var(--display)', fontWeight:700, fontSize:30, color:'#15ff00',
          transition:'all .6s ease'
        }}>{hov ? '+15,7%' : '+11,4%'}</div>
        <div style={{position:'absolute', left:30, right:30, bottom:0, height:121}}>
          <GrowthChartAnimated hov={hov}/>
        </div>
      </SubCard>
    </ModuleCard>
  );
}

function GrowthChartAnimated({hov}){
  const base = "M 0 90 L 200 80 L 380 92 L 560 70 L 760 60 L 980 50 L 1180 28 L 1300 18 L 1462 6";
  const high = "M 0 80 L 200 68 L 380 78 L 560 55 L 760 42 L 980 30 L 1180 12 L 1300 5 L 1462 1";
  const baseArea = base + " L 1462 121 L 0 121 Z";
  const highArea = high + " L 1462 121 L 0 121 Z";
  return (
    <svg viewBox="0 0 1462 121" preserveAspectRatio="none" style={{width:'100%', height:121}}>
      <defs>
        <linearGradient id="grnFill2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(0,139,29,.32)"/>
          <stop offset="100%" stopColor="rgba(0,139,29,0)"/>
        </linearGradient>
      </defs>
      <path d={hov ? highArea : baseArea} fill="url(#grnFill2)" style={{transition:'d .8s ease'}}/>
      <path d={hov ? high : base} fill="none" stroke="#088e24" strokeWidth="3" strokeLinejoin="round" style={{transition:'d .8s ease'}}/>
    </svg>
  );
}

function LinksCard({t}){
  const [hov, setHov] = useS(false);
  return (
    <ModuleCard title={t('mod_links_title')} w={1093} h={411} style={{position:'absolute', left:175, top:1719}}
      onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}>
      <div style={{
        position:'absolute', left:33, top:136, width:1037, display:'flex', flexDirection:'column',
        gap: hov ? 24 : 15, transition:'gap .35s ease'
      }}>
        {['pay.arkan.com/c/8fR-24XZ','pay.arkan.com/c/9yt-98AG','pay.arkan.com/c/6xs-44XT','pay.arkan.com/c/7xs-70HU'].map((u,i)=>(
          <PayLink key={i} url={u}/>
        ))}
      </div>
    </ModuleCard>
  );
}

function CambioCard({t}){
  const [hov, setHov] = useS(false);
  return (
    <ModuleCard title={t('mod_cambio_title')} w={457} h={411} style={{position:'absolute', left:1288, top:1719}}
      onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}>
      <div style={{
        position:'absolute', left:23, top:135, width:411, display:'flex', flexDirection:'column',
        gap: hov ? 28 : 19, transition:'gap .35s ease'
      }}>
        {[
          {p:'USDT → USD', v:'18.340.200', d:true},
          {p:'USDT → USD', v:'890.300'},
          {p:'USDT → CNY', v:'2.105.300'},
          {p:'USDT → BRL', v:'1.240.000'},
        ].map((r,i)=>(
          <FxRow key={i} {...r}/>
        ))}
      </div>
    </ModuleCard>
  );
}

function SplitCard({t}){
  const [hov, setHov] = useS(false);
  const [animKey, setAnimKey] = useS(0);

  const onEnter = () => { setHov(true); setAnimKey(k => k+1); };
  const onLeave = () => setHov(false);

  const paths = [
    "M 360 80 C 360 130, 107 130, 107 175",
    "M 360 80 C 360 130, 350 130, 350 175",
    "M 360 80 C 360 130, 593 130, 593 175",
  ];
  const delays = ['0s','0.15s','0.3s'];
  const arrivals = [0.55, 0.65, 0.75]; // when each dot arrives (0-1 of 1.2s)

  return (
    <ModuleCard title={t('mod_split_title')} w={775} h={411}
      style={{position:'absolute', left:970, top:858}}
      onMouseEnter={onEnter} onMouseLeave={onLeave}>
      <SubCard width={719} height={240}>

        {/* Source account */}
        <div style={{position:'absolute', left:286, top:14, width:147, display:'flex', flexDirection:'column', alignItems:'center', gap:6}}>
          <div style={{position:'relative'}}>
            <AccountIcon size={40}/>
            {hov && <div key={'ping-'+animKey} style={{
              position:'absolute', inset:-8, borderRadius:'50%',
              border:'2px solid rgba(21,255,0,.6)',
              animation:'split-ping .6s ease-out forwards'
            }}/>}
          </div>
          <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:12, letterSpacing:'.18em'}}>{t('mod_conta_arkan')}</div>
          <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:12, letterSpacing:'.18em', color:'#9aa'}}>$$</div>
        </div>

        {/* SVG lines + animated dots */}
        <svg key={animKey} viewBox="0 0 719 240" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
          <defs>
            <style>{`
              @keyframes split-ping { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2.2);opacity:0} }
              @keyframes split-line { from{stroke-dashoffset:300} to{stroke-dashoffset:0} }
            `}</style>
          </defs>
          {paths.map((d,i)=>(
            <g key={i}>
              {/* Base line */}
              <path d={d} stroke="rgba(255,255,255,.15)" fill="none" strokeWidth="1.5"/>
              {/* Animated line */}
              {hov && <path d={d} stroke="rgba(21,255,0,.5)" fill="none" strokeWidth="1.5"
                strokeDasharray="300" strokeDashoffset="300"
                style={{animation:`split-line .6s ease forwards`, animationDelay:delays[i]}}
              />}
              {/* Traveling dot */}
              {hov && (
                <circle r="5" fill="#15ff00" style={{filter:'drop-shadow(0 0 6px #15ff00)'}}>
                  <animateMotion dur="0.7s" begin={delays[i]} fill="freeze" path={d}/>
                </circle>
              )}
            </g>
          ))}
        </svg>

        {/* Destination accounts */}
        {[
          {label:t('mod_conta1'), x:12, delay: arrivals[0]},
          {label:t('mod_conta2'), x:255, delay: arrivals[1]},
          {label:t('mod_conta3'), x:498, delay: arrivals[2]},
        ].map((d,i)=>(
          <div key={i} style={{
            position:'absolute', left:d.x, top:160, width:190, height:64, borderRadius:13,
            background:'linear-gradient(180deg, rgba(0,0,0,.2), rgba(102,102,102,.2)), rgba(255,255,255,.06)',
            border: hov ? '1px solid rgba(21,255,0,.5)' : '1px solid rgba(255,255,255,.29)',
            display:'flex', alignItems:'center', justifyContent:'center', gap:10,
            transition:`border-color .3s ease ${d.delay}s`
          }}>
            <AccountIcon size={28}/>
            <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:12, letterSpacing:'.18em'}}>{d.label}</div>
          </div>
        ))}
      </SubCard>
    </ModuleCard>
  );
}

// === SOLUÇÕES / Modules ===
function ModulesSection(){
  const {t} = useLang();
  return (
    <section data-screen-label="05 Modules" style={{position:'absolute', left:0, top:3690, width:1920, height:2320}}>
      {/* Header text */}
      <div style={{position:'absolute', left:227, top:196, width:652}}>
        <div className="eyebrow">{t('mod_eyebrow')}</div>
        <h2 className="h2" style={{marginTop:34, fontSize:60}}>{t('mod_h2').split('\n').map((l,i)=><React.Fragment key={i}>{l}{i<2&&<br/>}</React.Fragment>)}</h2>
        <p className="body" style={{marginTop:34, maxWidth:600}}>{t('mod_body')}</p>
        <div style={{marginTop:40}}><CTA label={t('cta')}/></div>
      </div>

      {/* POS card (right of header) */}
      <PosCard t={t} />

      <LiqCard t={t} />

      <SplitCard t={t} />

      <InvestCard t={t} />

      <LinksCard t={t} />
      <CambioCard t={t} />

      {/* Final CTA */}
      <div style={{position:'absolute', left:0, right:0, top:2230, display:'flex', justifyContent:'center'}}><CTA/></div>
    </section>
  );
}

function PayLink({url}){
  const [copied, setCopied] = useS(false);
  const copy = () => {
    navigator.clipboard?.writeText(url);
    setCopied(true);
    setTimeout(()=>setCopied(false), 1200);
  };
  return (
    <div style={{
      width:1037, height:66, borderRadius:10, background:'rgb(35,33,35)',
      border:'1px solid rgba(255,255,255,.05)', backdropFilter:'blur(12px)',
      display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 19px'
    }}>
      <div style={{display:'flex', alignItems:'center', gap:22}}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M9 15a5 5 0 0 0 7 0l3-3a5 5 0 1 0-7-7l-1 1M15 9a5 5 0 0 0-7 0l-3 3a5 5 0 1 0 7 7l1-1" stroke="#fff" strokeWidth="1.7" strokeLinecap="round"/>
        </svg>
        <span className="ui" style={{fontSize:14.9, fontWeight:500}}>{url}</span>
      </div>
      <button onClick={copy} title="Copiar" style={{cursor:'pointer'}}>
        {copied
          ? <span className="ui" style={{fontSize:13, color:'var(--green)'}}>copiado</span>
          : (
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <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>
          )}
      </button>
    </div>
  );
}

function FxRow({p,v,d}){
  return (
    <div style={{
      width:411, height:60, borderRadius:12, background:'rgba(255,255,255,.1)',
      border:'1px solid rgba(255,255,255,.05)', backdropFilter:'blur(14px)',
      display:'flex', alignItems:'center', justifyContent: d?'space-between':'space-between', padding:'0 22px'
    }}>
      <span className="ui" style={{fontSize:17.84, fontWeight:500}}>{p}</span>
      <span className="ui" style={{fontSize:17.84, fontWeight:500}}>{v}</span>
      {d && <span className="badge-green">✓ D+0</span>}
    </div>
  );
}

// === VOLUME REAL — bg image ===
function VolumeSection(){
  const {t} = useLang();
  return (
    <section data-screen-label="06 Volume" style={{
      position:'absolute', left:0, top:6220, width:1920, height:841, overflow:'hidden'
    }}>
      <div style={{
        position:'absolute', inset:0,
        background:'url(assets/bitcoin-bg.png) center 30%/100% no-repeat',
        opacity:.36
      }}/>
      <div style={{
        position:'absolute', left:0, top:318, width:'100%', height:525,
        background:'linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%)'
      }}/>
      {/* Coin moved to testimonials section */}

      <div style={{
        position:'absolute', left:460, top:0, bottom:0, width:1000,
        display:'flex', flexDirection:'column', alignItems:'center',
        justifyContent:'center', gap:40
      }}>
        <h2 className="display" style={{fontSize:50, fontWeight:700, textAlign:'center', letterSpacing:'-0.025em'}}>{t('vol_h2')}</h2>
        <p className="body" style={{textAlign:'center', maxWidth:530, fontSize:20, lineHeight:'36px'}}>{t('vol_body')}</p>
        <div style={{width:1000}}>
          <div style={{height:1, background:'#fff'}}/>
          <div style={{display:'flex', justifyContent:'space-around', padding:'18px 0'}}>
            <Stat big={t('stat1_big')} small={t('stat1_small')}/>
            <Stat big={t('stat2_big')} small={t('stat2_small')}/>
            <Stat big={t('stat3_big')} small={t('stat3_small')} wide/>
          </div>
          <div style={{height:1, background:'#fff'}}/>
        </div>
        <div><CTA label={t('cta')}/></div>
      </div>
    </section>
  );
}

function Stat({big, small, wide}){
  return (
    <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:7, width: wide ? 360 : 296}}>
      <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:34, lineHeight:'88px', letterSpacing:'-0.02em', color:'#f3f3f3', whiteSpace:'nowrap'}}>{big}</div>
      <div style={{fontFamily:'var(--display)', fontSize:12, lineHeight:'20px', color:'#c2c2c2', textAlign:'center'}}>{small}</div>
    </div>
  );
}

// === TESTIMONIALS ===
function TestimonialsSection(){
  const {t} = useLang();
  const items = [
    {quote:'Arkan for me is a place I can trust. It’s\nBitcoin centric which says a lot.', who:'Herminio — Spain'},
    {quote:'Mastercard is one of the\nbest cards in the market. 1% reward\nin BTC on all spending. Good\nconversion rates for foreign\ncurrencies.', who:'Tony — Dubai'},
    {quote:'What I value most about Arkan\nis the incredible flexibility it offers in managing my finances.', who:'German — Costa Rica'},
    {quote:'Great bitcoin only offerings, simple to\nuse and the best rates means Arkan is\nthe only bitcoin bank that I am\ncurrently using.', who:'Sandeep — Australia'},
  ];
  return (
    <section data-screen-label="07 Testimonials" style={{position:'absolute', left:0, top:7110, width:1920, height:900}}>
      {/* Headings with coin between */}
      <div style={{position:'absolute', left:0, right:0, top:0, display:'flex', justifyContent:'center', alignItems:'center', gap:30}}>
        <h2 className="h2" style={{textAlign:'right', maxWidth:420}}>{t('test_left').split('\n').map((l,i)=><React.Fragment key={i}>{l}{i===0&&<br/>}</React.Fragment>)}</h2>
        <div style={{width:420, height:420, borderRadius:'50%', overflow:'hidden', position:'relative', flexShrink:0}}>
          <iframe
            id="yt-coin"
            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&iv_load_policy=3&disablekb=1&fs=0&playsinline=1&enablejsapi=1"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerPolicy="strict-origin-when-cross-origin"
            frameBorder="0"
            style={{
              position:'absolute', top:'50%', left:'50%',
              transform:'translate(-50%, -50%)',
              width:480, height:480,
              border:'none', pointerEvents:'none'
            }}
          />
        </div>
        <h2 className="h2" style={{textAlign:'left', maxWidth:430}}>{t('test_right').split('\n').map((l,i)=><React.Fragment key={i}>{l}{i===0&&<br/>}</React.Fragment>)}</h2>
      </div>

      {/* Glow */}
      <div style={{
        position:'absolute', left:-112, top:560, width:2144, height:700,
        borderRadius:'50%', background:'rgba(46,98,156,.21)', filter:'blur(80px)'
      }} />

      <div style={{position:'absolute', left:60, right:60, top:480, display:'flex', justifyContent:'space-between'}}>
        {items.map((t,i)=>(
          <React.Fragment key={i}>
            <Testimonial {...t} idx={i}/>
            {i<items.length-1 && <div style={{width:1, background:'rgb(56,61,70)'}}/>}
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

function Testimonial({quote, who}){
  return (
    <div style={{width:355, display:'flex', flexDirection:'column', gap:18}}>
      <div style={{fontFamily:'var(--serif)', fontSize:69, lineHeight:1, letterSpacing:'-2px'}}>“</div>
      <div style={{fontFamily:'var(--serif)', fontSize:18, lineHeight:'30px', whiteSpace:'pre-line'}}>{quote}</div>
      <div style={{fontFamily:'var(--display)', fontWeight:600, fontSize:14, letterSpacing:'.06em', marginTop:8, opacity:.85}}>{who}</div>
    </div>
  );
}

// === PHONE FIELD com seletor de país ===
function PhoneField(){
  const [open, setOpen] = useS(false);
  const [focused, setFocused] = useS(false);
  const [val, setVal] = useS('');
  const [country, setCountry] = useS({flag:'🇧🇷', code:'+55', name:'Brasil'});
  const countries = [
    {flag:'🇧🇷', code:'+55',  name:'Brasil'},
    {flag:'🇺🇸', code:'+1',   name:'EUA'},
    {flag:'🇨🇳', code:'+86',  name:'China'},
    {flag:'🇦🇷', code:'+54',  name:'Argentina'},
    {flag:'🇵🇹', code:'+351', name:'Portugal'},
    {flag:'🇬🇧', code:'+44',  name:'Reino Unido'},
    {flag:'🇩🇪', code:'+49',  name:'Alemanha'},
    {flag:'🇫🇷', code:'+33',  name:'França'},
    {flag:'🇮🇹', code:'+39',  name:'Itália'},
    {flag:'🇪🇸', code:'+34',  name:'Espanha'},
    {flag:'🇯🇵', code:'+81',  name:'Japão'},
    {flag:'🇰🇷', code:'+82',  name:'Coreia do Sul'},
    {flag:'🇦🇪', code:'+971', name:'Emirados Árabes'},
    {flag:'🇸🇦', code:'+966', name:'Arábia Saudita'},
    {flag:'🇲🇽', code:'+52',  name:'México'},
    {flag:'🇨🇦', code:'+1',   name:'Canadá'},
    {flag:'🇦🇺', code:'+61',  name:'Austrália'},
    {flag:'🇮🇳', code:'+91',  name:'Índia'},
    {flag:'🇿🇦', code:'+27',  name:'África do Sul'},
    {flag:'🇨🇭', code:'+41',  name:'Suíça'},
  ];
  const isActive = focused || val.length > 0;
  return (
    <div style={{display:'flex', flexDirection:'column', gap:8, position:'relative'}}>
      <label style={{
        fontFamily:'var(--display)', fontWeight:500, fontSize:11,
        letterSpacing:'.18em', color: focused ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,.7)',
        transition:'color .2s ease'
      }}>TELEFONE / WHATSAPP</label>
      <div style={{
        display:'flex', alignItems:'center',
        borderBottom: isActive ? '1.5px solid rgba(255,255,255,.9)' : '1.5px solid rgba(255,255,255,.15)',
        background: focused ? 'rgba(255,255,255,.04)' : 'rgba(255,255,255,.02)',
        borderRadius:'4px 4px 0 0',
        transition:'background .2s ease, border-color .2s ease',
        position:'relative'
      }}>
        {/* Country selector */}
        <button type="button" onClick={()=>setOpen(o=>!o)} style={{
          display:'flex', alignItems:'center', gap:8, padding:'0 14px',
          height:56, background:'transparent', border:'none', borderRight:'1px solid rgba(255,255,255,.12)',
          cursor:'pointer', flexShrink:0, color:'#fff'
        }}>
          <span style={{fontSize:20}}>{country.flag}</span>
          <span style={{fontFamily:'var(--display)', fontWeight:500, fontSize:14, letterSpacing:'.02em'}}>{country.code}</span>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
            style={{transform: open ? 'rotate(180deg)':'rotate(0)', transition:'transform .2s', opacity:.5}}>
            <path d="M6 9l6 6 6-6" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        {/* Phone input */}
        <input
          type="tel"
          value={val}
          onChange={e=>setVal(e.target.value)}
          onFocus={()=>setFocused(true)}
          onBlur={()=>setFocused(false)}
          placeholder="00 00000-0000"
          style={{
            flex:1, height:56, padding:'0 16px',
            background:'transparent', border:'none', outline:'none',
            color:'#fff', fontFamily:'var(--display)', fontWeight:500,
            fontSize:16, letterSpacing:'.02em'
          }}
        />
        {val.length > 0 && (
          <div style={{
            position:'absolute', right:16, top:'50%', transform:'translateY(-50%)',
            width:8, height:8, borderRadius:'50%', background:'var(--green)'
          }}/>
        )}
      </div>
      {/* Dropdown */}
      {open && (
        <div style={{
          position:'absolute', top:90, left:0, width:280, zIndex:100,
          background:'#111', border:'1px solid rgba(255,255,255,.15)',
          borderRadius:12, overflow:'hidden auto', maxHeight:280,
          boxShadow:'0 20px 40px rgba(0,0,0,.7)'
        }}>
          {countries.map((c,i)=>(
            <div key={i} onClick={()=>{ setCountry(c); setOpen(false); }} style={{
              display:'flex', alignItems:'center', gap:12, padding:'13px 18px',
              cursor:'pointer', borderBottom: i<countries.length-1 ? '1px solid rgba(255,255,255,.05)':'none',
              background: country.code===c.code && country.name===c.name ? 'rgba(255,255,255,.08)':'transparent',
              transition:'background .15s'
            }}
            onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,.05)'}
            onMouseLeave={e=>e.currentTarget.style.background= country.code===c.code && country.name===c.name ? 'rgba(255,255,255,.08)':'transparent'}
            >
              <span style={{fontSize:20}}>{c.flag}</span>
              <span style={{fontFamily:'var(--display)', fontWeight:500, fontSize:14, color:'rgba(255,255,255,.8)'}}>{c.name}</span>
              <span style={{fontFamily:'var(--display)', fontWeight:600, fontSize:13, color:'rgba(255,255,255,.4)', marginLeft:'auto'}}>{c.code}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// === VOLUME SELECT (campo especial) ===
function VolumeSelect(){
  const {t} = useLang();
  const [open, setOpen] = useS(false);
  const [selected, setSelected] = useS(null);
  const options = t('vol_opts');
  return (
    <div style={{display:'flex', flexDirection:'column', gap:8, position:'relative'}}>
      <label style={
        {fontFamily:'var(--display)', fontWeight:500, fontSize:11,
        letterSpacing:'.18em', color:'rgba(255,255,255,.7)', transition:'color .2s ease'}
      }>{t('field_vol')}</label>
      <div
        onClick={()=>setOpen(o=>!o)}
        style={{
          width:'100%', height:56, padding:'0 20px',
          background: open ? 'rgba(255,255,255,.06)' : 'rgba(255,255,255,.02)',
          borderBottom: open ? '1.5px solid rgba(255,255,255,.9)' : selected ? '1.5px solid rgba(255,255,255,.4)' : '1.5px solid rgba(255,255,255,.15)',
          borderTop:'none', borderLeft:'none', borderRight:'none',
          color: selected ? '#fff' : 'rgba(255,255,255,.35)',
          fontFamily:'var(--display)', fontWeight:500, fontSize:16, letterSpacing:'.02em',
          borderRadius:'4px 4px 0 0',
          display:'flex', alignItems:'center', justifyContent:'space-between',
          cursor:'pointer', transition:'background .2s ease, border-color .2s ease',
          userSelect:'none'
        }}
      >
        <span>{selected || 'Selecione uma faixa'}</span>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
          style={{transform: open ? 'rotate(180deg)' : 'rotate(0)', transition:'transform .25s ease', opacity:.6}}>
          <path d="M6 9l6 6 6-6" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
      {open && (
        <div style={{
          position:'absolute', top:88, left:0, right:0, zIndex:50,
          background:'#111', border:'1px solid rgba(255,255,255,.15)',
          borderRadius:'0 0 12px 12px', overflow:'hidden',
          boxShadow:'0 20px 40px rgba(0,0,0,.6)'
        }}>
          {options.map((opt,i)=>(
            <div key={i}
              onClick={()=>{ setSelected(opt); setOpen(false); }}
              style={{
                padding:'18px 20px', fontFamily:'var(--display)', fontWeight:500,
                fontSize:15, letterSpacing:'.02em', cursor:'pointer',
                color: selected===opt ? '#fff' : 'rgba(255,255,255,.65)',
                background: selected===opt ? 'rgba(255,255,255,.08)' : 'transparent',
                borderBottom: i<options.length-1 ? '1px solid rgba(255,255,255,.06)' : 'none',
                display:'flex', alignItems:'center', justifyContent:'space-between',
                transition:'background .15s ease, color .15s ease'
              }}
              onMouseEnter={e=>{ if(selected!==opt) e.currentTarget.style.background='rgba(255,255,255,.04)'; }}
              onMouseLeave={e=>{ if(selected!==opt) e.currentTarget.style.background='transparent'; }}
            >
              <span>{opt}</span>
              {selected===opt && (
                <div style={{width:8, height:8, borderRadius:'50%', background:'var(--green)'}}/>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// === FORM FIELD (label + input redesenhado) ===
function FormField({label, placeholder, required, type='text'}){
  const [focused, setFocused] = useS(false);
  const [val, setVal] = useS('');
  const hasVal = val.length > 0;
  return (
    <div style={{display:'flex', flexDirection:'column', gap:8}}>
      <label style={{
        fontFamily:'var(--display)', fontWeight:500, fontSize:11,
        letterSpacing:'.18em', color: focused ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,.7)',
        transition:'color .2s ease'
      }}>{label}{required && <span style={{color:'rgba(255,255,255,.25)', marginLeft:4}}>*</span>}</label>
      <div style={{position:'relative'}}>
        <input
          type={type}
          value={val}
          onChange={e=>setVal(e.target.value)}
          onFocus={()=>setFocused(true)}
          onBlur={()=>setFocused(false)}
          placeholder={placeholder}
          required={required}
          style={{
            width:'100%', height:56, padding:'0 20px',
            background: focused ? 'rgba(255,255,255,.04)' : 'rgba(255,255,255,.02)',
            border:'none',
            borderBottom: focused
              ? '1.5px solid rgba(255,255,255,.9)'
              : hasVal
                ? '1.5px solid rgba(255,255,255,.4)'
                : '1.5px solid rgba(255,255,255,.15)',
            color:'#fff',
            fontFamily:'var(--display)', fontWeight:500, fontSize:16,
            letterSpacing:'.02em',
            outline:'none',
            transition:'background .2s ease, border-color .2s ease',
            borderRadius:'4px 4px 0 0',
          }}
        />
        {hasVal && (
          <div style={{
            position:'absolute', right:16, top:'50%', transform:'translateY(-50%)',
            width:8, height:8, borderRadius:'50%', background:'var(--green)'
          }}/>
        )}
      </div>
    </div>
  );
}

// === CONTACT FORM ===
function ContactSection(){
  const {t} = useLang();
  const [active, setActive] = useS(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" data-screen-label="08 Contact" style={{
      position:'absolute', left:0, top:7973, width:1920, height:1113,
      background:'#fff', color:'#000'
    }}>
      <div style={{position:'absolute', left:175, top:183, width:663, display:'flex', flexDirection:'column', gap:46}}>
        <div className="eyebrow" style={{color:'#000'}}>{t('contact_eyebrow')}</div>
        <h2 className="h2" style={{color:'#000'}}>{t('contact_h2').split('\n').map((l,i)=><React.Fragment key={i}>{l}{i<2&&<br/>}</React.Fragment>)}</h2>
        <p className="body" style={{color:'#000', maxWidth:580, fontSize:22, lineHeight:'36px'}}>{t('contact_body')}</p>
        <div style={{display:'flex', flexDirection:'column', gap:21, marginTop:40}}>
          <div className="pill" style={{background:'rgba(0,0,0,.05)', border:'1px solid rgba(0,0,0,.1)', height:50, padding:'0 19px', display:'inline-flex', alignItems:'center', gap:9, color:'#000', maxWidth:235}}>
            <span className="ui" style={{fontSize:14.9, fontWeight:500, 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:50, padding:'0 19px', display:'inline-flex', alignItems:'center', gap:9, color:'#000', maxWidth:457}}>
            <span className="ui" style={{fontSize:14.9, fontWeight:500, color:'#000'}}>{t('contact_chip2')}</span>
          </div>
        </div>
      </div>

      {/* Black form card */}
      <form onSubmit={onSubmit} style={{
        position:'absolute', left:1050, top:134, width:766, borderRadius:32,
        background:'#000', color:'#fff', padding:'60px 52px', display:'flex', flexDirection:'column', gap:36
      }}>
        <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:12, letterSpacing:'.18em', color:'rgba(255,255,255,.45)', marginBottom:16}}>{t('field_need')}</div>
          <div style={{display:'flex', flexWrap:'wrap', gap:12}}>
            {tags.map((t,i)=>(
              <button type="button" key={i} className={'pill-tag'+(active.has(i)?' active':'')} onClick={()=>toggle(i)}>
                {t}
              </button>
            ))}
          </div>
        </div>
        <div style={{display:'flex', gap:32, alignItems:'center', marginTop:8}}>
          <p style={{flex:1, fontFamily:'var(--serif)', fontSize:15, lineHeight:'26px', color:'rgba(255,255,255,.5)'}}>
            {t('privacy')}
          </p>
          <button type="submit" className="btn-primary" style={{height:59, padding:'0 30px', flexShrink:0}}>
            <span>{t('submit')}</span><span className="arrow">→</span>
          </button>
        </div>
      </form>
    </section>
  );
}

// === FOOTER ===
function Footer(){
  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')},
  ];
  return (
    <footer data-screen-label="09 Footer" style={{
      position:'absolute', left:0, top:9210, width:1920,
      padding:'50px 76px 40px', display:'flex', justifyContent:'space-between'
    }}>
      <div style={{width:435, display:'flex', flexDirection:'column', gap:40}}>
        <ArkanLogo size={1.4}/>
        <p className="body" style={{maxWidth:420, fontSize:22, lineHeight:'42px'}}>{t('footer_tagline')}</p>
      </div>
      {cols.map((c,i)=>(
        <div key={i} style={{width:164, display:'flex', flexDirection:'column', gap:33}}>
          <div className="ui muted" style={{fontFamily:'var(--display)', fontWeight:500, fontSize:16, letterSpacing:'.04em'}}>{c.h}</div>
          <div style={{display:'flex', flexDirection:'column', gap:20}}>
            {c.items.map((it,j)=>(<a key={j} href="#" className="footer-link">{it}</a>))}
          </div>
        </div>
      ))}
    </footer>
  );
}

// === TARJA GROWTH ===
function TarjaGrowth(){
  const [hov, setHov] = useS(false);
  const [top, setTop] = useS(9600);

  useE(()=>{
    const measure = () => {
      const footer = document.querySelector('footer[data-screen-label="09 Footer"]');
      if(footer){
        setTop(Math.round((footer.offsetTop + footer.offsetHeight)));
      }
    };
    measure();
    window.addEventListener('resize', measure);
    setTimeout(measure, 500);
    return ()=>window.removeEventListener('resize', measure);
  },[]);

  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',
        position:'absolute', left:0, top, width:1920, height:64,
        background: hov ? '#1a1a1a' : '#000',
        cursor:'pointer', textDecoration:'none',
        transition:'background .25s ease', gap:14
      }}>
      <span style={{
        fontFamily:'Roboto, sans-serif', fontStyle:'italic', fontWeight:400,
        fontSize:18, lineHeight:'1', color:'rgba(255,255,255,.7)'
      }}>Carely designed by</span>
      <img src="assets/growth-logo.svg" alt="Growth Design" style={{
        height:26, 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>
  );
}

Object.assign(window, {
  Header, Hero, FeaturesSection, HubSection, RolesSection,
  ModulesSection, VolumeSection, TestimonialsSection, ContactSection, Footer, TarjaGrowth
});