/* ============================================================
   FOOTER + small shared blocks
   ============================================================ */
function Newsletter({ compact=false }){
  const [email,setEmail] = useState("");
  const [done,setDone] = useState(false);
  const submit = (e)=>{ e.preventDefault(); if(email.includes("@")) setDone(true); };
  return (
    <form className="news" onSubmit={submit}>
      {done ? (
        <p className="news-done"><Icon name="check" size={16}/> Welcome to the table — check your inbox for the canapé guide.</p>
      ) : (
        <div className="news-row">
          <input className="input" type="email" required placeholder="you@email.com" value={email} onChange={e=>setEmail(e.target.value)} aria-label="Email address"/>
          <button className="btn btn-gold" type="submit">Join the list</button>
        </div>
      )}
    </form>
  );
}

const FOOT = {
  Shop:[["Mye Noir · Seaweed Caviar","/"],["The Soirée","/"],["The Maison","/"],["The Collection","/"],["Wholesale","/wholesale"]],
  Learn:[["Our story","/story"],["About Mye","/about"],["Recipes","/recipes"],["FAQs","/faq"],["Reviews","/reviews"]],
  Support:[["Contact","/legal/contact"],["Shipping policy","/legal/shipping"],["Refund policy","/legal/refunds"],["Privacy policy","/legal/privacy"],["Terms of service","/legal/terms"]],
};

function Footer(){
  return (
    <footer className="footer deep on-dark">
      <div className="wrap-wide">
        <div className="foot-top">
          <div className="foot-brand">
            <Wordmark light/>
            <p className="lede" style={{marginTop:18,maxWidth:"34ch"}}>Restaurant-style vegan caviar for canapés, sushi, blinis and champagne nights. Seaweed-based, ready to serve.</p>
            <div className="foot-social">
              {["Instagram","TikTok","Pinterest"].map(s=>(
                <a key={s} className="foot-soc" href="#/" onClick={e=>e.preventDefault()} aria-label={s}>{s[0]}</a>
              ))}
            </div>
          </div>
          {Object.entries(FOOT).map(([h,links])=>(
            <div className="foot-col" key={h}>
              <p className="foot-h">{h}</p>
              <ul>{links.map(([l,to])=>(<li key={l}><Link to={to}>{l}</Link></li>))}</ul>
            </div>
          ))}
          <div className="foot-col foot-news">
            <p className="foot-h">Get hosting ideas & offers</p>
            <p className="small" style={{color:"rgba(244,238,225,.7)",marginBottom:14}}>Recipes, serving ideas and the occasional exclusive — no spam.</p>
            <Newsletter/>
          </div>
        </div>

        <div className="foot-bottom">
          <div className="foot-pay">
            <PaymentRow marks={["visa","mc","amex","maestro"]}/>
            <span className="xb-pill" style={{background:"#000",color:"#fff"}}> Pay</span>
            <span className="xb-pill" style={{background:"#5A31F4",color:"#fff"}}>shop Pay</span>
            <span className="xb-pill" style={{background:"#FFC439",color:"#003087",fontStyle:"italic"}}>PayPal</span>
          </div>
          <div className="foot-legal small">
            <span>© 2026 Mye Foods Ltd. Registered in England &amp; Wales.</span>
            <span className="foot-legal-links">
              <Link to="/legal/privacy">Privacy</Link><span>·</span>
              <Link to="/legal/terms">Terms</Link><span>·</span>
              <Link to="/legal/contact">Contact</Link>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

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