// site/chrome.jsx — shared nav, footer, animated decorations. Responsive + i18n.

const { useState, useEffect } = React;

const PAGE_IDS = ['home', 'about', 'who', 'charter', 'volunteer', 'contact'];

function LangToggle({ lang, setLang, style = {} }) {
  const langs = [['fr', 'Fr'], ['en', 'En'], ['de', 'De']];
  return (
    <div style={{
      display: 'inline-flex', background: 'var(--c-purple-50)', borderRadius: 999,
      padding: 3, gap: 2, ...style,
    }}>
      {langs.map(([id, label]) => (
        <button key={id} onClick={() => setLang(id)} style={{
          border: 'none', cursor: 'pointer', borderRadius: 999,
          padding: '7px 12px', fontSize: 12.5, fontWeight: 600, fontFamily: 'inherit',
          background: lang === id ? '#fff' : 'transparent',
          color: lang === id ? 'var(--c-purple-700)' : 'var(--c-ink-mute)',
          boxShadow: lang === id ? '0 2px 8px rgba(34,22,52,0.10)' : 'none',
          transition: 'background .2s, color .2s',
        }}>{label}</button>
      ))}
    </div>
  );
}

function Nav({ current, go, L, lang, setLang }) {
  const [open, setOpen] = useState(false);
  useEffect(() => { setOpen(false); }, [current]);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const link = (id) => ({
    color: 'var(--c-ink)',
    fontSize: 14.5, fontWeight: 500, textDecoration: 'none',
    opacity: current === id ? 1 : 0.7,
    padding: '6px 0', position: 'relative',
    cursor: 'pointer', whiteSpace: 'nowrap',
    borderBottom: current === id ? '1.5px solid var(--c-purple-600)' : '1.5px solid transparent',
  });

  const nav = (id) => { setOpen(false); go(id); };

  return (
    <div style={{ position: 'sticky', top: 12, zIndex: 50, padding: '16px var(--pad-x) 0' }}>
      <nav style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
        padding: '14px clamp(16px, 3vw, 28px)',
        background: '#fff', borderRadius: open ? 28 : 999,
        boxShadow: '0 4px 20px rgba(34,22,52,0.08)',
        transition: 'border-radius .25s ease',
        flexWrap: 'wrap',
      }}>
        <a onClick={() => nav('home')} style={{ cursor: 'pointer', textDecoration: 'none' }}>
          <LogoMark />
        </a>
        <div className="nav-links">
          {PAGE_IDS.map(id => (
            <a key={id} onClick={() => nav(id)} style={link(id)}>{L.nav.items[id]}</a>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div className="nav-links" style={{ gap: 0 }}>
            <LangToggle lang={lang} setLang={setLang} />
          </div>
          <button className="nav-cta" onClick={() => nav('donate')} style={{
            background: 'var(--c-ink)', color: '#fff', border: 'none',
            padding: '12px 22px', borderRadius: 999, fontSize: 14, fontWeight: 600,
            cursor: 'pointer', whiteSpace: 'nowrap',
          }}>{L.nav.donate}</button>
          <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label="Menu" aria-expanded={open} style={{
            background: 'var(--c-purple-50)', border: 'none', cursor: 'pointer',
            width: 44, height: 44, borderRadius: 999,
            alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 5,
          }}>
            <span style={{ width: 18, height: 2, background: 'var(--c-ink)', borderRadius: 2, display: 'block', transition: 'transform .25s', transform: open ? 'translateY(3.5px) rotate(45deg)' : 'none' }}></span>
            <span style={{ width: 18, height: 2, background: 'var(--c-ink)', borderRadius: 2, display: 'block', transition: 'transform .25s, opacity .2s', transform: open ? 'translateY(-3.5px) rotate(-45deg)' : 'none' }}></span>
          </button>
        </div>
        {open && (
          <div className="nav-menu" style={{ flexBasis: '100%', paddingTop: 8 }}>
            <div style={{ display: 'grid', gap: 2, borderTop: '1px solid var(--c-line)', paddingTop: 12, paddingBottom: 6 }}>
              {PAGE_IDS.map(id => (
                <a key={id} onClick={() => nav(id)} style={{
                  cursor: 'pointer', textDecoration: 'none',
                  fontFamily: 'var(--serif)', fontSize: 22, padding: '10px 4px',
                  color: current === id ? 'var(--c-purple-700)' : 'var(--c-ink)',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <span>{L.nav.items[id]}</span>
                  <span style={{ fontSize: 15, opacity: 0.4 }}>→</span>
                </a>
              ))}
              <div style={{ paddingTop: 14, borderTop: '1px solid var(--c-line)', marginTop: 8 }}>
                <LangToggle lang={lang} setLang={setLang} />
              </div>
            </div>
          </div>
        )}
      </nav>
    </div>
  );
}

function Footer({ go, L }) {
  const F = L.footer;
  const linkS = { fontSize: 14, color: 'var(--c-ink-soft)', textDecoration: 'none', display: 'block', marginBottom: 8, cursor: 'pointer' };
  const colTitle = { fontFamily: 'var(--serif)', fontSize: 16, fontWeight: 500, color: 'var(--c-ink)', marginBottom: 16 };
  return (
    <footer style={{ padding: 'clamp(40px, 6vw, 64px) clamp(20px, 4.5vw, 60px) 32px', background: 'var(--c-cream)', borderTop: '1px solid var(--c-line)' }}>
      <div className="footer-grid">
        <div>
          <LogoMark tagline={true} />
          <p style={{ fontSize: 14, color: 'var(--c-ink-soft)', maxWidth: 320, marginTop: 16, lineHeight: 1.55 }}>
            {F.blurb}
          </p>
        </div>
        <div><div style={colTitle}>{F.assoc}</div>
          <a style={linkS} onClick={() => go('about')}>{F.links.about}</a>
          <a style={linkS} onClick={() => go('who')}>{F.links.who}</a>
          <a style={linkS} onClick={() => go('charter')}>{F.links.charter}</a>
        </div>
        <div><div style={colTitle}>{F.act}</div>
          <a style={linkS} onClick={() => go('volunteer')}>{F.links.volunteer}</a>
          <a style={linkS} onClick={() => go('donate')}>{F.links.donate}</a>
          <a style={linkS} onClick={() => go('contact')}>{F.links.contact}</a>
        </div>
        <div><div style={colTitle}>{F.contactT}</div>
          <div style={{ ...linkS, cursor: 'auto' }}>contact@calinange.lu</div>
          <div style={{ ...linkS, cursor: 'auto' }}>+352 691 562 687</div>
          <div style={{ ...linkS, cursor: 'auto' }}>{F.addr}<br/><MonoNote>{F.addrNote}</MonoNote></div>
        </div>
      </div>
      <div className="footer-bottom">
        <div>{F.copy}</div>
        <div>{F.legal}</div>
      </div>
    </footer>
  );
}

// Standard "page header" used across non-home pages.
function PageHeader({ kicker, title, intro, blob = 'cloud' }) {
  return (
    <section style={{ padding: '32px var(--pad-x) 0' }}>
      <div style={{
        background: 'var(--c-purple-100)', borderRadius: 'clamp(28px, 4vw, 48px)',
        padding: 'clamp(48px, 7vw, 80px) clamp(24px, 6vw, 72px) clamp(52px, 7.5vw, 88px)',
        position: 'relative', overflow: 'hidden',
      }}>
        <div className="float-a" style={{ position: 'absolute', top: -60, right: -40 }}>
          <Blob d={BLOB_PATHS[blob]} fill="var(--c-purple-300)" size={300}
            style={{ position: 'static', transform: 'rotate(-25deg)' }}/>
        </div>
        <div className="float-c" style={{ position: 'absolute', bottom: -80, left: -60 }}>
          <Blob d={BLOB_PATHS.smooth} fill="var(--c-peach-soft)" size={260}
            style={{ position: 'static' }}/>
        </div>
        <div className="float-b" style={{ position: 'absolute', top: 60, left: '40%' }}>
          <Blob d={BLOB_PATHS.pebble} fill="var(--c-purple-400)" size={80}
            style={{ position: 'static', transform: 'rotate(40deg)', opacity: 0.7 }}/>
        </div>
        <div style={{ position: 'relative', maxWidth: 820 }}>
          <div style={{
            display: 'inline-block', background: '#fff', color: 'var(--c-purple-700)',
            padding: '8px 16px', borderRadius: 999, fontSize: 12, fontWeight: 600,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            marginBottom: 24, boxShadow: '0 4px 12px rgba(34,22,52,0.06)',
          }}>{kicker}</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(38px, 7vw, 80px)' }}>{title}</h1>
          {intro && <p style={{
            fontSize: 'clamp(16px, 1.8vw, 19px)', lineHeight: 1.55, color: 'var(--c-ink)',
            maxWidth: 640, marginTop: 24, opacity: 0.78,
          }}>{intro}</p>}
        </div>
      </div>
    </section>
  );
}

// Generic "ready to act?" CTA bar — appears at the bottom of most pages.
function CTAStrip({ go, title, subtitle, primary, secondary }) {
  return (
    <section style={{ padding: 'clamp(48px, 7vw, 80px) var(--pad-x)' }}>
      <div className="cta-grid card-xl" style={{ background: 'var(--c-peach)' }}>
        <div className="float-d" style={{ position: 'absolute', bottom: -80, right: -40 }}>
          <Blob d={BLOB_PATHS.cloud} fill="var(--c-peach-soft)" size={280}
            style={{ position: 'static', transform: 'rotate(15deg)', opacity: 0.8 }}/>
        </div>
        <div style={{ position: 'relative' }}>
          <h2 className="h-display" style={{ fontSize: 'clamp(28px, 3.8vw, 44px)', lineHeight: 1.05 }}>{title}</h2>
          {subtitle && <p style={{ fontSize: 16.5, lineHeight: 1.55, color: 'var(--c-ink)', opacity: 0.8, marginTop: 14, maxWidth: 520 }}>{subtitle}</p>}
        </div>
        <div style={{ position: 'relative', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          {primary && (
            <button onClick={() => go(primary.to)} style={{
              background: 'var(--c-ink)', color: '#fff', border: 'none',
              padding: '18px 30px', borderRadius: 999, fontSize: 15, fontWeight: 600,
              cursor: 'pointer',
            }}>{primary.label} →</button>
          )}
          {secondary && (
            <button onClick={() => go(secondary.to)} style={{
              background: '#fff', color: 'var(--c-ink)', border: 'none',
              padding: '18px 28px', borderRadius: 999, fontSize: 15, fontWeight: 600,
              cursor: 'pointer',
            }}>{secondary.label}</button>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Footer, PageHeader, CTAStrip, LangToggle, PAGE_IDS });