// Eu Faço Parte — Sections part 1: Nav, LanguageSwitcher, TranslationBanner, Hero, Partners, Loja

const HeartIcon = ({ size = 14 }) => (
  <svg
    className="arrow heart"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="currentColor"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
  >
    <path d="M8.96173 18.9109L9.42605 18.3219L8.96173 18.9109ZM12 5.50063L11.4596 6.02073C11.601 6.16763 11.7961 6.25063 12 6.25063C12.2039 6.25063 12.399 6.16763 12.5404 6.02073L12 5.50063ZM15.0383 18.9109L15.5026 19.4999L15.0383 18.9109ZM9.42605 18.3219C7.91039 17.1271 6.25307 15.9603 4.93829 14.4798C3.64922 13.0282 2.75 11.3345 2.75 9.1371H1.25C1.25 11.8026 2.3605 13.8361 3.81672 15.4758C5.24723 17.0866 7.07077 18.3752 8.49742 19.4999L9.42605 18.3219ZM2.75 9.1371C2.75 6.98623 3.96537 5.18252 5.62436 4.42419C7.23607 3.68748 9.40166 3.88258 11.4596 6.02073L12.5404 4.98053C10.0985 2.44352 7.26409 2.02539 5.00076 3.05996C2.78471 4.07292 1.25 6.42503 1.25 9.1371H2.75ZM8.49742 19.4999C9.00965 19.9037 9.55954 20.3343 10.1168 20.6599C10.6739 20.9854 11.3096 21.25 12 21.25V19.75C11.6904 19.75 11.3261 19.6293 10.8736 19.3648C10.4213 19.1005 9.95208 18.7366 9.42605 18.3219L8.49742 19.4999ZM15.5026 19.4999C16.9292 18.3752 18.7528 17.0866 20.1833 15.4758C21.6395 13.8361 22.75 11.8026 22.75 9.1371H21.25C21.25 11.3345 20.3508 13.0282 19.0617 14.4798C17.7469 15.9603 16.0896 17.1271 14.574 18.3219L15.5026 19.4999ZM22.75 9.1371C22.75 6.42503 21.2153 4.07292 18.9992 3.05996C16.7359 2.02539 13.9015 2.44352 11.4596 4.98053L12.5404 6.02073C14.5983 3.88258 16.7639 3.68748 18.3756 4.42419C20.0346 5.18252 21.25 6.98623 21.25 9.1371H22.75ZM14.574 18.3219C14.0479 18.7366 13.5787 19.1005 13.1264 19.3648C12.6739 19.6293 12.3096 19.75 12 19.75V21.25C12.6904 21.25 13.3261 20.9854 13.8832 20.6599C14.4405 20.3343 14.9903 19.9037 15.5026 19.4999L14.574 18.3219Z"></path>
  </svg>
);

// Helper: caminho relativo da página atual (ex.: index.html, projeto-x.html)
const currentPage = () => {
  const path = location.pathname.replace(/^\/(en|it|de)(\/|$)/, '/');
  const last = path.split('/').pop() || 'index.html';
  return last || 'index.html';
};

// "Início" → /index.html, "Nossa História" → /nossa-historia.html
// Mantém o prefixo de idioma atual ao construir links de navegação interna
const langPath = (file) => {
  const prefix = window.LANG === 'pt' ? '/' : '/' + window.LANG + '/';
  return prefix + file;
};

const Logo = ({ src = "assets/logo.png" }) =>
  <a href={langPath('index.html')} className="nav-logo">
    <img src={src} alt="Eu Faço Parte" />
  </a>;

const PROJETOS_NAV = [
  { name: 'Surf Sagi',                                file: 'projeto-surf-sagi.html' },
  { name: 'Artesanato & Brinquedos',                  file: 'projeto-artesanato.html' },
  { name: 'Sagi Vidas',                               file: 'projeto-sagi-vidas.html' },
  { name: 'Sonhos em Campo',                          file: 'projeto-sonhos-campo.html' },
  { name: 'Juntos nós Cuidamos',                      file: 'projeto-juntos.html' },
  { name: 'Abrigo ANCA & Educação Profissional',      file: 'projeto-anca.html' },
  { name: 'Roupas & Memórias',                        file: 'projeto-roupas.html' },
  { name: 'Dia das Crianças para 300 jovens',         file: 'projeto-dia-criancas.html' },
  { name: 'O direito de celebrar',                    file: 'projeto-celebrar.html' },
  { name: 'Memórias Afetivas e Saudáveis na Cozinha', file: 'projeto-cozinha.html' },
];

const ProjectsModal = ({ onClose }) => (
  <div className="modal-overlay" onClick={onClose} style={{ display: 'flex' }}>
    <div className="modal-box modal-box--wide" onClick={(e) => e.stopPropagation()} style={{ maxWidth: '640px' }}>
      <button className="modal-close" onClick={onClose}>×</button>
      <div className="modal-step">
        <span className="eyebrow" style={{ display: 'block', marginBottom: '8px' }}>
          <span className="num">01.1</span> · {t('iniciativas.modal_eyebrow')}
        </span>
        <h2 className="modal-title">{t('iniciativas.modal_title')}</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', border: '1px solid var(--rule)', marginTop: '24px' }}>
          {PROJETOS_NAV.map((p, i) => (
            <a key={p.file} href={langPath(p.file)}
              style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '15px 20px',
                borderBottom: i < PROJETOS_NAV.length - 2 ? '1px solid var(--rule)' : 'none',
                borderRight: i % 2 === 0 ? '1px solid var(--rule)' : 'none',
                fontFamily: 'var(--serif)', fontSize: '16px',
                color: 'var(--ink)', textDecoration: 'none',
                transition: 'background 0.15s',
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--paper-2)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
            >
              {p.name}
              <span style={{ fontFamily: 'var(--mono)', fontSize: '10px', color: 'var(--accent)', marginLeft: '10px', flexShrink: 0 }}>→</span>
            </a>
          ))}
        </div>
      </div>
    </div>
  </div>
);

// ---- Language Switcher (botão flutuante com bandeira UK como ícone default) ----
const LANG_OPTIONS = [
  { code: 'en', country: 'gb', labelKey: 'label_en' },
  { code: 'it', country: 'it', labelKey: 'label_it' },
  { code: 'de', country: 'de', labelKey: 'label_de' },
  { code: 'pt', country: 'br', labelKey: 'label_pt' },
];

const LanguageSwitcher = () => {
  const [open, setOpen] = React.useState(false);
  const wrapRef = React.useRef(null);

  React.useEffect(() => {
    const close = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, []);

  const navigate = (code) => {
    setOpen(false);
    window.location.href = window.langHref(code);
  };

  const Flag = ({ country, size = 28 }) => (
    <img
      src={`https://flagcdn.com/40x30/${country}.png`}
      alt={country}
      style={{ width: size, height: 'auto', borderRadius: '2px', display: 'block' }}
      onError={(e) => { e.currentTarget.style.display = 'none'; }}
    />
  );

  // Ícone do botão = bandeira UK (mostra que há opção em inglês mesmo no site PT)
  // Exceção: se o usuário já está em outro idioma, mostra a bandeira do idioma atual
  const currentFlag = LANG_OPTIONS.find(l => l.code === window.LANG)?.country || 'gb';
  const defaultFlag = window.LANG === 'pt' ? 'gb' : currentFlag;

  return (
    <div ref={wrapRef} style={{ position: 'fixed', bottom: '178px', left: '28px', zIndex: 9998 }}>
      {open && (
        <div style={{
          position: 'absolute', bottom: '64px', left: 0,
          background: 'var(--paper)', border: '1px solid var(--rule)',
          borderRadius: '14px', padding: '10px',
          boxShadow: '0 8px 32px rgba(0,0,0,0.13)',
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '6px',
          width: '136px',
        }}>
          {LANG_OPTIONS.map(opt => (
            <button
              key={opt.code}
              onClick={() => navigate(opt.code)}
              title={t('switcher.' + opt.labelKey)}
              aria-label={t('switcher.' + opt.labelKey)}
              style={{
                background: window.LANG === opt.code ? 'var(--paper-2)' : 'none',
                border: window.LANG === opt.code ? '1px solid var(--accent)' : '1px solid transparent',
                cursor: 'pointer',
                padding: '8px', borderRadius: '8px',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'background 0.15s, border 0.15s',
              }}
              onMouseEnter={(e) => { if (window.LANG !== opt.code) e.currentTarget.style.background = 'var(--paper-2)'; }}
              onMouseLeave={(e) => { if (window.LANG !== opt.code) e.currentTarget.style.background = 'none'; }}
            >
              <Flag country={opt.country} size={28} />
            </button>
          ))}
        </div>
      )}

      <button
        onClick={() => setOpen(o => !o)}
        title={t('switcher.tooltip')}
        aria-label={t('switcher.tooltip')}
        style={{
          width: '52px', height: '52px', borderRadius: '50%',
          background: 'var(--paper)', border: '1px solid var(--rule)',
          cursor: 'pointer', padding: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 4px 18px rgba(0,0,0,0.13)',
          transition: 'box-shadow 0.2s, border-color 0.2s',
          overflow: 'hidden',
        }}
        onMouseEnter={(e) => { e.currentTarget.style.boxShadow = '0 6px 24px rgba(0,0,0,0.20)'; e.currentTarget.style.borderColor = 'var(--accent)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.boxShadow = '0 4px 18px rgba(0,0,0,0.13)'; e.currentTarget.style.borderColor = 'var(--rule)'; }}
      >
        <Flag country={defaultFlag} size={32} />
      </button>
    </div>
  );
};

const Nav = () => {
  const [projectsOpen, setProjectsOpen] = React.useState(false);
  React.useEffect(() => { window.openProjectsModal = () => setProjectsOpen(true); }, []);

  const scrollTo = (id) => (e) => {
    const el = document.getElementById(id);
    if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth' }); }
  };

  return (
    <>
      <nav className="nav" id="top">
        <div className="nav-inner">
          <Logo />
          <div className="nav-links">
            <a href={langPath('index.html')}>{t('nav.home')}</a>
            <a href={langPath('nossa-historia.html')}>{t('nav.history')}</a>
            <a href={langPath('index.html') + '#oquefazemos'}   onClick={scrollTo('oquefazemos')}>{t('nav.what')}</a>
            <a href={langPath('index.html') + '#comofazemos'}   onClick={scrollTo('comofazemos')}>{t('nav.how')}</a>
            <a href={langPath('index.html') + '#comogarantimos'} onClick={scrollTo('comogarantimos')}>{t('nav.guarantee')}</a>
            <a href="#projetos" onClick={(e) => { e.preventDefault(); setProjectsOpen(true); }}>{t('nav.projects')}</a>
            <a href={langPath('contato.html')}>{t('nav.contact')}</a>
          </div>
          <button className="btn btn-primary nav-cta" onClick={() => window.openDonationModal?.()}>
            {t('nav.cta_donate')}
            <HeartIcon />
          </button>
        </div>
      </nav>
      {projectsOpen && <ProjectsModal onClose={() => setProjectsOpen(false)} />}
      <LanguageSwitcher />
      <DonationToast />
    </>
  );
};

// ---- Translation banner (auto-detect + redirect para pasta de idioma) ----
const BANNER_LANGS = {
  en: { msg: "We noticed your browser is set to English. Would you like to see this site in English?", btn: "Yes, translate", target: 'en' },
  de: { msg: "Wir haben bemerkt, dass Ihr Browser auf Deutsch eingestellt ist. Möchten Sie die Seite auf Deutsch sehen?", btn: "Ja, übersetzen", target: 'de' },
  fr: { msg: "Votre navigateur est en français. Souhaitez-vous voir ce site en anglais ?", btn: "Oui, traduire", target: 'en' },
  it: { msg: "Il tuo browser è impostato in italiano. Vuoi vedere questo sito in italiano?", btn: "Sì, traduci", target: 'it' },
  es: { msg: "Tu navegador está en español. ¿Deseas ver este sitio en inglés?", btn: "Sí, traducir", target: 'en' },
  ja: { msg: "ブラウザが日本語に設定されています。このサイトを英語で表示しますか？", btn: "翻訳する", target: 'en' },
  zh: { msg: "您的浏览器设置为中文。您是否希望以英文查看此网站？", btn: "翻译网站", target: 'en' },
  ar: { msg: "لاحظنا أن متصفحك مضبوط على اللغة العربية. هل تريد رؤية هذا الموقع باللغة الإنجليزية؟", btn: "نعم، ترجم", target: 'en' },
};

const TranslationBanner = () => {
  const [show, setShow] = React.useState(false);
  const [info, setInfo] = React.useState(null);

  React.useEffect(() => {
    if (sessionStorage.getItem('transl-banner-dismissed')) return;
    const base = (navigator.language || '').toLowerCase().split('-')[0];
    if (base === 'pt') return; // browser em PT → não oferece tradução
    const cfg = BANNER_LANGS[base];
    if (!cfg) return;
    // Se o usuário já está no idioma alvo, não mostra
    if (window.LANG === cfg.target) return;
    setInfo(cfg);
    setShow(true);
  }, []);

  if (!show || !info) return null;

  const dismiss = () => {
    setShow(false);
    sessionStorage.setItem('transl-banner-dismissed', '1');
  };

  const translate = () => {
    sessionStorage.setItem('transl-banner-dismissed', '1');
    window.location.href = window.langHref(info.target);
  };

  return (
    <div style={{
      background: 'var(--accent)',
      color: '#fff',
      padding: '11px 24px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      gap: '14px',
      fontSize: '14px',
      fontFamily: 'var(--sans)',
      flexWrap: 'wrap',
    }}>
      <span style={{ lineHeight: 1.4 }}>{info.msg} 🤍</span>
      <button onClick={translate} style={{
        background: 'rgba(255,255,255,0.15)',
        border: '1px solid rgba(255,255,255,0.35)',
        color: '#fff',
        padding: '6px 16px',
        borderRadius: '20px',
        cursor: 'pointer',
        fontSize: '13px',
        fontFamily: 'var(--sans)',
        whiteSpace: 'nowrap',
        transition: 'background 0.15s',
      }}
        onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.25)'}
        onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.15)'}
      >{info.btn}</button>
      <button onClick={dismiss} style={{
        background: 'none', border: 'none',
        color: 'rgba(255,255,255,0.6)', cursor: 'pointer',
        fontSize: '20px', padding: '0 2px', lineHeight: 1,
      }}>×</button>
    </div>
  );
};

// ---- Donation social proof toast ----
const TOAST_NAMES = [
  'Maria S.','João P.','Ana C.','Carlos M.','Fernanda L.',
  'Rafael T.','Beatriz O.','Lucas N.','Camila R.','Pedro A.',
  'Juliana F.','Marcos V.','Larissa B.','Thiago D.','Isabela G.',
  'Bruno K.','Vanessa H.','Diego E.','Natália W.','Felipe C.',
  'Letícia M.','Rodrigo A.','Priscila S.','Eduardo B.','Aline F.',
];

const DonationToast = () => {
  const [visible, setVisible] = React.useState(false);
  const [info, setInfo] = React.useState({ name: '', value: '' });

  React.useEffect(() => {
    let hideTimer, nextTimer;

    const trigger = () => {
      const name = TOAST_NAMES[Math.floor(Math.random() * TOAST_NAMES.length)];
      const val  = Math.floor(Math.random() * 171) + 30;
      const symbol = window.LANG === 'pt' ? 'R$' : window.LANG === 'en' ? 'CHF ' : window.LANG === 'it' ? 'CHF ' : 'CHF ';
      const formatted = window.LANG === 'pt' ? `R$${val},00` : `CHF ${val}`;
      setInfo({ name, value: formatted });
      setVisible(true);
      hideTimer = setTimeout(() => setVisible(false), 5000);
      nextTimer = setTimeout(trigger, 60000 + Math.random() * 30000);
    };

    nextTimer = setTimeout(trigger, 4000);
    return () => { clearTimeout(hideTimer); clearTimeout(nextTimer); };
  }, []);

  return (
    <div className={`donation-toast${visible ? ' donation-toast--in' : ''}`}>
      <div className="donation-toast-icon"><HeartIcon size={13} /></div>
      <div className="donation-toast-text">
        <strong>{info.name}</strong> {t('toast.donated')} <span className="donation-toast-value">{info.value}</span>
      </div>
    </div>
  );
};

// ---- HERO ----
const Hero = () =>
<section className="hero">
    <div className="hero-inner">
      <div className="hero-grid">
        <div className="hero-text">
          <span className="eyebrow hero-eyebrow"><span className="dot"></span> {t('hero.eyebrow')}</span>

          <h1 className="h-display hero-title" style={{ fontSize: "70px" }}
              dangerouslySetInnerHTML={tHTML('hero.title')} />

          <p className="lede hero-lede" dangerouslySetInnerHTML={tHTML('hero.lede')} />

          <div className="hero-cta-row">
            <button className="btn btn-primary" onClick={() => window.openDonationModal?.()}>{t('hero.cta_donate')} <HeartIcon /></button>
            <a href={langPath('nossa-historia.html')} className="btn btn-ghost">{t('hero.cta_history')} <span className="arrow">→</span></a>
          </div>

          <div className="hero-pre body-text" style={{ padding: "50px 0px 0px" }}>
            <span className="aster">✻</span>{' '}
            {t('hero.aster')}
          </div>
        </div>

        <div className="hero-image">
          <HeroSlider />
        </div>
      </div>

    </div>
  </section>;


// ---- Partners band ----
const Partners = () =>
<section className="partners">
    <div className="partners-inner">
      <div className="partners-label">
        <span className="eyebrow"><span className="num">✻</span> {t('partners.eyebrow')}</span>
      </div>
      <div className="partners-list">
        <div className="partner-item">Google for Nonprofits</div>
        <div className="partner-item">NordVPN</div>
        <div className="partner-item">Allegra Private Tours</div>
      </div>
    </div>
  </section>;


// ---- Loja — catálogo movido para src/loja-data.jsx (window.LOJA_ALL) ----

// Fisher-Yates shuffle
function lojaShuffled(arr) {
  const a = [...arr];
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const tmp = a[i]; a[i] = a[j]; a[j] = tmp;
  }
  return a;
}

const LOJA_COUNT   = 10;
const LOJA_VISIBLE = 5;
const LOJA_DUR     = 380;

// ---- Loja item modal ----
const LojaModal = ({ produto, onClose, onEncomenda }) => {
  React.useEffect(() => {
    const esc = e => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', esc);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', esc);
      document.body.style.overflow = '';
    };
  }, [onClose]);

  return (
    <div className="modal-overlay" onClick={onClose} style={{ display: 'flex', zIndex: 9999 }}>
      <div className="modal-box loja-modal-box" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        <div className="loja-modal-grid">
          <div className="loja-modal-photo">
            <img src={produto.img} alt={L(produto.name)}
              onError={e => { e.currentTarget.style.display = 'none'; }} />
          </div>

          <div className="loja-modal-info">
            <span className="loja-cat">{L(produto.cat)}</span>
            <h2 className="loja-modal-title">{L(produto.name)}</h2>

            {produto.price && (
              <div className="loja-modal-price">
                {produto.price}
                {produto.oldPrice && (
                  <s style={{ opacity: 0.45, marginLeft: '10px', fontSize: '0.82em' }}>
                    {produto.oldPrice}
                  </s>
                )}
              </div>
            )}

            <div className="loja-modal-meta">
              <div className="loja-modal-meta-row">
                <span className="loja-modal-label">{t('loja_modal.origin_l')}</span>
                <span className="loja-modal-value">{t('loja_modal.origin_v')}</span>
              </div>
              <div className="loja-modal-meta-row">
                <span className="loja-modal-label">{t('loja_modal.rarity_l')}</span>
                <span className="loja-modal-value">{t('loja_modal.rarity_v')}</span>
              </div>
              <div className="loja-modal-meta-row">
                <span className="loja-modal-label">{t('loja_modal.options_l')}</span>
                <span className="loja-modal-value">{t('loja_modal.options_v')}</span>
              </div>
              <div className="loja-modal-meta-row">
                <span className="loja-modal-label">{t('loja_modal.price_l')}</span>
                <span className="loja-modal-value">{t('loja_modal.price_v')}</span>
              </div>
            </div>

            <div className="loja-modal-discount">
              <span dangerouslySetInnerHTML={tHTML('loja_modal.discount')} />
              <br />
              <small>{t('loja_modal.discount_note')}</small>
            </div>

            <a
              href="#contato"
              className="btn btn-primary loja-modal-cta"
              onClick={() => { onEncomenda(produto.name.pt || L(produto.name)); onClose(); }}
            >
              {t('loja_modal.cta')} <span className="arrow">→</span>
            </a>
          </div>

        </div>
      </div>
    </div>
  );
};

const Announce = () => {
  const produtos = React.useMemo(() => lojaShuffled(window.LOJA_ALL || []).slice(0, LOJA_COUNT), []);
  const total = produtos.length;
  const track = React.useMemo(() => [...produtos, ...produtos.slice(0, LOJA_VISIBLE)], [produtos]);

  const [idx, setIdx]             = React.useState(0);
  const [anim, setAnim]           = React.useState(true);
  const [cardW, setCardW]         = React.useState(0);
  const [modalItem, setModalItem] = React.useState(null);
  const [paused, setPaused]       = React.useState(false);
  const wrapRef = React.useRef(null);

  React.useLayoutEffect(() => {
    const update = () => {
      if (wrapRef.current) setCardW(wrapRef.current.offsetWidth / LOJA_VISIBLE);
    };
    update();
    const ro = new ResizeObserver(update);
    if (wrapRef.current) ro.observe(wrapRef.current);
    return () => ro.disconnect();
  }, []);

  const goto = React.useCallback((i, withAnim) => {
    setAnim(withAnim);
    setIdx(i);
  }, []);

  React.useEffect(() => {
    if (paused) return;
    const iv = setInterval(() => {
      setAnim(true);
      setIdx(prev => {
        const next = prev + 1;
        if (next >= total) setTimeout(() => goto(0, false), LOJA_DUR + 16);
        return next;
      });
    }, 4000);
    return () => clearInterval(iv);
  }, [total, goto, paused]);

  return (
    <>
    <section className="announce" id="loja">
      <div className="section">
        <div className="section-head">
          <div className="head-left">
            <span className="eyebrow"><span className="num">✻</span> · {t('announce.eyebrow')}</span>
          </div>
          <div className="head-right">
            <h2 className="h-section" dangerouslySetInnerHTML={tHTML('announce.title')} />
          </div>
        </div>

        <p className="loja-lead body-text" dangerouslySetInnerHTML={tHTML('announce.lead')} />
        <div
          ref={wrapRef}
          style={{ overflow: 'hidden', position: 'relative', marginTop: '32px' }}
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          <div style={{
            display: 'flex',
            alignItems: 'stretch',
            transform: cardW ? `translateX(${-idx * cardW}px)` : 'none',
            transition: anim ? `transform ${LOJA_DUR}ms ease` : 'none',
            willChange: 'transform',
          }}>
            {track.map((p, i) => (
              <div key={i} className="loja-carousel-slide" style={{ flex: `0 0 ${cardW || (100 / LOJA_VISIBLE) + '%'}`, width: cardW || 'auto', padding: '0 6px', boxSizing: 'border-box' }}>
                <div
                  className="loja-card"
                  onClick={() => { setModalItem(p); setPaused(true); }}
                >
                  <div className="loja-thumb">
                    <img src={p.img} alt={L(p.name)} onError={e => { e.currentTarget.style.display = 'none'; }} />
                    {p.oldPrice && <span className="loja-badge">{t('announce.promo')}</span>}
                  </div>
                  <div className="loja-info">
                    <span className="loja-cat">{L(p.cat)}</span>
                    <h3 className="loja-name">{L(p.name)}</h3>
                    <span className="loja-price">
                      {p.price || t('announce.consult')}
                      {p.oldPrice && <> <s style={{ opacity: 0.45, fontSize: '0.8em', marginLeft: '4px' }}>{p.oldPrice}</s></>}
                    </span>
                    {p.price && <span className="loja-currency">{t('announce.currency')}</span>}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>

    {modalItem && (
      <LojaModal
        produto={modalItem}
        onClose={() => { setModalItem(null); setPaused(false); }}
        onEncomenda={(name) => { window.setLojaEncomenda?.(name); }}
      />
    )}
    </>
  );
};


// ---- Hero Slider ----
const HeroSlider = () => {
  const slides = [
    { src: "images/iniciativa-surf-sagi.jpg",    cKey: "slider.c_surf" },
    { src: "images/iniciativa-artesanato.jpg",   cKey: "slider.c_arte" },
    { src: "images/iniciativa-sagi-vidas.jpg",   cKey: "slider.c_vidas" },
    { src: "images/iniciativa-sonhos-campo.png", cKey: "slider.c_sonhos" },
    { src: "images/iniciativa-juntos.png",       cKey: "slider.c_juntos" },
    { src: "images/iniciativa-anca.jpg",         cKey: "slider.c_anca" },
    { src: "images/iniciativa-roupas.jpg",       cKey: "slider.c_roupas" },
  ];

  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % slides.length), 5000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="hero-slider">
      <figure className="figure">
        <div className="slider-stage">
          {slides.map((s, i) =>
          <img
            key={i}
            src={s.src}
            alt={t(s.cKey)}
            className={"slide-img " + (i === idx ? "is-active" : "")}
            onError={(e) => {e.currentTarget.style.display = 'none';}} />
          )}
        </div>
        <figcaption className="cap">
          <span className="marker"></span>
          {t(slides[idx].cKey)}
        </figcaption>
      </figure>
      <div className="slider-controls">
        <button
          type="button"
          className="slider-arrow"
          aria-label="◀"
          onClick={() => setIdx((i) => (i - 1 + slides.length) % slides.length)}>
          ←</button>
        <div className="slider-dots">
          {slides.map((_, i) =>
          <button
            key={i}
            type="button"
            className={"slider-dot " + (i === idx ? "is-active" : "")}
            aria-label={"Slide " + (i + 1)}
            onClick={() => setIdx(i)} />
          )}
        </div>
        <button
          type="button"
          className="slider-arrow"
          aria-label="▶"
          onClick={() => setIdx((i) => (i + 1) % slides.length)}>
          →</button>
      </div>
    </div>);

};


window.Nav = Nav;
window.TranslationBanner = TranslationBanner;
window.Hero = Hero;
window.HeroSlider = HeroSlider;
window.Partners = Partners;
window.Announce = Announce;
window.HeartIcon = HeartIcon;
window.langPath = langPath;
window.LanguageSwitcher = LanguageSwitcher;
window.DonationToast = DonationToast;