// sections.jsx — page sections

// ── NAV ──────────────────────────────────────────────────────
function Nav(){
  const { count, setOpen } = useCart();
  return (
    <nav className="nav">
      <a href="#top" className="nav-logo" aria-label="nude&shy">
        <img src={(typeof window!=='undefined' && window.__resources && window.__resources.logoMark) || "assets/logo-mark.png"} alt="nude&shy" />
      </a>
      <div className="nav-links">
        <a className="nav-link" href="#shop-spf">SPF</a>
        <a className="nav-link" href="#shop-beach">beach</a>
        <a className="nav-link" href="#bundles">bundles</a>
        <a className="nav-link" href="#lookbook">lookbook</a>
        <a className="nav-link" href="#ritual">ritual</a>
        <a className="nav-link" href="#story">story</a>
      </div>
      <div className="nav-right">
        <button className="cart-btn" onClick={()=>setOpen(true)} aria-label="open cart">
          <IconBag />
          <span>bag</span>
          {count>0 && <span className="cart-count">{count}</span>}
        </button>
      </div>
    </nav>
  );
}

// ── HERO ─────────────────────────────────────────────────────
function Hero(){
  return (
    <section className="hero" id="top" data-screen-label="01 hero">
      <Sun style={{ right:'-15vw', top:'-10vw' }} parallax={0.18} />
      <div className="container">
        <div className="hero-meta">
          <div className="tag mono">
            <span className="hero-dot" />
            <span>summer drop 26 · live 06.06</span>
          </div>
          <div className="mono" style={{color:'var(--muted)'}}>nude&rude × the shyguy</div>
        </div>

        <div className="wordmark" aria-label="nude and shy">
          <img src={(typeof window!=='undefined' && window.__resources && window.__resources.logoMark) || "assets/logo-mark.png"} alt="nude&shy" />
        </div>

        <div className="hero-foot">
          <div className="lede">
            Letnja ko-edicija. Prvi put pravimo<br/>
            sunce za nošenje — <em>i za skidanje</em>.
          </div>
          <div className="col">
            <h6>edit</h6>
            <p>15 komada · 4 skincare<br/>11 beachwear silueta<br/>3 kurirana bundle-a</p>
          </div>
          <div className="col">
            <h6>kada</h6>
            <p>flagship Beograd · 06.06<br/>online · 24h ranije za članove<br/>worldwide shipping</p>
          </div>
        </div>

        <div className="hero-cta-row">
          <Btn huge as="a" href="#shop-spf">shop the drop <IconArrow /></Btn>
          <Btn huge ghost as="a" href="#bundles">vidi bundle-ove</Btn>
        </div>
      </div>
    </section>
  );
}

// ── STORY ────────────────────────────────────────────────────
function Story(){
  return (
    <section className="section" id="story" data-screen-label="02 story">
      <div className="container">
        <div className="eyebrow" style={{marginBottom:24}}>— 01 / susret</div>
        <div className="story-grid">
          <div>
            <h2 className="story-lede">
              Dva tiha brenda srela su se na jednoj tihoj plaži. Jedan je naučio kožu da pije sunce.
              <em> Drugi ju je naučio kako da ga nosi.</em>
            </h2>
          </div>
          <div>
            <p className="story-body">
              <strong style={{color:'var(--ink)'}}>nude&amp;rude</strong> &nbsp;već pet sezona ispisuje nova pravila self-tan i SPF rituala za ženu koja čita sastav i pegla posteljinu nedeljom. <strong style={{color:'var(--ink)'}}>the shyguy</strong> &nbsp;dizajnira ono što ona spakuje pored proizvoda.
              <br/><br/>
              Zajedno smo napravili <strong style={{color:'var(--ink)'}}>nude&amp;shy</strong>: 15-delni letnji ritual u kojem je svaki proizvod stvoren za sledeći. Mist koji ide prvi. Maillot koji ga nosi. Puter koji privodi dan.
            </p>
            <Btn ghost tiny style={{marginTop:18}}>pročitaj editorial <IconArrow size={10} /></Btn>
          </div>
        </div>

        <div className="story-stats">
          <div className="story-stat">
            <div className="num">15</div>
            <div className="lbl">komada u drop-u</div>
          </div>
          <div className="story-stat">
            <div className="num">06.06</div>
            <div className="lbl">launch · beograd</div>
          </div>
          <div className="story-stat">
            <div className="num"><em style={{fontStyle:'italic',color:'var(--accent)'}}>30°</em></div>
            <div className="lbl">prosek sezone · dalmacija</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── SKINCARE ─────────────────────────────────────────────────
function SkincareShop(){
  const { addProduct } = useCart();
  const products = PRODUCTS.filter(p => p.cat === 'skincare');
  return (
    <section className="section" id="shop-spf" data-screen-label="03 skincare">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow" style={{marginBottom:16}}>— 02 / sun · before & after</div>
            <h2>shop <em>SPF</em><br/>& after-sun</h2>
            <p>Mineralni filteri. Čisti aktivni sastojci. Četvorodelni ritual koji smo napisali za sebe, pa konačno flaširali.</p>
          </div>
          <div className="right">
            <Btn ghost tiny>cela skincare linija <IconArrow size={10} /></Btn>
          </div>
        </div>

        <div className="skin-grid">
          {products.map(p => <SkinCard key={p.id} p={p} onAdd={()=>addProduct(p)} />)}
        </div>
      </div>
    </section>
  );
}

function SkinCard({ p, onAdd }){
  return (
    <article className="pcard skin">
      <div className="media">
        <Placeholder kind={p.ph} label={p.phLabel} />
        {p.spf && <div className="spf">{p.spf}</div>}
      </div>
      <div className="info">
        <div className="row">
          <div className="name">{p.name}</div>
          <div className="price">€{p.price}</div>
        </div>
        <div className="sub">{p.sub}</div>
        <div style={{marginTop:14, display:'flex', gap:8}}>
          <Btn tiny style={{flex:1}} onClick={onAdd}>
            <IconBag size={11} /> add · €{p.price}
          </Btn>
          <Btn tiny ghost className="icon" aria-label="quick view"><IconArrow size={10} /></Btn>
        </div>
      </div>
    </article>
  );
}

// ── BEACHWEAR ────────────────────────────────────────────────
function BeachShop(){
  const { addProduct } = useCart();
  const [filter, setFilter] = React.useState('all');
  const products = PRODUCTS.filter(p => p.kind === 'beach' && (filter==='all' || p.cat===filter));
  return (
    <section className="section" id="shop-beach" data-screen-label="04 beachwear">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow" style={{marginBottom:16}}>— 03 / beachwear</div>
            <h2>wear <em>the shyguy</em><br/>this season</h2>
            <p>Pet kupaćih silueta, beach haljina u četiri dezena, i resort slojevi u kojima živimo do septembra.</p>
          </div>
          <div className="right" style={{gap:6}}>
            <Btn tiny ghost={filter!=='all'} onClick={()=>setFilter('all')}>all</Btn>
            <Btn tiny ghost={filter!=='swim'} onClick={()=>setFilter('swim')}>swim</Btn>
            <Btn tiny ghost={filter!=='apparel'} onClick={()=>setFilter('apparel')}>apparel</Btn>
          </div>
        </div>

        <div className="beach-grid">
          {products.map((p, i) => (
            <BeachCard key={p.id} p={p} idx={i} onAdd={(opts)=>addProduct(p, opts)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function BeachCard({ p, idx, onAdd }){
  const [size, setSize] = React.useState(p.sizes[0]);
  const [color, setColor] = React.useState(p.swatches[0]);
  const spanCls = `span-${p.span||4}`;
  return (
    <article className={`pcard ${spanCls}`}>
      <div className={`media ${idx%3===0?'tall':''}`}>
        <Placeholder kind={p.ph} label={p.phLabel} />
        {p.cat==='swim' && <div className="badge accent">swim · {p.swatches.length} colors</div>}
        {p.cat==='apparel' && p.id==='bw-dress' && <div className="badge">4 prints</div>}
        <div className="quick">
          <Btn tiny style={{flex:1}} onClick={()=>onAdd({size, color})}>
            <IconBag size={11}/> add · €{p.price}
          </Btn>
        </div>
      </div>
      <div className="info">
        <div className="row">
          <div className="name">{p.name}</div>
          <div className="price">€{p.price}</div>
        </div>
        <div className="sub">{p.sub}</div>
        <div style={{display:'flex',gap:14,alignItems:'center',marginTop:10,flexWrap:'wrap'}}>
          {p.swatches.length>1 && (
            <div className="swatches">
              {p.swatches.map((c,i)=>(
                <button key={i} className="swatch" style={{background:c, outline:c===color?`1.5px solid var(--ink)`:'',outlineOffset:'2px'}} onClick={()=>setColor(c)} aria-label={`color ${i}`} />
              ))}
            </div>
          )}
          {p.sizes.length>1 && (
            <div style={{display:'flex',gap:4}}>
              {p.sizes.map(s=>(
                <button key={s}
                  onClick={()=>setSize(s)}
                  style={{
                    fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.1em', textTransform:'uppercase',
                    padding:'4px 7px', borderRadius:4,
                    border: s===size?'1px solid var(--ink)':'1px solid var(--line)',
                    background: s===size?'var(--ink)':'transparent',
                    color: s===size?'var(--bg)':'var(--ink-2)',
                    cursor:'pointer'
                  }}>{s}</button>
              ))}
            </div>
          )}
        </div>
      </div>
    </article>
  );
}

// ── BUNDLES ──────────────────────────────────────────────────
function BundlesSection(){
  const { addBundle, addCustomBundle } = useCart();
  return (
    <section className="section bundles" id="bundles" data-screen-label="05 bundles">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow" style={{marginBottom:16, color:'var(--accent)'}}>— 04 / curated edits & build-your-own</div>
            <h2>shop in <em>edits</em></h2>
            <p>Tri rituala koje smo već složili — i build-your-own gde svaki novi komad obara račun.</p>
          </div>
          <div className="right">
            <Btn ghost tiny>kako radi <IconArrow size={10} /></Btn>
          </div>
        </div>

        <div className="bundle-grid">
          {BUNDLES.map(b => <BundleCard key={b.id} b={b} onAdd={()=>addBundle(b)} />)}
        </div>

        <BuildYourOwn onAdd={addCustomBundle} />
      </div>
    </section>
  );
}

function BundleCard({ b, onAdd }){
  const wasTotal = b.items.reduce((s,i)=>s+i.was,0);
  return (
    <article className={`bcard ${b.featured?'featured':''}`}>
      <div>
        <div className="b-eyebrow">{b.eyebrow}</div>
        <h3>{b.name}</h3>
      </div>
      <ul className="b-items">
        {b.items.map((it,i)=>(
          <li key={i}>
            <span>{it.label}</span>
            <span>€{it.was}</span>
          </li>
        ))}
      </ul>
      <div className="b-foot">
        <div className="pricing">
          <div className="was">€{wasTotal}</div>
          <div className="now">€{b.price}</div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:8,alignItems:'flex-end'}}>
          <span className="save">save €{b.save}</span>
          <Btn tiny onClick={onAdd}><IconBag size={11}/> add bundle</Btn>
        </div>
      </div>
    </article>
  );
}

function BuildYourOwn({ onAdd }){
  const [picked, setPicked] = React.useState(new Set());
  const toggle = (id) => {
    setPicked(curr => {
      const next = new Set(curr);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };
  const items = [...picked].map(findP).filter(Boolean);
  const subtotal = items.reduce((s,p)=>s+p.price, 0);
  const tier = items.length >= 6 ? 0.20 : items.length >= 4 ? 0.15 : items.length >= 2 ? 0.07 : 0;
  const discount = Math.round(subtotal * tier);
  const total = subtotal - discount;

  return (
    <div className="byo">
      <div>
        <h3>or build your <em>own edit</em></h3>
        <div className="byo-sub">Bilo koja kombinacija iz drop-a. Popust se sabira: 2+ komada 7% · 4+ komada 15% · 6+ komada 20%.</div>
        <div className="byo-picker">
          {PRODUCTS.map(p => (
            <button key={p.id} className={`byo-item ${picked.has(p.id)?'on':''}`} onClick={()=>toggle(p.id)}>
              <div className="check">{picked.has(p.id) && <IconCheck />}</div>
              <div className="ct">{p.cat}</div>
              <div className="nm">{p.name}</div>
              <div className="pr">€{p.price}</div>
            </button>
          ))}
        </div>
      </div>
      <aside className="byo-summary">
        <h4>your edit</h4>
        <div style={{margin:'4px 0 14px',fontFamily:'var(--mono)',fontSize:11,letterSpacing:'.16em',textTransform:'uppercase',color:'var(--muted)'}}>{items.length} od {PRODUCTS.length} komada</div>
        {items.length===0 && <div style={{padding:'24px 0',color:'var(--muted)',fontFamily:'var(--serif)',fontSize:18}}>počni da biraš — tvoj stack se pojavljuje ovde.</div>}
        {items.map(p => (
          <div key={p.id} className="sum-row">
            <span className="lbl">{p.name}</span>
            <span className="val">€{p.price}</span>
          </div>
        ))}
        {discount > 0 && (
          <div className="sum-row">
            <span className="lbl" style={{color:'var(--accent)'}}>edit popust ({Math.round(tier*100)}%)</span>
            <span className="val" style={{color:'var(--accent)'}}>−€{discount}</span>
          </div>
        )}
        <div className="sum-total">
          <span className="lbl">total</span>
          <span className="val">€{total}</span>
        </div>
        {tier>0 && <span className="save-badge">štediš €{discount}</span>}
        <div style={{marginTop:18,display:'flex',gap:8}}>
          <Btn style={{flex:1}} disabled={items.length===0} onClick={()=>{ onAdd([...picked], total); setPicked(new Set()); }}>
            ubaci u bag
          </Btn>
        </div>
        {items.length>0 && items.length<2 && <div style={{marginTop:10,fontSize:12,color:'var(--muted)'}}>dodaj još 1 komad za 7% popusta →</div>}
        {items.length>=2 && items.length<4 && <div style={{marginTop:10,fontSize:12,color:'var(--muted)'}}>još {4-items.length} do 15% popusta →</div>}
        {items.length>=4 && items.length<6 && <div style={{marginTop:10,fontSize:12,color:'var(--muted)'}}>još {6-items.length} do 20% popusta →</div>}
      </aside>
    </div>
  );
}

// ── LOOKBOOK ─────────────────────────────────────────────────
function Lookbook(){
  return (
    <section className="lookbook section" id="lookbook" data-screen-label="06 lookbook">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow" style={{marginBottom:16}}>— 05 / lookbook</div>
            <h2>polaroidi <em>iz</em><br/>sezone 26</h2>
            <p>Snimano u dva dana svetla. Bez retuša na koži, bez retuša na pesku.</p>
          </div>
          <div className="right">
            <Btn ghost tiny>otvori celu galeriju <IconArrow size={10} /></Btn>
          </div>
        </div>

        <div className="look-grid">
          <div className="look-cell l-1"><Placeholder kind="dark" label={"editorial 01\nfull body · golden hour"} /><div className="cap">look 01 · hush dress</div></div>
          <div className="look-cell l-2"><Placeholder kind="tonal" label={"editorial 02\ndetail · oil on collar bone"} /><div className="cap">look 02 · sun veil</div></div>
          <div className="look-cell l-3"><Placeholder kind="stripe" label={"editorial 03\nflat lay · stones + scarf"} /><div className="cap">look 03 · foulard</div></div>
          <div className="look-cell l-4"><Placeholder kind="dark" label={"editorial 04\nback shot · nude triangle"} /><div className="cap">look 04 · nude triangle</div></div>
          <div className="look-cell l-5"><Placeholder kind="tonal" label={"editorial 05\nportrait · stick in hand"} /><div className="cap">look 05 · velvet stick</div></div>
        </div>
      </div>
    </section>
  );
}

// ── RITUAL ───────────────────────────────────────────────────
function Ritual(){
  const steps = [
    { n:'01', title:'prep', body:'Velvet face stick na ručno-oprano lice. Dva prelaza. Nikad ispod ničega.', badge:'SPF50 · face' },
    { n:'02', title:'wear', body:'Sun veil dry oil preko ramena, leđa, nogu. Suvi finish, zlatni odsjaj.', badge:'SPF30 · body' },
    { n:'03', title:'cool', body:'Quiet hour gel u podne i pred spavanje. Aloe + niacinamid.', badge:'after sun · gel' },
    { n:'04', title:'seal', body:'Afterglow butter pred kraj dana. Shea + tamanu. Posteljina i tišina.', badge:'after sun · butter' },
  ];
  return (
    <section className="section ritual" id="ritual" data-screen-label="07 ritual">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow" style={{marginBottom:16}}>— 06 / kako se nosi</div>
            <h2>ritual <em>u 4</em> koraka</h2>
            <p>Napisano za leto u kojem ne želiš da razmišljaš. Samo ponavljaj.</p>
          </div>
        </div>
        <div className="ritual-grid">
          {steps.map(s => (
            <div className="ritual-step" key={s.n}>
              <div className="num">{s.n}</div>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
              <div className="badge">{s.badge}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── NEWSLETTER ───────────────────────────────────────────────
function Newsletter(){
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  return (
    <section className="news section" data-screen-label="08 newsletter">
      <Sun parallax={0.05} />
      <div className="container">
        <div className="eyebrow" style={{marginBottom:20}}>— 07 / newsletter</div>
        <h2>nemoj da <em>propustiš</em><br/>06.06.</h2>
        <p className="sub">Pretplatnici dobijaju pristup 24h ranije i lookbook PDF na email pre lansiranja.</p>
        {!done ? (
          <form className="news-form" onSubmit={(e)=>{e.preventDefault(); if(email.includes('@')) setDone(true);}}>
            <input type="email" required placeholder="tvoj@email.com" value={email} onChange={e=>setEmail(e.target.value)} />
            <Btn tiny type="submit">pretplati me <IconArrow size={10} /></Btn>
          </form>
        ) : (
          <div style={{display:'inline-flex',gap:10,alignItems:'center',padding:'14px 22px',border:'1px solid var(--ink)',borderRadius:999}}>
            <IconCheck size={12} />
            <span className="mono" style={{fontSize:11,letterSpacing:'.16em',textTransform:'uppercase'}}>vidimo se 06.06.</span>
          </div>
        )}
      </div>
    </section>
  );
}

// ── FOOTER ───────────────────────────────────────────────────
function Footer(){
  return (
    <footer className="footer" data-screen-label="09 footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="foot-logo">
              <img src={(typeof window!=='undefined' && window.__resources && window.__resources.logoMarkLight) || "assets/logo-mark-light.png"} alt="nude&shy" style={{height:48, width:'auto', display:'block'}} />
            </div>
            <p style={{maxWidth:'34ch',color:'color-mix(in oklab, var(--bg) 65%, transparent)',fontSize:13,lineHeight:1.55,margin:'14px 0 0'}}>
              Letnja ko-edicija brendova nude&amp;rude i the shyguy. Beograd · ljeto 2026.
            </p>
          </div>
          <div>
            <h5>shop</h5>
            <ul>
              <li><a href="#shop-spf">skincare · SPF</a></li>
              <li><a href="#shop-spf">after sun</a></li>
              <li><a href="#shop-beach">swimwear</a></li>
              <li><a href="#shop-beach">resort apparel</a></li>
              <li><a href="#bundles">bundles & edits</a></li>
            </ul>
          </div>
          <div>
            <h5>brendovi</h5>
            <ul>
              <li><a href="https://www.nudeandrude.rs/" target="_blank" rel="noreferrer">nudeandrude.rs ↗</a></li>
              <li><a href="https://www.the-shyguy.com/en/" target="_blank" rel="noreferrer">the-shyguy.com ↗</a></li>
              <li><a href="#story">naša priča</a></li>
              <li><a href="#lookbook">lookbook ’26</a></li>
            </ul>
          </div>
          <div>
            <h5>info</h5>
            <ul>
              <li><a href="#">dostava & povraćaj</a></li>
              <li><a href="#">veličine</a></li>
              <li><a href="#">sastavi & održivost</a></li>
              <li><a href="#">kontakt</a></li>
              <li><a href="#">instagram</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 nude&amp;shy — sva prava zadržana.</span>
          <span>privacy · terms · cookies</span>
        </div>
      </div>
    </footer>
  );
}

// ── CART DRAWER ──────────────────────────────────────────────
function CartDrawer(){
  const { items, open, setOpen, setQty, remove, subtotal, shipping, total, toast } = useCart();
  return (
    <>
      <div className={`cart-overlay ${open?'open':''}`} onClick={()=>setOpen(false)} />
      <aside className={`cart-drawer ${open?'open':''}`} aria-hidden={!open}>
        <header className="cart-hd">
          <h3>your bag · {items.reduce((s,x)=>s+x.qty,0)}</h3>
          <button className="x" onClick={()=>setOpen(false)} aria-label="close"><IconX /></button>
        </header>
        <div className="cart-items">
          {items.length===0 && (
            <div className="cart-empty">
              <p>bag je prazan.</p>
              <Btn tiny ghost onClick={()=>setOpen(false)}>nastavi shopping</Btn>
            </div>
          )}
          {items.map(it => (
            <div className="cart-row" key={it.key}>
              <div className={`ph ${it.ph==='tonal'?'tonal':it.ph==='dark'?'dark':''}`} />
              <div className="meta">
                <div className="nm">{it.label}</div>
                {it.sub && <div className="opt">{it.sub}</div>}
                {(it.size || it.color) && <div className="opt">{[it.size, it.color].filter(Boolean).join(' · ')}</div>}
                <div className="qty">
                  <button onClick={()=>setQty(it.key, it.qty-1)} aria-label="−">−</button>
                  <span>{it.qty}</span>
                  <button onClick={()=>setQty(it.key, it.qty+1)} aria-label="+">+</button>
                </div>
              </div>
              <div className="right">
                <div className="pr">€{it.price*it.qty}</div>
                <button className="rm" onClick={()=>remove(it.key)}>ukloni</button>
              </div>
            </div>
          ))}
        </div>
        {items.length>0 && (
          <footer className="cart-foot">
            <div className="row"><span>subtotal</span><span>€{subtotal}</span></div>
            <div className="row"><span>dostava</span><span>{shipping===0?'gratis':`€${shipping}`}</span></div>
            <div className="total">
              <span className="lbl">total</span>
              <span className="val">€{total}</span>
            </div>
            <Btn huge>checkout <IconArrow /></Btn>
            <div className="ship">{subtotal<150 ? `dodaj €${150-subtotal} za besplatnu dostavu` : 'besplatna dostava uključena'}</div>
          </footer>
        )}
      </aside>
      <div className={`toast ${toast?'show':''}`}>
        <span className="dot" />
        <span>{toast || ''}</span>
      </div>
    </>
  );
}

Object.assign(window, {
  Nav, Hero, Story, SkincareShop, BeachShop, BundlesSection, Lookbook, Ritual, Newsletter, Footer, CartDrawer
});
