const { useContext } = React;

// ============================================================
// EDIT STATS HERE — verified against each platform Apr 2026.
// Kick/TikTok/Instagram confirmed via streamscharts + public
// profiles. YouTube/Facebook can't be scraped — replace with
// the exact count anytime you want.
// ============================================================
const STATS = {
  kick:      '475K',
  youtube:   '250K',
  tiktok:    '1.6M',
  instagram: '312K',
  facebook:  '1.7M',
};

// Links — keep in sync across nav, stats, platforms, marquee
const LINKS = {
  kick:      'https://kick.com/3mr',
  youtube:   'https://www.youtube.com/@3mrdiab',
  tiktok:    'https://www.tiktok.com/@3mrrdiab',
  instagram: 'https://www.instagram.com/3mrrdiab',
  facebook:  'https://www.facebook.com/3mrdiab0',
  messenger: 'https://www.facebook.com/messages/t/7057359404302375/',
  whatsapp:  'https://www.whatsapp.com/channel/0029VaDdRPP9sBI0ZjAQEA31',
  donate:    'https://botrix.live/k/3mr/tip',
};

// Section header — distinctive per section (cascading reveal)
function SectionHeader({ icon, label, number, kicker }) {
  return (
    <div className="sec-head">
      <div className="sec-head__inner">
        <div className="sec-head__badge reveal reveal--zoom">
          <span className="sec-head__ic">{icon}</span>
        </div>
        <div className="sec-head__text">
          <div className="sec-head__num mono reveal reveal--fade" style={{ transitionDelay: '.12s' }}>— {number} —</div>
          <div className="sec-head__label reveal" style={{ transitionDelay: '.22s' }}>{label}</div>
          {kicker && <div className="sec-head__kicker mono small muted reveal reveal--fade" style={{ transitionDelay: '.34s' }}>{kicker}</div>}
        </div>
      </div>
      <div className="sec-head__line reveal reveal--right" style={{ transitionDelay: '.4s' }}></div>
    </div>
  );
}

// ============ HERO ============
function FactReel() {
  const { t } = useContext(LangContext);
  const facts = t.facts || [];
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused || facts.length < 2) return;
    const id = setInterval(() => setIdx(i => (i + 1) % facts.length), 2800);
    return () => clearInterval(id);
  }, [paused, facts.length]);

  if (!facts.length) return null;
  const current = facts[idx];
  const IconC = Icon[current.ic] || Icon.Bolt;

  return (
    <div
      className="fact-reel"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onMouseMove={(e) => {
        const r = e.currentTarget.getBoundingClientRect();
        e.currentTarget.style.setProperty('--mx', ((e.clientX - r.left) / r.width) * 100 + '%');
        e.currentTarget.style.setProperty('--my', ((e.clientY - r.top) / r.height) * 100 + '%');
      }}
    >
      {/* Animated background accents (same vibe as the #1 banner) */}
      <span className="fact-reel__bg-grid" aria-hidden="true"></span>
      <span className="fact-reel__bg-glow" aria-hidden="true"></span>
      <span className="fact-reel__bg-scan" aria-hidden="true"></span>

      <div className="fact-reel__head">
        <span className="fact-reel__ping"></span>
        <span className="fact-reel__headlabel mono small">{t.factsLabel}</span>
        <div className="fact-reel__dots">
          {facts.map((_, i) => (
            <button
              key={i}
              className={`fact-reel__dot ${i===idx?'is-active':''}`}
              onClick={() => setIdx(i)}
              data-hover
              aria-label={`Fact ${i+1}`}
            />
          ))}
        </div>
      </div>
      <div className="fact-reel__stage">
        <div key={idx} className="fact-reel__item">
          <div className="fact-reel__ic"><IconC/></div>
          <div className="fact-reel__body">
            <div className="fact-reel__label mono small">{current.label}</div>
            <div className="fact-reel__value">{current.value}</div>
          </div>
        </div>
      </div>

      {/* Corner frame accents */}
      <span className="fact-reel__corner tl" aria-hidden="true"></span>
      <span className="fact-reel__corner tr" aria-hidden="true"></span>
      <span className="fact-reel__corner bl" aria-hidden="true"></span>
      <span className="fact-reel__corner br" aria-hidden="true"></span>
    </div>
  );
}

function Hero({ isLive, livePlatform }) {
  const { t } = useContext(LangContext);
  // Route the live badge to whichever platform is actually on air right now.
  // Kick is the main/daily stream, so we keep the OFF state copy tuned for Kick.
  const liveOnTikTok = isLive && livePlatform === 'tiktok';
  const heroLiveUrl = liveOnTikTok ? LINKS.tiktok : LINKS.kick;
  const heroLiveLabel = isLive
    ? (liveOnTikTok ? t.liveOnTiktok : t.liveOn)
    : t.offline;
  return (
    <section className="hero">
      <div className="hero__grid"></div>
      <div className="hero__glow"></div>
      <div className="hero__glow hero__glow--2"></div>

      <div className="hero__inner">
        <div className="hero__titleblock reveal">
          <div className="mono tag red hero__tag">{t.roleTag}</div>
          <h1 className="hero__title">
            <span className="hero__title-text glitch" data-text="3MR">3MR</span>
            <span className="hero__subtitle">{t.roleSub}</span>
          </h1>
        </div>

        <div className="hero__content">
          <div className="hero__left reveal reveal--3d">
            <p className="hero__desc">{t.heroDesc}</p>
            <div className="hero__cta">
              <a href="#platforms" className="btn btn--primary" data-hover onMouseEnter={() => window.__playHover?.()} onClick={() => window.__playClick?.()}>
                <Icon.Bolt/><span>{t.followAll}</span>
              </a>
              <a href={LINKS.donate} target="_blank" rel="noopener noreferrer" className="btn btn--ghost" data-hover onMouseEnter={() => window.__playHover?.()}>
                <Icon.Donate/><span>{t.support}</span>
              </a>
            </div>
            <FactReel/>
          </div>
          <div className="hero__right reveal reveal--3d">
            <div className="hero-photo">
              <div className="hero-photo__glow"></div>
              <div className="hero-photo__frame">
                <img src="1.jpg" alt="3MR"/>
                <div className="hero-photo__scan"></div>
                <div className="hero-photo__corner tl"></div>
                <div className="hero-photo__corner tr"></div>
                <div className="hero-photo__corner bl"></div>
                <div className="hero-photo__corner br"></div>
              </div>
              <a href={heroLiveUrl} target="_blank" rel="noopener noreferrer" className={`hero-live-badge ${isLive?'is-live':'is-off'} ${liveOnTikTok?'is-tiktok':''}`} data-hover onMouseEnter={()=>window.__playHover?.()}>
                <span className="live-dot"></span>
                <span className="mono">{heroLiveLabel}</span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <div className="hero__ticker">
        <div className="ticker-track">
          {Array.from({length: 4}).map((_, i) => (
            <div key={i} className="ticker-group">
              <span>YOUTUBE CREATOR</span><span className="ticker-sep">◆</span>
              <span>KICK STREAMER</span><span className="ticker-sep">◆</span>
              <span>CONTENT CREATOR</span><span className="ticker-sep">◆</span>
              <span>EGYPT</span><span className="ticker-sep">◆</span>
              <span>NO SLEEP MODE</span><span className="ticker-sep">◆</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ STATS ============
function Stats() {
  const { t } = useContext(LangContext);
  const stats = [
    { value: STATS.kick,      label: t.followers,   platform: 'Kick',      icon: 'Kick',      color: '#53fc18', url: LINKS.kick },
    { value: STATS.youtube,   label: t.subscribers, platform: 'YouTube',   icon: 'YouTube',   color: '#ff0033', url: LINKS.youtube },
    { value: STATS.tiktok,    label: t.followers,   platform: 'TikTok',    icon: 'TikTok',    color: '#ff3e6a', url: LINKS.tiktok },
    { value: STATS.instagram, label: t.followers,   platform: 'Instagram', icon: 'Instagram', color: '#e1306c', url: LINKS.instagram },
    { value: STATS.facebook,  label: t.followers,   platform: 'Facebook',  icon: 'Facebook',  color: '#1877f2', url: LINKS.facebook },
  ];
  return (
    <section className="stats" id="stats">
      <SectionHeader icon={<Icon.Bolt/>} label={t.reachStats} number="01"/>
      <div className="stats__grid">
        {stats.map((s, i) => {
          const IconC = Icon[s.icon];
          return (
            <a href={s.url} target="_blank" rel="noopener noreferrer"
               className={`stat reveal ${i % 2 === 0 ? 'reveal--zoom' : 'reveal--3d'}`} key={i}
               style={{'--platcol': s.color, transitionDelay: `${i*0.1}s`}}
               data-hover onMouseEnter={()=>window.__playHover?.()}>
              <div className="stat__top">
                <div className="stat__icon"><IconC/></div>
                <div className="stat__platform mono">{s.platform}</div>
              </div>
              <div className="stat__value">{s.value}</div>
              <div className="stat__label mono">{s.label}</div>
              <div className="stat__glow"></div>
            </a>
          );
        })}
      </div>
    </section>
  );
}

// ============ RANK PROOF CARD ============
function RankProof() {
  const { lang } = useContext(LangContext);
  const title1 = lang === 'ar' ? 'الأول عالميًا على' : '#1 WORLD ON';
  const title2 = lang === 'ar' ? 'KICK' : 'KICK';
  const subtitle = lang === 'ar' ? 'الأكثر مشاهدة على الإطلاق' : 'MOST WATCHED · ALL TIME';
  const kicker = lang === 'ar' ? 'ترتيب مثبت · STREAMSCHARTS' : 'VERIFIED RANK · STREAMSCHARTS';
  const cta = lang === 'ar' ? 'شوف الترتيب' : 'VIEW PROOF';
  return (
    <section className="rank-proof reveal reveal--zoom">
      <a href="https://streamscharts.com/channels/3mr?platform=kick"
         target="_blank" rel="noopener noreferrer"
         className="rank-proof__card" data-hover data-tilt-strong
         onMouseEnter={()=>window.__playHover?.()}>
        {/* Animated background accents */}
        <span className="rank-proof__bg-grid" aria-hidden="true"></span>
        <span className="rank-proof__bg-glow" aria-hidden="true"></span>
        <span className="rank-proof__bg-scan" aria-hidden="true"></span>

        {/* Left: big trophy badge */}
        <div className="rank-proof__badge">
          <div className="rank-proof__badge-ring"></div>
          <div className="rank-proof__badge-inner">
            <span className="rank-proof__trophy"><Icon.Trophy/></span>
            <span className="rank-proof__badge-num">#1</span>
          </div>
          <img src="assets/rank-proof.png" alt="" className="rank-proof__thumb"
               onError={(e)=>{e.currentTarget.style.display='none';}}/>
        </div>

        {/* Center: text */}
        <div className="rank-proof__body">
          <span className="rank-proof__kicker">
            <span className="rank-proof__kicker-dot"></span>
            {kicker}
          </span>
          <h3 className="rank-proof__title">
            <span className="rank-proof__title-1">{title1}</span>
            <span className="rank-proof__title-2 red">{title2}</span>
          </h3>
          <p className="rank-proof__sub">{subtitle}</p>
        </div>

        {/* Right: CTA */}
        <div className="rank-proof__cta">
          <span className="rank-proof__cta-txt">{cta}</span>
          <span className="rank-proof__cta-arrow"><Icon.Arrow/></span>
        </div>

        {/* Corner frame accents */}
        <span className="rank-proof__corner tl"></span>
        <span className="rank-proof__corner tr"></span>
        <span className="rank-proof__corner bl"></span>
        <span className="rank-proof__corner br"></span>
      </a>
    </section>
  );
}

// ============ BIO ============
// Split a string into per-char spans (for H2 reveal) — handles ?, space, RTL.
// Arabic text is split word-by-word instead of char-by-char so letter shaping
// (initial/medial/final/isolated forms) isn't broken by inline-block wrappers.
// Pass dir="ltr" to force LTR layout for Latin tokens (e.g. "3MR") inside an
// RTL context, otherwise chars render right-to-left and read reversed.
function CharReveal({ text, baseDelay = 0, className = '', dir }) {
  const isArabic = /[\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
  if (isArabic) {
    const parts = text.split(/(\s+)/);
    return (
      <span className={`h2--chars reveal ${className}`} dir={dir}>
        {parts.map((p, i) => (
          /^\s+$/.test(p)
            ? <span key={i} className="h2-char h2-char--space"> </span>
            : <span key={i} className="h2-char" style={{ transitionDelay: `${baseDelay + i * 0.08}s` }}>{p}</span>
        ))}
      </span>
    );
  }
  const chars = Array.from(text);
  return (
    <span className={`h2--chars reveal ${className}`} dir={dir}>
      {chars.map((c, i) => (
        c === ' '
          ? <span key={i} className="h2-char h2-char--space"> </span>
          : <span key={i} className="h2-char" style={{ transitionDelay: `${baseDelay + i * 0.04}s` }}>{c}</span>
      ))}
    </span>
  );
}
// Split a paragraph into per-word spans
function WordReveal({ text, className = '' }) {
  const parts = text.split(/(\s+)/);
  return (
    <span className={`word-reveal reveal ${className}`}>
      {parts.map((p, i) => (
        /^\s+$/.test(p)
          ? <span key={i} className="wr wr--space"> </span>
          : <span key={i} className="wr" style={{ transitionDelay: `${i * 0.04}s` }}>{p}</span>
      ))}
    </span>
  );
}

// Animated number counter that fires when scrolled into view
function Counter({ end, prefix = '', suffix = '', label, decimals = 0, duration = 1600 }) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started) {
          started = true;
          const t0 = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - t0) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(eased * end);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.35 });
    io.observe(el);
    return () => io.disconnect();
  }, [end, duration]);
  const display = decimals > 0 ? val.toFixed(decimals) : Math.floor(val);
  return (
    <div className="bio__counter reveal reveal--zoom" ref={ref}>
      <div className="bio__counter-num">
        {prefix && <span className="bio__counter-prefix">{prefix}</span>}
        <span className="bio__counter-digit">{display}</span>
        {suffix && <span className="bio__counter-suffix">{suffix}</span>}
      </div>
      <div className="bio__counter-lbl">{label}</div>
    </div>
  );
}

function Bio() {
  const { t } = useContext(LangContext);
  const idRows = [
    { label: t.name,        value: '3MR',            ic: 'Sparkles' },
    { label: t.idFullName,  value: t.idFullNameVal,  ic: 'User' },
    { label: t.location,    value: t.locVal,         ic: 'Pin' },
    { label: t.role,        value: t.roleVal,        ic: 'Kick' },
    { label: t.idGames,     value: t.idGamesVal,     ic: 'Gamepad' },
    { label: t.idRank,      value: t.idRankVal,      ic: 'Trophy' },
    { label: t.idSince,     value: t.idSinceVal,     ic: 'Clock' },
    { label: t.status,      value: t.statusVal,      ic: 'Calendar' },
    { label: t.idReach,     value: t.idReachVal,     ic: 'Users' },
    { label: t.idLang,      value: t.idLangVal,      ic: 'Globe' },
  ];
  return (
    <section className="bio" id="bio">
      <SectionHeader icon={<Icon.Sparkles/>} label={t.aboutTag} number="02"/>
      <div className="bio__inner">
        <div className="bio__left reveal reveal--left">
          <h2 className="h2">
            <CharReveal text={t.whoIs + ' '} />
            <span className="red"><CharReveal text="3MR" dir="ltr" baseDelay={(t.whoIs.length + 1) * 0.04} /></span>
            <CharReveal text={t.q} baseDelay={(t.whoIs.length + 4) * 0.04} />
          </h2>
          <p className="bio__lead"><WordReveal text={t.bioLead}/></p>
          <div className="bio__chips">
            {t.chips.map((c, i) => (
              <span key={c} className="chip mono reveal reveal--zoom" style={{ transitionDelay: `${0.2 + i * 0.06}s` }}>{c}</span>
            ))}
          </div>

          {/* Signature pull-quote */}
          <blockquote className="bio__quote reveal reveal--fade" data-hover data-tilt>
            <span className="bio__quote-mark" aria-hidden="true">&ldquo;</span>
            <p className="bio__quote-text">
              {t.quoteText} <span className="red">{t.quoteAccent}</span>
            </p>
            <footer className="bio__quote-by mono">{t.quoteBy}</footer>
            <span className="bio__quote-corner tl"></span>
            <span className="bio__quote-corner br"></span>
          </blockquote>

          {/* Animated counters strip */}
          <div className="bio__counters">
            <Counter end={6}   suffix="+" label={t.ctrYears}/>
            <Counter end={4.3} decimals={1} suffix="M" label={t.ctrFans}/>
            <Counter end={1}   prefix="#" label={t.ctrKick}/>
            <Counter end={24}  suffix="+" label={t.ctrStreams}/>
          </div>

          {/* Specialties tile grid */}
          <div className="bio__specs reveal reveal--fade">
            <div className="bio__specs-head">
              <span className="bio__specs-bar"></span>
              <span className="bio__specs-title tag">{t.specialtiesTag}</span>
            </div>
            <div className="bio__specs-grid">
              {t.specialties.map((s, i) => {
                const IC = Icon[s.ic] || Icon.Sparkles;
                return (
                  <div className="bio__spec reveal reveal--zoom" key={i} style={{ transitionDelay: `${i * 0.08}s` }} data-hover data-tilt>
                    <span className="bio__spec-ic"><IC/></span>
                    <span className="bio__spec-lbl">{s.label}</span>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Career timeline */}
          <div className="bio__timeline-wrap reveal reveal--fade">
            <div className="bio__specs-head">
              <span className="bio__specs-bar"></span>
              <span className="bio__specs-title tag">{t.timelineTitle}</span>
            </div>
            <p className="bio__timeline-lead muted">{t.timelineLead}</p>
            <ol className="bio__timeline">
              {t.timeline.map((m, i) => (
                <li className="bio__timeline-item reveal reveal--left" key={i} style={{ transitionDelay: `${0.15 + i * 0.14}s` }}>
                  <span className="bio__timeline-dot"></span>
                  <span className="bio__timeline-year">{m.year}</span>
                  <span className="bio__timeline-txt">{m.text}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
        <div className="bio__right reveal reveal--right">
          <div className="bio__card">
            <div className="bio__card-img" style={{backgroundImage: 'url(3mr2.jpg)'}}>
              <div className="bio__card-overlay">
                <span className="bio__card-badge">
                  <span className="live-dot"></span>
                  <span className="mono">{t.idRankVal}</span>
                </span>
              </div>
            </div>
            <div className="bio__card-meta">
              <div className="bio__card-head">
                <span className="mono small muted">{t.idCard}</span>
              </div>
              <div className="bio__id">
                {idRows.map((r, i) => {
                  const IC = Icon[r.ic] || Icon.Sparkles;
                  return (
                    <div className="bio__id-row" key={i}>
                      <span className="bio__id-ic"><IC/></span>
                      <span className="bio__id-text">
                        <span className="bio__id-label mono small">{r.label}</span>
                        <b className="bio__id-val">{r.value}</b>
                      </span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ PLATFORMS ============
const PLATFORMS = [
  { key: 'kick',      name: 'KICK',         labelKey: 'watchLive',   handle: '/3mr',           icon: 'Kick',      url: LINKS.kick,      color: '#53fc18' },
  { key: 'youtube',   name: 'YOUTUBE',      labelKey: 'subscribe',   handle: '@3mrdiab',       icon: 'YouTube',   url: LINKS.youtube,   color: '#ff0033' },
  { key: 'tiktok',    name: 'TIKTOK',       labelKey: 'follow',      handle: '@3mrrdiab',      icon: 'TikTok',    url: LINKS.tiktok,    color: '#ff3e6a' },
  { key: 'instagram', name: 'INSTAGRAM',    labelKey: 'follow',      handle: '@3mrrdiab',      icon: 'Instagram', url: LINKS.instagram, color: '#e1306c' },
  { key: 'facebook',  name: 'FACEBOOK',     labelKey: 'follow',      handle: '/3mrdiab0',      icon: 'Facebook',  url: LINKS.facebook,  color: '#1877f2' },
  { key: 'messenger', name: 'MESSENGER',    labelKey: 'messageMe',   handle: 'Direct chat',    icon: 'Messenger', url: LINKS.messenger, color: '#0084ff' },
  { key: 'whatsapp',  name: 'WHATSAPP',     labelKey: 'joinChannel', handle: 'Channel',        icon: 'WhatsApp',  url: LINKS.whatsapp,  color: '#25d366' },
  { key: 'donate',    name: 'DONATE / TIP', labelKey: 'supportMe',   handle: 'botrix.live',    icon: 'Donate',    url: LINKS.donate,    color: '#ff1f3d' },
];

const PLAT_LABELS = {
  en: { watchLive: 'WATCH LIVE', subscribe: 'SUBSCRIBE', follow: 'FOLLOW', messageMe: 'MESSAGE ME', joinChannel: 'JOIN CHANNEL', supportMe: 'SUPPORT ME' },
  ar: { watchLive: 'شاهد البث', subscribe: 'اشترك',    follow: 'تابع',    messageMe: 'ابعتلي',    joinChannel: 'انضم',        supportMe: 'ادعم' },
};

function Platforms({ isLive, livePlatform }) {
  const { t, lang } = useContext(LangContext);
  const labels = PLAT_LABELS[lang] || PLAT_LABELS.en;
  return (
    <section className="platforms" id="platforms">
      <SectionHeader icon={<Icon.Play/>} label={t.connectTag} number="03"/>
      <div className="plat-title-wrap">
        <h2 className="h2 plat-title reveal">{t.followEverywhere1} <span className="red">{t.followEverywhere2}</span></h2>
      </div>
      <div className="plat-grid">
        {PLATFORMS.map((p, i) => {
          const IconComp = Icon[p.icon];
          // Light up the pulse only on the platform that's actually streaming.
          const showLive = isLive && p.key === livePlatform;
          return (
            <a
              key={p.key}
              href={p.url}
              target="_blank"
              rel="noopener noreferrer"
              className={`plat-card reveal ${i % 3 === 0 ? 'reveal--left' : i % 3 === 1 ? 'reveal--zoom' : 'reveal--right'} ${showLive?'plat-card--live':''}`}
              data-hover
              style={{'--platcol': p.color, transitionDelay: `${i*0.08}s`}}
              onMouseEnter={() => window.__playHover?.()}
              onClick={() => window.__playClick?.()}
            >
              {showLive && (
                <div className="plat-card__live">
                  <span className="live-dot"></span>
                  <span className="mono">{t.live}</span>
                </div>
              )}
              <div className="plat-card__bg"></div>
              <div className="plat-card__inner">
                <div className="plat-card__icon"><IconComp/></div>
                <div className="plat-card__meta">
                  <div className="mono small muted">{labels[p.labelKey]}</div>
                  <div className="plat-card__name">{p.name}</div>
                  <div className="mono small plat-card__handle">{p.handle}</div>
                </div>
                <div className="plat-card__arrow"><Icon.Arrow/></div>
              </div>
              <div className="plat-card__corner tl"></div>
              <div className="plat-card__corner br"></div>
            </a>
          );
        })}
      </div>
    </section>
  );
}

// ============ MARQUEE (3mr's own platforms) ============
function PlatformMarquee() {
  const { t } = useContext(LangContext);
  const items = [
    { name: 'KICK',      icon: 'Kick',      url: LINKS.kick },
    { name: 'YOUTUBE',   icon: 'YouTube',   url: LINKS.youtube },
    { name: 'TIKTOK',    icon: 'TikTok',    url: LINKS.tiktok },
    { name: 'INSTAGRAM', icon: 'Instagram', url: LINKS.instagram },
    { name: 'FACEBOOK',  icon: 'Facebook',  url: LINKS.facebook },
    { name: 'MESSENGER', icon: 'Messenger', url: LINKS.messenger },
    { name: 'WHATSAPP',  icon: 'WhatsApp',  url: LINKS.whatsapp },
    { name: 'DONATE',    icon: 'Donate',    url: LINKS.donate },
  ];
  const group = (keyPrefix) => items.map((it, i) => {
    const IC = Icon[it.icon];
    return (
      <a key={`${keyPrefix}-${i}`} href={it.url} target="_blank" rel="noopener noreferrer" className="marq-item" data-hover onMouseEnter={()=>window.__playHover?.()}>
        <span className="marq-item__ic"><IC/></span>
        <span className="marq-item__name">{it.name}</span>
        <span className="marq-sep">◆</span>
      </a>
    );
  });
  return (
    <section className="plat-marquee-wrap reveal">
      <div className="plat-marquee-label mono">
        <span className="plat-marquee-label__line"></span>
        <span>{t.mySocials}</span>
        <span className="plat-marquee-label__line"></span>
      </div>
      <div className="plat-marquee">
        <div className="plat-marquee__track">
          {group('a')}{group('b')}{group('c')}
        </div>
      </div>
    </section>
  );
}

// ============ CONTACT ============
function Contact() {
  const { t } = useContext(LangContext);
  const [copied, setCopied] = React.useState(false);
  const email = '3mr@ar-ad.com';
  const copy = (e) => {
    e.preventDefault();
    e.stopPropagation();
    navigator.clipboard?.writeText(email);
    setCopied(true);
    window.__playClick?.();
    setTimeout(() => setCopied(false), 1800);
  };
  return (
    <section className="contact" id="contact">
      <SectionHeader icon={<Icon.Mail/>} label={t.businessTag} number="04"/>
      <div className="contact__inner reveal reveal--zoom"
           onMouseMove={(e) => {
             const el = e.currentTarget;
             const r = el.getBoundingClientRect();
             el.style.setProperty('--mx', ((e.clientX - r.left) / r.width) * 100 + '%');
             el.style.setProperty('--my', ((e.clientY - r.top) / r.height) * 100 + '%');
           }}>
        <div className="contact__left">
          <div className="contact__photo" style={{backgroundImage:'url(3.jpg)'}}>
            <div className="contact__photo-corner tl"></div>
            <div className="contact__photo-corner tr"></div>
            <div className="contact__photo-corner bl"></div>
            <div className="contact__photo-corner br"></div>
          </div>
        </div>
        <div className="contact__right">
          <h2 className="h2 reveal" style={{ transitionDelay: '.1s' }}>{t.wantTo} <span className="red">{t.collab}</span>?</h2>
          <p className="bio__lead reveal reveal--fade" style={{ transitionDelay: '.22s' }}>{t.collabDesc}</p>
          <div className="email-card reveal reveal--fade" style={{ transitionDelay: '.34s' }}>
            <div className="email-card__head">
              <span className="email-card__label mono">{t.email}</span>
              <button
                className={`email-card__copy ${copied?'is-copied':''}`}
                onClick={copy}
                data-hover
                onMouseEnter={()=>window.__playHover?.()}
                aria-label="Copy email"
              >
                <span className="email-card__copy-ic">{copied ? <Icon.Check/> : <Icon.Copy/>}</span>
                <span className="email-card__copy-txt mono">{copied ? t.copied : t.copy}</span>
              </button>
            </div>
            <a href={`mailto:${email}`} className="email-card__addr" data-hover onMouseEnter={()=>window.__playHover?.()}>{email}</a>
          </div>
          <a
            href={`mailto:${email}`}
            className="btn btn--primary reveal reveal--zoom"
            style={{ transitionDelay: '.46s' }}
            data-hover
            onMouseEnter={()=>window.__playHover?.()}
            onClick={() => {
              // Copy the email to clipboard too — handy if the user's device
              // doesn't have a default mail client set up.
              try { navigator.clipboard?.writeText(email); } catch(_) {}
              setCopied(true);
              window.__playClick?.();
              setTimeout(() => setCopied(false), 1800);
            }}
          >
            <Icon.Mail/><span>{t.sendEmail}</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer({ isLive }) {
  const { t, lang } = useContext(LangContext);
  const scrollTop = (e) => {
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return (
    <footer className="footer">
      <span className="footer__top-accent" aria-hidden="true"></span>

      {/* Single clean row: copyright · MaviS dev credit (prominent) · TOP */}
      <div className="footer__bar">
        <div className="footer__copy mono reveal reveal--fade">{t.copyright}</div>
        <a
          href="https://mohamedmavis.netlify.app/"
          target="_blank"
          rel="noopener noreferrer"
          className="dev-credit reveal reveal--zoom"
          style={{ transitionDelay: '.15s' }}
          data-hover
          data-tilt
          onMouseEnter={() => window.__playHover?.()}
        >
          <span className="dev-credit__label mono">{t.devBy}</span>
          <span className="dev-credit__name">MaviS</span>
          <span className="dev-credit__arrow"><Icon.Arrow/></span>
        </a>
        <a
          href="#top"
          className="footer__back reveal reveal--fade"
          style={{ transitionDelay: '.3s' }}
          data-hover
          onClick={scrollTop}
          onMouseEnter={() => window.__playHover?.()}
        >
          <span>{lang === 'ar' ? 'للأعلى' : 'TOP'}</span>
          <span className="footer__back-ic"><Icon.Arrow/></span>
        </a>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, Stats, RankProof, Bio, Platforms, PlatformMarquee, Contact, Footer });