/* OAIRSIS Store — sections A (dark, image-forward): header, hero, trust strip, product collection. */
const { Button, Card, Badge, IconButton } = window.OAIRSISDesignSystem_ed13d9;

function Stars({ rating, size = 14 }) {
  return (
    <span style={{ display: 'inline-flex', gap: 1, color: 'var(--color-pine-300)' }}>
      {[0,1,2,3,4].map(i => (
        <span key={i} style={{ opacity: i < Math.round(rating) ? 1 : 0.28, display: 'inline-flex' }}><IStar size={size} /></span>
      ))}
    </span>
  );
}

function Announce() {
  return (
    <div style={{ background: 'var(--color-evergreen-900)', color: 'var(--color-pine-300)', textAlign: 'center', fontFamily: 'var(--font-secondary)', fontSize: 13, padding: '9px 16px', letterSpacing: '0.02em' }}>
      Free shipping over $99&nbsp;&nbsp;·&nbsp;&nbsp;2-year warranty&nbsp;&nbsp;·&nbsp;&nbsp;30-day returns
    </div>
  );
}

function Header({ count, onCart, onNav, active, query, setQuery }) {
  const links = ['Home', 'Products', 'Support', 'News and Tips'];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 40, background: 'rgba(2,35,24,0.86)', backdropFilter: 'blur(12px)', borderBottom: '1px solid var(--color-evergreen-700)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 36px', height: 76, display: 'flex', alignItems: 'center', gap: 32 }}>
        <img src="../assets/logo/oairsis-logo-white.png" alt="OAIRSIS" style={{ height: 22, flex: 'none' }} />
        <nav style={{ display: 'flex', gap: 2, flex: 1 }}>
          {links.map(l => (
            <a key={l} onClick={() => onNav(l)} style={{ cursor: 'pointer', padding: '8px 15px', borderRadius: 'var(--radius-pill)', fontFamily: 'var(--font-primary)', fontSize: 14, fontWeight: 500, color: active === l ? 'var(--color-evergreen)' : 'rgba(255,255,255,0.78)', background: active === l ? 'var(--color-pine-300)' : 'transparent', transition: 'all var(--transition-fast)' }}>{l}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, height: 40, padding: '0 14px', background: 'rgba(255,255,255,0.08)', borderRadius: 'var(--radius-pill)', border: '1px solid var(--color-evergreen-700)', width: 188 }}>
            <span style={{ color: 'var(--color-pine-300)', display: 'flex' }}><ISearch size={17} /></span>
            <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search" style={{ border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-secondary)', fontSize: 13.5, color: '#fff', width: '100%' }} />
          </div>
          <button aria-label="Account" style={iconBtnDark}><IUser size={20} /></button>
          <button onClick={onCart} aria-label="Cart" style={{ ...iconBtnDark, position: 'relative' }}>
            <ICart size={21} />
            {count > 0 && <span style={{ position: 'absolute', top: 0, right: -2, minWidth: 17, height: 17, padding: '0 4px', borderRadius: 9, background: 'var(--color-pine)', color: '#fff', fontFamily: 'var(--font-secondary)', fontSize: 10.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{count}</span>}
          </button>
        </div>
      </div>
    </header>
  );
}
const iconBtnDark = { width: 40, height: 40, border: 'none', background: 'transparent', cursor: 'pointer', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%' };

function Hero({ onShop }) {
  return (
    <section style={{ position: 'relative', minHeight: 640, display: 'flex', alignItems: 'center', overflow: 'hidden', background: 'var(--color-evergreen)' }}>
      <img src="../assets/products/hero-machine.jpg" alt="OAIRSIS espresso machine" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '78% center' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(2,35,24,0.96) 0%, rgba(2,35,24,0.88) 32%, rgba(2,35,24,0.45) 56%, rgba(2,35,24,0.15) 78%)' }} />
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '0 36px', width: '100%' }}>
        <div style={{ maxWidth: 540 }}>
          <div className="text-eyebrow" style={{ color: 'var(--color-pine-300)' }}>Smart living · clean taste</div>
          <h1 style={{ fontFamily: 'var(--font-primary)', fontWeight: 700, fontSize: 64, lineHeight: 1.03, letterSpacing: '-0.025em', color: '#fff', margin: '16px 0 0' }}>Italian freshly<br/>ground coffee.</h1>
          <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 18, lineHeight: 1.62, color: 'rgba(255,255,255,0.74)', margin: '22px 0 0', maxWidth: 430 }}>
            Start anytime and savour exclusive deliciousness. Make any coffee with one touch — for the whole family's taste.
          </p>
          <div style={{ display: 'flex', gap: 13, marginTop: 34 }}>
            <Button variant="primary" size="lg" iconRight={<IArrow size={18} />} onClick={onShop}>Shop now</Button>
            <Button variant="inverse" size="lg">Learn more</Button>
          </div>
          <div style={{ display: 'flex', gap: 34, marginTop: 46 }}>
            {[['4.9★', '2,400+ reviews'], ['60s', 'To first cup'], ['1-touch', 'Recipes']].map(([n, l]) => (
              <div key={l}>
                <div style={{ fontFamily: 'var(--font-primary)', fontSize: 24, fontWeight: 700, color: '#fff' }}>{n}</div>
                <div style={{ fontFamily: 'var(--font-secondary)', fontSize: 12.5, color: 'rgba(255,255,255,0.55)' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = [[ITruck, 'Free shipping'], [IShield, 'Quality assured'], [ILeaf, 'Energy saving'], [IRefresh, '30-day returns']];
  return (
    <div style={{ background: 'var(--color-evergreen-900)', borderBottom: '1px solid var(--color-evergreen-700)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '18px 36px', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
        {items.map(([Ic, t]) => (
          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 11, justifyContent: 'center' }}>
            <span style={{ color: 'var(--color-pine-300)', display: 'flex' }}><Ic size={20} /></span>
            <span style={{ fontFamily: 'var(--font-primary)', fontSize: 14, fontWeight: 500, color: 'rgba(255,255,255,0.9)' }}>{t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ProductCard({ p, onAdd, onWish, wished }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'flex', flexDirection: 'column', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--color-evergreen-700)', border: '1px solid rgba(255,255,255,0.08)', transition: 'transform var(--transition-normal), box-shadow var(--transition-normal)', transform: hover ? 'translateY(-4px)' : 'none', boxShadow: hover ? 'var(--shadow-lg)' : 'none' }}>
      <div style={{ position: 'relative', aspectRatio: '1/1', background: 'radial-gradient(130% 130% at 50% 20%, #06402a 0%, var(--color-evergreen) 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
        {p.tag && <span style={{ position: 'absolute', top: 14, left: 14, zIndex: 2 }}><Badge variant={p.tag === 'New' ? 'solid' : 'accent'} size="sm">{p.tag}</Badge></span>}
        <button onClick={() => onWish(p.id)} aria-label="Wishlist" style={{ position: 'absolute', top: 12, right: 12, zIndex: 2, width: 34, height: 34, borderRadius: '50%', border: 'none', background: 'rgba(2,35,24,0.55)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: wished ? 'var(--color-pine-300)' : 'rgba(255,255,255,0.8)' }}>
          <IHeart size={17} fill={wished ? 'currentColor' : 'none'} />
        </button>
        <img src={p.img} alt={p.name} style={{ width: '84%', height: '84%', objectFit: 'contain', transform: hover ? 'scale(1.06)' : 'scale(1)', transition: 'transform var(--transition-slow)' }} />
      </div>
      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 9, flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Stars rating={p.rating} /><span style={{ fontFamily: 'var(--font-secondary)', fontSize: 12, color: 'rgba(255,255,255,0.5)', whiteSpace: 'nowrap' }}>{p.rating} ({p.reviews})</span>
        </div>
        <h3 style={{ fontFamily: 'var(--font-primary)', fontSize: 17, fontWeight: 600, color: '#fff', margin: 0, lineHeight: 1.3 }}>{p.name}</h3>
        <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 13, color: 'rgba(255,255,255,0.6)', margin: 0, lineHeight: 1.5, flex: 1 }}>{p.blurb}</p>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span style={{ fontFamily: 'var(--font-primary)', fontSize: 22, fontWeight: 700, color: '#fff' }}>{money(p.price)}</span>
            {p.was && <span style={{ fontFamily: 'var(--font-secondary)', fontSize: 13, color: 'rgba(255,255,255,0.4)', textDecoration: 'line-through' }}>{money(p.was)}</span>}
          </div>
          <Button size="sm" variant="primary" onClick={() => onAdd(p)}>Add to cart</Button>
        </div>
      </div>
    </div>
  );
}

function ProductCollection({ onAdd, onWish, wishlist, gridRef }) {
  const [cat, setCat] = React.useState('All');
  const list = cat === 'All' ? PRODUCTS : PRODUCTS.filter(p => p.cat === cat);
  return (
    <section ref={gridRef} style={{ background: 'var(--color-evergreen)', scrollMarginTop: 76 }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 36px' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div className="text-eyebrow" style={{ color: 'var(--color-pine-300)' }}>Shop the collection</div>
          <h2 style={{ fontFamily: 'var(--font-primary)', fontSize: 42, fontWeight: 700, color: '#fff', margin: '10px 0 0', letterSpacing: '-0.02em' }}>Appliances for every craving</h2>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 40 }}>
          {CATEGORIES.map(c => {
            const on = c === cat;
            return (
              <button key={c} onClick={() => setCat(c)} style={{ padding: '9px 20px', borderRadius: 'var(--radius-pill)', cursor: 'pointer', fontFamily: 'var(--font-primary)', fontSize: 14, fontWeight: 500, transition: 'all var(--transition-fast)', border: `1px solid ${on ? 'var(--color-pine)' : 'rgba(255,255,255,0.18)'}`, background: on ? 'var(--color-pine)' : 'transparent', color: on ? '#fff' : 'rgba(255,255,255,0.7)' }}>{c}</button>
            );
          })}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
          {list.map(p => <ProductCard key={p.id} p={p} onAdd={onAdd} onWish={onWish} wished={wishlist.includes(p.id)} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Stars, Announce, Header, Hero, TrustStrip, ProductCard, ProductCollection });