/* OAIRSIS Lifestyle Store — sections A: announce, header, hero, marquee, statement, feature bands. */

function Announce() {
  const items = ['Free shipping over $99', '2-year warranty', '30-day easy returns'];
  return (
    <div style={{ background: 'var(--ls-green-900)', color: 'var(--ls-cream-dim)', fontFamily: 'var(--font-secondary)', fontSize: 12.5 }}>
      <div className="wrap" style={{ minHeight: 38, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 26, flexWrap: 'wrap', whiteSpace: 'nowrap' }}>
        {items.map((t, i) => (
          <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 26 }}>
            {i > 0 && <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--ls-sage)', flex: 'none' }} />}
            <span style={{ letterSpacing: '0.02em' }}>{t}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function Header({ count, onCart, onNav, active, onShop }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', f); f();
    return () => window.removeEventListener('scroll', f);
  }, []);
  const links = ['Home', 'Shop', 'Our story', 'Support'];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(236,228,212,0.9)' : 'var(--ls-beige)',
      backdropFilter: scrolled ? 'blur(10px)' : 'none',
      borderBottom: '1px solid ' + (scrolled ? 'var(--ls-line)' : 'transparent'),
      transition: 'all .25s ease' }}>
      <div className="wrap" style={{ height: 70, display: 'flex', alignItems: 'center', gap: 30 }}>
        <img src="../assets/logo/oairsis-logo-black.png" alt="OAIRSIS" style={{ height: 21, flex: 'none' }} />
        <nav style={{ display: 'flex', gap: 4, flex: 1 }}>
          {links.map(l => (
            <a key={l} onClick={() => { onNav(l); if (l === 'Shop') onShop(); }}
              style={{ cursor: 'pointer', padding: '8px 15px', borderRadius: 'var(--r-pill)',
                fontFamily: 'var(--font-primary)', fontSize: 14, fontWeight: 500,
                color: active === l ? 'var(--ls-green)' : 'var(--ls-ink)',
                background: active === l ? 'rgba(10,53,38,0.07)' : 'transparent', transition: 'all .15s ease' }}>{l}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--ls-green)' }}>
          <button aria-label="Search" style={iconBtn}><LSearch size={19} /></button>
          <button aria-label="Account" style={iconBtn}><LUser size={19} /></button>
          <button onClick={onCart} aria-label="Bag" style={{ ...iconBtn, position: 'relative' }}>
            <LCart size={20} />
            {count > 0 && <span style={{ position: 'absolute', top: 2, right: 0, minWidth: 17, height: 17, padding: '0 4px', borderRadius: 9, background: 'var(--ls-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 iconBtn = { width: 40, height: 40, border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'inherit', borderRadius: '50%' };

function Hero({ onShop }) {
  return (
    <section style={{ position: 'relative', minHeight: 'min(86vh, 800px)', display: 'flex', alignItems: 'center', overflow: 'hidden', background: 'var(--ls-green-800)' }}>
      <img src="../assets/products/life-coffee.jpg" alt="OAIRSIS espresso machine in a bright kitchen"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'right center' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(95deg, rgba(7,40,29,0.94) 0%, rgba(8,44,32,0.78) 30%, rgba(8,44,32,0.28) 56%, rgba(8,44,32,0) 74%)' }} />
      <div className="wrap" style={{ position: 'relative', width: '100%' }}>
        <div style={{ maxWidth: 540, padding: '64px 0' }}>
          <div className="eyebrow" style={{ color: 'var(--ls-sage)' }}>The morning ritual</div>
          <h1 style={{ fontSize: 'clamp(40px, 5.6vw, 72px)', fontWeight: 700, lineHeight: 1.04, letterSpacing: '-0.02em', color: 'var(--ls-cream-text)', margin: '18px 0 0' }}>
            Freshly ground,<br/>effortlessly yours.
          </h1>
          <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 17.5, lineHeight: 1.6, color: 'var(--ls-cream-dim)', margin: '22px 0 0', maxWidth: 440 }}>
            Café-quality coffee at the touch of a button — bean to cup, every morning, for the whole family.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 34, flexWrap: 'wrap' }}>
            <button className="btn btn-lg btn-cream" onClick={onShop}>Shop the range <LArrow size={18} /></button>
            <button className="btn btn-lg btn-ghost-cream">Discover OAIRSIS</button>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 38 }}>
            <span style={{ display: 'inline-flex', gap: 2, color: '#E8C36B' }}>
              {[0,1,2,3,4].map(i => <LStar key={i} size={16} />)}
            </span>
            <span style={{ fontFamily: 'var(--font-secondary)', fontSize: 13.5, color: 'var(--ls-cream-dim)' }}>4.9 / 5 from 2,400+ happy kitchens</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const words = ['Freshly Ground', 'Cold-Pressed', 'Slow-Churned', 'Bean to Cup', 'Made at Home'];
  const run = [...words, ...words];
  return (
    <div style={{ background: 'var(--ls-green-900)', overflow: 'hidden', padding: '18px 0' }}>
      <div style={{ display: 'flex', gap: 40, whiteSpace: 'nowrap', animation: 'lsmarq 26s linear infinite', width: 'max-content' }}>
        {run.map((w, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 40, fontFamily: 'var(--font-primary)', fontSize: 22, fontWeight: 600, letterSpacing: '0.04em', color: 'var(--ls-cream-text)' }}>
            {w}<span style={{ color: 'var(--ls-sage)', fontSize: 14 }}>✦</span>
          </span>
        ))}
      </div>
      <style>{`@keyframes lsmarq { from { transform: translateX(0);} to { transform: translateX(-50%);} } @media (prefers-reduced-motion: reduce){ [style*="lsmarq"]{animation:none!important;} }`}</style>
    </div>
  );
}

function Statement() {
  return (
    <section style={{ background: 'var(--ls-beige)' }}>
      <div className="wrap" style={{ padding: '96px 0', textAlign: 'center', maxWidth: 900 }}>
        <div className="eyebrow" style={{ color: 'var(--ls-pine)' }}>Designed around your day</div>
        <p style={{ fontFamily: 'var(--font-primary)', fontWeight: 500, fontSize: 'clamp(26px, 3.4vw, 42px)', lineHeight: 1.32, letterSpacing: '-0.01em', color: 'var(--ls-green)', margin: '22px auto 0' }}>
          We build appliances that bring calm, capable craft to the everyday kitchen — so good food and good moments come easily, and naturally.
        </p>
        <div style={{ width: 56, height: 3, borderRadius: 2, background: 'var(--ls-sage)', margin: '34px auto 0' }} />
      </div>
    </section>
  );
}

/* Full-bleed lifestyle feature band — large image, minimal overlay, CTA. */
function FeatureBand({ data, onAdd, flip = false }) {
  return (
    <section style={{ position: 'relative', minHeight: 'min(78vh, 720px)', display: 'flex', alignItems: 'center', overflow: 'hidden', background: 'var(--ls-green-800)' }}>
      <img src={data.img} alt={data.alt}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: flip ? 'left center' : 'right center' }} />
      <div style={{ position: 'absolute', inset: 0, background: flip
        ? 'linear-gradient(265deg, rgba(7,40,29,0.92) 0%, rgba(8,44,32,0.6) 34%, rgba(8,44,32,0) 66%)'
        : 'linear-gradient(95deg, rgba(7,40,29,0.92) 0%, rgba(8,44,32,0.6) 34%, rgba(8,44,32,0) 66%)' }} />
      <div className="wrap" style={{ position: 'relative', width: '100%', display: 'flex', justifyContent: flip ? 'flex-end' : 'flex-start' }}>
        <div style={{ maxWidth: 480, padding: '56px 0', textAlign: flip ? 'right' : 'left' }}>
          <div className="eyebrow" style={{ color: 'var(--ls-sage)' }}>{data.eyebrow}</div>
          <h2 style={{ fontSize: 'clamp(32px, 4.4vw, 54px)', fontWeight: 700, lineHeight: 1.06, letterSpacing: '-0.02em', color: 'var(--ls-cream-text)', margin: '16px 0 0' }}>{data.title}</h2>
          <p style={{ fontFamily: 'var(--font-secondary)', fontSize: 16.5, lineHeight: 1.6, color: 'var(--ls-cream-dim)', margin: '18px 0 0', maxWidth: 400, marginLeft: flip ? 'auto' : 0 }}>{data.text}</p>
          <div style={{ display: 'flex', gap: 12, marginTop: 30, justifyContent: flip ? 'flex-end' : 'flex-start' }}>
            <button className="btn btn-lg btn-cream" onClick={() => onAdd(window.LPRODUCTS.find(p => p.id === data.pid))}>Shop now <LArrow size={18} /></button>
            <span style={{ display: 'inline-flex', alignItems: 'center', fontFamily: 'var(--font-primary)', fontSize: 15, fontWeight: 600, color: 'var(--ls-cream-text)', padding: '0 6px' }}>From {window.lmoney(data.price)}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.LJUICER = { pid: 'fresh', img: '../assets/products/scene-juicer.jpg', alt: 'OAIRSIS multi-functional juicer with fresh fruit',
  eyebrow: 'Multi-functional juicer', title: 'Cold-pressed, full of life', price: 189,
  text: 'Slow cold-press technology locks in colour, nutrients and flavour — vibrant juice, smoothies and soups, made in moments.' };
window.LICECREAM = { pid: 'frost', img: '../assets/products/scene-icecream.jpg', alt: 'OAIRSIS frozen dessert maker with ice cream',
  eyebrow: 'Frozen dessert maker', title: 'Dessert, made at home', price: 159,
  text: 'Creamy gelato, sorbet and frozen yoghurt at the touch of a button. No pre-freezing, no fuss — just scoop and enjoy.' };

Object.assign(window, { Announce, Header, Hero, Marquee, Statement, FeatureBand });