// Footer.jsx — dark footer with wordmark, links, studio block
const Footer = ({ onNav }) => {
  const go = (r) => onNav(r);
  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="ftr-top">
          <div>
            <div className="ftr-word">The argument<br/>is the work.</div>
            <p className="body on-dark" style={{maxWidth:300, fontSize:15}}>
              Mixed-media paintings made where Midjourney-originated imagery meets cut paper,
              ripped material, and oil applied by hand.
            </p>
          </div>

          <div className="ftr-col">
            <h5>Series</h5>
            {window.SERIES.map(s => (
              <a key={s.id} onClick={() => go('series/' + s.id)}>{s.title}</a>
            ))}
            <a onClick={() => go('series')}>All series &amp; archive</a>
          </div>

          <div className="ftr-col">
            <h5>Studio</h5>
            <a onClick={() => go('about')}>About the artist</a>
            <a onClick={() => go('collect')}>Collect &amp; inquire</a>
            <a onClick={() => go('collect')}>Shipping &amp; FAQ</a>
            <a href={window.STUDIO.igUrl} target="_blank" rel="noreferrer">Instagram</a>
            <a href={window.STUDIO.fbUrl} target="_blank" rel="noreferrer">Facebook</a>
          </div>

          <div className="ftr-col">
            <h5>The studio list</h5>
            <p className="meta on-dark" style={{marginBottom:16, lineHeight:1.7}}>
              First access to new work, collector previews, and notes from the Veil workshop.
            </p>
            <NewsletterMini onNav={onNav} />
          </div>
        </div>

        <div className="ftr-bottom">
          <div className="meta on-dark">
            {window.STUDIO.studio} &nbsp;·&nbsp; {window.STUDIO.email}
          </div>
          <div className="meta on-dark" style={{display:'flex', alignItems:'center', gap:10}}>
            <span>© 2026 Drury Bynum</span>
            <span className="flare-dot sm"></span>
            <span>Trusted Art Seller</span>
          </div>
        </div>
      </div>
    </footer>
  );
};

const NewsletterMini = () => {
  const [v, setV] = React.useState('');
  const [done, setDone] = React.useState(false);
  if (done) return <div className="lead on-dark" style={{fontSize:15}}>On the list — watch your inbox.</div>;
  return (
    <form style={{display:'flex', gap:0, borderBottom:'1px solid var(--veil-line)'}}
          onSubmit={e => { e.preventDefault(); if(v.trim()) setDone(true); }}>
      <input value={v} onChange={e=>setV(e.target.value)} type="email" required placeholder="Email address"
        style={{flex:1, background:'transparent', border:'none', color:'var(--veil)',
                fontFamily:'var(--font-body)', fontSize:14, padding:'10px 0', outline:'none'}} />
      <button type="submit" className="link-arrow" style={{paddingLeft:14}}>
        Join <span className="ar">→</span>
      </button>
    </form>
  );
};
Object.assign(window, { Footer, NewsletterMini });