// v3 bottom sections — gifting (date espresso), bestsellers, FAQ, footer
const { useState: useStateB } = React;

/* ====== Gifting — DEEP DATE BROWN (elegant) ====== */
function Gifting() {
  const occasions = [
    { name:'Personal',    body:'Thoughtful selections for family visits, host gifts and everyday gestures that feel a little more special.' },
    { name:'Festive',     body:'Elegant assortments for celebration tables, shared moments and seasonal generosity.' },
    { name:'Hospitality', body:'Beautifully presented dates, nuts and dry fruits for coffee service, guest trays and warm hosting.' },
    { name:'Corporate',   body:'Premium boxes and curated assortments designed to leave a refined, lasting impression.' },
    { name:'Special',     body:'Elevated gift formats for milestones, events and moments worth marking with care.' },
  ];
  const [active, setActive] = useStateB(0);

  return (
    <section id="gifting" className="section bg-date" style={{position:'relative', overflow:'hidden'}} data-screen-label="Gifting">
      <NutBgParticles density={7} opacity={0.22}/>

      {/* huge gold serif word as background mark */}
      <div style={{
        position:'absolute', top:'10%', right:-40, fontFamily:"'Cormorant Garamond',serif",
        fontStyle:'italic', fontSize:'min(280px, 22vw)', lineHeight:0.9,
        color:'transparent', WebkitTextStroke:'1px rgba(212,162,74,0.22)',
        pointerEvents:'none', userSelect:'none', fontWeight:500,
      }}>Gifting</div>

      <div className="wrap" style={{position:'relative'}}>
        <div className="split-2" style={{gap:'clamp(48px,6vw,80px)'}}>
          <Reveal>
            <div style={{position:'relative', aspectRatio:'4/5', maxWidth:'clamp(380px, 36vw, 700px)'}}>
              <img src="assets/gift_options.webp" alt="Premium gift box of nuts and dry fruits"
                style={{width:'100%', height:'100%', objectFit:'cover', borderRadius:'var(--r-lg)',
                boxShadow:'0 60px 100px -30px rgba(0,0,0,0.65), 0 0 0 1px rgba(212,162,74,0.25)'}}/>
              <div style={{position:'absolute', left:-20, top:36,
                background:'var(--cream)', color:'var(--ink)',
                padding:'14px 18px', borderRadius:6, boxShadow:'0 24px 50px -18px rgba(0,0,0,0.5)',
                display:'flex', alignItems:'center', gap:14, border:'1px solid rgba(212,162,74,0.35)'}}>
                <div style={{width:40, height:40, background:'var(--saffron)', borderRadius:6, display:'grid', placeItems:'center'}}>
                  <Icon.Gift/>
                </div>
                <div>
                  <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:20, lineHeight:1}}>Corporate Gifting</div>
                  <div style={{fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--gold-deep)', fontWeight:700, marginTop:4}}>50+ boxes · brand-stamped</div>
                </div>
              </div>
              <div style={{position:'absolute', right:-22, bottom:28,
                background:'var(--saffron)', color:'var(--ink)',
                borderRadius:6, padding:'14px 18px', boxShadow:'0 24px 50px -18px rgba(0,0,0,0.5)',
                transform:'rotate(2deg)'}}>
                <div style={{fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', fontWeight:700}}>From</div>
                <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:28, lineHeight:1, marginTop:2}}>AED 145</div>
                <div style={{fontSize:10.5, marginTop:4, opacity:0.85, letterSpacing:'0.04em'}}>Hand-tied ribbon included</div>
              </div>
              {/* floating accent nuts */}
              <span className="nut-float" style={{position:'absolute', top:'40%', left:'-7%', animationDelay:'-1s', filter:'drop-shadow(0 6px 10px rgba(0,0,0,0.4))'}}>
                <NutSvg.Pistachio size={42}/>
              </span>
              <span className="nut-float b" style={{position:'absolute', top:'-3%', right:'12%', animationDelay:'-3s'}}>
                <NutSvg.Date size={32}/>
              </span>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <Eyebrow light>Premium Gifting</Eyebrow>
            <h2 className="serif" style={{fontSize:'clamp(34px,4.4vw,96px)', lineHeight:1.0, marginTop:22, marginBottom:24,
              color:'var(--cream)', fontWeight:500, letterSpacing:'-0.005em'}}>
              Gifting,<br/>
              <span style={{fontStyle:'italic', color:'var(--gold-3)'}}>ready for any occasion.</span>
            </h2>
            <p style={{fontSize:17, lineHeight:1.65, color:'rgba(244,236,220,0.82)', maxWidth:'clamp(360px, 32vw, 620px)', margin:0}}>
              From personal thank-yous and festive tables to hospitality trays and corporate
              gestures, every gift format is designed to feel generous, considered, and easy to choose.
            </p>

            <div style={{marginTop:32, borderTop:'1px solid rgba(212,162,74,0.25)'}}>
              {occasions.map((o, i)=>{
                const open = active===i;
                return (
                  <button key={o.name} onClick={()=>setActive(i)}
                    style={{width:'100%', textAlign:'left', padding:'22px 0',
                      background:'transparent', border:'none', cursor:'pointer', color:'var(--cream)',
                      borderBottom:'1px solid rgba(212,162,74,0.25)',
                      display:'grid', gridTemplateColumns:'auto 1fr auto', gap:20, alignItems:'center',
                      fontFamily:'inherit'}}>
                    <span style={{fontFamily:"'Cormorant Garamond',serif", fontStyle:'italic',
                      color:'var(--gold-3)', fontSize:15, width:24}}>0{i+1}</span>
                    <div>
                      <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:26, lineHeight:1.1,
                        color: open ? 'var(--gold-3)' : 'var(--cream)', transition:'color .3s'}}>{o.name} Gifting</div>
                      {open && (
                        <div style={{fontSize:14, color:'rgba(244,236,220,0.72)', marginTop:8, maxWidth:480}}>{o.body}</div>
                      )}
                    </div>
                    <span style={{transition:'all .3s', transform: open?'rotate(45deg)':'rotate(0)',
                      color: open ? 'var(--gold-3)' : 'rgba(244,236,220,0.55)'}}><Icon.Plus/></span>
                  </button>
                );
              })}
            </div>

            <div style={{display:'flex', gap:12, marginTop:36, flexWrap:'wrap'}}>
              <a className="btn btn-gold" href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }}>Explore Gift Boxes <Icon.Arrow/></a>
              <a className="btn btn-ghost" href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }}>Corporate Enquiry</a>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ====== Bestsellers ====== */
// const products = [
//   { name:'Mamra Almonds, Premium',     cat:'Nuts',       weight:'250 g', price:64, was:74, badge:'Bestseller', img:'assets/poster-sunlight.png',   objPos:'30% 70%' },
//   { name:'Saffron-Honey Soaked Mix',   cat:'Signature',  weight:'400 g', price:128, badge:'Signature',         img:'assets/poster-jar.png',         objPos:'50% 65%' },
//   { name:'Pistachio Kunafa Chocolate', cat:'Chocolates', weight:'200 g', price:54,  badge:'New Season',        img:'assets/poster-pistachio.png',   objPos:'68% 55%' },
//   { name:'Premium Dry Fruits Box',     cat:'Gifting',    weight:'600 g', price:185, badge:'Gift',              img:'assets/poster-gift.png',        objPos:'50% 70%' },
//   { name:'Roasted Cashews, Lightly Salted', cat:'Nuts',  weight:'300 g', price:48,                              img:'assets/poster-premium.png',     objPos:'72% 60%' },
//   { name:'Medjool Dates, Royal',       cat:'Dates',      weight:'500 g', price:72,  badge:'Bestseller',         img:'assets/poster-collection.png',  objPos:'52% 60%' },
// ];

// function Bestsellers() {
//   const [filter, setFilter] = useStateB('All');
//   const tabs = ['All','Bestseller','Signature','New Season','Gifting'];
//   const filtered = filter==='All' ? products : products.filter(p => (p.badge||p.cat)===filter || p.cat===filter);
//   return (
//     <section className="section bg-pattern-cream" data-screen-label="Bestsellers">
//       <div className="wrap">
//         <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', flexWrap:'wrap', gap:24, marginBottom:48}}>
//           <Reveal>
//             <Eyebrow>Bestsellers</Eyebrow>
//             <h2 className="serif" style={{fontSize:'clamp(34px,4.2vw,90px)', lineHeight:1.05, marginTop:18,
//               color:'var(--ink)', fontWeight:500, letterSpacing:'-0.005em', marginBottom:0}}>
//               Favorites returning to <span style={{fontStyle:'italic', color:'var(--gold-deep)'}}>UAE pantries.</span>
//             </h2>
//           </Reveal>
//           <Reveal delay={120}>
//             <div style={{display:'flex', gap:4, flexWrap:'wrap',
//               background:'#fff', padding:5, borderRadius:6, border:'1px solid rgba(139,106,40,0.18)'}}>
//               {tabs.map(t => (
//                 <button key={t} onClick={()=>setFilter(t)} style={{
//                   padding:'10px 16px', borderRadius:4, cursor:'pointer',
//                   background: filter===t?'var(--ink)':'transparent',
//                   color: filter===t?'var(--cream)':'var(--ink)',
//                   border: 'none', fontSize:12, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase',
//                   transition:'all .25s', fontFamily:'inherit'
//                 }}>{t}</button>
//               ))}
//             </div>
//           </Reveal>
//         </div>

//         <div className="grid-3">
//           {filtered.slice(0,6).map((p, i)=>(
//             <Reveal key={p.name} delay={i*60} variant="slide-up"><ProductCard p={p}/></Reveal>
//           ))}
//         </div>

//         <div style={{display:'flex', justifyContent:'center', marginTop:48}}>
//           <a className="btn btn-ghost-dark" href="#">View All Products <Icon.Arrow/></a>
//         </div>
//       </div>
//     </section>
//   );
// }

// function ProductCard({p}) {
//   return (
//     <div className="prod-card tilt-glow" style={{
//       background:'#fff', borderRadius:'var(--r-md)', overflow:'hidden',
//       border:'1px solid rgba(139,106,40,0.14)',
//       display:'flex', flexDirection:'column'
//     }}>
//       <div style={{position:'relative', aspectRatio:'1/1', overflow:'hidden', background:'#EFE4CC'}}>
//         <img src={p.img} alt={p.name} className="prod-img"
//           style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:p.objPos||'center', transition:'transform .8s ease'}}/>
//         {p.badge && (
//           <div style={{position:'absolute', top:14, left:14,
//             background:'var(--saffron)', color:'var(--ink)',
//             fontSize:10, fontWeight:700, letterSpacing:'0.18em', textTransform:'uppercase',
//             padding:'6px 10px', borderRadius:4}}>{p.badge}</div>
//         )}
//         <button aria-label="Wishlist" style={{position:'absolute', top:14, right:14,
//           width:36, height:36, borderRadius:99, background:'rgba(255,255,255,0.95)',
//           border:'1px solid rgba(7,15,42,0.1)', cursor:'pointer',
//           display:'grid', placeItems:'center', color:'var(--ink)'}}><Icon.Heart/></button>
//         <div style={{position:'absolute', bottom:14, right:14,
//           background:'rgba(7,15,42,0.85)', backdropFilter:'blur(6px)', color:'var(--gold-3)',
//           fontSize:10, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase',
//           padding:'6px 10px', borderRadius:4}}>{p.weight}</div>
//       </div>
//       <div style={{padding:'22px 22px'}}>
//         <div style={{fontSize:10.5, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--gold-deep)', fontWeight:700}}>{p.cat}</div>
//         <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:23, lineHeight:1.15, color:'var(--ink)', marginTop:6, fontWeight:500}}>
//           {p.name}
//         </div>
//         <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:18}}>
//           <div style={{display:'flex', alignItems:'baseline', gap:8}}>
//             <span style={{fontFamily:"'Cormorant Garamond',serif", fontSize:26, color:'var(--ink)', fontWeight:600}}>AED {p.price}</span>
//             {p.was && <span style={{fontSize:13, color:'var(--ink-soft)', textDecoration:'line-through'}}>AED {p.was}</span>}
//           </div>
//           <button className="btn btn-dark btn-sm" style={{borderRadius:4}}>
//             <Icon.Plus/> <span>Add</span>
//           </button>
//         </div>
//       </div>
//       <style>{`.prod-card:hover .prod-img{ transform: scale(1.06); }`}</style>
//     </div>
//   );
// }

/* ====== FAQ — warm paper ====== */
function FAQ() {
  const faqs = [
    { q:'How fresh are Nuts Hub products?', a:'Stock is rotated frequently and packed in small batches at our Abu Dhabi facility. Sachets and pouches are nitrogen-sealed where appropriate to help protect freshness from shelf to serving.' },
    { q:'Do you deliver across the UAE?', a:'Yes — across all seven Emirates, with complimentary delivery on orders over AED 150. Temperature-aware handling is used for chocolate items during summer months.' },
    { q:'Can I customize a corporate gifting order?', a:'Absolutely. We offer custom corporate gifting from 50 boxes upward — including brand-stamped boxes, custom assortments, hand-tied ribbon details, and dedicated event coordination.' },
    { q:'Are your packs suitable for school lunchboxes?', a:'School packs are portion-friendly with clear ingredient and allergen visibility on every pouch. No artificial colors, and many school-friendly mixes are nut-free where labelled.' },
    { q:'What pack sizes are available?', a:'Five formats: small sachets (20–35g), daily packs (80–150g), family packs (250–500g), bulk packs (1kg and above), and curated premium gift boxes.' },
    { q:'Where are your products sourced?', a:'Each category is selected for flavor and consistency at the origin — almonds from California, pistachios from Iran and California, dates from Saudi Arabia, the UAE and Tunisia, and saffron from Iran.' },
  ];
  const [open, setOpen] = useStateB(0);
  return (
    <section className="section bg-cream" data-screen-label="FAQ">
      <div className="wrap" style={{maxWidth:1080}}>
        <Reveal>
          <div style={{textAlign:'center', marginBottom:56}}>
            <Eyebrow align="center">Questions, Answered</Eyebrow>
            <h2 className="serif" style={{fontSize:'clamp(34px,4.2vw,90px)', lineHeight:1.05, marginTop:18,
              color:'var(--ink)', fontWeight:500, letterSpacing:'-0.005em', marginBottom:0}}>
              Everything you might <span style={{fontStyle:'italic', color:'var(--gold-deep)'}}>want to know.</span>
            </h2>
          </div>
        </Reveal>
        <Reveal variant="slide-up">
          <div style={{background:'#fff', border:'1px solid rgba(139,106,40,0.14)',
            borderRadius:'var(--r-md)', overflow:'hidden'}}>
            {faqs.map((f, i)=>{
              const isOpen = open===i;
              return (
                <div key={f.q} style={{borderTop: i===0?'none':'1px solid rgba(139,106,40,0.12)'}}>
                  <button onClick={()=>setOpen(isOpen?-1:i)} style={{
                    width:'100%', background:'transparent', border:'none', cursor:'pointer',
                    padding:'24px 28px', display:'grid', gridTemplateColumns:'auto 1fr auto', gap:24,
                    alignItems:'center', textAlign:'left', color:'var(--ink)', fontFamily:'inherit'
                  }}>
                    <span style={{fontFamily:"'Cormorant Garamond',serif", fontStyle:'italic', color:'var(--gold-deep)', fontSize:16, width:30}}>0{i+1}</span>
                    <span style={{fontFamily:"'Cormorant Garamond',serif", fontSize:22, fontWeight:500, color: isOpen?'var(--gold-deep)':'var(--ink)', transition:'color .25s'}}>{f.q}</span>
                    <span style={{
                      width:36, height:36, borderRadius:99, display:'grid', placeItems:'center',
                      background: isOpen?'var(--saffron)':'rgba(7,15,42,0.05)',
                      color: isOpen?'var(--ink)':'var(--gold-deep)',
                      border: isOpen?'none':'1px solid rgba(139,106,40,0.2)',
                      transition:'all .25s'
                    }}>
                      {isOpen ? <Icon.Minus/> : <Icon.Plus/>}
                    </span>
                  </button>
                  <div style={{maxHeight: isOpen?260:0, overflow:'hidden', transition:'max-height .4s cubic-bezier(.2,.7,.2,1)'}}>
                    <div style={{padding:'0 28px 26px 82px', color:'var(--ink-soft)', fontSize:15, lineHeight:1.65}}>{f.a}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Reveal>

        <Reveal>
          <div style={{marginTop:32, textAlign:'center', padding:'20px',
            borderRadius:6, border:'1px dashed rgba(139,106,40,0.3)',
            color:'var(--ink)', fontSize:14}}>
            Still curious? <a href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} style={{color:'var(--gold-deep)', fontWeight:600, textDecoration:'none'}}>
              <span className="u-draw">Chat with our pantry team</span>
            </a> — usually replied within an hour during UAE business hours.
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ====== Footer — KEEP NAVY as contrast anchor ====== */
function Footer() {
  const cols = [
    { h:'Shop', items:['Nuts','Dry Fruits','Dates','Spices','Snack Mixes','Chocolates','New Arrivals','Bestsellers'] },
    { h:'By Need', items:['School Packs','Office Packs','Family Packs','Bulk Packs','Lunchbox Sachets','Trail Mixes'] },
    { h:'Gifting', items:['Gift Boxes','Festive Selections','Hospitality Trays','Corporate Gifting','Custom Orders'] },
    { h:'Support', items:['Contact','Shipping & Delivery','Returns','FAQ','Allergen Info','Storage Tips'] },
  ];
  return (
    <footer style={{background:'var(--navy)', color:'var(--cream)', paddingTop:80, position:'relative', overflow:'hidden'}}>
      <div className="wrap">
        <div className="news-band" style={{
          background:'linear-gradient(135deg, #142049, var(--navy))',
          borderRadius:'var(--r-lg)', padding:'48px 56px',
          border:'1px solid rgba(212,162,74,0.28)',
          display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:48, alignItems:'center'
        }}>
          <div>
            <Eyebrow light>The Pantry Letter</Eyebrow>
            <h3 className="serif" style={{fontSize:'clamp(28px,3vw,64px)', lineHeight:1.1, marginTop:14,
              color:'var(--cream)', fontWeight:500, marginBottom:14}}>
              Premium picks, gentle notes,<br/>
              <span style={{fontStyle:'italic', color:'var(--gold-3)'}}>delivered monthly.</span>
            </h3>
            <p style={{color:'rgba(244,236,220,0.72)', margin:0, maxWidth:'clamp(320px, 28vw, 560px)', fontSize:15, lineHeight:1.6}}>
              Seasonal harvests, gifting drops, recipe ideas, and pantry restock reminders — no clutter.
            </p>
          </div>
          <form style={{display:'flex', gap:10, flexWrap:'wrap'}} onSubmit={e=>e.preventDefault()}>
            <input placeholder="you@email.com"
              style={{flex:'1 1 240px', padding:'16px 20px', borderRadius:4,
                border:'1px solid rgba(212,162,74,0.35)',
                background:'rgba(244,236,220,0.04)', color:'var(--cream)',
                fontSize:15, fontFamily:'inherit', outline:'none'}}/>
            <button type="submit" className="btn btn-gold btn-lg">Subscribe <Icon.Arrow/></button>
          </form>
        </div>
      </div>

      <div className="wrap" style={{paddingTop:72, paddingBottom:48}}>
        <div className="footer-grid">
          <div>
            <Logo light/>
            <p style={{color:'rgba(244,236,220,0.65)', marginTop:22, fontSize:14, lineHeight:1.6, maxWidth:320}}>
              The premium everyday destination for nuts, dry fruits, dates, spices, and smart
              snack formats — made for homes, workplaces, lunchboxes, hospitality, and gifting.
            </p>
            <div style={{display:'flex', gap:10, marginTop:22}}>
              {[<Icon.Insta key="i"/>, <Icon.Fb key="f"/>, <Icon.Tiktok key="t"/>].map((ic,i)=>(
                <a key={i} href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} aria-label="social" style={{
                  width:38, height:38, borderRadius:4, border:'1px solid rgba(212,162,74,0.32)',
                  display:'grid', placeItems:'center', color:'var(--gold-3)'
                }}>{ic}</a>
              ))}
            </div>
            <div style={{marginTop:28, display:'flex', flexDirection:'column', gap:10, fontSize:13.5, color:'rgba(244,236,220,0.78)'}}>
              <a href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} style={{color:'inherit', textDecoration:'none', display:'flex', alignItems:'center', gap:10}}>
                <span style={{color:'var(--gold-3)'}}><Icon.Phone/></span>+971 55 970 1501
              </a>
              <a href="mailto:info@thenutshub.com" style={{color:'inherit', textDecoration:'none', display:'flex', alignItems:'center', gap:10}}>
                <span style={{color:'var(--gold-3)'}}><Icon.Mail/></span>info@thenutshub.com
              </a>
              <div style={{display:'flex', gap:10}}>
                <span style={{color:'var(--gold-3)', marginTop:2}}><Icon.Pin/></span>
                <span>Al Falah Street, Abu Dhabi, UAE</span>
              </div>
            </div>
          </div>

          {cols.map(c => (
            <div key={c.h}>
              <div style={{fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--gold-3)', fontWeight:700, marginBottom:18}}>{c.h}</div>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10}}>
                {c.items.map(it=>(
                  <li key={it}>
                    <a href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} style={{color:'rgba(244,236,220,0.78)', textDecoration:'none', fontSize:14}}>
                      <span className="u-draw">{it}</span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{marginTop:64, paddingTop:32, borderTop:'1px solid rgba(212,162,74,0.18)', overflow:'hidden'}}>
          <div className="wordmark" style={{fontSize:'min(220px, 22vw)', textAlign:'center',
            color:'transparent', WebkitTextStroke:'1px rgba(212,162,74,0.35)',
            lineHeight:0.9, fontWeight:700, letterSpacing:'-0.02em'}}>nuts hub</div>
        </div>

        <div style={{display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:16,
          marginTop:24, paddingTop:24, borderTop:'1px solid rgba(212,162,74,0.12)',
          fontSize:12, color:'rgba(244,236,220,0.55)'}}>
          <div>© 2026 Nuts Hub Roastery. All rights reserved.</div>
          <div style={{display:'flex', gap:20}}>
            <a href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} style={{color:'inherit', textDecoration:'none'}}>Privacy</a>
            <a href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} style={{color:'inherit', textDecoration:'none'}}>Terms</a>
            <a href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} style={{color:'inherit', textDecoration:'none'}}>Allergen Notice</a>
          </div>
          <div>Made with care in Abu Dhabi · UAE</div>
        </div>
      </div>
      <style>{`
        .footer-grid{ display:grid; grid-template-columns:1.3fr repeat(4, 1fr); gap:40px; }
        @media (max-width:980px){
          .footer-grid{ grid-template-columns:1fr 1fr; }
          .news-band{ grid-template-columns:1fr !important; padding:36px !important; }
        }
        @media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Gifting, FAQ, Footer });