// Nav.jsx — shared navigation + contact constants

const CONTACT_EMAIL = 'storeon.shopify.support@gmail.com';

const contactHref = (subject, body) => {
  const bodyCrlf = body.replace(/\r\n/g, '\n').replace(/\n/g, '\r\n');
  return `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(bodyCrlf)}`;
};

const MAIL = {
  project: contactHref(
    'New Shopify project',
    `Hi StoreOn,

I'd like to discuss a project. Here's what I can share so far (edit or delete any line that doesn't apply):

My Shopify store URL (or "not on Shopify yet"):
My website, if it's different from the store:
What I need help with (e.g. public app, custom app, theme, checkout UI, shipping/carrier logic, bulk sync, NutriScore, something else):
A short description of the problem or goal:
Any apps, themes, or systems we're already using:
Rough timeline or must-hit date (if you have one):

Thanks,
`,
  ),
  constellation: contactHref(
    'General inquiry — StoreOn',
    `Hi StoreOn,

I'm getting in touch after looking around your site. A few details that might help:

My Shopify store URL (or "not on Shopify yet"):
What I'm trying to figure out or build:
Anything else you'd want to know up front:

Thanks,
`,
  ),
  work: contactHref(
    'Question about your work',
    `Hi StoreOn,

I'm interested in how your past work might fit something we're planning.

My Shopify store URL (or "not on Shopify yet"):
What we're trying to ship or fix:
Which of your services or past projects sounds closest (if any):
Questions I have about your process or timeline:

Thanks,
`,
  ),
};

const Nav = ({ page, setPage }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const go = (fn) => { fn(); setMenuOpen(false); };

  return (
    <nav className="nav">
      <div className="container">
        <div className="nav-inner">
          <a href="#" className="brand" onClick={e => { e.preventDefault(); go(() => setPage('home')); }}>
            <BrandMark size={30} />
          </a>
          <div className="nav-links">
            <a href="#services" className={page === 'home' ? 'active' : ''}
              onClick={e => { e.preventDefault(); setPage('home'); setTimeout(() => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' }), 50); }}>Services</a>
            <a href="#nutriscore"
              onClick={e => { e.preventDefault(); setPage('home'); setTimeout(() => document.getElementById('nutriscore')?.scrollIntoView({ behavior: 'smooth' }), 50); }}>NutriScore</a>
            <a href="#blog" className={page === 'blog' || (page && page.startsWith('blog/')) ? 'active' : ''}
              onClick={e => { e.preventDefault(); go(() => setPage('blog')); }}>Writing</a>
            <a href="#work"
              onClick={e => { e.preventDefault(); setPage('home'); setTimeout(() => document.getElementById('work')?.scrollIntoView({ behavior: 'smooth' }), 50); }}>Work</a>
            <a href="#process"
              onClick={e => { e.preventDefault(); setPage('home'); setTimeout(() => document.getElementById('process')?.scrollIntoView({ behavior: 'smooth' }), 50); }}>Process</a>
            <a href="#privacy" className={page === 'privacy' ? 'active' : ''}
              onClick={e => { e.preventDefault(); setPage('privacy'); window.scrollTo(0, 0); }}>Privacy</a>
          </div>
          <a className="nav-cta" href={MAIL.project}>Start a project</a>
          <button className={`nav-hamburger${menuOpen ? ' open' : ''}`} onClick={() => setMenuOpen(o => !o)} aria-label="Toggle menu">
            <span/><span/><span/>
          </button>
        </div>
        <div className={`nav-mobile${menuOpen ? ' open' : ''}`}>
          <a href="#services" onClick={e => { e.preventDefault(); go(() => { setPage('home'); setTimeout(() => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' }), 50); }); }}>Services</a>
          <a href="#nutriscore" onClick={e => { e.preventDefault(); go(() => { setPage('home'); setTimeout(() => document.getElementById('nutriscore')?.scrollIntoView({ behavior: 'smooth' }), 50); }); }}>NutriScore</a>
          <a href="#blog" onClick={e => { e.preventDefault(); go(() => setPage('blog')); }}>Writing</a>
          <a href="#work" onClick={e => { e.preventDefault(); go(() => { setPage('home'); setTimeout(() => document.getElementById('work')?.scrollIntoView({ behavior: 'smooth' }), 50); }); }}>Work</a>
          <a href="#process" onClick={e => { e.preventDefault(); go(() => { setPage('home'); setTimeout(() => document.getElementById('process')?.scrollIntoView({ behavior: 'smooth' }), 50); }); }}>Process</a>
          <a href="#privacy" onClick={e => { e.preventDefault(); go(() => { setPage('privacy'); window.scrollTo(0, 0); }); }}>Privacy</a>
          <a className="nav-mobile-cta" href={MAIL.project} onClick={() => setMenuOpen(false)}>Start a project</a>
        </div>
      </div>
    </nav>
  );
};

Object.assign(window, { MAIL, Nav });