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

function NewsletterBand({ go }) {
  const [val, setVal] = useState('');
  const [done, setDone] = useState(false);
  const [focus, setFocus] = useState(false);
  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 }}>Join the list</h2>
      <p style={{ maxWidth: 420, margin: '14px auto 24px', color: 'var(--body)' }}>
        The occasional note on new pieces and slow mornings. No noise.</p>
      {done ? (
        <p style={{ color: 'var(--success)', letterSpacing: '0.5px' }}>Thank you — you're on the list.</p>
      ) : (
        <form onSubmit={(e) => { e.preventDefault(); if (val) setDone(true); }} style={{ display: 'flex', gap: 0, maxWidth: 420, margin: '0 auto' }}>
          <input value={val} onChange={(e) => setVal(e.target.value)} type="email" placeholder="Email address" onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
            style={{ flex: 1, 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' }}>Sign up</button>
        </form>
      )}
      <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' }}>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')], ['Shopee store', 'https://shopee.sg/Mocha-Mode-Tee-i.1121322403.28901191417']])}
        {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 });