// chrome.jsx — Shared site chrome: SiteHeader, SiteFooter, PhotoSlot,
// SectionHead, SystemNav. All site mockups compose these.

const NAV_ITEMS = [
  { id: 'home',          label: 'Início',         href: 'index.html' },
  { id: 'quem-somos',    label: 'Quem somos',     href: 'quem-somos.html' },
  { id: 'como-ajudar',   label: 'Como ajudar',    href: 'como-ajudar.html' },
  { id: 'transparencia', label: 'Transparência',  href: 'transparencia.html' },
  { id: 'contato',       label: 'Contato',        href: 'contato.html' },
];

function SiteHeader({ active = 'home' }) {
  var w = useWindowWidth();
  var mob = w > 407 && w <= 700;
  var tab = (w > 700 && w <= 1074) || w <= 407;
  var [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(function() {
    if (!tab && menuOpen) setMenuOpen(false);
  }, [tab]);

  React.useEffect(function() {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    document.body.classList.toggle('drawer-open', menuOpen);
    return function() {
      document.body.style.overflow = '';
      document.body.classList.remove('drawer-open');
    };
  }, [menuOpen]);

  React.useEffect(function() {
    if (!menuOpen) return;
    function onKey(e) { if (e.key === 'Escape') setMenuOpen(false); }
    document.addEventListener('keydown', onKey);
    return function() { document.removeEventListener('keydown', onKey); };
  }, [menuOpen]);

  return (
    <>
      <header style={{
        background: 'rgba(255,255,255,0.93)',
        backdropFilter: 'blur(14px)',
        WebkitBackdropFilter: 'blur(14px)',
        padding: mob ? '14px 20px' : tab ? '16px 32px' : '20px 56px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: mob ? 'center' : 'space-between',
        flexDirection: mob ? 'column' : 'row',
        borderBottom: '1px solid var(--line)',
        gap: mob ? 10 : 0,
        position: 'sticky',
        top: 0,
        zIndex: 50,
      }}>
        <a href={NAV_ITEMS[0].href} style={{ textDecoration: 'none', color: 'inherit' }}>
          <LockupHorizontal size={mob ? 56 : tab ? 60 : 68} />
        </a>

        {/* Desktop — full nav + CTA */}
        {!mob && !tab && (
          <nav style={{
            display: 'flex', alignItems: 'center',
            gap: 30, flexWrap: 'wrap', justifyContent: 'center',
            fontFamily: 'var(--sans)', fontSize: 13.5, fontWeight: 500,
            color: 'var(--ink-soft)',
          }}>
            {NAV_ITEMS.map((it) => (
              <a key={it.id} href={it.href} style={{
                color: active === it.id ? 'var(--ink)' : 'var(--ink-soft)',
                fontWeight: active === it.id ? 600 : 500,
                borderBottom: active === it.id ? '2px solid var(--ink)' : '2px solid transparent',
                paddingBottom: 2, textDecoration: 'none',
              }}>{it.label}</a>
            ))}
          </nav>
        )}
        {!mob && !tab && (
          <a href="como-ajudar.html" style={{ textDecoration: 'none' }}>
            <Button variant="primary" icon={Icons.Heart}>Quero fazer parte</Button>
          </a>
        )}

        {/* Mobile — full nav (wraps) */}
        {mob && (
          <nav style={{
            display: 'flex', alignItems: 'center',
            gap: 14, flexWrap: 'wrap', justifyContent: 'center',
            fontFamily: 'var(--sans)', fontSize: 12, fontWeight: 500,
            color: 'var(--ink-soft)',
          }}>
            {NAV_ITEMS.map((it) => (
              <a key={it.id} href={it.href} style={{
                color: active === it.id ? 'var(--ink)' : 'var(--ink-soft)',
                fontWeight: active === it.id ? 600 : 500,
                borderBottom: active === it.id ? '2px solid var(--ink)' : '2px solid transparent',
                paddingBottom: 2, textDecoration: 'none',
              }}>{it.label}</a>
            ))}
          </nav>
        )}

        {/* Tablet — hamburger button */}
        {tab && (
          <button
            onClick={function() { setMenuOpen(true); }}
            aria-label="Abrir menu de navegação"
            style={{
              width: 44, height: 44,
              background: 'none',
              border: '1.5px solid var(--line-strong)',
              borderRadius: 10, cursor: 'pointer',
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center', gap: 5,
              padding: 0, flexShrink: 0,
            }}
          >
            <span style={{ display: 'block', width: 20, height: 2, background: 'var(--ink)', borderRadius: 2 }} />
            <span style={{ display: 'block', width: 20, height: 2, background: 'var(--ink)', borderRadius: 2 }} />
            <span style={{ display: 'block', width: 13, height: 2, background: 'var(--ink)', borderRadius: 2, alignSelf: 'flex-end', marginRight: 12 }} />
          </button>
        )}
      </header>

      {/* Tablet drawer */}
      {tab && menuOpen && (
        <>
          <div
            onClick={function() { setMenuOpen(false); }}
            style={{
              position: 'fixed', inset: 0, zIndex: 150,
              background: 'rgba(18, 13, 8, 0.45)',
              backdropFilter: 'blur(3px)',
              WebkitBackdropFilter: 'blur(3px)',
              animation: 'overlay-fade-in 0.22s ease',
            }}
          />
          <div style={{
            position: 'fixed', top: 0, right: 0, bottom: 0,
            width: 300, zIndex: 151,
            background: 'rgba(255, 255, 255, 0.97)',
            backdropFilter: 'blur(20px)',
            WebkitBackdropFilter: 'blur(20px)',
            boxShadow: '-8px 0 48px rgba(0,0,0,0.14)',
            display: 'flex', flexDirection: 'column',
            animation: 'drawer-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1)',
          }}>
            <div style={{
              padding: '18px 24px',
              borderBottom: '1px solid var(--line)',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <a href={NAV_ITEMS[0].href} style={{ textDecoration: 'none', color: 'inherit' }}>
                <LockupHorizontal size={56} />
              </a>
              <button
                onClick={function() { setMenuOpen(false); }}
                aria-label="Fechar menu"
                style={{
                  width: 36, height: 36, borderRadius: '50%',
                  background: 'var(--paper-2)', border: '1px solid var(--line)',
                  cursor: 'pointer', fontSize: 20, color: 'var(--ink)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  lineHeight: 1, flexShrink: 0,
                }}
              >×</button>
            </div>
            <nav style={{ flex: 1, padding: '20px 16px 0', display: 'flex', flexDirection: 'column', gap: 2 }}>
              {NAV_ITEMS.map((it) => (
                <a key={it.id} href={it.href} style={{
                  display: 'block', padding: '13px 16px',
                  fontFamily: 'var(--sans)', fontSize: 15.5,
                  fontWeight: active === it.id ? 600 : 500,
                  color: active === it.id ? 'var(--ink)' : 'var(--ink-soft)',
                  textDecoration: 'none', borderRadius: 10,
                  background: active === it.id ? 'var(--paper-2)' : 'transparent',
                  borderLeft: active === it.id ? '3px solid var(--ink)' : '3px solid transparent',
                  transition: 'background 0.15s',
                }}>
                  {it.label}
                </a>
              ))}
            </nav>
            <div style={{ padding: 20 }}>
              <a href="como-ajudar.html" style={{ textDecoration: 'none', display: 'block' }}>
                <Button variant="primary" full icon={Icons.Heart}>Quero fazer parte</Button>
              </a>
            </div>
          </div>
        </>
      )}
    </>
  );
}

function SiteFooter() {
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--paper)', position: 'relative' }}>
      {/* skyline ribbon */}
      <div style={{ position: 'relative', overflow: 'hidden', height: 80, opacity: 0.32 }}>
        <DecSkyline width={1080} height={80} />
      </div>

      <div style={{ padding: '56px 94px 32px',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 36 }}>
        <div>
          <LockupVertical size={92} dark />
        </div>

        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em',
            textTransform: 'uppercase', opacity: 0.6, marginBottom: 14 }}>Páginas</div>
          {NAV_ITEMS.map((it) => (
            <div key={it.id} style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 2 }}>
              <a href={it.href} style={{ color: 'inherit', textDecoration: 'none' }}>{it.label}</a>
            </div>
          ))}
        </div>

        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em',
            textTransform: 'uppercase', opacity: 0.6, marginBottom: 14 }}>Endereço</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.7 }}>
            Servidão Água Marinha, 88<br/>
            Ingleses do Rio Vermelho<br/>
            Florianópolis · SC<br/>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 12.5, opacity: 0.8 }}>CEP 88058-204</span>
          </div>
        </div>

        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em',
            textTransform: 'uppercase', opacity: 0.6, marginBottom: 14 }}>Acompanhe</div>
          {[
            { l: 'Instagram', u: 'https://www.instagram.com/casalarluzdocaminho/' },
            { l: 'Facebook',  u: 'https://www.facebook.com/casalarluzdocaminho/' },
            { l: 'YouTube',   u: 'https://www.youtube.com/@casalarluzdocaminhoo' },
            { l: 'LinkedIn',  u: 'https://www.linkedin.com/company/casa-lar-luz-do-caminho/' },
            { l: 'Voluntariado', u: 'https://docs.google.com/forms/d/e/1FAIpQLSckh7I45rtPGkufGlRklGRGO8ZLzQOlvXp7_FAQnWXqqLpaKQ/viewform' },
          ].map((s) => (
            <div key={s.l} style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 2 }}>
              <a href={s.u} target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none' }}>{s.l}</a>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '24px 56px', display: 'flex', justifyContent: 'center' }}>
        <DecFiveDots size={8} gap={10} />
      </div>

      <div style={{ padding: '18px 56px',
        borderTop: '1px solid color-mix(in oklab, var(--paper) 12%, transparent)',
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
        fontFamily: 'var(--mono)', fontSize: 10.5,
        color: 'color-mix(in oklab, var(--paper) 55%, transparent)',
        letterSpacing: '0.06em', textTransform: 'uppercase',
      }}>
        <span>CNPJ 12.187.675/0001-70</span>
        <span>© 2010–2026 Casa Lar Luz do Caminho</span>
      </div>
    </footer>
  );
}

// ────────────────────────────────────────────────────────────────
// ImageModal — full-screen photo lightbox
// ────────────────────────────────────────────────────────────────
function ImageModal({ src, alt, onClose }) {
  React.useEffect(function() {
    function onKey(e) { if (e.key === 'Escape') onClose(); }
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return function() {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, []);

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 1000,
        background: 'rgba(18, 13, 8, 0.90)',
        backdropFilter: 'blur(16px)',
        WebkitBackdropFilter: 'blur(16px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 'clamp(16px, 4vw, 56px)',
        animation: 'modal-fade-in 0.2s ease',
      }}
    >
      <button
        onClick={onClose}
        aria-label="Fechar foto"
        style={{
          position: 'absolute', top: 20, right: 20,
          width: 44, height: 44, borderRadius: '50%',
          background: 'rgba(255,255,255,0.12)',
          border: '1px solid rgba(255,255,255,0.20)',
          color: '#fff', cursor: 'pointer', fontSize: 22,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          backdropFilter: 'blur(6px)', lineHeight: 1,
          transition: 'background 0.15s',
        }}
        onMouseEnter={function(e) { e.currentTarget.style.background = 'rgba(255,255,255,0.24)'; }}
        onMouseLeave={function(e) { e.currentTarget.style.background = 'rgba(255,255,255,0.12)'; }}
      >×</button>
      <img
        src={src}
        alt={alt}
        onClick={function(e) { e.stopPropagation(); }}
        style={{
          maxWidth: 'min(90vw, 1100px)',
          maxHeight: '86vh',
          width: 'auto', height: 'auto',
          borderRadius: 8,
          boxShadow: '0 32px 80px rgba(0,0,0,0.6)',
          display: 'block',
          objectFit: 'contain',
          animation: 'modal-scale-in 0.26s cubic-bezier(0.16, 1, 0.3, 1)',
        }}
      />
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// PhotoSlot — placeholder for a photo to be inserted later
// ────────────────────────────────────────────────────────────────
function PhotoSlot({ height = 360, label = 'FOTOGRAFIA', tone = 'sol', round = 0, aspect }) {
  const bg = `color-mix(in oklab, var(--${tone}) 22%, var(--paper-2))`;
  return (
    <div style={{
      width: '100%',
      height: aspect ? undefined : height,
      aspectRatio: aspect,
      background: bg,
      borderRadius: round,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
      border: '1px solid var(--line)',
    }}>
      <div style={{ position: 'absolute', top: -24, right: -24, opacity: 0.5 }}>
        <DecSun size={140} />
      </div>
      <div style={{ position: 'absolute', bottom: -10, left: -10, opacity: 0.32 }}>
        <DecConstellation width={320} height={150} />
      </div>
      <div style={{
        position: 'relative',
        fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: 'var(--ink-soft)',
        background: 'color-mix(in oklab, var(--paper) 85%, transparent)',
        padding: '7px 13px', borderRadius: 999,
        border: '1px solid color-mix(in oklab, var(--ink) 8%, transparent)',
      }}>
        {label}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// SectionHead — kicker + title + intro
// ────────────────────────────────────────────────────────────────
function SectionHead({ kicker, title, intro, align = 'left', italic = true, color, titleSize = 56 }) {
  const c = color || 'var(--ink)';
  return (
    <div style={{ textAlign: align, maxWidth: align === 'center' ? 720 : 'none',
      marginLeft: align === 'center' ? 'auto' : 0,
      marginRight: align === 'center' ? 'auto' : 0 }}>
      {kicker && (
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: 'color-mix(in oklab, ' + c + ' 60%, transparent)',
          display: 'inline-flex', alignItems: 'center', gap: 10,
          marginBottom: 14,
        }}>
          <DecSectionMark size={14} /> {kicker}
        </div>
      )}
      <h2 style={{
        fontFamily: italic ? 'var(--serif)' : 'var(--sans)',
        fontStyle: italic ? 'italic' : 'normal',
        fontWeight: italic ? 400 : 700,
        fontSize: titleSize,
        lineHeight: 1,
        letterSpacing: italic ? '-0.02em' : '0.01em',
        margin: '0 0 18px',
        color: c,
      }}>{title}</h2>
      {intro && (
        <p style={{
          fontFamily: 'var(--sans)', fontSize: 16, lineHeight: 1.55,
          color: 'color-mix(in oklab, ' + c + ' 75%, transparent)',
          margin: 0, maxWidth: 680,
          marginLeft: align === 'center' ? 'auto' : 0,
          marginRight: align === 'center' ? 'auto' : 0,
        }}>{intro}</p>
      )}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// useWindowWidth — hook para layout responsivo via inline styles
// ────────────────────────────────────────────────────────────────
function useWindowWidth() {
  var [width, setWidth] = React.useState(window.innerWidth);
  React.useEffect(function() {
    function handle() { setWidth(window.innerWidth); }
    window.addEventListener('resize', handle);
    return function() { window.removeEventListener('resize', handle); };
  }, []);
  return width;
}

// ────────────────────────────────────────────────────────────────
// WhatsAppFab — floating action button, links to Doações number
// ────────────────────────────────────────────────────────────────
function WhatsAppFab() {
  return (
    <a
      href="https://wa.me/5548988051644"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Fale pelo WhatsApp — Doações"
      title="Fale pelo WhatsApp — Doações"
      className="wa-fab"
      style={{
        position: 'fixed',
        bottom: 28, right: 28,
        zIndex: 200,
        width: 56, height: 56,
        borderRadius: '50%',
        background: '#25D366',
        color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 4px 18px rgba(37,211,102,0.42)',
        textDecoration: 'none',
      }}
      onMouseEnter={function(e) {
        e.currentTarget.style.transform = 'scale(1.08)';
        e.currentTarget.style.boxShadow = '0 6px 26px rgba(37,211,102,0.58)';
      }}
      onMouseLeave={function(e) {
        e.currentTarget.style.transform = 'scale(1)';
        e.currentTarget.style.boxShadow = '0 4px 18px rgba(37,211,102,0.42)';
      }}
    >
      <span className="wa-fab-ring" />
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" style={{ position: 'relative', zIndex: 1 }}>
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
      </svg>
    </a>
  );
}

// ────────────────────────────────────────────────────────────────
// PageShell — fixed-width 1080px centered (mocks a desktop page)
// ────────────────────────────────────────────────────────────────
function PageShell({ children }) {
  var [modal, setModal] = React.useState(null);

  React.useEffect(function() {
    window.openPhotoModal = function(src, alt) { setModal({ src: src, alt: alt || '' }); };
    return function() { delete window.openPhotoModal; };
  }, []);

  React.useEffect(function() {
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('revealed');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.06, rootMargin: '0px 0px -32px 0px' });

    document.querySelectorAll('[data-reveal]').forEach(function(el) {
      observer.observe(el);
    });

    return function() { observer.disconnect(); };
  }, []);

  return (
    <div style={{
      maxWidth: 1080,
      margin: '0 auto',
      background: 'var(--paper)',
      boxShadow: '0 0 0 1px var(--line)',
      minHeight: '100vh',
    }}>
      {children}
      {modal && <ImageModal src={modal.src} alt={modal.alt} onClose={function() { setModal(null); }} />}
      <WhatsAppFab />
    </div>
  );
}

Object.assign(window, {
  SiteHeader, SiteFooter, PhotoSlot, SectionHead, PageShell, WhatsAppFab,
  NAV_ITEMS, useWindowWidth,
});
