// Eu Faço Parte — Sections part 1: Nav, Hero, Mission band, "O que fazemos" intro

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>
);

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


const PROJETOS_NAV = [
  { name: 'Surf Sagi',                                href: 'projeto-surf-sagi.html' },
  { name: 'Artesanato & Brinquedos',                  href: 'projeto-artesanato.html' },
  { name: 'Sagi Vidas',                               href: 'projeto-sagi-vidas.html' },
  { name: 'Sonhos em Campo',                          href: 'projeto-sonhos-campo.html' },
  { name: 'Juntos nós Cuidamos',                      href: 'projeto-juntos.html' },
  { name: 'Abrigo ANCA & Educação Profissional',      href: 'projeto-anca.html' },
  { name: 'Roupas & Memórias',                        href: 'projeto-roupas.html' },
  { name: 'Dia das Crianças para 300 jovens',         href: 'projeto-dia-criancas.html' },
  { name: 'O direito de celebrar',                    href: 'projeto-celebrar.html' },
  { name: 'Memórias Afetivas e Saudáveis na Cozinha', href: '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> · Nossas iniciativas
        </span>
        <h2 className="modal-title">Selecione o projeto</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', border: '1px solid var(--rule)', marginTop: '24px' }}>
          {PROJETOS_NAV.map((p, i) => (
            <a key={p.href} href={p.href}
              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>
);

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

  const GT_LANGS = [
  { code: 'pt',    country: 'br', label: 'Português (BR)' },
  { code: 'pt',    country: 'pt', label: 'Português (PT)' },
  { code: 'en',    country: 'gb', label: 'English' },
  { code: 'de',    country: 'ch', label: 'Deutsch' },
  { code: 'fr',    country: 'fr', label: 'Français' },
  { code: 'it',    country: 'it', label: 'Italiano' },
  { code: 'es',    country: 'es', label: 'Español' },
  { code: 'ja',    country: 'jp', label: '日本語' },
  { code: 'zh-CN', country: 'cn', label: '中文' },
];

const GoogleTranslate = () => {
  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 openTranslation = (lang) => {
    setOpen(false);
    const url = `https://translate.google.com/translate?sl=pt&tl=${encodeURIComponent(lang.code)}&u=${encodeURIComponent(window.location.href)}`;
    window.open(url, '_blank', 'noopener');
  };

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

  const GlobeIcon = () => (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="var(--ink-2)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
    </svg>
  );

  const langs = GT_LANGS.filter(l => l.code !== 'pt');

  return (
    <div ref={wrapRef} style={{ position: 'fixed', bottom: '28px', 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(4, 1fr)', gap: '6px',
          width: '168px',
        }}>
          {langs.map(lang => (
            <button key={lang.country} onClick={() => openTranslation(lang)} title={lang.label}
              style={{
                background: 'none', border: 'none', cursor: 'pointer',
                padding: '5px', borderRadius: '7px',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'background 0.15s',
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--paper-2)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'none'}
            >
              <Flag country={lang.country} w={28} />
            </button>
          ))}
        </div>
      )}

      <button onClick={() => setOpen(o => !o)} title="Selecionar idioma"
        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',
        }}
        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)'; }}
      >
        <GlobeIcon />
      </button>
    </div>
  );
};

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="index.html">Início</a>
            <a href="nossa-historia.html">Nossa História</a>
            <a href="index.html#oquefazemos"   onClick={scrollTo('oquefazemos')}>O Que Fazemos</a>
            <a href="index.html#comofazemos"   onClick={scrollTo('comofazemos')}>Como Fazemos</a>
            <a href="index.html#comogarantimos" onClick={scrollTo('comogarantimos')}>Como Garantimos</a>
            <a href="#projetos" onClick={(e) => { e.preventDefault(); setProjectsOpen(true); }}>Projetos</a>
            <a href="contato.html">Contato</a>
          </div>
          <button className="btn btn-primary nav-cta" onClick={() => window.openDonationModal?.()}>
            Faça uma doação
            <HeartIcon />
          </button>
        </div>
      </nav>
      {projectsOpen && <ProjectsModal onClose={() => setProjectsOpen(false)} />}
      <DonationToast />
    </>
  );
};

// ---- Translation banner ----
const BANNER_LANGS = {
  en: { msg: "We noticed your browser is set to English. Would you like to see this page translated?", btn: "Yes, translate", code: 'en' },
  de: { msg: "Wir haben bemerkt, dass Ihr Browser auf Deutsch eingestellt ist. Möchten Sie die Seite übersetzt sehen?", btn: "Ja, übersetzen", code: 'de' },
  fr: { msg: "Votre navigateur est en français. Souhaitez-vous voir cette page traduite ?", btn: "Oui, traduire", code: 'fr' },
  it: { msg: "Il tuo browser è impostato in italiano. Vuoi vedere questa pagina tradotta?", btn: "Sì, traduci", code: 'it' },
  es: { msg: "Tu navegador está en español. ¿Deseas ver esta página traducida?", btn: "Sí, traducir", code: 'es' },
  ja: { msg: "ブラウザが日本語に設定されています。このページを翻訳して表示しますか？", btn: "翻訳する", code: 'ja' },
  zh: { msg: "您的浏览器设置为中文。您是否希望查看此页面的翻译版本？", btn: "翻译页面", code: 'zh-CN' },
  ar: { msg: "لاحظنا أن متصفحك مضبوط على اللغة العربية. هل تريد رؤية هذه الصفحة مترجمة؟", btn: "نعم، ترجم", code: 'ar' },
};

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

  React.useEffect(() => {
    if (sessionStorage.getItem('transl-banner-dismissed')) return;
    const base = (navigator.language || '').toLowerCase().split('-')[0];
    if (base === 'pt' || !BANNER_LANGS[base]) return;
    setLang(BANNER_LANGS[base]);
    setShow(true);
  }, []);

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

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

  const translate = () => {
    const url = `https://translate.google.com/translate?sl=pt&tl=${encodeURIComponent(lang.code)}&u=${encodeURIComponent(window.location.href)}`;
    window.open(url, '_blank', 'noopener');
    dismiss();
  };

  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 }}>{lang.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)'}
      >{lang.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;
      setInfo({ name, value: `R$${val},00` });
      setVisible(true);
      hideTimer = setTimeout(() => setVisible(false), 5000);
      nextTimer = setTimeout(trigger, 25000 + Math.random() * 50000);
    };

    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> doou <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> Associação sem fins lucrativos · 🇧🇷 / 🇨🇭</span>

          <h1 className="h-display hero-title" style={{ fontSize: "70px" }}>
            Juntos nós cuidamos, sonhamos e <em>realizamos.</em>
          </h1>

          <p className="lede hero-lede">
            Nossa missão é oferecer <strong>abrigo, educação e profissionalização</strong> para jovens e crianças em situações de vulnerabilidade social, possibilitando que desenvolvam seus caminhos, ampliem seus olhares sobre o mundo e conquistem a sua independência.
          </p>

          <div className="hero-cta-row">
            <button className="btn btn-primary" onClick={() => window.openDonationModal?.()}>Faça uma doação <HeartIcon /></button>
            <a href="nossa-historia.html" className="btn btn-ghost">Nossa história <span className="arrow">→</span></a>
          </div>

          <div className="hero-pre body-text" style={{ padding: "50px 0px 0px" }}>
            <span className="aster">✻</span>{' '}
            O potencial para um futuro brilhante existe em todos, mas a vulnerabilidade social nega a muitos a chance de sonhar. A nossa união é a força que pode derrubar essas barreiras e criar novas oportunidades.
          </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> Nossos parceiros</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 completo (loja.eufacoparte.org/shop) ----
// Preços convertidos de BRL → CHF (taxa: 1 CHF ≈ 6,0 BRL — conversão manual mai/2026)
const LOJA_ALL = [
  // Decoração natalina
  { name: '3 Bolas natalinas douradas',             art: 'as', price: 'CHF 107',  oldPrice: null,      cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-125-35-min-433x516.jpg' },
  { name: 'Anjinho decorativo natalino',            art: 'o',  price: 'CHF 54',   oldPrice: null,      cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-153-Edit-43-min-433x516.jpg' },
  { name: 'Bolas decorativas de natal – Luxo',      art: 'as', price: 'CHF 129',  oldPrice: null,      cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/produto_natal_01_bolas-433x516.png' },
  { name: 'Bolas natalinas exclusivas',             art: 'as', price: 'CHF 214',  oldPrice: null,      cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-146-Edit-41-min-433x516.jpg' },
  { name: 'Botas decorativas natal azul',           art: 'as', price: 'CHF 54',   oldPrice: null,      cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-139-39-min-433x516.jpg' },
  { name: 'Conjunto 3 bolas natalinas',             art: 'o',  price: 'CHF 107',  oldPrice: null,      cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-131-38-min-433x516.jpg' },
  { name: 'Conjunto 6 bolas natalinas história',    art: 'o',  price: 'CHF 161',  oldPrice: 'CHF 214', cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-128-37-min-433x516.jpg' },
  { name: 'Conjunto dourado natalino exclusivo',    art: 'o',  price: 'CHF 214',  oldPrice: null,      cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-123-Edit-34-min-433x516.jpg' },
  { name: 'Conjunto exclusivo natal dourado',       art: 'o',  price: 'CHF 75',   oldPrice: 'CHF 107', cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-125-35-min-433x516.jpg' },
  { name: 'Conjunto natalino premium',              art: 'o',  price: 'CHF 321',  oldPrice: null,      cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-144-40-min-433x516.jpg' },
  { name: 'Conjunto premium natal histórias',       art: 'o',  price: 'CHF 321',  oldPrice: null,      cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-118-Edit-33-min-433x516.jpg' },
  { name: 'Decoração premium rainha',               art: 'a',  price: 'CHF 171',  oldPrice: 'CHF 214', cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-127-36-min-433x516.jpg' },
  { name: 'Enfeite natalino anjinho',               art: 'o',  price: null,        oldPrice: null,      cat: 'Decoração',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-159-Edit-45-min-433x516.jpg' },
  // Moda Circular
  { name: 'Blazer couro legítimo',                  art: 'o',  price: 'CHF 482',  oldPrice: 'CHF 535', cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-221-Edit-64-433x516.jpg' },
  { name: 'Blazer elegante Modeco',                 art: 'o',  price: 'CHF 535',  oldPrice: null,      cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-254-Edit-73-433x516.jpg' },
  { name: 'Blazer marrom xadrez interno',           art: 'o',  price: 'CHF 535',  oldPrice: null,      cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-247-Edit-70-433x516.jpg' },
  { name: 'Blazer preto',                           art: 'o',  price: 'CHF 535',  oldPrice: null,      cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-261-Edit-75-433x516.jpg' },
  { name: 'Blazer único de marca elegante',         art: 'o',  price: 'CHF 1.605',oldPrice: null,      cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-231-Edit-66-433x516.jpg' },
  { name: 'Calça preta elegante MODECO',            art: 'a',  price: 'CHF 535',  oldPrice: null,      cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-253-Edit-72-433x516.jpg' },
  { name: 'Casaco de Marca M',                      art: 'o',  price: 'CHF 129',  oldPrice: null,      cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/produto_casaco_01-433x516.png' },
  { name: 'Casaco de Marca M Textura',              art: 'o',  price: 'CHF 96',   oldPrice: null,      cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/produto_casaco_02-433x516.png' },
  { name: 'Casaco marrom elegante',                 art: 'o',  price: 'CHF 535',  oldPrice: null,      cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-250-Edit-71-433x516.jpg' },
  { name: 'Saia conjunto',                          art: 'a',  price: 'CHF 166',  oldPrice: 'CHF 209', cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/produto_saia_02-433x516.png' },
  { name: 'Saia preta elegante',                    art: 'a',  price: 'CHF 535',  oldPrice: null,      cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-256-Edit-74-433x516.jpg' },
  { name: 'Sobretudo elegante',                     art: 'o',  price: 'CHF 482',  oldPrice: 'CHF 535', cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-244-Edit-69-433x516.jpg' },
  { name: 'Sobretudo marrom',                       art: 'o',  price: 'CHF 482',  oldPrice: 'CHF 535', cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-242-Edit-68-433x516.jpg' },
  { name: 'Sobretudo marrom c/ manga bordada',      art: 'o',  price: 'CHF 482',  oldPrice: 'CHF 535', cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-239-Edit-67-433x516.jpg' },
  { name: 'Sobretudo modelo chinês',                art: 'o',  price: 'CHF 1.605',oldPrice: null,      cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-228-Edit-65-433x516.jpg' },
  { name: 'Stripe Sweater',                         art: 'o',  price: 'CHF 214',  oldPrice: null,      cat: 'Moda Circular', img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/1-33-433x516.jpg' },
  // Acessórios
  { name: 'Bolsa em couro legítimo',                art: 'a',  price: 'CHF 642',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-064-Edit-18-min-433x516.jpg' },
  { name: 'Chapéu beje LOEVENICH',                  art: 'o',  price: 'CHF 321',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-071-Edit-20-min-433x516.jpg' },
  { name: 'Chapéu de cor natural',                  art: 'o',  price: 'CHF 54',   oldPrice: 'CHF 75',  cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/produto_chapeu_01-433x516.png' },
  { name: 'Chapéu de Marca',                        art: 'o',  price: 'CHF 155',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/produto_chapeu_02-433x516.png' },
  { name: 'Chapéu Golfino',                         art: 'o',  price: 'CHF 321',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-033-Edit-8-min-433x516.jpg' },
  { name: 'Chapéu lembert com laço',                art: 'o',  price: 'CHF 321',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-100-Edit-28-min-433x516.jpg' },
  { name: 'Chapeu Luielle',                         art: 'o',  price: 'CHF 428',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-039-Edit-10-min-433x516.jpg' },
  { name: 'Chapeu Montegallo',                      art: 'o',  price: 'CHF 428',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-044-Edit-2-12-min-433x516.jpg' },
  { name: 'Chapeu Montegallo premium',              art: 'o',  price: null,        oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-031-Edit-6-min-433x516.jpg' },
  { name: 'Chapéu natural premium',                 art: 'o',  price: 'CHF 257',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-021-Edit-3-min-433x516.jpg' },
  { name: 'Chapéu preto LOEVENICH',                 art: 'o',  price: 'CHF 268',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-086-Edit-23-min-433x516.jpg' },
  { name: 'Chapéu preto Seeberger',                 art: 'o',  price: 'CHF 428',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-023-Edit-4-min-433x516.jpg' },
  { name: 'Chapéu tradicional de marca',            art: 'o',  price: 'CHF 535',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-054-Edit-16-min-433x516.jpg' },
  { name: 'Chapéu verde LOEVENICH',                 art: 'o',  price: 'CHF 321',  oldPrice: null,      cat: 'Acessório',     img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-094-Edit-26-min-433x516.jpg' },
  // Calçados
  { name: 'Sandália Gucci',                         art: 'a',  price: 'CHF 1.605',oldPrice: null,      cat: 'Calçado',       img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-218-Edit-58-433x516.jpg' },
  { name: 'Sapato branco em couro',                 art: 'o',  price: null,        oldPrice: null,      cat: 'Calçado',       img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-193-Edit-53-433x516.jpg' },
  { name: 'Sapato branco c/ detalhes',              art: 'o',  price: 'CHF 696',  oldPrice: 'CHF 1.070',cat: 'Calçado',      img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-189-Edit-52-433x516.jpg' },
  { name: 'Sapato casual de marca preto',           art: 'o',  price: 'CHF 535',  oldPrice: 'CHF 696', cat: 'Calçado',       img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-177-Edit-49-433x516.jpg' },
  { name: 'Sapato casual de marca branco',          art: 'o',  price: null,        oldPrice: null,      cat: 'Calçado',       img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-167-Edit-47-433x516.jpg' },
  { name: 'Sapato com detalhes xadrez',             art: 'o',  price: null,        oldPrice: null,      cat: 'Calçado',       img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-213-Edit-57-433x516.jpg' },
  { name: 'Sapato elegante c/ detalhes em couro',   art: 'o',  price: 'CHF 482',  oldPrice: 'CHF 535', cat: 'Calçado',       img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-205-Edit-56-433x516.jpg' },
  { name: 'Sapato elegante único feito a mão',      art: 'o',  price: 'CHF 963',  oldPrice: 'CHF 1.070',cat: 'Calçado',      img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-201-Edit-55-433x516.jpg' },
  { name: 'Sapato Gucci',                           art: 'o',  price: 'CHF 450',  oldPrice: null,      cat: 'Calçado',       img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/produto_sapato_03-433x516.png' },
  { name: 'Sapato para golf elegante',              art: 'o',  price: 'CHF 749',  oldPrice: 'CHF 1.070',cat: 'Calçado',      img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-185-Edit-51-433x516.jpg' },
  { name: 'Sapato preto e marrom legítimo',         art: 'o',  price: 'CHF 535',  oldPrice: null,      cat: 'Calçado',       img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-197-Edit-54-433x516.jpg' },
  { name: 'Sapato em couro',                        art: 'o',  price: 'CHF 535',  oldPrice: null,      cat: 'Calçado',       img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-201-Edit-55-433x516.jpg' },
  { name: 'Sapato preto em couro',                  art: 'o',  price: 'CHF 589',  oldPrice: 'CHF 642', cat: 'Calçado',       img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/FacoParte-184-Edit-50-433x516.jpg' },
  { name: 'Tênis Rosa',                             art: 'o',  price: 'CHF 236',  oldPrice: 'CHF 289', cat: 'Calçado',       img: 'https://loja.eufacoparte.org/wp-content/uploads/2016/07/produto_tennis_01-433x516.png' },
];

// 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 t = a[i]; a[i] = a[j]; a[j] = t;
  }
  return a;
}

const LOJA_COUNT   = 10; // itens por sessão
const LOJA_VISIBLE = 5;  // cards visíveis ao mesmo tempo
const LOJA_DUR     = 380; // ms da transição

// ---- 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">

          {/* Esquerda: foto */}
          <div className="loja-modal-photo">
            <img src={produto.img} alt={produto.name}
              onError={e => { e.currentTarget.style.display = 'none'; }} />
          </div>

          {/* Direita: detalhes */}
          <div className="loja-modal-info">
            <span className="loja-cat">{produto.cat}</span>
            <h2 className="loja-modal-title">{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">Origem</span>
                <span className="loja-modal-value">Item exclusivo de doação solidária</span>
              </div>
              <div className="loja-modal-meta-row">
                <span className="loja-modal-label">Raridade</span>
                <span className="loja-modal-value">Raro de Marca Européia &amp; Alta Costura</span>
              </div>
              <div className="loja-modal-meta-row">
                <span className="loja-modal-label">Opções de compra</span>
                <span className="loja-modal-value">À vista ou parcelado</span>
              </div>
              <div className="loja-modal-meta-row">
                <span className="loja-modal-label">Preço em francos</span>
                <span className="loja-modal-value">consulte condições</span>
              </div>
            </div>

            <div className="loja-modal-discount">
              Desconto de até <strong>15% à vista</strong>*
              <br />
              <small>*consultar condições por contato</small>
            </div>

            <a
              href="#contato"
              className="btn btn-primary loja-modal-cta"
              onClick={() => { onEncomenda(produto.name); onClose(); }}
            >
              Entrar em contato para mais informações <span className="arrow">→</span>
            </a>
          </div>

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

const Announce = () => {
  // 10 itens aleatórios, estáveis durante a sessão
  const produtos = React.useMemo(() => lojaShuffled(LOJA_ALL).slice(0, LOJA_COUNT), []);
  const total = produtos.length;
  // Track: 10 reais + 5 clones no final para loop infinito
  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);

  // Mede a largura de cada card
  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);
  }, []);

  // Auto-avança a cada 4 segundos (pausa quando o modal está aberto ou hover)
  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> · Loja solidária</span>
          </div>
          <div className="head-right">
            <h2 className="h-section">
              Consumo <em>consciente</em> e solidário.
            </h2>
          </div>
        </div>

        <p className="loja-lead body-text">
          Cada peça é um ato de solidariedade, <strong>100% do valor</strong> vai diretamente para nossos projetos sociais.
          Itens selecionados e enviados <strong>direto da nossa sede na Suíça</strong> 🇨🇭.
        </p>
        {/* Carousel */}
        <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={p.name} onError={e => { e.currentTarget.style.display = 'none'; }} />
                    {p.oldPrice && <span className="loja-badge">Promoção</span>}
                  </div>
                  <div className="loja-info">
                    <span className="loja-cat">{p.cat}</span>
                    <h3 className="loja-name">{p.name}</h3>
                    <span className="loja-price">
                      {p.price || 'Consulte'}
                      {p.oldPrice && <> <s style={{ opacity: 0.45, fontSize: '0.8em', marginLeft: '4px' }}>{p.oldPrice}</s></>}
                    </span>
                    {p.price && <span className="loja-currency">Francos suíços</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",    caption: "Surf Sagi · esporte transforma" },
  { src: "images/iniciativa-artesanato.jpg",   caption: "Artesanato & Brinquedos · geração de renda" },
  { src: "images/iniciativa-sagi-vidas.jpg",   caption: "Sagi Vidas · resgate animal" },
  { src: "images/iniciativa-sonhos-campo.png", caption: "Sonhos em Campo · esporte e inclusão" },
  { src: "images/iniciativa-juntos.png",       caption: "Juntos nós Cuidamos · cuidado e comunidade" },
  { src: "images/iniciativa-anca.jpg",         caption: "Abrigo ANCA & Educação Profissional" },
  { src: "images/iniciativa-roupas.jpg",       caption: "Roupas & Memórias · moda circular" },
  ];


  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={s.caption}
            className={"slide-img " + (i === idx ? "is-active" : "")}
            onError={(e) => {e.currentTarget.style.display = 'none';}} />

          )}
        </div>
        <figcaption className="cap">
          <span className="marker"></span>
          {slides[idx].caption}
        </figcaption>
      </figure>
      <div className="slider-controls">
        <button
          type="button"
          className="slider-arrow"
          aria-label="Anterior"
          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="Próximo"
          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;