const JOURNAL_CATEGORIES=[
{slug:'editorials',name:'Editorials',desc:'Thoughtful reflections on luxury, creativity and design.',img:2},
{slug:'craftsmanship',name:'Craftsmanship',desc:'The stories behind artisans, materials and timeless making.',img:7},
{slug:'design-inspiration',name:'Design & Inspiration',desc:'Ideas that influence timeless creations.',img:9},
{slug:'luxury-living',name:'Luxury Living',desc:'Elegant living, interiors, hospitality and lifestyle.',img:16},
{slug:'fashion-style',name:'Fashion & Style',desc:'Timeless dressing and styling inspiration.',img:4},
{slug:'jewellery-notes',name:'Jewellery Notes',desc:'Design, symbolism, materials and styling.',img:17},
{slug:'fragrances-beauty',name:'Fragrances & Beauty',desc:'The world of scent, ingredients and sensory experiences.',img:19},
{slug:'home-decor',name:'Home & Décor',desc:'Objects that create beautiful spaces.',img:11},
{slug:'travel-culture',name:'Travel & Culture',desc:'Places, traditions and journeys that inspire creativity.',img:6},
{slug:'meaningful-gifting',name:'Meaningful Gifting',desc:'Thoughtful gifting traditions and celebrations.',img:14},
{slug:'sustainability',name:'Sustainability',desc:'Responsible luxury and conscious craftsmanship.',img:10},
{slug:'behind-the-collection',name:'Behind The Collection',desc:'Stories behind future BOLD BEE collections.',img:1},
{slug:'founder-notes',name:'Founder Notes',desc:'Occasional reflections from the founder.',img:3},
{slug:'events-exhibitions',name:'Events & Exhibitions',desc:'Luxury events, showcases and exhibitions.',img:5},
{slug:'bold-bee-news',name:'Bold Bee News',desc:'Official announcements and milestones.',img:8}
];
function catName(slug){ const c=JOURNAL_CATEGORIES.find(x=>x.slug===slug); return c?c.name:slug; }
const ARTICLES=[
{slug:'weaving-families-varanasi',title:'The Weaving Families of Varanasi',excerpt:'Inside the workshops where Banarasi brocade is still drawn thread by thread.',img:0,category:'craftsmanship',readMins:6,date:'2026-05-12',author:'Bold Bee Editorial',featured:true,
body:['Every commission at Bold Bee begins with a conversation with the weaving family, not a purchase order. The loom is set weeks before a single thread of zari is drawn, and the pattern is corrected by hand as the piece grows.','What reaches the wearer is not a product cycle — it is the end of a relationship between artisan and cloth that Bold Bee exists to protect.']},
{slug:'reading-a-kanjivaram-border',title:'How to Read a Kanjivaram Border',excerpt:'The temple motifs woven into every Kanjivaram carry regional meaning.',img:2,category:'craftsmanship',readMins:5,date:'2026-04-28',author:'Bold Bee Editorial',
body:['A Kanjivaram border is a language of its own — temple spires, checks and mango motifs each trace back to a specific weaving town and a specific hand.','To read a border correctly is to understand a small, precise history.']},
{slug:'six-weeks-one-saree',title:'Six Weeks, One Saree',excerpt:'A single Tussar commission, followed from raw fibre to finished drape.',img:9,category:'craftsmanship',readMins:7,date:'2026-04-10',author:'Bold Bee Editorial',
body:['We followed a single Tussar commission from raw fibre to finished drape — six weeks, one weaver, no shortcuts.','Nothing about the timeline changed to meet a deadline. The cloth decided when it was ready.']},
{slug:'quiet-luxury-defined',title:'What Quiet Luxury Actually Means',excerpt:'An editorial on restraint, material honesty and the discipline of less.',img:16,category:'editorials',readMins:5,date:'2026-06-02',author:'Bold Bee Editorial',
body:['Quiet luxury is not the absence of expression — it is the discipline of choosing only what is necessary.','Restraint, done well, is its own form of confidence.']},
{slug:'proportion-and-patience',title:'Proportion and Patience',excerpt:'Why the best design decisions are the ones you never notice.',img:4,category:'design-inspiration',readMins:4,date:'2026-05-30',author:'Bold Bee Editorial',
body:['The finest design decisions are invisible — a proportion that simply feels correct, a silhouette that asks nothing of the eye.','This is the quiet labour behind every considered creation.']},
{slug:'setting-a-luxury-table',title:'Setting a Luxury Table',excerpt:'On hospitality, restraint and the objects that make a room feel considered.',img:11,category:'luxury-living',readMins:6,date:'2026-03-22',author:'Bold Bee Editorial',
body:['A considered table is not an abundant one. It is one where every object has been chosen, not accumulated.','Hospitality, at its best, is quiet generosity.']},
{slug:'draping-through-decades',title:'Draping Through the Decades',excerpt:'How the silhouette of the saree has moved without ever losing its form.',img:1,category:'fashion-style',readMins:5,date:'2026-02-18',author:'Bold Bee Editorial',
body:['The saree has answered every decade differently while never abandoning its essential form.','Its adaptability is itself a kind of permanence.']},
{slug:'symbolism-in-gold',title:'The Symbolism Woven Into Gold',excerpt:'What jewellery motifs have meant across generations of Indian craft.',img:17,category:'jewellery-notes',readMins:5,date:'2026-06-15',author:'Bold Bee Editorial',
body:['Every motif in traditional gold work carries an inherited meaning — protection, prosperity, remembrance.','To wear it is to carry that meaning forward.']},
{slug:'anatomy-of-a-fragrance',title:'The Anatomy of a Fragrance',excerpt:'Top, heart and base notes — how a scent is built to unfold over hours.',img:19,category:'fragrances-beauty',readMins:6,date:'2026-05-05',author:'Bold Bee Editorial',
body:['A fine fragrance is a composition in time — top notes that greet, heart notes that settle, base notes that remain.','Understanding this structure changes how a scent is chosen.']},
{slug:'objects-that-hold-a-room',title:'Objects That Hold a Room',excerpt:'On the quiet architecture of considered home objects.',img:11,category:'home-decor',readMins:4,date:'2026-01-30',author:'Bold Bee Editorial',
body:['A room is held together by a handful of considered objects, not by abundance.','Choose them slowly.']},
{slug:'journeys-that-shape-craft',title:'Journeys That Shape Craft',excerpt:'How travel and tradition continue to inform contemporary making.',img:6,category:'travel-culture',readMins:5,date:'2026-03-08',author:'Bold Bee Editorial',
body:['Every craft tradition carries the memory of the places it has passed through.','Travel remains one of the quiet engines of design.']},
{slug:'art-of-thoughtful-gifting',title:'The Art of Thoughtful Gifting',excerpt:'What separates a considered gift from a purchased one.',img:14,category:'meaningful-gifting',readMins:4,date:'2026-04-02',author:'Bold Bee Editorial',
body:['A considered gift begins with attention, not with a catalogue.','It should say something true about the person receiving it.']},
{slug:'responsible-by-design',title:'Responsible by Design',excerpt:'How sourcing decisions shape the long-term integrity of a craft.',img:10,category:'sustainability',readMins:5,date:'2026-02-27',author:'Bold Bee Editorial',
body:['Responsible sourcing is not a marketing position at Bold Bee — it is a precondition for craft that lasts.','Quality over quantity is the only sustainable posture we recognise.']},
{slug:'founders-note-on-beginnings',title:"A Founder's Note on Beginnings",excerpt:'Why Bold Bee started with a single loom and a single promise.',img:3,category:'founder-notes',readMins:4,date:'2026-01-15',author:'Founder, Bold Bee',
body:['We began with a single loom and a single promise: never rush the cloth.','Everything since has been an extension of that first decision.']}
];
function readingTime(mins){ return `${mins} min read`; }
function fmtDate(iso){ return new Date(iso).toLocaleDateString('en-IN',{day:'numeric',month:'long',year:'numeric'}); }
function ArticleCard({a}){
  return (
    <a href={`Journal-Article.html?slug=${a.slug}`} style={{textDecoration:'none',display:'block'}}>
      <div style={{aspectRatio:'4/3',borderRadius:'var(--radius-lg)',overflow:'hidden',marginBottom:16}}><img src={photo(a.img,900)} alt={a.title} loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
      <div style={{fontSize:11,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--gold-deep)',marginBottom:8}}>{catName(a.category)} · {readingTime(a.readMins)}</div>
      <div style={{fontFamily:'var(--font-serif)',fontSize:20,color:'var(--text-primary)',marginBottom:6,lineHeight:1.3}}>{a.title}</div>
      <div style={{fontSize:14,color:'var(--text-muted)',marginBottom:8}}>{a.excerpt}</div>
      <div style={{fontSize:12,color:'var(--text-muted)'}}>{fmtDate(a.date)}</div>
    </a>
  );
}
function NewsletterCTA(){
  const [email,setEmail]=React.useState('');
  const [done,setDone]=React.useState(false);
  return (
    <section style={{maxWidth:560,margin:'0 auto',padding:'var(--space-section) var(--container-pad)',textAlign:'center'}}>
      <Eyebrow style={{justifyContent:'center'}}>Continue the Journey</Eyebrow>
      <H2 style={{marginBottom:16}}>Stay With the Story</H2>
      <p style={{fontSize:15,color:'var(--text-secondary)',marginBottom:24,lineHeight:1.8}}>Subscribe to receive thoughtfully curated stories, editorials and future Bold Bee collections.</p>
      {done?(
        <p style={{fontSize:14,color:'var(--gold-deep)'}}>Thank you — you will hear from us soon.</p>
      ):(
        <form onSubmit={e=>{e.preventDefault();if(email)setDone(true);}} style={{display:'flex',gap:10,justifyContent:'center',flexWrap:'wrap'}}>
          <input required type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="Your email address" style={{flex:'1 1 260px',maxWidth:320,padding:'14px 18px',border:'1px solid var(--border-default)',borderRadius:'var(--radius-md)',fontSize:14,fontFamily:'var(--font-sans)'}}/>
          <PrimaryButton type="submit">Subscribe</PrimaryButton>
        </form>
      )}
    </section>
  );
}
function Journal(){
  const params=new URLSearchParams(location.search);
  const [cat,setCat]=React.useState(params.get('category')||'All');
  const [q,setQ]=React.useState('');
  const [sort,setSort]=React.useState('newest');
  React.useEffect(()=>{document.title='The Bold Bee Journal';},[]);
  const featured=ARTICLES.find(a=>a.featured);
  let list=ARTICLES.filter(a=>(cat==='All'||a.category===cat)&&(!q||(a.title+a.excerpt).toLowerCase().includes(q.toLowerCase())));
  list=list.slice().sort((a,b)=>sort==='oldest'?new Date(a.date)-new Date(b.date):new Date(b.date)-new Date(a.date));
  return (
    <div>
      <Breadcrumbs trail={[{label:'Home',href:'index.html'},{label:'Journal'}]}/>
      <section style={{position:'relative',height:'62vh',minHeight:420,marginTop:16}}>
        <img src={photo(2,1920)} alt="The Bold Bee Journal" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(31,31,31,0.1),rgba(31,31,31,0.45))'}}></div>
        <div style={{position:'absolute',left:0,right:0,bottom:'12%',textAlign:'center',color:'var(--ivory)',padding:'0 24px'}}>
          <h1 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(34px,5vw,58px)',margin:'0 0 14px',color:'var(--ivory)'}}>The <span style={{fontSize:'1.35em',fontWeight:600}}>Bold Bee</span> Journal</h1>
          <p style={{maxWidth:520,margin:'0 auto',fontSize:16,lineHeight:1.8,opacity:0.92}}>Stories of craftsmanship, design, culture, luxury living and timeless inspiration.</p>
        </div>
      </section>
      <div style={{maxWidth:680,margin:'0 auto',padding:'var(--space-6) var(--container-pad) 0',textAlign:'center'}}>
        <p style={{fontSize:16,lineHeight:1.9,color:'var(--text-secondary)'}}>Luxury is not defined by possessions. It is shaped by stories, ideas, craftsmanship and thoughtful living. The Bold Bee Journal is an evolving editorial space where design, culture, artistry and inspiration come together to celebrate a world built on timeless elegance.</p>
      </div>
      <PublicationBanner destination="Journal"/>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-6) var(--container-pad) 0'}}>
        <Eyebrow>Editorial Collections</Eyebrow>
        <div style={{display:'flex',gap:14,overflowX:'auto',paddingBottom:12}}>
          {JOURNAL_CATEGORIES.map(c=>(
            <a key={c.slug} href={`Journal.html?category=${c.slug}`} onClick={e=>{e.preventDefault();setCat(c.slug);}} style={{flex:'0 0 auto',width:190,textDecoration:'none',display:'block'}}>
              <div style={{aspectRatio:'4/3',borderRadius:'var(--radius-md)',overflow:'hidden',marginBottom:8,border:cat===c.slug?'2px solid var(--gold-deep)':'1px solid var(--border-soft)'}}><img src={photo(c.img,400)} alt={c.name} loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
              <div style={{fontSize:13,color:'var(--text-primary)',fontFamily:'var(--font-serif)'}}>{c.name}</div>
            </a>
          ))}
        </div>
      </div>
      {featured&&cat==='All'&&!q&&(
        <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-6) var(--container-pad) 0'}}>
          <Eyebrow>Featured Story</Eyebrow>
          <a href={`Journal-Article.html?slug=${featured.slug}`} style={{textDecoration:'none',display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:32,alignItems:'center'}}>
            <div style={{aspectRatio:'16/10',borderRadius:'var(--radius-lg)',overflow:'hidden'}}><img src={photo(featured.img,1400)} alt={featured.title} style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
            <div>
              <div style={{fontSize:11,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--gold-deep)',marginBottom:10}}>{catName(featured.category)} · {readingTime(featured.readMins)}</div>
              <div style={{fontFamily:'var(--font-serif)',fontSize:'clamp(24px,3vw,34px)',color:'var(--text-primary)',marginBottom:12}}>{featured.title}</div>
              <p style={{fontSize:15,color:'var(--text-secondary)',lineHeight:1.8}}>{featured.excerpt}</p>
            </div>
          </a>
        </div>
      )}
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-6) var(--container-pad) 0',display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:16,borderBottom:'1px solid var(--border-soft)',paddingBottom:20}}>
        <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search stories" style={{padding:'10px 16px',border:'1px solid var(--border-default)',borderRadius:'var(--radius-pill)',fontSize:13,minWidth:220}}/>
        <select value={sort} onChange={e=>setSort(e.target.value)} style={{padding:'10px 16px',border:'1px solid var(--border-default)',borderRadius:'var(--radius-pill)',fontSize:13,background:'var(--white)'}}>
          <option value="newest">Newest</option>
          <option value="oldest">Oldest</option>
        </select>
      </div>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-6) var(--container-pad) var(--space-section)'}}>
        {list.length?(
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:32}}>{list.map(a=>(<ArticleCard key={a.slug} a={a}/>))}</div>
        ):(<p style={{textAlign:'center',color:'var(--text-muted)',padding:'var(--space-7) 0'}}>No stories match your search.</p>)}
      </div>
      <NewsletterCTA/>
    </div>
  );
}
function JournalArticle(){
  const params=new URLSearchParams(location.search);
  const a=ARTICLES.find(x=>x.slug===params.get('slug'))||ARTICLES[0];
  React.useEffect(()=>{document.title=`${a.title} — Bold Bee Journal`;},[a.slug]);
  const related=ARTICLES.filter(x=>x.category===a.category&&x.slug!==a.slug).slice(0,4);
  const shareArticle={id:`journal-${a.slug}`,name:a.title,imgs:[a.img]};
  return (
    <div>
      <Breadcrumbs trail={[{label:'Home',href:'index.html'},{label:'Journal',href:'Journal.html'},{label:a.title}]}/>
      <div style={{maxWidth:900,margin:'32px auto 0',padding:'0 var(--container-pad)'}}><div style={{aspectRatio:'21/9',borderRadius:'var(--radius-lg)',overflow:'hidden'}}><img src={photo(a.img,1800)} alt={a.title} style={{width:'100%',height:'100%',objectFit:'cover'}}/></div></div>
      <div style={{maxWidth:680,margin:'0 auto',padding:'var(--space-7) var(--container-pad) 0'}}>
        <Eyebrow>{catName(a.category)}</Eyebrow>
        <h1 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(28px,3vw,40px)',margin:'0 0 16px',color:'var(--text-primary)'}}>{a.title}</h1>
        <div style={{fontSize:13,color:'var(--text-muted)',marginBottom:32}}>{readingTime(a.readMins)} · {fmtDate(a.date)} · {a.author}</div>
        {a.body.map((p,i)=>(<p key={i} style={{fontSize:17,lineHeight:1.9,color:'var(--text-secondary)',marginBottom:18}}>{p}</p>))}
        <div style={{marginTop:32,paddingTop:24,borderTop:'1px solid var(--border-soft)',display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:16}}>
          <a href="Journal.html" style={{fontSize:13,letterSpacing:'var(--tracking-wide)',textTransform:'uppercase',color:'var(--gold-deep)',textDecoration:'none'}}>&larr; Back to Journal</a>
          {typeof ShareSheet!=='undefined'&&<ShareSheet product={shareArticle} url={location.href}/>}
        </div>
      </div>
      {related.length>0&&(
        <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-section) var(--container-pad)'}}>
          <Eyebrow>You May Also Enjoy</Eyebrow>
          <H2 style={{marginBottom:32}}>Related Stories</H2>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:24}}>{related.map(r=>(<ArticleCard key={r.slug} a={r}/>))}</div>
        </div>
      )}
      <NewsletterCTA/>
    </div>
  );
}
Object.assign(window,{Journal,JournalArticle,JOURNAL_CATEGORIES,ARTICLES});