// Shared chrome for the DWA website. Exports Header + Footer to window.

function FacebookIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M15.12 5.32H17V2.14A26.11 26.11 0 0 0 14.26 2c-2.72 0-4.58 1.66-4.58 4.7v2.62H6.61v3.56h3.07V22h3.68v-9.12h3.06l.46-3.56h-3.52V7.05c0-1.05.28-1.73 1.76-1.73Z"></path>
    </svg>
  );
}
function InstagramIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="2" y="2" width="20" height="20" rx="5.5"></rect>
      <circle cx="12" cy="12" r="4.2"></circle>
      <circle cx="17.4" cy="6.6" r="1.2" fill="currentColor" stroke="none"></circle>
    </svg>
  );
}
window.FacebookIcon = FacebookIcon;
window.InstagramIcon = InstagramIcon;

// Logo on its required white/sand backing panel.
// `light` recolours the wordmark for placement over a dark hero image; the
// crest itself always keeps its solid backing panel per the brand guidelines.
function LogoLockup({ onSand = false, compact = false, light = false }) {
  const h = compact ? 46 : 56;
  return (
    <a href="/" style={{ display: 'inline-flex', alignItems: 'center', gap: 12, textDecoration: 'none', flexShrink: 0 }}>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        background: onSand ? 'var(--shell-sand)' : 'var(--white)',
        borderRadius: 'var(--radius-md)', padding: 6,
        boxShadow: light ? '0 2px 10px rgba(8,30,48,0.28)' : (onSand ? 'none' : 'var(--shadow-xs)'),
        transition: 'box-shadow .3s var(--ease-out)',
      }}>
        <img src="assets/dwa-logo.png" alt="Dominica Watersports Association crest" style={{ height: h, width: 'auto', display: 'block' }} />
      </span>
      <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1, whiteSpace: 'nowrap' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontVariationSettings: 'var(--fraunces-text-settings)', fontWeight: 600, fontSize: 18, color: light ? '#fff' : 'var(--deep-sea)', letterSpacing: '-0.01em', textShadow: light ? '0 1px 12px rgba(8,30,48,0.45)' : 'none', transition: 'color .3s var(--ease-out)' }}>Dominica Watersports</span>
        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: light ? 'var(--reef-300)' : 'var(--reef-green)', textShadow: light ? '0 1px 10px rgba(8,30,48,0.4)' : 'none', transition: 'color .3s var(--ease-out)' }}>Association</span>
      </span>
    </a>
  );
}
window.LogoLockup = LogoLockup;

function Header({ current, overlay = false }) {
  const { Button, IconButton } = window.DWADesignSystem_3bca37;
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10);
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  // Blended-over-hero state: only while in overlay mode AND scrolled to the top.
  const onImage = overlay && !scrolled && !open;

  const linkStyle = (id) => ({
    fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, letterSpacing: '0.02em',
    textDecoration: 'none',
    color: onImage ? (current === id ? '#fff' : 'rgba(255,255,255,0.88)') : (current === id ? 'var(--deep-sea)' : 'var(--ink-700)'),
    borderBottom: `2px solid ${current === id ? (onImage ? 'var(--reef-300)' : 'var(--reef-green)') : 'transparent'}`,
    paddingBottom: 3, transition: 'color .25s var(--ease-out), border-color .25s var(--ease-out)',
    textShadow: onImage ? '0 1px 10px rgba(8,30,48,0.4)' : 'none',
  });

  return (
    <header style={{
      position: overlay ? 'fixed' : 'sticky', top: 0, left: 0, right: 0, zIndex: 100,
      background: onImage ? 'transparent' : (scrolled ? 'rgba(255,255,255,0.93)' : 'var(--white)'),
      backdropFilter: (scrolled && !onImage) ? 'saturate(180%) blur(8px)' : 'none',
      WebkitBackdropFilter: (scrolled && !onImage) ? 'saturate(180%) blur(8px)' : 'none',
      borderBottom: `1px solid ${onImage ? 'transparent' : 'var(--border-subtle)'}`,
      transition: 'background .3s var(--ease-out), border-color .3s var(--ease-out)',
    }}>
      <div className="dwa-container" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-5)', padding: '12px var(--gutter)' }}>
        <LogoLockup onSand={!onImage} light={onImage} />
        <nav className="dwa-nav-desktop" style={{ marginLeft: 'auto' }}>
          {window.DWA.nav.map((n) => (
            <div className="dwa-navitem" key={n.id}>
              <a href={n.href} className="dwa-navlink" style={linkStyle(n.id)}>
                {n.label}
                {n.children && (
                  <svg className="dwa-chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
                )}
              </a>
              {n.children && (
                <div className="dwa-dropdown">
                  <div className="dwa-dropdown-inner">
                    {n.children.map((c) => (
                      <a key={c.href} href={c.href} className="dwa-drop-link">{c.label}</a>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
          <Button variant="primary" size="sm" onClick={() => (window.location.href = '/membership')}>
            Membership
          </Button>
        </nav>
        <div className="dwa-nav-toggle" style={{ marginLeft: 'auto' }}>
          <IconButton icon={<i data-lucide={open ? 'x' : 'menu'} style={{ width: 22, height: 22 }}></i>}
                      label="Menu" variant="outline" onClick={() => setOpen(o => !o)}
                      style={onImage ? { background: 'rgba(255,255,255,0.14)', color: '#fff', borderColor: 'rgba(255,255,255,0.45)' } : {}} />
        </div>
      </div>

      <div className={`dwa-mobile-menu${open ? ' open' : ''}`} style={{ borderTop: '1px solid var(--border-subtle)', background: 'var(--white)' }}>
        <div className="dwa-container" style={{ padding: '14px var(--gutter) 20px', display: 'flex', flexDirection: 'column', gap: 2 }}>
          {window.DWA.nav.map((n) => (
            <div key={n.id} style={{ borderBottom: '1px solid var(--border-subtle)', padding: '4px 0 8px' }}>
              <a href={n.href} style={{
                display: 'block', padding: '10px 4px 4px', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 17,
                textDecoration: 'none', color: current === n.id ? 'var(--deep-sea)' : 'var(--ink-700)',
              }}>{n.label}</a>
              {n.children && (
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  {n.children.map((c) => (
                    <a key={c.href} href={c.href} style={{ padding: '7px 4px 7px 16px', fontSize: 14.5, fontWeight: 600, color: 'var(--ink-500)', textDecoration: 'none' }}>{c.label}</a>
                  ))}
                </div>
              )}
            </div>
          ))}
          <a href="/membership" style={{
            marginTop: 14, textAlign: 'center', background: 'var(--ocean-500)', color: '#fff',
            fontWeight: 700, letterSpacing: '0.04em', padding: '13px', borderRadius: 'var(--radius-md)', textDecoration: 'none',
          }}>Membership</a>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;

function Footer() {
  const { Eyebrow } = window.DWADesignSystem_3bca37;
  const C = window.DWA.contact;
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const link = { color: 'rgba(255,255,255,0.78)', textDecoration: 'none', fontSize: 15, lineHeight: 2 };
  const social = { display: 'inline-flex', width: 40, height: 40, borderRadius: 999, alignItems: 'center', justifyContent: 'center', background: 'rgba(255,255,255,0.1)', color: '#fff' };

  return (
    <footer style={{ background: 'var(--deep-sea)', color: '#fff' }}>
      <div className="dwa-container dwa-footer-grid" style={{ padding: 'var(--space-8) var(--gutter) var(--space-6)', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1.2fr', gap: 'var(--space-7)' }} >
        <div>
          <span style={{ display: 'inline-flex', background: '#fff', borderRadius: 'var(--radius-md)', padding: 8 }}>
            <img src="assets/dwa-logo.png" alt="DWA crest" style={{ height: 64, width: 'auto', display: 'block' }} />
          </span>
          <p style={{ color: 'rgba(255,255,255,0.74)', marginTop: 16, maxWidth: 340, fontSize: 15, lineHeight: 1.6 }}>
            Uniting the Nature Island's dive and watersports operators behind safe practice, marine conservation and professional standards.
          </p>
          <p style={{ fontFamily: 'var(--font-display)', fontVariationSettings: 'var(--fraunces-text-settings)', fontStyle: 'italic', color: 'var(--ocean-200)', fontSize: 17, marginTop: 4 }}>
            Protecting our waters. Raising our standards.
          </p>
        </div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--reef-300)', marginBottom: 8 }}>Explore</div>
          {window.DWA.nav.concat([{ id: 'membership', label: 'Membership', href: '/membership' }]).map((n) => (
            <div key={n.id}><a href={n.href} style={link}>{n.label}</a></div>
          ))}
        </div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--reef-300)', marginBottom: 8 }}>Connect</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'rgba(255,255,255,0.78)', fontSize: 15, lineHeight: 1.9 }}>
            <i data-lucide="map-pin" style={{ width: 16, height: 16 }}></i> {C.location}
          </div>
          <div><a href={`https://${C.web}`} style={link}>{C.web}</a></div>
          <div><a href={`mailto:${C.email}`} style={link}>{C.email}</a></div>
          <div style={{ display: 'flex', gap: 10, margin: '12px 0' }}>
            <a href={C.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook" style={social}><FacebookIcon /></a>
            <a href={C.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={social}><InstagramIcon /></a>
          </div>
          <div style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13.5, lineHeight: 1.5 }}>
            Tourism partner — <a href={`https://${C.partner}`} style={{ color: 'var(--ocean-200)', textDecoration: 'none' }}>Discover Dominica Authority</a>
          </div>
        </div>
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)' }}>
        <div className="dwa-container" style={{ padding: '16px var(--gutter)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, color: 'rgba(255,255,255,0.5)', fontSize: 13 }}>
          <span>© 2025 Dominica Watersports Association Inc. All rights reserved.</span>
          <span>The Nature Island of the Caribbean</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;

// Robust in-page anchor scrolling that works even where native fragment
// navigation is suppressed. Handles same-page "#id" and "page.html#id" links,
// and honours an existing hash on load (cross-page dropdown links).
(function setupAnchorScroll() {
  var OFFSET = 100; // clears the sticky/fixed navbar
  function scrollToId(id, instant) {
    var el = document.getElementById(id);
    if (!el) return false;
    var startY = window.scrollY;
    var endY = Math.max(0, el.getBoundingClientRect().top + startY - OFFSET);
    var dist = endY - startY;
    if (instant || Math.abs(dist) < 2) { window.scrollTo(0, endY); return true; }
    var dur = Math.min(720, Math.max(320, Math.abs(dist) * 0.5));
    var t0 = null;
    function ease(p) { return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2; }
    function step(ts) {
      if (t0 === null) t0 = ts;
      var p = Math.min(1, (ts - t0) / dur);
      window.scrollTo(0, Math.round(startY + dist * ease(p)));
      if (p < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
    return true;
  }
  document.addEventListener('click', function (e) {
    var a = e.target && e.target.closest ? e.target.closest('a') : null;
    if (!a) return;
    var href = a.getAttribute('href');
    if (!href || href.charAt(0) === '?') return;
    var url;
    try { url = new URL(a.href, window.location.href); } catch (_) { return; }
    if (url.pathname === window.location.pathname && url.hash && url.hash.length > 1) {
      var id = decodeURIComponent(url.hash.slice(1));
      if (document.getElementById(id)) {
        e.preventDefault();
        if (history.replaceState) history.replaceState(null, '', url.hash);
        scrollToId(id, false);
      }
    }
  });
  // Honour a hash present on load — retry while the page's React tree mounts.
  if (window.location.hash && window.location.hash.length > 1) {
    var id = decodeURIComponent(window.location.hash.slice(1));
    var tries = 0;
    var iv = setInterval(function () {
      if (scrollToId(id, true) || ++tries > 40) clearInterval(iv);
    }, 60);
  }
})();