/* Cert timeline, Community, Footer */

const Cert = ({ t }) => {
  const ref = uR(null);
  const [step, setStep] = uS(0);
  uE(() => {
    let timer;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        let i = 0;
        timer = setInterval(() => {
          i = (i + 1) % 5;
          setStep(i);
        }, 1500);
      } else if (timer) clearInterval(timer);
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => { obs.disconnect(); if (timer) clearInterval(timer); };
  }, []);

  const steps = [
    { k:'step1', icon: 'video' },
    { k:'step2', icon: 'ai' },
    { k:'step3', icon: 'vote' },
    { k:'step4', icon: 'badge' },
  ];
  const iconFor = (k) => {
    if (k === 'video') return <><circle cx="12" cy="12" r="10"/><path d="M10 9l5 3-5 3V9z"/></>;
    if (k === 'ai') return <><rect x="4" y="6" width="16" height="14" rx="2"/><path d="M9 12l2 2 4-4M9 2v4M15 2v4"/></>;
    if (k === 'vote') return <><path d="M9 11l3 3 7-7"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></>;
    if (k === 'badge') return <><path d="M12 2l2.5 5 5.5.8-4 4 1 5.7L12 14.8 7 17.5l1-5.7-4-4 5.5-.8L12 2z"/></>;
  };

  return (
    <section id="certification" ref={ref}>
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow">{t.cert.eyebrow}</div>
          <h2 className="display">{t.cert.title}</h2>
          <p>{t.cert.sub}</p>
        </div>
        <div className="cert-timeline">
          <div className="cert-track"><i style={{width: `${Math.min(step, 4) / 4 * 100}%`}}></i></div>
          <div className="cert-steps">
            {steps.map((s, i) => (
              <div key={s.k} className={`cert-step ${step > i ? 'active' : ''}`}>
                <div className="node">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                    {iconFor(s.icon)}
                  </svg>
                </div>
                <div className="label-num">STEP {String(i+1).padStart(2,'0')}</div>
                <div className="label-name">{t.cert[s.k].name}</div>
                <div className="label-desc">{t.cert[s.k].desc}</div>
              </div>
            ))}
          </div>
        </div>
        {/* Badge gallery */}
        <div style={{marginTop:80, padding:32, background:'var(--bg-2)', border:'1px solid var(--line-2)', borderRadius:18}}>
          <div style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-4)', letterSpacing:'0.18em'}}>SIX VERIFIED SKILLS</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:24, marginTop:32}} className="badge-row">
            {[
              {n:'Muscle-up', svg:'muscle-up', c:'#10B981'},
              {n:'Front Lever', svg:'front-lever', c:'#F59E0B'},
              {n:'Planche', svg:'planche', c:'#EC4899'},
              {n:'Handstand', svg:'handstand', c:'#8B5CF6'},
              {n:'Human Flag', svg:'human-flag', c:'#F59E0B'},
              {n:'Back Lever', svg:'one-leg-front-lever', c:'#F59E0B'},
            ].map((b,i) => (
              <div key={i} style={{textAlign:'center'}}>
                <div style={{width:80, height:80, margin:'0 auto', borderRadius:'50%', background:'var(--bg-1)', border:`1.5px solid ${b.c}40`, display:'grid', placeItems:'center', color:b.c, position:'relative'}}>
                  <img src={`assets/svg/${b.svg}.svg`} alt={b.n} style={{width:54, height:54, filter:'brightness(0) invert(1)', opacity:0.85, color:b.c}}/>
                  <div style={{position:'absolute', inset:-1, borderRadius:'50%', boxShadow:`0 0 20px ${b.c}30`, pointerEvents:'none'}}></div>
                </div>
                <div style={{fontSize:13, fontWeight:600, marginTop:14}}>{b.n}</div>
                <div style={{fontSize:10, color:'var(--text-5)', marginTop:2, fontFamily:'var(--font-mono)', letterSpacing:'0.05em'}}>VERIFIED</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ COMMUNITY ============ */
const NAMES = [
  ['Lucas Martin','LM','#10B981','Elite'],
  ['Sofia Garcia','SG','#F59E0B','Adv'],
  ['Camille Moreau','CM','#10B981','Int'],
  ['Antoine Leroy','AL','#F59E0B','Adv'],
  ['Maya Chen','MC','#8B5CF6','Adv'],
  ['Diego Reyes','DR','#EF4444','Elite'],
  ['Yara Haddad','YH','#10B981','Int'],
  ['Tariq Bello','TB','#F59E0B','Adv'],
  ['Lena Voss','LV','#10B981','Beg'],
  ['Kai Tanaka','KT','#EF4444','Elite'],
  ['Ines Roca','IR','#10B981','Int'],
  ['Felix Brun','FB','#F59E0B','Adv'],
  ['Nora Aoki','NA','#8B5CF6','Adv'],
  ['Jules Petit','JP','#10B981','Int'],
  ['Sara Dahl','SD','#10B981','Beg'],
  ['Omar Bey','OB','#F59E0B','Adv'],
  ['Riya Singh','RS','#10B981','Int'],
  ['Theo Klein','TK','#EF4444','Elite'],
];
const TIER_COLOR = { Elite:'#EF4444', Adv:'#F59E0B', Int:'#10B981', Beg:'#6B7280' };

const AvatarPill = ({ name, ini, color, tier }) => (
  <div className="av-pill">
    <div className="av-circle" style={{background: color}}>{ini}</div>
    <div className="nm">{name}</div>
    <div className="tier" style={{background: `${TIER_COLOR[tier]}20`, color: TIER_COLOR[tier]}}>{tier.toUpperCase()}</div>
  </div>
);

const Community = ({ t }) => (
  <section id="community">
    <div className="wrap">
      <div className="section-head reveal">
        <div className="eyebrow">{t.community.eyebrow}</div>
        <h2 className="display">{t.community.title}</h2>
        <p>{t.community.sub}</p>
      </div>
      <div className="community-grid">
        <div className="stat-grid">
          {[t.community.stat1, t.community.stat2, t.community.stat3, t.community.stat4].map((s,i)=>(
            <div key={i} className="stat-card reveal" data-delay={i+1}>
              <div className="v">{s.v}<span className="sm">+</span></div>
              <div className="l">{s.l}</div>
              <div className="meta">↗ {s.m}</div>
            </div>
          ))}
        </div>
        <div className="avatar-wall reveal" data-delay="2">
          <h4>{t.community.wall_title}</h4>
          <div className="sub">{t.community.wall_sub}</div>
          <div className="avatar-marquee">
            {[0,1,2].map(r => {
              const slice = NAMES.slice(r*6, r*6+6).concat(NAMES.slice(r*6, r*6+6));
              return (
                <div key={r} style={{overflow:'hidden', maskImage:'linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)'}}>
                  <div className={`marquee-track ${r%2 ? 'reverse' : ''} ${r === 1 ? 'slow' : ''}`}>
                    {slice.concat(slice).map((p,i) => <AvatarPill key={i} name={p[0]} ini={p[1]} color={p[2]} tier={p[3]} />)}
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{marginTop:24, paddingTop:20, borderTop:'1px solid var(--line)', display:'flex', justifyContent:'space-between', fontSize:12, color:'var(--text-4)'}}>
            <div style={{display:'flex', alignItems:'center', gap:8}}>
              <span style={{width:8, height:8, borderRadius:'50%', background:'var(--emerald)', boxShadow:'0 0 8px var(--emerald)', animation:'pulse 1.4s infinite'}}></span>
              <span className="mono" style={{letterSpacing:'0.1em', fontSize:11}}>+12 ATHLETES JOINED · LAST HOUR</span>
            </div>
            <div className="mono" style={{fontSize:11, letterSpacing:'0.08em'}}>↗ LIVE</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ============ FOOTER ============ */
const SocialIcon = ({ k }) => {
  const ic = {
    ig: <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.8" fill="currentColor"/></>,
    x: <path d="M4 4l16 16M20 4L4 20"/>,
    yt: <><rect x="3" y="6" width="18" height="12" rx="3"/><path d="M10 10l5 2-5 2v-4z" fill="currentColor"/></>,
    tt: <path d="M16 4c0 3 2 5 5 5v3c-2 0-4-.6-5-1.5V16a6 6 0 1 1-6-6v3a3 3 0 1 0 3 3V4h3z"/>,
    gh: <path d="M12 2a10 10 0 0 0-3 19v-3c-3 .5-4-1-4-1-.5-1-1-2-1-2-1-1 0-1 0-1 1 0 2 1 2 1 1 2 3 2 4 1 0-1 .5-2 1-2-2 0-5-1-5-5 0-1 .5-2 1-3 0 0 1-.5 3 1 2-.5 4-.5 6 0 2-1.5 3-1 3-1 .5 1 1 2 1 3 0 4-3 5-5 5 .5.5 1 1.5 1 3v3a10 10 0 0 0-3-19z"/>,
  };
  return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{ic[k]}</svg>;
};

const Footer = ({ t, lang, setLang }) => (
  <footer>
    <div className="wrap">
      <div className="footer-grid">
        <div className="footer-brand footer-col">
          <div className="brand">
            <BrandMark />
            <span>Onbars</span>
          </div>
          <p>{t.footer.tag}</p>
          <div className="socials">
            <a href="#" aria-label="Instagram"><SocialIcon k="ig"/></a>
            <a href="#" aria-label="X / Twitter"><SocialIcon k="x"/></a>
            <a href="#" aria-label="YouTube"><SocialIcon k="yt"/></a>
            <a href="#" aria-label="TikTok"><SocialIcon k="tt"/></a>
            <a href="#" aria-label="GitHub"><SocialIcon k="gh"/></a>
          </div>
        </div>
        <div className="footer-col">
          <h5>{t.footer.product}</h5>
          <ul>{t.footer.prod_links.map((l,i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
        </div>
        <div className="footer-col">
          <h5>{t.footer.company}</h5>
          <ul>{t.footer.comp_links.map((l,i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
        </div>
        <div className="footer-col">
          <h5>{t.footer.resources}</h5>
          <ul>{t.footer.res_links.map((l,i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
        </div>
        <div className="footer-col newsletter-col">
          <h5>{t.footer.newsletter}</h5>
          <p style={{color:'var(--text-4)', fontSize:13, marginBottom:14}}>{t.footer.news_desc}</p>
          <div className="newsletter">
            <form onSubmit={(e)=>{e.preventDefault(); const i = e.target.querySelector('input'); if (i.value) { i.value=''; alert('Subscribed!'); }}}>
              <input type="email" placeholder={t.footer.newsletter_ph} aria-label="Email"/>
              <button type="submit">{t.footer.subscribe}</button>
            </form>
            <div className="lang-toggle" style={{alignSelf:'flex-start'}}>
              {['en','fr','es'].map(l => (
                <button key={l} className={lang===l ? 'active' : ''} onClick={()=>setLang(l)}>{l.toUpperCase()}</button>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div className="foot-base">
        <div>{t.footer.legal}</div>
        <div style={{display:'flex', gap:20}}>
          <a href="#" style={{color:'var(--text-4)'}}>Privacy</a>
          <a href="#" style={{color:'var(--text-4)'}}>Terms</a>
          <a href="#" style={{color:'var(--text-4)'}}>Cookies</a>
        </div>
      </div>
    </div>
  </footer>
);

const BrandMark = () => (
  <svg viewBox="0 0 28 28" width="28" height="28" fill="none">
    <rect x="3" y="9" width="3" height="10" rx="1" fill="#10B981"/>
    <rect x="22" y="9" width="3" height="10" rx="1" fill="#10B981"/>
    <rect x="6" y="13" width="16" height="2" rx="1" fill="#10B981"/>
    <circle cx="14" cy="14" r="13" stroke="#10B981" strokeOpacity="0.3" strokeWidth="1"/>
  </svg>
);

window.Cert = Cert;
window.Community = Community;
window.Footer = Footer;
window.BrandMark = BrandMark;