function Reveal({children,style}){
  const ref=React.useRef(null);
  const [visible,setVisible]=React.useState(false);
  React.useEffect(()=>{
    const el=ref.current; if(!el)return;
    const obs=new IntersectionObserver(([e])=>{if(e.isIntersecting){setVisible(true);obs.disconnect();}},{threshold:0.15});
    obs.observe(el);
    return ()=>obs.disconnect();
  },[]);
  return <div ref={ref} style={{opacity:visible?1:0,transform:visible?'translateY(0)':'translateY(28px)',transition:'opacity 900ms var(--ease-out), transform 900ms var(--ease-out)',...style}}>{children}</div>;
}
function VideoSlot({label,posterIdx,height=460}){
  const [playing,setPlaying]=React.useState(false);
  return (
    <div style={{position:'relative',aspectRatio:'16/9',minHeight:height?undefined:undefined,borderRadius:'var(--radius-lg)',overflow:'hidden',background:'var(--beige)',border:'1px solid var(--border-soft)',display:'flex',alignItems:'center',justifyContent:'center'}}>
      {posterIdx!=null&&<img src={photo(posterIdx,1400)} alt="" loading="lazy" data-temp-asset="true" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',opacity:playing?0.3:0.9,transition:'opacity 300ms var(--ease-out)'}}/>}
      {!playing?(
        <button onClick={()=>setPlaying(true)} aria-label="Play video" style={{position:'relative',width:64,height:64,borderRadius:'50%',border:'1px solid var(--border-default)',background:'var(--white)',color:'var(--text-primary)',fontSize:18,cursor:'pointer'}}>&#9658;</button>
      ):(
        <div style={{position:'relative',fontSize:13,letterSpacing:'0.06em',textTransform:'uppercase',color:'var(--text-primary)',textAlign:'center',padding:24,background:'rgba(248,245,240,0.85)',borderRadius:'var(--radius-md)'}}>Footage to be added — {label}</div>
      )}
      <span style={{position:'absolute',bottom:14,left:18,fontSize:11,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--ivory)',textShadow:'0 1px 3px rgba(0,0,0,0.4)'}}>{label}</span>
    </div>
  );
}
function ChapterHero(){
  return (
    <Reveal>
      <section style={{position:'relative',height:'80vh',minHeight:520}}>
        <img src={photo(14,1920)} alt="" loading="lazy" data-temp-asset="true" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
        <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(31,31,31,0.18),rgba(31,31,31,0.5))',pointerEvents:'none'}}></div>
        <div style={{position:'absolute',left:0,right:0,bottom:'14%',textAlign:'center',color:'var(--ivory)',padding:'0 24px',pointerEvents:'none'}}>
          <div style={{fontSize:12,letterSpacing:'0.2em',textTransform:'uppercase',opacity:0.85,marginBottom:16}}>The House of Bold Bee</div>
          <h1 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(40px,6vw,72px)',margin:'0 0 18px',color:'var(--ivory)'}}>Brand Story</h1>
          <p style={{maxWidth:520,margin:'0 auto',fontSize:17,lineHeight:1.8,opacity:0.92}}>Seven chapters. One continuing story.</p>
        </div>
      </section>
    </Reveal>
  );
}
function ChapterNav({sections}){
  return (
    <nav aria-label="Brand Story sections" style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-6) var(--container-pad)',display:'flex',gap:28,overflowX:'auto',justifyContent:'center',flexWrap:'wrap'}}>
      {sections.map(s=>(
        <a key={s.key} href={`#${s.key}`} style={{fontSize:12,letterSpacing:'0.06em',textTransform:'uppercase',color:'var(--text-muted)',textDecoration:'none',whiteSpace:'nowrap',paddingBottom:4,borderBottom:'1px solid transparent'}} onMouseOver={e=>{e.currentTarget.style.color='var(--text-primary)';e.currentTarget.style.borderBottomColor='var(--gold-deep)';}} onMouseOut={e=>{e.currentTarget.style.color='var(--text-muted)';e.currentTarget.style.borderBottomColor='transparent';}}>{s.label}</a>
      ))}
    </nav>
  );
}
function ChapterHeading({label,subtitle,eyebrow}){
  return (
    <div style={{textAlign:'center',marginBottom:48}}>
      {subtitle&&<div style={{fontSize:12,letterSpacing:'0.1em',color:'var(--gold-deep)',marginBottom:10,textTransform:'uppercase'}}>{subtitle}</div>}
      <H2>{label}</H2>
      {eyebrow&&<p style={{fontSize:15,color:'var(--text-muted)',marginTop:14,maxWidth:520,marginLeft:'auto',marginRight:'auto',lineHeight:1.7}}>{eyebrow}</p>}
    </div>
  );
}
function ChapterOneBeginning({section}){
  return (
    <Reveal>
      <section id={section.key} style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-8) var(--container-pad)',scrollMarginTop:100}}>
        <ChapterHeading label={section.heading} subtitle={section.subtitle}/>
        <div style={{maxWidth:680,margin:'0 auto 48px',textAlign:'center'}}>
          <div className="bs-rich" dangerouslySetInnerHTML={{__html:section.body}}/>
        </div>
        <div style={{display:'grid',gridTemplateColumns:section.showVideo===false?'1fr':'1fr 1fr',gap:'var(--space-6)'}}>
          {section.showHero!==false&&<div style={{aspectRatio:'4/5',borderRadius:'var(--radius-lg)',overflow:'hidden'}}>
            <img src={photo(section.heroImage,1400)} alt={section.heroAlt||''} loading="lazy" data-temp-asset="true" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
          </div>}
          {section.showVideo!==false&&<VideoSlot label={section.heroVideoLabel||section.heading} posterIdx={section.heroVideoPoster} height={0}/>}
        </div>
      </section>
    </Reveal>
  );
}
function ChapterTwoPhilosophy({section}){
  const values=section.values||[];
  return (
    <Reveal>
      <section id={section.key} style={{background:'var(--beige)',padding:'var(--space-8) 0',scrollMarginTop:100}}>
        <div style={{maxWidth:760,margin:'0 auto',padding:'0 var(--container-pad)'}}>
          <ChapterHeading label={section.heading} subtitle={section.subtitle}/>
          <div className="bs-rich" style={{textAlign:'center',marginBottom:36}} dangerouslySetInnerHTML={{__html:section.body}}/>
          <div style={{display:'flex',flexWrap:'wrap',gap:12,justifyContent:'center'}}>
            {values.map(v=>(<span key={v} style={{fontSize:13,letterSpacing:'0.04em',textTransform:'uppercase',color:'var(--text-primary)',border:'1px solid var(--border-default)',borderRadius:'var(--radius-pill)',padding:'10px 20px',background:'var(--white)'}}>{v}</span>))}
          </div>
        </div>
      </section>
    </Reveal>
  );
}
function ChapterThreeHouse({section}){
  const rooms=section.rooms||[];
  return (
    <Reveal>
      <section id={section.key} style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-8) var(--container-pad)',scrollMarginTop:100}}>
        <ChapterHeading label={section.heading} subtitle={section.subtitle} eyebrow={section.body}/>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:32}}>
          {rooms.map(r=>(
            <div key={r.label}>
              <div style={{aspectRatio:'4/3',borderRadius:'var(--radius-lg)',overflow:'hidden',marginBottom:16}}>
                <img src={photo(r.image,1200)} alt="" loading="lazy" data-temp-asset="true" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
              <div style={{fontFamily:'var(--font-serif)',fontSize:19,color:'var(--text-primary)'}}>{r.label}</div>
            </div>
          ))}
        </div>
      </section>
    </Reveal>
  );
}
function PeopleCard({a}){
  const src=a.photo||(a.photoIdx!=null?photo(a.photoIdx,1200):photo(0,1200));
  return (
    <div>
      <div style={{aspectRatio:'4/5',borderRadius:'var(--radius-lg)',overflow:'hidden',marginBottom:16}}>
        <img src={src} alt="" loading="lazy" data-temp-asset="true" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
      </div>
      <div style={{fontSize:12,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--gold-deep)',marginBottom:8}}>{a.designation||a.name}</div>
      <p style={{fontSize:14,lineHeight:1.8,color:'var(--text-secondary)',marginBottom:10}}>{a.bio}</p>
      <div style={{display:'flex',gap:12}}>
        <i data-lucide="camera" style={{width:15,height:15,color:'var(--text-muted)'}}></i>
        <i data-lucide="play-circle" style={{width:15,height:15,color:'var(--text-muted)'}}></i>
      </div>
    </div>
  );
}
function ChapterFourPeople({section,artisans}){
  return (
    <Reveal>
      <section id={section.key} style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-8) var(--container-pad)',scrollMarginTop:100}}>
        <ChapterHeading label={section.heading} subtitle={section.subtitle} eyebrow={section.body}/>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:32}}>
          {artisans.map(a=>(<PeopleCard key={a.id} a={a}/>))}
        </div>
      </section>
    </Reveal>
  );
}
function ChapterFiveJourney({section,timelineByYear}){
  return (
    <Reveal>
      <section id={section.key} style={{background:'var(--beige)',padding:'var(--space-8) 0',scrollMarginTop:100}}>
        <div style={{maxWidth:900,margin:'0 auto',padding:'0 var(--container-pad)'}}>
          <div style={{textAlign:'center',marginBottom:56}}>
            {section.heading&&<div style={{fontSize:12,letterSpacing:'0.1em',color:'var(--gold-deep)',marginBottom:10,textTransform:'uppercase'}}>{section.heading}</div>}
            <H2 style={{marginBottom:20}}>{section.subtitle}</H2>
            <p style={{fontSize:17,lineHeight:1.9,color:'var(--text-secondary)',maxWidth:680,margin:'0 auto 40px'}}>{section.body}</p>
            <div style={{aspectRatio:'21/9',borderRadius:'var(--radius-lg)',overflow:'hidden'}}>
              <img src={photo(section.introImage,1600)} alt="" loading="lazy" data-temp-asset="true" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            </div>
          </div>
          {timelineByYear.length===0&&<p style={{textAlign:'center',fontSize:14,color:'var(--text-muted)'}}>The living timeline of Bold Bee begins here — milestones will appear as they are published.</p>}
          {timelineByYear.map(group=>(
            <div key={group.year} style={{marginBottom:56}}>
              <div style={{fontFamily:'var(--font-serif)',fontSize:34,color:'var(--text-primary)',textAlign:'center',marginBottom:28}}>{group.year}</div>
              {group.events.map((e,i)=>(
                <Reveal key={e.id}>
                  <div style={{display:'grid',gridTemplateColumns:e.featured?'1fr':(i%2===0?'1.1fr 1fr':'1fr 1.1fr'),gap:32,alignItems:'center',marginBottom:36,direction:i%2===0?'ltr':'rtl'}}>
                    <div style={{direction:'ltr',aspectRatio:e.featured?'21/9':'4/3',borderRadius:'var(--radius-lg)',overflow:'hidden'}}>
                      <img src={photo(e.heroImage,1400)} alt="" loading="lazy" data-temp-asset="true" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                    </div>
                    <div style={{direction:'ltr'}}>
                      {e.featured&&<div style={{fontSize:11,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--gold-deep)',marginBottom:8}}>Featured</div>}
                      <div style={{fontFamily:'var(--font-serif)',fontSize:e.featured?26:22,color:'var(--text-primary)',marginBottom:6}}>{e.title}</div>
                      {e.subtitle&&<div style={{fontSize:13,color:'var(--text-muted)',marginBottom:10}}>{e.subtitle}</div>}
                      <p style={{fontSize:15,lineHeight:1.8,color:'var(--text-secondary)',margin:'0 0 10px'}}>{e.description}</p>
                      {e.featured&&e.quote&&<p style={{fontFamily:'var(--font-serif)',fontStyle:'italic',fontSize:17,color:'var(--text-primary)',margin:'10px 0'}}>&ldquo;{e.quote}&rdquo;</p>}
                      {e.location&&<div style={{fontSize:12,color:'var(--text-muted)'}}>{e.location}</div>}
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          ))}
          {section.closingTitle&&(
            <Reveal>
              <div style={{textAlign:'center',marginTop:64}}>
                <div style={{aspectRatio:'21/9',borderRadius:'var(--radius-lg)',overflow:'hidden',marginBottom:32}}>
                  <img src={photo(section.closingImage,1600)} alt="" loading="lazy" data-temp-asset="true" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                </div>
                <div style={{fontFamily:'var(--font-serif)',fontSize:28,color:'var(--text-primary)',marginBottom:16}}>{section.closingTitle}</div>
                <p style={{fontSize:16,lineHeight:1.9,color:'var(--text-secondary)',maxWidth:680,margin:'0 auto'}}>{section.closingBody}</p>
              </div>
            </Reveal>
          )}
        </div>
      </section>
    </Reveal>
  );
}
function ChapterSixLetter({section,founder}){
  return (
    <Reveal>
      <section id={section.key} style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-8) var(--container-pad)',scrollMarginTop:100}}>
        <ChapterHeading label={founder.letterTitle||section.heading} subtitle={section.subtitle}/>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:'var(--space-7)',alignItems:'start',maxWidth:960,margin:'0 auto'}}>
          <div style={{aspectRatio:'4/5',borderRadius:'var(--radius-lg)',overflow:'hidden'}}>
            <img src={photo(founder.portrait,1200)} alt="" loading="lazy" data-temp-asset="true" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
          </div>
          <div>
            <div className="bs-rich" style={{fontFamily:'var(--font-serif)',fontStyle:'italic',fontSize:20,marginBottom:28}} dangerouslySetInnerHTML={{__html:founder.letterContent}}/>
            <div style={{width:220,marginBottom:14,display:'flex',alignItems:'flex-end'}}>
              <span data-temp-asset="true" style={{fontFamily:'var(--font-serif)',fontStyle:'italic',fontSize:22,whiteSpace:'nowrap',color:'var(--text-primary)',borderBottom:'1px solid var(--border-default)',paddingBottom:6,width:'100%'}}>{founder.signature||'Bold Bee'}</span>
            </div>
            <div style={{fontSize:12,letterSpacing:'0.06em',textTransform:'uppercase',color:'var(--text-muted)'}}>{founder.pubDate?new Date(founder.pubDate).toLocaleDateString('en-IN',{year:'numeric',month:'long',day:'numeric'}):'Publication date to be added'}</div>
          </div>
        </div>
      </section>
    </Reveal>
  );
}
function ChapterSevenFuture({section,future}){
  return (
    <Reveal>
      <section id={section.key} style={{position:'relative',minHeight:'70vh',scrollMarginTop:100}}>
        <img src={photo(section.heroImage,1920)} alt="" loading="lazy" data-temp-asset="true" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
        <div style={{position:'absolute',inset:0,background:'rgba(31,31,31,0.5)',pointerEvents:'none'}}></div>
        <div style={{position:'relative',maxWidth:640,margin:'0 auto',padding:'var(--space-8) var(--container-pad)',textAlign:'center',color:'var(--ivory)'}}>
          {section.subtitle&&<div style={{fontSize:12,letterSpacing:'0.1em',color:'var(--gold)',marginBottom:10,textTransform:'uppercase'}}>{section.subtitle}</div>}
          <H2 style={{color:'var(--ivory)',marginBottom:20}}>{section.heading}</H2>
          <p style={{fontFamily:'var(--font-serif)',fontStyle:'italic',fontSize:19,lineHeight:1.8,opacity:0.92,marginBottom:20}}>&ldquo;{future.quote}&rdquo;</p>
          <div className="bs-rich" style={{fontSize:15,lineHeight:1.85,opacity:0.85,color:'var(--ivory)'}} dangerouslySetInnerHTML={{__html:future.mission}}/>
        </div>
      </section>
    </Reveal>
  );
}
const CHAPTER_COMPONENTS={
  ch1:ChapterOneBeginning,ch2:ChapterTwoPhilosophy,ch3:ChapterThreeHouse,
  ch4:ChapterFourPeople,ch5:ChapterFiveJourney,ch6:ChapterSixLetter,ch7:ChapterSevenFuture
};
function About(){
  React.useEffect(()=>{document.title='Brand Story — Bold Bee';},[]);
  const data=typeof BrandStoryStore!=='undefined'?BrandStoryStore.getPublicData():{sections:[],artisans:[],milestones:[],founder:{},future:{}};
  const sections=data.sections;
  return (
    <React.Fragment>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'20px var(--container-pad) 0'}}>
        <Breadcrumbs trail={[{label:'Home',href:'index.html'},{label:'Brand Story'}]}/>
      </div>
      <ChapterHero/>
      <ChapterNav sections={sections}/>
      {sections.map(s=>{
        const Cmp=CHAPTER_COMPONENTS[s.key];
        if(!Cmp)return null;
        if(s.key==='ch4')return <Cmp key={s.key} section={s} artisans={data.artisans}/>;
        if(s.key==='ch5')return <Cmp key={s.key} section={s} timelineByYear={data.timelineByYear}/>;
        if(s.key==='ch6')return <Cmp key={s.key} section={s} founder={data.founder}/>;
        if(s.key==='ch7')return <Cmp key={s.key} section={s} future={data.future}/>;
        return <Cmp key={s.key} section={s}/>;
      })}
      {typeof PublicationBanner!=='undefined'&&<div style={{paddingTop:'var(--space-section)'}}><PublicationBanner destination="Brand Story"/></div>}
      <div style={{textAlign:'center',padding:'var(--space-6) var(--container-pad)'}}>
        <a href="Collections.html" style={{textDecoration:'none'}}><PrimaryButton>Discover Our Creations</PrimaryButton></a>
      </div>
    </React.Fragment>
  );
}
window.About=About;
