// Shared chrome — nav, footer, monogram, leaf marks

function Monogram({ size = 24, onClick }) {
  return (
    <div className="monogram" style={{ fontSize: size }} onClick={onClick}>
      <svg className="leaf-mark" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round">
        <path d="M10 18 Q10 12 10 4" />
        <path d="M10 14 Q5 13 3 9 Q7 11 10 12" fill="currentColor" fillOpacity="0.3" />
        <path d="M10 10 Q15 9 17 5 Q13 7 10 8" fill="currentColor" fillOpacity="0.3" />
      </svg>
      Jenna<span className="amp"> &amp; </span>Dillon
    </div>
  );
}

function Nav({ route, go, content }) {
  const items = [
    ['home', 'Home'],
    ['story', 'Our Story'],
    ['schedule', 'Schedule'],
    ['gallery', 'Gallery'],
    ['registry', 'Registry'],
    ['rsvp', 'RSVP'],
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <Monogram onClick={() => go('home')} />
        <div className="nav-date">{content.site.navDate}</div>
        <div className="nav-links">
          {items.map(([k, v]) => (
            <span
              key={k}
              className={"nav-link" + (route === k ? ' active' : '')}
              onClick={() => go(k)}
            >{v}</span>
          ))}
        </div>
      </div>
    </nav>
  );
}

function Footer({ go, content }) {
  const footer = content.footer;
  return (
    <footer className="footer" style={{ position: 'relative', overflow: 'hidden' }}>
      <window.PalmLeaf size={360} color="var(--cream)" animated style={{ position: 'absolute', top: -100, left: -120, transform: 'rotate(-30deg)', opacity: 0.12, pointerEvents: 'none' }} />
      <window.PalmLeaf size={360} color="var(--cream)" animated style={{ position: 'absolute', top: -100, right: -120, transform: 'scaleX(-1) rotate(-20deg)', opacity: 0.12, pointerEvents: 'none' }} />
      <window.FernFrond size={240} color="var(--fern-bright)" animated style={{ position: 'absolute', bottom: -80, left: '20%', opacity: 0.18, pointerEvents: 'none' }} />
      <window.MonsteraLeaf size={160} color="var(--cream)" animated style={{ position: 'absolute', bottom: -40, right: '25%', opacity: 0.15, pointerEvents: 'none' }} />
      <window.Butterfly size={36} color="var(--bloom)" animated style={{ position: 'absolute', top: '30%', right: '15%', opacity: 0.7, pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="footer-inner">
          <div>
            <div className="footer-mark">{window.textLines(footer.mark)}</div>
            <div className="body" style={{ marginTop: 18, maxWidth: 360, fontSize: 14 }}>
              {footer.body}
            </div>
          </div>
          <div>
            <div className="label" style={{ marginBottom: 14 }}>{footer.siteLabel}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <span className="text-link" onClick={() => go('story')}>Our story</span>
              <span className="text-link" onClick={() => go('schedule')}>Schedule</span>
              <span className="text-link" onClick={() => go('gallery')}>Gallery</span>
              <span className="text-link" onClick={() => go('registry')}>Registry</span>
              <span className="text-link" onClick={() => go('rsvp')}>RSVP</span>
            </div>
          </div>
          <div>
            <div className="label" style={{ marginBottom: 14 }}>{footer.reachLabel}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <span className="body" style={{ fontSize: 14 }}>{footer.email}</span>
              <span className="body" style={{ fontSize: 14 }}>{footer.rsvpBy}</span>
            </div>
          </div>
        </div>
        <div className="footer-meta">
          <span>{footer.copyright}</span>
          <span>{content.site.venueLabel}</span>
        </div>
      </div>
    </footer>
  );
}

window.Nav = Nav;
window.Footer = Footer;
window.Monogram = Monogram;