// Reusable components for ARKAN landing
const { useState, useEffect, useRef, useMemo } = React;

// Logo: official Arkan SVG wordmark
function ArkanLogo({size=1}){
  return (
    <img src="assets/logo-arkan.svg" alt="ARKAN First Capital"
         style={{width: 165 * size, height: 56 * size, display:'block'}} />
  );
}

// Currency widget (top-left of header)
function CurrencyChip(){
  const [pair, setPair] = useState('EUR/BRL');
  const data = {
    'EUR/BRL': {value:'5,5880', delta:'-0,24%', up:false},
    'USD/BRL': {value:'5,2140', delta:'-0,09%', up:false},
    'CNY/BRL': {value:'0,7250', delta:'+0,31%', up:true},
    'GBP/BRL': {value:'6,5430', delta:'+0,12%', up:true},
  };
  const pairs = Object.keys(data);
  useEffect(()=>{
    const id = setInterval(()=>{
      setPair(p => pairs[(pairs.indexOf(p)+1) % pairs.length]);
    }, 3500);
    return ()=> clearInterval(id);
  },[]);
  const d = data[pair];
  return (
    <div className="pill" style={{height:50, padding:'0 31px', display:'inline-flex', alignItems:'center', gap:21}}>
      <span className="ui" style={{fontSize:14.9, fontWeight:500}}>{pair}</span>
      <span className="ui" style={{fontSize:14.9, fontWeight:500, opacity:.85}}>{d.value}</span>
      <span className="ui" style={{fontSize:14.9, fontWeight:500, color: d.up ? 'var(--green)' : '#ff5a5a'}}>
        {d.up ? '▲' : '▼'} {d.delta}
      </span>
    </div>
  );
}

function LangChip(){
  const {lang} = useLang();
  const langs = [
    {key:'pt', label:'PT-BR'},
    {key:'zh', label:'CH'},
    {key:'en', label:'EN'},
  ];
  return (
    <div className="pill" style={{height:50, padding:'0 31px', display:'inline-flex', alignItems:'center', gap:21}}>
      {langs.map(l => (
        <button key={l.key} onClick={()=>setLang(l.key)}
          className="ui"
          style={{fontSize:14.9, fontWeight:500, color: lang===l.key ? '#fff' : 'rgba(255,255,255,.55)', transition:'color .15s'}}>
          {l.label}
        </button>
      ))}
    </div>
  );
}

// CTA button reused
function CTA({label="SEJA MEMBRO", onClick}){
  const handleClick = onClick || (() => {
    const stage = document.getElementById('stage');
    if(!stage) return;
    const scale = parseFloat(stage.style.transform.replace('scale(','')) || 1;
    window.scrollTo({top: 8023 * scale, behavior:'smooth'});
  });
  return (
    <button className="btn-primary" onClick={handleClick}>
      <span>{label}</span>
      <span className="arrow">→</span>
    </button>
  );
}

// Numbered feature card (01–04)
function FeatureCard({num, title, body}){
  return (
    <div className="feature-card" style={{
      flex:1, display:'flex', flexDirection:'column', gap:33, paddingTop: num===2||num===4 ? 0 : 19
    }}>
      <div className="num-chip">{String(num).padStart(2,'0')}</div>
      <h3 className="h4" style={{maxWidth: 340}}>{title}</h3>
      <p className="body" style={{maxWidth: 360}}>{body}</p>
    </div>
  );
}

// Vertical separator between feature cards
function VSep({h=499}){
  return <div style={{width:1, height:h, background:'rgba(255,255,255,.18)'}} />;
}

// Module card (POS, Liquidez, Split, Investimento, Links, Câmbio)
function ModuleCard({title, w, h, children, style, onMouseEnter, onMouseLeave}){
  return (
    <div className="module-card glass" style={{
      width: w, height: h, borderRadius: 14.84, position:'relative', overflow:'hidden', ...style
    }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      <div style={{position:'absolute', left:32.9, top:54, fontFamily:'var(--display)', fontWeight:700, fontSize:30, lineHeight:1.14}}>
        {title}
      </div>
      {children}
    </div>
  );
}

// Inner sub-card (white-on-glass)
function SubCard({left=33, top=137, width, height, children, style}){
  return (
    <div className="glass-strong" style={{
      position:'absolute', left, top, width, height, borderRadius:17, overflow:'hidden', ...style
    }}>
      {children}
    </div>
  );
}

// Bank card visual (Front)
function BankCardFront({style}){
  return (
    <div className="bank-card" style={style}>
      {/* Mastercard */}
      <div style={{position:'absolute', left:546, top:42}}>
        <div className="mastercard"><div className="c1"/><div className="c2"/></div>
      </div>
      {/* NFC */}
      <div className="nfc" style={{position:'absolute', left:223, top:175}} />
      {/* Chip */}
      <div className="chip-emboss" style={{position:'absolute', left:96, top:138}} />
      {/* ARK monogram */}
      <div style={{
        position:'absolute', left:54, top:300, color:'#fff', fontFamily:'var(--display)',
        fontWeight:800, fontSize:120, letterSpacing:'-0.02em', lineHeight:1, opacity:.95
      }}>
        <span style={{display:'inline-block', position:'relative'}}>ARK
          <svg width="56" height="56" style={{position:'absolute', right:-66, top:14}} viewBox="0 0 56 56">
            <polygon points="28,4 52,28 28,52 4,28" fill="none" stroke="#fff" strokeWidth="3"/>
          </svg>
        </span>
      </div>
      {/* BUSINESS label */}
      <div style={{position:'absolute', left:536, top:392, fontFamily:'var(--display)', fontWeight:500, fontSize:14.8, letterSpacing:'.06em'}}>BUSINESS</div>
    </div>
  );
}

// Bank card back
function BankCardBack({style}){
  return (
    <div className="bank-card" style={style}>
      {/* Magnetic stripe */}
      <div style={{position:'absolute', left:0, top:42, width:'100%', height:62, background:'#0b0c0e'}} />
      {/* Name + number */}
      <div style={{position:'absolute', left:50, top:147, color:'#fff'}}>
        <div style={{fontFamily:'var(--display)', fontWeight:600, fontSize:20.7, letterSpacing:'.17em'}}>RENAN RAISS</div>
        <div style={{marginTop:14, fontFamily:'var(--display)', fontWeight:700, fontSize:32.6, letterSpacing:'.04em'}}>1334 8475 9049 1827</div>
      </div>
      {/* Validity / CVC */}
      <div style={{position:'absolute', left:50, top:240, color:'#fff', display:'flex', gap:60}}>
        <div>
          <div style={{fontFamily:'var(--display)', fontWeight:500, fontSize:11, letterSpacing:'.18em', opacity:.7}}>VALIDADE</div>
          <div style={{marginTop:4, fontFamily:'var(--display)', fontWeight:700, fontSize:22, letterSpacing:'.04em'}}>03/33</div>
        </div>
        <div>
          <div style={{fontFamily:'var(--display)', fontWeight:500, fontSize:11, letterSpacing:'.18em', opacity:.7}}>CVC</div>
          <div style={{marginTop:4, fontFamily:'var(--display)', fontWeight:700, fontSize:22, letterSpacing:'.04em'}}>222</div>
        </div>
      </div>
      {/* Help phones */}
      <div style={{position:'absolute', left:50, top:330, color:'#fff'}}>
        <div style={{fontFamily:'var(--display)', fontWeight:500, fontSize:11, letterSpacing:'.18em', opacity:.7}}>BRASIL</div>
        <div style={{marginTop:2, fontFamily:'var(--display)', fontWeight:600, fontSize:16}}>0800 000 0000</div>
        <div style={{marginTop:14, fontFamily:'var(--display)', fontWeight:500, fontSize:11, letterSpacing:'.18em', opacity:.7}}>FORA DO BRASIL</div>
        <div style={{marginTop:2, fontFamily:'var(--display)', fontWeight:600, fontSize:16}}>000 000 0000 0000</div>
      </div>
      {/* Mastercard small */}
      <div style={{position:'absolute', right:48, top:165}}>
        <div className="mastercard" style={{transform:'scale(.8)'}}><div className="c1"/><div className="c2"/></div>
      </div>
      {/* ARK small mark */}
      <div style={{position:'absolute', right:48, top:340, fontFamily:'var(--display)', fontWeight:800, fontSize:36, letterSpacing:'-.02em'}}>ARK</div>
    </div>
  );
}

// Role card (BUSINESS / CEO / CFO / COO / CMO)
function RoleCard({label, body}){
  return (
    <div className="role-card" style={{
      width:427, height:273, borderRadius:25, border:'1px solid rgba(255,255,255,.28)',
      padding:'60px 41px', display:'flex', flexDirection:'column', gap:30,
      background:'rgba(0,0,0,.55)', backdropFilter:'blur(8px)',
      boxShadow:'0 30px 60px rgba(0,0,0,.4)'
    }}>
      <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:50, letterSpacing:'-0.02em', lineHeight:1.05}}>{label}</div>
      <div style={{fontFamily:'var(--serif)', fontSize:22, lineHeight:'33px'}}>{body}</div>
    </div>
  );
}

// Pill tag list (active/inactive)
function PillTags({items, multi=false, defaultActive=[]}){
  const [active, setActive] = useState(new Set(defaultActive));
  const toggle = (i) => {
    setActive(prev => {
      const n = new Set(prev);
      if(multi){ n.has(i) ? n.delete(i) : n.add(i); }
      else { n.clear(); n.add(i); }
      return n;
    });
  };
  return (
    <>
      {items.map((t,i)=>(
        <button key={i} className={'pill-tag' + (active.has(i) ? ' active':'')} onClick={()=>toggle(i)}>
          {t}
        </button>
      ))}
    </>
  );
}

// Marquee ticker for FX
function FXTicker(){
  const items = [
    {p:'CNY/BRL', v:'0,7250', d:'+0,31%', up:true},
    {p:'GBP/BRL', v:'6,5430', d:'+0,02%', up:true},
    {p:'USD/BRL', v:'5,2140', d:'-0,09%', up:false},
    {p:'JPY/BRL', v:'0,0345', d:'+0,16%', up:true},
    {p:'EUR/BRL', v:'5,5880', d:'-0,24%', up:false},
    {p:'CHF/BRL', v:'5,9210', d:'+0,07%', up:true},
    {p:'BTC/USD', v:'72.430', d:'+1,24%', up:true},
    {p:'USDT/BRL', v:'5,1980', d:'-0,03%', up:false},
  ];
  const Row = () => (
    <span className="ticker-track">
      {[...items, ...items].map((it,i)=>(
        <span className="ticker-item" key={i}>
          <span style={{opacity:.85}}>{it.p}</span>
          <span>{it.v}</span>
          <span style={{color: it.up ? 'var(--green)':'#ff7676'}}>{it.up?'▲':'▼'} {it.d}</span>
          <span className="sep" />
        </span>
      ))}
    </span>
  );
  return (
    <div className="ticker">
      <Row/>
    </div>
  );
}

// Investment chart (green growth)
function GrowthChart(){
  return (
    <svg viewBox="0 0 1462 121" preserveAspectRatio="none" style={{width:'100%', height:121}}>
      <defs>
        <linearGradient id="grnFill" 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="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 L 1462 121 L 0 121 Z" fill="url(#grnFill)"/>
      <path d="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" fill="none" stroke="#088e24" strokeWidth="3" strokeLinejoin="round"/>
    </svg>
  );
}

// Account icon
function AccountIcon({size=40}){
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="11" fill="rgba(255,255,255,.06)" stroke="rgba(255,255,255,.4)"/>
      <circle cx="12" cy="9.5" r="3.2" fill="#fff"/>
      <path d="M5 19.5c1.4-3 4-4.5 7-4.5s5.6 1.5 7 4.5" stroke="#fff" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

Object.assign(window, {
  ArkanLogo, CurrencyChip, LangChip, CTA, FeatureCard, VSep,
  ModuleCard, SubCard, BankCardFront, BankCardBack, RoleCard,
  PillTags, FXTicker, GrowthChart, AccountIcon
});