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 CraftHero(){
  return (
    <Reveal>
      <section style={{position:'relative',height:'82vh',minHeight:520}}>
        <img src={photo(18,1920)} alt="Craftsmanship" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(31,31,31,0.15),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'}}>
          <div style={{fontFamily:'var(--font-serif)',fontSize:'clamp(22px,3vw,34px)',fontWeight:600,letterSpacing:'0.12em',textTransform:'uppercase',color:'var(--ivory)',marginBottom:10}}>Bold Bee</div>
          <h1 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(40px,6vw,72px)',margin:'0 0 18px',color:'var(--ivory)'}}>Craftsmanship</h1>
          <p style={{maxWidth:560,margin:'0 auto',fontSize:17,lineHeight:1.8,color:'var(--ivory)',opacity:0.92}}>Every remarkable creation begins long before it is seen. It begins with intention.</p>
        </div>
      </section>
    </Reveal>
  );
}
function CraftSplit({img,heading,body,reverse,children}){
  return (
    <Reveal>
      <section 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,1400)} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        </div>
        <div style={{order:reverse?1:2,maxWidth:480}}>
          <H2 style={{marginBottom:20}}>{heading}</H2>
          {body.map((p,i)=>(<p key={i} style={{fontSize:16,lineHeight:1.9,color:'var(--text-secondary)',marginBottom:14}}>{p}</p>))}
          {children}
        </div>
      </section>
    </Reveal>
  );
}
function CraftTimeline(){
  const steps=['Idea','Research','Sketch','Material Selection','Prototype','Refinement','Final Creation'];
  return (
    <div style={{display:'flex',flexWrap:'wrap',gap:'12px 8px',marginTop:8}}>
      {steps.map((s,i)=>(
        <React.Fragment key={s}>
          <span style={{fontSize:13,letterSpacing:'0.04em',textTransform:'uppercase',color:'var(--text-primary)',border:'1px solid var(--border-default)',borderRadius:'var(--radius-pill)',padding:'8px 16px'}}>{s}</span>
          {i<steps.length-1&&<span style={{color:'var(--text-muted)',display:'flex',alignItems:'center'}}>&rarr;</span>}
        </React.Fragment>
      ))}
    </div>
  );
}
function CraftCentered({heading,body,eyebrow}){
  return (
    <Reveal>
      <section style={{maxWidth:680,margin:'0 auto',padding:'var(--space-6) var(--container-pad)',textAlign:'center'}}>
        {eyebrow&&<Eyebrow>{eyebrow}</Eyebrow>}
        <H2 style={{marginBottom:20}}>{heading}</H2>
        {body.map((p,i)=>(<p key={i} style={{fontSize:16,lineHeight:1.9,color:'var(--text-secondary)',marginBottom:14}}>{p}</p>))}
      </section>
    </Reveal>
  );
}
function CraftPrecision(){
  const stages=[
    ['Material Inspection','Every material is examined before it is deemed worthy of a BOLD BEE creation.'],
    ['Crafting','Skilled hands shape each piece with deliberate, unhurried attention.'],
    ['Finishing','Fine details are refined until the piece meets our quiet standard.'],
    ['Quality Review','Each creation is reviewed against a standard, not a schedule.'],
    ['Packaging','Presented with the same care given to the creation itself.'],
    ['Final Approval','Nothing leaves the studio until it is ready.']
  ];
  return (
    <Reveal>
      <section style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-6) var(--container-pad)'}}>
        <div style={{textAlign:'center',marginBottom:56}}><H2>Precision Without Compromise</H2></div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:40}}>
          {stages.map(([h,b],i)=>(
            <div key={h}>
              <div style={{fontSize:12,color:'var(--gold-deep)',letterSpacing:'0.08em',marginBottom:10}}>{String(i+1).padStart(2,'0')}</div>
              <div style={{fontFamily:'var(--font-serif)',fontSize:20,color:'var(--text-primary)',marginBottom:10}}>{h}</div>
              <p style={{fontSize:14,lineHeight:1.8,color:'var(--text-secondary)'}}>{b}</p>
            </div>
          ))}
        </div>
      </section>
    </Reveal>
  );
}
function CraftSignature(){
  return (
    <Reveal>
      <section style={{position:'relative',height:'70vh',minHeight:440,marginTop:'var(--space-6)'}}>
        <img src={photo(17,1920)} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        <div style={{position:'absolute',inset:0,background:'rgba(31,31,31,0.42)'}}></div>
        <div style={{position:'absolute',left:0,right:0,bottom:'14%',textAlign:'center',color:'var(--ivory)',padding:'0 24px'}}>
          <H2 style={{color:'var(--ivory)',marginBottom:16}}>The Journey Continues</H2>
          <p style={{maxWidth:520,margin:'0 auto 10px',fontSize:16,lineHeight:1.8,opacity:0.92}}>A BOLD BEE creation does not reach its destination when it leaves our studio. Its true journey begins when it becomes part of yours.</p>
          <div style={{marginTop:24,fontFamily:'var(--font-serif)',fontSize:'clamp(32px,5vw,56px)',fontWeight:600,letterSpacing:'0.1em'}}>BOLD BEE</div>
          <div style={{fontSize:12,letterSpacing:'0.1em',textTransform:'uppercase',opacity:0.8,marginTop:4}}>Luxury with Purpose</div>
        </div>
      </section>
    </Reveal>
  );
}
function CraftGallery({imgs,heading}){
  const [active,setActive]=React.useState(0);
  const [lightbox,setLightbox]=React.useState(false);
  return (
    <Reveal>
      <section style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-6) var(--container-pad)'}}>
        {heading&&<div style={{textAlign:'center',marginBottom:40}}><H2>{heading}</H2></div>}
        <div onClick={()=>setLightbox(true)} style={{aspectRatio:'21/9',borderRadius:'var(--radius-lg)',overflow:'hidden',marginBottom:14,cursor:'zoom-in'}}>
          <img src={photo(imgs[active],1800)} alt="" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        </div>
        <div style={{display:'flex',gap:10,overflowX:'auto',paddingBottom:4}}>
          {imgs.map((im,i)=>(
            <button key={i} onClick={()=>setActive(i)} style={{flex:'0 0 auto',width:96,height:72,padding:0,border:i===active?'2px solid var(--gold-deep)':'1px solid var(--border-soft)',borderRadius:'var(--radius-md)',overflow:'hidden',cursor:'pointer',opacity:i===active?1:0.75}}>
              <img src={photo(im,240)} alt="" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            </button>
          ))}
        </div>
        {lightbox&&(
          <div onClick={()=>setLightbox(false)} style={{position:'fixed',inset:0,background:'rgba(31,31,31,0.92)',zIndex:500,display:'flex',alignItems:'center',justifyContent:'center',padding:32}}>
            <img src={photo(imgs[active],1800)} alt="" style={{maxWidth:'92vw',maxHeight:'88vh',objectFit:'contain',borderRadius:'var(--radius-md)'}}/>
            <button onClick={()=>setLightbox(false)} aria-label="Close" style={{position:'absolute',top:28,right:32,background:'none',border:'none',color:'var(--ivory)',fontSize:30,fontWeight:300,cursor:'pointer'}}>&times;</button>
          </div>
        )}
      </section>
    </Reveal>
  );
}
function ArtisanCard({img,role,quote}){
  return (
    <div>
      <div style={{aspectRatio:'4/5',borderRadius:'var(--radius-lg)',overflow:'hidden',marginBottom:18}}>
        <img src={img} alt="" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
      </div>
      <div style={{fontSize:12,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--gold-deep)',marginBottom:10}}>{role}</div>
      <p style={{fontFamily:'var(--font-serif)',fontSize:18,lineHeight:1.6,color:'var(--text-primary)',fontStyle:'italic'}}>“{quote}”</p>
    </div>
  );
}
function CraftMakers(){
  const ARTISAN_IMGS=[
    'uploads/Handloom_Kanjivaram_Silks.png',
    'uploads/Jewellery artisan.png',
    'uploads/perfume artisan.png',
    'uploads/Candle artisan.png'
  ];
  const makers=[
    [ARTISAN_IMGS[0],'Master Weaver','For me, every weave is a conversation between patience and precision.'],
    [ARTISAN_IMGS[1],'Jewellery Artisan','True luxury is created in the smallest details.'],
    [ARTISAN_IMGS[2],'Fragrance & Beauty','A fragrance should be remembered long after it is first experienced.'],
    [ARTISAN_IMGS[3],'Candle Artisan','The finest creations are poured slowly.']
  ];
  return (
    <Reveal>
      <section style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-6) var(--container-pad)'}}>
        <div style={{textAlign:'center',marginBottom:48}}>
          <Eyebrow>Meet the Makers</Eyebrow>
          <H2>The Hands Behind Every Creation</H2>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:32}}>
          {makers.map(([img,role,quote])=>(<ArtisanCard key={role} img={img} role={role} quote={quote}/>))}
        </div>
      </section>
    </Reveal>
  );
}
function CraftDocumentary({img,imgSrc,label,video}){
  const [playing,setPlaying]=React.useState(false);
  const posterSrc=imgSrc||photo(img,1800);
  return (
    <Reveal>
      <section style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-6) var(--container-pad)'}}>
        <div style={{position:'relative',aspectRatio:'16/9',borderRadius:'var(--radius-lg)',overflow:'hidden',background:'var(--charcoal)'}}>
          {playing&&video?(
            <video src={video} controls autoPlay style={{width:'100%',height:'100%',objectFit:'cover'}}/>
          ):(
            <React.Fragment>
              <img src={posterSrc} alt="" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover',opacity:playing?0.35:1,transition:'opacity 300ms var(--ease-out)'}}/>
              {!playing&&(
                <button onClick={()=>setPlaying(true)} aria-label="Play documentary" style={{position:'absolute',inset:0,margin:'auto',width:76,height:76,borderRadius:'50%',border:'1px solid rgba(248,245,240,0.7)',background:'rgba(31,31,31,0.35)',color:'var(--ivory)',fontSize:22,cursor:'pointer'}}>&#9658;</button>
              )}
              {playing&&!video&&(
                <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',color:'var(--ivory)',fontSize:14,letterSpacing:'0.06em',textTransform:'uppercase',textAlign:'center',padding:24}}>Documentary footage to be added — {label}</div>
              )}
            </React.Fragment>
          )}
        </div>
        <p style={{textAlign:'center',fontSize:12,color:'var(--text-muted)',marginTop:14,letterSpacing:'0.04em',textTransform:'uppercase'}}>{label}</p>
      </section>
    </Reveal>
  );
}
function Craftsmanship(){
  React.useEffect(()=>{document.title='Craftsmanship — Bold Bee';},[]);
  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:'Craftsmanship'}]}/>
      </div>
      <CraftHero/>
      <CraftCentered eyebrow="Our Philosophy" heading="Designed with Purpose" body={[
        'Luxury is not created by speed. It is created through patience.',
        'Every decision is deliberate. Every proportion is considered. Every detail exists for a reason.'
      ]}>
        <CraftTimeline/>
      </CraftCentered>
      <CraftSplit img={17} heading="The Beauty Begins with Materials" body={[
        'Every material carries its own character — textiles, leather, precious metals, natural stones, fine fragrance oils, natural waxes, luxury papers and packaging materials, among those still to come.',
        'Each is chosen not for abundance, but for what it brings to a single creation.'
      ]}/>
      <CraftSplit img={20} reverse heading="Human Craft. Timeless Skill." body={[
        'Designers, artisans, metal craftsmen, leather specialists, fragrance creators, packaging designers, textile experts and quality specialists shape every BOLD BEE creation.',
        'Technology may assist. Craftsmanship remains deeply human.'
      ]}/>
      <CraftMakers/>
      <CraftDocumentary imgSrc="uploads/Image 24-07-26 at 8.19 PM.png" label="Silk Weaving — Documentary" video="uploads/female weaver.mp4"/>
      <CraftPrecision/>
      <CraftCentered heading="Some Things Should Never Be Rushed" body={[
        'True luxury respects time. Some creations demand careful refinement. Others require repeated evaluation before they are considered complete.',
        'Time is not an expense. It is part of the creation itself.'
      ]}/>
      <CraftSplit img={19} heading="Crafted for Today. Created to Last." body={[
        'Responsible sourcing, quality over quantity, longevity and thoughtful packaging guide every decision.',
        'We craft mindfully today, with a quiet commitment to what sustainability will demand of us tomorrow.'
      ]}/>
      <CraftSignature/>
      {typeof PublicationBanner!=='undefined'&&<PublicationBanner destination="Craftsmanship"/>}
      <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.Craftsmanship=Craftsmanship;
