const {Button, Window, Transit} = window.ArcadiaDesignSystem_90e8f6;
// The Measure — technical elevation of the cone, starlight hairlines, Schibsted micro labels
function Measure(){
  const hat = EST.hat;
  return <svg className="est-measure" viewBox="0 0 560 640" role="img" aria-label={"Elevation drawing of the hat: height "+hat.height+", brim "+hat.brim+", weight "+hat.weight}>
    <line className="mzn mzn-soft" x1="70" y1="600" x2="500" y2="600"/>
    <path className="mzn" d="M280 52 C 254 220 180 440 143 556"/>
    <path className="mzn" d="M280 52 C 306 220 380 440 417 556"/>
    <ellipse className="mzn" cx="280" cy="560" rx="150" ry="24"/>
    <ellipse className="mzn mzn-soft" cx="280" cy="556" rx="137" ry="19"/>
    {/* height dimension */}
    <line className="mzn mzn-soft" x1="280" y1="52" x2="470" y2="52"/>
    <line className="mzn mzn-soft" x1="430" y1="584" x2="470" y2="584"/>
    <line className="mzn" x1="458" y1="52" x2="458" y2="584"/>
    <path className="mzn" d="M454 60l4-8 4 8M454 576l4 8 4-8"/>
    <text x="472" y="316" textAnchor="start">{"HEIGHT — 6 FT 0 IN"}</text>
    {/* brim dimension */}
    <line className="mzn mzn-soft" x1="130" y1="566" x2="130" y2="620"/>
    <line className="mzn mzn-soft" x1="430" y1="566" x2="430" y2="620"/>
    <line className="mzn" x1="130" y1="612" x2="430" y2="612"/>
    <path className="mzn" d="M138 608l-8 4 8 4M422 608l8 4-8 4"/>
    <text x="280" y="634" textAnchor="middle">BRIM — 21 IN</text>
    {/* weight leader */}
    <line className="mzn mzn-soft" x1="252" y1="300" x2="150" y2="260"/>
    <circle className="mzn" cx="252" cy="300" r="2"/>
    <text x="146" y="252" textAnchor="start">WEIGHT — 2.1 LB</text>
    {/* foot scale */}
    {[0,1,2,3,4,5,6].map(f=>{ const y = 584 - f*(532/6); return <g key={f}>
      <line className="mzn mzn-soft" x1="86" y1={y} x2="98" y2={y}/>
      <text x="80" y={y+3.5} textAnchor="end">{f}</text>
    </g>;})}
    <line className="mzn mzn-soft" x1="92" y1="52" x2="92" y2="584"/>
    <text x="70" y="34" textAnchor="start">FT</text>
    <text x="500" y="24" textAnchor="end" style={{opacity:.8}}>THE HAT — ELEVATION · VALUES PROVISIONAL (TBD)</text>
  </svg>;
}
function BuyModule({tweaks, onAdd}){
  const hat = EST.hat;
  const [qty, setQty] = React.useState(1);
  const inStock = tweaks.stock === "In stock";
  return <div className="arc-card pdp-buy">
    <div>
      <h1 className="heading-1" style={{margin:"0 0 10px", fontSize:34}}>{hat.title}</h1>
      <p className="chrome-text" style={{color:"var(--text-secondary)", margin:0}}>{hat.desc}</p>
    </div>
    <div className="pdp-price"><Tbd note="price TBD">{money(hat.price)}</Tbd></div>
    <div>
      <div className="pdp-slotrow"><span className="micro-text">Size</span><span className="chrome-text" style={{color:"var(--text-secondary)"}}><Tbd note="variant slot reserved — sizing TBD">One size</Tbd></span></div>
      {inStock && <div className="pdp-slotrow"><span className="micro-text">Quantity</span><Stepper value={qty} onChange={setQty}/></div>}
    </div>
    {inStock ? <div style={{display:"flex", flexDirection:"column", gap:12}}>
      <Button onClick={()=>onAdd(qty)}>Buy the hat</Button>
      <p className="chrome-text" style={{color:"var(--text-secondary)", margin:0, fontSize:14}}>{hat.batchLine}<Tbd note="batch cadence TBD">{hat.shipDays}</Tbd>.</p>
      <p className="chrome-text" style={{color:"var(--text-secondary)", margin:0, fontSize:14}}><Tbd note="shipping method TBD — tube, flat-pack, or collapsible">{hat.method}</Tbd></p>
    </div> : <div style={{display:"flex", flexDirection:"column", gap:14}}>
      <p className="chrome-text" style={{margin:0}}>{hat.goneLine}</p>
      <NotifyMe purpose="We'll write when the next batch is ready." compact/>
    </div>}
  </div>;
}
function ShopPage({tweaks, onAdd}){
  const hat = EST.hat;
  const studio = [["1/1","the hat — crown detail"],["4/5","the hat — brim and trim"],["4/5","the hat — worn, studio"]];
  const visit = [["4/5","worn — the mattress store"],["4/5","worn — the overcast plaza"],["4/5","lent — a stranger, food court"]];
  return <div className="pdp" style={{paddingTop:8}}>
    <div className="pdp-hero reveal">
      <div className="pdp-cap"><span className="micro-text" style={{color:"var(--starlight-100)"}}>Actual height: <Tbd note="height TBD">6 ft</Tbd></span></div>
      <div className="arc-window pdp-plate"><div className="arc-window-plate"><span>the hat — full length · Planet register</span></div></div>
    </div>
    <aside className="pdp-aside"><div className="pdp-aside-inner"><BuyModule tweaks={tweaks} onAdd={onAdd}/></div></aside>
    <div className="pdp-rest">
      <section className="pdp-section">
        <h2 className="heading-2" style={{margin:"0 0 20px"}}>The Measure</h2>
        <Measure/>
      </section>
      <section className="pdp-section">
        <div className="micro-text">Studio — the Planet register</div>
        <div className="est-gallery">{studio.map(([a,p])=><Window key={p} aspect={a} placeholder={p}/>)}</div>
        <div className="micro-text" style={{marginTop:32}}>Worn — visit context</div>
        <div className="est-gallery">{visit.map(([a,p])=><Window key={p} aspect={a} placeholder={p}/>)}</div>
      </section>
      <section className="pdp-section" style={{maxWidth:680}}>
        <h2 className="heading-2" style={{margin:"0 0 16px"}}>The making</h2>
        <p className="body-text" style={{margin:0}}>{EST.making}</p>
      </section>
      <section className="pdp-section" style={{maxWidth:680}}>
        <Collapse title="Care">{EST.care}</Collapse>
        <Collapse title="Shipping">
          <p style={{margin:"0 0 12px"}}><Tbd note="shipping method TBD">{hat.method}</Tbd> {EST.shipNote}</p>
          <div style={{maxWidth:340}}><Window aspect="3/1" placeholder="packing diagram — method TBD"/></div>
        </Collapse>
        <Collapse title="Returns">{EST.returns}</Collapse>
      </section>
    </div>
  </div>;
}
function CartDrawer({open, onClose, qty, setQty, go}){
  const hat = EST.hat;
  React.useEffect(()=>{
    if(!open) return;
    const onKey = (e)=>{ if(e.key==="Escape") onClose(); };
    window.addEventListener("keydown", onKey); return ()=>window.removeEventListener("keydown", onKey);
  },[open]);
  return <React.Fragment>
    <div className={"est-scrim"+(open?" open":"")} onClick={onClose}></div>
    <aside className={"est-drawer"+(open?" open":"")} role="dialog" aria-label="Cart" aria-hidden={!open}>
      <div className="est-drawer-head">
        <span className="chrome-text" style={{fontWeight:600}}>Cart</span>
        <button type="button" className="est-bag" aria-label="Close cart" onClick={onClose}><Ic d={IC.x} size={18}/></button>
      </div>
      {qty>0 ? <React.Fragment>
        <div className="est-drawer-body">
          <div className="est-lineitem">
            <div style={{width:64, flexShrink:0}}><Window aspect="1/1" placeholder="hat"/></div>
            <div style={{flex:1, display:"flex", flexDirection:"column", gap:8}}>
              <div style={{display:"flex", justifyContent:"space-between", gap:12}}>
                <span className="chrome-text" style={{fontWeight:600}}>The Hat</span>
                <span className="chrome-text" style={{color:"var(--starlight-100)"}}><Tbd note="price TBD">{money(hat.price*qty)}</Tbd></span>
              </div>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                <Stepper value={qty} onChange={(v)=>setQty(v)} min={1}/>
                <a href="#" style={{fontSize:13}} onClick={(e)=>{e.preventDefault(); setQty(0);}}>Remove</a>
              </div>
            </div>
          </div>
        </div>
        <div className="est-drawer-foot">
          <div style={{display:"flex", justifyContent:"space-between"}}>
            <span className="chrome-text">Subtotal</span>
            <span className="chrome-text" style={{color:"var(--starlight-100)", fontWeight:600}}>{money(hat.price*qty)}</span>
          </div>
          <Button onClick={()=>{onClose(); go("checkout");}}>Check out</Button>
        </div>
      </React.Fragment> : <div className="est-drawer-body" style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", gap:18}}>
        <Transit size={36}/>
        <p className="chrome-text" style={{color:"var(--text-secondary)", margin:0}}>The cart is quiet.</p>
        <a href="#/shop" onClick={(e)=>{e.preventDefault(); onClose(); go("shop");}}>Shop</a>
      </div>}
    </aside>
  </React.Fragment>;
}
function CheckoutPage({qty, go, onPlace}){
  const hat = EST.hat;
  if(qty<1) return <EmptyState line="The cart is quiet." actionLabel="Shop" onAction={()=>go("shop")}/>;
  return <div style={{maxWidth:560, paddingTop:16}}>
    <h1 className="heading-1" style={{margin:"0 0 28px"}}>Your order</h1>
    <div className="est-lineitem" style={{borderTop:"1px solid var(--border-hairline)"}}>
      <div style={{width:56, flexShrink:0}}><Window aspect="1/1" placeholder="hat"/></div>
      <span className="chrome-text" style={{flex:1}}>The Hat{qty>1?" × "+qty:""}</span>
      <span className="chrome-text" style={{color:"var(--starlight-100)"}}><Tbd note="price TBD">{money(hat.price*qty)}</Tbd></span>
    </div>
    <p className="chrome-text" style={{color:"var(--text-secondary)", margin:"18px 0 0", fontSize:14}}>{hat.batchLine}<Tbd note="batch cadence TBD">{hat.shipDays}</Tbd>. <Tbd note="shipping method TBD">{hat.method}</Tbd></p>
    <div style={{display:"flex", justifyContent:"space-between", borderTop:"1px solid var(--border-hairline)", marginTop:22, paddingTop:16}}>
      <span className="chrome-text" style={{fontWeight:600}}>Total</span>
      <span className="chrome-text" style={{color:"var(--starlight-100)", fontWeight:600}}>{money(hat.price*qty)}</span>
    </div>
    <p className="micro-text" style={{margin:"10px 0 26px"}}><Tbd note="taxes/shipping settle in the hosted flow">Taxes and shipping settle at payment</Tbd></p>
    <div style={{display:"flex", flexDirection:"column", gap:12}}>
      <Button onClick={onPlace}>Continue to payment</Button>
      <span className="micro-text" style={{textTransform:"none", letterSpacing:0}}>Payment happens on a secure hosted page (provider <Tbd note="Stripe vs Shopify — Open Decision 2">TBD</Tbd>). This prototype skips it.</span>
      <a href="#/shop" onClick={(e)=>{e.preventDefault(); go("shop");}} style={{fontSize:14}}>Back to the hat</a>
    </div>
  </div>;
}
function ThanksPage({go}){
  return <div style={{maxWidth:560, padding:"48px 0 24px"}}>
    <svg className="spark-mark" viewBox="0 0 48 48" width="46" height="46" aria-hidden="true">
      <path className="spark-trail" d="M24 3 L28.7 17.5 L41.1 18.4 L31.1 26.3 L35.2 39.4 L24 32 L14 37.8 L17.3 26.2 L5 17.8 L19.4 17.7 Z" fill="none" stroke="var(--thread-400)" strokeWidth="1.2"/>
      <path className="spark-fill" d="M24 3 L28.7 17.5 L41.1 18.4 L31.1 26.3 L35.2 39.4 L24 32 L14 37.8 L17.3 26.2 L5 17.8 L19.4 17.7 Z" fill="var(--thread-500)"/>
    </svg>
    <h1 className="display-planet" style={{fontSize:"clamp(36px,5vw,50px)", margin:"20px 0 18px"}}>The hat is on its way.</h1>
    <p className="chrome-text" style={{color:"var(--text-secondary)", margin:"0 0 8px"}}>Order PR-1042 — it ships within <Tbd note="batch cadence TBD">10 days</Tbd>, and we'll email tracking the day it leaves.</p>
    <p className="chrome-text" style={{color:"var(--text-secondary)", margin:"0 0 26px"}}>Questions? <a href="#/contact" onClick={(e)=>{e.preventDefault(); go("contact");}}>hello@planetruti.com</a></p>
    <p className="body-text" style={{fontStyle:"italic", color:"var(--text-primary)", margin:"0 0 40px"}}>When it arrives, wear it somewhere ordinary.</p>
    <NotifyMe purpose="Batches and releases. Nothing else." compact/>
    <div style={{display:"flex", gap:20, marginTop:36}}>
      <a href="#/music" onClick={(e)=>{e.preventDefault(); go("music");}}>Music</a>
      <a href="#/videos" onClick={(e)=>{e.preventDefault(); go("videos");}}>Videos</a>
    </div>
  </div>;
}
Object.assign(window, {ShopPage, BuyModule, Measure, CartDrawer, CheckoutPage, ThanksPage});