function ChronicleReveal({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.12});
    obs.observe(el);
    return ()=>obs.disconnect();
  },[]);
  return <div ref={ref} style={{opacity:visible?1:0,transform:visible?'translateY(0)':'translateY(24px)',transition:'opacity 800ms var(--ease-out), transform 800ms var(--ease-out)',...style}}>{children}</div>;
}
function ChronicleQuote({children}){
  return (
    <ChronicleReveal style={{maxWidth:560,margin:'0 auto',padding:'var(--space-6) 0',textAlign:'center'}}>
      <p style={{fontFamily:'var(--font-serif)',fontStyle:'italic',fontSize:'clamp(19px,2.2vw,24px)',lineHeight:1.6,color:'var(--text-primary)'}}>&ldquo;{children}&rdquo;</p>
    </ChronicleReveal>
  );
}
function ChronicleChapter({numeral,title,img,body,reverse}){
  return (
    <ChronicleReveal>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-6) var(--container-pad)',display:'grid',gridTemplateColumns:'1fr 1fr',gap:'var(--space-7)',alignItems:'center'}}>
        <div style={{order:reverse?2:1,aspectRatio:'4/5',borderRadius:'var(--radius-lg)',overflow:'hidden'}}>
          <img src={photo(img,1200)} alt="" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        </div>
        <div style={{order:reverse?1:2,maxWidth:460}}>
          <div style={{fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--gold-deep)',marginBottom:8}}>Chapter {numeral}</div>
          <h3 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(22px,2.6vw,30px)',margin:'0 0 18px',color:'var(--text-primary)'}}>{title}</h3>
          {body.map((p,i)=>(<p key={i} style={{fontSize:16,lineHeight:1.9,color:'var(--text-secondary)',marginBottom:14}}>{p}</p>))}
        </div>
      </div>
    </ChronicleReveal>
  );
}
function CreationChronicle({product}){
  const p=product;
  const admin=(typeof ChronicleStore!=='undefined')?ChronicleStore.publicChronicleFor(p.id):null;
  const imgs={
    inspiration:(p.imgs&&p.imgs[0])||2, materials:(p.imgs&&p.imgs[1])||5,
    hands:7, refinement:(p.imgs&&p.imgs[p.imgs.length-1])||9, legacy:16
  };
  if(admin){
    const chapterImgs=[imgs.inspiration,imgs.materials,imgs.hands,imgs.refinement,imgs.legacy];
    const numerals=['I','II','III','IV','V'];
    return (
      <section style={{borderTop:'1px solid var(--border-soft)',borderBottom:'1px solid var(--border-soft)',padding:'var(--space-6) 0'}}>
        <ChronicleReveal style={{maxWidth:680,margin:'0 auto',padding:'var(--space-section) var(--container-pad) 0',textAlign:'center'}}>
          <div style={{fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--gold-deep)',marginBottom:12}}>{admin.header}</div>
          <h2 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(26px,3.4vw,38px)',margin:'0 0 20px',color:'var(--text-primary)'}}>{admin.subheading}</h2>
          <p style={{fontSize:16,lineHeight:1.9,color:'var(--text-secondary)',whiteSpace:'pre-line'}}>{admin.intro}</p>
        </ChronicleReveal>
        {admin.chapters.map((ch,i)=>(ch.body||ch.image)?(
          <ChronicleChapter key={i} numeral={numerals[i]} title={ch.title} img={ch.image||chapterImgs[i]} reverse={i%2===1} body={(ch.body||'').split('\n').filter(Boolean)}/>
        ):null)}
        {admin.quotes.map((q,i)=>(<ChronicleQuote key={i}>{q}</ChronicleQuote>))}
        {admin.signatureReflection&&(
          <ChronicleReveal style={{maxWidth:560,margin:'0 auto',padding:'var(--space-section) var(--container-pad)',textAlign:'center'}}>
            <p style={{fontFamily:'var(--font-serif)',fontSize:'clamp(18px,2vw,22px)',lineHeight:1.7,color:'var(--text-primary)',whiteSpace:'pre-line'}}>{admin.signatureReflection}</p>
          </ChronicleReveal>
        )}
      </section>
    );
  }
  return (
    <section style={{borderTop:'1px solid var(--border-soft)',borderBottom:'1px solid var(--border-soft)',padding:'var(--space-6) 0'}}>
      <ChronicleReveal style={{maxWidth:680,margin:'0 auto',padding:'var(--space-section) var(--container-pad) 0',textAlign:'center'}}>
        <div style={{fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--gold-deep)',marginBottom:12}}>The Creation Chronicle</div>
        <h2 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(26px,3.4vw,38px)',margin:'0 0 20px',color:'var(--text-primary)'}}>From Inspiration to Legacy</h2>
        <p style={{fontSize:16,lineHeight:1.9,color:'var(--text-secondary)'}}>Every remarkable creation begins long before it is held in the hands of its owner. It is imagined with intention, shaped through exceptional craftsmanship, refined with patience, and ultimately entrusted to become part of another life's story. Each creation carries its own chronicle — one that begins with inspiration and continues through every generation that chooses to preserve it.</p>
      </ChronicleReveal>
      <ChronicleChapter numeral="I" title="The Inspiration" img={imgs.inspiration} body={[
        'Every Bold Bee creation begins as a feeling before it becomes a form — drawn from memory, from travel, from the quiet architecture of a place once seen and never forgotten.',
        'This is where the chronicle starts: not with a specification, but with an idea worth pursuing.'
      ]}/>
      <ChronicleQuote>Craft is remembered long after perfection is forgotten.</ChronicleQuote>
      <ChronicleChapter numeral="II" title="The Choice of Materials" img={imgs.materials} reverse body={[
        'Every material earns its place through character, not convenience — chosen for the way it ages, the way it catches light, the way it will be remembered.',
        'What matters here is authenticity, not specification. The material is a partner in the story, not a line on a datasheet.'
      ]}/>
      <ChronicleChapter numeral="III" title="The Hands Behind It" img={imgs.hands} body={[
        'Every creation passes through hands that have practiced their craft for years, sometimes generations — patient, precise, unhurried by anything but the work itself.',
        'This chapter belongs to the artisans whose skill turns material into meaning.'
      ]}/>
      <ChronicleQuote>Patience is the material no craftsman can buy — only practice.</ChronicleQuote>
      <ChronicleChapter numeral="IV" title="The Final Refinement" img={imgs.refinement} reverse body={[
        'Before any creation is ready to leave the studio, it is inspected, finished and presented with the same care given to its making.',
        'Nothing is rushed at this stage. A creation is only complete when it meets a standard, not a deadline.'
      ]}/>
      <ChronicleReveal style={{position:'relative',height:'56vh',minHeight:360,margin:'var(--space-section) 0'}}>
        <img src={photo(imgs.legacy,1800)} alt="" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        <div style={{position:'absolute',inset:0,background:'rgba(31,31,31,0.38)'}}></div>
        <div style={{position:'absolute',left:0,right:0,bottom:'12%',textAlign:'center',color:'var(--ivory)',padding:'0 24px'}}>
          <div style={{fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase',opacity:0.85,marginBottom:10}}>Chapter V</div>
          <h3 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(24px,3vw,32px)',margin:'0 0 14px',color:'var(--ivory)'}}>Its Legacy Begins</h3>
          <p style={{maxWidth:520,margin:'0 auto',fontSize:16,lineHeight:1.8,opacity:0.92}}>This creation now begins the most meaningful chapter of its life — the one written by the individual who chooses to make it part of their own story.</p>
        </div>
      </ChronicleReveal>
    </section>
  );
}
window.CreationChronicle=CreationChronicle;