/* OAIRSIS Store — sections B (dark, image-forward): feature bands, lifestyle band, newsletter, footer, cart drawer. */
const { Button: BtnB, Input: InputB, Badge: BadgeB } = window.OAIRSISDesignSystem_ed13d9;

function FeatureBand({ img, side, eyebrow, title, text, productId, onAdd }) {
  const textLeft = side === 'left';
  const scrim = textLeft
    ? 'linear-gradient(90deg, rgba(2,35,24,0.97) 0%, rgba(2,35,24,0.88) 32%, rgba(2,35,24,0.6) 62%, rgba(2,35,24,0.4) 100%)'
    : 'linear-gradient(270deg, rgba(2,35,24,0.97) 0%, rgba(2,35,24,0.88) 32%, rgba(2,35,24,0.6) 62%, rgba(2,35,24,0.4) 100%)';
  return (
    <section style={{ position: 'relative', minHeight: 580, display: 'flex', alignItems: 'center', overflow: 'hidden', background: 'var(--color-evergreen)' }}>
      <img src={img} alt={title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: textLeft ? '85% center' : '15% center' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(2,35,24,0.22)' }} />
      <div style={{ position: 'absolute', inset: 0, background: scrim }} />
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '0 36px', width: '100%', display: 'flex', justifyContent: textLeft ? 'flex-start' : 'flex-end' }}>
        <div style={{ maxWidth: 460 }}>
          <div className="text-eyebrow" style={{ color: 'var(--color-pine-300)' }}>{eyebrow}</div>
          <h2 style={{ fontFamily: 'var(--font-primary)', fontSize: 46, fontWeight: 700, color: '#fff', margin: '14px 0 0', lineHeight: 1.08, letterSpacing: '-0.02em' }}>{title}</h2>
          <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 17, lineHeight: 1.62, color: 'rgba(255,255,255,0.74)', margin: '18px 0 0' }}>{text}</p>
          <div style={{ marginTop: 30 }}>
            <Button variant="primary" size="lg" iconRight={<IArrow size={18} />} onClick={() => onAdd(window.PRODUCTS.find(p => p.id === productId))}>Shop now</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function FeatureBands({ onAdd }) {
  return (
    <React.Fragment>
      <FeatureBand img="../assets/products/scene-juicer.jpg" side="left" eyebrow="Multi-functional juicer" productId="fresh" onAdd={onAdd}
        title="Juice, blend, nourish" text="Cold-press technology locks in nutrients for vibrant juice, smoothies and soups — quiet, powerful, and ready in seconds." />
      <FeatureBand img="../assets/products/scene-icecream.jpg" side="right" eyebrow="Ice cream machine" productId="frost" onAdd={onAdd}
        title="Dessert, made at home" text="Whip up creamy gelato, sorbet and frozen yoghurt at the touch of a button. No pre-freezing, no fuss — just joy in a bowl." />
    </React.Fragment>
  );
}

function PromoBanner({ onShop }) {
  return (
    <section style={{ background: 'var(--color-evergreen)', padding: '0 36px 8px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-xl)', background: 'linear-gradient(120deg, var(--color-evergreen-700) 0%, #06502f 100%)', border: '1px solid rgba(255,255,255,0.08)', padding: '56px 56px' }}>
        <div style={{ position: 'absolute', width: 360, height: 360, borderRadius: '50%', border: '1.5px solid rgba(111,201,140,0.2)', right: -90, top: -120 }} />
        <div style={{ position: 'absolute', width: 220, height: 220, borderRadius: '50%', border: '1.5px solid rgba(111,201,140,0.2)', right: -10, top: -40 }} />
        <div style={{ position: 'relative', maxWidth: 560 }}>
          <BadgeB variant="solid" size="md">Limited offer</BadgeB>
          <h2 style={{ fontFamily: 'var(--font-primary)', fontSize: 38, fontWeight: 700, margin: '16px 0 10px', letterSpacing: '-0.02em', color: '#fff' }}>Save up to 20% on kitchen bundles</h2>
          <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', margin: '0 0 26px', maxWidth: 440 }}>
            Pair your favourite appliances and bring smart, effortless cooking to every corner of your home.
          </p>
          <Button variant="inverse" size="lg" onClick={onShop}>Explore bundles</Button>
        </div>
      </div>
    </section>
  );
}

function LifestyleBand() {
  const vals = [[window.IShield, 'Quality assurance'], [window.ICheck, 'Safe and secure'], [window.ILeaf, 'Energy saving'], [window.ISparkle, 'Versatile & stylish']];
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--color-evergreen-900)' }}>
      <img src="../assets/products/scene-cooking.jpg" alt="A family cooking together" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 28%' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(2,35,24,0.82) 0%, rgba(2,35,24,0.7) 45%, rgba(1,26,18,0.92) 100%)' }} />
      <div style={{ position: 'relative', maxWidth: 920, margin: '0 auto', padding: '96px 36px', textAlign: 'center' }}>
        <img src="../assets/logo/oairsis-logo-white.png" alt="OAIRSIS" style={{ height: 30 }} />
        <p style={{ fontFamily: 'var(--font-primary)', fontSize: 23, fontWeight: 500, lineHeight: 1.55, color: '#fff', margin: '26px auto 0', maxWidth: 740 }}>
          OAIRSIS researches home appliances that are safe, reliable and reassuring — so every household feels relaxed and comfortable, as if surrounded by nature.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20, marginTop: 52 }}>
          {vals.map(([Ic, t]) => (
            <div key={t} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 13 }}>
              <span style={{ width: 56, height: 56, borderRadius: '50%', border: '1.5px solid var(--color-pine-300)', color: 'var(--color-pine-300)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic size={24} /></span>
              <span style={{ fontFamily: 'var(--font-primary)', fontSize: 14.5, fontWeight: 600, color: '#fff' }}>{t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Newsletter() {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  return (
    <section style={{ background: 'var(--color-evergreen)', padding: '72px 36px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 28, padding: '44px 48px', background: 'var(--color-evergreen-700)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 'var(--radius-xl)' }}>
        <div style={{ maxWidth: 460 }}>
          <h2 style={{ fontFamily: 'var(--font-primary)', fontSize: 30, fontWeight: 700, color: '#fff', margin: 0, letterSpacing: '-0.01em' }}>Get recipes & 10% off</h2>
          <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 15, color: 'rgba(255,255,255,0.66)', margin: '8px 0 0' }}>Join the OAIRSIS kitchen for tips, new drops and member pricing.</p>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', minWidth: 380 }}>
          <div style={{ display: 'flex', alignItems: 'center', height: 52, padding: '0 18px', flex: 1, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: 'var(--radius-md)' }}>
            <input value={email} onChange={e => setEmail(e.target.value)} placeholder="you@home.com" style={{ border: 'none', outline: 'none', background: 'transparent', width: '100%', fontFamily: 'var(--font-secondary)', fontSize: 15, color: '#fff' }} />
          </div>
          <Button variant="primary" size="lg" onClick={() => setDone(true)}>{done ? 'Subscribed ✓' : 'Subscribe'}</Button>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ['Shop', ['Espresso machines', 'Stand mixers', 'Juicers', 'Frozen dessert', 'Bundles']],
    ['Support', ['Help center', 'Warranty', 'Shipping & returns', 'Contact us']],
    ['Company', ['Our story', 'Sustainability', 'News and tips', 'Careers']],
  ];
  return (
    <footer style={{ background: 'var(--color-evergreen-900)', color: 'rgba(255,255,255,0.7)', borderTop: '1px solid var(--color-evergreen-700)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '64px 36px 36px', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <img src="../assets/logo/oairsis-logo-white.png" alt="OAIRSIS" style={{ height: 22 }} />
          <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 13.5, lineHeight: 1.6, marginTop: 16, maxWidth: 250, color: 'rgba(255,255,255,0.5)' }}>Smart household appliances for cleaner, calmer, more delicious living in every room.</p>
        </div>
        {cols.map(([h, items]) => (
          <div key={h}>
            <div style={{ fontFamily: 'var(--font-primary)', fontSize: 13, fontWeight: 600, color: '#fff', marginBottom: 14 }}>{h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {items.map(i => <a key={i} style={{ fontFamily: 'var(--font-secondary)', fontSize: 13.5, color: 'rgba(255,255,255,0.55)', cursor: 'pointer' }}>{i}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid var(--color-evergreen-700)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '18px 36px', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-secondary)', fontSize: 12, color: 'rgba(255,255,255,0.4)' }}>
          <span>© 2026 OAIRSIS. All rights reserved.</span>
          <span>Privacy · Terms · Powered by Shopify</span>
        </div>
      </div>
    </footer>
  );
}

function CartDrawer({ open, items, onClose, onQty, onRemove }) {
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const freeAt = 99;
  const remain = Math.max(0, freeAt - subtotal);
  const pct = Math.min(100, (subtotal / freeAt) * 100);
  return (
    <React.Fragment>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(1,26,18,0.55)', opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none', transition: 'opacity var(--transition-normal)', zIndex: 60 }} />
      <aside style={{ position: 'fixed', top: 0, right: 0, bottom: 0, width: 420, maxWidth: '92vw', background: '#fff', boxShadow: 'var(--shadow-lg)', transform: open ? 'translateX(0)' : 'translateX(100%)', transition: 'transform var(--transition-normal)', zIndex: 61, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 24px', borderBottom: '1px solid var(--border-subtle)' }}>
          <h3 style={{ fontFamily: 'var(--font-primary)', fontSize: 18, fontWeight: 600, color: 'var(--text-strong)', margin: 0 }}>Your cart ({items.reduce((s, i) => s + i.qty, 0)})</h3>
          <button onClick={onClose} aria-label="Close" style={{ width: 36, height: 36, border: 'none', background: 'var(--bg-page)', borderRadius: '50%', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-body)' }}><window.IClose size={18} /></button>
        </div>
        {items.length > 0 && (
          <div style={{ padding: '14px 24px', borderBottom: '1px solid var(--border-subtle)' }}>
            <div style={{ fontFamily: 'var(--font-secondary)', fontSize: 12.5, color: 'var(--text-muted)', marginBottom: 8 }}>
              {remain > 0 ? <span>Add <b style={{ color: 'var(--color-pine)' }}>{money(remain)}</b> for free shipping</span> : <span style={{ color: 'var(--color-pine)', fontWeight: 600 }}>✓ You've unlocked free shipping!</span>}
            </div>
            <div style={{ height: 6, borderRadius: 3, background: 'var(--bg-tint)', overflow: 'hidden' }}><div style={{ height: '100%', width: pct + '%', background: 'var(--color-pine)', borderRadius: 3, transition: 'width var(--transition-normal)' }} /></div>
          </div>
        )}
        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 24px' }}>
          {items.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '64px 0', color: 'var(--text-muted)' }}>
              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 12, color: 'var(--color-honeydew-300)' }}><window.ICart size={48} /></div>
              <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 14 }}>Your cart is empty.</p>
            </div>
          ) : items.map(i => (
            <div key={i.id} style={{ display: 'flex', gap: 14, padding: '16px 0', borderBottom: '1px solid var(--border-subtle)' }}>
              <div style={{ width: 72, height: 72, borderRadius: 'var(--radius-md)', background: 'var(--color-evergreen)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
                <img src={i.img} alt={i.name} style={{ width: '84%', height: '84%', objectFit: 'contain' }} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-primary)', fontSize: 14, fontWeight: 600, color: 'var(--text-strong)', lineHeight: 1.3 }}>{i.name}</div>
                <div style={{ fontFamily: 'var(--font-secondary)', fontSize: 13, color: 'var(--text-muted)', margin: '2px 0 8px' }}>{money(i.price)}</div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-pill)', overflow: 'hidden' }}>
                    <button onClick={() => onQty(i.id, -1)} style={qtyBtn}><window.IMinus size={14} /></button>
                    <span style={{ width: 28, textAlign: 'center', fontFamily: 'var(--font-secondary)', fontSize: 13.5, fontWeight: 500 }}>{i.qty}</span>
                    <button onClick={() => onQty(i.id, 1)} style={qtyBtn}><window.IPlus size={14} /></button>
                  </div>
                  <button onClick={() => onRemove(i.id)} style={{ border: 'none', background: 'none', cursor: 'pointer', fontFamily: 'var(--font-secondary)', fontSize: 12.5, color: 'var(--text-faint)' }}>Remove</button>
                </div>
              </div>
            </div>
          ))}
        </div>
        {items.length > 0 && (
          <div style={{ padding: '18px 24px 24px', borderTop: '1px solid var(--border-subtle)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
              <span style={{ fontFamily: 'var(--font-secondary)', fontSize: 14, color: 'var(--text-muted)' }}>Subtotal</span>
              <span style={{ fontFamily: 'var(--font-primary)', fontSize: 20, fontWeight: 700, color: 'var(--text-strong)' }}>{money(subtotal)}</span>
            </div>
            <BtnB variant="primary" size="lg" fullWidth>Checkout</BtnB>
            <p style={{ textAlign: 'center', fontFamily: 'var(--font-secondary)', fontSize: 12, color: 'var(--text-faint)', margin: '12px 0 0' }}>Taxes & shipping calculated at checkout</p>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}
const qtyBtn = { width: 30, height: 30, border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--color-evergreen)' };

Object.assign(window, { FeatureBand, FeatureBands, PromoBanner, LifestyleBand, Newsletter, Footer, CartDrawer });