/* OAIRSIS Lifestyle Store — sections B: product range, family band, newsletter, footer, cart. */

function LStars({ rating, size = 13 }) {
  return (
    <span style={{ display: 'inline-flex', gap: 1, color: '#C9A23F' }}>
      {[0,1,2,3,4].map(i => <span key={i} style={{ opacity: i < Math.round(rating) ? 1 : 0.28, display: 'inline-flex' }}><LStar size={size} /></span>)}
    </span>
  );
}

function ProductTile({ p, onAdd }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'flex', flexDirection: 'column', cursor: 'pointer' }}>
      <div style={{ position: 'relative', aspectRatio: '1/1', borderRadius: 'var(--r-lg)', overflow: 'hidden',
        background: 'radial-gradient(125% 125% at 50% 14%, #F7F2E7 0%, #E6DCC8 100%)',
        boxShadow: hover ? 'var(--shadow-soft)' : 'var(--shadow-card)', transition: 'box-shadow .25s ease' }}>
        {p.tag && <span style={{ position: 'absolute', top: 14, left: 14, zIndex: 2, fontFamily: 'var(--font-primary)', fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', padding: '5px 12px', borderRadius: 'var(--r-pill)', background: p.tag === 'New' ? 'var(--ls-pine)' : 'var(--ls-green)', color: 'var(--ls-cream-text)' }}>{p.tag}</span>}
        <img src={p.img} alt={p.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', padding: '11%', mixBlendMode: 'multiply', transform: hover ? 'scale(1.05)' : 'scale(1)', transition: 'transform .4s ease' }} />
        <div style={{ position: 'absolute', left: 14, right: 14, bottom: 14, transform: hover ? 'translateY(0)' : 'translateY(12px)', opacity: hover ? 1 : 0, transition: 'all .25s ease' }}>
          <button className="btn btn-md btn-green" style={{ width: '100%' }} onClick={(e) => { e.stopPropagation(); onAdd(p); }}>Add to bag · {window.lmoney(p.price)}</button>
        </div>
      </div>
      <div style={{ padding: '16px 4px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 7 }}>
          <LStars rating={p.rating} />
          <span style={{ fontFamily: 'var(--font-secondary)', fontSize: 12, color: 'var(--ls-faint)', whiteSpace: 'nowrap' }}>{p.rating} ({p.reviews})</span>
        </div>
        <h3 style={{ fontFamily: 'var(--font-primary)', fontSize: 18, fontWeight: 600, color: 'var(--ls-green)', margin: 0, lineHeight: 1.3 }}>{p.name}</h3>
        <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 13.5, color: 'var(--ls-muted)', margin: '5px 0 0', lineHeight: 1.5 }}>{p.blurb}</p>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 9, marginTop: 11 }}>
          <span style={{ fontFamily: 'var(--font-primary)', fontSize: 19, fontWeight: 700, color: 'var(--ls-ink)' }}>{window.lmoney(p.price)}</span>
          {p.was && <span style={{ fontFamily: 'var(--font-secondary)', fontSize: 13.5, color: 'var(--ls-faint)', textDecoration: 'line-through' }}>{window.lmoney(p.was)}</span>}
        </div>
      </div>
    </div>
  );
}

function ProductRange({ onAdd, rangeRef }) {
  const [cat, setCat] = React.useState('All');
  const list = cat === 'All' ? window.LPRODUCTS : window.LPRODUCTS.filter(p => p.cat === cat);
  return (
    <section ref={rangeRef} style={{ background: 'var(--ls-beige)', scrollMarginTop: 70 }}>
      <div className="wrap" style={{ padding: '90px 0 100px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 18, marginBottom: 34 }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--ls-pine)' }}>Shop the range</div>
            <h2 style={{ fontSize: 'clamp(30px, 3.6vw, 46px)', fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--ls-green)', margin: '10px 0 0' }}>Appliances for every craving</h2>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {window.LCATEGORIES.map(c => {
              const on = c === cat;
              return (
                <button key={c} onClick={() => setCat(c)}
                  style={{ fontFamily: 'var(--font-primary)', fontSize: 13.5, fontWeight: 500, padding: '9px 18px', borderRadius: 'var(--r-pill)', cursor: 'pointer',
                    border: '1.5px solid ' + (on ? 'var(--ls-green)' : 'var(--ls-line)'),
                    background: on ? 'var(--ls-green)' : 'transparent',
                    color: on ? 'var(--ls-cream-text)' : 'var(--ls-ink)', transition: 'all .15s ease' }}>{c}</button>
              );
            })}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '40px 28px' }}>
          {list.map(p => <ProductTile key={p.id} p={p} onAdd={onAdd} />)}
        </div>
      </div>
    </section>
  );
}

function FamilyBand() {
  const vals = [[window.LShield, 'Quality assured'], [window.LCheck, 'Safe & secure'], [window.LLeaf, 'Energy saving'], [window.LSparkle, 'Versatile & stylish']];
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--ls-green-900)' }}>
      <img src="../assets/products/life-family.jpg" alt="A family cooking together in the kitchen"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(4,36,26,0.82) 0%, rgba(4,36,26,0.72) 100%)' }} />
      <div className="wrap" style={{ position: 'relative', padding: '88px 0', textAlign: 'center' }}>
        <img src="../assets/logo/oairsis-logo-white.png" alt="OAIRSIS" style={{ height: 26 }} />
        <p style={{ fontFamily: 'var(--font-primary)', fontWeight: 500, fontSize: 'clamp(20px, 2.5vw, 30px)', lineHeight: 1.5, color: 'var(--ls-cream-text)', margin: '26px auto 0', maxWidth: 760 }}>
          We research home appliances that are safe, reliable and reassuring — so every household can feel relaxed and comfortable, as if surrounded by nature.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginTop: 48, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto' }}>
          {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(--ls-line-green)', background: 'rgba(241,234,217,0.06)', color: 'var(--ls-sage)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic size={24} /></span>
              <span style={{ fontFamily: 'var(--font-primary)', fontSize: 14, fontWeight: 500, color: 'var(--ls-cream-text)' }}>{t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Newsletter() {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  return (
    <section style={{ background: 'var(--ls-beige-2)' }}>
      <div className="wrap" style={{ padding: '76px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 28 }}>
        <div style={{ maxWidth: 460 }}>
          <h2 style={{ fontSize: 'clamp(26px, 3vw, 38px)', fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--ls-green)', margin: 0 }}>Join the OAIRSIS kitchen</h2>
          <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 15.5, color: 'var(--ls-muted)', margin: '10px 0 0' }}>Recipes, new launches and 10% off your first order.</p>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', minWidth: 360, flex: '0 1 420px' }}>
          <input value={email} onChange={e => setEmail(e.target.value)} placeholder="you@home.com"
            style={{ flex: 1, height: 52, padding: '0 20px', border: '1.5px solid var(--ls-line)', borderRadius: 'var(--r-pill)', background: 'var(--ls-cream)', fontFamily: 'var(--font-secondary)', fontSize: 14.5, color: 'var(--ls-ink)', outline: 'none' }} />
          <button className="btn btn-lg btn-green" onClick={() => setDone(true)}>{done ? 'Subscribed ✓' : 'Subscribe'}</button>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ['Shop', ['Espresso machines', 'Juicers', 'Frozen dessert', 'Mixers', 'Bundles']],
    ['Support', ['Help center', 'Warranty', 'Shipping & returns', 'Contact us']],
    ['Company', ['Our story', 'Sustainability', 'News & tips', 'Careers']],
  ];
  return (
    <footer style={{ background: 'var(--ls-green-900)', color: 'var(--ls-cream-dim)' }}>
      <div className="wrap" style={{ padding: '66px 0 34px', 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: 'var(--ls-cream-dim)' }}>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: 'var(--ls-cream-text)', 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: 'var(--ls-cream-dim)', cursor: 'pointer' }}>{i}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid var(--ls-line-green)' }}>
        <div className="wrap" style={{ padding: '18px 0', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, fontFamily: 'var(--font-secondary)', fontSize: 12, color: 'rgba(241,234,217,0.45)' }}>
          <span>© 2026 OAIRSIS. All rights reserved.</span>
          <span>Privacy · Terms · Powered by Shopify</span>
        </div>
      </div>
    </footer>
  );
}

function CartDrawer({ open, items, onClose, onQty, onRemove, onShop }) {
  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(4,36,26,0.5)', opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none', transition: 'opacity .25s ease', zIndex: 70 }} />
      <aside style={{ position: 'fixed', top: 0, right: 0, bottom: 0, width: 428, maxWidth: '92vw', background: 'var(--ls-beige)', boxShadow: 'var(--shadow-soft)', transform: open ? 'translateX(0)' : 'translateX(100%)', transition: 'transform .3s ease', zIndex: 71, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 24px', borderBottom: '1px solid var(--ls-line)' }}>
          <h3 style={{ fontFamily: 'var(--font-primary)', fontSize: 18, fontWeight: 600, color: 'var(--ls-green)', margin: 0 }}>Your bag ({items.reduce((s, i) => s + i.qty, 0)})</h3>
          <button onClick={onClose} aria-label="Close" style={{ width: 36, height: 36, border: 'none', background: 'var(--ls-beige-2)', borderRadius: '50%', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ls-ink)' }}><LClose size={18} /></button>
        </div>

        {items.length > 0 && (
          <div style={{ padding: '14px 24px', borderBottom: '1px solid var(--ls-line)' }}>
            <div style={{ fontFamily: 'var(--font-secondary)', fontSize: 12.5, color: 'var(--ls-muted)', marginBottom: 8 }}>
              {remain > 0 ? <span>Add <b style={{ color: 'var(--ls-green)' }}>{window.lmoney(remain)}</b> for free shipping</span> : <span style={{ color: 'var(--ls-green)', fontWeight: 600 }}>✓ You've unlocked free shipping!</span>}
            </div>
            <div style={{ height: 6, borderRadius: 3, background: 'var(--ls-line)', overflow: 'hidden' }}><div style={{ height: '100%', width: pct + '%', background: 'var(--ls-pine)', borderRadius: 3, transition: 'width .3s ease' }} /></div>
          </div>
        )}

        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 24px' }}>
          {items.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '70px 0', color: 'var(--ls-muted)' }}>
              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 14, color: 'var(--ls-faint)' }}><LCart size={46} /></div>
              <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 14, marginBottom: 18 }}>Your bag is empty.</p>
              <button className="btn btn-md btn-outline" onClick={onShop}>Shop the range</button>
            </div>
          ) : items.map(i => (
            <div key={i.id} style={{ display: 'flex', gap: 14, padding: '16px 0', borderBottom: '1px solid var(--ls-line)' }}>
              <div style={{ width: 74, height: 74, borderRadius: 'var(--r-md)', background: 'var(--ls-cream)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
                <img src={i.img} alt={i.name} style={{ width: '84%', height: '84%', objectFit: 'contain', mixBlendMode: 'multiply' }} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-primary)', fontSize: 14, fontWeight: 600, color: 'var(--ls-green)', lineHeight: 1.3 }}>{i.name}</div>
                <div style={{ fontFamily: 'var(--font-secondary)', fontSize: 13, color: 'var(--ls-muted)', margin: '2px 0 9px' }}>{window.lmoney(i.price)}</div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--ls-line)', borderRadius: 'var(--r-pill)', overflow: 'hidden' }}>
                    <button onClick={() => onQty(i.id, -1)} style={lqtyBtn}><LMinus 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={lqtyBtn}><LPlus 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(--ls-faint)' }}>Remove</button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {items.length > 0 && (
          <div style={{ padding: '18px 24px 24px', borderTop: '1px solid var(--ls-line)', background: 'var(--ls-beige-2)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
              <span style={{ fontFamily: 'var(--font-secondary)', fontSize: 14, color: 'var(--ls-muted)' }}>Subtotal</span>
              <span style={{ fontFamily: 'var(--font-primary)', fontSize: 20, fontWeight: 700, color: 'var(--ls-green)' }}>{window.lmoney(subtotal)}</span>
            </div>
            <button className="btn btn-lg btn-green" style={{ width: '100%' }}>Checkout</button>
            <p style={{ textAlign: 'center', fontFamily: 'var(--font-secondary)', fontSize: 12, color: 'var(--ls-faint)', margin: '12px 0 0' }}>Taxes & shipping calculated at checkout</p>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}
const lqtyBtn = { width: 30, height: 30, border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ls-green)' };

Object.assign(window, { LStars, ProductTile, ProductRange, FamilyBand, Newsletter, Footer, CartDrawer });