const K = window.SussexAudioDesignSystem_94213f;

/* FastSpring popup checkout (SBL). The fastspring-builder script with
   data-storefront is loaded per buy-page <head>; it exposes window.fastspring. */
const FASTSPRING_PRODUCT_PATH = 'freqkey';
function fsCheckout() {
  const b = window.fastspring && window.fastspring.builder;
  if (!b) return;
  try { b.reset(); b.add(FASTSPRING_PRODUCT_PATH); b.checkout(); } catch (e) { /* no-op */ }
}

function BagIcon() {
  return (
    <a href="cart.html" aria-label="Cart" style={{ width: 40, height: 40, borderRadius: 'var(--radius-full)', border: '1px solid var(--hairline)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)' }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8h12l-1 13H7L6 8z"></path><path d="M9 8V6a3 3 0 0 1 6 0v2"></path></svg>
    </a>
  );
}

function SiteNav({ active }) {
  const links = [['Plug-ins', 'freqkey.html'], ['Downloads', 'downloads.html'], ['Support', 'support.html']];
  return (
    <nav style={{ position: 'sticky', top: 0, zIndex: 20, background: '#faf7f1', borderBottom: '1px solid rgba(33,28,23,.10)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', height: 110, display: 'flex', alignItems: 'flex-end', paddingBottom: 0, gap: 28, padding: '0 32px' }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'flex-end', gap: 16, textDecoration: 'none', flex: 1, minWidth: 0, paddingBottom: 14 }}>
          <img src="assets/sussex-logo.png" alt="Sussex Audio" style={{ height: 78, display: 'block' }} />
          <span className="sa-tagline" style={{ font: '300 16px Oswald, var(--font-sans)', letterSpacing: '0.03em', textTransform: 'lowercase', color: '#7a7064', whiteSpace: 'nowrap', lineHeight: 1, paddingBottom: 15 }}>( audio tools for humans )</span>
        </a>
        <ul style={{ display: 'flex', gap: 8, listStyle: 'none', margin: 0, padding: '0 0 14px', alignItems: 'flex-end' }}>
          {links.map(([l, href]) => (
            <li key={l}><a href={href} style={{ font: '300 20px Oswald, var(--font-sans)', letterSpacing: '0.02em', color: 'var(--ink)', textDecoration: active === l ? 'underline' : 'none', textUnderlineOffset: 6, lineHeight: 1, padding: '0 12px 14px', display: 'block' }}>{l}</a></li>
          ))}
        </ul>
        <div style={{ paddingBottom: 7, marginBottom: 11 }}><BagIcon /></div>
      </div>
    </nav>
  );
}

/* Kit (ConvertKit) newsletter signup — posts to the hosted form endpoint.
   no-cors keeps the visitor on the page; Kit sends the double opt-in email. */
const KIT_FORM_ACTION = 'https://app.kit.com/forms/9547787/subscriptions';

function FooterSignup() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | ok | err
  const onSubmit = (e) => {
    e.preventDefault();
    const email = (e.target.email_address.value || '').trim();
    if (!email) return;
    setStatus('sending');
    fetch(KIT_FORM_ACTION, {
      method: 'POST',
      mode: 'no-cors',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({ email_address: email }).toString(),
    }).then(() => setStatus('ok')).catch(() => setStatus('err'));
  };
  const inputStyle = { flex: '1 1 auto', minWidth: 0, padding: '12px 14px', font: '400 15px var(--font-sans)', color: 'var(--ink)', background: 'var(--white)', border: '1px solid rgba(33,28,23,.20)', borderRadius: 'var(--radius-md)', outline: 'none' };
  const btnStyle = { flex: 'none', padding: '12px 22px', font: '500 15px var(--font-sans)', color: 'var(--white)', background: 'var(--ink)', border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer', whiteSpace: 'nowrap' };
  return (
    <div style={{ maxWidth: 1280, margin: '0 auto 40px', paddingBottom: 40, borderBottom: '1px solid rgba(33,28,23,.10)', display: 'flex', flexWrap: 'wrap', gap: '20px 48px', justifyContent: 'space-between', alignItems: 'center' }}>
      <div style={{ maxWidth: 460 }}>
        <div style={{ font: '500 22px Oswald, var(--font-sans)', letterSpacing: '0.01em', color: 'var(--ink)' }}>Stay updated</div>
        <div style={{ marginTop: 6, font: '330 15px/1.5 var(--font-sans)', letterSpacing: '-0.1px', color: '#7a7064' }}>Windows and AAX capabilities plus future versions.<br />Unsubscribe anytime.</div>
      </div>
      {status === 'ok' ? (
        <div style={{ flex: '1 1 300px', maxWidth: 460, font: '400 15px/1.5 var(--font-sans)', letterSpacing: '-0.1px', color: 'var(--ink)' }}>Thanks — check your email to confirm your subscription.</div>
      ) : (
        <form onSubmit={onSubmit} noValidate style={{ flex: '1 1 300px', maxWidth: 460, minWidth: 240 }}>
          <div style={{ display: 'flex', gap: 10 }}>
            <input name="email_address" type="email" required placeholder="you@studio.com" aria-label="Email address" style={inputStyle} />
            <button type="submit" disabled={status === 'sending'} style={btnStyle}>{status === 'sending' ? 'Subscribing…' : 'Subscribe'}</button>
          </div>
          {status === 'err' && <div style={{ marginTop: 8, font: '400 13px var(--font-sans)', color: '#c7383d' }}>Something went wrong — email hello@sussex-audio.com and we'll add you.</div>}
        </form>
      )}
    </div>
  );
}

function SiteFooter() {
  const links = [['FreqKey', 'freqkey.html'], ['Downloads', 'downloads.html'], ['Support', 'support.html'], ['EULA', 'eula.html'], ['Privacy', 'privacy.html']];
  const socials = [['Instagram', 'https://www.instagram.com/sussex.audio/'], ['TikTok', 'https://www.tiktok.com/@sussex.audio']];
  return (
    <footer style={{ background: '#faf7f1', borderTop: '1px solid rgba(33,28,23,.10)', padding: '56px 32px 36px' }}>
      <FooterSignup />
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', flexWrap: 'wrap', gap: 40, justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <img src="assets/sussex-logo.png" alt="Sussex Audio" style={{ height: 56, display: 'block' }} />
          <span style={{ font: '300 15px Oswald, var(--font-sans)', letterSpacing: '0.03em', textTransform: 'lowercase', color: '#7a7064' }}>( audio tools for humans )</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {links.map(([l, href]) => <a key={l} href={href} style={{ font: '330 16px var(--font-sans)', color: 'var(--ink)', textDecoration: 'none' }}>{l}</a>)}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <span style={{ font: '500 15px Oswald, var(--font-sans)', letterSpacing: '0.03em', color: '#4b4848' }}>Follow</span>
          {socials.map(([l, href]) => <a key={l} href={href} target="_blank" rel="noopener noreferrer" style={{ font: '330 16px var(--font-sans)', color: 'var(--ink)', textDecoration: 'none' }}>{l}</a>)}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <span style={{ font: '500 15px Oswald, var(--font-sans)', letterSpacing: '0.03em', color: '#4b4848' }}>Get in touch</span>
          <a href="mailto:hello@sussex-audio.com" style={{ font: '330 16px var(--font-sans)', color: 'var(--ink)', textDecoration: 'none' }}>hello@sussex-audio.com</a>
        </div>
      </div>
      <div style={{ maxWidth: 1280, margin: '40px auto 0', paddingTop: 18, borderTop: '1px solid rgba(33,28,23,.10)', font: '300 14px Oswald, var(--font-sans)', letterSpacing: '0.02em', color: '#7a7064' }}>
        © 2026 Sussex Audio (a division of Sussex Recordings)
      </div>
    </footer>
  );
}

/* Shared section shell: white canvas, 1280 column */
function Shell({ children, style }) {
  return <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px', ...style }}>{children}</div>;
}

Object.assign(window, { K, SiteNav, SiteFooter, Shell, fsCheckout });
