/* =========================================================================
   Morning Mob — newsletter band + footer (links route via `go`).
   ========================================================================= */

/* The list — see docs/adr/0001. This is a mailing list, not a membership: no tiers,
   no status, and none of the vocabulary CONTEXT.md forbids.

   `no-cors` means Buttondown's response cannot be read, so the confirmation never
   claims the address was accepted — only that a note is on its way. The previous
   version of this band faked success and discarded the address entirely. */
function NewsletterBand({ go }) {
  const [val, setVal] = useState('');
  const [done, setDone] = useState(false);
  const [focus, setFocus] = useState(false);
  const live = Boolean(MM_LIST_USERNAME);

  const submit = (e) => {
    e.preventDefault();
    if (!val) return;
    const body = new URLSearchParams();
    body.append('email', val.trim());
    body.append('embed', '1');
    body.append('tag', 'band');
    fetch(mmListAction(), {
      method: 'POST',
      mode: 'no-cors',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: body.toString(),
    }).catch(() => {});
    setDone(true);
  };

  return (
    <section style={{ background: 'var(--surface-soft)', marginTop: 80, padding: '80px 28px', textAlign: 'center' }}>
      <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 28, fontWeight: 400, color: 'var(--ink)', margin: 0 }}>Hear it first</h2>
      <p style={{ maxWidth: 440, margin: '14px auto 24px', color: 'var(--body)' }}>
        A note when a drop is coming, and nothing in between. Joining takes 10% off your first order.</p>
      {done ? (
        <p style={{ color: 'var(--success)', letterSpacing: '0.5px', maxWidth: 420, margin: '0 auto' }}>
          Check your email — a note is on its way, and your 10% is in it.</p>
      ) : live ? (
        <form onSubmit={submit} style={{ display: 'flex', gap: 0, maxWidth: 420, margin: '0 auto' }}>
          {/* `minWidth: 0` is load-bearing. A flex item defaults to `min-width: auto`,
              and for an input that resolves to its `size` attribute — 20 characters,
              which at the 16px phone stylesheet forces it to 224px. Without this the
              input refuses to shrink and pushes Join off the right edge: at 320px the
              button ended 13px past the viewport, and `overflow-x: hidden` on body
              clips it rather than letting anyone scroll to it. */}
          <input value={val} onChange={(e) => setVal(e.target.value)} type="email" placeholder="Email address" required onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
            style={{ flex: 1, minWidth: 0, height: 46, padding: '0 14px', border: '1px solid ' + (focus ? 'var(--hairline-strong)' : 'var(--hairline)'), borderRight: 'none',
              fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 300, outline: 'none', background: '#fff', borderRadius: 0 }} />
          <button type="submit" style={{ height: 46, padding: '0 24px', background: 'var(--ink)', color: '#fff', border: 'none',
            fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', cursor: 'pointer' }}>Join</button>
        </form>
      ) : (
        /* Not wired yet. Never render a form that posts nowhere — that was the bug.
           The address is shown as text, not hidden behind a mailto: a browser with no
           mail client configured does nothing at all when a mailto is clicked, which
           is its own kind of dead end. Readable beats clickable. */
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 300, color: 'var(--body)', margin: 0 }}>
          Email <a href="mailto:morningmobshop@gmail.com?subject=The%20list" style={{ color: 'var(--ink)', textDecoration: 'none', borderBottom: '1px solid var(--hairline-strong)', paddingBottom: 2 }}>morningmobshop@gmail.com</a> and we will add you.
        </p>
      )}
      <button onClick={() => go('about')} style={{ marginTop: 22, fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400,
        letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--muted)', background: 'none', border: 'none', cursor: 'pointer', display: 'block', marginInline: 'auto' }}>Read our story →</button>
    </section>
  );
}

function Footer({ go }) {
  const linkStyle = { fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 300, color: 'var(--muted)', cursor: 'pointer', background: 'none', border: 'none', padding: 0, textAlign: 'left', textDecoration: 'none' };
  const head = { fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink)', marginBottom: 16 };
  const col = (title, items) => (
    <div>
      <div style={head}>{title}</div>
      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
        {items.map(([label, action]) => (
          <li key={label}>{typeof action === 'string'
            ? <a href={action} target="_blank" rel="noopener noreferrer" style={linkStyle}>{label}</a>
            : <button onClick={action} style={linkStyle}>{label}</button>}</li>
        ))}
      </ul>
    </div>
  );
  return (
    <footer style={{ borderTop: '1px solid var(--hairline)', padding: '48px 28px' }}>
      <div className="mm-footer" style={{ maxWidth: 'var(--content-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr) auto', gap: 40 }}>
        {col('Shop', [['The Mocha Mode Tee', () => go('shop')], ['How to order', () => go('contact')]])}
        {col('Information', [['About', () => go('about')], ['FAQ', () => go('faq')], ['Returns', () => go('faq')], ['Contact', () => go('contact')]])}
        {col('Legal', [['Privacy policy', () => go('privacy')], ['Terms of service', () => go('terms')], ['Instagram', 'https://www.instagram.com/morning_mob/']])}
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 300, color: 'var(--muted)' }}>Country / Region</div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 300, color: 'var(--ink)', marginTop: 6 }}>Singapore (SGD)</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 16, letterSpacing: '3px', color: 'var(--ink)', marginTop: 28 }}>MM</div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 300, color: 'var(--muted)', marginTop: 8 }}>© 2026 Morning Mob</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { NewsletterBand, Footer });