function Reveal({children,style}){
  const ref=React.useRef(null);
  const [shown,setShown]=React.useState(false);
  React.useEffect(()=>{
    const el=ref.current;
    if(!el){setShown(true);return;}
    const rect=el.getBoundingClientRect();
    if(rect.top<window.innerHeight*1.2){setShown(true);return;}
    const obs=new IntersectionObserver(([e])=>{if(e.isIntersecting){setShown(true);obs.disconnect();}},{threshold:0,rootMargin:'200px'});
    obs.observe(el);
    const fallback=setTimeout(()=>setShown(true),1200);
    return ()=>{obs.disconnect();clearTimeout(fallback);};
  },[]);
  return <div ref={ref} style={{...style,opacity:shown?1:0,transform:shown?'translateY(0)':'translateY(24px)',transition:'opacity 900ms var(--ease-out),transform 900ms var(--ease-out)'}}>{children}</div>;
}
const CATEGORIES=[['Sarees','For every occasion'],['Blouses','Tailored to pair'],['Dupattas','Sheer finishing pieces']];
const LOOKS=[['Look 01','Morning drape, natural light'],['Look 02','Evening zari, low light'],['Look 03','Studio portrait, temple border']];

function Homepage(){
  const hero=window.BBExperience?window.BBExperience.publishedHero({headline:'Woven in Silence',button1:'Explore the Collection',button1Link:'Collections.html'}):{headline:'Woven in Silence',button1:'Explore the Collection',button1Link:'Collections.html'};
  const isOn=name=>window.BBExperience?window.BBExperience.isEnabled(name):true;
  const campaign=window.BBExperience?(window.BBExperience.publishedPublications('Homepage')[0]||null):null;
  return (
    <div>
      {isOn('Hero Banner')&&<section style={{position:'relative',height:'92vh',minHeight:600}}>
        <img src={photo(0,1800)} style={{width:'100%',height:'100%',objectFit:'cover'}} alt="hero"/>
        <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(31,31,31,0.05),rgba(31,31,31,0.35))',pointerEvents:'none'}}></div>
        <div style={{position:'absolute',left:0,right:0,bottom:'12%',textAlign:'center',color:'var(--ivory)'}}>
          <div style={{fontSize:12,letterSpacing:'var(--tracking-widest)',textTransform:'uppercase',marginBottom:18,opacity:0.9}}>New Collection</div>
          <h1 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(40px,6vw,84px)',margin:0,letterSpacing:0.5}}>{hero.headline}</h1>
          <div style={{marginTop:28}}>
            <a href={hero.button1Link} style={{background:'var(--ivory)',color:'var(--charcoal)',border:'none',padding:'16px 40px',borderRadius:'var(--radius-pill)',fontSize:13,letterSpacing:'var(--tracking-wide)',cursor:'pointer',textDecoration:'none',display:'inline-block'}}>{hero.button1}</a>
          </div>
        </div>
      </section>}

      {campaign&&<Reveal style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-section) var(--container-pad) 0'}}>
        <a href={`Publication.html?id=${campaign.id}`} style={{textDecoration:'none',display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:40,alignItems:'center',background:'var(--beige)',borderRadius:'var(--radius-lg)',overflow:'hidden'}}>
          <div style={{padding:'var(--space-7)'}}>
            <Eyebrow>{campaign.contentType||'Featured'}</Eyebrow>
            <H2 style={{marginBottom:16}}>{campaign.title}</H2>
            {campaign.shortDescription&&<p style={{fontSize:15,lineHeight:1.8,color:'var(--text-secondary)',marginBottom:20,maxWidth:440}}>{campaign.shortDescription}</p>}
            <span style={{fontSize:13,letterSpacing:'var(--tracking-wide)',textTransform:'uppercase',color:'var(--gold-deep)',borderBottom:'1px solid var(--gold-deep)',paddingBottom:2}}>Read More</span>
          </div>
          <div style={{aspectRatio:'4/3'}}><img src={photo(campaign.heroImg||3,1200)} style={{width:'100%',height:'100%',objectFit:'cover'}} alt={campaign.title}/></div>
        </a>
      </Reveal>}

      {isOn('Featured Collections')&&<Reveal style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-section) var(--container-pad) var(--space-7)'}}>
        <div style={{textAlign:'center',marginBottom:48}}>
          <Eyebrow style={{marginBottom:16}}>Featured Collections</Eyebrow>
          <H2>{window.BBExperience?window.BBExperience.override('Featured Collections','headline','Three Editions, One Season'):'Three Editions, One Season'}</H2>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:28}}>
          {COLLECTIONS.map((c,i)=>(
            <a key={c.slug} href={`Collections.html?collection=${c.slug}`} style={{position:'relative',aspectRatio:'3/4',borderRadius:'var(--radius-lg)',overflow:'hidden',cursor:'pointer',display:'block',textDecoration:'none'}}>
              <img src={photo(1+i)} style={{width:'100%',height:'100%',objectFit:'cover'}} alt={c.name}/>
              <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(31,31,31,0),rgba(31,31,31,0.55))'}}></div>
              <div style={{position:'absolute',left:24,right:24,bottom:24,color:'var(--ivory)'}}>
                <div style={{fontFamily:'var(--font-serif)',fontSize:22,marginBottom:4}}>{c.name}</div>
                <div style={{fontSize:13,opacity:0.85}}>{c.desc}</div>
              </div>
            </a>
          ))}
        </div>
      </Reveal>}

      {isOn('New Arrivals')&&<Reveal style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-section) var(--container-pad)'}}>
        <div style={{textAlign:'center',marginBottom:48}}>
          <Eyebrow>New Arrivals</Eyebrow>
          <H2>{window.BBExperience?window.BBExperience.override('New Arrivals','headline','Recently Woven'):'Recently Woven'}</H2>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:28}}>
          {PRODUCTS.slice(0,4).map(p=>(<ProductTile key={p.id} p={p}/>))}
        </div>
      </Reveal>}

      {isOn('Editorial')&&<Reveal style={{position:'relative',minHeight:600,display:'flex',alignItems:'stretch'}}>
        <div style={{flex:1,position:'relative'}}><img src={photo(9)} style={{width:'100%',height:'100%',objectFit:'cover'}} alt="editorial"/></div>
        <div style={{flex:1,background:'var(--beige)',display:'flex',alignItems:'center',padding:'var(--space-8)'}}>
          <div style={{maxWidth:440}}>
            <Eyebrow>Editorial · The Season</Eyebrow>
            <H2 style={{marginBottom:20}}>A Length of Silk, Worn as an Heirloom</H2>
            <p style={{fontSize:16,lineHeight:1.8,color:'var(--text-secondary)',margin:'0 0 28px'}}>Photographed in the same light the weavers work by — this season's edit is built around three weaves passed through three generations of the same families.</p>
            <a href="Journal.html" style={{fontSize:13,letterSpacing:'var(--tracking-wide)',textTransform:'uppercase',color:'var(--gold-deep)',cursor:'pointer',borderBottom:'1px solid var(--gold-deep)',paddingBottom:2,textDecoration:'none'}}>Read the Story</a>
          </div>
        </div>
      </Reveal>}

      {isOn('Brand Story')&&<Reveal style={{maxWidth:900,margin:'0 auto',padding:'var(--space-section) var(--container-pad)',textAlign:'center'}}>
        <Eyebrow>Brand Story</Eyebrow>
        <H2 style={{marginBottom:24}}>We Measure Craft in Weeks, Not Units</H2>
        <p style={{fontSize:17,lineHeight:1.9,color:'var(--text-secondary)',maxWidth:640,margin:'0 auto 28px'}}>Bold Bee works with a small number of weaving families across India, each holding a tradition specific to their region. We do not chase volume — every saree is made to order, on a named loom, by a named weaver.</p>
        <a href="About.html" style={{fontSize:13,letterSpacing:'var(--tracking-wide)',textTransform:'uppercase',color:'var(--gold-deep)',textDecoration:'none',borderBottom:'1px solid var(--gold-deep)',paddingBottom:2}}>Our Story</a>
      </Reveal>}

      {isOn('Shop by Category')&&<Reveal style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'0 var(--container-pad) var(--space-section)'}}>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24}}>
          {CATEGORIES.map(([name,desc],i)=>(
            <a key={name} href={`Collections.html?category=${encodeURIComponent(name)}`} style={{position:'relative',aspectRatio:'3/4',borderRadius:'var(--radius-lg)',overflow:'hidden',cursor:'pointer',display:'block',textDecoration:'none'}}>
              <img src={photo(10+i)} style={{width:'100%',height:'100%',objectFit:'cover'}} alt={name}/>
              <div style={{position:'absolute',inset:0,background:'rgba(31,31,31,0.22)'}}></div>
              <div style={{position:'absolute',left:20,top:20,color:'var(--ivory)'}}>
                <div style={{fontFamily:'var(--font-serif)',fontSize:20}}>{name}</div>
                <div style={{fontSize:12,opacity:0.85,marginTop:2}}>{desc}</div>
              </div>
            </a>
          ))}
        </div>
      </Reveal>}

      {isOn('Lookbook')&&<Reveal style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'0 var(--container-pad) var(--space-section)'}}>
        <div style={{textAlign:'center',marginBottom:48}}><Eyebrow>Lookbook</Eyebrow><H2>Autumn, in Three Frames</H2></div>
        {LOOKS.map(([name,cap],i)=>(
          <a key={name} href="Journal.html" style={{textDecoration:'none',display:'flex',flexDirection:i%2?'row-reverse':'row',alignItems:'center',gap:48,marginBottom:56}}>
            <div style={{flex:1.3,aspectRatio:'4/3',borderRadius:'var(--radius-lg)',overflow:'hidden'}}><img src={photo(13+i)} style={{width:'100%',height:'100%',objectFit:'cover',filter:'sepia(0.18) saturate(1.08) contrast(1.03)'}} alt={name}/></div>
            <div style={{flex:1,textAlign:i%2?'right':'left'}}>
              <div style={{fontFamily:'var(--font-serif)',fontSize:24,color:'var(--text-primary)',marginBottom:8}}>{name}</div>
              <div style={{fontSize:14,color:'var(--text-muted)'}}>{cap}</div>
            </div>
          </a>
        ))}
      </Reveal>}

      {isOn('Customer Notes')&&<Reveal style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-section) var(--container-pad)',textAlign:'center'}}>
        <Eyebrow style={{marginBottom:40}}>Customer Notes</Eyebrow>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:48,textAlign:'left'}}>
          {[['The drape is unlike anything from a boutique — you can feel the years of skill.','Anjali R.'],['Arrived with a handwritten note from the weaving family. Extraordinary.','Priya M.'],['My mother wore Kanjivaram at her wedding; this saree carries the same weight and grace.','Deepa S.']].map(([q,n])=>(
            <div key={n}>
              <p style={{fontFamily:'var(--font-serif)',fontStyle:'italic',fontSize:20,lineHeight:1.6,color:'var(--text-primary)',margin:'0 0 16px'}}>&ldquo;{q}&rdquo;</p>
              <div style={{fontSize:13,letterSpacing:'var(--tracking-wide)',color:'var(--text-muted)',textTransform:'uppercase'}}>{n}</div>
            </div>
          ))}
        </div>
      </Reveal>}

      {isOn('Newsletter Section')&&<Newsletter/>}

      {isOn('Instagram Gallery')&&<Reveal style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-section) var(--container-pad)'}}>
        <Eyebrow style={{textAlign:'center',marginBottom:24}}>@boldbee</Eyebrow>
        <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:4}}>
          {[0,1,2,3,4,5].map(i=>(<div key={i} style={{aspectRatio:'1/1'}}><img src={photo(i,800)} style={{width:'100%',height:'100%',objectFit:'cover'}} alt="instagram"/></div>))}
        </div>
      </Reveal>}
    </div>
  );
}
window.Homepage=Homepage;